From b95cc7dd5424f4765f4efb107b69fcc993701170 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 09:39:36 -0400
Subject: [PATCH] feat: mobile-responsive layout and chat navigation

- Bottom tab bar on mobile instead of side icon strip
- Conversation list and chat view are mutually exclusive on mobile
- Back button in chat header returns to conversation list on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Layout.tsx  | 43 +++++++++++++++++++++++------
 frontend/src/pages/MessagesPage.tsx | 18 ++++++++----
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index af4a5c6..9ad48d0 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -20,11 +20,11 @@ export default function Layout() {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      {/* Sidebar */}
-      <aside className="w-16 md:w-56 flex flex-col bg-surface-1 border-r border-slate-700 shrink-0">
+      {/* Desktop sidebar */}
+      <aside className="hidden md:flex w-56 flex-col bg-surface-1 border-r border-slate-700 shrink-0">
         <div className="flex items-center gap-2 px-4 py-5 border-b border-slate-700">
           <Shield className="text-accent w-6 h-6 shrink-0" />
-          <span className="hidden md:block font-bold text-lg tracking-tight">CloudLink</span>
+          <span className="font-bold text-lg tracking-tight">CloudLink</span>
         </div>
 
         <nav className="flex-1 py-4 space-y-1 px-2">
@@ -41,7 +41,7 @@ export default function Layout() {
               }
             >
               <Icon className="w-5 h-5 shrink-0" />
-              <span className="hidden md:block">{label}</span>
+              <span>{label}</span>
             </NavLink>
           ))}
         </nav>
@@ -51,21 +51,48 @@ export default function Layout() {
             <div className="w-7 h-7 rounded-full bg-accent flex items-center justify-center text-xs font-bold shrink-0">
               {username?.[0]?.toUpperCase() ?? '?'}
             </div>
-            <span className="hidden md:block text-sm text-slate-300 truncate">{username}</span>
+            <span className="text-sm text-slate-300 truncate">{username}</span>
           </div>
           <button
             onClick={handleLogout}
             className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-surface-2 transition-colors"
           >
             <LogOut className="w-4 h-4 shrink-0" />
-            <span className="hidden md:block">Sign out</span>
+            <span>Sign out</span>
           </button>
         </div>
       </aside>
 
       {/* Main */}
-      <main className="flex-1 overflow-hidden">
-        <Outlet />
+      <main className="flex-1 overflow-hidden flex flex-col">
+        <div className="flex-1 overflow-hidden">
+          <Outlet />
+        </div>
+
+        {/* Mobile bottom nav */}
+        <nav className="md:hidden flex border-t border-slate-700 bg-surface-1 shrink-0">
+          {nav.map(({ to, icon: Icon, label }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) =>
+                `flex-1 flex flex-col items-center py-2 gap-0.5 text-xs font-medium transition-colors ${
+                  isActive ? 'text-accent' : 'text-slate-500'
+                }`
+              }
+            >
+              <Icon className="w-5 h-5" />
+              <span>{label}</span>
+            </NavLink>
+          ))}
+          <button
+            onClick={handleLogout}
+            className="flex-1 flex flex-col items-center py-2 gap-0.5 text-xs font-medium text-slate-500"
+          >
+            <LogOut className="w-5 h-5" />
+            <span>Sign out</span>
+          </button>
+        </nav>
       </main>
     </div>
   );
diff --git a/frontend/src/pages/MessagesPage.tsx b/frontend/src/pages/MessagesPage.tsx
index 2607796..d9381e0 100644
--- a/frontend/src/pages/MessagesPage.tsx
+++ b/frontend/src/pages/MessagesPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Send, Plus, Search } from 'lucide-react';
+import { Send, Plus, Search, ArrowLeft } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import api from '../lib/api';
 import { useAuthStore, useCryptoStore } from '../lib/store';
@@ -171,8 +171,8 @@ export default function MessagesPage() {
 
   return (
     <div className="flex h-full">
-      {/* Conversation list */}
-      <aside className="w-64 border-r border-slate-700 flex flex-col bg-surface-1 shrink-0">
+      {/* Conversation list — full screen on mobile when no chat open, sidebar on desktop */}
+      <aside className={`${activeId ? 'hidden md:flex' : 'flex'} w-full md:w-64 border-r border-slate-700 flex-col bg-surface-1 shrink-0`}>
         <div className="p-3 border-b border-slate-700">
           <div className="relative">
             <Search className="absolute left-2.5 top-2.5 w-4 h-4 text-slate-500" />
@@ -226,12 +226,18 @@ export default function MessagesPage() {
         </div>
       </aside>
 
-      {/* Chat area */}
-      <div className="flex-1 flex flex-col">
+      {/* Chat area — hidden on mobile when no chat open */}
+      <div className={`${activeId ? 'flex' : 'hidden md:flex'} flex-1 flex-col`}>
         {activeId ? (
           <>
             <header className="px-4 py-3 border-b border-slate-700 bg-surface-1 flex items-center gap-3">
-              <div className="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-sm font-bold">
+              <button
+                onClick={() => navigate('/messages')}
+                className="md:hidden p-1 -ml-1 text-slate-400 hover:text-white"
+              >
+                <ArrowLeft className="w-5 h-5" />
+              </button>
+              <div className="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-sm font-bold shrink-0">
                 {otherMember?.username[0]?.toUpperCase() ?? '?'}
               </div>
               <span className="font-medium">{otherMember?.username ?? 'Conversation'}</span>