feat(design): migrate shorts pages to new design system

Author: sifferhans

frontend/app/components/design/DesignSlider.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Slider } from "@ark-ui/vue";
+
+/*
+ * No slider exists in the admin-web design system. Built on Ark UI's Slider
+ * primitive, token-styled. Single-value (number) model; Ark works with arrays.
+ */
+interface Props {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    min: 0,
+    max: 100,
+    step: 1,
+});
+
+const model = defineModel<number>({ default: 0 });
+
+const arrayModel = computed<number[]>({
+    get: () => [model.value],
+    set: (v) => {
+        model.value = v[0] ?? 0;
+    },
+});
+</script>
+
+<template>
+    <Slider.Root
+        v-model="arrayModel"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        class="w-full disabled:cursor-not-allowed disabled:opacity-50"
+    >
+        <Slider.Control class="relative flex items-center py-1">
+            <Slider.Track class="bg-border-1 h-1.5 flex-1 rounded-full">
+                <Slider.Range class="bg-primary-contrast h-full rounded-full" />
+            </Slider.Track>
+            <Slider.Thumb
+                :index="0"
+                class="gradient-border shadow-resting ds-focus-ring bg-surface-raise block size-5 cursor-grab rounded-full active:cursor-grabbing"
+            >
+                <Slider.HiddenInput />
+            </Slider.Thumb>
+        </Slider.Control>
+    </Slider.Root>
+</template>

frontend/app/pages/shorts/generate.vue

@@ -101,7 +101,7 @@ watch([duration, scrubberWidth], ([d, s]) => {
     zoom.value = s / d;
 });
 
-const toast = useToast();
+const toaster = useDesignToaster();
 const confirmSubmit = ref(false);
 async function submit() {
     try {
@@ -110,10 +110,9 @@ async function submit() {
             InSeconds: startTime.value,
             OutSeconds: endTime.value,
         });
-        toast.add({
-            icon: "tabler:check",
+        toaster.create({
             title: "Short submitted successfully",
-            color: "success",
+            type: "success",
         });
         navigateTo("/shorts");
         confirmSubmit.value = false;
@@ -151,44 +150,40 @@ useVideoKeyboardControls({
     <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 p-8">
         <header class="mb-4 flex items-center justify-between">
             <div>
-                <h1 class="text-2xl font-bold">
+                <h1 class="text-heading-3 text-text-default">
                     {{ $t("shorts.generation.title") }}
                 </h1>
-                <p class="text-muted text-sm">
+                <p class="text-text-muted text-sm">
                     {{ $t("shorts.generation.description") }}
                 </p>
             </div>
-            <UButton @click="confirmSubmit = true">
-                <UIcon name="tabler:send" class="text-dimmed" />
+            <DesignButton icon="tabler:send" @click="confirmSubmit = true">
                 {{ $t("shorts.generation.submit") }}
-            </UButton>
-            <UModal
+            </DesignButton>
+            <DesignDialog
                 v-model:open="confirmSubmit"
                 :title="$t('shorts.generation.submitConfirmationTitle')"
                 :description="$t('shorts.generation.submitConfirmationMessage')"
             >
-                <template #footer>
-                    <div class="flex w-full justify-end gap-2">
-                        <UButton @click="confirmSubmit = false" variant="ghost">
-                            {{
-                                $t("shorts.generation.submitConfirmationCancel")
-                            }}
-                        </UButton>
-                        <UButton @click="submit">
-                            {{
-                                $t("shorts.generation.submitConfirmationSubmit")
-                            }}
-                        </UButton>
-                    </div>
-                </template>
-            </UModal>
+                <div class="flex w-full justify-end gap-2">
+                    <DesignButton
+                        variant="tertiary"
+                        @click="confirmSubmit = false"
+                    >
+                        {{ $t("shorts.generation.submitConfirmationCancel") }}
+                    </DesignButton>
+                    <DesignButton variant="primary" @click="submit">
+                        {{ $t("shorts.generation.submitConfirmationSubmit") }}
+                    </DesignButton>
+                </div>
+            </DesignDialog>
         </header>
         <template v-if="status == 'success'">
             <video
                 ref="videoElement"
                 :src="videoUrl"
                 controls
-                class="bg-default aspect-video w-full shadow-xl"
+                class="bg-surface-default aspect-video w-full shadow-xl"
             />
             <div class="flex items-center gap-2">
                 <div class="tabular-nums">
@@ -211,24 +206,32 @@ useVideoKeyboardControls({
                     </p>
                     <p
                         v-if="startTime != undefined && endTime != undefined"
-                        class="text-dimmed text-sm"
+                        class="text-text-hint text-sm"
                     >
                         {{ formatTime(startTime) }} - {{ formatTime(endTime) }}
                     </p>
                 </div>
-                <UButton
-                    class="ml-auto"
-                    variant="soft"
+                <DesignButton
+                    class="border-border-1 ml-auto border"
+                    variant="secondary"
                     @click="startTime = currentTime"
                 >
                     {{ $t("shorts.generation.setStartPoint") }}
-                </UButton>
-                <UButton variant="soft" @click="endTime = currentTime">
+                </DesignButton>
+                <DesignButton
+                    class="border-border-1 border"
+                    variant="secondary"
+                    @click="endTime = currentTime"
+                >
                     {{ $t("shorts.generation.setEndPoint") }}
-                </UButton>
-                <UButton variant="soft" @click="previewShort">
+                </DesignButton>
+                <DesignButton
+                    class="border-border-1 border"
+                    variant="secondary"
+                    @click="previewShort"
+                >
                     {{ $t("shorts.generation.previewShort") }}
-                </UButton>
+                </DesignButton>
             </div>
             <ShortsTimelineScrubber
                 v-if="
@@ -244,7 +247,7 @@ useVideoKeyboardControls({
                 v-model:start="startTime"
                 v-model:end="endTime"
             />
-            <USlider v-model="zoom" :min="0.1" :max="10" :step="0.01" />
+            <DesignSlider v-model="zoom" :min="0.1" :max="10" :step="0.01" />
         </template>
         <template v-if="status != 'success'">
             <USkeleton class="aspect-video w-full" />
@@ -261,10 +264,8 @@ useVideoKeyboardControls({
             <USkeleton class="h-2 w-full" />
         </template>
 
-        <UModal v-model:open="showManual">
-            <template #body>
-                <img :src="manualGif" />
-            </template>
-        </UModal>
+        <DesignDialog v-model:open="showManual">
+            <img :src="manualGif" class="w-full rounded-lg" />
+        </DesignDialog>
     </div>
 </template>

frontend/app/pages/shorts/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { z } from "zod";
-import type { FormSubmitEvent } from "@nuxt/ui";
 
 const analytics = useAnalytics();
 onMounted(() => {
@@ -15,7 +14,7 @@ useHead({
 });
 
 const schema = z.object({
-    vxId: z.string().regex(/^VX-[a-zA-Z0-9]+$/),
+    vxId: z.string().regex(/^VX-[a-zA-Z0-9]+$/, "Must look like VX-123456"),
 });
 
 type Schema = z.output<typeof schema>;
@@ -24,34 +23,40 @@ const state = reactive<Partial<Schema>>({
     vxId: undefined,
 });
 
-function onSubmit(event: FormSubmitEvent<Schema>) {
+const error = ref<string>();
+
+function onSubmit() {
+    const result = schema.safeParse(state);
+    if (!result.success) {
+        error.value = result.error.issues[0]?.message ?? "Invalid";
+        return;
+    }
+    error.value = undefined;
     navigateTo({
         name: "shorts-generate",
         query: {
-            id: event.data.vxId,
+            id: result.data.vxId,
         },
     });
 }
 </script>
 
 <template>
     <div class="flex justify-center py-8">
-        <UForm
-            :state
-            :schema
-            @submit="onSubmit"
+        <form
             class="flex w-full max-w-xs flex-col gap-2"
+            @submit.prevent="onSubmit"
         >
-            <UFormField label="VX ID" name="vxId" size="lg">
-                <UInput
-                    v-model="state.vxId"
-                    class="w-full"
-                    placeholder="VX-123456"
-                />
-            </UFormField>
-            <UButton type="submit" block>
+            <DesignInput
+                v-model="state.vxId"
+                label="VX ID"
+                placeholder="VX-123456"
+                :invalid="!!error"
+                :error-text="error"
+            />
+            <DesignButton type="submit" class="w-full">
                 {{ $t("shorts.generation.loadFromMediabanken") }}
-            </UButton>
-        </UForm>
+            </DesignButton>
+        </form>
     </div>
 </template>

frontend/docs/design-system-migration.md

@@ -281,6 +281,29 @@ self-closing); `UFormField`→`<label>`+control; utilities → tokens (`bg-defau
 (comma display + truncation in the narrow `w-24`/`w-32` filter selects), the 15 switches with
 descriptions, the filter search input (leading icon + trailing Clear button), and dark mode.
 
+### 2026-06-23 — shorts/index migrated (UForm → native form + zod)
+
+`app/pages/shorts/index.vue`: replaced `UForm` (Nuxt UI form + schema) with a native
+`<form @submit.prevent>` that runs the same zod schema via `safeParse` on submit; errors surface
+through `DesignInput`'s `:invalid` + `:error-text` (no `UFormField`). `UButton block` → `class="w-full"`.
+No new components. Removed the `@nuxt/ui` `FormSubmitEvent` import. `pnpm typecheck` ✅.
+
+**Pattern for `UForm` elsewhere:** there's no Design form component — use a native `<form>`, validate
+with the existing schema (`safeParse`) on submit, and feed the first issue message into the field's
+`error-text`. Reuse this for other `UForm` pages.
+
+### 2026-06-23 — shorts/generate migrated (+ DesignSlider)
+
+`app/pages/shorts/generate.vue` (the biggest page, 18 `U*`): `useToast`→`useDesignToaster`;
+6 `UButton`→`DesignButton` (`soft`→`secondary`, header submit uses `icon="tabler:send"` so the
+inline `UIcon` is dropped); 2 `UModal`→`DesignDialog` (the manual popup used `#body` → now plain
+default-slot `<img>`); `USlider`→new `DesignSlider`; utilities→tokens (`bg-default`→
+`bg-surface-default`, `text-muted`/`text-dimmed`→tokens). `USkeleton` kept (8×). Build + typecheck ✅.
+
+**New component:** `DesignSlider.vue` — Ark UI `Slider`, single-value `number` model (Ark uses a
+`number[]` internally, bridged), `min`/`max`/`step`/`disabled`, `ds-focus-ring` on the thumb. Anatomy
+matches Ark docs (Root › Control › Track › Range, Thumb[:index=0] › HiddenInput). Not in admin-web.
+
 ### Next steps (pick up here)
 
 1. **Human visual review** of `/export` (with and without `?id=`) in light + dark. Compare against