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/features/room/RoomViewHeader.tsx

@@ -36,7 +36,7 @@ import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
 import { getViaServers } from '../../plugins/via-servers';
 import { PluginButtonSlot } from '../settings/plugins/PluginButtonSlot';
-import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useBackRoute } from '../../hooks/useBackRoute';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
 import { RoomPinMenu } from './room-pin-menu';
@@ -463,6 +463,7 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const screenSize = useScreenSizeContext();
+  const { showInPageHeader, goBack } = useBackRoute();
   const room = useRoom();
   const space = useSpaceOptionally();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
@@ -501,21 +502,17 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
   };
 
   return (
-    <PageHeader balance={screenSize === ScreenSize.Mobile}>
+    <PageHeader balance={showInPageHeader}>
       <Box grow="Yes" gap="300">
-        {screenSize === ScreenSize.Mobile && (
-          <BackRouteHandler>
-            {(onBack) => (
-              <Box shrink="No" alignItems="Center">
-                <IconButton onClick={onBack}>
-                  <Icon src={Icons.ArrowLeft} />
-                </IconButton>
-              </Box>
-            )}
-          </BackRouteHandler>
+        {showInPageHeader && (
+          <Box shrink="No" alignItems="Center">
+            <IconButton onClick={goBack} aria-label="Back">
+              <Icon src={Icons.ArrowLeft} />
+            </IconButton>
+          </Box>
         )}
         <Box grow="Yes" alignItems="Center" gap="300">
-          {screenSize !== ScreenSize.Mobile && (
+          {!showInPageHeader && (
             <Avatar size="300">
               <RoomAvatar
                 roomId={room.roomId}