ui improvement

src/features/store-user/ui.tsx

@@ -11,64 +11,8 @@ import { ImageOff } from 'lucide-react';
  * merchant pages already went through.
  */
 
-/** A page tab, as used in the Store Admin's PageHeader tab row. */
-export function TabButton({
-  label,
-  icon,
-  isActive,
-  onClick,
-  badge,
-}: {
-  label: string;
-  icon: ReactNode;
-  isActive: boolean;
-  onClick: () => void;
-  badge?: number;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-pressed={isActive}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 6,
-        height: 32,
-        padding: '0 12px',
-        borderRadius: 12,
-        border: 0,
-        background: isActive ? 'var(--color-brand-tint)' : 'transparent',
-        color: isActive ? 'var(--color-brand)' : 'var(--color-ink-3)',
-        fontSize: 13,
-        fontWeight: isActive ? 600 : 500,
-        cursor: 'pointer',
-        transition: 'background .2s, color .2s',
-      }}
-    >
-      {icon}
-      {label}
-      {badge ? (
-        <span
-          style={{
-            minWidth: 18,
-            height: 18,
-            padding: '0 5px',
-            borderRadius: 999,
-            background: 'var(--color-warning, #b7860b)',
-            color: '#fff',
-            fontSize: 11,
-            fontWeight: 700,
-            display: 'grid',
-            placeItems: 'center',
-          }}
-        >
-          {badge}
-        </span>
-      ) : null}
-    </button>
-  );
-}
+/* The sixth and last copy of `TabButton` lived here, exported for the Store
+   user pages. Every one of them now imports `components/TabBar`. */
 
 /** A header action drawn like the tabs, so the two rows read as one bar. */
 export function BarAction({