filter and search improvements

src/components/FilterBar.tsx

@@ -79,10 +79,14 @@ export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, tr
                     title="Filters & Search"
                 >
                     <div class="relative">
-                        <Search size={18} class={cn("transition-transform duration-300", isOpen() && "scale-110")} />
+                        <Search
-                        {hasActiveFilters() && !isOpen() && (
+                            size={18}
-                            <div class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary animate-pulse border border-background" />
+                            class={cn(
-                        )}
+                                "transition-transform duration-300",
+                                isOpen() && "scale-110",
+                                hasActiveFilters() && "text-primary"
+                            )}
+                        />
                     </div>
                 </PopoverTrigger>
                 <PopoverContent class="w-[calc(100vw-2rem)] sm:w-[480px] p-0 overflow-hidden bg-card border-border shadow-2xl rounded-2xl animate-in fade-in zoom-in-95 duration-200 z-[100]">

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>