@bardioc/create-bardioc-app 0.6.1 → 0.7.1

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

@@ -1,5 +1,5 @@
-import { Avatar, Card, Empty } from '@bardioc/ui/components';
-import { UserX } from 'lucide-react';
+import { Avatar, Card, Empty, SkeletonWrapper } from '@bardioc/ui/components';
+import { UserRound, UserX } from 'lucide-react';
 import { useDashboard } from '../dashboard-provider';
 import { useTranslation } from '../i18n';
 import { operatorLabel } from './use-profile';
@@ -22,17 +22,31 @@ export function ProfileView() {
   const { profile } = useDashboard();
   const unknown = t('profile.unknown', { fallback: 'Unknown' });
 
-  if (profile.loading) {
-    return <p className="text-muted-foreground p-6 text-sm">…</p>;
+  if (!profile.loading && !profile.error && !profile.profile) {
+    return (
+      <Empty
+        icon={UserRound}
+        iconVariant="chip"
+        title={t('profile.emptyTitle', { fallback: 'No Profile Data' })}
+        description={t('profile.emptyDescription', {
+          fallback: 'The OS returned no profile for this session.',
+        })}
+      />
+    );
   }
 
-  if (profile.error || !profile.profile) {
+  if (!profile.loading && profile.error) {
     return (
       <Empty
         icon={UserX}
         iconVariant="chip"
         title={t('profile.errorTitle', { fallback: 'Could Not Load Profile' })}
-        description={profile.error ?? t('profile.errorHint', { fallback: '' })}
+        description={
+          profile.error ??
+          t('profile.errorHint', {
+            fallback: 'The transport returned an error. Authorize a session, then reload.',
+          })
+        }
       />
     );
   }
@@ -42,27 +56,31 @@ export function ProfileView() {
 
   return (
     <div className="flex flex-col gap-4">
-      <p className="text-muted-foreground text-xs">{t('profile.description', { fallback: '' })}</p>
+      <p className="text-muted-foreground text-xs">
+        {t('profile.description', { fallback: 'Pulled live from the OS transport (os.profile).' })}
+      </p>
 
-      <Card>
-        <div className="flex items-center gap-4">
-          <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' })}
-              value={asString(data.display_name, unknown)}
-            />
-            <Row
-              label={t('profile.firstName', { fallback: 'First Name' })}
-              value={asString(data.first_name, unknown)}
-            />
-            <Row
-              label={t('profile.lastName', { fallback: 'Last Name' })}
-              value={asString(data.last_name, unknown)}
-            />
+      <SkeletonWrapper loading={profile.loading}>
+        <Card>
+          <div className="flex items-center gap-4">
+            <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' })}
+                value={asString(data?.display_name, unknown)}
+              />
+              <Row
+                label={t('profile.firstName', { fallback: 'First Name' })}
+                value={asString(data?.first_name, unknown)}
+              />
+              <Row
+                label={t('profile.lastName', { fallback: 'Last Name' })}
+                value={asString(data?.last_name, unknown)}
+              />
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
+      </SkeletonWrapper>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { BardiocLogoIcon, Dialog } from '@bardioc/ui/components';
+import { Alert, BardiocLogoIcon, Dialog } from '@bardioc/ui/components';
 import { HashIcon, PackageIcon, TagIcon } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 import { useTranslation } from '../i18n';
@@ -34,7 +34,7 @@ function AboutRow({
   value,
 }: Readonly<{ icon: ReactNode; label: string; value: string }>) {
   return (
-    <div className="flex items-center justify-between gap-4 rounded-lg p-2">
+    <div className="flex items-center justify-between gap-4 p-2">
       <div className="text-foreground flex items-center gap-2">
         {icon}
         <span className="text-xs font-semibold">{label}</span>
@@ -91,9 +91,10 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
         </div>
 
         {failed ? (
-          <p className="text-destructive text-sm">
-            {t('about.error', { fallback: 'Could not read app-manifest.json.' })}
-          </p>
+          <Alert
+            variant="destructive"
+            description={t('about.error', { fallback: 'Could not read app-manifest.json.' })}
+          />
         ) : (
           <div className="w-full">
             <AboutRow

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

@@ -1,12 +1,14 @@
 import type { MenuRoot } from '@bardioc/app-sdk';
 import { useCommandMenu, type AppCommand } from '@bardioc/app-sdk/react';
 import {
-  BardiocLogoIcon,
   Page,
   SidebarBasic,
   SidebarContainedProvider,
+  SidebarContainedTrigger,
+  SidebarSearch,
   Toaster,
 } from '@bardioc/ui/components';
+import { useFuzzySearch } from '@bardioc/ui/hooks';
 import {
   Activity,
   LayoutDashboard,
@@ -16,16 +18,13 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { OverviewView } from '../climate/overview-view';
-import { StationsView } from '../climate/stations-view';
 import type { ViewId } from '../climate/types';
-import { LiveEventsView } from '../events/live-events-view';
-import { ExplorerView } from '../graph/explorer-view';
 import { useI18n, useTranslation } from '../i18n';
-import { ProfileView } from '../profile/profile-view';
 import { useAppNotify } from '../use-app-notify';
 import { AboutDialog } from './about-dialog';
+import { DebugMenu } from './debug-menu';
 import { Header } from './header';
+import { ViewContent } from './view-content';
 
 // `icon` is the sidebar's React component; `iconName` is the matching lucide export name the
 // OS resolves for the top-menu entry (host calls resolveLucideIcon on the string). `titleKey` is
@@ -74,47 +73,39 @@ const NAV: Array<{
   },
 ];
 
-function ViewContent({ view }: Readonly<{ view: ViewId }>) {
-  switch (view) {
-    case 'overview':
-      return <OverviewView />;
-    case 'stations':
-      return <StationsView />;
-    case 'explorer':
-      return <ExplorerView />;
-    case 'events':
-      return <LiveEventsView />;
-    case 'profile':
-      return <ProfileView />;
-    default:
-      return null;
-  }
-}
-
 export function AppShell() {
   const { t } = useTranslation();
   const { locale } = useI18n();
   const notify = useAppNotify();
   const [view, setView] = useState<ViewId>('overview');
   const [aboutOpen, setAboutOpen] = useState(false);
+  const [navQuery, setNavQuery] = useState('');
 
-  const firstLocale = useRef(true);
+  // Compared with the last locale, not skipped once: `t` changes identity when the catalog loads,
+  // which re-runs this effect without the language changing.
+  const shownLocale = useRef(locale);
   useEffect(() => {
-    if (firstLocale.current) {
-      firstLocale.current = false;
-      return;
-    }
+    if (shownLocale.current === locale) return;
+    shownLocale.current = locale;
     notify(
       t('notify.localeChanged', { fallback: 'Language switched to {locale}.', params: { locale } }),
       'info'
     );
   }, [locale, notify, t]);
 
-  const items = NAV.map(entry => ({
-    name: entry.id,
-    label: t(entry.labelKey, { fallback: entry.id }),
-    icon: entry.icon,
-  }));
+  const items = useMemo(
+    () =>
+      NAV.map(entry => ({
+        name: entry.id,
+        label: t(entry.labelKey, { fallback: entry.id }),
+        icon: entry.icon,
+      })),
+    [t]
+  );
+  // The sidebar search filters the navigation here; an app with records to find can point the
+  // same field at them instead, as an app-wide search.
+  const visibleItems = useFuzzySearch(items, navQuery, { keys: ['label'] });
+  const searchPlaceholder = t('nav.search', { fallback: 'Search Views…' });
 
   // Mirror the section switcher into the OS top menu: each view is a checkable command, so the
   // active section can be changed from the host menu bar (next to About / Version) — not just
@@ -161,22 +152,30 @@ export function AppShell() {
   const activeNav = NAV.find(entry => entry.id === view);
   const pageTitle = activeNav ? t(activeNav.titleKey, { fallback: activeNav.id }) : undefined;
 
-  const header = (
-    <div className="flex items-center gap-2 px-2 py-1">
-      <BardiocLogoIcon className="size-5" />
-      <span className="truncate text-sm font-semibold">
-        {t('app.title', { fallback: 'Weather Dashboard' })}
-      </span>
-    </div>
-  );
-
   return (
     <SidebarContainedProvider defaultCollapsed={false}>
       <div className="bg-background text-foreground @container/app flex h-full min-h-0">
         <SidebarBasic
-          header={header}
+          // No logo or app name here: the OS window frame already shows both.
+          header={
+            <SidebarSearch
+              value={navQuery}
+              onChange={setNavQuery}
+              placeholder={searchPlaceholder}
+              collapsedLabel={searchPlaceholder}
+              shortcut={{ key: 'f' }}
+              size="sm"
+              showClearButton
+            />
+          }
+          footer={
+            <>
+              {import.meta.env.DEV && <DebugMenu />}
+              <SidebarContainedTrigger />
+            </>
+          }
           rail={false}
-          items={items}
+          items={visibleItems}
           selectedItem={view}
           onItemSelected={item => {
             if (!item) return;
@@ -190,8 +189,10 @@ export function AppShell() {
           actionsClassName="gap-2"
           sticky
           className="min-w-0"
+          // Grows the body to the page height, so a view can fill it (the explorer's panel does).
+          contentClassName="flex-1"
         >
-          <ViewContent view={view} />
+          <ViewContent view={view} title={pageTitle} />
         </Page>
       </div>
       <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />

package/templates/vite/src/shell/debug-menu.tsx

@@ -0,0 +1,86 @@
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  useContainedSidebarState,
+} from '@bardioc/ui/components';
+import { useDebugMode } from '@bardioc/ui/lib';
+import * as Shadcn from '@bardioc/ui/shadcn';
+import { Bug } from 'lucide-react';
+import { useTranslation } from '../i18n';
+import { PREVIEW_STATES, usePreviewState, type PreviewState } from '../preview-state';
+
+const PREVIEW_STATE_FALLBACKS: Record<PreviewState, string> = {
+  live: 'Live',
+  mock: 'Mock Data',
+  loading: 'Loading',
+  empty: 'Empty',
+  error: 'Error',
+};
+
+// Sidebar footer entry for development: the same debug flag the OS dock toggles (it adds debug
+// rows to error states), plus a preview state: Loading, Empty or Error for every view, or Mock Data
+// for views that otherwise show only live data.
+export function DebugMenu() {
+  const { t } = useTranslation();
+  const { isCollapsed } = useContainedSidebarState();
+  const [debugMode, setDebugMode] = useDebugMode();
+  const { previewState, setPreviewState } = usePreviewState();
+  const label = t('debug.menu', { fallback: 'Debug' });
+  const stateLabel = (state: PreviewState) =>
+    t(`debug.state.${state}`, { fallback: PREVIEW_STATE_FALLBACKS[state] });
+  const previewing = previewState !== 'live';
+  // A forced state marks the entry active and names the state in a badge; collapsed hides menu
+  // badges, so the tooltip names it there.
+  const collapsedLabel = previewing
+    ? t('debug.menuWithState', {
+        fallback: 'Debug: {state}',
+        params: { state: stateLabel(previewState) },
+      })
+    : label;
+
+  return (
+    <Shadcn.SidebarMenu>
+      <Shadcn.SidebarMenuItem>
+        <Shadcn.DropdownMenu>
+          <Shadcn.DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              isActive={previewing}
+              tooltip={{ hidden: !isCollapsed, children: collapsedLabel }}
+              aria-label={isCollapsed ? collapsedLabel : undefined}
+            >
+              <Bug aria-hidden="true" />
+              {!isCollapsed && <span>{label}</span>}
+            </SidebarMenuButton>
+          </Shadcn.DropdownMenuTrigger>
+          <Shadcn.DropdownMenuContent side="right" align="end">
+            <DropdownMenuCheckboxItem
+              checked={debugMode}
+              onCheckedChange={checked => setDebugMode(checked === true)}
+            >
+              {t('debug.showInfo', { fallback: 'Show Debug Info' })}
+            </DropdownMenuCheckboxItem>
+            <Shadcn.DropdownMenuSeparator />
+            <DropdownMenuLabel>
+              {t('debug.previewState', { fallback: 'Preview State' })}
+            </DropdownMenuLabel>
+            {PREVIEW_STATES.map(state => (
+              <DropdownMenuItem
+                key={state}
+                variant="check-icon"
+                reserveCheckSpace
+                checked={previewState === state}
+                onSelect={() => setPreviewState(state)}
+              >
+                {stateLabel(state)}
+              </DropdownMenuItem>
+            ))}
+          </Shadcn.DropdownMenuContent>
+        </Shadcn.DropdownMenu>
+        {previewing && <SidebarMenuBadge>{stateLabel(previewState)}</SidebarMenuBadge>}
+      </Shadcn.SidebarMenuItem>
+    </Shadcn.SidebarMenu>
+  );
+}

package/templates/vite/src/shell/header.tsx

@@ -12,7 +12,7 @@ export function Header() {
 
   return (
     <>
-      {state?.stations && (
+      {state && state.stations.length > 0 && (
         <LocationSelect
           stations={state.stations}
           value={state.activeStationId}
@@ -23,14 +23,16 @@ export function Header() {
         useI18n={useI18n}
         supportedLocales={[...SUPPORTED_LOCALES]}
         flags={{ en: 'EN', de: 'DE' }}
+        size="icon-sm"
       />
       <Button
-        className="gap-2"
         size="sm"
         onClick={() => void refresh()}
-        disabled={syncing || !state}
+        disabled={!state}
+        isLoading={syncing}
+        stableWidth
       >
-        <RefreshCw className={`size-4 ${syncing ? 'animate-spin' : ''}`} />
+        <RefreshCw />
         {t('header.sync', { fallback: 'Sync' })}
       </Button>
     </>

package/templates/vite/src/shell/view-content.tsx

@@ -0,0 +1,69 @@
+import { Button, Empty, SkeletonWrapper } from '@bardioc/ui/components';
+import { TriangleAlert } from 'lucide-react';
+import { OverviewView } from '../climate/overview-view';
+import { StationsView } from '../climate/stations-view';
+import type { ViewId } from '../climate/types';
+import { LiveEventsView } from '../events/live-events-view';
+import { ExplorerView } from '../graph/explorer-view';
+import { useTranslation } from '../i18n';
+import { usePreviewState } from '../preview-state';
+import { ProfileView } from '../profile/profile-view';
+
+function View({ view }: Readonly<{ view: ViewId }>) {
+  switch (view) {
+    case 'overview':
+      return <OverviewView />;
+    case 'stations':
+      return <StationsView />;
+    case 'explorer':
+      return <ExplorerView />;
+    case 'events':
+      return <LiveEventsView />;
+    case 'profile':
+      return <ProfileView />;
+    default:
+      return null;
+  }
+}
+
+// The active view, or the state the debug menu previews: Loading skeletonizes the view's own
+// layout, Error shows the shared error state (with debug rows while "Show Debug Info" is on),
+// and Empty reaches the views through their data (see `DashboardProvider`).
+export function ViewContent({ view, title }: Readonly<{ view: ViewId; title?: string }>) {
+  const { t } = useTranslation();
+  const { previewState, setPreviewState } = usePreviewState();
+
+  switch (previewState) {
+    case 'loading':
+      return (
+        <SkeletonWrapper loading>
+          <View view={view} />
+        </SkeletonWrapper>
+      );
+    case 'error':
+      return (
+        <Empty
+          icon={TriangleAlert}
+          iconVariant="chip"
+          title={t('preview.errorTitle', { fallback: 'Could Not Load Data' })}
+          description={t('preview.errorDescription', {
+            fallback: 'A simulated error from the preview state in the debug menu.',
+          })}
+          debugRows={[
+            { label: t('preview.debugView', { fallback: 'View' }), value: title ?? view },
+            {
+              label: t('debug.previewState', { fallback: 'Preview State' }),
+              value: t('debug.state.error', { fallback: 'Error' }),
+            },
+          ]}
+          actions={
+            <Button size="sm" onClick={() => setPreviewState('live')}>
+              {t('preview.retry', { fallback: 'Retry' })}
+            </Button>
+          }
+        />
+      );
+    default:
+      return <View view={view} />;
+  }
+}

package/templates/vue/_gitignore

@@ -5,3 +5,9 @@ node_modules
 *.zip
 .linked/
 .DS_Store
+
+# Generated by `npm run compliance:all`, shipped inside the bundle.
+public/sbom.cdx.json
+public/license-compliance.json
+public/security-audit.json
+public/compliance-summary.json

package/templates/vue/package.json

@@ -6,7 +6,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist",
-    "bundle": "vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
+    "bundle": "npm run compliance:all && vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
+    "sbom": "cyclonedx-npm --omit dev --output-format json --output-reproducible --output-file public/sbom.cdx.json",
+    "compliance": "node scripts/compliance.mjs public",
+    "audit:security": "node scripts/audit.mjs public",
+    "compliance:all": "npm run sbom && npm run compliance && npm run audit:security && node scripts/compliance-summary.mjs public",
     "preview": "vite preview",
     "check-types": "vue-tsc --noEmit",
     "lint": "eslint .",
@@ -18,16 +22,18 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^1.0.1",
+    "@bardioc/app-sdk": "^1.0.3",
     "vue": "^3.5.16"
   },
   "devDependencies": {
     "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
+    "@cyclonedx/cyclonedx-npm": "^6.0.1",
     "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^22.19.19",
     "@vitejs/plugin-vue": "^6.0.8",
     "eslint": "^10.0.0",
+    "license-checker-rseidelsohn": "^5.0.1",
     "prettier": "^3.6.2",
     "tailwindcss": "4.3.0",
     "typescript": "6.0.3",