@bardioc/create-bardioc-app 0.7.0 → 0.7.1

package/templates/vite/src/climate/metrics-grid.tsx

@@ -18,5 +18,10 @@ export function MetricsGrid({ reading }: Readonly<MetricsGridProps>) {
     color: def.color,
   }));
 
-  return <GenericMetrics metrics={metrics} className="grid grid-cols-2 gap-3 md:grid-cols-5" />;
+  return (
+    <GenericMetrics
+      metrics={metrics}
+      className="grid grid-cols-1 gap-4 @sm/page:grid-cols-2 @3xl/page:grid-cols-5"
+    />
+  );
 }

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

@@ -1,4 +1,5 @@
-import { Database } from 'lucide-react';
+import { Empty } from '@bardioc/ui/components';
+import { CloudOff, Database } from 'lucide-react';
 import { useDashboard } from '../dashboard-provider';
 import { useTranslation } from '../i18n';
 import { ConditionsChart } from './conditions-chart';
@@ -9,7 +10,20 @@ export function OverviewView() {
   const { t } = useTranslation();
   const { state, activeStation, historyCount, persisted } = useDashboard();
 
-  if (!state || !activeStation) return null;
+  if (!state) return null;
+
+  if (!activeStation) {
+    return (
+      <Empty
+        icon={CloudOff}
+        iconVariant="chip"
+        title={t('overview.emptyTitle', { fallback: 'No Station Data' })}
+        description={t('overview.emptyDescription', {
+          fallback: 'Stations appear here once they report.',
+        })}
+      />
+    );
+  }
 
   const savedTime = new Date(state.updatedAt).toLocaleTimeString([], {
     hour: '2-digit',
@@ -33,16 +47,21 @@ export function OverviewView() {
             </span>
             <span>·</span>
             <span>
-              {t('overview.historyOther', {
-                fallback: '{count} snapshots in history',
-                params: { count: historyCount },
-              })}
+              {historyCount === 1
+                ? t('overview.historyOne', {
+                    fallback: '{count} snapshot in history',
+                    params: { count: historyCount },
+                  })
+                : t('overview.historyOther', {
+                    fallback: '{count} snapshots in history',
+                    params: { count: historyCount },
+                  })}
             </span>
           </>
         ) : (
           <span>
             {t('overview.notPersisted', {
-              fallback: 'Preview — not persisted (open inside Bardioc to persist)',
+              fallback: 'Preview — not persisted (open inside Bardioc to persist).',
             })}
           </span>
         )}

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

@@ -1,12 +1,16 @@
 import {
   BadgeStatus,
+  Button,
   CheckboxGroup,
   DataTable,
+  Empty,
   FilterDropdown,
   SortableColumnHeader,
+  StableWidthText,
   TruncatedCellText,
 } from '@bardioc/ui/components';
 import type { TReactTable } from '@bardioc/ui/types';
+import { MapPin, MapPinCheck, SearchX } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { useDashboard } from '../dashboard-provider';
 import { useTranslation } from '../i18n';
@@ -27,21 +31,34 @@ interface ConditionFilterProps {
 function ConditionFilter({ selected, onToggle }: Readonly<ConditionFilterProps>) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const label = t('stations.filter', { fallback: 'Condition' });
+
+  // The trigger says "Filter", or how many are active; what is filtered is the section title.
+  // StableWidthText reserves the widest label, so the button keeps its width as the count changes.
+  const buttonLabel = (
+    <StableWidthText
+      placeholder={t('common.filter.activeFilter', { count: 9, fallback: '9 Filters' })}
+    >
+      {selected.length > 0
+        ? t('common.filter.activeFilter', {
+            count: selected.length,
+            fallback: '{count} Filters',
+          })
+        : t('common.filter.filter', { fallback: 'Filter' })}
+    </StableWidthText>
+  );
 
   return (
     <FilterDropdown
       immediate
       open={open}
       setOpen={setOpen}
-      buttonLabel={selected.length ? `${label} (${selected.length})` : label}
+      buttonLabel={buttonLabel}
       sections={[
         {
           id: 'condition',
-          title: label,
+          title: t('stations.filter', { fallback: 'Condition' }),
           content: (
             <CheckboxGroup
-              className="gap-3 capitalize"
               items={CONDITIONS.map(condition => ({
                 id: condition,
                 label: t(`conditions.${condition}`, { fallback: condition }),
@@ -59,6 +76,7 @@ function ConditionFilter({ selected, onToggle }: Readonly<ConditionFilterProps>)
 export function StationsView() {
   const { t } = useTranslation();
   const { state, setActiveStation } = useDashboard();
+  const activeStationId = state?.activeStationId;
   const [conditions, setConditions] = useState<Condition[]>([]);
 
   const onToggle = (condition: Condition) =>
@@ -70,6 +88,7 @@ export function StationsView() {
     () => [
       {
         accessorKey: 'name',
+        size: 220,
         enableSorting: true,
         header: ({ column }) => (
           <SortableColumnHeader
@@ -81,11 +100,13 @@ export function StationsView() {
       },
       {
         accessorKey: 'region',
+        size: 160,
         header: () => t('stations.colRegion', { fallback: 'Region' }),
         cell: ({ row }) => <TruncatedCellText value={row.original.region} />,
       },
       {
         accessorKey: 'condition',
+        size: 130,
         header: () => t('stations.colCondition', { fallback: 'Condition' }),
         cell: ({ row }) => (
           <BadgeStatus variant={STATUS[row.original.condition]}>
@@ -95,21 +116,55 @@ export function StationsView() {
       },
       {
         id: 'temp',
+        size: 110,
         header: () => t('stations.colTemp', { fallback: 'Temp' }),
         cell: ({ row }) => `${row.original.reading.temperature}°C`,
       },
       {
         id: 'humidity',
+        size: 110,
         header: () => t('stations.colHumidity', { fallback: 'Humidity' }),
         cell: ({ row }) => `${row.original.reading.humidity}%`,
       },
       {
         id: 'vegetation',
+        size: 110,
         header: () => t('stations.colVegetation', { fallback: 'Vegetation' }),
         cell: ({ row }) => `${row.original.reading.vegetation}%`,
       },
+      {
+        // The trailing column reserved for row actions: fixed width, no header, never sorted or
+        // resized. The current station's button is filled and checked, so the selection shows here.
+        id: 'actions',
+        size: 40,
+        minSize: 40,
+        maxSize: 40,
+        enableSorting: false,
+        enableResizing: false,
+        header: '',
+        cell: ({ row }) => {
+          const isActive = row.original.id === activeStationId;
+          return (
+            <div className="flex justify-end">
+              <Button
+                variant={isActive ? 'default' : 'ghost'}
+                size="icon-xs"
+                title={
+                  isActive
+                    ? t('stations.current', { fallback: 'Current Station' })
+                    : t('stations.select', { fallback: 'Select Station' })
+                }
+                aria-pressed={isActive}
+                onClick={() => setActiveStation(row.original.id)}
+              >
+                {isActive ? <MapPinCheck aria-hidden="true" /> : <MapPin aria-hidden="true" />}
+              </Button>
+            </div>
+          );
+        },
+      },
     ],
-    [t]
+    [t, activeStationId, setActiveStation]
   );
 
   if (!state) return null;
@@ -120,10 +175,17 @@ export function StationsView() {
 
   return (
     <div className="flex flex-col gap-3">
-      <p className="text-muted-foreground text-xs">{t('stations.description', { fallback: '' })}</p>
+      <p className="text-muted-foreground text-xs">
+        {t('stations.description', {
+          fallback: 'All stations reporting to this instance. Search, filter, or select one.',
+        })}
+      </p>
       <DataTable
         boxed
         data={data}
+        itemsPerPage={10}
+        // Drag a header edge to resize; double-click it to reset the column to its `size`.
+        enableColumnResizing
         columns={columns}
         filterKey={['name', 'region']}
         showSearchBar
@@ -132,9 +194,11 @@ export function StationsView() {
         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.' })}
-          </p>
+          <Empty
+            icon={SearchX}
+            iconVariant="chip"
+            description={t('stations.empty', { fallback: 'No stations match your filters.' })}
+          />
         }
       />
     </div>

package/templates/vite/src/climate/types.ts

@@ -52,7 +52,7 @@ export const METRICS: MetricDef[] = [
     hintKey: 'metrics.oxygenHint',
     icon: Gauge,
     unit: '%',
-    color: 'text-yellow-500',
+    color: 'text-warning',
   },
   {
     key: 'temperature',
@@ -60,7 +60,7 @@ export const METRICS: MetricDef[] = [
     hintKey: 'metrics.temperatureHint',
     icon: Thermometer,
     unit: '°C',
-    color: 'text-red-500',
+    color: 'text-destructive',
   },
   {
     key: 'humidity',
@@ -68,7 +68,7 @@ export const METRICS: MetricDef[] = [
     hintKey: 'metrics.humidityHint',
     icon: Droplets,
     unit: '%',
-    color: 'text-blue-500',
+    color: 'text-info',
   },
   {
     key: 'windSpeed',
@@ -76,7 +76,7 @@ export const METRICS: MetricDef[] = [
     hintKey: 'metrics.windSpeedHint',
     icon: Wind,
     unit: 'km/h',
-    color: 'text-[var(--chart-4)]',
+    color: 'text-chart-4',
   },
   {
     key: 'vegetation',
@@ -84,7 +84,7 @@ export const METRICS: MetricDef[] = [
     hintKey: 'metrics.vegetationHint',
     icon: Leaf,
     unit: '%',
-    color: 'text-green-500',
+    color: 'text-success',
   },
 ];
 

package/templates/vite/src/dashboard-provider.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, type ReactNode } from 'react';
 import { useClimate } from './climate/use-climate';
+import { usePreviewState } from './preview-state';
 import { useProfile, type ProfileState } from './profile/use-profile';
 
 type ClimateApi = ReturnType<typeof useClimate>;
@@ -10,12 +11,21 @@ const DashboardContext = createContext<DashboardContextValue | null>(null);
 export function DashboardProvider({ children }: Readonly<{ children: ReactNode }>) {
   const climate = useClimate();
   const profile = useProfile();
+  const { previewState } = usePreviewState();
 
-  return (
-    <DashboardContext.Provider value={{ ...climate, profile }}>
-      {children}
-    </DashboardContext.Provider>
-  );
+  // The "Empty" preview hands every view the data an empty instance would return, so each one
+  // renders its own empty state rather than a generic placeholder.
+  const value: DashboardContextValue =
+    previewState === 'empty'
+      ? {
+          ...climate,
+          state: climate.state && { ...climate.state, stations: [] },
+          activeStation: null,
+          profile: { loading: false, profile: null, error: null },
+        }
+      : { ...climate, profile };
+
+  return <DashboardContext.Provider value={value}>{children}</DashboardContext.Provider>;
 }
 
 export function useDashboard(): DashboardContextValue {

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

@@ -1,19 +1,44 @@
 import type { GraphEvent } from '@bardioc/app-sdk';
 import { isInsideIframe } from '@bardioc/app-sdk/dev';
 import { useGraphEvents } from '@bardioc/app-sdk/react';
-import { Badge, Card, Empty } from '@bardioc/ui/components';
+import {
+  Badge,
+  Card,
+  Empty,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMeta,
+  ItemTitle,
+} from '@bardioc/ui/components';
 import { Activity } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from '../i18n';
+import { usePreviewState, type PreviewState } from '../preview-state';
+import { MOCK_GRAPH_EVENTS } from './mock-events';
 
 // OGIT types to watch. Broad `ogit/Timeseries` writes are the most common signal in a live
 // instance; swap these for the entity types your app cares about.
 const WATCHED_TYPES = ['ogit/Timeseries', 'ogit/Automation/Issue'];
 const MAX_EVENTS = 50;
 
+function eventsForPreview(previewState: PreviewState, events: GraphEvent[]): GraphEvent[] {
+  switch (previewState) {
+    case 'empty':
+      return [];
+    case 'mock':
+      return MOCK_GRAPH_EVENTS;
+    default:
+      return events;
+  }
+}
+
 export function LiveEventsView() {
   const { t } = useTranslation();
   const [events, setEvents] = useState<GraphEvent[]>([]);
+  const { previewState } = usePreviewState();
+  const shown = eventsForPreview(previewState, events);
 
   // Subscribes for the mounted lifetime; the host streams matching graph events over SSE.
   // Outside a valid session no events arrive and the empty state stays.
@@ -21,50 +46,55 @@ export function LiveEventsView() {
     setEvents(prev => [event, ...prev].slice(0, MAX_EVENTS));
   });
 
+  // The empty state sits on the page like every other one, and only the list gets a card: inside
+  // a card, `Empty`'s page background shows as a darker block in dark mode.
   return (
-    <div className="flex h-full min-w-0 flex-col gap-3">
+    <div className="flex min-w-0 flex-1 flex-col gap-3">
       <p className="text-muted-foreground text-xs">
         {t('events.description', {
           fallback: 'Live graph events streamed from the OS over SSE (permission "events").',
         })}
       </p>
 
-      <Card className="min-h-0 min-w-0 flex-1">
-        {events.length === 0 ? (
-          <Empty
-            icon={Activity}
-            iconVariant="chip"
-            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 (or run standalone with dev auth) to receive live events.',
-                  })
-            }
-          />
-        ) : (
-          <div className="flex min-h-0 flex-col gap-1 overflow-auto">
-            {events.map(event => (
-              <div
-                key={event.id}
-                className="border-border flex min-w-0 items-center gap-2 border-b py-1.5 font-mono text-xs last:border-b-0"
-              >
-                <Badge variant="info" numerical>
-                  {event.type}
-                </Badge>
-                <span className="text-muted-foreground shrink-0">
-                  {new Date(event.timestamp).toLocaleTimeString()}
-                </span>
-                <span className="truncate">{event.id}</span>
-              </div>
+      {shown.length === 0 ? (
+        <Empty
+          icon={Activity}
+          iconVariant="chip"
+          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 (or run standalone with dev auth) to receive live events.',
+                })
+          }
+        />
+      ) : (
+        <Card className="min-w-0">
+          <ItemGroup>
+            {shown.map(event => (
+              // A long id truncates (`flex-nowrap` + `ItemTitle truncate`); badge and time keep
+              // their width.
+              <Item key={`${event.id}-${event.timestamp}`} size="sm" className="flex-nowrap">
+                <ItemContent>
+                  <ItemTitle truncate className="font-mono">
+                    {event.id}
+                  </ItemTitle>
+                </ItemContent>
+                <ItemActions>
+                  <Badge variant="info" numerical>
+                    {event.type}
+                  </Badge>
+                </ItemActions>
+                <ItemMeta>{new Date(event.timestamp).toLocaleTimeString()}</ItemMeta>
+              </Item>
             ))}
-          </div>
-        )}
-      </Card>
+          </ItemGroup>
+        </Card>
+      )}
     </div>
   );
 }

package/templates/vite/src/events/mock-events.ts

@@ -0,0 +1,33 @@
+import type { GraphEvent } from '@bardioc/app-sdk';
+
+const NOW = Date.now();
+const SECOND = 1000;
+
+// Sample graph events for the debug menu's "Mock Data" preview: one of each event type, newest
+// first, with a few long ids so the row truncation can be checked without a live stream.
+export const MOCK_GRAPH_EVENTS: GraphEvent[] = [
+  {
+    id: 'cju16o7cg0001mz775fnoq66i_cln8olk8k014p0186lue9pl3l',
+    type: 'WRITE_TIMESERIES',
+    timestamp: NOW - 4 * SECOND,
+  },
+  { id: 'station-lagoon', type: 'UPDATE', timestamp: NOW - 11 * SECOND },
+  {
+    id: 'cju16o7cg0001mz775fnoq66i_cjnu3p5tf001bs934wf10n26n',
+    type: 'CREATE',
+    timestamp: NOW - 27 * SECOND,
+  },
+  { id: 'issue-2582', type: 'REPLACE', timestamp: NOW - 48 * SECOND },
+  {
+    id: 'cju16o7cg0001mz775fnoq66i_edge-station-monitors-sensor',
+    type: 'CONNECT',
+    timestamp: NOW - 73 * SECOND,
+  },
+  { id: 'station-aurora', type: 'UPDATE', timestamp: NOW - 2 * 60 * SECOND },
+  {
+    id: 'cju16o7cg0001mz775fnoq66i_edge-sensor-reports-station',
+    type: 'DISCONNECT',
+    timestamp: NOW - 3 * 60 * SECOND,
+  },
+  { id: 'sensor-obsolete-7', type: 'DELETE', timestamp: NOW - 5 * 60 * SECOND },
+];