fix: misc issues with filter + app-sidebar

we moved filter state into it's own context so it can be changed and
accessed anywhere.
filter-context now handles it's own parsing, and changes are always
propagated through filter-text as the state. newText gets updated to be
filter text when in filter mode, and the side bar reacts to and changes
the filter text as well.

mast-react-vite/src/App.tsx

···
 import * as commandParser from "@/lib/command_js.js";
 import { ActionParser } from "@/components/ui/action-parser";
 import { useSelection } from "@/contexts/selection-context";
+import { useFilter } from "@/contexts/filter-context";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/ui/app-sidebar";
 import { Badge } from "@/components/ui/badge";
···
 function App({ ctx, syncWorker, dbname, roomId }) {
   const [newText, setNewText] = useState("");
   const { selectedItems, clearSelection, getSelectionString } = useSelection();
+  const { 
+    filterText, 
+    setFilterText,
+    filterState, 
+    getWhereClause, 
+    clearFilters
+  } = useFilter();
   const [currentAction, setCurrentAction] = useState("add");
-  const [filterContext, setFilterContext] = useState({});
-
-  const newConditions = [];
-  const newParams = [];
-
-  if (
-    filterContext.filterDescription &&
-    filterContext.filterDescription.length > 0
-  ) {
-    newConditions.push("description LIKE ?");
-    newParams.push(`%${filterContext.filterDescription}%`);
-  }
-  if (filterContext.filterProject && filterContext.filterProject.length > 0) {
-    newConditions.push("project = ?");
-    newParams.push(filterContext.filterProject);
-  }
-  if (filterContext.filterTags && filterContext.filterTags.length > 0) {
-    newConditions.push(`EXISTS (
-            SELECT 1 FROM json_each(tags) 
-            WHERE json_each.value IN (${filterContext.filterTags.map(() => "?").join(",")})
-        )`);
-    newParams.push(...filterContext.filterTags);
-  }
+  
+  // Get current conditions and parameters for SQL query
+  const { conditions: newConditions, params: newParams } = getWhereClause();
 
   const whereClause = [
     newConditions.length > 0 ? `(${newConditions.join(" AND ")})` : null,
···
 		newParams,
   ).data;
 
+  // Keep newText in sync with filterText when in filter mode
   useEffect(() => {
-    if (
-      currentAction !== "filter" &&
-      newText.trim().length !== 0 &&
-      filterContext.filterTemp === true
-    ) {
-      console.log("clear filter!");
-      setFilterContext({});
+    // Only update if we're in filter mode
+    if (currentAction === "filter") {
+      setNewText(filterText);
     }
-  }, [currentAction]);
+  }, [filterText, currentAction]);
+
+  // Listen for filter update events from sidebar - primarily for debugging
+  useEffect(() => {
+    const handleFilterUpdate = (event) => {
+      // Log the event for debugging
+      console.log('Filter updated via sidebar:', event.detail);
+    };
+
+    // Add event listener
+    document.addEventListener('filter:update', handleFilterUpdate);
+
+    // Clean up event listener
+    return () => {
+      document.removeEventListener('filter:update', handleFilterUpdate);
+    };
+  }, []);
 
   const parsedCommand = useMemo(() => {
     try {
···
     }
   }, [parsedCommand, todos, selectedItems]);
 
+  // When parsed command changes to a filter action, update the filter text
   useEffect(() => {
     if (parsedCommand.action === "filter") {
-      setFilterContext({
-        filterTags: parsedCommand.tags,
-        filterProject: parsedCommand.project,
-        filterDescription: parsedCommand.description,
-        filterTemp: true,
-      });
-    } else if (
-      currentAction !== "filter" &&
-      newText.trim().length === 0 &&
-      filterContext.filterTemp === true
-    ) {
-      setFilterContext({});
+      // Set the filter text in the context when a filter command is parsed
+      setFilterText(newText);
     }
-  }, [parsedCommand, currentAction, newText]);
+  }, [parsedCommand, newText, setFilterText]);
 
   const handleActionChange = (action: string) => {
+    // If switching to filter action, use the current filter text from context
+    if (action === "filter") {
+      if (filterText) {
+        setNewText(filterText);
+      }
+    } else if (currentAction === "filter" && action !== "filter") {
+      // If switching away from filter, clear the text input but keep the filter active
+      setNewText("");
+    }
+    
     setCurrentAction(action);
   };
 
-  const handleNewTextChange = (newText: string) => {
-    setNewText(newText);
+  const handleNewTextChange = (text: string) => {
+    // Update the local state
+    setNewText(text);
+    
+    // If the current action is filter, also update the filter text in the context
+    // This enables real-time filtering as the user types
+    if (currentAction === "filter") {
+      // Only update the filter text if it's different to avoid circular updates
+      if (text !== filterText) {
+        setFilterText(text);
+      }
+    }
   };
 
   // Callback to mark tasks as done when dragged past threshold
···
     }
     if (e.keyCode === 8) {
       if (newText.trim().length === 0) {
-        setFilterContext({});
+        clearFilters();
       }
     }
   };
···
           }
           break;
         case "filter":
-          setFilterContext({
-            // I think reconstruct is broken
-            // filterText: parsed.reconstruct(),
-            filterTags: parsed.tags,
-            filterProject: parsed.project,
-            filterDescription: parsed.description,
-            // Don't clear the filter context on actionChange
-            filterTemp: false,
-          });
+          // Set the filter text in the context - this will trigger parsing in the filter context
+          // Only update if different to avoid unnecessary re-renders
+          if (newText !== filterText) {
+            setFilterText(newText);
+          }
           break;
       }
-      setNewText("");
+      
+      // Only clear the text input for non-filter actions
+      if (parsed.action !== "filter") {
+        setNewText("");
+      }
       
       // Explicitly tell the worker to sync changes after modifying the database
       if (parsed.action !== "filter") { // Only sync for data-changing operations
···
     <>
       <SidebarProvider defaultOpen={false} className="h-screen">
         <div className="hidden md:flex flex-col w-full h-svh">
-				 <AppSidebar ctx={ctx}
-            filterContext={filterContext}
-            setFilterContext={setFilterContext} />
+				 <AppSidebar ctx={ctx} />
 
           <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">
···
               {selectedItems.size > 0 && (
                 <Badge variant="default"> {selectedItems.size} selected </Badge>
               )}
-              {Object.keys(filterContext).length > 0 && (
+							{(filterState.filterTags?.length > 0 || filterState.filterProject || filterState.filterDescription) && (
                 <Badge variant="secondary" className="cursor-pointer">
                   {todos.length} items found
                   <button
-                    onClick={() => setFilterContext({})}
+                    onClick={() => clearFilters()}
                     className="hover:bg-muted rounded-full p-1"
                   >
                     ✕
···
 
         {/* Mobile view layout - shown only on mobile */}
         <div className="md:hidden flex left-0 w-full h-full flex flex-col items-center pb-2">
-				 <AppSidebar ctx={ctx}
-            filterContext={filterContext}
-            setFilterContext={setFilterContext} />
+				 <AppSidebar ctx={ctx} />
 
           <div className="bg-muted h-14 w-full absolute top-0 " />
           <section className="flex-1 w-full py-12 h-[calc(100vh-theme(spacing.4))] overflow-hidden relative">
···
               {selectedItems.size > 0 && (
                 <Badge variant="default"> {selectedItems.size} selected </Badge>
               )}
-              {Object.keys(filterContext).length > 0 && (
+							{(filterState.filterTags?.length > 0 || filterState.filterProject || filterState.filterDescription) && (
                 <Badge variant="secondary" className="cursor-pointer">
                   {todos.length} items found
                   <button
-                    onClick={() => setFilterContext({})}
+                    onClick={() => clearFilters()}
                     className="hover:bg-muted rounded-full p-1"
                   >
                     ✕

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

···
 } from "@/components/ui/sidebar";
 import { useState, useEffect } from "react";
 import { useQuery } from "@vlcn.io/react";
+import { useFilter } from "@/contexts/filter-context";
 import { Project } from "@/components/ui/project";
 import { Tag } from "@/components/ui/tag";
+
+// Command parser result type based on usage in App.tsx
+type ParsedCommand = {
+  action?: string;
+  description?: string;
+  project?: string;
+  tags?: string[];
+  selection?: any[];
+};
 
 // Helper function to load all visited rooms
 function loadAllRooms(): Set<string> {
···
   window.location.hash = params.toString();
 }
 
-export function AppSidebar({ctx, filterContext, setFilterContext}) {
+export function AppSidebar({ctx}) {
+  const { filterState, toggleProject, toggleTag } = useFilter();
   // Load the visited rooms
   const [visitedRooms, setVisitedRooms] = useState<string[]>([]);
   const [currentRoom, setCurrentRoom] = useState<string>("");
···
     `SELECT DISTINCT project FROM active_todos WHERE project != '' ORDER BY project`
   ).data || [];
 
-	const handleProjectClick = (project) => {
-    // Toggle project selection - if already selected, remove it
-    if (filterContext.filterProject === project) {
-      // Create a new object without the filterProject property
-      const { filterProject, ...restFilterContext } = filterContext;
-      setFilterContext(restFilterContext);
-    } else {
-      // Set the new project
-      setFilterContext({
-        ...filterContext,
-        filterProject: project,
-        filterTemp: false,
-      });
-    }
+	const handleProjectClick = (project, e) => {
+	// Prevent default behavior and stop propagation to keep sidebar open
+	if (e) {
+	  e.preventDefault();
+	  e.stopPropagation();
+	}
+	
+	toggleProject(project);
+	
+    const event = new CustomEvent('filter:update', { 
+      bubbles: true,
+      detail: { action: 'project', project } 
+    });
+    document.dispatchEvent(event);
   };
 
 	const tags = useQuery(
···
     `SELECT DISTINCT value as tag FROM active_todos, json_each(active_todos.tags) ORDER BY tag`
   ).data || [];
 
-	const handleTagClick = (tag) => {
-    const currentTags = filterContext.filterTags || [];
-    const newTags = currentTags.includes(tag)
-      ? currentTags.filter(t => t !== tag)
-      : [...currentTags, tag];
-    
-    setFilterContext({
-      ...filterContext,
-      filterTags: newTags,
-      filterTemp: false,
+	const handleTagClick = (tag, e) => {
+	// Prevent default behavior and stop propagation to keep sidebar open
+	if (e) {
+	  e.preventDefault();
+	  e.stopPropagation();
+	}
+	
+	// Simply toggle the tag - the filter context will handle parsing and updating state
+	toggleTag(tag);
+	
+	  // Dispatch event to notify other components of the filter update
+    const event = new CustomEvent('filter:update', { 
+      bubbles: true,
+      detail: { action: 'tag', tag } 
     });
+    document.dispatchEvent(event);
+  };
+
+  // Create a function to stop click propagation to prevent sidebar from closing
+  const stopPropagation = (e) => {
+    e.stopPropagation();
   };
 
   return (
     <Sidebar>
+      {/* This div ensures all clicks inside the sidebar are captured and don't propagate up */}
+      <div 
+        onMouseDown={stopPropagation} 
+        onClick={stopPropagation}
+        style={{ width: '100%', height: '100%' }}
+      >
       <SidebarHeader />
       <SidebarContent>
         {visitedRooms.length > 0 && (
-          <SidebarGroup>
+          <SidebarGroup onMouseDown={stopPropagation}>
             <SidebarGroupLabel>Rooms</SidebarGroupLabel>
-            <SidebarMenu>
+            <SidebarMenu onMouseDown={stopPropagation}>
               <div className="flex flex-wrap gap-1.5 p-2 max-h-40 overflow-y-auto">
                 {visitedRooms.map((roomId) => (
                   <SidebarMenuItem key={roomId}>
···
             </SidebarMenu>
           </SidebarGroup>
         )}
-			<SidebarGroup>
+			<SidebarGroup onMouseDown={stopPropagation}>
           <SidebarGroupLabel>Projects</SidebarGroupLabel>
           <SidebarMenu>
-					<div className="flex flex-wrap gap-1.5 p-2 max-h-40 overflow-y-auto">
+					<div className="flex flex-wrap gap-1.5 p-2 max-h-40 overflow-y-auto" onMouseDown={(e) => e.stopPropagation()}>
             {projects.map((item) => (
               <SidebarMenuItem key={item.project}>
                 <SidebarMenuButton 
-                  isActive={filterContext.filterProject === item.project}
-                  onClick={() => handleProjectClick(item.project)}
+                  isActive={filterState.filterProject === item.project}
+                  onClick={(e) => handleProjectClick(item.project, e)}
+                  onMouseDown={(e) => e.stopPropagation()}
                 >
                   <Project name={item.project} />
                 </SidebarMenuButton>
···
 						          </div>
           </SidebarMenu>
         </SidebarGroup>
-				<SidebarGroup>
+				<SidebarGroup onMouseDown={stopPropagation}>
           <SidebarGroupLabel>Tags</SidebarGroupLabel>
           <SidebarMenu>
-					<div className="flex flex-wrap gap-1.5 p-2 max-h-40 overflow-y-auto">
+					<div className="flex flex-wrap gap-1.5 p-2 max-h-40 overflow-y-auto" onMouseDown={(e) => e.stopPropagation()}>
             {tags.map((item) => (
               <SidebarMenuItem key={item.tag}>
                 <SidebarMenuButton 
-                  isActive={filterContext.filterTags && filterContext.filterTags.includes(item.tag)}
-                  onClick={() => handleTagClick(item.tag)}
+                  isActive={filterState.filterTags && filterState.filterTags.includes(item.tag)}
+                  onClick={(e) => handleTagClick(item.tag, e)}
+                  onMouseDown={(e) => e.stopPropagation()}
                 >
                   <Tag tag={item.tag} />
                 </SidebarMenuButton>
···
 						          </div>
           </SidebarMenu>
         </SidebarGroup>
-        <SidebarGroup />
+        <SidebarGroup onMouseDown={stopPropagation} />
       </SidebarContent>
       <SidebarFooter />
+      </div>
     </Sidebar>
   );
-}
+}

mast-react-vite/src/contexts/filter-context.tsx

···
+import { createContext, useContext, useState, useEffect } from "react";
+import * as commandParser from "@/lib/command_js.js";
+
+// Command parser result type based on usage in App.tsx
+type ParsedCommand = {
+  action?: string;
+  description?: string;
+  project?: string;
+  tags?: string[];
+  selection?: any[];
+};
+
+type FilterContextType = {
+  // Core state - filter text is the single source of truth
+  filterText: string;
+  setFilterText: (text: string) => void;
+  
+  // Parsed filter state (derived from filterText)
+  filterState: FilterState;
+  
+  // Utility functions
+  clearFilters: () => void;
+  toggleProject: (project: string) => void;
+  toggleTag: (tag: string) => void;
+  getWhereClause: () => { conditions: string[]; params: any[] };
+};
+
+type FilterState = {
+  filterDescription?: string;
+  filterProject?: string;
+  filterTags?: string[];
+};
+
+// Create a default context value
+const defaultContextValue: FilterContextType = {
+  filterText: "",
+  setFilterText: () => {},
+  filterState: {},
+  clearFilters: () => {},
+  toggleProject: () => {},
+  toggleTag: () => {},
+  getWhereClause: () => ({ conditions: [], params: [] }),
+};
+
+const FilterContext = createContext<FilterContextType>(defaultContextValue);
+
+export function FilterProvider({ children }: { children: React.ReactNode }) {
+  // The filter text is the primary state
+  const [filterText, setFilterText] = useState<string>("");
+  // The parsed filter state is derived from the filter text
+  const [filterState, setFilterState] = useState<FilterState>({});
+
+  // Parse the filter text whenever it changes
+  useEffect(() => {
+    if (filterText.trim() === "") {
+      setFilterState({});
+      return;
+    }
+
+    try {
+      // Parse the filter text using the command parser
+      // We prepend "filter" to ensure it's parsed as a filter command
+      const parsed = commandParser.parse("filter " + filterText);
+      
+      if (parsed.action === "filter") {
+        const newState: FilterState = {};
+        
+        if (parsed.description) {
+          newState.filterDescription = parsed.description;
+        }
+        
+        if (parsed.project) {
+          newState.filterProject = parsed.project;
+        }
+        
+        if (parsed.tags && parsed.tags.length > 0) {
+          newState.filterTags = parsed.tags;
+        }
+        
+        setFilterState(newState);
+      }
+    } catch (error) {
+      console.error("Error parsing filter text:", error);
+      // If parsing fails, at least try to extract some information
+      // This is a simple fallback that tries to identify tags and projects
+      const fallbackState: FilterState = {};
+      
+      // Look for both project: pattern and +project pattern (for projects)
+      let projectMatch = filterText.match(/project:([^\s]+)/);
+      if (!projectMatch) {
+        projectMatch = filterText.match(/\+([^\s]+)/);
+      }
+      if (projectMatch) {
+        fallbackState.filterProject = projectMatch[1];
+      }
+      
+      // Look for #tag pattern
+      const tags: string[] = [];
+      const tagMatches = filterText.match(/\#([^\s]+)/g);
+      if (tagMatches) {
+        tagMatches.forEach(match => {
+          tags.push(match.substring(1));
+        });
+        if (tags.length > 0) {
+          fallbackState.filterTags = tags;
+        }
+      }
+      
+      // Anything else is treated as description
+      const remainingText = filterText
+        .replace(/\#[^\s]+/g, "")   // Remove tags
+        .replace(/\+[^\s]+/g, "")   // Remove projects with + prefix
+        .replace(/project:[^\s]+/g, "")  // Remove projects with project: prefix
+        .trim();
+        
+      if (remainingText) {
+        fallbackState.filterDescription = remainingText;
+      }
+      
+      setFilterState(fallbackState);
+    }
+  }, [filterText]);
+
+  // Clear all filters
+  const clearFilters = () => {
+    setFilterText("");
+    setFilterState({});
+  };
+
+  // Toggle project in filter
+  const toggleProject = (project: string) => {
+    // Use simple string operations rather than complex regex
+    if (filterState.filterProject === project) {
+      // Just clear the filter text - simpler than trying to extract parts
+      // This handles the case where we want to remove the current project
+      const parts = filterText.split(' ');
+      // Filter out parts that match this project specification
+      const filtered = parts.filter(part => 
+        part !== `+${project}` && 
+        part !== `project:${project}`
+      );
+      setFilterText(filtered.join(' '));
+    } else {
+      // First remove any existing project specifications
+      const parts = filterText.split(' ');
+      const filtered = parts.filter(part => 
+        !part.startsWith('+') && 
+        !part.startsWith('project:')
+      );
+      // Add the new project
+      filtered.push(`+${project}`);
+      setFilterText(filtered.join(' '));
+    }
+  };
+
+  // Toggle tag in filter
+  const toggleTag = (tag: string) => {
+    // Use simple string operations rather than complex regex
+    if (filterState.filterTags && filterState.filterTags.includes(tag)) {
+      // Remove the tag from the filter text
+      const parts = filterText.split(' ');
+      const filtered = parts.filter(part => part !== `#${tag}`);
+      setFilterText(filtered.join(' '));
+    } else {
+      // Add the tag to the filter text
+      const parts = filterText.split(' ');
+      parts.push(`#${tag}`);
+      setFilterText(parts.join(' '));
+    }
+  };
+
+  // Function to generate WHERE clause for SQL queries
+  const getWhereClause = () => {
+    const conditions: string[] = [];
+    const params: any[] = [];
+
+    if (
+      filterState.filterDescription &&
+      filterState.filterDescription.length > 0
+    ) {
+      conditions.push("description LIKE ?");
+      params.push(`%${filterState.filterDescription}%`);
+    }
+    
+    if (filterState.filterProject && filterState.filterProject.length > 0) {
+      conditions.push("project = ?");
+      params.push(filterState.filterProject);
+    }
+    
+    if (filterState.filterTags && filterState.filterTags.length > 0) {
+      conditions.push(`EXISTS (
+        SELECT 1 FROM json_each(tags) 
+        WHERE json_each.value IN (${filterState.filterTags.map(() => "?").join(",")})
+      )`);
+      params.push(...filterState.filterTags);
+    }
+
+    return { conditions, params };
+  };
+
+  return (
+    <FilterContext.Provider
+      value={{
+        filterText,
+        setFilterText,
+        filterState,
+        clearFilters,
+        toggleProject,
+        toggleTag,
+        getWhereClause,
+      }}
+    >
+      {children}
+    </FilterContext.Provider>
+  );
+}
+
+export const useFilter = (): FilterContextType => {
+  const context = useContext(FilterContext);
+  return context;
+};

mast-react-vite/src/main.tsx

···
 import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm?url";
 import tblrx from "@vlcn.io/rx-tbl";
 import { SelectionProvider } from "@/contexts/selection-context";
+import { FilterProvider } from "@/contexts/filter-context";
 import { useCustomSync } from "@/hooks/use-sync";
 import { SyncStatus } from "@/components/ui/sync-status";
 
···
       </Helmet>
       <main className="h-screen flex flex-col bg-background text-gray-200">
         <SelectionProvider>
-          {/* Use the custom sync component with the database name and room ID */}
-          <CustomSyncComponent dbname={ctx.dbname} roomId={ctx.roomId} />
-          <App ctx={ctx} syncWorker={syncWorker} dbname={ctx.dbname} roomId={ctx.roomId} />
+          <FilterProvider>
+            {/* Use the custom sync component with the database name and room ID */}
+            <CustomSyncComponent dbname={ctx.dbname} roomId={ctx.roomId} />
+            <App ctx={ctx} syncWorker={syncWorker} dbname={ctx.dbname} roomId={ctx.roomId} />
+          </FilterProvider>
         </SelectionProvider>
       </main>
     </>,