Clean up and tweak card layout

config/config.yaml

@@ -1,223 +0,0 @@
-sections:
-  - id: "system"
-    title: "System"
-    icon: "Server"
-    cardStyle:
-      background: "bg-blue-50 dark:bg-blue-950/30"
-      iconColor: "text-blue-600 dark:text-blue-400"
-
-  - id: "media"
-    title: "Media"
-    icon: "Play"
-    cardStyle:
-      background: "bg-orange-50 dark:bg-orange-950/30"
-      iconColor: "text-orange-600 dark:text-orange-400"
-
-  - id: "monitoring"
-    title: "Monitoring"
-    icon: "Activity"
-    cardStyle:
-      background: "bg-emerald-50 dark:bg-emerald-950/30"
-      iconColor: "text-emerald-600 dark:text-emerald-400"
-
-  - id: "tools"
-    title: "Tools"
-    icon: "Settings"
-    cardStyle:
-      background: "bg-purple-50 dark:bg-purple-950/30"
-      iconColor: "text-purple-600 dark:text-purple-400"
-
-  - id: "acot"
-    title: "ACOT"
-    icon: "LayoutDashboard"
-    cardStyle:
-      background: "bg-sky-50 dark:bg-sky-950/30"
-      iconColor: "text-sky-600 dark:text-sky-400"
-
-  - id: "home"
-    title: "Home"
-    icon: "Home"
-    cardStyle:
-      background: "bg-indigo-50 dark:bg-indigo-950/30"
-      iconColor: "text-indigo-600 dark:text-indigo-400"
-
-services:
-  - name: "Portainer"
-    description: "Container Management"
-    url: "https://portainer.kent.pw"
-    iconName: "portainer"
-    category: "system"
-    cardStyle:
-      background: "bg-blue-50 dark:bg-blue-950/30"
-      iconColor: "text-blue-600 dark:text-blue-400"
-
-  - name: "Gitea"
-    description: "Git Server"
-    url: "https://gitea.kent.pw"
-    iconName: "gitea"
-    category: "system"
-    cardStyle:
-      background: "bg-green-50 dark:bg-green-950/30"
-      iconColor: "text-green-600 dark:text-green-400"
-
-  - name: "Cockpit"
-    description: "Server Management"
-    url: "https://cockpit.kent.pw"
-    iconName: "cockpit"
-    category: "system"
-
-  - name: "DiskStation"
-    description: "Synology NAS"
-    url: "https://diskstation.kent.pw"
-    iconName: "synology"
-    category: "system"
-    monitorName: "Synology Diskstation"
-    cardStyle:
-      background: "bg-slate-50 dark:bg-slate-950/30"
-      iconColor: "text-slate-600 dark:text-slate-400"
-
-  - name: "Plex"
-    description: "Media Server"
-    url: "https://plex.kent.pw"
-    iconName: "plex"
-    category: "media"
-    cardStyle:
-      background: "bg-orange-50 dark:bg-orange-950/30"
-      iconColor: "text-orange-600 dark:text-orange-400"
-
-  - name: "Sonarr"
-    description: "TV Show Management"
-    url: "https://sonarr.kent.pw"
-    iconName: "sonarr"
-    category: "media"
-    cardStyle:
-      background: "bg-blue-50 dark:bg-blue-950/30"
-      iconColor: "text-blue-600 dark:text-blue-400"
-
-  - name: "Jackett"
-    description: "Torrent Indexer"
-    url: "https://jackett.kent.pw"
-    iconName: "jackett"
-    category: "media"
-
-  - name: "Deluge"
-    description: "Torrent Client"
-    url: "https://deluge.kent.pw"
-    iconName: "deluge"
-    category: "media"
-    cardStyle:
-      background: "bg-green-50 dark:bg-green-950/30"
-      iconColor: "text-green-600 dark:text-green-400"
-
-  - name: "Uptime"
-    description: "Service Monitoring"
-    url: "https://uptime.kent.pw"
-    iconName: "uptime-kuma"
-    category: "monitoring"
-    monitorName: "Uptime Kuma"
-    cardStyle:
-      background: "bg-emerald-50 dark:bg-emerald-950/30"
-      iconColor: "text-emerald-600 dark:text-emerald-400"
-
-  - name: "AdGuard"
-    description: "Network Ad Blocking"
-    url: "https://adguard.kent.pw"
-    iconName: "adguard-home"
-    category: "system"
-    monitorName: "Adguard Home"
-    cardStyle:
-      background: "bg-emerald-50 dark:bg-emerald-950/30"
-      iconColor: "text-emerald-600 dark:text-emerald-400"
-
-  - name: "NocoDB"
-    description: "Database Platform"
-    url: "https://noco.kent.pw"
-    iconName: "nocodb"
-    category: "tools"
-    monitorName: "NocoDB"
-
-  - name: "IT Tools"
-    description: "Developer Utilities"
-    url: "https://ittools.kent.pw"
-    iconName: "it-tools"
-    category: "tools"
-    monitorName: "IT Tools"
-
-  - name: "Firefox"
-    description: "Browser Instance"
-    url: "https://firefox.kent.pw"
-    iconName: "firefox"
-    category: "tools"
-    cardStyle:
-      background: "bg-orange-50 dark:bg-orange-950/30"
-      iconColor: "text-orange-600 dark:text-orange-400"
-
-  - name: "Speedtest"
-    description: "Network Speed Monitor"
-    url: "https://speedtest.kent.pw"
-    iconName: "speedtest-tracker"
-    category: "monitoring"
-    monitorName: "Speedtest Tracker"
-    cardStyle:
-      background: "bg-blue-50 dark:bg-blue-950/30"
-      iconColor: "text-blue-600 dark:text-blue-400"
-
-  - name: "Netdata"
-    description: "Monitoring Dashboard"
-    url: "https://netdata.kent.pw"
-    iconName: "netdata"
-    category: "monitoring"
-    monitorName: "Netdata"
-    cardStyle:
-      background: "bg-purple-50 dark:bg-purple-950/30"
-      iconColor: "text-purple-600 dark:text-purple-400"
-      
-  - name: "File Browser"
-    description: "Edit Server Files"
-    url: "https://files.kent.pw"
-    iconName: "file-browser"
-    category: "monitoring"
-    monitorName: "File Browser"
-    cardStyle:
-      background: "bg-blue-50 dark:bg-blue-950/30"
-      iconColor: "text-blue-600 dark:text-blue-400"
-
-  - name: "Drive"
-    description: "File Storage"
-    url: "https://drive.kent.pw"
-    iconName: "synology"
-    category: "tools"
-    monitorName: "Synology Drive"
-
-  - name: "Dashboard"
-    description: "ACOT Dashboard"
-    url: "https://dashboard.kent.pw"
-    iconName: "lucide-layout-dashboard"
-    category: "acot"
-    cardStyle:
-      background: "bg-sky-50 dark:bg-sky-950/30"
-      iconColor: "text-sky-600 dark:text-sky-400"
-
-  - name: "Inventory"
-    description: "ACOT Inventory"
-    url: "https://inventory.kent.pw"
-    iconName: "lucide-box"
-    category: "acot"
-
-  - name: "Homebridge"
-    description: "HomeKit Bridge"
-    url: "https://homebridge.kent.pw"
-    iconName: "homebridge"
-    category: "home"
-    cardStyle:
-      background: "bg-purple-50 dark:bg-purple-950/30"
-      iconColor: "text-purple-600 dark:text-purple-400"
-
-  - name: "Scrypted"
-    description: "Smart Home Integration"
-    url: "https://scrypted.kent.pw"
-    iconName: "scrypted"
-    category: "home"
-    cardStyle:
-      background: "bg-indigo-50 dark:bg-indigo-950/30"
-      iconColor: "text-indigo-600 dark:text-indigo-400" 

public/config.yaml

@@ -43,7 +43,7 @@ sections:
 
 services:
   - name: "Portainer"
-    description: "Container Management"
+    description: "Docker Manager"
     url: "https://portainer.kent.pw"
     iconName: "portainer"
     category: "system"
@@ -86,7 +86,7 @@ services:
       iconColor: "text-orange-600 dark:text-orange-400"
 
   - name: "Sonarr"
-    description: "TV Show Management"
+    description: "TV Manager"
     url: "https://sonarr.kent.pw"
     iconName: "sonarr"
     category: "media"
@@ -120,14 +120,14 @@ services:
       iconColor: "text-emerald-600 dark:text-emerald-400"
 
   - name: "AdGuard"
-    description: "Network Ad Blocking"
+    description: "DNS Ad Blocking"
     url: "https://adguard.kent.pw"
     iconName: "adguard-home"
     category: "system"
     monitorName: "Adguard Home"
     cardStyle:
-      background: "bg-emerald-50 dark:bg-emerald-950/30"
+      background: "bg-green-50 dark:bg-green-950/30"
-      iconColor: "text-emerald-600 dark:text-emerald-400"
+      iconColor: "text-green-600 dark:text-green-400"
 
   - name: "NocoDB"
     description: "Database Platform"
@@ -153,7 +153,7 @@ services:
       iconColor: "text-orange-600 dark:text-orange-400"
 
   - name: "Speedtest"
-    description: "Network Speed Monitor"
+    description: "Internet Speed"
     url: "https://speedtest.kent.pw"
     iconName: "speedtest-tracker"
     category: "monitoring"
@@ -163,7 +163,7 @@ services:
       iconColor: "text-blue-600 dark:text-blue-400"
 
   - name: "Netdata"
-    description: "Monitoring Dashboard"
+    description: "Server Monitoring"
     url: "https://netdata.kent.pw"
     iconName: "netdata"
     category: "monitoring"
@@ -175,8 +175,8 @@ services:
   - name: "FileBrowser"
     description: "Edit Server Files"
     url: "https://files.kent.pw"
-    iconName: "file-browser"
+    iconName: "lucide-file-terminal"
-    category: "monitoring"
+    category: "tools"
     monitorName: "File Browser"
     cardStyle:
       background: "bg-blue-50 dark:bg-blue-950/30"
@@ -214,10 +214,30 @@ services:
       iconColor: "text-purple-600 dark:text-purple-400"
 
   - name: "Scrypted"
-    description: "Smart Home Integration"
+    description: "Manage Cameras"
     url: "https://scrypted.kent.pw"
     iconName: "scrypted"
     category: "home"
     cardStyle:
       background: "bg-indigo-50 dark:bg-indigo-950/30"
       iconColor: "text-indigo-600 dark:text-indigo-400" 
+
+  - name: "3D Printer"
+    description: "Fluidd Interface"
+    url: "https://print.kent.pw"
+    iconName: "fluidd"
+    category: "home"
+    monitorName: "Printer"
+    cardStyle:
+      background: "bg-sky-50 dark:bg-sky-950/30"
+      iconColor: "text-sky-600 dark:text-sky-400"
+
+  - name: "Go2RTC"
+    description: "Stream Cameras"
+    url: "https://go2rtc.kent.pw"
+    iconName: "lucide-webcam"
+    category: "home"
+    monitorName: "Go2RTC"
+    cardStyle:
+      background: "bg-orange-50 dark:bg-orange-950/30"
+      iconColor: "text-orange-600 dark:text-orange-400"

src/App.tsx

@@ -145,7 +145,7 @@ function ServiceSection({ section, services, metrics }: {
         <h2 className="text-2xl font-bold">{section.title}</h2>
         <Separator className="flex-1 ml-4" />
       </div>
-      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
         {services.map((service) => {
           const serviceMetrics = metrics[service.monitorName || service.name] || {
             status: 'pending',
@@ -166,13 +166,13 @@ function ServiceSection({ section, services, metrics }: {
               rel="noopener noreferrer"
               className="transition-transform hover:scale-105"
             >
-              <Card className={`${style.background} hover:${style.background}`}>
+              <Card className={`${style.background} hover:${style.background} overflow-hidden`}>
-                <CardHeader className={`flex flex-row items-center justify-between space-y-0 pb-2 ${style.background}`}>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 md:pb-1">
                   <div className="flex items-center">
                     <div className={style.iconColor}>
                       <ServiceIcon service={service} section={section} isDark={isDark} />
                     </div>
-                    <CardTitle className="ml-2">{service.name}</CardTitle>
+                    <CardTitle className="ml-1.5">{service.name}</CardTitle>
                   </div>
                   <StatusIndicator 
                     status={serviceMetrics.status}
@@ -180,8 +180,8 @@ function ServiceSection({ section, services, metrics }: {
                     certDaysRemaining={serviceMetrics.certDaysRemaining}
                   />
                 </CardHeader>
-                <CardContent className={style.background}>
+                <CardContent className="p-4 pt-1 hidden md:block">
-                  <CardDescription>{service.description}</CardDescription>
+                  <CardDescription className="text-sm text-foreground-muted">{service.description}</CardDescription>
                 </CardContent>
               </Card>
             </a>

tailwind.config.js

@@ -5,6 +5,16 @@ export default {
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
     ],
+    safelist: [
+        {
+            pattern: /^bg-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
+            variants: ['hover', 'dark']
+        },
+        {
+            pattern: /^text-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
+            variants: ['dark']
+        }
+    ],
     theme: {
         container: {
             center: true,