mobile

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import type { LayoutNode, SelectedSession } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
+import { useIsMobile } from 'hooks/useIsMobile';
 import { useWorkspacesState } from 'state/useWorkspacesState';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from 'state/useChatSessions';
@@ -37,6 +38,9 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
   const { sessions } = useChatSessions();
   const [, setSelected] = usePanelChannel<SelectedSession>('chat:selected-session', null);
   const rawWorkspace = useWorkspacesState<LayoutNode>('screens/chat', defaultLayout);
+  const isMobile = useIsMobile();
+  const navigate = useNavigate();
+  const mobilePanelId = isMobile && (sessionId || isNew) ? 'chat-detail' : undefined;
 
   // Normalize synchronously so the wrong panel never renders
   const workspace = useMemo(() => {
@@ -64,7 +68,13 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} />
+      <WorkspaceView
+        workspace={workspace}
+        mobilePanelId={mobilePanelId}
+        onMobilePanelChange={(id) => {
+          if (!id) navigate('/chat', { replace: true });
+        }}
+      />
     </div>
   );
 };