Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): refresh simulator dashboard UI

Browse Source
This commit is contained in:
Matiss Jurevics
2026-04-16 14:45:00 +01:00
parent 68ecc82bd9
commit 3c1099efdf
17 changed files with 407 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
WebApp/src/app.css
View File

@@ -38,7 +38,6 @@
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
@@ -109,6 +108,13 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
/* Custom brand colors and glassmorphism tokens */
--color-premium: #2563eb;
--color-premium-foreground: #ffffff;
--color-glass-background: rgb(25 25 30 / 60%);
--color-glass-border: rgb(255 255 255 / 8%);
--color-glass-panel: rgb(15 15 20 / 70%);
}
@layer base {
@@ -123,7 +129,7 @@
}
}
/* Preserve existing simulator utility styles alongside shadcn tokens. */
/* Scrollbar customizations */
::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -142,29 +148,6 @@
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;
@@ -193,7 +176,3 @@
opacity: 1;
}
}
.toast-enter {
animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

33
WebApp/src/lib/app/controller.js
View File

@@ -805,39 +805,6 @@ const stopPolling = () => {
}
};
const pollClientData = async () => {
const { device } = getAppState();
if (!device || device.role !== 'client') return;
const [recs, links, deviceList, notifications] = await Promise.all([
api.ops.listRecordings().catch(() => ({ recordings: [] })),
api.devices.listLinks().catch(() => ({ links: [] })),
api.devices.list().catch(() => ({ devices: [] })),
api.ops.listNotifications().catch(() => ({ notifications: [] }))
]);
const cameraById = new Map(
(deviceList.devices || [])
.filter((entry) => entry.role === 'camera')
.map((entry) => [entry.id, entry])
);
const linkedCameras = (links.links || []).map((link) => {
const camera = cameraById.get(link.cameraDeviceId);
return {
...link,
cameraName: camera?.name ?? null,
cameraStatus: camera?.status ?? 'offline'
};
});
setAppState({
recordings: recs.recordings || [],
linkedCameras
});
syncMotionNotificationsFromDeliveries(notifications.notifications);
};
const startPolling = () => {
stopPolling();
void pollClientData();

1
WebApp/src/lib/components/ui/alert/alert.svelte
View File

@@ -7,6 +7,7 @@
variant: {
default: "bg-card text-card-foreground",
destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
glass: "bg-glass-background border-glass-border backdrop-blur-xl shadow-lg",
},
},
defaultVariants: {

1
WebApp/src/lib/components/ui/button/button.svelte
View File

@@ -13,6 +13,7 @@
ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
link: "text-primary underline-offset-4 hover:underline",
premium: "bg-premium text-premium-foreground shadow-lg shadow-premium/20 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-premium/30 active:translate-y-0",
},
size: {
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",

38
WebApp/src/lib/components/ui/card/card.svelte
View File

@@ -1,21 +1,51 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
<script lang="ts" module>
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
import { type VariantProps, tv } from "tailwind-variants";
export const cardVariants = tv({
base: "bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
variants: {
variant: {
default: "bg-card text-card-foreground",
glass: "bg-glass-background border-glass-border border ring-0 backdrop-blur-xl shadow-2xl",
},
size: {
default: "gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
sm: "gap-3 py-3",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
export type CardVariant = VariantProps<typeof cardVariants>["variant"];
export type CardSize = VariantProps<typeof cardVariants>["size"];
export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
variant?: CardVariant;
size?: CardSize;
};
</script>
<script lang="ts">
let {
ref = $bindable(null),
class: className,
children,
variant = "default",
size = "default",
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
}: CardProps = $props();
</script>
<div
bind:this={ref}
data-slot="card"
data-size={size}
class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
class={cn(cardVariants({ variant, size }), className)}
{...restProps}
>
{@render children?.()}

10
WebApp/src/lib/components/ui/dialog/dialog-content.svelte
View File

@@ -14,12 +14,19 @@
portalProps,
children,
showCloseButton = true,
variant = "default",
...restProps
}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
children: Snippet;
showCloseButton?: boolean;
variant?: "default" | "glass";
} = $props();
const variantClasses = {
default: "bg-popover text-popover-foreground ring-1 ring-foreground/10",
glass: "bg-glass-background border-glass-border border backdrop-blur-xl shadow-2xl text-foreground"
};
</script>
<DialogPortal {...portalProps}>
@@ -28,7 +35,8 @@
bind:ref
data-slot="dialog-content"
class={cn(
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
variantClasses[variant],
className
)}
{...restProps}

7
WebApp/src/lib/components/ui/skeleton/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import Root from "./skeleton.svelte";
export {
Root,
//
Root as Skeleton,
};

16
WebApp/src/lib/components/ui/skeleton/skeleton.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let {
ref = $bindable(null),
class: className,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
class={cn("bg-muted animate-pulse rounded-md", className)}
{...restProps}
></div>

7
WebApp/src/lib/components/ui/switch/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import Root from "./switch.svelte";
export {
Root,
//
Root as Switch,
};

25
WebApp/src/lib/components/ui/switch/switch.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts">
import { Switch as SwitchPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
class: className,
checked = $bindable(false),
...restProps
}: SwitchPrimitive.RootProps = $props();
</script>
<SwitchPrimitive.Root
bind:checked
class={cn(
"focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...restProps}
>
<SwitchPrimitive.Thumb
class={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitive.Root>

123
WebApp/src/lib/sim/ui/AppChrome.svelte
View File

@@ -9,6 +9,18 @@
import { Button } from '$lib/components/ui/button/index.js';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '$lib/components/ui/dialog/index.js';
import { Separator } from '$lib/components/ui/separator/index.js';
import { Skeleton } from '$lib/components/ui/skeleton/index.js';
import {
LayoutDashboard,
Bell,
Settings,
X,
Download,
Info,
AlertTriangle,
RefreshCw,
CheckCircle2
} from '@lucide/svelte';
let { children, pageKey } = $props<{ children: () => unknown; pageKey: string }>();
let recordingDialogOpen = $state(false);
@@ -51,11 +63,22 @@
<div id="toast-container" class="fixed top-4 right-4 z-50 flex w-[22rem] flex-col gap-3">
{#each $appState.toasts as toast (toast.id)}
<Alert
variant={toast.type === 'error' ? 'destructive' : 'default'}
class="glass-card border-white/10 bg-background/95 shadow-lg"
variant={toast.type === 'error' ? 'destructive' : 'glass'}
class="shadow-lg"
>
<AlertTitle class="text-xs">{toastTitle(toast.type)}</AlertTitle>
<AlertDescription class="pr-8 text-xs text-gray-300">{toast.message}</AlertDescription>
<div class="flex items-start gap-3">
{#if toast.type === 'error'}
<AlertTriangle class="size-4 shrink-0 text-destructive" />
{:else if toast.type === 'success'}
<CheckCircle2 class="size-4 shrink-0 text-emerald-500" />
{:else}
<Info class="size-4 shrink-0 text-blue-500" />
{/if}
<div class="flex-1">
<AlertTitle class="text-xs">{toastTitle(toast.type)}</AlertTitle>
<AlertDescription class="pr-8 text-xs text-gray-300">{toast.message}</AlertDescription>
</div>
</div>
<AlertAction>
<Button
variant="ghost"
@@ -63,9 +86,7 @@
class="text-gray-400 hover:text-white"
onclick={() => appController.removeToast(toast.id)}
>
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<X class="size-3.5" />
<span class="sr-only">Dismiss notification</span>
</Button>
</AlertAction>
@@ -73,7 +94,8 @@
{/each}
{#if $pwaState.installAvailable}
<Alert class="glass-card border-white/10 bg-background/95 shadow-lg">
<Alert variant="glass" class="shadow-lg">
<Download class="size-4 shrink-0 text-blue-500" />
<AlertTitle class="text-xs">Install App</AlertTitle>
<AlertDescription class="pr-8 text-xs text-gray-300">
Add PhoneCam to your home screen for a more native dashboard experience.
@@ -93,7 +115,8 @@
{/if}
{#if $pwaState.showIosInstallHint}
<Alert class="glass-card border-white/10 bg-background/95 shadow-lg">
<Alert variant="glass" class="shadow-lg">
<Info class="size-4 shrink-0 text-blue-500" />
<AlertTitle class="text-xs">Install on iPhone</AlertTitle>
<AlertDescription class="pr-8 text-xs text-gray-300">
In Safari, tap the Share button, then choose “Add to Home Screen” to install PhoneCam.
@@ -108,6 +131,7 @@
{#if $pwaState.updateAvailable}
<Alert class="glass-card border-blue-500/20 bg-background/95 shadow-lg">
<RefreshCw class="size-4 shrink-0 text-blue-500" />
<AlertTitle class="text-xs">Update Ready</AlertTitle>
<AlertDescription class="pr-8 text-xs text-gray-300">
A newer version of PhoneCam is ready. Reload to use the latest app shell.
@@ -121,7 +145,8 @@
{/if}
{#if $pwaState.offlineReady}
<Alert class="glass-card border-emerald-500/20 bg-background/95 shadow-lg">
<Alert variant="glass" class="border-emerald-500/20 shadow-lg">
<CheckCircle2 class="size-4 shrink-0 text-emerald-500" />
<AlertTitle class="text-xs">Offline Shell Ready</AlertTitle>
<AlertDescription class="pr-8 text-xs text-gray-300">
The app shell is now cached for quicker relaunches, but live camera features still need connectivity.
@@ -142,20 +167,20 @@
{#if showSidebarSkeleton()}
<div class="p-4 lg:p-6">
<div class="flex items-center justify-center gap-3 lg:justify-start">
<div class="size-10 rounded-full bg-white/8 animate-pulse"></div>
<Skeleton class="size-10 rounded-full" />
<div class="hidden min-w-0 flex-1 flex-col gap-2 lg:flex">
<div class="h-3 w-28 rounded-full bg-white/8 animate-pulse"></div>
<div class="h-2.5 w-36 rounded-full bg-white/6 animate-pulse"></div>
<Skeleton class="h-3 w-28 rounded-full" />
<Skeleton class="h-2.5 w-36 rounded-full" />
</div>
</div>
<div class="mt-3 flex items-center justify-center lg:justify-start">
<div class="h-6 w-24 rounded-full bg-white/8 animate-pulse"></div>
<Skeleton class="h-6 w-24 rounded-full" />
</div>
</div>
<Separator class="bg-white/5" />
<nav class="flex flex-1 flex-col gap-2 py-6 px-3">
{#each Array(3) as _, index (index)}
<div class="h-12 w-full rounded-xl bg-white/6 animate-pulse"></div>
<Skeleton class="h-12 w-full rounded-xl" />
{/each}
</nav>
{:else}
@@ -187,21 +212,7 @@
class="nav-btn h-12 w-full justify-center gap-3 rounded-xl border border-transparent text-gray-400 hover:text-white lg:justify-start"
onclick={() => appController.navigate('home')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
data-icon="inline-start"
class="h-5 w-5 shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
<LayoutDashboard class="h-5 w-5 shrink-0" />
<span class="font-medium hidden lg:block text-sm">Dashboard</span>
</Button>
@@ -210,21 +221,7 @@
class="nav-btn relative h-12 w-full justify-center gap-3 rounded-xl border border-transparent text-gray-400 hover:text-white lg:justify-start"
onclick={() => appController.navigate('activity')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
data-icon="inline-start"
class="h-5 w-5 shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
<Bell class="h-5 w-5 shrink-0" />
<span class="font-medium hidden lg:block text-sm">Activity Feed</span>
{#if $unreadNotificationsCount > 0}
<Badge
@@ -246,27 +243,7 @@
class="nav-btn h-12 w-full justify-center gap-3 rounded-xl border border-transparent text-gray-400 hover:text-white lg:justify-start"
onclick={() => appController.navigate('settings')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
data-icon="inline-start"
class="h-5 w-5 shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<Settings class="h-5 w-5 shrink-0" />
<span class="font-medium hidden lg:block text-sm">Settings</span>
</Button>
</nav>
@@ -276,8 +253,11 @@
<main class="flex-1 flex flex-col h-full overflow-hidden relative">
{#if $pwaState.isOffline}
<div class="px-4 pt-4 md:px-8 md:pt-6 lg:px-10">
<Alert class="glass-card border-amber-500/20 bg-[#141418]/95 shadow-lg">
<AlertTitle class="text-xs uppercase tracking-wide text-amber-300">{offlineTitle()}</AlertTitle>
<Alert variant="glass" class="border-amber-500/20 shadow-lg">
<div class="flex items-center gap-3">
<AlertTriangle class="size-4 text-amber-500" />
<AlertTitle class="text-xs uppercase tracking-wide text-amber-300">{offlineTitle()}</AlertTitle>
</div>
<AlertDescription class="text-xs text-gray-300">
{offlineDescription()}
</AlertDescription>
@@ -294,7 +274,8 @@
<DialogContent
id="recordingModal"
showCloseButton={false}
class="glass-card max-w-5xl border-white/10 bg-[#101014]/95 p-0 shadow-2xl sm:max-w-5xl"
variant="glass"
class="max-w-5xl p-0"
>
<DialogHeader class="gap-3 px-6 pt-6">
<div class="flex items-center justify-between gap-4">
@@ -313,9 +294,7 @@
title="Close recording modal"
onclick={() => appController.closeRecordingModal()}
>
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<X class="size-4" />
</Button>
</div>
</DialogHeader>

15
WebApp/src/routes/+page.svelte
View File

@@ -8,23 +8,17 @@
import { Input } from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js';
import { Separator } from '$lib/components/ui/separator/index.js';
import { ShieldCheck } from '@lucide/svelte';
</script>
<AppChrome pageKey="auth">
<section id="screen-auth" class="flex flex-col items-center justify-center min-h-[70vh] animate-fade-in max-w-sm mx-auto">
<Card class="glass-card w-full rounded-3xl border-white/10 bg-[#16161d]/80 shadow-2xl">
<Card variant="glass" class="w-full rounded-3xl">
<CardHeader class="items-center gap-4 px-6 pt-6 text-center">
<div
class="flex size-20 items-center justify-center rounded-3xl bg-gradient-to-tr from-blue-600 to-indigo-600 shadow-lg shadow-blue-900/20"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
<ShieldCheck class="size-10 text-white" />
</div>
<div class="flex flex-col gap-2">
<CardTitle class="text-3xl font-bold tracking-tight text-white">PhoneCam Web</CardTitle>
@@ -71,7 +65,8 @@
<CardFooter class="flex flex-col items-stretch gap-4 border-0 bg-transparent px-6 pb-6 pt-2">
<Button
id="signInBtn"
class="btn-premium h-12 w-full rounded-xl text-base text-white shadow-lg shadow-blue-900/20"
variant="premium"
class="h-12 w-full rounded-xl text-base shadow-lg shadow-blue-900/20"
onclick={() => appController.submitAuth()}
>
{$appState.isRegistering ? 'Create Account' : 'Sign In'}

30
WebApp/src/routes/activity/+page.svelte
View File

@@ -7,6 +7,7 @@
import { Button } from '$lib/components/ui/button/index.js';
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { BellOff, Trash2, Calendar } from '@lucide/svelte';
</script>
<AppChrome pageKey="activity">
@@ -16,14 +17,15 @@
<Button
id="clearActivityBtn"
variant="ghost"
class="rounded-xl border border-transparent text-gray-400 hover:bg-white/5 hover:text-white"
class="rounded-xl border border-white/5 text-gray-400 hover:bg-white/5 hover:text-white"
onclick={() => appController.clearNotifications()}
>
<Trash2 class="size-4 mr-2" />
Clear Read
</Button>
</div>
<Card class="glass-card rounded-3xl border-white/10 bg-[#16161d]/80">
<Card variant="glass" class="rounded-3xl">
<CardHeader>
<CardTitle class="text-sm font-semibold tracking-wide text-white">Motion Alerts</CardTitle>
</CardHeader>
@@ -31,17 +33,10 @@
<ScrollArea class="max-h-[32rem] pr-3">
<div id="activityFeedList" class="flex flex-col gap-3">
{#if $appState.motionNotifications.length === 0}
<Alert class="border-white/10 bg-black/20 text-center opacity-70">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
<AlertTitle class="justify-self-center text-sm text-gray-200">All quiet</AlertTitle>
<AlertDescription class="justify-self-center text-sm text-gray-400">
<Alert variant="default" class="border-white/10 bg-black/20 text-center opacity-70 py-10">
<BellOff class="h-12 w-12 mx-auto mb-4 text-gray-600" />
<AlertTitle class="text-sm text-gray-200">All quiet</AlertTitle>
<AlertDescription class="text-sm text-gray-400">
No notifications yet.
</AlertDescription>
</Alert>
@@ -50,11 +45,14 @@
<Button
type="button"
variant="ghost"
class="h-auto w-full flex-col items-start gap-1 rounded-xl border border-white/5 px-4 py-3 text-left {notification.isRead ? 'bg-gray-900/30 text-gray-200' : 'bg-blue-900/20 text-white'}"
class="h-auto w-full flex-col items-start gap-1 rounded-xl border border-white/5 px-4 py-3 text-left transition-all hover:bg-white/5 {notification.isRead ? 'bg-gray-900/30 text-gray-400' : 'bg-blue-600/10 text-white border-blue-500/20'}"
onclick={() => appController.openMotionNotificationTarget(notification.id, notification.cameraDeviceId)}
>
<p class="text-xs font-medium">{notification.message}</p>
<p class="text-[10px] text-gray-500">{new Date(notification.createdAt).toLocaleString()}</p>
<p class="text-sm font-semibold">{notification.message}</p>
<div class="flex items-center gap-2 mt-1">
<Calendar class="size-3 text-gray-500" />
<p class="text-[10px] text-gray-500">{new Date(notification.createdAt).toLocaleString()}</p>
</div>
</Button>
{/each}
{/if}

190
WebApp/src/routes/camera/+page.svelte
View File

@@ -10,6 +10,17 @@
import { Label } from '$lib/components/ui/label/index.js';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select/index.js';
import { Switch } from '$lib/components/ui/switch/index.js';
import {
VideoOff,
RefreshCw,
Zap,
Square,
Activity,
Settings2,
Terminal,
Camera
} from '@lucide/svelte';
let cameraVideoElement: HTMLVideoElement | null = null;
@@ -40,7 +51,7 @@
<AppChrome pageKey="camera">
<section id="screen-home-camera" class="mx-auto flex h-full min-h-0 max-w-7xl flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-4 lg:gap-6 xl:flex-1 xl:min-h-0">
<Card class="glass-card relative flex min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 sm:min-h-[260px] xl:flex-[3]">
<Card variant="glass" class="relative flex min-h-[220px] overflow-hidden sm:min-h-[260px] xl:flex-[3]">
<div id="cameraPreview" class="flex-1 bg-black relative flex items-center justify-center {$appState.isMotionActive ? 'bg-red-900/20' : ''}">
<video
id="cameraVideo"
@@ -52,10 +63,10 @@
></video>
<Badge
variant="destructive"
class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 text-white backdrop-blur"
class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 backdrop-blur"
>
<span class="w-2.5 h-2.5 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
<span class="text-xs font-medium tracking-wide">REC</span>
<span class="w-2 h-2 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
<span class="text-[10px] font-bold tracking-widest">REC</span>
</Badge>
</div>
@@ -63,27 +74,20 @@
id="cameraOfflineOverlay"
class="absolute inset-0 bg-[#0a0a0c]/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center gap-4 {$appState.socketConnected ? 'hidden' : ''}"
>
<Alert class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
/>
</svg>
<AlertTitle class="justify-self-center text-base text-white">Camera Offline</AlertTitle>
<AlertDescription class="justify-self-center text-sm text-gray-400">
<Alert variant="default" class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
<VideoOff class="mx-auto h-12 w-12 text-gray-600 mb-2" />
<AlertTitle class="text-base text-white">Camera Offline</AlertTitle>
<AlertDescription class="text-sm text-gray-400">
Reconnect this device to resume live monitoring.
</AlertDescription>
<div class="mt-2 flex justify-center">
<div class="mt-4 flex justify-center">
<Button
id="cameraGoOnlineBtn"
variant="outline"
class="rounded-xl border-green-500/50 text-green-400 hover:border-green-400 hover:bg-green-500/10"
onclick={() => appController.goOnline()}
>
Go Online
id="cameraGoOnlineBtn"
variant="outline"
class="rounded-xl border-emerald-500/50 text-emerald-400 hover:border-emerald-400 hover:bg-emerald-500/10"
onclick={() => appController.goOnline()}
>
Go Online
</Button>
</div>
</Alert>
@@ -91,9 +95,10 @@
</Card>
<div class="grid grid-cols-1 gap-4 lg:gap-6 xl:min-h-0 xl:flex-[2] xl:grid-cols-[2fr_1fr]">
<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
<CardHeader class="pb-2">
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Logs</CardTitle>
<Card variant="glass" class="min-h-[220px] overflow-hidden xl:min-h-0">
<CardHeader class="pb-2 flex flex-row items-center gap-2">
<Terminal class="size-3.5 text-gray-500" />
<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Activity Logs</CardTitle>
</CardHeader>
<CardContent class="flex-1 xl:min-h-0">
<ScrollArea
@@ -104,39 +109,46 @@
<div class="text-gray-600 italic">Awaiting connection...</div>
{:else}
{#each $appState.activityLog as log (log.id)}
<div>[{new Date(log.createdAt).toLocaleTimeString()}] {log.type}: {log.message}</div>
<div class="mb-1 leading-relaxed">
<span class="text-gray-600">[{new Date(log.createdAt).toLocaleTimeString()}]</span>
<span class="text-blue-400/80">{log.type}:</span>
<span>{log.message}</span>
</div>
{/each}
{/if}
</ScrollArea>
</CardContent>
</Card>
<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
<CardHeader class="pb-2">
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Actions / Options</CardTitle>
<Card variant="glass" class="min-h-[220px] overflow-hidden xl:min-h-0">
<CardHeader class="pb-2 flex flex-row items-center gap-2">
<Settings2 class="size-3.5 text-gray-500" />
<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Control Plane</CardTitle>
</CardHeader>
<CardContent class="space-y-4 xl:min-h-0 xl:overflow-y-auto">
<div class="space-y-2">
<div class="flex items-center justify-between gap-2">
<Label for="cameraInputSelect" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
Camera Input
<div class="flex items-center justify-between gap-2">
<Label for="cameraInputSelect" class="text-[10px] font-bold uppercase tracking-widest text-gray-400 flex items-center gap-1.5">
<Camera class="size-3" />
Camera Input
</Label>
<Button
id="refreshCameraInputsBtn"
variant="ghost"
size="xs"
class="rounded-lg text-gray-400 hover:text-white"
onclick={() => appController.refreshCameraInputs()}
>
Refresh
id="refreshCameraInputsBtn"
variant="ghost"
size="xs"
class="h-6 rounded-lg text-gray-500 hover:text-white"
onclick={() => appController.refreshCameraInputs()}
>
<RefreshCw class="size-3 mr-1" />
Refresh
</Button>
</div>
</div>
<Select
type="single"
value={$appState.selectedCameraInputId}
items={cameraInputItems()}
onValueChange={(value) => appController.selectCameraInput(value)}
>
type="single"
value={$appState.selectedCameraInputId}
items={cameraInputItems()}
onValueChange={(value) => appController.selectCameraInput(value)}
>
<SelectTrigger
id="cameraInputSelect"
class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
@@ -150,20 +162,21 @@
</SelectContent>
</Select>
</div>
<div class="space-y-3 rounded-2xl border border-white/10 bg-black/30 p-3 sm:p-4 sm:space-y-4">
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Automatic Detection</p>
<p class="text-sm text-gray-200">
{$appState.motionDetection.enabled ? 'Armed for automatic motion events.' : 'Paused until manually armed.'}
<p class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Automatic Detection</p>
<p class="text-sm text-gray-200 font-medium">
{$appState.motionDetection.enabled ? 'Armed' : 'Disarmed'}
</p>
<p class="text-xs text-gray-500">
Designed for a plugged-in browser kept in the foreground.
<p class="text-[10px] text-gray-500 leading-tight">
Foreground browser monitoring.
</p>
</div>
<Button
variant={$appState.motionDetection.enabled ? 'secondary' : 'outline'}
class="min-w-[112px] self-start rounded-xl sm:self-auto"
class="min-w-[80px] h-9 self-start rounded-xl sm:self-auto text-xs"
onclick={() => appController.setMotionDetectionEnabled(!$appState.motionDetection.enabled)}
>
{$appState.motionDetection.enabled ? 'Pause' : 'Arm'}
@@ -172,10 +185,10 @@
<div class="space-y-2">
<div class="flex items-center justify-between gap-2">
<Label for="motionDetectionProfile" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
Detection Profile
<Label for="motionDetectionProfile" class="text-[10px] font-bold uppercase tracking-widest text-gray-400">
Profile
</Label>
<span class="text-[11px] uppercase tracking-wider text-gray-500">{$appState.motionDetection.state}</span>
<span class="text-[10px] font-bold uppercase tracking-widest text-blue-500/80">{$appState.motionDetection.state}</span>
</div>
<Select
type="single"
@@ -197,62 +210,49 @@
</Select>
</div>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<div class="grid grid-cols-2 gap-2">
<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<p class="text-[10px] uppercase tracking-wider text-gray-500">Detector State</p>
<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.state}</p>
<p class="text-[9px] font-bold uppercase tracking-widest text-gray-500">Detector</p>
<p class="mt-0.5 text-xs font-bold text-gray-200">{$appState.motionDetection.state}</p>
</div>
<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<p class="text-[10px] uppercase tracking-wider text-gray-500">Motion Score</p>
<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
<p class="text-[9px] font-bold uppercase tracking-widest text-gray-500">Score</p>
<p class="mt-0.5 text-xs font-bold text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
</div>
</div>
<div class="flex items-center justify-between gap-3 rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<div>
<p class="text-xs font-medium text-gray-200">Show detector debug info</p>
<p class="text-[11px] text-gray-500">Useful while tuning thresholds and sample profiles.</p>
<div class="space-y-0.5">
<p class="text-xs font-bold text-gray-200">Debug Overlay</p>
<p class="text-[10px] text-gray-500">Sample profiles & metrics.</p>
</div>
<button
type="button"
role="switch"
aria-checked={$appState.motionDetection.debug}
aria-label="Toggle motion detector debug info"
title="Toggle motion detector debug info"
class="inline-flex h-7 w-12 items-center rounded-full border border-white/10 p-1 transition-colors {$appState.motionDetection.debug ? 'bg-blue-500/80' : 'bg-white/10'}"
onclick={() => appController.setMotionDetectionDebug(!$appState.motionDetection.debug)}
>
<span
class="h-5 w-5 rounded-full bg-white transition-transform {$appState.motionDetection.debug ? 'translate-x-5' : 'translate-x-0'}"
></span>
</button>
<Switch
checked={$appState.motionDetection.debug}
onCheckedChange={(v) => appController.setMotionDetectionDebug(v)}
/>
</div>
</div>
<div class="space-y-3">
<div class="space-y-2">
{#if !$appState.isMotionActive}
<Button
id="startMotionBtn"
variant="outline"
class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:border-red-500/30 hover:bg-red-500/10 hover:text-red-400"
onclick={() => appController.startMotion()}
>
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Simulate Motion Event
id="startMotionBtn"
variant="outline"
class="h-12 w-full justify-start rounded-xl border-white/5 bg-white/5 font-bold text-sm hover:border-blue-500/30 hover:bg-blue-500/10 hover:text-blue-400 group"
onclick={() => appController.startMotion()}
>
<Zap class="mr-3 h-4 w-4 text-gray-400 group-hover:text-blue-400" />
Simulate Motion
</Button>
{:else}
<Button
id="endMotionBtn"
variant="outline"
class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:bg-white/10 disabled:opacity-30"
onclick={() => appController.endMotion()}
>
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
</svg>
Stop Recording
id="endMotionBtn"
variant="outline"
class="h-12 w-full justify-start rounded-xl border-white/5 bg-white/5 font-bold text-sm hover:bg-white/10"
onclick={() => appController.endMotion()}
>
<Square class="mr-3 h-4 w-4 text-red-500 animate-pulse" />
Stop Recording
</Button>
{/if}
</div>

177
WebApp/src/routes/client/+page.svelte
View File

@@ -9,6 +9,20 @@
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '$lib/components/ui/dropdown-menu/index.js';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import {
Plus,
RefreshCw,
Monitor,
Eye,
Video,
VideoOff,
MoreVertical,
X,
History,
Activity,
ShieldCheck,
Clock
} from '@lucide/svelte';
let clientVideoElement: HTMLVideoElement | null = null;
@@ -56,62 +70,55 @@
</script>
<AppChrome pageKey="client">
<section id="screen-home-client" class="mx-auto flex h-full max-w-7xl min-h-0 flex-col gap-8">
<div class="flex justify-between items-center mb-4">
<section id="screen-home-client" class="mx-auto flex h-full max-w-7xl min-h-0 flex-col gap-6">
<div class="flex justify-between items-center px-1">
<h2 class="text-2xl font-bold text-white tracking-tight">Client Dashboard</h2>
<div class="flex gap-3">
<div class="flex gap-2">
<Button
id="linkCameraBtn"
variant="outline"
size="sm"
class="rounded-xl border-white/10 text-gray-300 shadow-none hover:bg-white/5 hover:text-white"
onclick={() => appController.linkCamera()}
>
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
<Plus class="h-4 w-4 mr-1.5" />
Link Camera
</Button>
<Button
id="refreshClientBtn"
variant="ghost"
size="icon"
size="icon-sm"
class="rounded-xl border border-white/5 bg-white/5 hover:bg-white/10"
aria-label="Refresh linked cameras"
title="Refresh linked cameras"
onclick={() => appController.refreshClientData()}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
<RefreshCw class="h-4 w-4" />
</Button>
</div>
</div>
<Card class="glass-card mb-4 shrink-0 rounded-3xl border-white/10 bg-[#16161d]/80">
<CardHeader>
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Your Cameras</CardTitle>
<Card variant="glass" class="mb-2 shrink-0 rounded-3xl">
<CardHeader class="pb-3 flex flex-row items-center gap-2">
<Monitor class="size-3.5 text-gray-500" />
<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Your Cameras</CardTitle>
</CardHeader>
<CardContent>
{#if $appState.linkedCameras.length === 0}
<Alert class="border-dashed border-white/10 bg-black/20 text-center">
<AlertTitle class="justify-self-center text-sm text-gray-200">No cameras linked</AlertTitle>
<AlertDescription class="justify-self-center text-sm text-gray-500">
<Alert variant="default" class="border-dashed border-white/10 bg-black/20 text-center py-8">
<AlertTitle class="text-sm text-gray-200">No cameras linked</AlertTitle>
<AlertDescription class="text-xs text-gray-500">
Link a camera to start viewing live feeds and recordings.
</AlertDescription>
</Alert>
{:else}
<ScrollArea class="w-full whitespace-nowrap" orientation="horizontal">
<div id="linkedCamerasList" class="flex gap-4 pb-2">
<div id="linkedCamerasList" class="flex gap-4 pb-3">
{#each $appState.linkedCameras as link (link.id)}
<div
role="button"
tabindex="0"
class="min-w-[240px] max-w-[240px] flex-shrink-0 cursor-pointer text-left"
class="min-w-[240px] max-w-[240px] flex-shrink-0 cursor-pointer text-left group"
onclick={(event) => {
if ((event.target as HTMLElement).closest('[data-menu-trigger]')) return;
appController.selectCamera(link.cameraDeviceId);
@@ -122,25 +129,20 @@
>
<Card
size="sm"
class="overflow-hidden rounded-xl border transition-colors { $appState.activeCameraDeviceId === link.cameraDeviceId ? 'border-blue-500/50 bg-blue-950/20' : 'border-white/5 bg-gray-900/60 hover:border-blue-500/30' }"
class="overflow-hidden rounded-xl border transition-all duration-300 { $appState.activeCameraDeviceId === link.cameraDeviceId ? 'border-blue-500/50 bg-blue-950/20' : 'border-white/5 bg-gray-900/60 hover:border-blue-500/30' }"
>
<div class="relative aspect-video overflow-hidden border-b border-white/5 bg-black/40">
{#if $appState.activeCameraDeviceId === link.cameraDeviceId}
<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-blue-500/10 text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
<Eye class="h-6 w-6" />
<Badge variant="secondary" class="rounded-full px-2 text-[10px] uppercase tracking-wider">
Viewing
</Badge>
</div>
{:else}
<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500 transition-colors hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<p class="text-[10px]">{isCameraLive(link.cameraDeviceId) ? 'Live Stream Active' : 'Click to view'}</p>
<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-600 transition-colors group-hover:text-gray-400">
<Video class="h-6 w-6" />
<p class="text-[10px] font-medium tracking-wide">{isCameraLive(link.cameraDeviceId) ? 'LIVE' : 'CLICK TO VIEW'}</p>
</div>
{/if}
</div>
@@ -152,9 +154,9 @@
</p>
<Badge
variant={link.cameraStatus?.toLowerCase() === 'online' ? 'secondary' : 'outline'}
class="gap-1.5 rounded-full px-2 capitalize"
class="gap-1.5 rounded-full px-2 capitalize text-[10px]"
>
<span class="h-2 w-2 rounded-full shrink-0 {statusDotClass(link.cameraStatus)}"></span>
<span class="h-1.5 w-1.5 rounded-full shrink-0 {statusDotClass(link.cameraStatus)} shadow-[0_0_4px_rgba(16,185,129,0.4)]"></span>
{link.cameraStatus || 'offline'}
</Badge>
</div>
@@ -168,11 +170,7 @@
class="text-gray-400 hover:text-white"
{...props}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<circle cx="10" cy="4" r="1.6" />
<circle cx="10" cy="10" r="1.6" />
<circle cx="10" cy="16" r="1.6" />
</svg>
<MoreVertical class="h-3.5 w-3.5" />
</Button>
{/snippet}
</DropdownMenuTrigger>
@@ -207,31 +205,32 @@
</CardContent>
</Card>
<div class="flex flex-1 min-h-0 flex-col gap-8 xl:flex-row">
<div class="flex flex-1 min-h-0 flex-col gap-6 xl:flex-row">
<Card
id="clientStreamViewerWrapper"
class="glass-card min-w-0 flex-1 overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 shadow-xl {$appState.activeCameraDeviceId ? 'flex min-h-[400px] flex-col xl:min-h-0' : 'hidden'}"
variant="glass"
class="min-w-0 flex-1 overflow-hidden shadow-xl {$appState.activeCameraDeviceId ? 'flex min-h-[400px] flex-col xl:min-h-0' : 'hidden'}"
>
<CardHeader class="border-b border-white/5 bg-black/20 px-5 py-4">
<CardHeader class="border-b border-white/5 bg-black/20 px-5 py-3">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="w-2 h-2 rounded-full bg-red-500 animate-[pulse_2s_ease-in-out_infinite] {isCameraLive($appState.activeCameraDeviceId) ? '' : 'hidden'}" id="clientLiveDot"></span>
<CardTitle class="font-medium tracking-wide text-white" id="clientStreamViewerTitle">
Live Feed: {activeCameraLabel()}
{#if isCameraLive($appState.activeCameraDeviceId)}
<span class="w-2 h-2 rounded-full bg-red-500 animate-[pulse_2s_ease-in-out_infinite]" id="clientLiveDot"></span>
{/if}
<CardTitle class="text-sm font-semibold tracking-wide text-white" id="clientStreamViewerTitle">
{activeCameraLabel()}
</CardTitle>
</div>
<Button
id="closeStreamViewerBtn"
variant="ghost"
size="icon-sm"
size="icon-xs"
class="text-gray-400 hover:text-white"
aria-label="Close stream viewer"
title="Close stream viewer"
onclick={() => appController.closeStreamViewer()}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<X class="h-4 w-4" />
</Button>
</div>
</CardHeader>
@@ -246,44 +245,40 @@
bind:this={clientVideoElement}
></video>
<Alert
<div
id="clientStreamPlaceholder"
class="relative z-10 m-6 flex max-w-md flex-col items-center gap-4 border-white/10 bg-black/40 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
class="relative z-10 m-6 flex max-w-sm flex-col items-center gap-4 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
></path>
</svg>
<AlertTitle class="justify-self-center text-sm text-gray-200">Stream unavailable</AlertTitle>
<AlertDescription class="justify-self-center text-sm font-medium uppercase tracking-wide text-gray-500">
<div class="p-5 rounded-full bg-white/5 mb-2">
<VideoOff class="h-10 w-10 text-gray-600" />
</div>
<p class="text-base font-semibold text-white">Stream unavailable</p>
<p class="text-xs font-bold uppercase tracking-widest text-gray-500">
{$appState.clientPlaceholderText}
</AlertDescription>
</Alert>
</p>
</div>
</CardContent>
{#if activeStreamDiagnostics()}
<div class="border-t border-white/5 bg-black/20 px-5 py-4">
<div class="flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-[0.2em] text-gray-500">
<span>Live Diagnostics</span>
<Badge variant="outline" class="border-white/10 text-[10px] text-gray-400">
<div class="flex flex-wrap items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
<Activity class="size-3 text-blue-500" />
<span>Diagnostics</span>
<Badge variant="outline" class="border-white/5 text-[9px] text-gray-500 px-1.5 font-mono">
{activeStreamSessionId()?.slice(0, 8)}
</Badge>
{#if isCameraLive($appState.activeCameraDeviceId)}
<Badge variant="secondary" class="rounded-full px-2 text-[10px] uppercase tracking-wide">Peer connected</Badge>
<Badge variant="secondary" class="rounded-full px-2 text-[9px] font-bold uppercase tracking-widest">Peer connected</Badge>
{/if}
</div>
<div class="mt-3 grid gap-2">
{#each activeStreamDiagnostics().entries.slice(0, 6) as entry (entry.id)}
<div class="rounded-xl border px-3 py-2 {diagnosticLevelClass(entry.level)}">
<div class="mt-4 grid gap-2">
{#each activeStreamDiagnostics().entries.slice(0, 4) as entry (entry.id)}
<div class="rounded-xl border px-3 py-2 {diagnosticLevelClass(entry.level)} transition-colors">
<div class="flex items-center justify-between gap-3">
<span class="text-[11px] font-semibold uppercase tracking-[0.18em]">{entry.stage}</span>
<span class="text-[10px] text-gray-500">{new Date(entry.createdAt).toLocaleTimeString()}</span>
<span class="text-[10px] font-bold uppercase tracking-wider">{entry.stage}</span>
<span class="text-[9px] font-medium opacity-50">{new Date(entry.createdAt).toLocaleTimeString()}</span>
</div>
<p class="mt-1 text-sm text-current">{entry.message}</p>
<p class="mt-1 text-xs text-current opacity-90">{entry.message}</p>
</div>
{/each}
</div>
@@ -292,34 +287,38 @@
</Card>
<div class="flex shrink-0 flex-col gap-6 pr-2 xl:max-h-full xl:w-96 xl:overflow-y-auto">
<Card class="glass-card flex-1 rounded-3xl border-white/10 bg-[#16161d]/80">
<CardHeader>
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Recent Recordings</CardTitle>
<Card variant="glass" class="flex-1 rounded-3xl">
<CardHeader class="pb-3 flex flex-row items-center gap-2">
<History class="size-3.5 text-gray-500" />
<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Recent Clips</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea class="max-h-[26rem] pr-3">
<ScrollArea class="max-h-[30rem] pr-3">
<div id="recordingsList" class="space-y-3">
{#if $appState.recordings.length === 0}
<Alert class="border-white/10 bg-gray-900/30 text-center">
<AlertTitle class="justify-self-center text-xs text-gray-200">No recordings found</AlertTitle>
<AlertDescription class="justify-self-center text-xs text-gray-500">
Captured clips will appear here when they are ready.
<Alert variant="default" class="border-dashed border-white/10 bg-gray-900/30 text-center py-6">
<AlertTitle class="text-xs text-gray-200">No recordings found</AlertTitle>
<AlertDescription class="text-[10px] text-gray-500">
Captured clips will appear here.
</AlertDescription>
</Alert>
{:else}
{#each $appState.recordings.slice(0, 5) as recording (recording.id)}
<Card size="sm" class="border-white/5 bg-gray-900/40">
{#each $appState.recordings.slice(0, 8) as recording (recording.id)}
<Card size="sm" class="border-white/5 bg-white/5 hover:bg-white/10 transition-colors">
<CardContent class="flex items-center justify-between gap-4 px-3 py-3">
<div class="flex flex-col">
<span class="text-xs font-medium text-gray-300">{new Date(recording.createdAt).toLocaleString()}</span>
<span class="text-[10px] text-gray-500">
{recording.durationSeconds != null ? `${recording.durationSeconds}s duration` : 'Duration pending'} · {recording.status ?? 'unknown'}
<div class="flex flex-col gap-1">
<div class="flex items-center gap-1.5">
<Clock class="size-3 text-gray-500" />
<span class="text-xs font-semibold text-gray-300">{new Date(recording.createdAt).toLocaleTimeString()}</span>
</div>
<span class="text-[9px] font-bold uppercase tracking-widest text-gray-500">
{recording.status ?? 'unknown'} · {recording.durationSeconds != null ? `${recording.durationSeconds}s` : '--'}
</span>
</div>
<Button
variant="outline"
size="xs"
class="border-white/10 text-gray-400"
class="h-7 rounded-lg border-white/10 text-xs font-bold text-gray-400 hover:text-white"
disabled={recording.status !== 'ready'}
onclick={() => appController.openRecording(recording.id)}
>

16
WebApp/src/routes/onboarding/+page.svelte
View File

@@ -8,13 +8,14 @@
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 class="glass-card w-full rounded-3xl border-white/10 bg-[#16161d]/80 shadow-2xl">
<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>
@@ -75,15 +76,7 @@
aria-expanded={showAdvancedSettings}
onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<Settings class="h-5 w-5" />
</Button>
</div>
@@ -107,7 +100,8 @@
<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
<Button
id="registerBtn"
class="btn-premium h-12 w-full rounded-xl text-base text-white"
variant="premium"
class="h-12 w-full rounded-xl text-base"
onclick={() => appController.registerDevice()}
>
Complete Setup

88
WebApp/src/routes/settings/+page.svelte
View File

@@ -8,6 +8,15 @@
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';
import {
BarChart3,
ChevronRight,
Settings,
LogOut,
Database,
ShieldCheck,
Activity
} from '@lucide/svelte';
const profileName = () => $appState.session?.user?.name || 'User';
const profileEmail = () => $appState.session?.user?.email || 'user@example.com';
@@ -58,8 +67,8 @@
<section id="screen-settings" class="flex flex-col gap-6 max-w-2xl mx-auto py-8">
<h2 class="text-2xl font-bold text-white tracking-tight px-2">Settings</h2>
<Card class="glass-card rounded-3xl border-white/10 bg-[#16161d]/80">
<CardContent class="flex items-center gap-6">
<Card variant="glass" class="rounded-3xl">
<CardContent class="flex items-center gap-6 py-6">
<Avatar id="profileInitials" size="lg" class="size-20 bg-blue-600/20 text-2xl font-bold text-blue-500">
<AvatarFallback>{profileInitial()}</AvatarFallback>
</Avatar>
@@ -70,9 +79,9 @@
</CardContent>
</Card>
<Card class="glass-card overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
<Card variant="glass" class="overflow-hidden rounded-3xl">
<CardHeader>
<CardTitle class="text-sm font-semibold tracking-wide text-white">Tools</CardTitle>
<CardTitle class="text-sm font-semibold tracking-wide text-white">Tools & Diagnostics</CardTitle>
</CardHeader>
<CardContent class="flex flex-col gap-0 p-0">
<Button
@@ -83,39 +92,34 @@
>
<div class="flex items-center gap-4">
<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
</svg>
<BarChart3 class="h-5 w-5" />
</div>
<span class="font-medium">Run Diagnostics</span>
<span class="font-medium">Run System Diagnostics</span>
</div>
<svg data-icon="inline-end" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<ChevronRight class="h-4 w-4 text-gray-600 group-hover:text-gray-400 transition-colors" />
</Button>
<Separator class="bg-white/5" />
<div class="px-5 py-5">
<div class="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.03] p-4">
<div class="flex items-start justify-between gap-4">
<div class="space-y-1">
<h4 class="text-sm font-semibold tracking-wide text-white">MinIO Storage Check</h4>
<p class="text-sm text-gray-400">
Test whether the backend can still reach the object storage server.
<div class="flex items-center gap-2">
<Database class="size-4 text-blue-500" />
<h4 class="text-sm font-semibold tracking-wide text-white">MinIO Storage Check</h4>
</div>
<p class="text-xs text-gray-400">
Test backend connectivity to object storage.
</p>
</div>
<Button
id="checkMinioBtn"
size="sm"
class="shrink-0 rounded-xl"
variant="outline"
class="shrink-0 rounded-xl border-white/10"
disabled={isCheckingMinio}
onclick={checkMinioServer}
>
{isCheckingMinio ? 'Checking…' : 'Check MinIO Server'}
{isCheckingMinio ? 'Checking…' : 'Check Now'}
</Button>
</div>
@@ -127,12 +131,19 @@
: 'border-red-500/30 bg-red-500/10 text-red-300'
}`}
>
<p class="font-medium">
{minioStatus === 'ok' ? 'MinIO is up' : 'MinIO check failed'}
</p>
<p class="mt-1 opacity-90">{minioStatusMessage}</p>
<div class="flex items-center gap-2">
{#if minioStatus === 'ok'}
<ShieldCheck class="size-4" />
{:else}
<Activity class="size-4" />
{/if}
<p class="font-medium">
{minioStatus === 'ok' ? 'MinIO is up' : 'MinIO check failed'}
</p>
</div>
<p class="mt-1 opacity-90 text-xs">{minioStatusMessage}</p>
{#if minioCheckedAt}
<p class="mt-2 text-xs opacity-75">Last checked: {formatCheckedAt(minioCheckedAt)}</p>
<p class="mt-2 text-[10px] opacity-75 italic">Last checked: {formatCheckedAt(minioCheckedAt)}</p>
{/if}
</div>
{/if}
@@ -142,21 +153,11 @@
<Button variant="ghost" class="group h-auto w-full justify-between rounded-none px-5 py-5 text-left text-gray-300 hover:bg-white/5">
<div class="flex items-center gap-4">
<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<Settings class="h-5 w-5" />
</div>
<span class="font-medium">Device Information</span>
</div>
<svg data-icon="inline-end" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<ChevronRight class="h-4 w-4 text-gray-600 group-hover:text-gray-400 transition-colors" />
</Button>
</CardContent>
</Card>
@@ -164,17 +165,10 @@
<Button
id="signOutBtn"
variant="destructive"
class="mt-4 h-14 w-full rounded-2xl border border-red-500/50 text-base font-medium hover:border-red-500 hover:bg-red-500/10"
class="mt-4 h-14 w-full rounded-2xl border border-red-500/50 text-base font-bold hover:border-red-500 hover:bg-red-500/10"
onclick={() => appController.signOut()}
>
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
<LogOut class="mr-3 h-5 w-5" />
Sign Out
</Button>
</section>