From 435d06a756481ceccc6c84c9201ec4574dcb776e Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Fri, 13 Feb 2026 12:08:23 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(matrix):=20implement=20WhatsAp?= =?UTF-8?q?p-style=20mobile=20navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mobile users now get a separate room list and chat view: - /chat shows full-screen room list on mobile - /chat/[roomId] shows full-screen chat with back button - Desktop retains side-by-side layout unchanged - Last room restore only happens on desktop --- .../src/lib/components/chat/RoomHeader.svelte | 37 ++- .../apps/web/src/lib/matrix/store.svelte.ts | 25 +- .../web/src/routes/(app)/chat/+page.svelte | 306 ++++++++++-------- .../routes/(app)/chat/[roomId]/+page.svelte | 166 +++++++++- 4 files changed, 362 insertions(+), 172 deletions(-) diff --git a/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte b/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte index f25714f9d..8e1146f85 100644 --- a/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte +++ b/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte @@ -1,6 +1,7 @@ -
- - {#if sidebarOpen && isMobile} - - {/if} - - - - - -
- {#if matrixStore.currentRoom} - - (showRoomSettings = true)} - onSearchClick={() => (showSearch = true)} - onVoiceCall={handleVoiceCall} - onVideoCall={handleVideoCall} - /> - - - - - - (replyTo = null)} - onCancelEdit={() => (editMessage = null)} - /> - {:else} - -
-
- -
-
-

Willkommen bei Manalink

-

- Wähle eine Unterhaltung aus der Seitenleiste oder starte einen neuen Chat -

-
- - - - -
-
-

{matrixStore.rooms.length}

-

Räume

-
-
-

{matrixStore.totalUnreadCount}

-

Ungelesen

-
-
-
- {/if} -
- - - (showRoomSettings = false)} /> - - - {#if !sidebarOpen} - +
+ +

+ + {matrixStore.syncState === 'SYNCING' ? 'Verbunden' : matrixStore.syncState} + {#if matrixStore.totalUnreadCount > 0} + + {matrixStore.totalUnreadCount} + + {/if} +

+ + + +
+ (showCreateRoom = true)} onSelectRoom={handleSelectRoom} /> +
+ + + +
+ {#if matrixStore.currentRoom} + + (showRoomSettings = true)} + onSearchClick={() => (showSearch = true)} + onVoiceCall={handleVoiceCall} + onVideoCall={handleVideoCall} + /> + + + + + + (replyTo = null)} + onCancelEdit={() => (editMessage = null)} + /> + {:else} + +
- {matrixStore.totalUnreadCount > 99 ? '99+' : matrixStore.totalUnreadCount} - +
+ +
+
+

Willkommen bei Manalink

+

+ Wähle eine Unterhaltung aus der Seitenleiste oder starte einen neuen Chat +

+
+ + + + +
+
+

{matrixStore.rooms.length}

+

Räume

+
+
+

{matrixStore.totalUnreadCount}

+

Ungelesen

+
+
+
{/if} - - {/if} - +
+ + + (showRoomSettings = false)} /> + +{/if} import { page } from '$app/stores'; - import { matrixStore } from '$lib/matrix'; + import { matrixStore, type SimpleMessage } from '$lib/matrix'; + import { RoomHeader, Timeline, MessageInput } from '$lib/components/chat'; + import RoomSettingsPanel from '$lib/components/chat/RoomSettingsPanel.svelte'; + import SearchDialog from '$lib/components/chat/SearchDialog.svelte'; + import ForwardMessageDialog from '$lib/components/chat/ForwardMessageDialog.svelte'; + import { CallView, IncomingCallDialog } from '$lib/components/call'; import { goto } from '$app/navigation'; + import { browser } from '$app/environment'; import { onMount } from 'svelte'; - // Get roomId from URL and select that room + // Call state + let activeCall = $derived(matrixStore.activeCall); + let incomingCall = $derived(matrixStore.incomingCall); + + let showRoomSettings = $state(false); + let showSearch = $state(false); + let showForward = $state(false); + + // Reply/Edit/Forward state + let replyTo = $state(null); + let editMessage = $state(null); + let forwardMessage = $state(null); + + // Check if mobile + let isMobile = $state(browser ? window.innerWidth < 1024 : false); + + // Update on resize + if (browser) { + window.addEventListener('resize', () => { + const wasMobile = isMobile; + isMobile = window.innerWidth < 1024; + + // If we switched from mobile to desktop, redirect to /chat + if (wasMobile && !isMobile) { + goto('/chat'); + } + }); + } + + // On mount: Select the room and handle desktop redirect onMount(() => { const roomId = $page.params.roomId; if (roomId) { - // URL decode the room ID (Matrix room IDs contain special chars) const decodedRoomId = decodeURIComponent(roomId); + + // On desktop, redirect to /chat and select the room there + if (!isMobile) { + matrixStore.selectRoom(decodedRoomId); + goto('/chat'); + return; + } + + // On mobile, select the room and stay on this page matrixStore.selectRoom(decodedRoomId); } }); - // Redirect to main chat page - the room selection is handled there + // Handle URL changes (e.g., navigating between rooms) $effect(() => { - goto('/chat'); + const roomId = $page.params.roomId; + if (roomId && isMobile) { + const decodedRoomId = decodeURIComponent(roomId); + if (matrixStore.currentRoomId !== decodedRoomId) { + matrixStore.selectRoom(decodedRoomId); + } + } }); + + function handleBack() { + goto('/chat'); + } + + function handleReply(message: SimpleMessage) { + editMessage = null; + replyTo = message; + } + + function handleEdit(message: SimpleMessage) { + replyTo = null; + editMessage = message; + } + + function handleForward(message: SimpleMessage) { + forwardMessage = message; + showForward = true; + } + + // Call handlers + async function handleVoiceCall() { + if (matrixStore.currentRoom) { + await matrixStore.placeVoiceCall(matrixStore.currentRoom.roomId); + } + } + + async function handleVideoCall() { + if (matrixStore.currentRoom) { + await matrixStore.placeVideoCall(matrixStore.currentRoom.roomId); + } + } + + function handleCallHangup() { + // Call ended - UI will update automatically + } + + function handleCallAnswer() { + // Call answered - UI will update automatically + } + + function handleCallReject() { + // Call rejected - UI will update automatically + } - -
-

Loading room...

+ +
+ {#if matrixStore.currentRoom} + + (showRoomSettings = true)} + onSearchClick={() => (showSearch = true)} + onVoiceCall={handleVoiceCall} + onVideoCall={handleVideoCall} + /> + + + + + + (replyTo = null)} + onCancelEdit={() => (editMessage = null)} + /> + {:else} + +
+
+
+

Lade Raum...

+
+
+ {/if}
+ + + (showRoomSettings = false)} /> + + + (showSearch = false)} /> + + +{#if activeCall} + +{/if} + + +{#if incomingCall && !activeCall} + +{/if} + + + { + showForward = false; + forwardMessage = null; + }} +/>