filter and search improvements

src/components/NotesSidebar.tsx

@@ -1,5 +1,5 @@
 import { type Component, createMemo, createResource, For, Show } from "solid-js";
-import { store, getFavoriteTag } from "@/store";
+import { store, setNoteFilter, getFavoriteTag } from "@/store";
 import { pb } from "@/lib/pocketbase";
 import { Plus, Lock, Star } from "lucide-solid";
 import { Button } from "@/components/ui/button";
@@ -189,15 +189,24 @@ export const NotesSidebar: Component<{
                 {/* Header */}
                 <div class="p-4 border-b border-border bg-card/50 backdrop-blur flex justify-between items-center gap-2">
                     <div class="flex-1">
+                        <input
+                            type="text"
+                            placeholder="Search notes, tags..."
+                            value={store.noteFilter.query}
+                            onInput={(e) => setNoteFilter({ query: e.currentTarget.value })}
+                            class="w-full bg-muted/30 border border-border/50 rounded-xl px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 transition-all placeholder:text-muted-foreground/30"
+                        />
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
                         <FilterBar
                             mode="notes"
                             class="relative top-0 right-0 z-0"
-                            triggerClass="w-full justify-start gap-2 px-3 h-9 bg-muted/40 hover:bg-muted/60 border-border/40"
+                            triggerClass="h-9 w-9 p-0 bg-muted/40 hover:bg-muted/60 border-border/40"
                         />
+                        <Button onClick={handleCreateNote} size="sm" variant="default" class="h-9 w-9 p-0 shrink-0 shadow-sm rounded-xl">
+                            <Plus size={18} />
+                        </Button>
                     </div>
-                    <Button onClick={handleCreateNote} size="sm" variant="default" class="h-9 w-9 p-0 shrink-0 shadow-sm rounded-xl">
-                        <Plus size={18} />
-                    </Button>
                 </div>
             </div>