Add Stationery and Stationery Dark themes with notebook chrome.

Manila folders, ruled chat, post-it nav, and folder tabs; dark variant uses Catppuccin Mocha colors with muted stickies and soft glows.

src/app/pages/client/home/Home.tsx

@@ -309,7 +309,7 @@ export function Home() {
   const virtualizer = useVirtualizer({
     count: listItems.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 32,
+    estimateSize: () => 36,
     overscan: 10,
   });
 
@@ -399,7 +399,7 @@ export function Home() {
               </NavItem>
               <PluginNavSlot location="channel-list" />
             </NavCategory>
-            <NavCategory>
+            <NavCategory data-nav-dropdown="">
               <NavCategoryHeader>
                 <RoomNavCategoryButton
                   closed={closedCategories.has(DEFAULT_CATEGORY_ID)}
@@ -410,12 +410,15 @@ export function Home() {
                 </RoomNavCategoryButton>
               </NavCategoryHeader>
               <PluginNavSlot location="home-section" />
-              <div
-                style={{
-                  position: 'relative',
-                  height: virtualizer.getTotalSize(),
-                }}
-              >
+              {listItems.length > 0 && (
+              <div data-nav-rooms="">
+                <div
+                  data-nav-room-list=""
+                  style={{
+                    position: 'relative',
+                    height: virtualizer.getTotalSize(),
+                  }}
+                >
                 {virtualizer.getVirtualItems().map((vItem) => {
                   const item = listItems[vItem.index];
                   if (!item) return null;
@@ -446,7 +449,16 @@ export function Home() {
                       key={vItem.index}
                       ref={virtualizer.measureElement}
                     >
-                      <div style={{ paddingLeft, display: 'flex', alignItems: 'center', minHeight: item.depth > 0 ? '1.5rem' : undefined }}>
+                      <div
+                        data-nav-depth={item.depth}
+                        style={{
+                          paddingLeft,
+                          display: 'flex',
+                          alignItems: 'center',
+                          minHeight: item.depth > 0 ? '1.5rem' : undefined,
+                          position: 'relative',
+                        }}
+                      >
                         {treeIcon && (
                           <span style={{ 
                             paddingRight: '2px', 
@@ -475,7 +487,9 @@ export function Home() {
                     </VirtualTile>
                   );
                 })}
+                </div>
               </div>
+              )}
             </NavCategory>
           </Box>
         </PageNavContent>

src/app/pages/client/home/HomeThreadsCategory.tsx

@@ -154,7 +154,7 @@ export function HomeThreadsCategory({ rooms }: HomeThreadsCategoryProps) {
   if (threads.length === 0) return null;
 
   return (
-    <NavCategory>
+    <NavCategory data-nav-dropdown="">
       <NavCategoryHeader>
         <RoomNavCategoryButton
           closed={closedCategories.has(THREADS_CATEGORY_ID)}
@@ -164,15 +164,18 @@ export function HomeThreadsCategory({ rooms }: HomeThreadsCategoryProps) {
           My Threads
         </RoomNavCategoryButton>
       </NavCategoryHeader>
-      {!closedCategories.has(THREADS_CATEGORY_ID) &&
-        threads.map(({ room, thread }) => (
-          <ThreadNavItem
-            key={`${room.roomId}:${thread.id}`}
-            room={room}
-            thread={thread}
-            selected={false}
-          />
-        ))}
+      {!closedCategories.has(THREADS_CATEGORY_ID) && (
+        <div data-nav-rooms="">
+          {threads.map(({ room, thread }) => (
+            <ThreadNavItem
+              key={`${room.roomId}:${thread.id}`}
+              room={room}
+              thread={thread}
+              selected={false}
+            />
+          ))}
+        </div>
+      )}
     </NavCategory>
   );
 }