Benson Wong
4384315b44
Trying out svelte for the UI. The port was done by Claude Code on the iOS app w/ Opus 4.5. --- * ui: add Svelte port of React UI Port the React-based UI to Svelte 5 with the following changes: - Create new ui-svelte directory with complete Svelte 5 implementation - Use Svelte stores instead of React contexts for state management - Implement custom ResizablePanels component to replace react-resizable-panels - Port all pages: LogViewer, Models, Activity - Port all components: Header, ConnectionStatus, LogPanel, ModelsPanel, etc. - Use svelte-spa-router for client-side routing - Same build output directory (proxy/ui_dist) and base path (/ui/) - Tailwind CSS 4 with same theme configuration https://claude.ai/code/session_01F3xXLYsd62gePVSFv7aboP * ui-svelte: simplify state management - Remove redundant state syncing pattern in LogPanel and ModelsPanel - Use store values directly with $ syntax instead of manual subscriptions - Consolidate duplicate title sync logic in App.svelte - Use existing syncTitleToDocument() from theme.ts https://claude.ai/code/session_01F3xXLYsd62gePVSFv7aboP * ui-svelte: use idiomatic Svelte 5 patterns - Use $effect for document side effects (theme, title) instead of store subscriptions - Use class: directive for active nav links in Header - Remove SSR guards (unnecessary for client-only SPA) - Remove leaked subscription in syncThemeToDocument - Simplify theme.ts by removing sync functions https://claude.ai/code/session_01F3xXLYsd62gePVSFv7aboP * ui-svelte: fix build warnings and improve accessibility Fix Svelte build warnings and add proper accessibility support to interactive components. - add aria-labels to buttons for screen readers - implement keyboard navigation for resizable separator - suppress intentional state initialization warnings - update Makefile to use ui-svelte build directory - add peer:true to package-lock.json dependencies * ui-svelte: reorganize navigation and add log view toggle Make Models the default landing page and add view mode toggle to the Logs page with persistent state. - set Models as default route at / - move Logs to /logs route - reorder navigation: Models, Activity, Logs - add view toggle with three modes: Panels, Proxy only, Upstream only - fix horizontal overflow with width constraints
27 lines
914 B
Svelte
27 lines
914 B
Svelte
<script lang="ts">
|
|
import { isNarrow } from "../stores/theme";
|
|
import { upstreamLogs } from "../stores/api";
|
|
import ModelsPanel from "../components/ModelsPanel.svelte";
|
|
import StatsPanel from "../components/StatsPanel.svelte";
|
|
import LogPanel from "../components/LogPanel.svelte";
|
|
import ResizablePanels from "../components/ResizablePanels.svelte";
|
|
|
|
let direction = $derived<"horizontal" | "vertical">($isNarrow ? "vertical" : "horizontal");
|
|
</script>
|
|
|
|
<ResizablePanels {direction} storageKey="models-panel-group">
|
|
{#snippet leftPanel()}
|
|
<ModelsPanel />
|
|
{/snippet}
|
|
{#snippet rightPanel()}
|
|
<div class="flex flex-col h-full space-y-4">
|
|
{#if direction === "horizontal"}
|
|
<StatsPanel />
|
|
{/if}
|
|
<div class="flex-1 min-h-0">
|
|
<LogPanel id="modelsupstream" title="Upstream Logs" logData={$upstreamLogs} />
|
|
</div>
|
|
</div>
|
|
{/snippet}
|
|
</ResizablePanels>
|