tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Move sidebar into layout files and fix timer cleanup across frontend

Browse Source 
Sidebar and AdminSidebar were re-instantiated on every page navigation
(17 pages total), causing unnecessary DOM teardown/rebuild and redundant
localStorage reads. Now each lives in its respective +layout.svelte as a
single persistent instance.

Also adds onDestroy cleanup for leaked timers (settings, team, login RAF
loop) and CSS containment on <main> to isolate layout recalculations.
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-16 05:34:47 +06:00
parent e91109d69c
commit ed2222c80c
21 changed files with 159 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/routes/admin/capsules/+page.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import AdminSidebar from '$lib/components/AdminSidebar.svelte';
import CreateCapsuleDialog from '$lib/components/CreateCapsuleDialog.svelte';
import DestroyDialog from '$lib/components/DestroyDialog.svelte';
import CopyButton from '$lib/components/CopyButton.svelte';
@ -15,12 +14,6 @@
const REFRESH_INTERVAL = 15;
const SPIN_DURATION = 600;
let collapsed = $state(
typeof window !== 'undefined'
? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
: false
);
let capsules = $state<Capsule[]>([]);
let loading = $state(true);
let error = $state<string | null>(null);
@ -243,11 +236,8 @@
}
</style>
<div class="flex h-screen overflow-hidden bg-[var(--color-bg-0)]">
<AdminSidebar bind:collapsed />
<main class="flex min-w-0 flex-1 flex-col overflow-hidden">
<!-- Header -->
<main class="flex min-w-0 flex-1 flex-col overflow-hidden">
<!-- Header -->
<div class="shrink-0 px-8 pt-8 pb-6">
<div class="flex items-center justify-between">
<div>
@ -521,8 +511,7 @@
<span class="font-mono text-label uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
</div>
</footer>
</main>
</div>
</main>
<CreateCapsuleDialog
open={showCreateDialog}

15
frontend/src/routes/admin/capsules/[id]/+page.svelte
View File

@ -2,7 +2,6 @@
import { onMount, onDestroy } from 'svelte';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import AdminSidebar from '$lib/components/AdminSidebar.svelte';
import TerminalTab from '$lib/components/TerminalTab.svelte';
import FilesTab from '$lib/components/FilesTab.svelte';
import MetricsPanel from '$lib/components/MetricsPanel.svelte';
@ -19,12 +18,6 @@
const capsuleId: string = $page.params.id ?? '';
const API_BASE = '/api/v1/admin/capsules';
let collapsed = $state(
typeof window !== 'undefined'
? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
: false
);
let capsule = $state<Capsule | null>(null);
let capsuleLoading = $state(true);
let capsuleError = $state<string | null>(null);
@ -129,10 +122,7 @@
<title>Wrenn Admin — {capsuleId}</title>
</svelte:head>
<div class="flex h-screen overflow-hidden bg-[var(--color-bg-0)]">
<AdminSidebar bind:collapsed />
<main class="flex min-w-0 flex-1 flex-col overflow-hidden">
<main class="flex min-w-0 flex-1 flex-col overflow-hidden">
{#if capsuleLoading}
<div class="flex flex-1 items-center justify-center">
<div class="flex items-center gap-3 text-ui text-[var(--color-text-secondary)]">
@ -237,8 +227,7 @@
<span class="font-mono text-label uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
</div>
</footer>
</main>
</div>
</main>
<!-- Snapshot dialog -->
{#if showSnapshot}