C3 Template
App Shell
The foundational layout chrome every C3 application sits inside — top bar, status ticker, icon rail (core apps + pinned add-ons + App Store), main canvas slot, and an expandable side panel that opens adjacent to the icon rail (used by every rail item including the App Store). Plus chrome-level Notification Centre and Workspace panels triggered from the top bar. Other C3 templates compose this shell and fill the main canvas.
Design principles applied
The top bar (brand, online status, notifications, theme, avatar) and status ticker (metric counts, alerts, LOCAL/UTC/EX clocks) anchor in the same screen position regardless of which icon-rail app is open. Status never moves between contexts — operators always know where to look.
The icon rail holds six core apps plus up to five pinned add-ons in a visually distinct section — each chunk stays at the 7±2 working-memory limit. The App Store accommodates the rest without inflating the rail. The status ticker carries four metrics plus the clocks. The top-bar action group holds four elements (status · notifications · theme · avatar). Each region stays scannable at a glance.
The shell chrome (top bar, ticker, icon rail) is invariant across all C3 templates that compose this one. Per-app content replaces only the main canvas and side panel, never the chrome. Under load, an operator's overlearned spatial map remains correct.
The shell renders in C3 dark by default regardless of the docs site's mode. Dark is the canonical operator state — preserves dark adaptation in dim ops rooms and reduces eye strain on long shifts.
Preview
View at viewport scaleClick any icon in the rail to open its side panel (opens adjacent to the rail, can expand to the full canvas). The App Store icon at the bottom of the rail follows the same pattern and opens the add-on catalogue — install / uninstall / pin to rail (capped at 5 pinned add-ons). The bell and avatar are different: they open the right-anchored Notification Centre and Workspace panels respectively (those two are chrome-level, mutually exclusive, and don't support the expand toggle).
Code
The shell is one file. Copy it into your project at the same relative path and customise the brand, rail items, and metrics for your application.
import { C3AppShell } from "@/templates/c3/app-shell";
export default function YourApp() {
return <C3AppShell />;
}Notes
What's customizable
- Brand mark and product name (in the top bar)
- Core icon rail items — order, labels, badges, icons; the current set (Dashboard, Ops Log, Incidents, Tasks, ORBAT, Chat) is placeholder. Always available to every operator.
- Add-on app catalogue — apps the operator can install via the App Store. Up to five installed add-ons can be pinned to the rail (separated from core apps by a horizontal divider). Unpinned installed add-ons remain launchable: clicking their row in the App Store opens the app's slide panel (the same panel they'd open from the rail if pinned).
- Status ticker metrics — labels, values, optional severity tone
- Exercise start time — currently anchored 2 hours before mount; replace with your real D-day timestamp
- Notification Centre data — the placeholder list, filters, and dismiss / mark-all-read behaviour are wired to local state for the demo; replace with your real backend
- Workspace panel — the operator card (MAJ A. LOH · Watch Officer · DSTA) and the workspace list are placeholders
- Side-panel content (rail apps) — currently placeholder text; wire your app's UI into each one
- The main canvas — currently a stylized map placeholder (grid + markers + compass + scale bar). Substitute your real map (Leaflet, Mapbox, etc.), dashboard, or detail content
What's intentionally fixed
- Top-bar height (56px) and ticker height (32px) — chunking constraint
- Icon rail width (64px) — Fitts-comfortable target sizes within chunking limits
- Top-bar element order — predictable placement across templates
- Add-on pin cap (5) — keeps the rail's add-on chunk at the 7±2 limit; the App Store handles the rest
- Visual seam between core and add-ons (horizontal divider) — preserves chunking via clear spatial grouping
- App Store position — always pinned at the bottom of the rail, outside the scroll area. Rail scrolls vertically if core + pinned add-ons would overflow the available height, but App Store stays in place per predictable information placement.
- Dark theme as default — operator-state principle