chore: improve backup admin controls

frontend/src/lib/components/ui/checkbox.svelte

@@ -0,0 +1,78 @@
+<script>
+  import { Checkbox as CheckboxPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+  import { Check } from "./icons.js";
+
+  export let checked = false;
+  export let disabled = false;
+  export let indeterminate = false;
+  export let ariaLabel = "";
+  export let onCheckedChange = () => {};
+  let className = "";
+  export { className as class };
+
+  function handleCheckedChange(next) {
+    checked = Boolean(next);
+    onCheckedChange(checked);
+  }
+</script>
+
+<CheckboxPrimitive.Root
+  class={cn("ui-checkbox", className)}
+  {checked}
+  {disabled}
+  {indeterminate}
+  aria-label={ariaLabel}
+  onCheckedChange={handleCheckedChange}
+  {...$$restProps}
+>
+  {#if checked || indeterminate}
+    <Check size={13} strokeWidth={3} aria-hidden="true" />
+  {/if}
+</CheckboxPrimitive.Root>
+
+<style>
+  :global(.ui-checkbox) {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    flex: 0 0 18px;
+    padding: 0;
+    border: 1px solid var(--admin-border-strong, var(--border));
+    border-radius: 4px;
+    background: color-mix(
+      in srgb,
+      var(--admin-bg, var(--panel)) 84%,
+      var(--admin-surface-2, transparent)
+    );
+    color: #fff;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background 0.14s ease,
+      border-color 0.14s ease,
+      box-shadow 0.14s ease;
+  }
+
+  :global(.ui-checkbox:hover) {
+    border-color: var(--admin-ring, var(--accent));
+  }
+
+  :global(.ui-checkbox[data-state="checked"]),
+  :global(.ui-checkbox[data-state="indeterminate"]) {
+    border-color: color-mix(in srgb, var(--accent) 82%, transparent);
+    background: var(--accent);
+  }
+
+  :global(.ui-checkbox:focus-visible) {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
+  }
+
+  :global(.ui-checkbox:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

frontend/src/lib/components/ui/index.js

@@ -1,9 +1,12 @@
 export { default as AttentionDot } from "./attention-dot.svelte";
 export { default as Badge } from "./badge.svelte";
 export { default as Button } from "./button.svelte";
+export { default as Checkbox } from "./checkbox.svelte";
 export { default as Dialog } from "./dialog.svelte";
 export { default as Input } from "./input.svelte";
 export { default as LegacyCard } from "./card.svelte";
+export { default as RadioGroup } from "./radio-group.svelte";
+export { default as RadioGroupItem } from "./radio-group-item.svelte";
 export { default as Skeleton } from "./skeleton.svelte";
 export { default as Spinner } from "./spinner.svelte";
 export { default as ScrollArea } from "./scroll-area.svelte";

frontend/src/lib/components/ui/radio-group-item.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  export let value = "";
+  export let disabled = false;
+  export let ariaLabel = "";
+  let className = "";
+  export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+  class={cn("ui-radio-item", className)}
+  {value}
+  {disabled}
+  aria-label={ariaLabel || value}
+  {...$$restProps}
+>
+  <span class="ui-radio-indicator" aria-hidden="true"></span>
+  <slot />
+</RadioGroupPrimitive.Item>
+
+<style>
+  :global(.ui-radio-item) {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    flex: 0 0 18px;
+    padding: 0;
+    border: 1px solid var(--admin-border-strong, var(--border));
+    border-radius: 999px;
+    background: color-mix(
+      in srgb,
+      var(--admin-bg, var(--panel)) 84%,
+      var(--admin-surface-2, transparent)
+    );
+    cursor: pointer;
+    outline: none;
+    transition:
+      border-color 0.14s ease,
+      box-shadow 0.14s ease;
+  }
+
+  :global(.ui-radio-item:hover) {
+    border-color: var(--admin-ring, var(--accent));
+  }
+
+  :global(.ui-radio-item:focus-visible) {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
+  }
+
+  :global(.ui-radio-item:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ui-radio-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--accent);
+    opacity: 0;
+    transform: scale(0.6);
+    transition:
+      opacity 0.14s ease,
+      transform 0.14s ease;
+  }
+
+  :global(.ui-radio-item[data-state="checked"]) {
+    border-color: var(--accent);
+  }
+
+  :global(.ui-radio-item[data-state="checked"]) .ui-radio-indicator {
+    opacity: 1;
+    transform: scale(1);
+  }
+</style>

frontend/src/lib/components/ui/radio-group.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  export let value = "";
+  export let orientation = "vertical";
+  export let name = "";
+  export let disabled = false;
+  export let onValueChange = () => {};
+  let className = "";
+  export { className as class };
+
+  function handleValueChange(next) {
+    value = next;
+    onValueChange(next);
+  }
+</script>
+
+<RadioGroupPrimitive.Root
+  class={cn("ui-radio-group", className)}
+  {value}
+  {orientation}
+  {name}
+  {disabled}
+  onValueChange={handleValueChange}
+  {...$$restProps}
+>
+  <slot />
+</RadioGroupPrimitive.Root>
+
+<style>
+  :global(.ui-radio-group) {
+    display: grid;
+    gap: 8px;
+  }
+</style>