From 503e483b8211affac63e7ee890f499e654336be6 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Thu, 19 Feb 2026 07:10:31 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Unified=20floating=20bottom=20panel=20?=
 =?UTF-8?q?=E2=80=94=20voice=20controls=20+=20user=20area=20in=20one=20car?=
 =?UTF-8?q?d?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructure VoiceControls and UserAreaPanel into a single fixed-positioned
floating card that spans both server and channel sidebars. Panel expands
when voice is connected and contracts to just user area when not.
---
 .../src/components/layout/ChannelSidebar.tsx  | 61 +++++++++----------
 .../src/components/voice/VoiceControls.tsx    | 45 +++++++-------
 2 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx
index 1d8ba612..172bbc21 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -74,15 +74,37 @@ export function ChannelSidebar() {
     navigate(`/channels/${currentServerId}/${channelId}`);
   };
 
+  // Floating bottom panel — shared between DM view and server view
+  const floatingPanel = user ? (
+    <div className="fixed bottom-2 left-2 z-30 w-[296px]">
+      <div className="bg-[#1a1b1e] rounded-lg shadow-[0_4px_20px_rgba(0,0,0,0.5)] ring-1 ring-white/[0.06]">
+        {/* Voice controls (expands when connected) */}
+        {currentVoiceChannelId && <VoiceControls />}
+        {/* Separator between voice and user area */}
+        {currentVoiceChannelId && <div className="mx-3 border-t border-white/[0.06]" />}
+        {/* User area (always visible) */}
+        <UserAreaPanel
+          user={user}
+          isMuted={isMuted}
+          isDeafened={isDeafened}
+          onMicToggle={handleMicToggle}
+          onDeafenToggle={handleDeafenToggle}
+          onSettingsClick={() => openModal('userSettings')}
+        />
+      </div>
+    </div>
+  ) : null;
+
   if (!server) {
     return (
+      <>
       <div className="w-60 bg-discord-bg-secondary flex flex-col flex-shrink-0 select-none">
         <div className="h-12 px-[10px] flex items-center shadow-header z-10">
           <button className="flex-1 bg-discord-bg-tertiary text-discord-text-muted text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-discord-bg-tertiary/80 transition-colors">
             Find or start a conversation
           </button>
         </div>
-        <div className="flex-1 overflow-y-auto pt-4 px-2 no-scrollbar">
+        <div className="flex-1 overflow-y-auto pt-4 px-2 pb-[140px] no-scrollbar">
           <div
             onClick={handleHomeClick}
             className={`flex items-center gap-3 px-2 h-[42px] rounded-[4px] cursor-pointer mb-[2px] transition-colors group ${
@@ -187,25 +209,14 @@ export function ChannelSidebar() {
           </div>
         </div>
 
-        {/* Voice controls — visible when in a call, even in DM view */}
-        {currentVoiceChannelId && <VoiceControls />}
-
-        {/* User area at bottom */}
-        {user && (
-          <UserAreaPanel
-            user={user}
-            isMuted={isMuted}
-            isDeafened={isDeafened}
-            onMicToggle={handleMicToggle}
-            onDeafenToggle={handleDeafenToggle}
-            onSettingsClick={() => openModal('userSettings')}
-          />
-        )}
       </div>
+      {floatingPanel}
+      </>
     );
   }
 
   return (
+    <>
     <div className="w-60 bg-discord-bg-secondary flex flex-col flex-shrink-0 select-none">
       {/* Server header */}
       <div className="h-12 flex items-center shadow-header z-10 group/header">
@@ -230,7 +241,7 @@ export function ChannelSidebar() {
       </div>
 
       {/* Channels */}
-      <div className="flex-1 overflow-y-auto pt-3 px-2 space-y-[21px] no-scrollbar">
+      <div className="flex-1 overflow-y-auto pt-3 px-2 pb-[140px] space-y-[21px] no-scrollbar">
         {/* Text Channels */}
         <div>
           <div className="flex items-center justify-between px-1 mb-1 group cursor-pointer">
@@ -321,21 +332,9 @@ export function ChannelSidebar() {
 
       </div>
 
-      {/* Voice controls — VoiceControls reads state and calls LiveKit SDK directly */}
-      {currentVoiceChannelId && <VoiceControls />}
-
-      {/* User area */}
-      {user && (
-        <UserAreaPanel
-          user={user}
-          isMuted={isMuted}
-          isDeafened={isDeafened}
-          onMicToggle={handleMicToggle}
-          onDeafenToggle={handleDeafenToggle}
-          onSettingsClick={() => openModal('userSettings')}
-        />
-      )}
     </div>
+    {floatingPanel}
+    </>
   );
 }
 
@@ -650,7 +649,7 @@ function UserAreaPanel({
       )}
 
       {/* User area bar */}
-      <div className="h-[52px] px-2 bg-discord-bg-user-area flex items-center select-none">
+      <div className="h-[52px] px-2 flex items-center select-none">
         {/* Avatar + name */}
         <div className="p-1 hover:bg-discord-modifier-hover rounded-[4px] flex items-center gap-2 flex-1 min-w-0 cursor-pointer transition-colors group">
           <Avatar src={user.avatar} name={user.displayName ?? user.username} size={32} status={user.status as any} user={user} />
diff --git a/packages/web/src/components/voice/VoiceControls.tsx b/packages/web/src/components/voice/VoiceControls.tsx
index cfeb1f03..64052b7b 100644
--- a/packages/web/src/components/voice/VoiceControls.tsx
+++ b/packages/web/src/components/voice/VoiceControls.tsx
@@ -4,6 +4,10 @@ import { useServerStore } from '../../stores/serverStore';
 import { getActiveRoom } from '../../hooks/useLiveKit';
 import { wsSend } from '../../hooks/useWebSocket';
 
+/**
+ * VoiceControls renders the voice status + button rows.
+ * It has NO wrapper/card styling — the parent provides the container.
+ */
 export function VoiceControls() {
   const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId);
   const isMuted = useVoiceStore((s) => s.isMuted);
@@ -41,21 +45,19 @@ export function VoiceControls() {
       try {
         const willDeafen = !isDeafened;
         if (willDeafen) {
-          // Deafen: mute mic + mute all remote audio
           await room.localParticipant.setMicrophoneEnabled(false);
           room.remoteParticipants.forEach((p) => {
             p.setVolume(0);
           });
-          if (!isMuted) toggleMic(); // Also mute mic when deafening
+          if (!isMuted) toggleMic();
         } else {
-          // Undeafen: restore remote audio, unmute mic
           const outputVolume = useVoiceStore.getState().outputVolume;
           const scaled = outputVolume / 100;
           room.remoteParticipants.forEach((p) => {
             p.setVolume(scaled);
           });
           await room.localParticipant.setMicrophoneEnabled(true);
-          if (isMuted) toggleMic(); // Unmute mic when undeafening
+          if (isMuted) toggleMic();
         }
       } catch (err) {
         console.error('[VoiceControls] Failed to toggle deafen:', err);
@@ -103,10 +105,13 @@ export function VoiceControls() {
       ? 'bg-discord-green/20'
       : 'bg-discord-yellow/20';
 
+  const btnBase = 'flex-1 h-[34px] flex items-center justify-center rounded-[4px] transition-colors';
+  const btnDefaultStyle = 'bg-[#111214] text-discord-text-muted hover:bg-[#1a1b1e] hover:text-discord-text-secondary';
+
   return (
-    <div className="bg-[#1a1b1e] border-t border-discord-bg-tertiary">
+    <>
       {/* Row 1: Signal icon + status text + disconnect */}
-      <div className="flex items-center gap-2 px-2 pt-[10px] pb-1">
+      <div className="flex items-center gap-2 px-3 pt-3 pb-1">
         <div className={`w-8 h-8 rounded-lg ${statusBgColor} flex items-center justify-center flex-shrink-0`}>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className={statusColor}>
             <path d="M1.5 21.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM3.14 15.75a.75.75 0 01-.09-1.06A8.46 8.46 0 0112 11a8.46 8.46 0 018.95 3.69.75.75 0 01-1.15.97A6.96 6.96 0 0012 12.5a6.96 6.96 0 00-7.8 3.16.75.75 0 01-1.06.09zM6.37 18.3a.75.75 0 01-.08-1.06A5.46 5.46 0 0112 15a5.46 5.46 0 015.71 2.24.75.75 0 01-1.14.97A3.96 3.96 0 0012 16.5a3.96 3.96 0 00-4.57 1.71.75.75 0 01-1.06.09z" />
@@ -141,14 +146,13 @@ export function VoiceControls() {
       </div>
 
       {/* Row 2: Mute, Deafen, Camera, Screen Share */}
-      <div className="flex items-center gap-1 px-2 pb-[10px] pt-1">
-        {/* Mute */}
+      <div className="flex items-center gap-1 px-3 pb-2 pt-1">
         <button
           onClick={handleMute}
-          className={`flex-1 h-[34px] flex items-center justify-center rounded-[4px] transition-colors ${
+          className={`${btnBase} ${
             isMuted || isDeafened
               ? 'bg-discord-red/20 text-discord-red hover:bg-discord-red/30'
-              : 'bg-discord-bg-tertiary text-discord-text-muted hover:bg-discord-bg-tertiary/80 hover:text-discord-text-secondary'
+              : btnDefaultStyle
           }`}
           title={isMuted ? 'Unmute' : 'Mute'}
         >
@@ -159,13 +163,12 @@ export function VoiceControls() {
           </svg>
         </button>
 
-        {/* Deafen */}
         <button
           onClick={handleDeafen}
-          className={`flex-1 h-[34px] flex items-center justify-center rounded-[4px] transition-colors ${
+          className={`${btnBase} ${
             isDeafened
               ? 'bg-discord-red/20 text-discord-red hover:bg-discord-red/30'
-              : 'bg-discord-bg-tertiary text-discord-text-muted hover:bg-discord-bg-tertiary/80 hover:text-discord-text-secondary'
+              : btnDefaultStyle
           }`}
           title={isDeafened ? 'Undeafen' : 'Deafen'}
         >
@@ -175,13 +178,12 @@ export function VoiceControls() {
           </svg>
         </button>
 
-        {/* Camera */}
         <button
           onClick={handleCamera}
-          className={`flex-1 h-[34px] flex items-center justify-center rounded-[4px] transition-colors ${
+          className={`${btnBase} ${
             isCameraOn
-              ? 'bg-discord-bg-tertiary text-discord-green hover:bg-discord-bg-tertiary/80'
-              : 'bg-discord-bg-tertiary text-discord-text-muted hover:bg-discord-bg-tertiary/80 hover:text-discord-text-secondary'
+              ? 'bg-[#111214] text-discord-green hover:bg-[#1a1b1e]'
+              : btnDefaultStyle
           }`}
           title={isCameraOn ? 'Turn Off Camera' : 'Turn On Camera'}
         >
@@ -197,13 +199,12 @@ export function VoiceControls() {
           )}
         </button>
 
-        {/* Screen Share */}
         <button
           onClick={handleScreenShare}
-          className={`flex-1 h-[34px] flex items-center justify-center rounded-[4px] transition-colors ${
+          className={`${btnBase} ${
             isScreenSharing
-              ? 'bg-discord-bg-tertiary text-discord-green hover:bg-discord-bg-tertiary/80'
-              : 'bg-discord-bg-tertiary text-discord-text-muted hover:bg-discord-bg-tertiary/80 hover:text-discord-text-secondary'
+              ? 'bg-[#111214] text-discord-green hover:bg-[#1a1b1e]'
+              : btnDefaultStyle
           }`}
           title={isScreenSharing ? 'Stop Sharing' : 'Share Screen'}
         >
@@ -213,6 +214,6 @@ export function VoiceControls() {
           </svg>
         </button>
       </div>
-    </div>
+    </>
   );
 }