feat: brand icons for widgets, fix stale accent color

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.
2026-08-17 17:55:27 +02:00
parent db1b933c33
commit 4308169608
12 changed files with 152 additions and 23 deletions
@@ -54,8 +54,8 @@ settings:

 theme:
  mode: dark              # dark | light | auto
-  variables:
-    --pn-accent: "#38bdf8"
+  # variables:             # override any --pn-* token from app/globals.css
+  #   --pn-accent: "#ff6b6b"
  # customCssPath: custom.css   # relative to config/, served at /api/theme/custom-css

 discovery:
@@ -87,9 +87,9 @@ reload; never exposed to the client. See `config/.env.example`.

 | `type`     | Required fields                    | Notes |
 |------------|-------------------------------------|-------|
-| `bookmark` | `name`, `href`                      | Static link card. Optional `description`. |
+| `bookmark` | `name`, `href`                      | Static link card. Optional `description`, `icon` (see below). |
 | `search`   | -                                    | Client-side search box. Optional `engines` (`duckduckgo`/`google`/`bing`, default `[duckduckgo]`), `defaultEngine`. |
-| `docker`   | `name`, `containerName`             | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `showStats` (default `true`), `interval` (default `5s`). |
+| `docker`   | `name`, `containerName`             | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `icon` (see below), `showStats` (default `true`), `interval` (default `5s`). |
 | `database` | `name`, `containerName`, `engine`   | Thin skin over the same Docker collector - `engine` is `postgres` or `redis`, used for icon/label only. `interval` default `10s`. |
 | `system`   | -                                    | Host CPU/mem/disk/network via `systeminformation`. Optional `name` (default `System`), `interval` (default `5s`). |
 | `http`     | `name`, `url`                        | HTTP health check with latency and consecutive-failure tracking. Optional `method` (default `GET`), `timeout` (default `5s`), `interval` (default `30s`), `expect.status` (default `200`). |
@@ -97,6 +97,14 @@ reload; never exposed to the client. See `config/.env.example`.

 `interval`/`timeout` values are duration strings: `500ms`, `5s`, `1m`, `1h`.

+`icon` on `docker`/`bookmark` widgets is a key into `lib/brand-icons.ts` (currently
+`traefik`, `coolify`, `gitea`, `docker`, `immich`, `n8n`, `passbolt`, `umami`,
+`postgresql`, `redis`, `headscale`), rendered monochrome so it doesn't compete
+with the accent color. `database` widgets pick their icon automatically from
+`engine`. Regenerate/extend the icon set with `python3 scripts/extract-brand-icons.py`
+after adding an entry to that script's `ICONS` map (path data comes from the
+CC0-licensed `simple-icons` package, bundled at build time - no runtime CDN calls).
+
 ### Auto-discovery

 With `discovery.docker.enabled: true`, PulseNode scans running containers
@@ -7,8 +7,8 @@
  --pn-fg: #f2f4f5;
  --pn-fg-muted: color-mix(in srgb, var(--pn-fg) 55%, transparent);
  --pn-border: color-mix(in srgb, var(--pn-fg) 14%, transparent);
-  --pn-accent: #5ee08c;
-  --pn-status-up: #5ee08c;
+  --pn-accent: #39ff88;
+  --pn-status-up: #39ff88;
  --pn-status-down: #ff5f6d;
  --pn-status-degraded: #ffb84c;
  --pn-shadow-sm: 0 0 0 1px var(--pn-border);
@@ -0,0 +1,13 @@
+import { BRAND_ICON_PATHS } from "@/lib/brand-icons";
+
+export function BrandIcon({ slug, size = 18 }: { slug?: string; size?: number }) {
+  if (!slug) return null;
+  const path = BRAND_ICON_PATHS[slug];
+  if (!path) return null;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className="shrink-0 text-fg-muted" aria-hidden>
+      <path d={path} />
+    </svg>
+  );
+}
@@ -1,6 +1,7 @@
 import { ArrowUpRight } from "@phosphor-icons/react/ssr";
 import type { Widget } from "@/lib/config/schema";
 import { PN_CARD_CLASS } from "@/components/widgets/WidgetCard";
+import { BrandIcon } from "@/components/widgets/BrandIcon";

 type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;

@@ -14,8 +15,9 @@ export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
      style={{ gridColumn: "span 3" }}
    >
      <div className="flex items-center gap-2">
-        <span className="flex-1 text-[15px] font-medium text-fg">{widget.name}</span>
-        <ArrowUpRight size={16} className="text-accent" aria-hidden />
+        <BrandIcon slug={widget.icon} />
+        <span className="min-w-0 flex-1 truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        <ArrowUpRight size={16} className="shrink-0 text-accent" aria-hidden />
      </div>
      {widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
    </a>
@@ -4,6 +4,7 @@ import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { StatusDot } from "@/components/widgets/StatusDot";
 import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 import { formatUptime } from "@/lib/format";

 type DatabaseWidget = Extract<Widget, { type: "database" }>;
@@ -13,6 +14,11 @@ const ENGINE_LABEL: Record<DatabaseWidget["engine"], string> = {
  redis: "Redis",
 };

+const ENGINE_ICON: Record<DatabaseWidget["engine"], string> = {
+  postgres: "postgresql",
+  redis: "redis",
+};
+
 export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "database" ? result.data : null;
@@ -21,7 +27,10 @@ export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; w
  return (
    <WidgetCard span={4}>
      <div className="flex items-center justify-between gap-2">
-        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
+        <div className="flex min-w-0 items-center gap-2">
+          <BrandIcon slug={ENGINE_ICON[widget.engine]} />
+          <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        </div>
        <StatusDot status={data?.status} health={data?.health} />
      </div>
      <span className="text-[11px] text-fg-muted">{ENGINE_LABEL[widget.engine]}</span>
@@ -6,6 +6,7 @@ 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" }>;
@@ -19,18 +20,21 @@ export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widge
  return (
    <WidgetCard span={4}>
      <div className="flex items-center justify-between gap-2">
-        {widget.href ? (
-          <a
-            href={widget.href}
-            target="_blank"
-            rel="noreferrer"
-            className="text-[15px] font-medium text-fg hover:text-accent"
-          >
-            {widget.name}
-          </a>
-        ) : (
-          <span className="text-[15px] font-medium text-fg">{widget.name}</span>
-        )}
+        <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>}
@@ -3,8 +3,6 @@ settings:

 theme:
  mode: dark
-  variables:
-    --pn-accent: "#38bdf8"

 # Manual widgets below always take precedence over an auto-discovered one for
 # the same container - this is on as a safety net for anything added to
@@ -21,6 +19,7 @@ groups:
      - type: docker
        name: Traefik
        containerName: traefik
+        icon: traefik
        interval: 10s
        # No href: the dashboard is disabled (--api.dashboard=false).
        # Swap for a `traefik` widget (router/entrypoint/middleware view)
@@ -29,6 +28,7 @@ groups:
      - type: docker
        name: Coolify
        containerName: coolify
+        icon: coolify
        href: https://${TRAEFIK_HOST_COOLIFY}
        interval: 10s

@@ -37,12 +37,14 @@ groups:
      - type: docker
        name: Gitea
        containerName: gitea
+        icon: gitea
        href: https://${TRAEFIK_HOST_GITEA}
        interval: 10s

      - type: docker
        name: Gitea Runner
        containerName: gitea_runner
+        icon: gitea
        showStats: true
        interval: 15s

@@ -57,35 +59,41 @@ groups:
      - type: docker
        name: Immich
        containerName: immich
+        icon: immich
        href: https://${TRAEFIK_HOST_IMMICH}
        interval: 10s

      - type: docker
        name: Immich ML
        containerName: immich_ml
+        icon: immich
        interval: 15s

      - type: docker
        name: n8n
        containerName: n8n
+        icon: n8n
        href: https://${TRAEFIK_HOST_N8N}
        interval: 10s

      - type: docker
        name: Passbolt
        containerName: passbolt
+        icon: passbolt
        href: https://${TRAEFIK_HOST_PASSBOLT}
        interval: 10s

      - type: docker
        name: Umami
        containerName: umami
+        icon: umami
        href: https://${TRAEFIK_HOST_UMAMI}
        interval: 10s

      - type: docker
        name: Headscale
        containerName: headscale
+        icon: headscale
        href: https://${TRAEFIK_HOST_HEADSCALE}
        interval: 10s

@@ -11,6 +11,7 @@ export const bookmarkWidgetSchema = z.object({
  name: z.string(),
  href: z.string().url(),
  description: z.string().optional(),
+  icon: z.string().optional(),
 });

 export const searchWidgetSchema = z.object({
@@ -26,6 +27,7 @@ export const dockerWidgetSchema = z.object({
  href: z.string().url().optional(),
  showStats: z.boolean().default(true),
  interval: durationSchema.default("5s"),
+  icon: z.string().optional(),
 });

 export const databaseWidgetSchema = z.object({
@@ -17,6 +17,7 @@
    "p-limit": "^7.3.1",
    "react": "19.2.8",
    "react-dom": "19.2.8",
+    "simple-icons": "^16.28.0",
    "systeminformation": "^5.33.1",
    "tsx": "^4.23.12",
    "ws": "^8.21.3",
@@ -32,6 +32,9 @@ importers:
      react-dom:
        specifier: 19.2.8
        version: 19.2.8(react@19.2.8)
+      simple-icons:
+        specifier: ^16.28.0
+        version: 16.28.0
      systeminformation:
        specifier: ^5.33.1
        version: 5.33.1
@@ -2213,6 +2216,10 @@ packages:
    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
    engines: {node: '>= 0.4'}

+  simple-icons@16.28.0:
+    resolution: {integrity: sha512-sQPR5AtK/ijRjou7zw7mlLp08oB6FH7i0lOy5XJ2zp9mJs/yejgiOn7KvQoe2q4YJIx6VmgUSW5AOefebPt5kg==}
+    engines: {node: '>=0.12.18'}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}
@@ -4716,6 +4723,8 @@ snapshots:
      side-channel-map: 1.0.1
      side-channel-weakmap: 1.0.2

+  simple-icons@16.28.0: {}
+
  source-map-js@1.2.1: {}

  split-ca@1.0.1: {}
@@ -0,0 +1,56 @@
+#!/usr/bin/env python3
+"""Regenerates lib/brand-icons.ts from the `simple-icons` package.
+
+Run from the repo root after `pnpm add simple-icons` has installed it:
+
+    python3 scripts/extract-brand-icons.py
+
+Add a new service by adding a "our key" -> "simple-icons slug" entry below.
+Slugs are the filenames under node_modules/simple-icons/icons/ (without the
+.svg extension).
+"""
+
+import json
+import re
+from pathlib import Path
+
+ICONS = {
+    "traefik": "traefikproxy",
+    "coolify": "coolify",
+    "gitea": "gitea",
+    "docker": "docker",
+    "immich": "immich",
+    "n8n": "n8n",
+    "passbolt": "passbolt",
+    "umami": "umami",
+    "postgresql": "postgresql",
+    "redis": "redis",
+    "headscale": "tailscale",
+}
+
+ROOT = Path(__file__).resolve().parent.parent
+ICONS_DIR = ROOT / "node_modules" / "simple-icons" / "icons"
+OUT_PATH = ROOT / "lib" / "brand-icons.ts"
+
+HEADER = """// Path data extracted from the `simple-icons` package (CC0) at build time -
+// see scripts/extract-brand-icons.py. Rendered monochrome (currentColor) to
+// stay consistent with the single-accent design rather than a dozen
+// competing brand colors; the shape alone is enough to be recognizable.
+export const BRAND_ICON_PATHS: Record<string, string> = {
+"""
+
+
+def main() -> None:
+    lines = [HEADER]
+    for key, slug in ICONS.items():
+        svg = (ICONS_DIR / f"{slug}.svg").read_text()
+        d_matches = re.findall(r'<path d="([^"]+)"', svg)
+        combined = " ".join(d_matches)
+        lines.append(f"  {json.dumps(key)}: {json.dumps(combined)},\n")
+    lines.append("};\n")
+    OUT_PATH.write_text("".join(lines))
+    print(f"Wrote {OUT_PATH} ({len(ICONS)} icons)")
+
+
+if __name__ == "__main__":
+    main()