ui/ux improvement

src/features/nearle-admin/pages/DispatchPage.tsx

@@ -3,6 +3,7 @@ import { HStack } from '@astryxdesign/core/HStack';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
 import { Bike, Clock } from 'lucide-react';
+import { Tab, TabBar } from '@/components/TabBar';
 import { PageHeader } from '@/components/PageHeader';
 import { useAllPartners } from '@/queries/hooks';
 import { DispatchBoard } from '@/features/store-admin/pages/DispatchPage';
@@ -90,36 +91,29 @@ export function NearleDispatchPage() {
           </HStack>
         }
         tabs={
-          /* The store board's own tab styling — `.sbt`, defined in
-             `dispatch.css`, which this page already loads through
-             `DispatchBoard`.
+          /* The console's segmented control, the same one the store board and
+             every other page uses.
 
-             These were written against a `.mode-tab` class that exists in no
-             stylesheet, so they rendered as bare browser buttons directly above
-             a row of properly styled ones. Nothing catches that: the markup is
-             valid, the class is just never matched. */
-          <div className="nearle-view-tabs">
-            <button
-              type="button"
-              className={view === 'work' ? 'sbt active' : 'sbt'}
+             These borrowed `.sbt` from `dispatch.css` — the store board's own
+             tab styling, loaded here through `DispatchBoard`. Before that they
+             were written against a `.mode-tab` class that exists in no
+             stylesheet at all, so they rendered as bare browser buttons above a
+             row of styled ones. Nothing catches that: the markup is valid, the
+             class is just never matched. Both problems end the same way. */
+          <TabBar aria-label="Dispatch views">
+            <Tab
+              label="The work"
+              icon={<Bike size={14} />}
+              isActive={view === 'work'}
               onClick={() => setView('work')}
-            >
-              <span className="sbt-icon">
-                <Bike size={15} />
-              </span>
-              <span>The work</span>
-            </button>
-            <button
-              type="button"
-              className={view === 'shifts' ? 'sbt active' : 'sbt'}
+            />
+            <Tab
+              label="Shifts"
+              icon={<Clock size={14} />}
+              isActive={view === 'shifts'}
               onClick={() => setView('shifts')}
-            >
-              <span className="sbt-icon">
-                <Clock size={15} />
-              </span>
-              <span>Shifts</span>
-            </button>
-          </div>
+            />
+          </TabBar>
         }
       />
 

src/features/nearle-admin/pages/PartnersPage.tsx

@@ -318,7 +318,9 @@ function FilterTab({
         alignItems: 'center',
         gap: 6,
         padding: '5px 12px',
-        borderRadius: 999,
+        /* Matches the search box and the tab track it sits beside — see
+           `--radius-element` in `theme/nearle.ts`. */
+        borderRadius: 'var(--card-radius-sm, 10px)',
         border: `1px solid ${isActive ? 'var(--color-brand, #662582)' : 'var(--color-line, #e0e4ea)'}`,
         background: isActive ? 'var(--color-brand-tint, #f4eef8)' : '#ffffff',
         color: isActive ? 'var(--color-brand, #662582)' : 'var(--color-ink-2, #414b5a)',

src/features/nearle-admin/pages/fleet.css

@@ -279,16 +279,15 @@
   margin-top: 2px;
 }
 
-/* ── The dispatch page's two view tabs ───────────────────────────────────── */
+/* ── The dispatch page's two view tabs ─────────────────────────────────────
 
-/* The buttons themselves are `.sbt` from the store board's `dispatch.css`, so
-   the platform's tabs and the shops' tabs are the same control rather than two
-   that happen to look alike. Only the row they sit in belongs here: the store
-   board wraps its tabs in `.strat-row`, a bordered bar that also carries an ops
-   cluster on the right, and there is nothing to put on the right of these two. */
-.nearle-view-tabs {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  flex-wrap: wrap;
-}
+   `.nearle-view-tabs` was the flex row that held them. Both the row and the
+   buttons are gone: the page renders `components/TabBar`, which is its own
+   track.
+
+   The intent behind the old comment here was right — it borrowed `.sbt` from
+   the store board's `dispatch.css` so "the platform's tabs and the shops' tabs
+   are the same control rather than two that happen to look alike". It just
+   reached across a feature boundary to get there, and `.sbt` was itself one of
+   seven tab treatments. Both boards import the same component now, which is
+   what that comment was trying to achieve.                                 */