fix: rework compact nav and centralized back routing

Use master-detail layout on skinny windows so server and channel lists share one screen, with back returning to the space list instead of redirect loops. Add useBackRoute for title-bar and page-header back buttons with view transitions.

src/app/components/title-bar/TitleBar.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useMemo, useEffect, useState, useCallback, useRef } from 'react';
-import { Box, Text } from 'folds';
+import { Box, Text, IconButton } from 'folds';
 import { invoke } from '@tauri-apps/api/core';
 import { MatrixClient, RoomEvent, ClientEvent, MatrixEvent, Room, IPushRules, SyncState } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
@@ -18,6 +18,8 @@ import { AccountDataEvent } from '../../../types/matrix/accountData';
 import { getNotificationMode, NotificationMode } from '../../hooks/useNotificationMode';
 import { isRoomId } from '../../utils/matrix';
 import { useSyncState } from '../../hooks/useSyncState';
+import { useBackRoute } from '../../hooks/useBackRoute';
+import { Icon, Icons } from '../icons';
 
 type NewMessageNotification = {
   id: string;
@@ -42,6 +44,7 @@ export function TitleBar({ mx, children }: TitleBarProps) {
   const navigate = useNavigate();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
+  const { showInTitleBar, goBack } = useBackRoute(mx);
 
   // Sync status state
   const [syncStateData, setSyncStateData] = useState<{
@@ -652,6 +655,20 @@ export function TitleBar({ mx, children }: TitleBarProps) {
         grow="Yes"
         onMouseDown={handleDragStart}
       >
+        {showInTitleBar && (
+          <IconButton
+            className={css.TitleBarBackButton}
+            size="300"
+            variant="Surface"
+            fill="None"
+            radii="300"
+            onClick={goBack}
+            onMouseDown={(e) => e.stopPropagation()}
+            aria-label="Back"
+          >
+            <Icon src={Icons.ArrowLeft} size="200" />
+          </IconButton>
+        )}
         <Text size="T200" truncate style={{ color: 'inherit' }}>
           <span style={{ fontWeight: 700 }}>Paarrot</span>{titleParts.suffix}
         </Text>