From cbfd09c5df16ee5d5339e72c9484e37fd28abb3f Mon Sep 17 00:00:00 2001 From: dtoro Date: Thu, 9 Jul 2026 00:54:51 +0200 Subject: [PATCH] feat: redesign toward shadcn-svelte dashboard-01 (inset sidebar, gradient stat cards) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problem: requested visual alignment with the shadcn-svelte dashboard-01 reference block (shadcn-svelte.com/blocks#dashboard-01) — the app's sidebar/header shell and Overview stat cards looked plain by comparison. Change: pulled the actual reference source (app-sidebar.svelte, nav-main.svelte, site-header.svelte, section-cards.svelte from huntabyte/shadcn-svelte) rather than approximating from screenshots. - App.svelte: Sidebar.Root now uses variant="inset" (the floating, rounded, shadowed content panel — already fully built into the existing Sidebar.Inset component via peer-data selectors, just never enabled). Brand mark is now a proper Sidebar.MenuButton matching the reference's padding/hover treatment; "New chat" uses the reference's primary-colored button styling. Header matches the reference exactly: h-(--header-height) (48px, was 44px), vertical separator after the sidebar trigger, right-aligned actions group. - Overview.svelte: stat cards rebuilt to match section-cards.svelte — gradient background, Card.Action badge, Card.Footer with a bold line + muted context line, tabular-nums, responsive @container grid (1/2/4 columns). Deliberately did NOT copy the reference's fake trend-percentage badges (Oikos doesn't track historical trends, and this project's whole thrust has been eliminating dishonest UI state — see 279549c). Badges instead reflect real current-state signals (healthy/degraded/down, clear/needs-review) computed from the actual dashboard summary. - EntityDetailContent.svelte + Entities/Signals/Ops/Events/Agent/ Audit/Knowledge pages: normalized root padding to p-4 md:p-6 (was a flat p-6) to match the reference's responsive py-4 md:py-6 convention. Risk: reversible_low (UI-only, no data or behavior changes). Verification: npx tsc --noEmit clean (excluding pre-existing unrelated .svelte type-resolution warnings, same as prior commits). go build/vet clean (backend untouched, sanity check only). Manually verified in the browser preview at 1400px: inset sidebar's margin/rounded-corner/shadow classes confirmed applied via computed styles; Overview cards render with real live numbers from the now-fixed dashboard summary endpoint; Signals/Ops pages confirmed visually consistent with the new spacing. Co-Authored-By: Claude Sonnet 5 --- web/src/App.svelte | 45 ++++-- .../lib/components/EntityDetailContent.svelte | 2 +- web/src/pages/Agent.svelte | 2 +- web/src/pages/Audit.svelte | 2 +- web/src/pages/Entities.svelte | 2 +- web/src/pages/Events.svelte | 2 +- web/src/pages/Knowledge.svelte | 2 +- web/src/pages/Ops.svelte | 2 +- web/src/pages/Overview.svelte | 147 ++++++++++++++---- web/src/pages/Signals.svelte | 2 +- 10 files changed, 153 insertions(+), 55 deletions(-) diff --git a/web/src/App.svelte b/web/src/App.svelte index f272cef..a8a866d 100644 --- a/web/src/App.svelte +++ b/web/src/App.svelte @@ -19,6 +19,7 @@ import * as Sheet from '$lib/components/ui/sheet' import { Button } from '$lib/components/ui/button' import { Badge } from '$lib/components/ui/badge' + import { Separator } from '$lib/components/ui/separator' import { Toaster } from '$lib/components/ui/sonner' import PlusIcon from '@lucide/svelte/icons/plus' import MessageSquareIcon from '@lucide/svelte/icons/message-square' @@ -76,18 +77,34 @@ - - + + -
- -
- { newChat(); navigate('chat') }} tooltipContent="New chat"> + navigate('overview')} + tooltipContent="Oikos" + > + {#snippet child({ props })} + + {/snippet} + + + + + + { newChat(); navigate('chat') }} + tooltipContent="New chat" + > {#snippet child({ props })}