Add minio connection

backend/apps.yaml

@@ -22,6 +22,4 @@ sections:
     icon: http://192.168.10.118:1111/icons/woodpecker-ci.svg
     name: Woodpecker
     url: https://woodpecker.dvirlabs.com
-  name: Dev-tools
-
-
+  name: Dev-tools

backend/main.py

@@ -3,6 +3,8 @@ from fastapi.middleware.cors import CORSMiddleware
 import yaml
 from pathlib import Path
 from pydantic import BaseModel
+from minio import Minio
+from datetime import timedelta
 
 
 app = FastAPI()
@@ -15,6 +17,16 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# MinIO connection with access and secret keys
+minio_client = Minio(
+    "minio.dvirlabs.com",
+    access_key="YOUR_MINIO_ACCESS_KEY",
+    secret_key="YOUR_MINIO_SECRET_KEY",
+    secure=True  # Set to False if using HTTP
+)
+
+BUCKET = "navix-icons"
+
 @app.get("/")
 async def root():
     return {"message": "Welcome to the FastAPI application!"}
@@ -63,6 +75,18 @@ def add_app(entry: AppEntry):
 
     return {"status": "added"}
 
+@app.get("/icon/{filename}")
+def get_presigned_icon_url(filename: str):
+    try:
+        url = minio_client.presigned_get_object(
+            bucket_name=BUCKET,
+            object_name=filename,
+            expires=timedelta(hours=1)
+        )
+        return {"url": url}
+    except Exception as e:
+        return {"error": str(e)}
+
 
 if __name__ == "__main__":
     import uvicorn

frontend/src/components/AppCard.jsx

@@ -1,10 +1,21 @@
-import '../style/AppCard.css';
+import { useEffect, useState } from 'react';
+import { getIconUrl } from '../services/api';
 
 function AppCard({ app }) {
+  const [iconUrl, setIconUrl] = useState('');
+
+  useEffect(() => {
+    if (app.icon) {
+      getIconUrl(app.icon)
+        .then(setIconUrl)
+        .catch(() => setIconUrl('fallback-icon.svg'));
+    }
+  }, [app.icon]);
+
   return (
     <a href={app.url} className="app-card" target="_blank" rel="noreferrer">
       <div className="app-icon-wrapper">
-        <img src={app.icon} alt={app.name} className="app-icon" />
+        <img src={iconUrl} alt={app.name} className="app-icon" />
       </div>
       <h3>{app.name}</h3>
       <p>{app.description}</p>

frontend/src/services/api.js

@@ -12,4 +12,11 @@ export async function addAppToSection({ section, app }) {
   });
   if (!res.ok) throw new Error(await res.text());
   return res.json();
+}
+
+export async function getIconUrl(filename) {
+  const res = await fetch(`/icon/${filename}`);
+  if (!res.ok) throw new Error(`Failed to fetch icon for ${filename}`);
+  const data = await res.json();
+  return data.url;
 }