- ;
+ /** Operator-added / overriding emulator defs (custom launchers). */
+ emulators?: EmulatorDef[];
sync: {
pollMinutes: number;
watch: boolean;
diff --git a/ui/src/components.tsx b/ui/src/components.tsx
deleted file mode 100644
index 33f8066..0000000
--- a/ui/src/components.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
-import { createContext, useCallback, useContext, useState } from "react";
-
-export const Card = ({
- title,
- hint,
- right,
- children,
-}: {
- title?: string;
- hint?: string;
- right?: ReactNode;
- children: ReactNode;
-}) => (
- & { primary?: boolean }) => (
-
-);
-
-export const Badge = ({
- tone,
- children,
-}: {
- tone?: "ok" | "warn" | "accent";
- children: ReactNode;
-}) => {children};
-
-// ── Toasts ────────────────────────────────────────────────────────────────────────────────────
-const ToastCtx = createContext<(msg: string) => void>(() => {});
-export const useToast = () => useContext(ToastCtx);
-
-export const ToastHost = ({ children }: { children: ReactNode }) => {
- const [msg, setMsg] = useState();
- const show = useCallback((m: string) => {
- setMsg(m);
- window.setTimeout(() => setMsg(undefined), 2600);
- }, []);
- return (
-
- {children}
- {msg &&
- );
-};
diff --git a/ui/src/components/ui/badge.tsx b/ui/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0cc09f4
--- /dev/null
+++ b/ui/src/components/ui/badge.tsx
@@ -0,0 +1,28 @@
+// A small shadcn-style badge on the shared tokens (pill, brand/muted/state variants).
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/utils.js";
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
+ {
+ variants: {
+ variant: {
+ default: "border-transparent bg-secondary text-secondary-foreground",
+ brand: "border-transparent bg-primary/15 text-primary",
+ outline: "text-muted-foreground",
+ success: "border-success/40 text-success",
+ warn: "border-amber-500/40 text-amber-400",
+ },
+ },
+ defaultVariants: { variant: "default" },
+ },
+);
+
+export interface BadgeProps
+ extends HTMLAttributes,
+ VariantProps {}
+
+export const Badge = ({ className, variant, ...props }: BadgeProps) => (
+
+);
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
new file mode 100644
index 0000000..1ff186e
--- /dev/null
+++ b/ui/src/components/ui/button.tsx
@@ -0,0 +1,52 @@
+// Button — the console's exact variant/size vocabulary + brand tokens (pill shape, `--primary` fill),
+// but a plain
+
{config && (
-
- 🎮
-
- ROM Manager
- - — scan ROMs into your punktfunk library - -
- {TABS.map((t) => (
-
- ))}
+
);
};
diff --git a/ui/src/api.ts b/ui/src/api.ts
index eb824a9..a82fa3d 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -16,6 +16,7 @@ export interface EmulatorDef {
template: string;
supportsArchives: boolean;
contested?: boolean;
+ detect?: { linux: string[]; windows: string[] };
}
export interface Detected {
id: string;
@@ -46,6 +47,8 @@ export interface Config {
{ emulator: string; core?: string; extraArgs?: string }
>;
gameOverrides: Record
+
+
+
+
+
+
+
-
+
+
+
+ ROM Manager
++ Scan ROMs into your Punktfunk library +
- {(title || right) && (
-
-);
-
-export const Button = ({
- primary,
- children,
- ...rest
-}: ButtonHTMLAttributes
- {title &&
- )}
- {hint && {title}
} - {right} -{hint}
} - {children} -{msg}
}
-
+ Per-platform emulator
+
+ The default emulator + core for each platform. Override to
+ prefer a different emulator (including a custom one) or
+ RetroArch core.
+
+
+
- }
- >
-
-
-
-
-
+ {detCores.map((c) => (
+
+ ))}
+
+ ) : emulator === "retroarch" ? (
+ setLaunch({ core: e.target.value })}
+ />
+ ) : (
+ —
+ )}
+
+ );
+ })}
+
+
| Platform | -Emulator | -Core (RetroArch) | -
|---|---|---|
| {p.name} | -- - | -
- {emulator === "retroarch" ? (
- detCores.length ? (
-
- ) : (
-
- setLaunch({ core: e.target.value })
- }
- />
- )
- ) : (
- —
+ },
+ });
+ return (
+
+ {p.name}
+
+ {emulator === "retroarch" && detCores.length ? (
+ |
-
{"{exe}"},{" "}
+ {"{rom}"}, optionally{" "}
+ {"{core}"}. Leave detection blank
+ and bake the executable into the template if it isn't on PATH.
+
+ {emulators.map((e) => (
+
+ )}
+
+
+ {e.name}
+
+ {e.id}
+
+
+ {e.template}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ Games ({entries.length})
+
+ What will be reconciled into the library. Untick a title to
+ exclude it; covers come from your art provider.
+
+
+
- }
- >
- {entries.length === 0 && excluded.length === 0 ? (
-
- No games found. Add ROM roots in Setup, then
- rescan.
-
- ) : (
-
-
-
-
-
- )}
+ | - | Title | -Platform | -Launch command | -Include | -
|---|---|---|---|---|
|
- {e.art?.portrait ? (
- |
- {e.title} | -
- |
- - {truncate(e.launch?.value ?? "", 70)} - | -- setExcluded(e.external_id, true)} - /> - | -
| - - | -{x.title} | -
- |
- excluded | -- setExcluded(x.external_id, false)} - /> - | -
+ No games found. Add ROM roots in Setup, then rescan. +
+ ) : ( +
+ {entries.map((e) => (
+ setExcluded(e.external_id, true)}
+ />
+ ))}
+ {excluded.map((x) => (
+ setExcluded(x.external_id, false)}
+ />
+ ))}
+
+ )}
+
-
-
- {report.skipped.map((s) => (
-
-
+ | {s.title} | -{s.reason} | -
+ {s.title}
+ {s.reason}
+
+ ))}
+
+ {cover ? (
+ 
+ ) : (
+
+ )}
+
+ {title}
+
+ {detail}
+
+
+ {platform}
+
+
+);
diff --git a/ui/src/pages/Setup.tsx b/ui/src/pages/Setup.tsx
index 1f35485..46cb7e5 100644
--- a/ui/src/pages/Setup.tsx
+++ b/ui/src/pages/Setup.tsx
@@ -1,12 +1,21 @@
+import { toast } from "@unom/ui/toast";
+import { Plus, X } from "lucide-react";
import { useEffect, useState } from "react";
import { getPlatforms, type Platform, type RomRoot } from "../api.js";
-import { Button, Card, useToast } from "../components.js";
+import { Button } from "../components/ui/button.js";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "../components/ui/card.js";
+import { Input, Select } from "../components/ui/input.js";
import { useConfig } from "../hooks.js";
export const Setup = () => {
const { config, setConfig, save, saving } = useConfig();
const [platforms, setPlatforms] = useState
+ ROM roots
+
+ Point each folder at the console platform its files belong to.
+ Shared extensions (.iso, .bin) are resolved by the folder's
+ platform.
+
+
+
- }
- >
- {roots.length === 0 && (
- - No roots yet. Add a folder of ROMs to get started. -
- )} ++ No roots yet. Add a folder of ROMs to get started. +
+ )} - {roots.length > 0 && ( -| Folder | -Platform | -Excludes (comma-separated globs) | -- |
|---|---|---|---|
| - update(i, { dir: e.target.value })} - /> - | -- - | -- - update(i, { - excludes: e.target.value - .split(",") - .map((s) => s.trim()) - .filter(Boolean), - }) - } - /> - | -- - | -
+ update(i, { dir: e.target.value })}
+ />
+
+
+ update(i, {
+ excludes: e.target.value
+ .split(",")
+ .map((s) => s.trim())
+ .filter(Boolean),
+ })
+ }
+ />
+
+
+ ))}
-
-
+
+
+);
+
export const Sync = () => {
const status = useStatusStream();
const { config, setConfig, save, saving } = useConfig();
const [syncing, setSyncing] = useState(false);
- const toast = useToast();
-
const report = status?.lastReport;
return (
<>
- {n}
+ {label}
+
+ Status
+
+ {status?.lastSync
+ ? `Last sync ${new Date(status.lastSync.at).toLocaleString()} · ${status.os}`
+ : "Not synced yet."}
+
+
- }
- >
-
-
-
+
+ Files
+
+ {status.paths.config}
+
+ {status.paths.cache} +
+
)}
@@ -120,37 +135,48 @@ interface CardProps {
saving: boolean;
}
+const Field = ({ label, children }: { label: string; children: ReactNode }) => (
+
+);
+
const ArtCard = ({ config, setConfig, save, saving }: CardProps) => {
- const toast = useToast();
const art = config.art;
const set = (patch: Partial) =>
setConfig({ ...config, art: { ...art, ...patch } });
return (
-
+
+
);
};
const SyncOptionsCard = ({ config, setConfig, save, saving }: CardProps) => {
- const toast = useToast();
const sync = config.sync;
const set = (patch: Partial) =>
setConfig({ ...config, sync: { ...sync, ...patch } });
return (
-
+
+ Sync options
- }
- >
-
);
};
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 6df9a33..5e07c8e 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -1,267 +1,187 @@
-/* A self-contained dark theme (the console renders plugin UIs on a dark canvas — plugin-ui-surface
- §5). Purple accent to sit alongside the punktfunk console; no external UI library so the SPA builds
- anywhere. */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./timing-functions.css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Pull @unom/ui's compiled component classes (bg-neutral, rounded-card, p-padding-card, ring-accent,
+ h-input-height, material…) into the Tailwind 4 scan so their utilities aren't purged. */
+@source "../node_modules/@unom/ui/dist/**/*.{js,mjs}";
+
+/* ── punktfunk brand · violet product chrome (copied from the console so the plugin reads as family) ──
+ LIGHT (:root) + DARK (.dark) on one violet identity. The plugin pins since it is
+ embedded on the console's dark canvas. The token set feeds BOTH @unom/ui's semantic contract
+ (--brand/--primary/--accent/--neutral/--main…) and the shadcn-style tokens. */
:root {
- --bg: #0b0b0f;
- --panel: #14141b;
- --panel-2: #1b1b24;
- --border: #2a2a36;
- --text: #e5e7eb;
- --muted: #9ca3af;
- --accent: #7c3aed;
- --accent-hover: #6d28d9;
- --danger: #ef4444;
- --ok: #22c55e;
- --warn: #f59e0b;
- color-scheme: dark;
+ --radius: 0.625rem;
+
+ --pf-brand: #6c5bf3;
+ --pf-brand-light: #a79ff8;
+ --pf-highlight: #d2c9fb;
+
+ --background: #ffffff;
+ --foreground: #1b1430;
+ --card: #f6f2ff;
+ --card-foreground: #1b1430;
+ --popover: #ffffff;
+ --popover-foreground: #1b1430;
+ --muted: #f1ecfd;
+ --muted-foreground: #6f6a86;
+ --secondary: #ece6fb;
+ --secondary-foreground: #1b1430;
+ --accent: var(--pf-brand);
+ --accent-foreground: #ffffff;
+ --border: #e4dcf7;
+ --input: #e4dcf7;
+ --ring: var(--pf-brand);
+
+ --primary: var(--pf-brand);
+ --primary-foreground: #ffffff;
+
+ --success: oklch(0.6 0.14 160);
+ --destructive: oklch(0.55 0.22 18);
+ --destructive-foreground: #ffffff;
+
+ --main: var(--foreground);
+ --brand: var(--pf-brand);
+ --brand-light: var(--pf-brand-light);
+ --highlight: var(--pf-highlight);
+ --neutral: var(--card);
+ --neutral-accent: var(--secondary);
+ --neutral-highlight: var(--border);
+ --error: var(--destructive);
+
+ --font-display: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+ --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+
+ --radius-card-min: var(--radius);
}
-* {
- box-sizing: border-box;
-}
-html,
-body,
-#root {
- height: 100%;
-}
-body {
- margin: 0;
- background: var(--bg);
- color: var(--text);
- font:
- 14px / 1.5 system-ui,
- -apple-system,
- "Segoe UI",
- Roboto,
- sans-serif;
-}
-h1,
-h2,
-h3 {
- margin: 0;
- font-weight: 600;
-}
-a {
- color: var(--accent);
-}
-code {
- font-family: ui-monospace, "SF Mono", Menlo, monospace;
- font-size: 12px;
+.dark {
+ --background: #141019;
+ --foreground: oklch(0.985 0 0);
+ --card: #1c1530;
+ --card-foreground: oklch(0.985 0 0);
+ --popover: #1c1530;
+ --popover-foreground: oklch(0.985 0 0);
+ --muted: #1f1830;
+ --muted-foreground: oklch(0.728 0.03 286);
+ --secondary: #241c3d;
+ --secondary-foreground: oklch(0.985 0 0);
+ --border: #2a2148;
+ --input: #2a2148;
+ --ring: var(--pf-brand-light);
+
+ --primary: var(--pf-brand-light);
+ --primary-foreground: #141019;
+
+ --success: oklch(0.7 0.15 160);
+ --destructive: oklch(0.62 0.21 18);
+ --destructive-foreground: oklch(0.985 0 0);
}
-.app {
- max-width: 1100px;
- margin: 0 auto;
- padding: 20px 24px 64px;
-}
-.topbar {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 4px;
-}
-.topbar .logo {
- font-size: 20px;
-}
-.subtle {
- color: var(--muted);
-}
-.tabs {
- display: flex;
- gap: 4px;
- border-bottom: 1px solid var(--border);
- margin: 18px 0 20px;
- flex-wrap: wrap;
-}
-.tab {
- padding: 8px 14px;
- border: 0;
- background: transparent;
- color: var(--muted);
- cursor: pointer;
- border-bottom: 2px solid transparent;
- font-size: 14px;
-}
-.tab:hover {
- color: var(--text);
-}
-.tab.active {
- color: var(--text);
- border-bottom-color: var(--accent);
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --radius-button: 9999px;
+ --radius-card: calc(var(--radius) * 2);
+ --radius-main: calc(var(--radius) * 2);
+
+ --spacing-input-height: 3rem;
+ --spacing-padding-card: 1.25rem;
+ --spacing-card: 1.5rem;
+ --spacing-main: 15px;
+
+ --font-sans: var(--font-sans);
+ --font-display: var(--font-display);
+
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-success: var(--success);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+
+ --color-main: var(--main);
+ --color-brand: var(--brand);
+ --color-brand-light: var(--brand-light);
+ --color-neutral: var(--neutral);
+ --color-neutral-accent: var(--neutral-accent);
+ --color-neutral-highlight: var(--neutral-highlight);
+ --color-highlight: var(--highlight);
+ --color-error: var(--error);
}
-.card {
- background: var(--panel);
- border: 1px solid var(--border);
- border-radius: 12px;
- padding: 16px 18px;
- margin-bottom: 16px;
-}
-.card h2 {
- font-size: 15px;
- margin-bottom: 4px;
-}
-.card .hint {
- color: var(--muted);
- font-size: 13px;
- margin: 2px 0 12px;
-}
-.row {
- display: flex;
- gap: 8px;
- align-items: center;
-}
-.row.wrap {
- flex-wrap: wrap;
-}
-.spread {
- justify-content: space-between;
-}
-.grow {
- flex: 1;
+@theme {
+ --animate-accordion-down: accordion-down 0.4s var(--ease-out-quart);
+ --animate-accordion-up: accordion-up 0.4s var(--ease-out-quart);
+ --animate-collapsible-down: collapsible-down 0.4s var(--ease-out-quart);
+ --animate-collapsible-up: collapsible-up 0.4s var(--ease-out-quart);
+
+ @keyframes accordion-down {
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ }
+ }
+ @keyframes accordion-up {
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+ to {
+ height: 0;
+ }
+ }
+ @keyframes collapsible-down {
+ from {
+ height: 0;
+ opacity: 0;
+ }
+ to {
+ height: var(--radix-collapsible-content-height);
+ opacity: 1;
+ }
+ }
+ @keyframes collapsible-up {
+ from {
+ height: var(--radix-collapsible-content-height);
+ opacity: 1;
+ }
+ to {
+ height: 0;
+ opacity: 0;
+ }
+ }
}
-button.btn {
- padding: 7px 12px;
- border-radius: 8px;
- border: 1px solid var(--border);
- background: var(--panel-2);
- color: var(--text);
- cursor: pointer;
- font-size: 13px;
-}
-button.btn:hover {
- border-color: var(--accent);
-}
-button.btn.primary {
- background: var(--accent);
- border-color: var(--accent);
- color: #fff;
-}
-button.btn.primary:hover {
- background: var(--accent-hover);
-}
-button.btn:disabled {
- opacity: 0.5;
- cursor: default;
-}
-button.btn.icon {
- padding: 4px 8px;
-}
-
-input,
-select {
- padding: 7px 10px;
- border-radius: 8px;
- border: 1px solid var(--border);
- background: #0f0f16;
- color: var(--text);
- font-size: 13px;
-}
-input:focus,
-select:focus {
- outline: none;
- border-color: var(--accent);
-}
-label.field {
- display: grid;
- gap: 4px;
- font-size: 12px;
- color: var(--muted);
-}
-
-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 13px;
-}
-th,
-td {
- text-align: left;
- padding: 8px 10px;
- border-bottom: 1px solid var(--border);
- vertical-align: middle;
-}
-th {
- color: var(--muted);
- font-weight: 500;
- font-size: 12px;
-}
-
-.badge {
- display: inline-block;
- padding: 1px 8px;
- border-radius: 999px;
- font-size: 11px;
- background: var(--panel-2);
- border: 1px solid var(--border);
- color: var(--muted);
-}
-.badge.ok {
- color: var(--ok);
- border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
-}
-.badge.warn {
- color: var(--warn);
- border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
-}
-.badge.accent {
- color: #c4b5fd;
- border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
-}
-
-.cover {
- width: 42px;
- height: 60px;
- object-fit: cover;
- border-radius: 4px;
- background: var(--panel-2);
- border: 1px solid var(--border);
-}
-.cover.empty {
- display: inline-block;
-}
-.mono {
- font-family: ui-monospace, Menlo, monospace;
- font-size: 12px;
- color: var(--muted);
- word-break: break-all;
-}
-.empty-state {
- text-align: center;
- color: var(--muted);
- padding: 32px;
-}
-.toast {
- position: fixed;
- bottom: 18px;
- left: 50%;
- transform: translateX(-50%);
- background: var(--panel-2);
- border: 1px solid var(--border);
- border-radius: 10px;
- padding: 10px 16px;
- font-size: 13px;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-.stat {
- display: grid;
- gap: 2px;
-}
-.stat .n {
- font-size: 22px;
- font-weight: 600;
-}
-.stat .l {
- color: var(--muted);
- font-size: 12px;
-}
-.stats {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
- gap: 12px;
-}
-.scroll {
- max-height: 420px;
- overflow: auto;
+@layer base {
+ * {
+ border-color: var(--border);
+ }
+ body {
+ background-color: var(--background);
+ color: var(--foreground);
+ font-family: var(--font-sans);
+ font-feature-settings:
+ "rlig" 1,
+ "calt" 1;
+ }
}
diff --git a/ui/src/timing-functions.css b/ui/src/timing-functions.css
new file mode 100644
index 0000000..fa69cb7
--- /dev/null
+++ b/ui/src/timing-functions.css
@@ -0,0 +1,25 @@
+/* Penner easing tokens — shared with the punktfunk console + @unom/ui.
+ @unom/ui's accordion/collapsible/material animations resolve these by name. */
+@theme {
+ --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+ --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+ --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+ --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+ --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+ --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+ --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+ --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+ --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+ --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+ --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+ --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+ --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+ --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+ --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index eaef0fb..6627e7d 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -1,12 +1,13 @@
+import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// `base: "./"` (relative asset URLs) + hash routing is the plugin-ui-surface §6 contract: the SPA is
-// mounted under `/plugin-ui/rom-manager/` behind the console proxy, so assets must resolve relative to
-// that prefix. Built into `../dist/ui`, which `servePluginUi`'s staticDir points at.
+// mounted under `/plugin-ui/rom-manager/` behind the console proxy. Tailwind v4 + @unom/ui give it the
+// same look as the console. Built into `../dist/ui`, which `servePluginUi`'s staticDir points at.
export default defineConfig({
base: "./",
- plugins: [react()],
+ plugins: [react(), tailwindcss()],
build: {
outDir: "../dist/ui",
emptyOutDir: true,
- {status?.rootsConfigured ?? "—"}
- ROM roots
+
+
+
- {status?.lastSync && (
-
+ {status.artProvider}
+ ) : (
+ off
+ )
+ }
+ label="art provider"
+ />
-
- {status?.lastSync?.count ?? "—"}
- titles in library
-
-
- {report?.skipped.length ?? "—"}
- skipped
-
-
-
- {status?.artProvider ? (
- {status.artProvider}
- ) : (
- "off"
- )}
-
- art provider
-
- - Last sync {new Date(status.lastSync.at).toLocaleString()} · OS{" "} - {status.os} -
- )} - {report?.overWarn && ( -- Large library ({report.included} entries) — reconcile is a single - full-body PUT; watch host memory. -
- )} - {report && report.warnings.length > 0 && ( -
-
- )}
+ {report?.overWarn && (
+ - {report.warnings.length} warning(s) -
--
- {report.warnings.slice(0, 20).map((w) => (
-
- - {w} - - ))} -
+ Large library ({report.included} entries) — reconcile is one + full-body PUT; watch host memory. +
+ )} + {report && report.warnings.length > 0 && ( +
+
+ )}
+
{config && (
@@ -102,9 +111,15 @@ export const Sync = () => {
saving={saving}
/>
{status && (
- + {report.warnings.length} warning(s) +
+-
+ {report.warnings.slice(0, 20).map((w) => (
+
- {w} + ))} +
{status.paths.config}
-{status.paths.cache}
++ {status.paths.cache} +
+ Box art
+
+ SteamGridDB (like Steam ROM Manager) gives portrait + hero + logo +
+ header with a free API key. Without a key, the keyless
+ libretro-thumbnails fallback provides box art only.
+
+
- }
- >
-
-
+
+
-
-
-
+
+