appController.selectCamera(link.cameraDeviceId)}
- onkeydown={(event) => {
- if (event.key === 'Enter' || event.key === ' ') appController.selectCamera(link.cameraDeviceId);
- }}
- >
-
- {#if $appState.activeCameraDeviceId === link.cameraDeviceId}
-
-
-
Viewing
+
+
+ {#each $appState.linkedCameras as link (link.id)}
+
{
+ if ((event.target as HTMLElement).closest('[data-menu-trigger]')) return;
+ appController.selectCamera(link.cameraDeviceId);
+ }}
+ onkeydown={(event) => {
+ if (event.key === 'Enter' || event.key === ' ') appController.selectCamera(link.cameraDeviceId);
+ }}
+ >
+
+
+ {#if $appState.activeCameraDeviceId === link.cameraDeviceId}
+
+ {:else}
+
+
+
{isCameraLive(link.cameraDeviceId) ? 'Live Stream Active' : 'Click to view'}
+
+ {/if}
-
-
{isCameraLive(link.cameraDeviceId) ? 'Live Stream Active' : 'Click to view'}
-
-
-
-
-
-
-
- {link.cameraName || link.cameraDeviceId}
-
-
{link.cameraStatus || 'offline'}
+
+
+
+
+ {link.cameraName || link.cameraDeviceId}
+
+
+
+ {link.cameraStatus || 'offline'}
+
+
+
+
+ {#snippet child({ props })}
+
+ {/snippet}
+
+
+ {
+ event.stopPropagation();
+ appController.renameLinkedCamera(link.cameraDeviceId);
+ }}
+ >
+ Rename
+
+ {
+ event.stopPropagation();
+ appController.deleteLinkedCamera(link.id);
+ }}
+ >
+ Delete
+
+
+
-
-
-
-
-
-
-
-
+
+
+ {/each}
- {/each}
+
{/if}
-
+
+
-
-
-
-
-
Live Feed: {activeCameraLabel()}
-
-
+
+
-
+
-
+
- {$appState.clientPlaceholderText}
-
-
+
Stream unavailable
+
+ {$appState.clientPlaceholderText}
+
+
+
+
-
-
Recent Recordings
-
+
+
+ Recent Recordings
+
+
+
+
{#if $appState.recordings.length === 0}
-
+
+ No recordings found
+
+ Captured clips will appear here when they are ready.
+
+
{:else}
{#each $appState.recordings.slice(0, 5) as recording (recording.id)}
-
-
- {new Date(recording.createdAt).toLocaleString()}
-
- {recording.durationSeconds != null ? `${recording.durationSeconds}s duration` : 'Duration pending'} · {recording.status ?? 'unknown'}
-
-
-
-
+
+
+
+ {new Date(recording.createdAt).toLocaleString()}
+
+ {recording.durationSeconds != null ? `${recording.durationSeconds}s duration` : 'Duration pending'} · {recording.status ?? 'unknown'}
+
+
+
+
+
{/each}
{/if}
-
+
+
+
+
diff --git a/WebApp/src/routes/layout.css b/WebApp/src/routes/layout.css
deleted file mode 100644
index 506b470..0000000
--- a/WebApp/src/routes/layout.css
+++ /dev/null
@@ -1,81 +0,0 @@
-@import 'tailwindcss';
-@plugin "daisyui";
-
-body {
- font-family: 'Inter', sans-serif;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
- width: 6px;
- height: 6px;
-}
-
-::-webkit-scrollbar-track {
- background: rgb(0 0 0 / 20%);
-}
-
-::-webkit-scrollbar-thumb {
- background: rgb(255 255 255 / 10%);
- border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: rgb(255 255 255 / 20%);
-}
-
-.glass-panel {
- background: rgb(15 15 20 / 70%);
- backdrop-filter: blur(16px);
- border: 1px solid rgb(255 255 255 / 5%);
-}
-
-.glass-card {
- background: rgb(25 25 30 / 60%);
- border: 1px solid rgb(255 255 255 / 8%);
-}
-
-.btn-premium {
- background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
- border: none;
- color: white;
- transition: all 0.2s ease;
-}
-
-.btn-premium:hover {
- transform: translateY(-1px);
- box-shadow: 0 4px 12px rgb(37 99 235 / 30%);
-}
-
-.status-dot {
- height: 8px;
- width: 8px;
- border-radius: 50%;
- display: inline-block;
-}
-
-.status-online {
- background-color: #10b981;
- box-shadow: 0 0 8px rgb(16 185 129 / 40%);
-}
-
-.status-offline {
- background-color: #ef4444;
- box-shadow: 0 0 8px rgb(239 68 68 / 40%);
-}
-
-@keyframes slideIn {
- from {
- transform: translateY(100%);
- opacity: 0;
- }
-
- to {
- transform: translateY(0);
- opacity: 1;
- }
-}
-
-.toast-enter {
- animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
diff --git a/WebApp/src/routes/onboarding/+page.svelte b/WebApp/src/routes/onboarding/+page.svelte
index e4c8ea6..ea1178f 100644
--- a/WebApp/src/routes/onboarding/+page.svelte
+++ b/WebApp/src/routes/onboarding/+page.svelte
@@ -3,74 +3,90 @@
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';
-
-
Configure Device
-
Set up this browser dashboard role
-
-
-
- appController.setOnboardingField('name', (event.currentTarget as HTMLInputElement).value)}
- />
-
-
-
-
-
-
-
+
-
-
diff --git a/WebApp/src/routes/page.svelte.spec.ts b/WebApp/src/routes/page.svelte.spec.ts
index e556300..cc0d07f 100644
--- a/WebApp/src/routes/page.svelte.spec.ts
+++ b/WebApp/src/routes/page.svelte.spec.ts
@@ -7,7 +7,7 @@ describe('/+page.svelte', () => {
it('should render simulator auth heading', async () => {
render(Page);
- const heading = page.getByRole('heading', { name: 'SecureCam Web' });
+ const heading = page.getByRole('heading', { name: 'PhoneCam Web' });
await expect.element(heading).toBeInTheDocument();
});
});
diff --git a/WebApp/src/routes/settings/+page.svelte b/WebApp/src/routes/settings/+page.svelte
index abe1976..9f85c4b 100644
--- a/WebApp/src/routes/settings/+page.svelte
+++ b/WebApp/src/routes/settings/+page.svelte
@@ -3,6 +3,10 @@
import AppChrome from '$lib/sim/ui/AppChrome.svelte';
import { appController } from '$lib/app/controller';
import { appState } from '$lib/app/store';
+ import { Avatar, AvatarFallback } from '$lib/components/ui/avatar/index.js';
+ import { Button } from '$lib/components/ui/button/index.js';
+ import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+ import { Separator } from '$lib/components/ui/separator/index.js';
const profileName = () => $appState.session?.user?.name || 'User';
const profileEmail = () => $appState.session?.user?.email || 'user@example.com';
@@ -13,23 +17,27 @@
Settings
-
-
- {profileInitial()}
-
-
-
{profileName()}
-
{profileEmail()}
-
-
+
{profileName()}
+
{profileEmail()}
+
-
+
+
+
-
+