From 187f8dc95a2a78fb41eb06727c9d67e6b8c4d299 Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Tue, 12 May 2026 18:47:10 +0200
Subject: [PATCH] feat(call): left-click toggles pin, drop manual focus mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/desktop/src/components/InCallPanel.tsx | 22 ++++-----------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/apps/desktop/src/components/InCallPanel.tsx b/apps/desktop/src/components/InCallPanel.tsx
index 6db3f14..4dce6d8 100644
--- a/apps/desktop/src/components/InCallPanel.tsx
+++ b/apps/desktop/src/components/InCallPanel.tsx
@@ -27,7 +27,7 @@ import { CallControls } from './CallControls';
 import { CallParticipantTile, type TileConnectionQuality } from './CallParticipantTile';
 import { CallStatsOverlay } from './CallStatsOverlay';
 import { ScreenSharePickerModal } from './ScreenSharePickerModal';
-import { FocusIcon, GridIcon, LockIcon, MaximizeIcon, SpinnerIcon, UsersIcon } from './icons';
+import { GridIcon, LockIcon, MaximizeIcon, SpinnerIcon, UsersIcon } from './icons';
 import { ParticipantsPopover, type ParticipantRow } from './ParticipantsPopover';
 import { ParticipantVolumeMenu } from './ParticipantVolumeMenu';
 import { ScreenShareContextMenu } from './ScreenShareContextMenu';
@@ -557,22 +557,13 @@ export function InCallPanel({ conversation }: Props) {
       <CallStage
         tiles={tiles}
         speaker={bigTile}
-        mode={callMode}
+        mode={stageLayout.kind === 'equal-grid' ? 'grid' : 'focus'}
         activeSpeakers={activeSpeakers}
         e2ee={isE2EEActive}
         remoteScreenShares={remoteScreenShares}
         conversationMembers={conversation.members}
         onFocusTile={(id) => {
-          // Discord-style toggle: clicking the already-focused tile
-          // collapses back to grid; clicking another tile swaps focus;
-          // clicking any tile in grid mode focuses it.
-          if (callMode === 'focus' && focusedId === id) {
-            setFocusedId(null);
-            setCallMode('grid');
-            return;
-          }
-          setFocusedId(id);
-          if (callMode === 'grid') setCallMode('focus');
+          setFocusedId(focusedId === id ? null : id);
         }}
         onTileContextMenu={openTileContextMenu}
         compact
@@ -590,9 +581,7 @@ export function InCallPanel({ conversation }: Props) {
           y={volumeMenu.y}
           pinned={focusedId === volumeMenu.tileId}
           onTogglePin={() => {
-            const isPinned = focusedId === volumeMenu.tileId;
-            setFocusedId(isPinned ? null : volumeMenu.tileId);
-            if (!isPinned && callMode === 'grid') setCallMode('focus');
+            setFocusedId(focusedId === volumeMenu.tileId ? null : volumeMenu.tileId);
           }}
           {...(volumeMenu.self ? { renderVolume: false } : {})}
           {...(volumeMenu.self
@@ -858,9 +847,6 @@ function ModeToggles({
       <ModeButton active={mode === 'grid'} onClick={() => onChange('grid')} label="Grid">
         <GridIcon className="h-4 w-4" />
       </ModeButton>
-      <ModeButton active={mode === 'focus'} onClick={() => onChange('focus')} label="Fokus">
-        <FocusIcon className="h-4 w-4" />
-      </ModeButton>
       <ModeButton
         active={mode === 'fullscreen'}
         onClick={() => onChange('fullscreen')}