valknar
4308169608
Two separate issues, both real bugs: - Dark mode was showing light blue instead of green: config.yml still had a leftover --pn-accent: #38bdf8 override from before the design redesign, which won via the runtime theme injector regardless of what app/globals.css defaulted to. Removed the override and pushed the dark-mode default from a soft mint (#5ee08c) to an actual neon green (#39ff88) - closer to what "neon" means and closer to the real phosphor-green a cardiac monitor trace uses, which fits the pulse metaphor better than the pastel version did. - No per-service brand icons anywhere. Added an optional `icon` field to docker/bookmark widgets (a key into lib/brand-icons.ts) rather than guessing from containerName, since a heuristic would silently misfire for anyone's own container naming. database widgets derive their icon automatically from `engine` (postgres/redis) since that's already required and unambiguous. Icon path data comes from the CC0 simple-icons package via scripts/extract-brand-icons.py, extracted and committed as plain TS data (lib/brand-icons.ts) rather than imported live - keeps it self-hosted (no unpkg.com/CDN calls at runtime, matching the fonts) and pinned regardless of dependency updates. Rendered monochrome (currentColor, not each brand's own hex) to stay consistent with the single-accent design rather than a dozen competing colors - only the shape carries the identity. Wired real icons into config.yml for every service that has one: traefik, coolify, gitea (+ gitea_runner), immich (+ immich_ml), n8n, passbolt, umami, headscale, plus postgresql/redis on every database widget. code and mailpit have no brand match in the curated set, so they render without one rather than a wrong/generic substitute. Verified in the actual rendered page: compiled CSS confirms --pn-accent is #39ff88 (dark) / #339a5a (light) with no trace of the old #38bdf8, and all 18 expected icon instances (10 docker + 8 database widgets) are present.
62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import type { Widget } from "@/lib/config/schema";
|
|
import { useWidgetSubscription } from "@/lib/ws/client";
|
|
import { StatusDot } from "@/components/widgets/StatusDot";
|
|
import { SkeletonLines } from "@/components/widgets/Skeleton";
|
|
import { WidgetCard } from "@/components/widgets/WidgetCard";
|
|
import { MetricBar } from "@/components/widgets/MetricBar";
|
|
import { BrandIcon } from "@/components/widgets/BrandIcon";
|
|
import { formatBytes, formatUptime } from "@/lib/format";
|
|
|
|
type DockerWidget = Extract<Widget, { type: "docker" }>;
|
|
|
|
export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widgetId: string }) {
|
|
const result = useWidgetSubscription(widgetId);
|
|
const data = result?.type === "docker" ? result.data : null;
|
|
const errorMessage = result?.type === "error" ? result.message : null;
|
|
const memPercent = data?.memUsageBytes != null && data.memLimitBytes ? (data.memUsageBytes / data.memLimitBytes) * 100 : null;
|
|
|
|
return (
|
|
<WidgetCard span={4}>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<BrandIcon slug={widget.icon} />
|
|
{widget.href ? (
|
|
<a
|
|
href={widget.href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="truncate text-[15px] font-medium text-fg hover:text-accent"
|
|
>
|
|
{widget.name}
|
|
</a>
|
|
) : (
|
|
<span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
|
|
)}
|
|
</div>
|
|
<StatusDot status={data?.status} health={data?.health} />
|
|
</div>
|
|
{errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
|
|
{!result && !errorMessage && <SkeletonLines />}
|
|
{data && (
|
|
<>
|
|
{widget.showStats && data.cpuPercent !== null && memPercent !== null && (
|
|
<div className="mt-0.5 flex gap-4">
|
|
<MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
|
|
<MetricBar label="MEM" percent={memPercent} detail={`${memPercent.toFixed(0)}%`} />
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-3 text-[11px] text-fg-muted">
|
|
{data.uptimeSeconds !== null && <span>up {formatUptime(data.uptimeSeconds)}</span>}
|
|
{widget.showStats && data.memUsageBytes !== null && memPercent === null && (
|
|
<span className="font-mono tabular-nums">{formatBytes(data.memUsageBytes)}</span>
|
|
)}
|
|
{data.restartCount > 0 && <span>{data.restartCount} restarts</span>}
|
|
</div>
|
|
</>
|
|
)}
|
|
</WidgetCard>
|
|
);
|
|
}
|