refactor(ui): fold Settings + Stats tabs into shared Tabs (R13 S2c step 6)

Tabs gains an `orientation` prop (+ optional per-tab `icon`/`testId`) so the
two hand-rolled NAV tab-sets that duplicated its active treatment now use it:
- SettingsPanel vertical rail (appearance/notifications/account) -> vertical
  Tabs with icons; settings-tab-* testIds preserved
- Stats overview/system tabs -> Tabs (rounded-full+border -> the rounded-lg
  tab canonical, per the agreed tab shape)

The underline ChannelPage tabs and the icon NavSidebar rail are intentionally
left as distinct idioms. Self-E2E'd: settings rail switches + persists with
icons, stats tabs toggle. gate green (tsc/eslint-0/vitest 136/knip/prettier).
Branch not merged.

frontend/src/components/Tabs.tsx

@@ -1,13 +1,17 @@
+import { type LucideIcon } from "lucide-react";
 import { useAccountPersistedState } from "../lib/storage";
 
-// Reusable horizontal pill tab-rail for in-page sub-navigation (Configuration, Users & roles…).
-// The active tab is persisted to localStorage so a reload (F5) keeps the user where they were,
-// per the app's "persist UI state across reload" convention.
+// Reusable pill tab-rail for in-page sub-navigation (Configuration, Users & roles, the Settings
+// sections, the Stats overview/system split…). Horizontal by default; `orientation="vertical"` gives
+// the Settings-style side rail (full-width, left-aligned, icon + label). The active tab is persisted
+// to localStorage so a reload keeps the user where they were.
 
 export interface TabDef {
   id: string;
   label: string;
   badge?: number; // optional count pill (e.g. pending requests); hidden when 0/undefined
+  icon?: LucideIcon; // optional leading icon (the vertical settings rail)
+  testId?: string; // optional data-testid, to preserve existing e2e hooks
 }
 
 /** Persisted active-tab state, scoped to the current account (so one account's last tab doesn't
@@ -18,28 +22,38 @@ export default function Tabs({
   tabs,
   active,
   onChange,
-  className = "flex flex-wrap gap-1 mb-4",
+  orientation = "horizontal",
+  className,
 }: {
   tabs: TabDef[];
   active: string;
   onChange: (id: string) => void;
-  // Override the row wrapper — e.g. the channel manager embeds the rail in a justify-between header
-  // and drops the default bottom margin. Omit for the standalone-row default.
+  // "vertical" gives the Settings-style side rail; "horizontal" (default) is the standard row.
+  orientation?: "horizontal" | "vertical";
+  // Override the row/rail wrapper — e.g. the channel manager embeds the rail in a justify-between
+  // header, or the settings rail adds a width + right border. Omit for the orientation default.
   className?: string;
 }) {
+  const vertical = orientation === "vertical";
+  const wrapCls = className ?? (vertical ? "flex flex-col gap-1" : "flex flex-wrap gap-1 mb-4");
   return (
-    <div className={className}>
+    <div className={wrapCls}>
       {tabs.map((tb) => {
         const on = tb.id === active;
+        const Icon = tb.icon;
         return (
           <button
             key={tb.id}
+            data-testid={tb.testId}
             onClick={() => onChange(tb.id)}
             aria-pressed={on}
-            className={`pill inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm ${
-              on ? "font-medium shadow-md shadow-accent/20" : "hover:bg-card/60"
-            }`}
+            className={`pill items-center rounded-lg px-3 text-sm ${
+              vertical
+                ? "flex w-full justify-start gap-2 py-2 text-left"
+                : "inline-flex gap-1.5 py-1.5"
+            } ${on ? "font-medium shadow-md shadow-accent/20" : "hover:bg-card/60"}`}
           >
+            {Icon && <Icon className="h-4 w-4 shrink-0" />}
             {tb.label}
             {tb.badge != null && tb.badge > 0 && (
               <span