refactor: move dashboard screens into shell routes

2026-04-17 13:20:00 +01:00
parent e97a54ac8d
commit fac6409ec4
16 changed files with 113 additions and 21 deletions
--- a/WebApp/src/routes/(shell)/app/onboarding/+page.svelte
+++ b/WebApp/src/routes/(shell)/app/onboarding/+page.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	// @ts-nocheck
+	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
+	import { Settings } from '@lucide/svelte';
+
+	let showAdvancedSettings = false;
+</script>
+
+<AppChrome pageKey="onboarding">
+	<section id="screen-onboarding" class="flex flex-col items-center justify-center min-h-[70vh] max-w-lg mx-auto">
+		<Card variant="glass" class="w-full rounded-3xl">
+			<CardHeader class="px-6 pt-6 text-center">
+				<CardTitle class="text-3xl font-bold tracking-tight text-white">Configure Device</CardTitle>
+				<CardDescription class="text-sm text-gray-400">Set up this browser dashboard role</CardDescription>
+			</CardHeader>
+			<CardContent class="flex flex-col gap-6 px-6">
+				<div class="flex flex-col gap-2">
+					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="deviceName">DEVICE NAME</Label>
+					<Input
+						id="deviceName"
+						type="text"
+						placeholder="e.g. Living Room Cam"
+						class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
+						value={$appState.onboardingForm.name}
+						oninput={(event) => appController.setOnboardingField('name', (event.currentTarget as HTMLInputElement).value)}
+					/>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="role">ROLE</Label>
+					<ToggleGroup
+						id="role"
+						type="single"
+						value={$appState.onboardingForm.role}
+						variant="outline"
+						size="lg"
+						class="grid w-full grid-cols-2 gap-2 rounded-xl border border-white/5 bg-black/40 p-1.5"
+						onValueChange={(value) => value && appController.selectRole(value)}
+					>
+						<ToggleGroupItem
+							id="btn-role-camera"
+							value="camera"
+							class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
+						>
+							Camera
+						</ToggleGroupItem>
+						<ToggleGroupItem
+							id="btn-role-client"
+							value="client"
+							class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
+						>
+							Client
+						</ToggleGroupItem>
+					</ToggleGroup>
+				</div>
+
+				<div class="flex flex-col gap-3">
+					<div class="flex items-center justify-between">
+						<div class="space-y-1">
+							<Label class="text-xs font-semibold tracking-wider text-gray-400">ADVANCED SETTINGS</Label>
+							<p class="text-xs text-gray-500">Optional device settings and push configuration.</p>
+						</div>
+						<Button
+							id="toggleAdvancedSettingsBtn"
+							type="button"
+							variant="ghost"
+							class="h-10 w-10 rounded-full border border-white/10 bg-black/30 p-0 text-gray-300 hover:bg-white/5 hover:text-white"
+							aria-label={showAdvancedSettings ? 'Hide advanced settings' : 'Show advanced settings'}
+							aria-expanded={showAdvancedSettings}
+							onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
+						>
+							<Settings class="h-5 w-5" />
+						</Button>
+					</div>
+
+					{#if showAdvancedSettings}
+						<div class="rounded-2xl border border-white/8 bg-black/30 p-4">
+							<div class="flex flex-col gap-2">
+								<Label class="text-xs font-semibold tracking-wider text-gray-400" for="pushToken">PUSH TOKEN (OPTIONAL)</Label>
+								<Input
+									id="pushToken"
+									type="text"
+									placeholder="simulated_token_123"
+									class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
+									value={$appState.onboardingForm.pushToken}
+									oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
+								/>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</CardContent>
+			<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
+				<Button
+					id="registerBtn"
+					variant="premium"
+					class="h-12 w-full rounded-xl text-base"
+					onclick={() => appController.registerDevice()}
+				>
+					Complete Setup
+				</Button>
+				<Button
+					id="loadSavedBtn"
+					variant="ghost"
+					class="h-12 w-full rounded-xl text-gray-500 hover:bg-white/5 hover:text-white"
+					onclick={() => appController.loadSavedDevice()}
+				>
+					Load previously saved device
+				</Button>
+			</CardFooter>
+		</Card>
+	</section>
+</AppChrome>