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

feat(ui): migrate routes and app shell to controller-driven state

Browse Source
This commit is contained in:
Matiss Jurevics
2026-03-02 14:15:00 +00:00
parent 13e77294be
commit 531e77d900
8 changed files with 660 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,42 @@
<script lang="ts">
// @ts-nocheck
import { appController } from '$lib/app/controller';
import { appState, unreadNotificationsCount } from '$lib/app/store';
let { children, pageKey } = $props<{ children: () => unknown; pageKey: string }>();
$effect(() => {
appController.setPage(pageKey);
});
const isHomePage = (page: string) => page === 'camera' || page === 'client';
const isAuthenticated = () => Boolean($appState.session && $appState.device);
const userName = () => $appState.session?.user?.name || 'Signed Out';
const userEmail = () => $appState.session?.user?.email || 'Signed Out';
const userInitial = () => ($appState.session?.user?.name?.[0] || '?').toUpperCase();
</script>
<div data-sim-page={pageKey} class="flex h-full w-full">
<div id="toast-container" class="toast toast-top toast-end z-50"></div>
<div id="toast-container" class="toast toast-top toast-end z-50">
{#each $appState.toasts as toast (toast.id)}
<div class={`alert ${toast.type === 'error' ? 'alert-error' : toast.type === 'success' ? 'alert-success' : 'alert-info'} text-white shadow-lg text-xs py-2 px-3 flex flex-row gap-2`}>
<span>{toast.message}</span>
<button class="btn btn-xs btn-ghost" onclick={() => appController.removeToast(toast.id)}>x</button>
</div>
{/each}
</div>
<aside
id="bottomNav"
class="w-20 lg:w-64 glass-panel border-r border-white/5 flex-col justify-between hidden h-full"
class="w-20 lg:w-64 glass-panel border-r border-white/5 flex-col justify-between h-full {isAuthenticated() ? 'flex' : 'hidden'}"
>
<div class="p-6 flex items-center justify-center lg:justify-start gap-3 border-b border-white/5"></div>
<nav class="flex-1 py-6 px-3 space-y-2">
<button
class="nav-btn w-full flex items-center gap-3 p-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all data-[active=true]:text-white data-[active=true]:bg-blue-600/10 data-[active=true]:border data-[active=true]:border-blue-500/20 group"
data-target="home"
data-active={isHomePage($appState.page)}
onclick={() => appController.navigate('home')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +57,8 @@
<button
class="nav-btn w-full flex items-center gap-3 p-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all relative data-[active=true]:text-white data-[active=true]:bg-blue-600/10 data-[active=true]:border data-[active=true]:border-blue-500/20 group"
data-target="activity"
data-active={$appState.page === 'activity'}
onclick={() => appController.navigate('activity')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -54,13 +77,14 @@
<span class="font-medium hidden lg:block text-sm">Activity Feed</span>
<span
id="notificationDot"
class="absolute lg:relative lg:top-auto lg:right-auto top-3 right-3 lg:ml-auto w-2 h-2 bg-red-500 rounded-full hidden"
class="absolute lg:relative lg:top-auto lg:right-auto top-3 right-3 lg:ml-auto w-2 h-2 bg-red-500 rounded-full {$unreadNotificationsCount > 0 ? '' : 'hidden'}"
></span>
</button>
<button
class="nav-btn w-full flex items-center gap-3 p-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all data-[active=true]:text-white data-[active=true]:bg-blue-600/10 data-[active=true]:border data-[active=true]:border-blue-500/20 group"
data-target="settings"
data-active={$appState.page === 'settings'}
onclick={() => appController.navigate('settings')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -93,8 +117,10 @@
>
<div class="flex items-center gap-6">
<div id="connectionStatus" class="flex items-center gap-2">
<span class="status-dot status-offline transition-colors duration-300"></span>
<span class="text-xs text-gray-400 font-medium tracking-wide uppercase">OFFLINE</span>
<span class="status-dot {$appState.socketConnected ? 'status-online' : 'status-offline'} transition-colors duration-300"></span>
<span class="text-xs text-gray-400 font-medium tracking-wide uppercase">
{$appState.socketConnected ? 'ONLINE' : 'OFFLINE'}
</span>
</div>
<div class="h-6 w-px bg-white/10"></div>
@@ -103,9 +129,9 @@
<div
class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-xs font-bold border border-white/10"
>
?
{userInitial()}
</div>
<span class="hidden sm:inline">Signed Out</span>
<span class="hidden sm:inline" title={userEmail()}>{userName()}</span>
</div>
</div>
</header>
@@ -118,20 +144,30 @@
<div
id="recordingModal"
class="fixed inset-0 bg-[#0a0a0c]/90 backdrop-blur z-[100] hidden items-center justify-center p-4 lg:p-10"
class="fixed inset-0 bg-[#0a0a0c]/90 backdrop-blur z-[100] {$appState.recordingModal.open ? 'flex' : 'hidden'} items-center justify-center p-4 lg:p-10"
role="dialog"
aria-modal="true"
tabindex="-1"
onclick={(event) => {
if (event.target === event.currentTarget) appController.closeRecordingModal();
}}
onkeydown={(event) => {
if (event.key === 'Escape') appController.closeRecordingModal();
}}
>
<div
class="w-full max-w-4xl glass-card rounded-3xl p-6 space-y-4 shadow-2xl border border-white/10 flex flex-col max-h-[90vh]"
>
<div class="flex items-center justify-between shrink-0">
<h3 id="recordingModalTitle" class="text-lg font-semibold text-white tracking-wide">
Recording Playback
{$appState.recordingModal.title}
</h3>
<button
id="recordingModalCloseBtn"
class="btn btn-square btn-ghost text-gray-400 hover:text-white rounded-xl hover:bg-white/10"
aria-label="Close recording modal"
title="Close recording modal"
onclick={() => appController.closeRecordingModal()}
>
<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="M6 18L18 6M6 6l12 12" />
@@ -139,7 +175,9 @@
</button>
</div>
<div class="flex-1 min-h-0 bg-black rounded-2xl overflow-hidden relative border border-white/5 shadow-inner">
<video id="recordingModalVideo" class="w-full h-full object-contain" controls playsinline></video>
<video id="recordingModalVideo" class="w-full h-full object-contain" src={$appState.recordingModal.url} controls playsinline>
<track kind="captions" />
</video>
</div>
</div>
</div>