Revert text editor, move more into config file
This commit is contained in:
137
src/App.tsx
137
src/App.tsx
@@ -7,11 +7,10 @@ import { useTheme } from "@/components/theme-provider"
|
||||
import { useMetrics } from "./hooks/useMetrics"
|
||||
import { useConfig } from "./hooks/useConfig"
|
||||
import { ServiceStatus } from "./types/metrics"
|
||||
import { ServiceCard } from "./types/services"
|
||||
import { ServiceCard, Section } from "./types/services"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import { AlertCircle } from "lucide-react"
|
||||
import { ConfigEditor } from './components/config-editor'
|
||||
|
||||
const getIconUrl = (name: string | undefined, isDark: boolean = false): string => {
|
||||
if (!name) return ''
|
||||
@@ -55,18 +54,8 @@ function ServiceIcon({ service, isDark }: { service: ServiceCard, isDark: boolea
|
||||
)
|
||||
}
|
||||
|
||||
// Default category icons
|
||||
const categoryIcons: Record<string, string> = {
|
||||
system: 'Server',
|
||||
media: 'Play',
|
||||
monitoring: 'Activity',
|
||||
tools: 'Settings',
|
||||
acot: 'LayoutDashboard',
|
||||
home: 'Home'
|
||||
}
|
||||
|
||||
// Cast to any to avoid TypeScript complexity with dynamic imports
|
||||
const Icon = (LucideIcons as any)[categoryIcons[service.category] || 'Box']
|
||||
// Default category icons from section configuration
|
||||
const Icon = (LucideIcons as any)['Box']
|
||||
return <Icon className="h-6 w-6" />
|
||||
}
|
||||
|
||||
@@ -142,8 +131,8 @@ function StatusIndicator({ status, responseTime, certDaysRemaining }: {
|
||||
)
|
||||
}
|
||||
|
||||
function ServiceSection({ title, services, metrics }: {
|
||||
title: string,
|
||||
function ServiceSection({ section, services, metrics }: {
|
||||
section: Section,
|
||||
services: ServiceCard[],
|
||||
metrics: Record<string, any>
|
||||
}) {
|
||||
@@ -153,7 +142,7 @@ function ServiceSection({ title, services, metrics }: {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-2xl font-bold">{title}</h2>
|
||||
<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">
|
||||
@@ -164,77 +153,8 @@ function ServiceSection({ title, services, metrics }: {
|
||||
certDaysRemaining: 0
|
||||
}
|
||||
|
||||
const bgColor = (() => {
|
||||
switch (service.name) {
|
||||
case "Portainer":
|
||||
return "bg-blue-50 dark:bg-blue-950/30"
|
||||
case "Gitea":
|
||||
return "bg-green-50 dark:bg-green-950/30"
|
||||
case "Plex":
|
||||
return "bg-orange-50 dark:bg-orange-950/30"
|
||||
case "Sonarr":
|
||||
return "bg-blue-50 dark:bg-blue-950/30"
|
||||
case "AdGuard":
|
||||
return "bg-emerald-50 dark:bg-emerald-950/30"
|
||||
case "Homebridge":
|
||||
return "bg-purple-50 dark:bg-purple-950/30"
|
||||
case "Scrypted":
|
||||
return "bg-indigo-50 dark:bg-indigo-950/30"
|
||||
case "Dashboard":
|
||||
case "Inventory":
|
||||
return "bg-sky-50 dark:bg-sky-950/30"
|
||||
case "DiskStation":
|
||||
return "bg-slate-50 dark:bg-slate-950/30"
|
||||
case "Deluge":
|
||||
return "bg-green-50 dark:bg-green-950/30"
|
||||
case "Firefox":
|
||||
return "bg-orange-50 dark:bg-orange-950/30"
|
||||
case "Uptime":
|
||||
return "bg-emerald-50 dark:bg-emerald-950/30"
|
||||
case "Speedtest":
|
||||
return "bg-blue-50 dark:bg-blue-950/30"
|
||||
case "Netdata":
|
||||
return "bg-purple-50 dark:bg-purple-950/30"
|
||||
default:
|
||||
return "bg-gray-50 dark:bg-gray-950/30"
|
||||
}
|
||||
})()
|
||||
|
||||
const iconColor = (() => {
|
||||
switch (service.name) {
|
||||
case "Portainer":
|
||||
return "text-blue-600 dark:text-blue-400"
|
||||
case "Gitea":
|
||||
return "text-green-600 dark:text-green-400"
|
||||
case "Plex":
|
||||
return "text-orange-600 dark:text-orange-400"
|
||||
case "Sonarr":
|
||||
return "text-blue-600 dark:text-blue-400"
|
||||
case "AdGuard":
|
||||
return "text-emerald-600 dark:text-emerald-400"
|
||||
case "Homebridge":
|
||||
return "text-purple-600 dark:text-purple-400"
|
||||
case "Scrypted":
|
||||
return "text-indigo-600 dark:text-indigo-400"
|
||||
case "Dashboard":
|
||||
case "Inventory":
|
||||
return "text-sky-600 dark:text-sky-400"
|
||||
case "DiskStation":
|
||||
return "text-slate-600 dark:text-slate-400"
|
||||
case "Deluge":
|
||||
return "text-green-600 dark:text-green-400"
|
||||
case "Firefox":
|
||||
return "text-orange-600 dark:text-orange-400"
|
||||
case "Uptime":
|
||||
return "text-emerald-600 dark:text-emerald-400"
|
||||
case "Speedtest":
|
||||
return "text-blue-600 dark:text-blue-400"
|
||||
case "Netdata":
|
||||
return "text-purple-600 dark:text-purple-400"
|
||||
default:
|
||||
return "text-gray-600 dark:text-gray-400"
|
||||
}
|
||||
})()
|
||||
// Use service-specific style or fall back to section style
|
||||
const style = service.cardStyle || section.cardStyle
|
||||
|
||||
return (
|
||||
<a
|
||||
@@ -244,10 +164,10 @@ function ServiceSection({ title, services, metrics }: {
|
||||
rel="noopener noreferrer"
|
||||
className="transition-transform hover:scale-105"
|
||||
>
|
||||
<Card className={bgColor}>
|
||||
<Card className={style.background}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<div className="flex items-center">
|
||||
<div className={iconColor}>
|
||||
<div className={style.iconColor}>
|
||||
<ServiceIcon service={service} isDark={isDark} />
|
||||
</div>
|
||||
<CardTitle className="ml-2">{service.name}</CardTitle>
|
||||
@@ -272,24 +192,14 @@ function ServiceSection({ title, services, metrics }: {
|
||||
|
||||
function App() {
|
||||
const { metrics } = useMetrics()
|
||||
const { config, error, saveConfig } = useConfig()
|
||||
const services = config.services
|
||||
|
||||
const systemServices = services.filter(s => s.category === 'system')
|
||||
const mediaServices = services.filter(s => s.category === 'media')
|
||||
const monitoringServices = services.filter(s => s.category === 'monitoring')
|
||||
const toolServices = services.filter(s => s.category === 'tools')
|
||||
const acotServices = services.filter(s => s.category === 'acot')
|
||||
const homeServices = services.filter(s => s.category === 'home')
|
||||
const { config, error } = useConfig()
|
||||
const { services, sections } = config
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-8 space-y-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-4xl font-bold">Kent.pw Homepage</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<ConfigEditor currentConfig={config} onSave={saveConfig} />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -302,14 +212,21 @@ function App() {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{services.length > 0 ? (
|
||||
{sections?.length > 0 ? (
|
||||
<>
|
||||
<ServiceSection title="System" services={systemServices} metrics={metrics} />
|
||||
<ServiceSection title="Media" services={mediaServices} metrics={metrics} />
|
||||
<ServiceSection title="Monitoring" services={monitoringServices} metrics={metrics} />
|
||||
<ServiceSection title="Tools" services={toolServices} metrics={metrics} />
|
||||
<ServiceSection title="ACOT" services={acotServices} metrics={metrics} />
|
||||
<ServiceSection title="Home" services={homeServices} metrics={metrics} />
|
||||
{sections.map((section: Section) => {
|
||||
const sectionServices = services.filter((s: { category: string }) => s.category === section.id)
|
||||
if (sectionServices.length === 0) return null
|
||||
|
||||
return (
|
||||
<ServiceSection
|
||||
key={section.id}
|
||||
section={section}
|
||||
services={sectionServices}
|
||||
metrics={metrics}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
) : !error && (
|
||||
<Alert>
|
||||
|
||||
Reference in New Issue
Block a user