@bardioc/create-bardioc-app 0.5.6 → 0.5.8

package/templates/svelte/vite.config.ts

@@ -3,9 +3,12 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, loadEnv } from 'vite';
 
+const DEFAULT_PORT = {{PORT}};
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, __dirname, '');
   const appName = env.VITE_APP_NAME?.trim();
+  const port = Number(env.LOCALHOST_PORT) || DEFAULT_PORT;
 
   if (!appName) {
     throw new Error('Missing VITE_APP_NAME for Vite config');
@@ -15,7 +18,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       bardiocDevAuth({ appName }),
       svelte(),
-      bardiocApp({ appName, port: {{PORT}} }),
+      bardiocApp({ appName, port }),
       tailwindcss(),
     ],
   };

package/templates/vite/.env.example

@@ -7,3 +7,6 @@ DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/vite/CLAUDE.md

@@ -35,9 +35,9 @@ src/
   auth/
     onboarding.tsx        # Empty full-page screen with the DEV_SECRET dev-auth steps
   shell/
-    app-shell.tsx         # Sidebar + view routing + Toaster + OS top-menu integration (useCommandMenu)
+    app-shell.tsx         # Sidebar + Page + view routing + Toaster + OS top-menu (useCommandMenu)
     about-dialog.tsx      # "About" Dialog — reads public/app-manifest.json at runtime (manifest example)
-    header.tsx            # location combobox + language switcher + sync
+    header.tsx            # Page actions: location combobox + language switcher + sync
   climate/
     types.ts              # Station/ClimateState + METRICS config (icon, unit, color)
     climate-data.ts       # demo-data generator (replace with your real source)
@@ -87,9 +87,10 @@ live SDK data comes only when the app is opened inside the host, or when `DEV_SE
 
 ## UI — `@bardioc/ui`
 
-Tailwind v4 + the Bardioc design system. **Never restyle with raw hex/oklch** — use the theme
-tokens (`bg-background`, `text-foreground`, `text-muted-foreground`, `bg-card`, `border-border`,
-`bg-primary`, and chart tokens `var(--chart-1..5)`). Theme is wired in `src/index.css`:
+Tailwind v4 + the Bardioc design system. **Before writing any UI, read
+`node_modules/@bardioc/ui/docs/INDEX.md`** — component choice, design tokens, layout and spacing
+patterns, and copy rules ship with the installed package, so they match its version. Theme is wired
+in `src/index.css`:
 
 ```css
 @import 'tailwindcss';
@@ -113,6 +114,7 @@ import {
   Empty,
   FilterDropdown,
   Kbd,
+  Page,
   SidebarBasic,
   SidebarContainedProvider,
   SortableColumnHeader,
@@ -126,10 +128,33 @@ import type { ChartConfig } from '@bardioc/ui/shadcn/chart';
 import type { TReactTable } from '@bardioc/ui/types'; // TReactTable.ColumnDef<Row>
 ```
 
-Prefer a Bardioc component over a raw HTML element. Icons come from `lucide-react`. The
-sidebar uses `SidebarBasic` inside a `SidebarContainedProvider` (the contained variant for
+The sidebar uses `SidebarBasic` inside a `SidebarContainedProvider` (the contained variant for
 OS windows); the language switcher is `ConnectedLanguageSwitcher useI18n={useI18n}`.
 
+### Layout — the container contract
+
+The app root opens `@container/app`; `Page` opens its own `@container/page` inside it. Keep both:
+sizing that should follow the whole app reads `@container/app`, and anything inside the page column
+— the page header included — reads `@container/page`, so it responds to the column rather than the
+window.
+
+`Page` is the scrolling column, a **sibling of the sidebar** — it owns the header, the scroller and
+the padding that lines them up. Don't compose a header and a `ScrollArea` by hand, and don't wrap
+the sidebar in it:
+
+```tsx
+<div className="bg-background text-foreground @container/app flex h-full min-h-0">
+  <SidebarBasic … />
+  <Page title={pageTitle} actions={<Header />} actionsClassName="gap-2" sticky className="min-w-0">
+    <ViewContent view={view} />
+  </Page>
+</div>
+```
+
+Collapse your own `actions` against the same container (e.g. `@3xl/page:hidden`) so both sides agree
+on what "wide enough" means. `sticky` keeps the header at the top while the body scrolls under it,
+compacting once it does; drop it if you want the header to scroll away instead.
+
 ---
 
 ## i18n — `@bardioc/i18n-core`
@@ -150,6 +175,8 @@ t('overview.updated', { fallback: 'Updated {time}', params: { time } });
 - Always pass a `fallback` so a missing key degrades gracefully.
 - `@bardioc/ui` component strings ship with the `@bardioc/ui` package itself — the app only
   carries its own `en/de.json`.
+- Copy style (Title Case labels, sentence-case messages, American English):
+  `node_modules/@bardioc/ui/docs/copy.md`.
 
 ---
 

package/templates/vite/package.json

@@ -18,15 +18,15 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "@bardioc/i18n-core": "^0.1.1",
-    "@bardioc/ui": "^0.3.1",
+    "@bardioc/ui": "^0.7.29",
     "lucide-react": "^0.544.0",
     "react": "19.2.6",
     "react-dom": "19.2.6"
   },
   "devDependencies": {
-    "@bardioc/configs": "^0.2.1",
+    "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
     "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^22.19.19",

package/templates/vite/src/auth/onboarding.tsx

@@ -25,7 +25,7 @@ export function Onboarding() {
       icon={PlugZap}
       iconVariant="chip"
       titleSize="lg"
-      title={t('auth.title', { fallback: 'Connect to Bardioc OS' })}
+      title={t('auth.title', { fallback: 'Connect to Bardioc' })}
       description={t('auth.description', {
         fallback: 'This dashboard reads live data through the Bardioc SDK transport.',
       })}
@@ -42,7 +42,7 @@ export function Onboarding() {
         <ol className="text-muted-foreground list-decimal space-y-2 pl-4">
           <li>
             {t('auth.step1', {
-              fallback: 'Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env',
+              fallback: 'Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env.',
             })}
           </li>
           <li>
@@ -52,10 +52,10 @@ export function Onboarding() {
         </ol>
         <div className="border-border mt-3 space-y-1 border-t pt-3">
           <p className="text-foreground font-medium">
-            {t('auth.detectedTitle', { fallback: 'Detected environment' })}
+            {t('auth.detectedTitle', { fallback: 'Detected Environment' })}
           </p>
           <DetectedRow
-            label={t('auth.insideHost', { fallback: 'Inside host iframe' })}
+            label={t('auth.insideHost', { fallback: 'Inside Host Iframe' })}
             ok={insideHost}
           />
         </div>

package/templates/vite/src/climate/conditions-chart.tsx

@@ -28,8 +28,8 @@ export function ConditionsChart({ forecast }: Readonly<ConditionsChartProps>) {
       seriesData={seriesData}
       xKey="day"
       chartConfig={chartConfig}
-      title={t('chart.title', { fallback: '7-day outlook' })}
-      description={t('chart.description', { fallback: 'Daylight hours by condition' })}
+      title={t('chart.title', { fallback: '7-Day Outlook' })}
+      description={t('chart.description', { fallback: 'Daylight hours by condition.' })}
       heightClass="h-[220px]"
     />
   );

package/templates/vite/src/climate/overview-view.tsx

@@ -42,7 +42,7 @@ export function OverviewView() {
         ) : (
           <span>
             {t('overview.notPersisted', {
-              fallback: 'Preview — not persisted (open inside Bardioc OS to persist)',
+              fallback: 'Preview — not persisted (open inside Bardioc to persist)',
             })}
           </span>
         )}

package/templates/vite/src/climate/stations-view.tsx

@@ -122,7 +122,7 @@ export function StationsView() {
     <div className="flex flex-col gap-3">
       <div>
         <h2 className="text-lg font-semibold">
-          {t('stations.title', { fallback: 'Monitoring stations' })}
+          {t('stations.title', { fallback: 'Monitoring Stations' })}
         </h2>
         <p className="text-muted-foreground text-xs">
           {t('stations.description', { fallback: '' })}
@@ -134,13 +134,13 @@ export function StationsView() {
         columns={columns}
         filterKey={['name', 'region']}
         showSearchBar
-        filterPlaceholder={t('stations.search', { fallback: 'Search stations…' })}
+        filterPlaceholder={t('stations.search', { fallback: 'Search Stations…' })}
         itemLabel={t('stations.itemLabel', { fallback: 'stations' })}
         onRowClick={station => setActiveStation(station.id)}
         filterSlot={<ConditionFilter selected={conditions} onToggle={onToggle} />}
         emptyState={
           <p className="text-muted-foreground p-6 text-center text-sm">
-            {t('stations.empty', { fallback: 'No stations match your filters' })}
+            {t('stations.empty', { fallback: 'No stations match your filters.' })}
           </p>
         }
       />

package/templates/vite/src/climate/use-climate.ts

@@ -89,7 +89,7 @@ export function useClimate() {
 
       notify(
         t('notify.synced', {
-          fallback: 'Synced {count} stations',
+          fallback: 'Synced {count} stations.',
           params: { count: next.stations.length },
         }),
         source === 'graph' ? 'success' : 'warning'
@@ -108,7 +108,7 @@ export function useClimate() {
       const station = next.stations.find(item => item.id === id);
       notify(
         t('notify.stationSelected', {
-          fallback: 'Active station: {name}',
+          fallback: 'Active station: {name}.',
           params: { name: station?.name ?? id },
         }),
         'info'

package/templates/vite/src/events/live-events-view.tsx

@@ -37,14 +37,14 @@ export function LiveEventsView() {
           <Empty
             icon={Activity}
             iconVariant="chip"
-            title={t('events.emptyTitle', { fallback: 'Waiting for events' })}
+            title={t('events.emptyTitle', { fallback: 'Waiting for Events' })}
             description={
               isInsideIframe()
                 ? t('events.emptyHost', {
                     fallback: 'No graph events yet — activity will appear here as it happens.',
                   })
                 : t('events.emptyStandalone', {
-                    fallback: 'Open inside Bardioc OS (or a dev session) to receive live events.',
+                    fallback: 'Open inside Bardioc (or a dev session) to receive live events.',
                   })
             }
           />

package/templates/vite/src/graph/explorer-view.tsx

@@ -28,12 +28,12 @@ export function ExplorerView() {
       const data = await request.run(bridge);
       const ms = Date.now() - started;
       setResult({ status: 'done', live: true, ms, data });
-      notify(t('notify.queryOk', { fallback: 'Request ok ({ms} ms)', params: { ms } }), 'success');
+      notify(t('notify.queryOk', { fallback: 'Request ok ({ms} ms).', params: { ms } }), 'success');
     } catch {
       const ms = Date.now() - started;
       setResult({ status: 'done', live: false, ms, data: request.mock() });
       notify(
-        t('notify.queryFailed', { fallback: 'Request failed — showing simulated data' }),
+        t('notify.queryFailed', { fallback: 'Request failed — showing simulated data.' }),
         'warning'
       );
     }
@@ -85,7 +85,7 @@ export function ExplorerView() {
               >
                 {result.status === 'running'
                   ? t('explorer.running', { fallback: 'Running…' })
-                  : t('explorer.run', { fallback: 'Run request' })}
+                  : t('explorer.run', { fallback: 'Run Request' })}
               </Button>
             </div>
 
@@ -107,7 +107,7 @@ export function ExplorerView() {
               {result.status === 'done'
                 ? JSON.stringify(result.data, null, 2)
                 : t('explorer.empty', {
-                    fallback: 'Select a request and run it to see the response',
+                    fallback: 'Select a request and run it to see the response.',
                   })}
             </pre>
           </div>

package/templates/vite/src/locales/de.json

@@ -39,8 +39,8 @@
     "neverSaved": "Noch nicht gespeichert"
   },
   "auth": {
-    "title": "Mit Bardioc OS verbinden",
-    "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc OS oder eigenständig mit einer CLI-Dev-Session.",
+    "title": "Mit Bardioc verbinden",
+    "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc oder eigenständig mit einer CLI-Dev-Session.",
     "stepsTitle": "Eigenständig mit Dev-Session ausführen:",
     "step1": "Setze DEV_SECRET=<dein-secret> und API_BASE_URL=<dein-host> in .env",
     "step2": "Dev-Server starten:",
@@ -56,7 +56,7 @@
     "noOperator": "Betreiber nicht verfügbar",
     "updated": "Aktualisiert {time}",
     "persistence": "In IndexedDB gespeichert",
-    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc OS öffnen zum Speichern)",
+    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc öffnen zum Speichern)",
     "historyOne": "{count} Snapshot im Verlauf",
     "historyOther": "{count} Snapshots im Verlauf",
     "source": "Quelle"
@@ -127,7 +127,7 @@
     "description": "Live-Graph-Ereignisse, vom OS über SSE gestreamt (Berechtigung \"events\").",
     "emptyTitle": "Warte auf Ereignisse",
     "emptyHost": "Noch keine Graph-Ereignisse — Aktivität erscheint hier, sobald sie auftritt.",
-    "emptyStandalone": "In Bardioc OS (oder einer Dev-Session) öffnen, um Live-Ereignisse zu empfangen."
+    "emptyStandalone": "In Bardioc (oder einer Dev-Session) öffnen, um Live-Ereignisse zu empfangen."
   },
   "notify": {
     "synced": "{count} Stationen synchronisiert",

package/templates/vite/src/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "app": { "title": "Weather Dashboard", "tagline": "Live planetary readings" },
+  "app": { "title": "Weather Dashboard", "tagline": "Live Planetary Readings" },
   "nav": {
     "overview": "Overview",
     "stations": "Stations",
@@ -9,77 +9,77 @@
   },
   "menu": {
     "view": "View",
-    "about": "About this app"
+    "about": "About This App"
   },
   "about": {
-    "title": "About this app",
+    "title": "About This App",
     "version": "Version",
     "id": "App ID",
     "description": "Description",
     "permissions": "Permissions",
-    "error": "Could not read app-manifest.json",
-    "source": "Read live from public/app-manifest.json"
+    "error": "Could not read app-manifest.json.",
+    "source": "Read live from public/app-manifest.json."
   },
   "genericTable": {
-    "filterPlaceholder": "Filter results...",
+    "filterPlaceholder": "Filter Results...",
     "itemLabel": "rows",
     "showing": "{from} to {to} of {total}",
     "columns": "Columns",
     "noResults": "No results found.",
-    "goToPreviousPage": "Go to previous page",
-    "goToNextPage": "Go to next page"
+    "goToPreviousPage": "Go to Previous Page",
+    "goToNextPage": "Go to Next Page"
   },
   "common": { "button": { "previous": "Previous", "next": "Next" } },
   "header": {
-    "search": "Search stations…",
+    "search": "Search Stations…",
     "sync": "Sync",
     "syncing": "Syncing…",
     "location": "Station",
     "savedAt": "Saved {time}",
-    "neverSaved": "Not yet saved"
+    "neverSaved": "Not Yet Saved"
   },
   "auth": {
-    "title": "Connect to Bardioc OS",
-    "description": "This dashboard reads live data through the Bardioc SDK transport. It runs when opened inside Bardioc OS, or standalone with a CLI dev session.",
+    "title": "Connect to Bardioc",
+    "description": "This dashboard reads live data through the Bardioc SDK transport. It runs when opened inside Bardioc, or standalone with a CLI dev session.",
     "stepsTitle": "Run standalone with a dev session:",
-    "step1": "Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env",
+    "step1": "Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env.",
     "step2": "Start the dev server:",
-    "detectedTitle": "Detected environment",
-    "insideHost": "Inside host iframe",
-    "devAuth": "Dev auth enabled",
+    "detectedTitle": "Detected Environment",
+    "insideHost": "Inside Host Iframe",
+    "devAuth": "Dev Auth Enabled",
     "yes": "yes",
     "no": "no",
     "retry": "Reload"
   },
   "overview": {
     "operator": "Operator",
-    "noOperator": "Operator unavailable",
+    "noOperator": "Operator Unavailable",
     "updated": "Updated {time}",
     "persistence": "Persisted to IndexedDB",
-    "notPersisted": "Preview — not persisted (open inside Bardioc OS to persist)",
+    "notPersisted": "Preview — not persisted (open inside Bardioc to persist)",
     "historyOne": "{count} snapshot in history",
     "historyOther": "{count} snapshots in history",
     "source": "Source"
   },
   "conditions": { "sunny": "Sunny", "cloudy": "Cloudy", "rainy": "Rainy" },
-  "source": { "graph": "Bardioc graph", "mock": "Simulated" },
+  "source": { "graph": "Bardioc Graph", "mock": "Simulated" },
   "metrics": {
     "oxygen": "Oxygen",
-    "temperature": "Surface temp",
+    "temperature": "Surface Temp",
     "humidity": "Humidity",
-    "windSpeed": "Wind speed",
+    "windSpeed": "Wind Speed",
     "vegetation": "Vegetation",
-    "oxygenHint": "Atmospheric mix",
-    "temperatureHint": "Ground level",
+    "oxygenHint": "Atmospheric Mix",
+    "temperatureHint": "Ground Level",
     "humidityHint": "Relative",
     "windSpeedHint": "Sustained",
-    "vegetationHint": "Surface cover"
+    "vegetationHint": "Surface Cover"
   },
-  "chart": { "title": "7-day outlook", "description": "Daylight hours by condition" },
+  "chart": { "title": "7-Day Outlook", "description": "Daylight hours by condition." },
   "stations": {
-    "title": "Monitoring stations",
+    "title": "Monitoring Stations",
     "description": "All stations reporting to this instance. Search, filter, or select one.",
-    "search": "Search stations…",
+    "search": "Search Stations…",
     "filter": "Condition",
     "colName": "Station",
     "colRegion": "Region",
@@ -88,16 +88,16 @@
     "colHumidity": "Humidity",
     "colVegetation": "Vegetation",
     "itemLabel": "stations",
-    "empty": "No stations match your filters",
+    "empty": "No stations match your filters.",
     "apply": "Apply",
     "clear": "Clear"
   },
   "explorer": {
     "title": "Graph Explorer",
     "description": "Run real Bardioc SDK transport requests. Without a session, each request falls back to simulated data so you can still explore the shape.",
-    "run": "Run request",
+    "run": "Run Request",
     "running": "Running…",
-    "empty": "Select a request and run it to see the response",
+    "empty": "Select a request and run it to see the response.",
     "live": "Live",
     "mock": "Simulated",
     "categoryGraph": "Graph",
@@ -106,35 +106,35 @@
     "durationMs": "{ms} ms"
   },
   "profile": {
-    "title": "Operator profile",
+    "title": "Operator Profile",
     "description": "Pulled live from the OS transport (os.profile).",
     "name": "Name",
-    "displayName": "Display name",
-    "firstName": "First name",
-    "lastName": "Last name",
+    "displayName": "Display Name",
+    "firstName": "First Name",
+    "lastName": "Last Name",
     "email": "Email",
     "id": "ID",
     "organization": "Organization",
     "units": "Units",
     "members": "Members",
-    "raw": "Raw response",
-    "errorTitle": "Could not load profile",
+    "raw": "Raw Response",
+    "errorTitle": "Could Not Load Profile",
     "errorHint": "The transport returned an error. Authorize a session, then reload.",
     "unknown": "Unknown"
   },
   "events": {
     "title": "Live Events",
     "description": "Live graph events streamed from the OS over SSE (permission \"events\").",
-    "emptyTitle": "Waiting for events",
+    "emptyTitle": "Waiting for Events",
     "emptyHost": "No graph events yet — activity will appear here as it happens.",
-    "emptyStandalone": "Open inside Bardioc OS (or a dev session) to receive live events."
+    "emptyStandalone": "Open inside Bardioc (or a dev session) to receive live events."
   },
   "notify": {
-    "synced": "Synced {count} stations",
-    "saved": "Saved to IndexedDB",
-    "stationSelected": "Active station: {name}",
-    "localeChanged": "Language switched to {locale}",
-    "queryOk": "Request ok ({ms} ms)",
-    "queryFailed": "Request failed — showing simulated data"
+    "synced": "Synced {count} stations.",
+    "saved": "Saved to IndexedDB.",
+    "stationSelected": "Active station: {name}.",
+    "localeChanged": "Language switched to {locale}.",
+    "queryOk": "Request ok ({ms} ms).",
+    "queryFailed": "Request failed — showing simulated data."
   }
 }

package/templates/vite/src/profile/profile-view.tsx

@@ -31,7 +31,7 @@ export function ProfileView() {
       <Empty
         icon={UserX}
         iconVariant="chip"
-        title={t('profile.errorTitle', { fallback: 'Could not load profile' })}
+        title={t('profile.errorTitle', { fallback: 'Could Not Load Profile' })}
         description={profile.error ?? t('profile.errorHint', { fallback: '' })}
       />
     );
@@ -44,7 +44,7 @@ export function ProfileView() {
     <div className="flex flex-col gap-4">
       <div>
         <h2 className="text-lg font-semibold">
-          {t('profile.title', { fallback: 'Operator profile' })}
+          {t('profile.title', { fallback: 'Operator Profile' })}
         </h2>
         <p className="text-muted-foreground text-xs">
           {t('profile.description', { fallback: '' })}
@@ -56,15 +56,15 @@ export function ProfileView() {
           <Avatar firstName={name} size="lg" />
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             <Row
-              label={t('profile.displayName', { fallback: 'Display name' })}
+              label={t('profile.displayName', { fallback: 'Display Name' })}
               value={asString(data.display_name, unknown)}
             />
             <Row
-              label={t('profile.firstName', { fallback: 'First name' })}
+              label={t('profile.firstName', { fallback: 'First Name' })}
               value={asString(data.first_name, unknown)}
             />
             <Row
-              label={t('profile.lastName', { fallback: 'Last name' })}
+              label={t('profile.lastName', { fallback: 'Last Name' })}
               value={asString(data.last_name, unknown)}
             />
           </div>

package/templates/vite/src/shell/about-dialog.tsx

@@ -81,7 +81,7 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
       modal
       showCloseOnHeader
       width={440}
-      title={t('about.title', { fallback: 'About this app' })}
+      title={t('about.title', { fallback: 'About This App' })}
     >
       <div className="flex flex-col items-center gap-4 px-2 pb-2">
         <div className="flex flex-col items-center gap-2 py-2">
@@ -93,7 +93,7 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
 
         {failed ? (
           <p className="text-destructive text-sm">
-            {t('about.error', { fallback: 'Could not read app-manifest.json' })}
+            {t('about.error', { fallback: 'Could not read app-manifest.json.' })}
           </p>
         ) : (
           <div className="w-full">
@@ -121,7 +121,7 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
         )}
 
         <p className="text-muted-foreground text-center text-xs">
-          {t('about.source', { fallback: 'Read live from public/app-manifest.json' })}
+          {t('about.source', { fallback: 'Read live from public/app-manifest.json.' })}
         </p>
       </div>
     </Dialog>

package/templates/vite/src/shell/app-shell.tsx

@@ -2,11 +2,11 @@ import type { SdkMenuRoot } from '@bardioc/app-sdk';
 import { useCommandMenu, type AppCommand } from '@bardioc/app-sdk/react';
 import {
   BardiocLogoIcon,
+  Page,
   SidebarBasic,
   SidebarContainedProvider,
   Toaster,
 } from '@bardioc/ui/components';
-import { ScrollArea } from '@bardioc/ui/shadcn';
 import {
   Activity,
   LayoutDashboard,
@@ -68,7 +68,7 @@ export function AppShell() {
       return;
     }
     notify(
-      t('notify.localeChanged', { fallback: 'Language switched to {locale}', params: { locale } }),
+      t('notify.localeChanged', { fallback: 'Language switched to {locale}.', params: { locale } }),
       'info'
     );
   }, [locale, notify, t]);
@@ -86,7 +86,7 @@ export function AppShell() {
     () => [
       {
         id: 'app.about',
-        title: t('menu.about', { fallback: 'About this app' }),
+        title: t('menu.about', { fallback: 'About This App' }),
         handler: () => setAboutOpen(true),
       },
       ...NAV.map(entry => ({
@@ -121,6 +121,9 @@ export function AppShell() {
 
   useCommandMenu(commands, menu);
 
+  const activeNav = NAV.find(entry => entry.id === view);
+  const pageTitle = activeNav ? t(activeNav.labelKey, { fallback: activeNav.id }) : undefined;
+
   const header = (
     <div className="flex items-center gap-2 px-2 py-1">
       <BardiocLogoIcon className="size-5" />
@@ -132,7 +135,7 @@ export function AppShell() {
 
   return (
     <SidebarContainedProvider defaultCollapsed={false}>
-      <div className="bg-background text-foreground flex h-full min-h-0">
+      <div className="bg-background text-foreground @container/app flex h-full min-h-0">
         <SidebarBasic
           header={header}
           rail={false}
@@ -144,14 +147,15 @@ export function AppShell() {
           }}
           className="border-r"
         />
-        <main className="flex min-w-0 flex-1 flex-col">
-          <Header />
-          <ScrollArea className="min-h-0 flex-1">
-            <div className="p-4">
-              <ViewContent view={view} />
-            </div>
-          </ScrollArea>
-        </main>
+        <Page
+          title={pageTitle}
+          actions={<Header />}
+          actionsClassName="gap-2"
+          sticky
+          className="min-w-0"
+        >
+          <ViewContent view={view} />
+        </Page>
       </div>
       <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
       <Toaster position="bottom-right" />