@camstack/addon-admin-ui 0.1.1

package/src/i18n/en.json

@@ -0,0 +1,164 @@
+{
+  "nav": {
+    "dashboard": "Dashboard",
+    "integrations": "Integrations",
+    "metrics": "Metrics"
+  },
+  "system": {
+    "title": "System",
+    "addons": "Addons",
+    "agents": "Agents",
+    "processes": "Processes",
+    "logs": "Logs",
+    "users": "Users",
+    "settings": "Settings",
+    "repl": "REPL",
+    "models": "Models"
+  },
+  "common": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "enable": "Enable",
+    "disable": "Disable",
+    "edit": "Edit",
+    "add": "Add",
+    "remove": "Remove",
+    "confirm": "Confirm",
+    "close": "Close",
+    "back": "Back",
+    "next": "Next",
+    "search": "Search",
+    "filter": "Filter",
+    "reset": "Reset",
+    "apply": "Apply",
+    "submit": "Submit",
+    "loading": "Loading…",
+    "error": "Error",
+    "success": "Success",
+    "warning": "Warning",
+    "info": "Info",
+    "noData": "No data available",
+    "noResults": "No results found",
+    "retry": "Retry",
+    "refresh": "Refresh",
+    "copy": "Copy",
+    "copied": "Copied!",
+    "yes": "Yes",
+    "no": "No"
+  },
+  "status": {
+    "online": "Online",
+    "offline": "Offline",
+    "connecting": "Connecting",
+    "error": "Error",
+    "disabled": "Disabled",
+    "enabled": "Enabled",
+    "active": "Active",
+    "inactive": "Inactive",
+    "running": "Running",
+    "stopped": "Stopped",
+    "pending": "Pending",
+    "unknown": "Unknown"
+  },
+  "auth": {
+    "login": "Login",
+    "logout": "Logout",
+    "username": "Username",
+    "password": "Password",
+    "signIn": "Sign In",
+    "invalidCredentials": "Invalid username or password"
+  },
+  "theme": {
+    "dark": "Dark",
+    "light": "Light",
+    "system": "System"
+  },
+  "language": {
+    "select": "Language",
+    "en": "English",
+    "it": "Italian"
+  },
+  "pages": {
+    "dashboard": {
+      "title": "Dashboard",
+      "subtitle": "Overview of all devices and their status"
+    },
+    "integrations": {
+      "title": "Integrations",
+      "subtitle": "Manage camera sources and provider connections"
+    },
+    "metrics": {
+      "title": "Metrics",
+      "subtitle": "System performance and usage statistics"
+    },
+    "agents": {
+      "title": "Agents",
+      "subtitle": "Manage distributed processing agents"
+    },
+    "addons": {
+      "title": "Addons",
+      "subtitle": "Extend functionality with addon modules"
+    },
+    "settings": {
+      "title": "Settings",
+      "subtitle": "Configure system-wide preferences"
+    },
+    "users": {
+      "title": "Users",
+      "subtitle": "Manage user accounts and permissions"
+    },
+    "logs": {
+      "title": "Logs",
+      "subtitle": "View system and device logs"
+    }
+  },
+  "integrations": {
+    "preview": "Preview",
+    "snapshotUnavailable": "Snapshot unavailable",
+    "noSnapshot": "No snapshot",
+    "lastSnapshot": "Last snapshot:",
+    "offline": "Offline",
+    "active": "Active",
+    "available": "Available",
+    "noDevices": "No devices.",
+    "addFirstDevice": "Add your first device to get started.",
+    "import": "+ Import",
+    "noProviders": "No providers available. Install a provider addon.",
+    "manage": "Manage",
+    "integrationName": "Integration name",
+    "integrationNamePlaceholder": "e.g. Garage Server",
+    "connectionSuccess": "Connection successful!",
+    "errorPrefix": "Error:",
+    "back": "Back",
+    "testing": "Testing...",
+    "testConnection": "Test connection",
+    "forward": "Next",
+    "searchingDevices": "Searching for devices...",
+    "foundDevices": "Found {{count}} devices. Select the ones to import.",
+    "noDevicesFound": "No devices found.",
+    "skip": "Skip",
+    "importSelected": "Import selected",
+    "newIntegration": "New Integration",
+    "configureIntegration": "Configure Integration",
+    "importDevices": "Import Devices",
+    "addDevice": "Add device",
+    "name": "Name",
+    "namePlaceholder": "e.g. Entrance Camera",
+    "snapshotUrlOptional": "Snapshot URL (optional)",
+    "streamUrls": "Stream URLs",
+    "addStream": "Add stream",
+    "cancel": "Cancel",
+    "saving": "Saving...",
+    "save": "Save",
+    "saveAndNew": "Save and new",
+    "test": "Test",
+    "stream": "Stream {{number}}:",
+    "devices": "devices",
+    "rediscover": "Rediscover",
+    "config": "Config",
+    "integrationNotFound": "Integration not found.",
+    "configComingSoon": "Config coming soon.",
+    "providerConfig": "Provider Config"
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,29 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import en from './en.json'
+import it from './it.json'
+
+const STORAGE_KEY = 'camstack_language'
+
+const savedLanguage = localStorage.getItem(STORAGE_KEY) ?? 'en'
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      it: { translation: it },
+    },
+    lng: savedLanguage,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+  })
+
+// Persist language changes
+i18n.on('languageChanged', (lng) => {
+  localStorage.setItem(STORAGE_KEY, lng)
+})
+
+export default i18n

package/src/i18n/it.json

@@ -0,0 +1,164 @@
+{
+  "nav": {
+    "dashboard": "Dashboard",
+    "integrations": "Integrazioni",
+    "metrics": "Metriche"
+  },
+  "system": {
+    "title": "Sistema",
+    "addons": "Addon",
+    "agents": "Agenti",
+    "processes": "Processi",
+    "logs": "Log",
+    "users": "Utenti",
+    "settings": "Impostazioni",
+    "repl": "REPL",
+    "models": "Modelli"
+  },
+  "common": {
+    "save": "Salva",
+    "cancel": "Annulla",
+    "delete": "Elimina",
+    "enable": "Abilita",
+    "disable": "Disabilita",
+    "edit": "Modifica",
+    "add": "Aggiungi",
+    "remove": "Rimuovi",
+    "confirm": "Conferma",
+    "close": "Chiudi",
+    "back": "Indietro",
+    "next": "Avanti",
+    "search": "Cerca",
+    "filter": "Filtra",
+    "reset": "Reimposta",
+    "apply": "Applica",
+    "submit": "Invia",
+    "loading": "Caricamento…",
+    "error": "Errore",
+    "success": "Successo",
+    "warning": "Avviso",
+    "info": "Info",
+    "noData": "Nessun dato disponibile",
+    "noResults": "Nessun risultato trovato",
+    "retry": "Riprova",
+    "refresh": "Aggiorna",
+    "copy": "Copia",
+    "copied": "Copiato!",
+    "yes": "Sì",
+    "no": "No"
+  },
+  "status": {
+    "online": "Online",
+    "offline": "Offline",
+    "connecting": "Connessione in corso",
+    "error": "Errore",
+    "disabled": "Disabilitato",
+    "enabled": "Abilitato",
+    "active": "Attivo",
+    "inactive": "Inattivo",
+    "running": "In esecuzione",
+    "stopped": "Fermato",
+    "pending": "In attesa",
+    "unknown": "Sconosciuto"
+  },
+  "auth": {
+    "login": "Accesso",
+    "logout": "Esci",
+    "username": "Nome utente",
+    "password": "Password",
+    "signIn": "Accedi",
+    "invalidCredentials": "Nome utente o password non validi"
+  },
+  "theme": {
+    "dark": "Scuro",
+    "light": "Chiaro",
+    "system": "Sistema"
+  },
+  "language": {
+    "select": "Lingua",
+    "en": "Inglese",
+    "it": "Italiano"
+  },
+  "pages": {
+    "dashboard": {
+      "title": "Dashboard",
+      "subtitle": "Panoramica di tutti i dispositivi e il loro stato"
+    },
+    "integrations": {
+      "title": "Integrazioni",
+      "subtitle": "Gestisci le sorgenti video e le connessioni ai provider"
+    },
+    "metrics": {
+      "title": "Metriche",
+      "subtitle": "Statistiche di prestazioni e utilizzo del sistema"
+    },
+    "agents": {
+      "title": "Agenti",
+      "subtitle": "Gestisci gli agenti di elaborazione distribuita"
+    },
+    "addons": {
+      "title": "Addon",
+      "subtitle": "Estendi le funzionalità con moduli addon"
+    },
+    "settings": {
+      "title": "Impostazioni",
+      "subtitle": "Configura le preferenze di sistema"
+    },
+    "users": {
+      "title": "Utenti",
+      "subtitle": "Gestisci gli account utente e i permessi"
+    },
+    "logs": {
+      "title": "Log",
+      "subtitle": "Visualizza i log di sistema e dei dispositivi"
+    }
+  },
+  "integrations": {
+    "preview": "Anteprima",
+    "snapshotUnavailable": "Snapshot non disponibile",
+    "noSnapshot": "Nessuno snapshot",
+    "lastSnapshot": "Ultimo snapshot:",
+    "offline": "Offline",
+    "active": "Attivi",
+    "available": "Disponibili",
+    "noDevices": "Nessun dispositivo.",
+    "addFirstDevice": "Aggiungi il primo dispositivo per iniziare.",
+    "import": "+ Importa",
+    "noProviders": "Nessun provider disponibile. Installa un addon provider.",
+    "manage": "Gestisci",
+    "integrationName": "Nome integrazione",
+    "integrationNamePlaceholder": "es. Server Garage",
+    "connectionSuccess": "Connessione riuscita!",
+    "errorPrefix": "Errore:",
+    "back": "Indietro",
+    "testing": "Test...",
+    "testConnection": "Test connessione",
+    "forward": "Avanti",
+    "searchingDevices": "Ricerca dispositivi in corso...",
+    "foundDevices": "Trovati {{count}} dispositivi. Seleziona quelli da importare.",
+    "noDevicesFound": "Nessun dispositivo trovato.",
+    "skip": "Salta",
+    "importSelected": "Importa selezionati",
+    "newIntegration": "Nuova Integrazione",
+    "configureIntegration": "Configura Integrazione",
+    "importDevices": "Importa Dispositivi",
+    "addDevice": "Aggiungi dispositivo",
+    "name": "Nome",
+    "namePlaceholder": "es. Camera Ingresso",
+    "snapshotUrlOptional": "Snapshot URL (opzionale)",
+    "streamUrls": "Stream URLs",
+    "addStream": "Aggiungi stream",
+    "cancel": "Annulla",
+    "saving": "Salvataggio...",
+    "save": "Salva",
+    "saveAndNew": "Salva e nuova",
+    "test": "Test",
+    "stream": "Stream {{number}}:",
+    "devices": "dispositivi",
+    "rediscover": "Riscopri",
+    "config": "Config",
+    "integrationNotFound": "Integrazione non trovata.",
+    "configComingSoon": "Config coming soon.",
+    "providerConfig": "Provider Config"
+  }
+}

package/src/index.css

@@ -0,0 +1,63 @@
+@import "tailwindcss";
+@import "@camstack/ui-library/tailwind/camstack-theme.css";
+
+/* Scan ui-library source for Tailwind classes used in shared components */
+@source "../../ui-library/src";
+
+/* Force dark mode by default until ThemeProvider kicks in */
+:root {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* No global transitions — use Tailwind transition-* utilities on specific elements */
+
+/* Override react-grid-layout default styles to match our theme */
+.react-grid-item.react-grid-placeholder {
+  background-color: var(--color-primary) !important;
+  opacity: 0.15 !important;
+  border-radius: 8px !important;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  border-right-color: var(--color-foreground-subtle) !important;
+  border-bottom-color: var(--color-foreground-subtle) !important;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-foreground-subtle);
+}
+
+/* Focus ring for keyboard accessibility */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Input placeholder color */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-foreground-disabled);
+}

package/src/layouts/AddonPageLoader.tsx

@@ -0,0 +1,120 @@
+import { useState, useEffect, Suspense, lazy, type ComponentType } from 'react'
+import { useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { getBackendClient } from '../lib/backend'
+
+export interface AddonPageInfo {
+  readonly id: string
+  readonly addonId: string
+  readonly label: string
+  readonly icon: string
+  readonly path: string
+  readonly bundle: string
+  readonly bundleUrl: string
+}
+
+/** Flatten the nested tRPC response into a flat AddonPageInfo */
+export function flattenPages(raw: readonly unknown[]): readonly AddonPageInfo[] {
+  return raw.map((item: any) => ({
+    id: item.page.id,
+    addonId: item.addonId,
+    label: item.page.label,
+    icon: item.page.icon,
+    path: item.page.path,
+    bundle: item.page.bundle,
+    bundleUrl: item.bundleUrl,
+  }))
+}
+
+/** Cache for loaded page components */
+const pageComponentCache = new Map<string, ComponentType<any>>()
+
+export function AddonPageLoader() {
+  const { pagePath } = useParams<{ pagePath: string }>()
+  const client = getBackendClient()
+
+  const { data: pages } = useQuery({
+    queryKey: ['addon-pages'],
+    queryFn: async (): Promise<readonly AddonPageInfo[]> => {
+      const raw = await client.trpc.addonPages.listPages.query()
+      return flattenPages(raw as readonly unknown[])
+    },
+    staleTime: 60_000,
+  })
+
+  const page = pages?.find((p) => p.path === `/addon/${pagePath}`)
+  const [PageComponent, setPageComponent] = useState<ComponentType<any> | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!page) return
+
+    const cacheKey = `${page.addonId}/${page.bundle}`
+
+    // Check cache
+    const cached = pageComponentCache.get(cacheKey)
+    if (cached) {
+      setPageComponent(() => cached)
+      return
+    }
+
+    // Dynamic import of the addon page module
+    setError(null)
+    setPageComponent(null)
+
+    const url = page.bundleUrl
+    import(/* @vite-ignore */ url)
+      .then((mod) => {
+        const Component = mod.default
+        if (typeof Component !== 'function') {
+          throw new Error(`Addon page "${page.id}" does not export a default React component`)
+        }
+        pageComponentCache.set(cacheKey, Component)
+        setPageComponent(() => Component)
+      })
+      .catch((err) => {
+        console.error(`[AddonPageLoader] Failed to load ${url}:`, err)
+        setError(`Failed to load addon page: ${err.message}`)
+      })
+  }, [page])
+
+  if (!pages) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
+      </div>
+    )
+  }
+
+  if (!page) {
+    return (
+      <div className="flex items-center justify-center h-full text-foreground-subtle">
+        Addon page not found
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-red-400 text-sm">
+        {error}
+      </div>
+    )
+  }
+
+  if (!PageComponent) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
+      </div>
+    )
+  }
+
+  return (
+    <PageComponent
+      trpc={client.trpc}
+      theme={{ isDark: document.documentElement.classList.contains('dark') }}
+      navigate={(path: string) => { window.location.href = path }}
+    />
+  )
+}