Add dedicated mobile and Settings navigation stacks

frontend/src/components/AccountMenu.tsx

@@ -7,6 +7,7 @@ import { CreditUsage } from "@/components/CreditUsage";
 import { useCompactSettingsLayout } from "@/components/settings/useCompactSettingsLayout";
 import { useLocalState } from "@/state/useLocalState";
 import type { TeamStatus } from "@/types/team";
+import { SETTINGS_HOME_PARENT_STATE_KEY } from "@/utils/settingsNavigation";
 import { getTeamSeatMismatch } from "@/utils/teamSeats";
 
 export function AccountMenu() {
@@ -45,6 +46,11 @@ export function AccountMenu() {
     <div className="flex w-full max-w-full items-end gap-2">
       <Link
         to={isCompactSettingsLayout ? "/settings" : "/settings/account"}
+        state={
+          isCompactSettingsLayout
+            ? (previous) => ({ ...previous, [SETTINGS_HOME_PARENT_STATE_KEY]: true })
+            : undefined
+        }
         aria-label={attentionLabel ? `Open settings, ${attentionLabel}` : "Open settings"}
         title="Settings"
         className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--sidebar-chrome))] text-[hsl(var(--on-sidebar-chrome))] shadow-none ring-0 transition-colors hover:bg-[hsl(var(--sidebar-chrome-hover))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"

frontend/src/components/AuthenticatedHomeContent.tsx

@@ -10,7 +10,9 @@ import {
 import { useLocation, useRouter } from "@tanstack/react-router";
 import { ProjectDetailView } from "@/components/ProjectDetailView";
 import { UnifiedChat } from "@/components/UnifiedChat";
+import { MobileNavigationStack } from "@/components/MobileNavigationStack";
 import { PersistentHomeNavigationContext } from "@/contexts/PersistentHomeNavigationContext";
+import { useIsLandscapeMobile, useIsMobile } from "@/utils/utils";
 
 const TRANSIENT_HOME_SEARCH_PARAMS = ["team_setup", "credits_success", "api_settings"];
 
@@ -118,6 +120,9 @@ export function AuthenticatedHomeContent({
 }: {
   homeLocationHref: string | null;
 }) {
+  const isMobile = useIsMobile();
+  const isLandscapeMobile = useIsLandscapeMobile();
+  const isCompactLayout = isMobile || isLandscapeMobile;
   const [selection, setSelection] = useState<HomeSelection>(readHomeSelection);
 
   const syncFromHomeLocation = useCallback(() => {
@@ -152,6 +157,10 @@ export function AuthenticatedHomeContent({
     };
   }, [syncFromHomeLocation]);
 
+  if (isCompactLayout) {
+    return <MobileNavigationStack />;
+  }
+
   if (selection.projectId && !selection.hasConversationId) {
     return <ProjectDetailView projectId={selection.projectId} />;
   }

frontend/src/components/ChatHistoryList.tsx

@@ -69,6 +69,9 @@ interface ChatHistoryListProps {
   selectedIds: Set<string>;
   onSelectionChange: (ids: Set<string>) => void;
   containerRef?: React.RefObject<HTMLElement>;
+  onOpenConversation?: (conversation: Conversation) => void;
+  onOpenProject?: (projectId: string) => void;
+  onOpenNewChat?: (projectId: string | null) => void;
 }
 
 export function ChatHistoryList({
@@ -79,7 +82,10 @@ export function ChatHistoryList({
   onExitSelectionMode,
   selectedIds,
   onSelectionChange,
-  containerRef
+  containerRef,
+  onOpenConversation,
+  onOpenProject,
+  onOpenNewChat
 }: ChatHistoryListProps) {
   const opensecret = useOpenSecret();
   const router = useRouter();
@@ -848,6 +854,11 @@ export function ChatHistoryList({
       setSelectedProjectId(projectId);
       setExpandedProjectId(projectId);
 
+      if (onOpenProject) {
+        onOpenProject(projectId);
+        return;
+      }
+
       if (window.location.pathname !== "/") {
         await router.navigate({ to: "/" });
       }
@@ -860,13 +871,18 @@ export function ChatHistoryList({
       window.dispatchEvent(new CustomEvent("newchat", { detail: { projectId } }));
       window.dispatchEvent(new Event("projectselected"));
     },
-    [router, setSelectedProjectId]
+    [onOpenProject, router, setSelectedProjectId]
   );
 
   const handleNewChatInProject = useCallback(
     async (projectId: string) => {
       setSelectedProjectId(projectId);
 
+      if (onOpenNewChat) {
+        onOpenNewChat(projectId);
+        return;
+      }
+
       if (window.location.pathname !== "/") {
         await router.navigate({ to: "/" });
       }
@@ -878,7 +894,7 @@ export function ChatHistoryList({
       window.dispatchEvent(new CustomEvent("newchat", { detail: { projectId } }));
       setTimeout(() => document.getElementById("message")?.focus(), 0);
     },
-    [router, setSelectedProjectId]
+    [onOpenNewChat, router, setSelectedProjectId]
   );
 
   const handleCreateProject = useCallback(
@@ -994,6 +1010,11 @@ export function ChatHistoryList({
     async (conversation: Conversation) => {
       setSelectedProjectId(conversation.project_id ?? null);
 
+      if (onOpenConversation) {
+        onOpenConversation(conversation);
+        return;
+      }
+
       if (window.location.pathname !== "/") {
         await router.navigate({ to: "/" });
       }
@@ -1009,7 +1030,7 @@ export function ChatHistoryList({
         })
       );
     },
-    [router, setSelectedProjectId]
+    [onOpenConversation, router, setSelectedProjectId]
   );
 
   // Listen for conversation created event to refresh the list