Refine dashboard settings and demo surfaces

Author: Jamesllllllllll

src/app.css

@@ -5,6 +5,8 @@
 :root {
   color-scheme: dark;
   --shell-gutter: 1.5rem;
+  --font-body: "IBM Plex Sans", sans-serif;
+  --font-accent: "Space Grotesk", var(--font-body);
   --bg: #0c1219;
   --bg-elevated: #121923;
   --panel: rgba(18, 20, 26, 0.86);
@@ -77,7 +79,7 @@ body {
   margin: 0;
   min-height: 100vh;
   color: var(--text);
-  font-family: "IBM Plex Sans", sans-serif;
+  font-family: var(--font-body);
   background: transparent;
   position: relative;
   isolation: isolate;
@@ -165,7 +167,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Space Grotesk", sans-serif;
+  font-family: var(--font-accent);
   letter-spacing: -0.03em;
 }
 

src/components/overlay-settings-panel.tsx

@@ -325,22 +325,19 @@ export function OverlaySettingsPanel() {
               <CardHeader>
                 <CardTitle>Layout and behavior</CardTitle>
               </CardHeader>
-              <CardContent className="grid gap-4">
+              <CardContent className="overflow-hidden border border-(--border) p-0">
                 <ToggleRow
                   label="Show creator"
-                  description="Show creator"
                   checked={form.overlayShowCreator}
                   onChange={(value) => setBoolean("overlayShowCreator", value)}
                 />
                 <ToggleRow
                   label="Show album"
-                  description="Show album"
                   checked={form.overlayShowAlbum}
                   onChange={(value) => setBoolean("overlayShowAlbum", value)}
                 />
                 <ToggleRow
                   label="Animate now playing"
-                  description="Animate current song"
                   checked={form.overlayAnimateNowPlaying}
                   onChange={(value) =>
                     setBoolean("overlayAnimateNowPlaying", value)
@@ -353,7 +350,7 @@ export function OverlaySettingsPanel() {
               <CardHeader>
                 <CardTitle>Theme</CardTitle>
               </CardHeader>
-              <CardContent className="grid gap-4">
+              <CardContent className="overflow-hidden border border-(--border) p-0">
                 <ColorField
                   label="Accent"
                   value={form.overlayAccentColor}
@@ -380,8 +377,8 @@ export function OverlaySettingsPanel() {
                   onChange={(value) => setColor("overlayPanelColor", value)}
                 />
                 <ColorField
-                  label="Overlay background / chroma key"
-                  description="Use a normal visible background, or pick a deliberate key color like bright pink or green for OBS chroma key."
+                  label="Background color"
+                  description="For a transparent background, set background opacity to 0."
                   value={form.overlayBackgroundColor}
                   onChange={(value) =>
                     setColor("overlayBackgroundColor", value)
@@ -399,10 +396,10 @@ export function OverlaySettingsPanel() {
               <CardHeader>
                 <CardTitle>Density and sizing</CardTitle>
               </CardHeader>
-              <CardContent className="grid gap-4">
+              <CardContent className="overflow-hidden border border-(--border) p-0">
                 <RangeField
                   label="Overlay background opacity"
-                  description="Set this to 0 for a fully transparent page behind the playlist items."
+                  description="Set this to 0 for a fully transparent background behind the playlist items."
                   min={0}
                   max={100}
                   value={form.overlayBackgroundOpacity}
@@ -557,24 +554,24 @@ export function OverlaySettingsPanel() {
 
 function ToggleRow(props: {
   label: string;
-  description: string;
+  description?: string;
   checked: boolean;
   onChange: (value: boolean) => void;
 }) {
   return (
-    <label className="flex items-start justify-between gap-4 border border-(--border) bg-(--panel-soft) p-4">
-      <div>
+    <label className="grid gap-2 px-4 py-3 odd:bg-(--panel-soft) even:bg-(--panel-muted)">
+      <div className="flex items-center justify-between gap-4">
         <p className="font-medium text-(--text)">{props.label}</p>
-        <p className="mt-1 text-sm leading-7 text-(--muted)">
-          {props.description}
-        </p>
+        <input
+          type="checkbox"
+          checked={props.checked}
+          onChange={(event) => props.onChange(event.target.checked)}
+          className="h-5 w-5 shrink-0"
+        />
       </div>
-      <input
-        type="checkbox"
-        checked={props.checked}
-        onChange={(event) => props.onChange(event.target.checked)}
-        className="mt-1 h-5 w-5"
-      />
+      {props.description ? (
+        <p className="text-sm leading-6 text-(--muted)">{props.description}</p>
+      ) : null}
     </label>
   );
 }
@@ -586,23 +583,27 @@ function ColorField(props: {
   onChange: (value: string) => void;
 }) {
   return (
-    <div className="grid gap-2 border border-(--border) bg-(--panel-soft) p-4">
-      <p className="text-sm font-medium text-(--text)">{props.label}</p>
+    <div className="grid gap-2 px-4 py-3 odd:bg-(--panel-soft) even:bg-(--panel-muted)">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm font-medium text-(--text)">{props.label}</p>
+        <div className="flex min-w-0 items-center gap-3 sm:w-auto">
+          <input
+            type="color"
+            value={props.value}
+            onChange={(event) => props.onChange(event.target.value)}
+            className="h-10 w-12 shrink-0 border border-(--border) bg-transparent"
+          />
+          <div className="w-full sm:w-44">
+            <Input
+              value={props.value}
+              onChange={(event) => props.onChange(event.target.value)}
+            />
+          </div>
+        </div>
+      </div>
       {props.description ? (
         <p className="text-sm leading-6 text-(--muted)">{props.description}</p>
       ) : null}
-      <div className="flex items-center gap-3">
-        <input
-          type="color"
-          value={props.value}
-          onChange={(event) => props.onChange(event.target.value)}
-          className="h-11 w-14 border border-(--border) bg-transparent"
-        />
-        <Input
-          value={props.value}
-          onChange={(event) => props.onChange(event.target.value)}
-        />
-      </div>
     </div>
   );
 }
@@ -616,21 +617,26 @@ function RangeField(props: {
   onChange: (value: number) => void;
 }) {
   return (
-    <div className="grid gap-3 border border-(--border) bg-(--panel-soft) p-4">
+    <div className="grid gap-2 px-4 py-3 odd:bg-(--panel-soft) even:bg-(--panel-muted)">
       <div className="flex items-center justify-between gap-3">
         <p className="text-sm font-medium text-(--text)">{props.label}</p>
-        <span className="text-sm text-(--muted)">{props.value}</span>
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-xs font-semibold uppercase tracking-[0.16em] text-(--muted)">
+            Value
+          </span>
+          <span className="text-sm text-(--text)">{props.value}</span>
+        </div>
       </div>
-      {props.description ? (
-        <p className="text-sm leading-6 text-(--muted)">{props.description}</p>
-      ) : null}
       <input
         type="range"
         min={props.min}
         max={props.max}
         value={props.value}
         onChange={(event) => props.onChange(Number(event.target.value))}
       />
+      {props.description ? (
+        <p className="text-sm leading-6 text-(--muted)">{props.description}</p>
+      ) : null}
     </div>
   );
 }

src/components/song-search-panel.tsx

@@ -957,7 +957,7 @@ export function SongSearchPanel(props: {
                                 {song.title}
                               </p>
                               {isDisabled ? (
-                                <span className="inline-flex items-center border border-amber-400/35 bg-amber-500/12 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">
+                                <span className="inline-flex items-center border border-amber-700/50 bg-amber-950 px-2 py-[3px] text-xs font-semibold uppercase tracking-[0.16em] text-amber-100">
                                   {disabledReason}
                                 </span>
                               ) : null}
@@ -979,29 +979,29 @@ export function SongSearchPanel(props: {
                                 <PathBadge
                                   label="Lead"
                                   shortLabel="L"
-                                  className="border-emerald-400/30 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/10"
+                                  className="border-emerald-700/50 bg-emerald-950 text-emerald-100 hover:bg-emerald-950"
                                 />
                               ) : null}
                               {song.parts?.includes("rhythm") ? (
                                 <PathBadge
                                   label="Rhythm"
                                   shortLabel="R"
-                                  className="border-sky-400/30 bg-sky-500/10 text-sky-300 hover:bg-sky-500/10"
+                                  className="border-sky-700/50 bg-sky-950 text-sky-100 hover:bg-sky-950"
                                 />
                               ) : null}
                               {song.parts?.includes("bass") ? (
                                 <PathBadge
                                   label="Bass"
                                   shortLabel="B"
-                                  className="border-orange-400/30 bg-orange-500/10 text-orange-300 hover:bg-orange-500/10"
+                                  className="border-orange-700/50 bg-orange-950 text-orange-100 hover:bg-orange-950"
                                 />
                               ) : null}
                               {song.parts?.includes("voice") ||
                               song.parts?.includes("vocals") ? (
                                 <PathBadge
                                   label="Lyrics"
                                   shortLabel="V"
-                                  className="border-violet-400/30 bg-violet-500/10 text-violet-300 hover:bg-violet-500/10"
+                                  className="border-violet-700/50 bg-violet-950 text-violet-100 hover:bg-violet-950"
                                 />
                               ) : null}
                             </div>
@@ -1029,7 +1029,7 @@ export function SongSearchPanel(props: {
                                 {song.title}
                               </p>
                               {isDisabled ? (
-                                <span className="inline-flex items-center border border-amber-400/35 bg-amber-500/12 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">
+                                <span className="inline-flex items-center border border-amber-700/50 bg-amber-950 px-2 py-[3px] text-xs font-semibold uppercase tracking-[0.16em] text-amber-100">
                                   {disabledReason}
                                 </span>
                               ) : null}
@@ -1051,29 +1051,29 @@ export function SongSearchPanel(props: {
                                 <PathBadge
                                   label="Lead"
                                   shortLabel="L"
-                                  className="border-emerald-400/30 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/10"
+                                  className="border-emerald-700/50 bg-emerald-950 text-emerald-100 hover:bg-emerald-950"
                                 />
                               ) : null}
                               {song.parts?.includes("rhythm") ? (
                                 <PathBadge
                                   label="Rhythm"
                                   shortLabel="R"
-                                  className="border-sky-400/30 bg-sky-500/10 text-sky-300 hover:bg-sky-500/10"
+                                  className="border-sky-700/50 bg-sky-950 text-sky-100 hover:bg-sky-950"
                                 />
                               ) : null}
                               {song.parts?.includes("bass") ? (
                                 <PathBadge
                                   label="Bass"
                                   shortLabel="B"
-                                  className="border-orange-400/30 bg-orange-500/10 text-orange-300 hover:bg-orange-500/10"
+                                  className="border-orange-700/50 bg-orange-950 text-orange-100 hover:bg-orange-950"
                                 />
                               ) : null}
                               {song.parts?.includes("voice") ||
                               song.parts?.includes("vocals") ? (
                                 <PathBadge
                                   label="Lyrics"
                                   shortLabel="V"
-                                  className="border-violet-400/30 bg-violet-500/10 text-violet-300 hover:bg-violet-500/10"
+                                  className="border-violet-700/50 bg-violet-950 text-violet-100 hover:bg-violet-950"
                                 />
                               ) : null}
                             </div>
@@ -1152,14 +1152,14 @@ function PathBadge(props: {
 function getPathToneByValue(value: string) {
   switch (value.toLowerCase()) {
     case "lead":
-      return "border-emerald-400/30 bg-emerald-500/10 text-emerald-300";
+      return "border-emerald-700/50 bg-emerald-950 text-emerald-100";
     case "rhythm":
-      return "border-sky-400/30 bg-sky-500/10 text-sky-300";
+      return "border-sky-700/50 bg-sky-950 text-sky-100";
     case "bass":
-      return "border-orange-400/30 bg-orange-500/10 text-orange-300";
+      return "border-orange-700/50 bg-orange-950 text-orange-100";
     case "voice":
     case "vocals":
-      return "border-violet-400/30 bg-violet-500/10 text-violet-300";
+      return "border-violet-700/50 bg-violet-950 text-violet-100";
     default:
       return "border-(--border-strong) bg-(--panel) text-(--text)";
   }

src/components/ui/badge.tsx

@@ -3,7 +3,7 @@ import type * as React from "react";
 import { cn } from "~/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex select-none items-center rounded-none px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]",
+  "inline-flex select-none items-center rounded-none px-2 py-[3px] text-xs font-semibold [font-family:var(--font-accent)] uppercase tracking-[0.16em]",
   {
     variants: {
       variant: {

src/components/ui/button.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-none border text-sm font-medium transition-[background,color,border-color,box-shadow,transform] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--brand) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg) disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-none border text-sm font-medium [font-family:var(--font-accent)] uppercase tracking-[0.08em] transition-[background,color,border-color,box-shadow,transform] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--brand) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg) disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px",
   {
     variants: {
       variant: {

src/components/ui/label.tsx

@@ -8,7 +8,10 @@ const Label = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn("text-sm font-medium text-(--text)", className)}
+    className={cn(
+      "text-sm font-medium [font-family:var(--font-accent)] uppercase tracking-[0.08em] text-(--text)",
+      className
+    )}
     {...props}
   />
 ));

src/components/ui/tabs.tsx

@@ -63,7 +63,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-none border border-oklch(0.923 0.003 48.717) border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-oklch(0.147 0.004 49.25)/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-oklch(0.147 0.004 49.25) focus-visible:border-oklch(0.709 0.01 56.259) focus-visible:ring-[3px] focus-visible:ring-oklch(0.709 0.01 56.259)/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-oklch(0.553 0.013 58.071) dark:hover:text-oklch(0.147 0.004 49.25) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:border-oklch(1 0 0 / 10%) dark:text-oklch(0.985 0.001 106.423)/60 dark:hover:text-oklch(0.985 0.001 106.423) dark:focus-visible:border-oklch(0.553 0.013 58.071) dark:focus-visible:ring-oklch(0.553 0.013 58.071)/50 dark:dark:text-oklch(0.709 0.01 56.259) dark:dark:hover:text-oklch(0.985 0.001 106.423)",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-none border border-oklch(0.923 0.003 48.717) border-transparent px-2 py-1 text-sm font-medium [font-family:var(--font-accent)] uppercase tracking-[0.08em] whitespace-nowrap text-oklch(0.147 0.004 49.25)/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-oklch(0.147 0.004 49.25) focus-visible:border-oklch(0.709 0.01 56.259) focus-visible:ring-[3px] focus-visible:ring-oklch(0.709 0.01 56.259)/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-oklch(0.553 0.013 58.071) dark:hover:text-oklch(0.147 0.004 49.25) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:border-oklch(1 0 0 / 10%) dark:text-oklch(0.985 0.001 106.423)/60 dark:hover:text-oklch(0.985 0.001 106.423) dark:focus-visible:border-oklch(0.553 0.013 58.071) dark:focus-visible:ring-oklch(0.553 0.013 58.071)/50 dark:dark:text-oklch(0.709 0.01 56.259) dark:dark:hover:text-oklch(0.985 0.001 106.423)",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-oklch(1 0 0) data-[state=active]:text-oklch(0.147 0.004 49.25) dark:data-[state=active]:border-oklch(0.923 0.003 48.717) dark:data-[state=active]:bg-oklch(0.923 0.003 48.717)/30 dark:data-[state=active]:text-oklch(0.147 0.004 49.25) dark:data-[state=active]:bg-oklch(0.147 0.004 49.25) dark:data-[state=active]:text-oklch(0.985 0.001 106.423) dark:dark:data-[state=active]:border-oklch(1 0 0 / 15%) dark:dark:data-[state=active]:bg-oklch(1 0 0 / 15%)/30 dark:dark:data-[state=active]:text-oklch(0.985 0.001 106.423)",
         "after:absolute after:bg-oklch(0.147 0.004 49.25) after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100 dark:after:bg-oklch(0.985 0.001 106.423)",