fix: Improve UI/UX conformity and feel

src/lib/components/ControlModules/PublicShareClassicControlModule.svelte

@@ -62,7 +62,7 @@
 </script>
 
 <div
-  class="border-surface-400-500-token flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
+  class="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
   class:opacity-50={isPaused}
 >
   <!-- Title -->

src/lib/components/ControlModules/SharedShockerControlModule.svelte

@@ -64,7 +64,7 @@
 </script>
 
 <div
-  class="border-surface-400-500-token flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
+  class="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
   class:opacity-50={isPaused}
 >
   <!-- Title -->

src/lib/components/ControlModules/ShockerCard.svelte

@@ -34,20 +34,15 @@
   }: Props = $props();
 </script>
 
-<div
-  class={cn(
-    'border-surface-400-500-token bg-card flex w-80 flex-col overflow-hidden rounded-md border',
-    className
-  )}
->
+<div class={cn('bg-card flex w-80 flex-col overflow-hidden rounded-md border', className)}>
   <!-- Header -->
   <div class="border-border/60 flex items-center gap-2 border-b px-3 py-2">
     <div class="flex min-w-0 flex-1 flex-col">
       <h2 class="truncate text-sm leading-tight font-semibold" title={name}>{name}</h2>
       {#if showHubBadge && hubName}
         <div class="text-muted-foreground flex items-center gap-1.5 text-[11px]">
           <span
-            class="size-1.5 shrink-0 rounded-full {hubOnline ? 'bg-green-400' : 'bg-red-500'}"
+            class="size-1.5 shrink-0 rounded-full {hubOnline ? 'bg-success' : 'bg-destructive'}"
             title={hubOnline ? 'Online' : 'Offline'}
           ></span>
           <span class="truncate" title={hubName}>{hubName}</span>

src/lib/components/ControlModules/SimpleControlHeader.svelte

@@ -17,9 +17,7 @@
   }: Props = $props();
 </script>
 
-<div
-  class="border-surface-400-500-token flex flex-row items-center justify-center gap-16 rounded-md border px-8 py-2"
->
+<div class="flex flex-row items-center justify-center gap-16 rounded-md border px-8 py-2">
   <!-- Sliders -->
   <div class="grid flex-1 grid-cols-[24px_auto_40px] items-center gap-1 text-center">
     <Zap />

src/lib/components/ControlModules/dialogs/dialog-shocker-add.svelte

@@ -56,7 +56,7 @@
 </script>
 
 <Dialog.Header>
-  <Dialog.Title>Add Shocker</Dialog.Title>
+  <Dialog.Title>Add shocker</Dialog.Title>
   <Dialog.Description>Register a new shocker to one of your hubs.</Dialog.Description>
 </Dialog.Header>
 <div class="flex flex-col gap-4 py-2">

src/lib/components/ControlModules/impl/CircleSlider.svelte

@@ -150,7 +150,7 @@
     <!-- background arc -->
     <path
       d={calcSvgPathData(angleEnd)}
-      class="cursor-pointer fill-none stroke-neutral-200 stroke-20 dark:stroke-neutral-800"
+      class="stroke-muted-foreground/20 cursor-pointer fill-none stroke-20"
       stroke-linecap="round"
       aria-hidden="true"
       onpointerdown={startTracking}
@@ -177,7 +177,7 @@
       aria-valuenow={value}
       aria-valuemax={max}
       aria-labelledby={labelId}
-      class="cursor-move fill-white stroke-neutral-400 drop-shadow-md outline-none focus:ring-2 focus:ring-blue-500/60 dark:fill-neutral-900 dark:stroke-neutral-700"
+      class="fill-background stroke-muted-foreground/50 focus-visible:stroke-ring cursor-move drop-shadow-md outline-none focus-visible:stroke-3"
     />
   </svg>
 
@@ -191,14 +191,14 @@
     {max}
     {step}
     aria-label="Value"
-    class="hide-spinners absolute top-1/2 left-1/2 w-10 -translate-1/2 border-none bg-transparent text-center text-xl font-bold text-gray-900 focus:outline-none dark:text-gray-100"
+    class="hide-spinners text-foreground absolute top-1/2 left-1/2 w-10 -translate-1/2 border-none bg-transparent text-center text-xl font-bold focus:outline-none"
   />
 
   <!-- gauge label -->
   <label
     id={labelId}
     for={inputId}
-    class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/10 text-center text-neutral-600 dark:text-neutral-300"
+    class="text-muted-foreground absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/10 text-center"
   >
     {name}
   </label>

src/lib/components/ControlModules/impl/ShockerMenu.svelte

@@ -78,7 +78,7 @@
         Copy ID
       </DropdownMenu.Item>
       <DropdownMenu.Separator />
-      <DropdownMenu.Item class="cursor-pointer text-red-500" onclick={deleteShocker}>
+      <DropdownMenu.Item class="text-destructive cursor-pointer" onclick={deleteShocker}>
         <Trash2 class="size-4" />
         Delete
       </DropdownMenu.Item>

src/lib/components/FirmwareChannelSelector.svelte

@@ -62,16 +62,16 @@
 
   <div class="flex flex-row items-center justify-start gap-2 pl-2">
     {#if channel === 'stable'}
-      <CircleCheckBig color="#22c55e" />
-      <p class="text-green-500">This is the recommended channel.</p>
+      <CircleCheckBig class="text-success" />
+      <p class="text-success">This is the recommended channel.</p>
       <!--
     {:else if channel === 'beta'}
-      <TriangleAlert color="#eab308" />
-      <p class="text-yellow-500">This channel might contain bugs.</p>
+      <TriangleAlert class="text-warning" />
+      <p class="text-warning">This channel might contain bugs.</p>
     -->
     {:else}
-      <TriangleAlert color="#ef4444" />
-      <p class="font-bold text-red-500" role="alert">
+      <TriangleAlert class="text-destructive" />
+      <p class="text-destructive font-bold" role="alert">
         DO NOT USE THIS UNLESS YOU KNOW WHAT YOU ARE DOING
       </p>
     {/if}

src/lib/components/Table/RowActions.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+
+  export interface RowAction {
+    label: string;
+    /** Lucide icon component. Rendered at size-4 to match the rest of the menu. */
+    icon?: Component;
+    onclick?: () => void;
+    disabled?: boolean;
+    /** Tints the item with the destructive token. */
+    destructive?: boolean;
+    /** Draws a separator above this item. */
+    separatorBefore?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { TableActionMenu } from '@openshock/svelte-core/components';
+  import * as DropdownMenu from '@openshock/svelte-core/components/ui/dropdown-menu';
+
+  interface Props {
+    /** Group heading, e.g. "Hub". Omit for an unlabelled menu. */
+    label?: string;
+    actions: RowAction[];
+  }
+
+  let { label, actions }: Props = $props();
+</script>
+
+<TableActionMenu>
+  {#if label}
+    <DropdownMenu.Label>{label}</DropdownMenu.Label>
+  {/if}
+  <DropdownMenu.Group>
+    {#each actions as action (action.label)}
+      {#if action.separatorBefore}
+        <DropdownMenu.Separator />
+      {/if}
+      <DropdownMenu.Item
+        class={action.disabled
+          ? undefined
+          : action.destructive
+            ? 'text-destructive cursor-pointer'
+            : 'cursor-pointer'}
+        disabled={action.disabled}
+        onclick={action.onclick}
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="size-4" />
+        {/if}
+        {action.label}
+      </DropdownMenu.Item>
+    {/each}
+  </DropdownMenu.Group>
+</TableActionMenu>

src/lib/components/Turnstile.svelte

@@ -91,9 +91,7 @@
 >
   {#if !mounted}
     <!-- Turnstile placeholder -->
-    <div
-      class="flex h-full items-center justify-center gap-3 border border-[#e0e0e0] bg-[#fafafa] p-3 select-none dark:border-[#666] dark:bg-[#222]"
-    >
+    <div class="bg-muted flex h-full items-center justify-center gap-3 border p-3 select-none">
       {#if dev || disabled}
         <Bug />
         <span> Turnstile disabled </span>
@@ -102,7 +100,7 @@
         <span> Loading... </span>
       {/if}
       <a
-        class="mb-auto ml-auto h-7 w-auto text-[#666] dark:text-[#999]"
+        class="text-muted-foreground mb-auto ml-auto h-7 w-auto"
         href="https://www.cloudflare.com/products/turnstile/?utm_source=turnstile&utm_campaign=widget"
         target="_blank"
         rel="noopener noreferrer"

src/lib/components/shares/permission-tooltip.svelte

@@ -14,7 +14,12 @@
 
   function permClass(enabled: boolean): ClassValue {
     let base = 'p-1 rounded-lg ';
-    return base + (enabled ? 'bg-green-500' : 'bg-red-500');
+    return (
+      base +
+      (enabled
+        ? 'bg-success text-success-foreground'
+        : 'bg-destructive text-destructive-foreground')
+    );
   }
 
   let pausedReason = $derived(pauseState ? getPauseReason(pauseState) : null);
@@ -31,25 +36,25 @@
       class={permClass(shockerShare.permissions.shock)}
       title={shockerShare.permissions.shock ? 'Shock enabled' : 'Shock disabled'}
     >
-      <Zap color="white" />
+      <Zap />
     </span>
     <span
       class={permClass(shockerShare.permissions.vibrate)}
       title={shockerShare.permissions.vibrate ? 'Vibrate enabled' : 'Vibrate disabled'}
     >
-      <Waves color="white" />
+      <Waves />
     </span>
     <span
       class={permClass(shockerShare.permissions.sound)}
       title={shockerShare.permissions.sound ? 'Sound enabled' : 'Sound disabled'}
     >
-      <Volume2 color="white" />
+      <Volume2 />
     </span>
     <span
       class={permClass(shockerShare.permissions.live!)}
       title={shockerShare.permissions.live ? 'Live enabled' : 'Live disabled'}
     >
-      <ChartNoAxesGantt color="white" />
+      <ChartNoAxesGantt />
     </span>
   </div>
   <div class="flex justify-center gap-2">

src/lib/components/shares/user-selector.svelte

@@ -14,8 +14,7 @@
   let userInput = $state('');
   let { fetchedUser = $bindable(null) }: Props = $props();
 
-  function check(event: Event) {
-    event.preventDefault();
+  function check() {
     usersGetByName({ path: { username: userInput } })
       .then((user) => {
         fetchedUser = user;
@@ -32,21 +31,34 @@
   }
 
   let inputModified = $derived(fetchedUser?.name !== userInput);
+
+  // Not a <form>: this sits inside the share dialog's form, and nested forms are invalid HTML.
+  // Enter runs the lookup while the name is unconfirmed, and otherwise falls through to the outer form.
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Enter' || !inputModified) return;
+    event.preventDefault();
+    check();
+  }
 </script>
 
-<form class="flex items-center gap-2" onsubmit={check}>
-  <Avatar.Root class={(fetchedUser ? 'border-3 border-green-500' : '') + ' h-15 w-15'}>
+<div class="flex items-center gap-2">
+  <Avatar.Root class={(fetchedUser ? 'border-success border-3' : '') + ' h-15 w-15'}>
     <Avatar.Image
       src={fetchedUser?.image}
       alt={fetchedUser ? `${fetchedUser.name}'s avatar` : 'User avatar'}
     />
     <Avatar.Fallback>?</Avatar.Fallback>
   </Avatar.Root>
-  <Input bind:value={userInput} placeholder="Enter user name" aria-label="Username to search" />
+  <Input
+    bind:value={userInput}
+    onkeydown={onKeydown}
+    placeholder="Enter user name"
+    aria-label="Username to search"
+  />
   <Button
     onclick={check}
     disabled={!inputModified}
-    type="submit"
+    type="button"
     title={inputModified ? 'Search user' : 'User found'}
   >
     {#if inputModified}
@@ -55,4 +67,4 @@
       <Check />
     {/if}
   </Button>
-</form>
+</div>

src/lib/components/svg/LiveControlIcon.svelte

@@ -11,7 +11,7 @@
 
 <svg
   role="img"
-  class={cn('fill-black dark:fill-white', className)}
+  class={cn('fill-current', className)}
   width={size}
   height={size}
   viewBox="0 0 50 50"

src/lib/state/hubs-state.svelte.ts

@@ -43,6 +43,12 @@ export function notifyHubPaired(hubId: string) {
   hubPairedSignals.set(hubId, (hubPairedSignals.get(hubId) ?? 0) + 1);
 }
 
+// Whether ownHubs reflects the server yet, so an empty map can be told apart from "not fetched".
+export const ownHubsStatus = $state<{ loaded: boolean; failed: boolean }>({
+  loaded: false,
+  failed: false,
+});
+
 export async function refreshOwnHubs() {
   try {
     const { data } = await shockerListShockers();
@@ -52,7 +58,10 @@ export async function refreshOwnHubs() {
     for (const d of data) {
       ownHubs.set(d.id, d);
     }
+    ownHubsStatus.loaded = true;
+    ownHubsStatus.failed = false;
   } catch (error) {
+    ownHubsStatus.failed = true;
     handleApiError(error);
   }
 }

src/routes/(app)/+layout.svelte

@@ -21,7 +21,7 @@
 
 {#if authState.status !== AuthStatus.Authenticated}
   <Container>
-    <Spinner class="size-20 text-gray-600 dark:text-gray-300" />
+    <Spinner class="text-muted-foreground size-20" />
   </Container>
 {:else}
   {@render children()}

src/routes/(app)/admin/automation-tokens/+page.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import { adminListAutomationTokens } from '#lib/api/index.js';
   import { Bot, Plus, RotateCcw } from '@lucide/svelte';
-  import { Container, EmptyState, PageHeader } from '@openshock/svelte-core/components';
+  import {
+    Container,
+    EmptyState,
+    PageHeader,
+    PageLoading,
+  } from '@openshock/svelte-core/components';
   import DataTable from '#lib/components/Table/DataTableTemplate.svelte';
   import { Button } from '@openshock/svelte-core/components/ui/button';
-  import { Spinner } from '@openshock/svelte-core/components/ui/spinner';
   import { handleApiError } from '#lib/errorhandling/apiErrorHandling.js';
   import { registerBreadcrumbs } from '#lib/state/breadcrumbs-state.svelte.js';
   import { onMount } from 'svelte';
@@ -55,9 +59,7 @@
 
   <div class="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6">
     {#if !hasLoaded}
-      <div class="flex h-64 w-full items-center justify-center">
-        <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
-      </div>
+      <PageLoading />
     {:else if data.length === 0}
       <EmptyState
         icon={Bot}

src/routes/(app)/admin/automation-tokens/data-table-actions.svelte

@@ -44,7 +44,7 @@
     </DropdownMenu.Item>
     <DropdownMenu.Separator />
     <DropdownMenu.Item
-      class="cursor-pointer text-red-500"
+      class="text-destructive cursor-pointer"
       onclick={() => (deleteDialogOpen = true)}
     >
       <Trash2 class="size-4" />