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

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>