App shell / scaffold

In review

Live · web

Platform

Web · mixAndroid · top barVoice · left nav

Nav

ExpandedRail

Surface

SolidTranslucent

NockerlDashboard3AL

Workspace

ChatTasksFilesCluster

dizyx · nockerl-design

Streaming · 2 tools running

nockerl-design · docs site

Designing the app-shell scaffold to the token standard.

Web · mix · nav Expanded · viewing Chat. The brand sits ONCE (the nav for web/Voice, the top bar for Android), never duplicated; bottom-nav is retired. Tab in, arrow-key the destinations, the facet drifts behind. Live.

Brand placement + platform presets (ratified)

The app shell is a pure composition of the corrected components (the real brand lockup, the nav items, and the facet field), so every top-bar / nav fix propagates here automatically. Two rules are ratified:

• The brand appears exactly once. Never duplicate the logo / title between the top bar and the left nav. The surface’s main nav owns the brand: the left nav on web and Voice, the top bar on Android (whose top bar is the primary chrome).
• Platform presets: Android = a top bar (brand) + a compact nav rail · Voice = the left nav ONLY, no title bar · web = the mix (top bar + expanded nav). Switch them live above.
• Bottom navigation is retired. The shell has two nav layouts (expanded sidebar or icon rail), never a bottom bar.

Code

TypeScript

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)

export function App() {
  const [section, setSection] = useState('chat');
  return (
    <AppShell
      preset="web"                     // 'web' | 'android' | 'voice' (platform chrome preset)
      title="Chat"
      layout="expanded"                // 'expanded' | 'rail'; bottom nav retired (preset sets the default)
      destinations={[
        { id: 'chat', label: 'Chat', icon: <ChatIcon />, dot: 'streaming' },
        { id: 'tasks', label: 'Tasks', icon: <TasksIcon />, dot: 'attention' },
        { id: 'files', label: 'Files', icon: <FilesIcon /> },
        { id: 'cluster', label: 'Cluster', icon: <ClusterIcon /> },
      ]}
      selected={section}
      onSelect={setSection}
      actions={<><ClusterButton /><InboxButton count={3} /><NockerlAvatar /></>}
    >
      <SectionContent section={section} />   {/* the content region, over the facet field */}
    </AppShell>
  );
}

Kotlin

// Android: Jetpack Compose (canonical). com.nockerl.app.core.ui.MainScaffold
// The shell is a Box: a PINNED ChatFeedBackground at the base, a stacked top
// chrome (GlobalTopBar -> ProjectRow -> SessionChipsBar -> TopChromeBoundary)
// that casts one soft shadow, then the transparent content (ChatScreen).
import com.nockerl.app.core.ui.MainScaffold

// Hosted by the auth-gated NavHost once authenticated:
NavHost(navController, startDestination = NockerlRoutes.MAIN) {
    composable(NockerlRoutes.MAIN) { MainScaffold() }
}

// MainScaffold composes the regions itself:
//   GlobalTopBar(onAvatarClick, onInboxClick, onClusterClick, unreadCount, hasUnseen)
//   ProjectRow(projectName, isWorkspaceScoped, onOpenPicker, onOpenFiles, onOpenTasks)
//   TopChromeBoundary(collapsed = headerCollapsed, onCollapsedChange = { … })  // cyan line + grab handle
//   ChatScreen(modifier = Modifier.weight(1f))                                  // transparent content

Swift

// macOS: SwiftUI (canonical). NockerlVoice/UI/DashboardView.swift
// A ZStack: one full-window FacetBackground under EVERYTHING, a translucent
// floating sidebar, and the selected page full-bleed over the same field.
// No title bar (.windowStyle(.hiddenTitleBar) on the scene).
struct DashboardView: View {
    @ObservedObject private var router = DashboardRouter.shared

    var body: some View {
        ZStack(alignment: .topLeading) {
            FacetBackground().ignoresSafeArea()          // pinned geometric ground
            HStack(spacing: 0) {
                sidebar                                   // brand + nav items + settings
                detail.frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .ignoresSafeArea(.container, edges: .top)     // flow under the traffic lights
        }
        .frame(minWidth: 860, minHeight: 580)
        .tint(NockerlTheme.accent)
    }
}

Parameters

TypeScript

Prop	Type	Default	Description
title	string	n/a	Title shown in the top bar (the active destination on small widths).
destinations *	ShellDestination[]	n/a	Nav entries: { id, label, icon, dot? }. Each renders as one focusable button.
selected *	string	n/a	Active destination id. Drives the selected indicator + which content shows.
onSelect *	(id: string) => void	n/a	Fired when a destination is activated (click / Enter / Space).
preset	'web' | 'android' | 'voice'	'web'	Platform chrome preset. web: top bar + expanded nav · android: top bar (owns the brand) + icon rail · voice: left nav only, no title bar. Sets the default layout and where the brand sits.
layout	'expanded' | 'rail'	preset default	Nav presentation: full sidebar or icon rail. Defaults from the preset; bottom navigation is retired.
actions	ReactNode	n/a	Trailing top-bar controls (cluster, inbox, avatar). Rendered after the title.
children *	ReactNode	n/a	The content region, rendered transparent so the facet field shows behind it.

Kotlin

MainScaffold() takes only a modifier; it composes the regions internally and hoists their view-models. The real parameters live on the region composables it calls. Here are the most load-bearing ones:

Parameter	Type	Default	Description
MainScaffold.modifier	Modifier	Modifier	Outer modifier; applies fillMaxSize() + statusBarsPadding() internally. State (header collapse, sheets) is held inside.
GlobalTopBar.onAvatarClick / onInboxClick / onClusterClick	() -> Unit	{}	Top-bar actions that open the settings / inbox / cluster sheets.
GlobalTopBar.unreadCount	Int	0	Inbox badge count (orange agent-family token); falls back to a dot via hasUnseen.
ProjectRow.onOpenPicker / onOpenFiles / onOpenTasks *	() -> Unit	n/a	Project selector + Files / Tasks buttons → their bottom sheets.
TopChromeBoundary.collapsed *	Boolean	n/a	Whether the project + session rows are collapsed up under the title bar.
TopChromeBoundary.onCollapsedChange *	(Boolean) -> Unit	n/a	Drag/tap the cyan boundary handle to collapse/expand the header chrome.

Swift

DashboardView is a self-contained scene root with no parameters: it reads the shared DashboardRouter + SettingsStore. The shape is the configurable surface:

Style	Type	Default	Description
FacetBackground()	View	n/a	The pinned full-window geometric field (.ignoresSafeArea()), the animated ground under everything.
sidebar	View (216pt)	n/a	Translucent floating panel (canvas @ 0.3, no material) so the field reads through: brand at top, nav rows, settings pinned to bottom.
SidebarRow(section, isSelected, action)	View	n/a	One nav row. Selected → cyan label + cyan @0.16 fill + cyan @0.45 border; hover → onSurface @0.06.
detail	View	n/a	The selected page, full-bleed over the same field (switched on router.section).
router.section	DashboardSection	n/a	Active destination. Drives both the selected row and which detail pane shows.

Cross-platform drift (tracked for reconciliation)

All three shells share one anatomy (a top region, a nav region, and a content region over the pinned animated facet field), but the form genuinely diverges:

• Nav placement: Android stacks nav as top chrome (project + session rows that collapse under the title bar); Voice + web use a left sidebar / rail. Bottom navigation is retired: every shell is a sidebar or an icon rail.
• Top bar: Android centers the logo with avatar/cluster/bell around it; Voice has no title bar at all (the brand sits in the sidebar under the traffic lights). Web carries a title + trailing actions.
• Boundary: Android draws a 1.5dp cyan line + drag handle between chrome and content; Voice/web separate regions with a hairline only.
• The facet field is unified: the same low-poly triangle mesh + ~18s diagonal tone-wave on all three (ChatFeedBackground.kt / FacetBackground.swift).