From 2d7395ba6473dd8f6394bc6d3b3716c946479cf0 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 04:34:02 +0100
Subject: [PATCH] feat: add top tab bar to Instance settings panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renders tab pills (General, Streaming, Storage, Users) at the
top of the content area, matching Discord's Family Center pattern.
Works alongside the sidebar sub-links — both navigate the same tabs.
---
 .../modals/settingsPanels/InstancePanel.tsx      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx b/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
index 9de17238..f5aa479f 100644
--- a/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
+++ b/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
@@ -34,8 +34,24 @@ export function InstancePanel() {
     fetchStreamingLimits();
   }, [fetchInstanceSettings, fetchStreamingLimits]);
 
+  const tabPillClass = (t: SubTab) =>
+    `px-3 py-1.5 text-sm rounded-md transition-colors ${
+      subTab === t
+        ? 'text-txt-primary font-medium border-b-2 border-accent-primary'
+        : 'text-txt-tertiary hover:text-txt-secondary'
+    }`;
+
   return (
     <div className="space-y-4">
+      {/* Top tab bar */}
+      <div className="flex gap-1 border-b border-white/[0.04] pb-0">
+        {SECTIONS.map((s) => (
+          <button key={s.id} onClick={() => setSubTab(s.id as SubTab)} className={tabPillClass(s.id as SubTab)}>
+            {s.label}
+          </button>
+        ))}
+      </div>
+
       {subTab === 'general' && <GeneralPanel />}
       {subTab === 'streaming' && <StreamingPanel />}
       {subTab === 'storage' && <StoragePanel />}