cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: strip AppShell+Sidebar wrappers from all page components

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-02 18:09:16 +02:00
parent 8cd3c3a99d
commit 9fa7eb129d
8 changed files with 129 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/Admin/Admin.tsx
View File

@@ -1,9 +1,6 @@
import { useNavigate, useLocation } from 'react-router-dom' import { useNavigate, useLocation } from 'react-router-dom'
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
import { Tabs } from '../../design-system/composites/Tabs/Tabs' import { Tabs } from '../../design-system/composites/Tabs/Tabs'
import { SIDEBAR_APPS } from '../../mocks/sidebar'
import styles from './Admin.module.css' import styles from './Admin.module.css'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
@@ -23,7 +20,7 @@ export function AdminLayout({ title, children }: AdminLayoutProps) {
const location = useLocation() const location = useLocation()
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar <TopBar
breadcrumb={[ breadcrumb={[
{ label: 'Admin', href: '/admin' }, { label: 'Admin', href: '/admin' },
@@ -40,6 +37,6 @@ export function AdminLayout({ title, children }: AdminLayoutProps) {
<div className={styles.adminContent}> <div className={styles.adminContent}>
{children} {children}
</div> </div>
</AppShell> </>
) )
} }

29
src/pages/AgentHealth/AgentHealth.tsx
View File

@@ -4,8 +4,6 @@ import { ChevronRight } from 'lucide-react'
import styles from './AgentHealth.module.css' import styles from './AgentHealth.module.css'
// Layout // Layout
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
// Composites // Composites
@@ -28,7 +26,6 @@ import { useGlobalFilters } from '../../design-system/providers/GlobalFilterProv
// Mock data // Mock data
import { agents, type AgentHealth as AgentHealthData } from '../../mocks/agents' import { agents, type AgentHealth as AgentHealthData } from '../../mocks/agents'
import { SIDEBAR_APPS } from '../../mocks/sidebar'
import { agentEvents } from '../../mocks/agentEvents' import { agentEvents } from '../../mocks/agentEvents'
// ── URL scope parsing ──────────────────────────────────────────────────────── // ── URL scope parsing ────────────────────────────────────────────────────────
@@ -317,19 +314,7 @@ export function AgentHealth() {
const isFullWidth = scope.level !== 'all' const isFullWidth = scope.level !== 'all'
return ( return (
<AppShell <>
sidebar={<Sidebar apps={SIDEBAR_APPS} />}
detail={
selectedInstance ? (
<DetailPanel
open={panelOpen}
onClose={() => setPanelOpen(false)}
title={selectedInstance.name}
tabs={detailTabs}
/>
) : undefined
}
>
<TopBar <TopBar
breadcrumb={buildBreadcrumb(scope)} breadcrumb={buildBreadcrumb(scope)}
environment="PRODUCTION" environment="PRODUCTION"
@@ -454,6 +439,16 @@ export function AgentHealth() {
</div> </div>
)} )}
</div> </div>
</AppShell>
{/* Detail panel (portals itself) */}
{selectedInstance && (
<DetailPanel
open={panelOpen}
onClose={() => setPanelOpen(false)}
title={selectedInstance.name}
tabs={detailTabs}
/>
)}
</>
) )
} }

11
src/pages/AgentInstance/AgentInstance.tsx
View File

@@ -4,8 +4,6 @@ import { ChevronRight } from 'lucide-react'
import styles from './AgentInstance.module.css' import styles from './AgentInstance.module.css'
// Layout // Layout
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
// Composites // Composites
@@ -28,7 +26,6 @@ import { useGlobalFilters } from '../../design-system/providers/GlobalFilterProv
// Data // Data
import { agents } from '../../mocks/agents' import { agents } from '../../mocks/agents'
import { SIDEBAR_APPS } from '../../mocks/sidebar'
import { agentEvents } from '../../mocks/agentEvents' import { agentEvents } from '../../mocks/agentEvents'
import { useState } from 'react' import { useState } from 'react'
@@ -127,12 +124,12 @@ export function AgentInstance() {
if (!agent) { if (!agent) {
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar breadcrumb={[{ label: 'Agents', href: '/agents' }, { label: 'Not Found' }]} environment="PRODUCTION" user={{ name: 'hendrik' }} /> <TopBar breadcrumb={[{ label: 'Agents', href: '/agents' }, { label: 'Not Found' }]} environment="PRODUCTION" user={{ name: 'hendrik' }} />
<div className={styles.content}> <div className={styles.content}>
<div className={styles.notFound}>Agent instance not found.</div> <div className={styles.notFound}>Agent instance not found.</div>
</div> </div>
</AppShell> </>
) )
} }
@@ -153,7 +150,7 @@ export function AgentInstance() {
const statusColor = agent.status === 'live' ? 'success' : agent.status === 'stale' ? 'warning' : 'error' const statusColor = agent.status === 'live' ? 'success' : agent.status === 'stale' ? 'warning' : 'error'
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar <TopBar
breadcrumb={[ breadcrumb={[
{ label: 'Applications', href: '/apps' }, { label: 'Applications', href: '/apps' },
@@ -302,6 +299,6 @@ export function AgentInstance() {
</div> </div>
</div> </div>
</div> </div>
</AppShell> </>
) )
} }

7
src/pages/ApiDocs/ApiDocs.tsx
View File

@@ -1,12 +1,9 @@
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
import { EmptyState } from '../../design-system/primitives/EmptyState/EmptyState' import { EmptyState } from '../../design-system/primitives/EmptyState/EmptyState'
import { SIDEBAR_APPS } from '../../mocks/sidebar'
export function ApiDocs() { export function ApiDocs() {
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar <TopBar
breadcrumb={[{ label: 'API Documentation' }]} breadcrumb={[{ label: 'API Documentation' }]}
environment="PRODUCTION" environment="PRODUCTION"
@@ -17,6 +14,6 @@ export function ApiDocs() {
title="API Documentation" title="API Documentation"
description="API documentation coming soon." description="API documentation coming soon."
/> />
</AppShell> </>
) )
} }

7
src/pages/AppDetail/AppDetail.tsx
View File

@@ -1,15 +1,12 @@
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
import { EmptyState } from '../../design-system/primitives/EmptyState/EmptyState' import { EmptyState } from '../../design-system/primitives/EmptyState/EmptyState'
import { SIDEBAR_APPS } from '../../mocks/sidebar'
export function AppDetail() { export function AppDetail() {
const { id } = useParams<{ id: string }>() const { id } = useParams<{ id: string }>()
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar <TopBar
breadcrumb={[ breadcrumb={[
{ label: 'Applications', href: '/apps' }, { label: 'Applications', href: '/apps' },
@@ -23,6 +20,6 @@ export function AppDetail() {
title="Application Detail" title="Application Detail"
description="Application detail view coming soon." description="Application detail view coming soon."
/> />
</AppShell> </>
) )
} }

200
src/pages/Dashboard/Dashboard.tsx
View File

@@ -4,8 +4,6 @@ import { TrendingUp, TrendingDown, ArrowRight, ExternalLink, AlertTriangle } fro
import styles from './Dashboard.module.css' import styles from './Dashboard.module.css'
// Layout // Layout
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
// Composites // Composites
@@ -287,106 +285,7 @@ export function Dashboard() {
const totalErrors = processorErrors.length + (hasExchangeError && processorErrors.length === 0 ? 1 : 0) const totalErrors = processorErrors.length + (hasExchangeError && processorErrors.length === 0 ? 1 : 0)
return ( return (
<AppShell <>
sidebar={
<Sidebar apps={SIDEBAR_APPS} />
}
detail={
selectedExchange ? (
<DetailPanel
open={panelOpen}
onClose={() => setPanelOpen(false)}
title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
>
{/* Link to full detail page */}
<div className={styles.panelSection}>
<button
className={styles.openDetailLink}
onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
>
Open full details <ArrowRight size={14} style={{ verticalAlign: 'middle' }} />
</button>
</div>
{/* Overview */}
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>Overview</div>
<div className={styles.overviewGrid}>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Status</span>
<span className={styles.statusCell}>
<StatusDot variant={statusToVariant(selectedExchange.status)} />
<span>{statusLabel(selectedExchange.status)}</span>
</span>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Duration</span>
<MonoText size="sm">{formatDuration(selectedExchange.durationMs)}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Route</span>
<span>{selectedExchange.route}</span>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Customer</span>
<MonoText size="sm">{selectedExchange.customer}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Agent</span>
<MonoText size="sm">{selectedExchange.agent}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Correlation</span>
<MonoText size="xs">{selectedExchange.correlationId}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Timestamp</span>
<MonoText size="xs">{selectedExchange.timestamp.toISOString()}</MonoText>
</div>
</div>
</div>
{/* Errors */}
{totalErrors > 0 && (
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>
Errors
{totalErrors > 1 && (
<Badge label={`+${totalErrors - 1} more`} color="error" variant="outlined" />
)}
</div>
<div className={styles.errorBlock}>
<div className={styles.errorClass}>
{selectedExchange.errorClass ?? processorErrors[0]?.name}
</div>
<div className={styles.errorMessage}>
{selectedExchange.errorMessage ?? `Failed at processor: ${processorErrors[0]?.name}`}
</div>
</div>
</div>
)}
{/* Route Flow */}
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>Route Flow</div>
<RouteFlow nodes={routeNodes} />
</div>
{/* Processor Timeline */}
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>
Processor Timeline
<span className={styles.panelSectionMeta}>{formatDuration(selectedExchange.durationMs)}</span>
</div>
<ProcessorTimeline
processors={selectedExchange.processors}
totalMs={selectedExchange.durationMs}
/>
</div>
</DetailPanel>
) : undefined
}
>
{/* Top bar */} {/* Top bar */}
<TopBar <TopBar
breadcrumb={ breadcrumb={
@@ -444,6 +343,101 @@ export function Dashboard() {
{/* Shortcuts bar */} {/* Shortcuts bar */}
<ShortcutsBar shortcuts={SHORTCUTS} /> <ShortcutsBar shortcuts={SHORTCUTS} />
</AppShell>
{/* Detail panel (portals itself) */}
{selectedExchange && (
<DetailPanel
open={panelOpen}
onClose={() => setPanelOpen(false)}
title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
>
{/* Link to full detail page */}
<div className={styles.panelSection}>
<button
className={styles.openDetailLink}
onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
>
Open full details <ArrowRight size={14} style={{ verticalAlign: 'middle' }} />
</button>
</div>
{/* Overview */}
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>Overview</div>
<div className={styles.overviewGrid}>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Status</span>
<span className={styles.statusCell}>
<StatusDot variant={statusToVariant(selectedExchange.status)} />
<span>{statusLabel(selectedExchange.status)}</span>
</span>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Duration</span>
<MonoText size="sm">{formatDuration(selectedExchange.durationMs)}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Route</span>
<span>{selectedExchange.route}</span>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Customer</span>
<MonoText size="sm">{selectedExchange.customer}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Agent</span>
<MonoText size="sm">{selectedExchange.agent}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Correlation</span>
<MonoText size="xs">{selectedExchange.correlationId}</MonoText>
</div>
<div className={styles.overviewRow}>
<span className={styles.overviewLabel}>Timestamp</span>
<MonoText size="xs">{selectedExchange.timestamp.toISOString()}</MonoText>
</div>
</div>
</div>
{/* Errors */}
{totalErrors > 0 && (
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>
Errors
{totalErrors > 1 && (
<Badge label={`+${totalErrors - 1} more`} color="error" variant="outlined" />
)}
</div>
<div className={styles.errorBlock}>
<div className={styles.errorClass}>
{selectedExchange.errorClass ?? processorErrors[0]?.name}
</div>
<div className={styles.errorMessage}>
{selectedExchange.errorMessage ?? `Failed at processor: ${processorErrors[0]?.name}`}
</div>
</div>
</div>
)}
{/* Route Flow */}
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>Route Flow</div>
<RouteFlow nodes={routeNodes} />
</div>
{/* Processor Timeline */}
<div className={styles.panelSection}>
<div className={styles.panelSectionTitle}>
Processor Timeline
<span className={styles.panelSectionMeta}>{formatDuration(selectedExchange.durationMs)}</span>
</div>
<ProcessorTimeline
processors={selectedExchange.processors}
totalMs={selectedExchange.durationMs}
/>
</div>
</DetailPanel>
)}
</>
) )
} }

20
src/pages/ExchangeDetail/ExchangeDetail.tsx
View File

@@ -3,8 +3,6 @@ import { useParams, useNavigate } from 'react-router-dom'
import styles from './ExchangeDetail.module.css' import styles from './ExchangeDetail.module.css'
// Layout // Layout
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
// Composites // Composites
@@ -22,7 +20,7 @@ import { InfoCallout } from '../../design-system/primitives/InfoCallout/InfoCall
// Mock data // Mock data
import { exchanges } from '../../mocks/exchanges' import { exchanges } from '../../mocks/exchanges'
import { SIDEBAR_APPS, buildRouteToAppMap } from '../../mocks/sidebar' import { buildRouteToAppMap } from '../../mocks/sidebar'
const ROUTE_TO_APP = buildRouteToAppMap() const ROUTE_TO_APP = buildRouteToAppMap()
@@ -196,11 +194,7 @@ export function ExchangeDetail() {
// Not found state // Not found state
if (!exchange) { if (!exchange) {
return ( return (
<AppShell <>
sidebar={
<Sidebar apps={SIDEBAR_APPS} />
}
>
<TopBar <TopBar
breadcrumb={[ breadcrumb={[
{ label: 'Applications', href: '/apps' }, { label: 'Applications', href: '/apps' },
@@ -213,7 +207,7 @@ export function ExchangeDetail() {
<div className={styles.content}> <div className={styles.content}>
<InfoCallout variant="warning">Exchange "{id}" not found in mock data.</InfoCallout> <InfoCallout variant="warning">Exchange "{id}" not found in mock data.</InfoCallout>
</div> </div>
</AppShell> </>
) )
} }
@@ -229,11 +223,7 @@ export function ExchangeDetail() {
const isSelectedFailed = selectedProc?.status === 'fail' const isSelectedFailed = selectedProc?.status === 'fail'
return ( return (
<AppShell <>
sidebar={
<Sidebar apps={SIDEBAR_APPS} />
}
>
{/* Top bar */} {/* Top bar */}
<TopBar <TopBar
breadcrumb={[ breadcrumb={[
@@ -454,6 +444,6 @@ export function ExchangeDetail() {
)} )}
</div> </div>
</AppShell> </>
) )
} }

12
src/pages/Routes/Routes.tsx
View File

@@ -3,8 +3,6 @@ import { useNavigate, useParams } from 'react-router-dom'
import styles from './Routes.module.css' import styles from './Routes.module.css'
// Layout // Layout
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar' import { TopBar } from '../../design-system/layout/TopBar/TopBar'
// Composites // Composites
@@ -33,7 +31,7 @@ import {
type RouteMetricRow, type RouteMetricRow,
} from '../../mocks/metrics' } from '../../mocks/metrics'
import { routes } from '../../mocks/routes' import { routes } from '../../mocks/routes'
import { SIDEBAR_APPS, buildRouteToAppMap } from '../../mocks/sidebar' import { buildRouteToAppMap } from '../../mocks/sidebar'
const ROUTE_TO_APP = buildRouteToAppMap() const ROUTE_TO_APP = buildRouteToAppMap()
@@ -410,7 +408,7 @@ export function Routes() {
// ── Route detail view ─────────────────────────────────────────────────────── // ── Route detail view ───────────────────────────────────────────────────────
if (routeId && appId && routeDef) { if (routeId && appId && routeDef) {
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar <TopBar
breadcrumb={breadcrumb} breadcrumb={breadcrumb}
environment="PRODUCTION" environment="PRODUCTION"
@@ -448,13 +446,13 @@ export function Routes() {
<RouteFlow nodes={routeFlowNodes} /> <RouteFlow nodes={routeFlowNodes} />
</div> </div>
</div> </div>
</AppShell> </>
) )
} }
// ── Top level / Application level view ────────────────────────────────────── // ── Top level / Application level view ──────────────────────────────────────
return ( return (
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}> <>
<TopBar <TopBar
breadcrumb={breadcrumb} breadcrumb={breadcrumb}
environment="PRODUCTION" environment="PRODUCTION"
@@ -533,6 +531,6 @@ export function Routes() {
</Card> </Card>
</div> </div>
</div> </div>
</AppShell> </>
) )
} }