From 46b54794ac026a2f9ec41cfed566a939b379fa2e Mon Sep 17 00:00:00 2001
From: jevb <jevb@telenet.be>
Date: Fri, 27 Mar 2026 14:51:38 +0100
Subject: [PATCH] feat: move invite button to unified header, hide duplicate
 channel-sidebar-header

---
 .../src/pages/main-page/SidebarArea.ts        | 33 +++++++++----------
 Client/tauri-client/src/styles/app.css        |  8 +++++
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/Client/tauri-client/src/pages/main-page/SidebarArea.ts b/Client/tauri-client/src/pages/main-page/SidebarArea.ts
index a0ee47db..347cebe8 100644
--- a/Client/tauri-client/src/pages/main-page/SidebarArea.ts
+++ b/Client/tauri-client/src/pages/main-page/SidebarArea.ts
@@ -119,6 +119,18 @@ export function createSidebarArea(opts: SidebarAreaOptions): SidebarAreaResult {
   serverInfoCol.appendChild(serverOnlineEl);
   serverHeader.appendChild(serverIcon);
   serverHeader.appendChild(serverInfoCol);
+
+  // Invite button in the server header (proper styled button)
+  const headerInviteCtrl = createInviteManagerController({ api, getRoot, getToast });
+  const headerInviteBtn = createElement("button", {
+    class: "sidebar-invite-btn",
+    title: "Invite people",
+    "data-testid": "invite-btn",
+  }, "Invite");
+  headerInviteBtn.addEventListener("click", () => { void headerInviteCtrl.open(); });
+  serverHeader.appendChild(headerInviteBtn);
+  unsubscribers.push(() => { headerInviteCtrl.cleanup(); });
+
   sidebarWrapper.appendChild(serverHeader);
 
   // Load per-server collapsed category state from localStorage
@@ -505,23 +517,10 @@ export function createSidebarArea(opts: SidebarAreaOptions): SidebarAreaResult {
       // the ChannelSidebar owns its own root element so we keep it nested.
       contentSlot.appendChild(innerSlot);
 
-      // Wire up the invite button into the channel sidebar header
-      const sidebarHeader = innerSlot.querySelector(".channel-sidebar-header");
-      if (sidebarHeader !== null) {
-        const inviteCtrl = createInviteManagerController({
-          api,
-          getRoot,
-          getToast,
-        });
-        const inviteBtn = createElement("button", {
-          class: "invite-btn",
-          title: "Invite",
-        }, "Invite");
-        inviteBtn.addEventListener("click", () => {
-          void inviteCtrl.open();
-        });
-        sidebarHeader.appendChild(inviteBtn);
-        inviteCleanup = () => { inviteCtrl.cleanup(); };
+      // Hide the redundant channel-sidebar-header (server name + invite are now in the unified header)
+      const oldSidebarHeader = innerSlot.querySelector(".channel-sidebar-header");
+      if (oldSidebarHeader !== null) {
+        (oldSidebarHeader as HTMLElement).style.display = "none";
       }
 
       // --- DM section (between channels and members) ---
diff --git a/Client/tauri-client/src/styles/app.css b/Client/tauri-client/src/styles/app.css
index 3d31fabe..36dfe072 100644
--- a/Client/tauri-client/src/styles/app.css
+++ b/Client/tauri-client/src/styles/app.css
@@ -29,6 +29,14 @@
 }
 .unified-sidebar-header .server-name { color: white; font-weight: 700; font-size: 13px; }
 .unified-sidebar-header .server-online { color: var(--text-micro); font-size: 9px; }
+.sidebar-invite-btn {
+  margin-left: auto; padding: 4px 10px; border-radius: var(--radius-sm);
+  background: var(--accent-primary, var(--accent)); color: white;
+  font-size: 11px; font-weight: 600; cursor: pointer;
+  transition: background var(--transition-fast), opacity var(--transition-fast);
+  flex-shrink: 0;
+}
+.sidebar-invite-btn:hover { opacity: 0.85; }
 .sidebar-divider { height: 1px; background: var(--border-glow, var(--border)); margin: 8px 12px; }
 
 /* ── Channel Sidebar ── */