refactor: extract SettingsTabBar as reusable infrastructure component

Replace one-off inline tab bar in InstancePanel with a reusable SettingsTabBar that reads from SettingsSectionsContext. Any panel using tab mode can drop it in with zero configuration. Polish: proper underline indicator, consistent gap spacing, negative top margin to sit flush with content area padding.
2026-03-22 04:42:46 +01:00
parent 2d7395ba64
commit 7ff8614127
2 changed files with 34 additions and 15 deletions
@@ -0,0 +1,32 @@
+import { useSettingsSectionsContext } from './SettingsSectionsContext';
+
+/**
+ * Reusable tab bar for settings panels in tab mode.
+ * Reads sections and activeSection from SettingsSectionsContext.
+ * Drop this into any panel that uses useSettingsSections with onNavigate.
+ */
+export function SettingsTabBar() {
+  const ctx = useSettingsSectionsContext();
+  if (!ctx || ctx.sections.length === 0) return null;
+
+  return (
+    <div className="flex gap-4 border-b border-white/[0.06] -mt-2 mb-4">
+      {ctx.sections.map((s) => (
+        <button
+          key={s.id}
+          onClick={() => ctx.scrollToSection(s.id)}
+          className={`pb-2.5 text-sm transition-colors relative ${
+            ctx.activeSection === s.id
+              ? 'text-txt-primary font-medium'
+              : 'text-txt-tertiary hover:text-txt-secondary'
+          }`}
+        >
+          {s.label}
+          {ctx.activeSection === s.id && (
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent-primary rounded-full" />
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}