1.0.90

packages/shared/src/components/layout/GuildsLayout.tsx

@@ -1,8 +1,11 @@
 import { useQuery } from 'convex/react';
-import type { ReactNode } from 'react';
+import { useRef, type ReactNode } from 'react';
 import { useLocation } from 'react-router-dom';
 import { api } from '../../../../../convex/_generated/api';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { useMobileSwipeNav } from '../../hooks/useMobileSwipeNav';
 import { FileUploadDropZone } from '../channel/FileUploadDropZone';
+import { ChannelView } from '../channel/ChannelView';
 import { DMLayout } from '../dm/DMLayout';
 import { GuildList } from './GuildList';
 import { GuildNavbar } from './GuildNavbar';
@@ -39,6 +42,26 @@ export function GuildsLayout({ children }: GuildsLayoutProps) {
 	const hasServer = !!serverId && serverId !== '@me' && serverId !== 'you';
 	const mobileMode = detectMobileMode(location.pathname);
 
+	const isMobile = useIsMobile();
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	useMobileSwipeNav(containerRef, wrapperRef);
+
+	// On mobile nav mode, pre-render the last-viewed channel so the
+	// swipe preview shows actual chat content instead of the "Select a
+	// channel" placeholder. The remembered channelId comes from the
+	// same localStorage key the swipe hook writes.
+	const rememberedChannelId =
+		isMobile && mobileMode === 'nav' && serverId
+			? (() => {
+					try {
+						return localStorage.getItem(`brycord:lastChannel:${serverId}`);
+					} catch {
+						return null;
+					}
+				})()
+			: null;
+
 	// Look up the current channel's name + type so the drop overlay
 	// reads "Upload to #channel-name". Drops are disabled when there's
 	// no channel in the URL (DM home, `/you` profile) and on voice
@@ -64,8 +87,8 @@ export function GuildsLayout({ children }: GuildsLayoutProps) {
 				);
 			}}
 		>
-			<div className={styles.wrapper} data-mobile-mode={mobileMode}>
-				<div className={styles.container}>
+			<div className={styles.wrapper} data-mobile-mode={mobileMode} ref={wrapperRef}>
+				<div className={styles.container} ref={containerRef}>
 					<div className={styles.guildList}>
 						<GuildList />
 					</div>
@@ -73,7 +96,13 @@ export function GuildsLayout({ children }: GuildsLayoutProps) {
 						{hasServer ? <GuildNavbar /> : <DMLayout />}
 					</div>
 					<div className={styles.sidebarDivider} />
-					<div className={styles.content}>{children}</div>
+					<div className={styles.content}>
+						{rememberedChannelId ? (
+							<ChannelView channelId={rememberedChannelId} />
+						) : (
+							children
+						)}
+					</div>
 					<div className={styles.userAreaWrapper}>
 						<UserArea />
 					</div>