Add reusable Badge component and refactor badge usage (#37)

MickLesk · web-flow · commit 51bad284d431 · 2025-10-06T14:34:34.000+02:00
Introduces a new Badge component with variants for type, updateable, privileged, status, execution mode, and note. Refactors ScriptCard, ScriptDetailModal, and InstalledScriptsTab to use the new Badge components, improving consistency and maintainability. Also updates DarkModeProvider and layout.tsx for better dark mode handling and fallback.
diff --git a/src/app/_components/Badge.tsx b/src/app/_components/Badge.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+
+interface BadgeProps {
+  variant: 'type' | 'updateable' | 'privileged' | 'status' | 'note' | 'execution-mode';
+  type?: string;
+  noteType?: 'info' | 'warning' | 'error';
+  status?: 'success' | 'failed' | 'in_progress';
+  executionMode?: 'local' | 'ssh';
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Badge({ variant, type, noteType, status, executionMode, children, className = '' }: BadgeProps) {
+  const getTypeStyles = (scriptType: string) => {
+    switch (scriptType.toLowerCase()) {
+      case 'ct':
+        return 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-700';
+      case 'addon':
+        return 'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 border-purple-200 dark:border-purple-700';
+      case 'vm':
+        return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border-green-200 dark:border-green-700';
+      case 'pve':
+        return 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-200 border-orange-200 dark:border-orange-700';
+      default:
+        return 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-600';
+    }
+  };
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'type':
+        return `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${type ? getTypeStyles(type) : getTypeStyles('unknown')}`;
+      
+      case 'updateable':
+        return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-700';
+      
+      case 'privileged':
+        return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-700';
+      
+      case 'status':
+        switch (status) {
+          case 'success':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-700';
+          case 'failed':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-700';
+          case 'in_progress':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-700';
+          default:
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600';
+        }
+      
+      case 'execution-mode':
+        switch (executionMode) {
+          case 'local':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-700';
+          case 'ssh':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 border border-purple-200 dark:border-purple-700';
+          default:
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600';
+        }
+      
+      case 'note':
+        switch (noteType) {
+          case 'warning':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-700';
+          case 'error':
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-700';
+          default:
+            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-700';
+        }
+      
+      default:
+        return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600';
+    }
+  };
+
+  // Format the text for type badges
+  const formatText = () => {
+    if (variant === 'type' && type) {
+      switch (type.toLowerCase()) {
+        case 'ct':
+          return 'LXC';
+        case 'addon':
+          return 'ADDON';
+        case 'vm':
+          return 'VM';
+        case 'pve':
+          return 'PVE';
+        default:
+          return type.toUpperCase();
+      }
+    }
+    return children;
+  };
+
+  return (
+    <span className={`${getVariantStyles()} ${className}`}>
+      {formatText()}
+    </span>
+  );
+}
+
+// Convenience components for common use cases
+export const TypeBadge = ({ type, className }: { type: string; className?: string }) => (
+  <Badge variant="type" type={type} className={className}>
+    {type}
+  </Badge>
+);
+
+export const UpdateableBadge = ({ className }: { className?: string }) => (
+  <Badge variant="updateable" className={className}>
+    Updateable
+  </Badge>
+);
+
+export const PrivilegedBadge = ({ className }: { className?: string }) => (
+  <Badge variant="privileged" className={className}>
+    Privileged
+  </Badge>
+);
+
+export const StatusBadge = ({ status, children, className }: { status: 'success' | 'failed' | 'in_progress'; children: React.ReactNode; className?: string }) => (
+  <Badge variant="status" status={status} className={className}>
+    {children}
+  </Badge>
+);
+
+export const ExecutionModeBadge = ({ mode, children, className }: { mode: 'local' | 'ssh'; children: React.ReactNode; className?: string }) => (
+  <Badge variant="execution-mode" executionMode={mode} className={className}>
+    {children}
+  </Badge>
+);
+
+export const NoteBadge = ({ noteType, children, className }: { noteType: 'info' | 'warning' | 'error'; children: React.ReactNode; className?: string }) => (
+  <Badge variant="note" noteType={noteType} className={className}>
+    {children}
+  </Badge>
+);
diff --git a/src/app/_components/DarkModeProvider.tsx b/src/app/_components/DarkModeProvider.tsx
@@ -19,7 +19,6 @@ export function DarkModeProvider({ children }: { children: React.ReactNode }) {
 
   // Initialize theme from localStorage after mount
   useEffect(() => {
-    setMounted(true);
     const stored = localStorage.getItem('theme') as Theme;
     if (stored && ['light', 'dark', 'system'].includes(stored)) {
       setThemeState(stored);
@@ -28,6 +27,7 @@ export function DarkModeProvider({ children }: { children: React.ReactNode }) {
     // Set initial isDark state based on current DOM state
     const currentlyDark = document.documentElement.classList.contains('dark');
     setIsDark(currentlyDark);
+    setMounted(true);
   }, []);
 
   // Update dark mode state and DOM when theme changes
@@ -38,13 +38,16 @@ export function DarkModeProvider({ children }: { children: React.ReactNode }) {
       const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       const shouldBeDark = theme === 'dark' || (theme === 'system' && systemDark);
       
-      setIsDark(shouldBeDark);
-      
-      // Apply to document
-      if (shouldBeDark) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
+      // Only update if there's actually a change
+      if (shouldBeDark !== isDark) {
+        setIsDark(shouldBeDark);
+        
+        // Apply to document
+        if (shouldBeDark) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
       }
     };
 
@@ -60,7 +63,7 @@ export function DarkModeProvider({ children }: { children: React.ReactNode }) {
 
     mediaQuery.addEventListener('change', handleChange);
     return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme, mounted]);
+  }, [theme, mounted, isDark]);
 
   const setTheme = (newTheme: Theme) => {
     setThemeState(newTheme);
diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { api } from '~/trpc/react';
 import { Terminal } from './Terminal';
+import { StatusBadge, ExecutionModeBadge } from './Badge';
 
 interface InstalledScript {
   id: number;
@@ -109,32 +110,6 @@ export function InstalledScriptsTab() {
     return new Date(dateString).toLocaleString();
   };
 
-  const getStatusBadge = (status: string): string => {
-    const baseClasses = 'px-2 py-1 text-xs font-medium rounded-full';
-    switch (status) {
-      case 'success':
-        return `${baseClasses} bg-green-100 text-green-800`;
-      case 'failed':
-        return `${baseClasses} bg-red-100 text-red-800`;
-      case 'in_progress':
-        return `${baseClasses} bg-yellow-100 text-yellow-800`;
-      default:
-        return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200`;
-    }
-  };
-
-  const getModeBadge = (mode: string): string => {
-    const baseClasses = 'px-2 py-1 text-xs font-medium rounded-full';
-    switch (mode) {
-      case 'local':
-        return `${baseClasses} bg-blue-100 text-blue-800`;
-      case 'ssh':
-        return `${baseClasses} bg-purple-100 text-purple-800`;
-      default:
-        return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200`;
-    }
-  };
-
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -277,14 +252,14 @@ export function InstalledScriptsTab() {
                       )}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <span className={getModeBadge(String(script.execution_mode))}>
-                        {String(script.execution_mode).toUpperCase()}
-                      </span>
+                      <ExecutionModeBadge mode={script.execution_mode}>
+                        {script.execution_mode.toUpperCase()}
+                      </ExecutionModeBadge>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <span className={getStatusBadge(String(script.status))}>
-                        {String(script.status).replace('_', ' ').toUpperCase()}
-                      </span>
+                      <StatusBadge status={script.status}>
+                        {script.status.replace('_', ' ').toUpperCase()}
+                      </StatusBadge>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                       {formatDate(String(script.installation_date))}
diff --git a/src/app/_components/ScriptCard.tsx b/src/app/_components/ScriptCard.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import type { ScriptCard } from '~/types/script';
+import { TypeBadge, UpdateableBadge } from './Badge';
 
 interface ScriptCardProps {
   script: ScriptCard;
@@ -49,20 +50,8 @@ export function ScriptCard({ script, onClick }: ScriptCardProps) {
             <div className="mt-2 space-y-2">
               {/* Type and Updateable status on first row */}
               <div className="flex items-center space-x-2">
-                <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
-                  script.type === 'ct' 
-                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' 
-                    : script.type === 'addon'
-                    ? 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200'
-                    : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
-                }`}>
-                  {script.type?.toUpperCase() || 'UNKNOWN'}
-                </span>
-                {script.updateable && (
-                  <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200">
-                    Updateable
-                  </span>
-                )}
+                <TypeBadge type={script.type ?? 'unknown'} />
+                {script.updateable && <UpdateableBadge />}
               </div>
               
               {/* Download Status */}
diff --git a/src/app/_components/ScriptDetailModal.tsx b/src/app/_components/ScriptDetailModal.tsx
@@ -7,6 +7,7 @@ import type { Script } from "~/types/script";
 import { DiffViewer } from "./DiffViewer";
 import { TextViewer } from "./TextViewer";
 import { ExecutionModeModal } from "./ExecutionModeModal";
+import { TypeBadge, UpdateableBadge, PrivilegedBadge, NoteBadge } from "./Badge";
 
 interface ScriptDetailModalProps {
   script: Script | null;
@@ -159,25 +160,9 @@ export function ScriptDetailModal({
                 {script.name}
               </h2>
               <div className="mt-1 flex items-center space-x-2">
-                <span
-                  className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${
-                    script.type === "ct"
-                      ? "bg-blue-100 text-blue-800"
-                      : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-                  }`}
-                >
-                  {script.type.toUpperCase()}
-                </span>
-                {script.updateable && (
-                  <span className="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">
-                    Updateable
-                  </span>
-                )}
-                {script.privileged && (
-                  <span className="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800">
-                    Privileged
-                  </span>
-                )}
+                <TypeBadge type={script.type} />
+                {script.updateable && <UpdateableBadge />}
+                {script.privileged && <PrivilegedBadge />}
               </div>
             </div>
           </div>
@@ -677,17 +662,9 @@ export function ScriptDetailModal({
                       }`}
                     >
                       <div className="flex items-start">
-                        <span
-                          className={`mr-2 inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                            noteType === "warning"
-                              ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
-                              : noteType === "error"
-                                ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-                                : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                          }`}
-                        >
+                        <NoteBadge noteType={noteType as 'info' | 'warning' | 'error'} className="mr-2 flex-shrink-0">
                           {noteType}
-                        </span>
+                        </NoteBadge>
                         <span>{noteText}</span>
                       </div>
                     </li>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -43,13 +43,22 @@ export default function RootLayout({
                   } else {
                     document.documentElement.classList.remove('dark');
                   }
-                } catch (e) {}
+                } catch (e) {
+                  // Fallback to system preference if localStorage fails
+                  const systemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  if (systemDark) {
+                    document.documentElement.classList.add('dark');
+                  }
+                }
               })();
             `,
           }}
         />
       </head>
-      <body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors">
+      <body 
+        className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors"
+        suppressHydrationWarning={true}
+      >
         <DarkModeProvider>
           {/* Dark Mode Toggle in top right corner */}
           <div className="fixed top-4 right-4 z-50">
