refactor(app): simplify session routing and tab close handling (#28767)

packages/app/src/app.tsx

@@ -48,22 +48,17 @@ import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
 
 const HomeRoute = lazy(() => import("@/pages/home"))
-const loadSession = () => import("@/pages/session")
+const Session = lazy(() => import("@/pages/session"))
-const Session = lazy(loadSession)
-const Loading = () => <div class="size-full" />
 
-if (typeof location === "object" && /\/session(?:\/|$)/.test(location.pathname)) {
+const SessionRoute = Object.assign(
-  void loadSession()
+  () => (
-}
+    <SessionProviders>
-
+      <Session />
-const SessionRoute = () => (
+    </SessionProviders>
-  <SessionProviders>
+  ),
-    <Session />
+  { preload: Session.preload },
-  </SessionProviders>
 )
 
-const SessionIndexRoute = () => <Navigate href="session" />
-
 function UiI18nBridge(props: ParentProps) {
   const language = useLanguage()
   return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
@@ -317,7 +312,7 @@ export function AppInterface(props: {
                 >
                   <Route path="/" component={HomeRoute} />
                   <Route path="/:dir" component={DirectoryLayout}>
-                    <Route path="/" component={SessionIndexRoute} />
+                    <Route path="/" component={() => <Navigate href="session" />} />
                     <Route path="/session/:id?" component={SessionRoute} />
                   </Route>
                 </Dynamic>

packages/app/src/components/titlebar.tsx

@@ -223,19 +223,13 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
             const navigate = useNavigate()
             const homeMatch = useMatch(() => "/")
 
-            const openNewSession = () => {
+            const newSessionHref = () => {
-              if (params.dir) {
+              if (params.dir) return `/${params.dir}/session`
-                navigate(`/${params.dir}/session`)
-                return
-              }
 
               const project = layout.projects.list()[0]
-              if (!project) {
+              if (!project) return "/"
-                navigate("/")
-                return
-              }
 
-              navigate(`/${base64Encode(project.worktree)}/session`)
+              return `/${base64Encode(project.worktree)}/session`
             }
 
             type Tab = { dir: string; sessionId: string; href: string }
@@ -313,13 +307,21 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
               return true
             }
 
+            const closeNewSessionTab = () => {
+              if (!(params.dir && !params.id)) return false
+              const last = tabsStore[tabsStore.length - 1]
+              if (last) navigate(last.href)
+              else navigate("/")
+              return true
+            }
+
             makeEventListener(
               document,
               "keydown",
               (event) => {
                 if (!event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
                 if (event.key.toLowerCase() !== "w") return
-                if (!closeCurrentSessionTab()) return
+                if (!(closeCurrentSessionTab() || closeNewSessionTab())) return
 
                 event.preventDefault()
                 event.stopPropagation()
@@ -391,7 +393,8 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                         size="large"
                         class="shrink-0"
                         icon={<IconV2 name="plus" />}
-                        onClick={openNewSession}
+                        as="a"
+                        href={newSessionHref()}
                         aria-label={language.t("command.session.new")}
                       />
                     }