From 49e619d68f85d8a909d9ef5958a2888dbc6926a0 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Thu, 12 Feb 2026 14:35:34 +0100
Subject: [PATCH] feat(matrix): add FAB to open sidebar on mobile

Add a floating action button in the bottom-left corner that appears
when the sidebar is closed on mobile/tablet devices. Shows unread
message count badge.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../web/src/routes/(app)/chat/+page.svelte    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
index cff456656..1c1d6eeae 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
@@ -6,7 +6,7 @@
 	import SearchDialog from '$lib/components/chat/SearchDialog.svelte';
 	import ForwardMessageDialog from '$lib/components/chat/ForwardMessageDialog.svelte';
 	import { CallView, IncomingCallDialog } from '$lib/components/call';
-	import { ChatCircle, Plus, Gear } from '@manacore/shared-icons';
+	import { ChatCircle, Plus, Gear, List } from '@manacore/shared-icons';
 	import { browser } from '$app/environment';
 
 	// Call state
@@ -231,6 +231,24 @@
 
 	<!-- Room Settings Panel -->
 	<RoomSettingsPanel open={showRoomSettings} onClose={() => (showRoomSettings = false)} />
+
+	<!-- FAB to open sidebar (mobile/tablet only, when sidebar is closed) -->
+	{#if !sidebarOpen}
+		<button
+			onclick={toggleSidebar}
+			class="fixed bottom-20 left-4 z-30 lg:hidden flex items-center justify-center w-14 h-14 rounded-full bg-gradient-to-r from-violet-500 to-purple-600 text-white shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all duration-200"
+			aria-label="Chats anzeigen"
+		>
+			<List class="h-6 w-6" weight="bold" />
+			{#if matrixStore.totalUnreadCount > 0}
+				<span
+					class="absolute -top-1 -right-1 min-w-[22px] h-[22px] px-1.5 flex items-center justify-center rounded-full bg-red-500 text-white text-xs font-bold shadow-md"
+				>
+					{matrixStore.totalUnreadCount > 99 ? '99+' : matrixStore.totalUnreadCount}
+				</span>
+			{/if}
+		</button>
+	{/if}
 </div>
 
 <!-- Create Room Dialog -->