184 lines
7.5 KiB
Svelte
184 lines
7.5 KiB
Svelte
<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">
|
|
{#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 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-active={isHomePage($appState.page)}
|
|
onclick={() => appController.navigate('home')}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
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>
|
|
<span class="font-medium hidden lg:block text-sm">Dashboard</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 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-active={$appState.page === 'activity'}
|
|
onclick={() => appController.navigate('activity')}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
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>
|
|
<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 {$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-active={$appState.page === 'settings'}
|
|
onclick={() => appController.navigate('settings')}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
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>
|
|
<span class="font-medium hidden lg:block text-sm">Settings</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden relative">
|
|
<header
|
|
class="h-16 shrink-0 border-b border-white/5 flex items-center justify-end px-6 relative z-10 glass-panel"
|
|
>
|
|
<div class="flex items-center gap-6">
|
|
<div id="connectionStatus" class="flex items-center gap-2">
|
|
<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>
|
|
|
|
<div id="authStatusBadge" class="flex items-center gap-2 text-sm text-gray-400">
|
|
<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" title={userEmail()}>{userName()}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 md:p-8 lg:p-10 relative">
|
|
{@render children()}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div
|
|
id="recordingModal"
|
|
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">
|
|
{$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" />
|
|
</svg>
|
|
</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" src={$appState.recordingModal.url} controls playsinline>
|
|
<track kind="captions" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|