feat: misc updates

- mobile sync component
- greater bottom scroll length for mobile view
- use hamburger icon for sidebar trigger
- multiple rooms in sidebar

mast-react-vite/src/App.tsx

···
           <section className="flex-1 container py-12 h-[calc(100vh-theme(spacing.4))] overflow-hidden relative">
             <SidebarTrigger className="absolute top-4 left-8 border border-foreground" />
             <div className="absolute top-4 right-12 flex gap-2">
-              <button 
-                onClick={() => {
-                  console.log("Manual sync requested");
-                  syncWorker.postMessage({
-                    type: 'SYNC_CHANGES',
-                    dbname
-                  });
-                }}
-                className="px-3 py-1 bg-blue-600 text-white rounded-md text-xs hover:bg-blue-700"
-              >
-                Sync Now
-              </button>
               {selectedItems.size > 0 && (
                 <Badge variant="default"> {selectedItems.size} selected </Badge>
               )}
···
             filterContext={filterContext}
             setFilterContext={setFilterContext} />
 
-          <section className="flex-1 py-12 h-[calc(100vh-theme(spacing.4))] w-full overflow-hidden relative">
-            <div className="flex-1 bg-muted border-b border-foreground h-14 absolute inset-x-0 top-0 " />
-            <SidebarTrigger className="fixed top-4 border border-foreground left-8" />
+          <div className="bg-muted h-14 w-full absolute top-0 " />
+          <section className="flex-1 container py-12 h-[calc(100vh-theme(spacing.4))] overflow-hidden relative">
+            <SidebarTrigger className="absolute top-4 left-8 border border-foreground" />
             <div className="absolute top-4 right-12 flex gap-2">
-              <button 
-                onClick={() => {
-                  console.log("Manual sync requested (mobile)");
-                  syncWorker.postMessage({
-                    type: 'SYNC_CHANGES',
-                    dbname
-                  });
-                }}
-                className="px-3 py-1 bg-blue-600 text-white rounded-md text-xs hover:bg-blue-700"
-              >
-                Sync
-              </button>
               {selectedItems.size > 0 && (
                 <Badge variant="default"> {selectedItems.size} selected </Badge>
               )}

mast-react-vite/src/components/ui/app-sidebar.tsx

···
 	SidebarMenuItem,
 	SidebarMenuButton,
 } from "@/components/ui/sidebar";
+import { useState, useEffect } from "react";
 import { useQuery } from "@vlcn.io/react";
 
+// Helper function to load all visited rooms
+function loadAllRooms(): Set<string> {
+  const allRoomsJSON = localStorage.getItem('allRooms');
+  if (allRoomsJSON) {
+    try {
+      return new Set(JSON.parse(allRoomsJSON));
+    } catch (error) {
+      console.error('Error parsing allRooms from localStorage:', error);
+    }
+  }
+  return new Set<string>();
+}
+
+// Helper function to update URL with room ID
+function updateUrlWithRoom(roomId: string) {
+  const hash = window.location.hash.substring(1);
+  const params = new URLSearchParams(hash);
+  params.set('room', roomId);
+  window.location.hash = params.toString();
+}
+
 export function AppSidebar({ctx, filterContext, setFilterContext}) {
+  // Load the visited rooms
+  const [visitedRooms, setVisitedRooms] = useState<string[]>([]);
+  const [currentRoom, setCurrentRoom] = useState<string>("");
+  
+  useEffect(() => {
+    // Load rooms from localStorage
+    const rooms = Array.from(loadAllRooms());
+    setVisitedRooms(rooms);
+    
+    // Get current room from URL or localStorage
+    const hash = window.location.hash.substring(1);
+    const params = new URLSearchParams(hash);
+    const roomFromHash = params.get('room');
+    const storedRoom = localStorage.getItem("room");
+    
+    setCurrentRoom(roomFromHash || storedRoom || "");
+  }, []);
+  
+  // Handle switching to another room
+  const handleRoomSwitch = (roomId: string) => {
+    if (roomId === currentRoom) return;
+    
+    // Save current room to localStorage
+    localStorage.setItem("room", roomId);
+    
+    // Update URL with the new room ID
+    updateUrlWithRoom(roomId);
+    
+    // Reload the page to apply the new room
+    window.location.reload();
+  };
 	const projects = useQuery(
     ctx,
     `SELECT DISTINCT project FROM active_todos WHERE project != '' ORDER BY project`
···
     <Sidebar>
       <SidebarHeader />
       <SidebarContent>
+        {visitedRooms.length > 0 && (
+          <SidebarGroup>
+            <SidebarGroupLabel>Rooms</SidebarGroupLabel>
+            <SidebarMenu>
+              <div className="flex flex-wrap gap-1.5 p-2 max-h-40 overflow-y-auto">
+                {visitedRooms.map((roomId) => (
+                  <SidebarMenuItem key={roomId}>
+                    <SidebarMenuButton 
+                      isActive={currentRoom === roomId}
+                      onClick={() => handleRoomSwitch(roomId)}
+                    >
+                      {roomId.substring(0, 8)}{currentRoom === roomId ? " (current)" : ""}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </div>
+            </SidebarMenu>
+          </SidebarGroup>
+        )}
 			<SidebarGroup>
           <SidebarGroupLabel>Projects</SidebarGroupLabel>
           <SidebarMenu>

mast-react-vite/src/components/ui/data-table.tsx

···
               No results.
             </div>
           )}
-          <div className="h-[10rem]" />
+          <div className="h-[15rem]" />
         </ScrollArea>
       </div>
     </>

mast-react-vite/src/components/ui/sidebar.tsx

···
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { ViewVerticalIcon } from "@radix-ui/react-icons";
+import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
···
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden dark"
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
···
       }}
       {...props}
     >
-      <ViewVerticalIcon />
+      <HamburgerMenuIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

mast-react-vite/src/components/ui/sync-status.tsx

···
     : 'Never';
   
   return (
-    <div className="fixed bottom-4 right-4 p-3 bg-background border border-border rounded-lg shadow-lg z-50 text-sm">
-      <div className="flex items-center gap-2 mb-1">
+    <>
+      {/* Mobile view - just a colored dot in the corner */}
+      <div className="md:hidden fixed top-4 right-4 p-1 z-50" title={`Sync: ${status}`}>
         <div className={`w-3 h-3 rounded-full ${statusColors[status]}`}></div>
-        <span className="font-medium">Sync: {status}</span>
       </div>
-      
-      <div className="grid grid-cols-2 gap-x-4 gap-y-1 mt-2 text-xs text-muted-foreground">
-        <div>Changes sent:</div>
-        <div>{changesSent}</div>
-        
-        <div>Changes received:</div>
-        <div>{changesReceived}</div>
-        
-        <div>Last sync:</div>
-        <div>{formattedTime}</div>
+
+      {/* Desktop view - full status panel */}
+      <div className="hidden md:block fixed bottom-4 right-4 p-3 bg-background border border-border rounded-lg shadow-lg z-50 text-sm">
+        <div className="flex items-center gap-2 mb-1">
+          <div className={`w-3 h-3 rounded-full ${statusColors[status]}`}></div>
+          <span className="font-medium">Sync: {status}</span>
+        </div>
         
-        {lastError && (
-          <>
-            <div className="col-span-2 text-red-500 mt-1">Error: {lastError}</div>
-          </>
-        )}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-1 mt-2 text-xs text-muted-foreground">
+          <div>Changes sent:</div>
+          <div>{changesSent}</div>
+          
+          <div>Changes received:</div>
+          <div>{changesReceived}</div>
+          
+          <div>Last sync:</div>
+          <div>{formattedTime}</div>
+          
+          {lastError && (
+            <>
+              <div className="col-span-2 text-red-500 mt-1">Error: {lastError}</div>
+            </>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 

mast-react-vite/src/main.tsx

···
   const ctx = dbRegistry.get(dbname);
   if (ctx) {
     console.log(`Notifying listeners for database: ${dbname}`);
-    
-    // Get all tables in the database
-    // For simplicity, we'll just use the todos table since we know it exists
     const tables = ["todos"];
     
-    // Create synthetic changes for each table
-    // This tells the system that each table has been updated
     const changes: [number, string, bigint][] = tables.map(table => [
       UPDATE_TYPE.UPDATE, // We use UPDATE as a general change type
       table,             // Table name
···
 // Store active crypto key pairs (in memory for the session)
 const activeKeyPairs: Record<string, CryptoKeyPair> = {};
 
-// Function to generate a WebCrypto key pair
 async function generateKeyPair() {
   try {
     const keyPair = await window.crypto.subtle.generateKey(
···
   }
 }
 
+// Helper function to load all visited rooms
+function loadAllRooms(): Set<string> {
+  const allRoomsJSON = localStorage.getItem('allRooms');
+  if (allRoomsJSON) {
+    try {
+      return new Set(JSON.parse(allRoomsJSON));
+    } catch (error) {
+      console.error('Error parsing allRooms from localStorage:', error);
+    }
+  }
+  return new Set<string>();
+}
+
+// Helper function to save all visited rooms
+function saveAllRooms(rooms: Set<string>): void {
+  localStorage.setItem('allRooms', JSON.stringify(Array.from(rooms)));
+}
+
 // Function to get room ID from URL hash or generate a new one
 async function getRoomId(): Promise<{ roomId: string, keyPair?: CryptoKeyPair, publicKeyBase64?: string }> {
   // Check URL hash for room parameter
···
   const roomFromHash = params.get('room');
   
   if (roomFromHash) {
+    // Room exists in URL, add it to the list of all visited rooms
+    const allRooms = loadAllRooms();
+    allRooms.add(roomFromHash);
+    saveAllRooms(allRooms);
+    console.log(`Added ${roomFromHash} to visited rooms list`);
+    
     // Room exists in URL, check if we have keys for it in localStorage
     const storedKeys = localStorage.getItem(`keys-${roomFromHash}`);
     if (storedKeys) {
···
   // Check localStorage for room
   const storedRoom = localStorage.getItem("room");
   if (storedRoom) {
+    // Update URL with the room ID from localStorage
+    updateUrlWithRoom(storedRoom);
+    
+    // Add to the list of all visited rooms
+    const allRooms = loadAllRooms();
+    allRooms.add(storedRoom);
+    saveAllRooms(allRooms);
+    console.log(`Added ${storedRoom} to visited rooms list`);
     // Room exists in localStorage, check if we have keys for it
     const storedKeys = localStorage.getItem(`keys-${storedRoom}`);
     if (storedKeys) {
···
   // Generate a new room ID and key pair
   const newRoomId = crypto.randomUUID().replaceAll("-", "");
   localStorage.setItem("room", newRoomId);
+  
+  // Add to the list of all visited rooms
+  const allRooms = loadAllRooms();
+  allRooms.add(newRoomId);
+  saveAllRooms(allRooms);
+  console.log(`Added ${newRoomId} to visited rooms list`);
   
   // Generate a new key pair for this room
   const { keyPair, publicKeyBase64 } = await generateKeyPair();