feat: enhance room navigation with sub-room indicators and styling adjustments

src/app/features/room-nav/RoomNavItem.tsx

@@ -23,6 +23,7 @@ import {
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
+import * as css from '../../components/nav/styles.css';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getDirectRoomAvatarUrl, getRoomAvatarUrl, guessPerfectParent, getOrphanParents } from '../../utils/room';
@@ -279,6 +280,7 @@ type RoomNavItemProps = {
   notificationMode?: RoomNotificationMode;
   showAvatar?: boolean;
   direct?: boolean;
+  hideIcon?: boolean;
 };
 export function RoomNavItem({
   room,
@@ -287,6 +289,7 @@ export function RoomNavItem({
   direct,
   notificationMode,
   linkPath,
+  hideIcon,
 }: RoomNavItemProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -360,6 +363,7 @@ export function RoomNavItem({
   return (
     <Box direction="Column" style={{ width: '100%' }}>
       <NavItem
+        className={hideIcon ? css.ThreadItem : undefined}
         variant="Background"
         radii="400"
         highlight={unread !== undefined}
@@ -371,9 +375,10 @@ export function RoomNavItem({
       >
         <NavLink to={linkPath}>
           <NavItemContent>
-            <Box as="span" grow="Yes" alignItems="Center" gap="200">
-              <Avatar size="200" radii="400">
-                {showAvatar ? (
+            <Box as="span" grow="Yes" alignItems="Center" gap={hideIcon ? "100" : "200"}>
+              {!hideIcon && (
+                <Avatar size="200" radii="400">
+                  {showAvatar ? (
                   <RoomAvatar
                     roomId={room.roomId}
                     src={
@@ -396,7 +401,8 @@ export function RoomNavItem({
                     joinRule={room.getJoinRule()}
                   />
                 )}
-              </Avatar>
+                </Avatar>
+              )}
               <Box as="span" grow="Yes" direction="Column" style={{ overflow: 'hidden', minWidth: 0 }}>
                 <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
                   {room.name}

src/app/features/room-nav/UnjoinedSubRoomItem.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import {
-  Avatar,
   Box,
   Chip,
   Icon,
@@ -28,13 +27,14 @@ function getServerFromRoomId(roomId: string): string {
 type UnjoinedSubRoomItemProps = {
   roomId: string;
   depth: number;
+  isLast?: boolean;
 };
 
 /**
  * Displays an unjoined sub-room with a Join button.
  * Used when a parent room has sub-rooms that the user hasn't joined yet.
  */
-export function UnjoinedSubRoomItem({ roomId, depth }: UnjoinedSubRoomItemProps) {
+export function UnjoinedSubRoomItem({ roomId, depth, isLast = false }: UnjoinedSubRoomItemProps) {
   const mx = useMatrixClient();
   const viaServers = [getServerFromRoomId(roomId)].filter(Boolean);
 
@@ -43,17 +43,32 @@ export function UnjoinedSubRoomItem({ roomId, depth }: UnjoinedSubRoomItemProps)
   );
 
   const canJoin = joinState.status === AsyncStatus.Idle || joinState.status === AsyncStatus.Error;
-  const paddingLeft = depth > 0 ? `${depth * 24}px` : undefined;
+  const paddingLeft = depth > 0 ? '30px' : undefined;
+  
+  let treeIcon = '';
+  if (depth > 0) {
+    treeIcon = isLast ? '╰' : '├';
+  }
 
   return (
     <Box
-      style={{ paddingLeft, padding: `${config.space.S100} ${config.space.S200}` }}
+      style={{ paddingLeft, padding: `${config.space.S100} ${config.space.S200}`, minHeight: '1.5rem' }}
       alignItems="Center"
       gap="200"
     >
-      <Avatar size="200" radii="400">
-        <Icon src={Icons.Hash} size="100" />
-      </Avatar>
+      {treeIcon && (
+        <span style={{ 
+          paddingRight: '2px', 
+          opacity: 0.5,
+          fontFamily: 'monospace',
+          fontSize: '14px',
+          lineHeight: '1',
+          userSelect: 'none',
+          marginLeft: '-10px'
+        }}>
+          {treeIcon}
+        </span>
+      )}
       <Box grow="Yes" alignItems="Center" gap="100">
         <Text size="T300" truncate style={{ opacity: 0.7 }}>
           {roomId}