51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { startConversationKeySync } from '../lib/conversationKeySync';
|
|
import { ensureNotificationPermission } from '../lib/osNotify';
|
|
import { CallUI } from './CallUI';
|
|
import { Sidebar } from './Sidebar';
|
|
|
|
export function AppShell() {
|
|
const { session, device } = useAuth();
|
|
useEffect(() => {
|
|
// Prompt once per authenticated shell mount. Module-level guard prevents
|
|
// re-asking if the user already responded this session.
|
|
void ensureNotificationPermission();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!session?.user.id || !device?.id) return;
|
|
return startConversationKeySync(session.user.id, device.id);
|
|
}, [session?.user.id, device?.id]);
|
|
|
|
return (
|
|
<div className="relative flex min-h-screen overflow-hidden bg-ink-950 text-neutral-100">
|
|
<ShellBackground />
|
|
<div className="relative z-10 flex min-h-screen w-full">
|
|
<Sidebar />
|
|
<main className="relative flex-1 overflow-hidden">
|
|
<div className="h-screen overflow-y-auto">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<CallUI />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Calmer than the auth-screen background — full-bleed grid + 2 large blobs.
|
|
// No animation here so message lists stay readable.
|
|
function ShellBackground() {
|
|
return (
|
|
<div aria-hidden="true" className="pointer-events-none absolute inset-0">
|
|
<div className="bg-grid absolute inset-0 opacity-[0.18]" />
|
|
<div className="absolute -left-32 top-1/4 h-[420px] w-[420px] rounded-full bg-brand-500/20 blur-3xl" />
|
|
<div className="absolute -right-32 bottom-0 h-[420px] w-[420px] rounded-full bg-fuchsia-500/10 blur-3xl" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_45%,rgba(5,5,7,0.6)_100%)]" />
|
|
</div>
|
|
);
|
|
}
|