added search/filter and fixed horizontal fit for mobile.

src/components/FilterBar.tsx

@@ -0,0 +1,243 @@
+import { type Component, createSignal, For, Show } from "solid-js";
+import { Search, X, Hash, ChevronDown, ArrowUpCircle, Clock } from "lucide-solid";
+import { store, setFilter, clearFilter } from "@/store";
+import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
+import { Badge } from "./ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+
+export const FilterBar: Component = () => {
+    const [isExpanded, setIsExpanded] = createSignal(false);
+
+    const hasActiveFilters = () => {
+        const f = store.filter;
+        return f.query !== "" || f.tags.length > 0 || f.priorityMin !== 1 || f.priorityMax !== 10 || f.urgencyMin !== 1 || f.urgencyMax !== 10;
+    };
+
+    const allTags = () => Object.keys(store.tagDefinitions || {}).sort();
+
+    const FilterControls: Component<{ class?: string }> = (props) => (
+        <div class={cn("flex flex-col md:flex-row items-stretch md:items-center gap-3", props.class)}>
+            {/* Main Search */}
+            <div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0 min-w-0">
+                <Search size={16} class="text-muted-foreground shrink-0" />
+                <input
+                    type="text"
+                    placeholder="Search tasks..."
+                    value={store.filter.query}
+                    onInput={(e) => setFilter({ query: e.currentTarget.value })}
+                    class="bg-transparent border-none focus:ring-0 text-sm flex-1 md:w-40 h-8 outline-none placeholder:text-muted-foreground/50 min-w-0"
+                    autofocus
+                />
+            </div>
+
+            {/* Priority Range */}
+            <div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0">
+                <span class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Priority</span>
+                <div class="flex items-center gap-1">
+                    <Select
+                        value={store.filter.priorityMin.toString()}
+                        onChange={(val) => val && setFilter({ priorityMin: parseInt(val) })}
+                        options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                    >
+                        <SelectTrigger class="h-7 w-12 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground flex items-center gap-1">
+                            <ArrowUpCircle size={12} class="text-muted-foreground/70" />
+                            <span>{store.filter.priorityMin}</span>
+                        </SelectTrigger>
+                        <SelectContent />
+                    </Select>
+                    <span class="text-muted-foreground/50">-</span>
+                    <Select
+                        value={store.filter.priorityMax.toString()}
+                        onChange={(val) => val && setFilter({ priorityMax: parseInt(val) })}
+                        options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
+                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                    >
+                        <SelectTrigger class="h-7 w-8 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground justify-center">
+                            <span>{store.filter.priorityMax}</span>
+                        </SelectTrigger>
+                        <SelectContent />
+                    </Select>
+                </div>
+            </div>
+
+            {/* Urgency Range */}
+            <div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0">
+                <span class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Urgency</span>
+                <div class="flex items-center gap-1">
+                    <Select
+                        value={store.filter.urgencyMin.toString()}
+                        onChange={(val) => val && setFilter({ urgencyMin: parseInt(val) })}
+                        options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                    >
+                        <SelectTrigger class="h-7 w-12 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground flex items-center gap-1">
+                            <Clock size={12} class="text-muted-foreground/70" />
+                            <span>{store.filter.urgencyMin}</span>
+                        </SelectTrigger>
+                        <SelectContent />
+                    </Select>
+                    <span class="text-muted-foreground/50">-</span>
+                    <Select
+                        value={store.filter.urgencyMax.toString()}
+                        onChange={(val) => val && setFilter({ urgencyMax: parseInt(val) })}
+                        options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
+                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                    >
+                        <SelectTrigger class="h-7 w-8 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground justify-center">
+                            <span>{store.filter.urgencyMax}</span>
+                        </SelectTrigger>
+                        <SelectContent />
+                    </Select>
+                </div>
+            </div>
+
+            {/* Tags */}
+            <div class="px-2 flex items-center gap-2 min-w-[120px]">
+                <Hash size={14} class="text-muted-foreground" />
+                <div class="flex flex-wrap gap-1 max-w-[200px]">
+                    <Show when={store.filter.tags.length === 0}>
+                        <Select
+                            value=""
+                            onChange={(val) => {
+                                if (val && !store.filter.tags.includes(val)) {
+                                    setFilter({ tags: [...store.filter.tags, val] });
+                                }
+                            }}
+                            options={allTags()}
+                            placeholder="Add Tag..."
+                            itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                        >
+                            <SelectTrigger class="h-7 p-0 bg-transparent border-none shadow-none focus:ring-0 text-[10px] italic text-muted-foreground">
+                                <span>Add Tag...</span>
+                            </SelectTrigger>
+                            <SelectContent />
+                        </Select>
+                    </Show>
+                    <For each={store.filter.tags}>
+                        {(tag) => (
+                            <Badge
+                                variant="secondary"
+                                class="h-5 px-1 text-[10px] gap-0.5 cursor-pointer hover:bg-destructive/20 border-border/50"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setFilter({ tags: store.filter.tags.filter(t => t !== tag) });
+                                }}
+                            >
+                                {tag}
+                                <X size={8} />
+                            </Badge>
+                        )}
+                    </For>
+                    <Show when={store.filter.tags.length > 0}>
+                        <Select
+                            value=""
+                            onChange={(val) => {
+                                if (val && !store.filter.tags.includes(val)) {
+                                    setFilter({ tags: [...store.filter.tags, val] });
+                                }
+                            }}
+                            options={allTags()}
+                            placeholder="+"
+                            itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                        >
+                            <SelectTrigger class="h-5 w-5 p-0 bg-muted/50 border-none shadow-none focus:ring-0 text-[10px] rounded-full flex items-center justify-center">
+                                <span>+</span>
+                            </SelectTrigger>
+                            <SelectContent />
+                        </Select>
+                    </Show>
+                </div>
+            </div>
+
+            {/* Actions for Desktop */}
+            <div class="hidden md:flex items-center gap-1 pl-2 ml-auto">
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    class="h-8 w-8 text-muted-foreground hover:text-destructive"
+                    onClick={clearFilter}
+                    title="Clear all filters"
+                >
+                    <X size={16} />
+                </Button>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    class="h-8 w-8 text-muted-foreground hover:text-foreground"
+                    onClick={() => setIsExpanded(false)}
+                >
+                    <ChevronDown size={16} class="rotate-90" />
+                </Button>
+            </div>
+
+            {/* Clear All for Mobile */}
+            <div class="flex md:hidden items-center pt-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    class="w-full text-xs h-8 gap-2"
+                    onClick={clearFilter}
+                >
+                    <X size={14} />
+                    Clear All Filters
+                </Button>
+            </div>
+        </div>
+    );
+
+    return (
+        <div class="flex items-center gap-2">
+            {/* Desktop View: Inline expansion */}
+            <div class="hidden md:flex items-center">
+                {!isExpanded() ? (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        class={cn(
+                            "h-9 px-3 gap-2 text-muted-foreground hover:text-foreground transition-all duration-300",
+                            hasActiveFilters() && "text-primary bg-primary/10 hover:bg-primary/20"
+                        )}
+                        onClick={() => setIsExpanded(true)}
+                    >
+                        <Search size={18} />
+                        <span class="text-sm font-medium">Filter</span>
+                        {hasActiveFilters() && (
+                            <div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+                        )}
+                    </Button>
+                ) : (
+                    <div class="bg-card border border-border/50 p-2 rounded-xl shadow-lg animate-in fade-in slide-in-from-top-4 duration-300 w-auto overflow-hidden">
+                        <FilterControls />
+                    </div>
+                )}
+            </div>
+
+            {/* Mobile View: Popover */}
+            <div class="flex md:hidden items-center">
+                <Popover>
+                    <PopoverTrigger
+                        as={Button}
+                        variant="ghost"
+                        size="sm"
+                        class={cn(
+                            "h-9 px-3 gap-2 text-muted-foreground hover:text-foreground transition-all duration-300",
+                            hasActiveFilters() && "text-primary bg-primary/10 hover:bg-primary/20"
+                        )}
+                    >
+                        <Search size={18} />
+                        <span class="text-sm font-medium">Filter</span>
+                        {hasActiveFilters() && (
+                            <div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+                        )}
+                    </PopoverTrigger>
+                    <PopoverContent class="w-[calc(100vw-2rem)] sm:w-96 p-4">
+                        <FilterControls class="w-full" />
+                    </PopoverContent>
+                </Popover>
+            </div>
+        </div>
+    );
+};

src/components/Layout.tsx

@@ -7,6 +7,7 @@ const TaskDetail = lazy(() => import("./TaskDetail").then(m => ({ default: m.Tas
 const QuickEntry = lazy(() => import("./QuickEntry").then(m => ({ default: m.QuickEntry })));
 import { Button } from "./ui/button";
 import { cn } from "@/lib/utils";
+import { FilterBar } from "./FilterBar";
 
 interface LayoutProps {
     children: JSX.Element;
@@ -32,7 +33,7 @@ export const Layout: Component<LayoutProps> = (props) => {
     const activeTask = () => store.tasks.find(t => t.id === activeTaskId());
 
     return (
-        <div class="flex h-screen w-full bg-background overflow-hidden relative font-sans antialiased text-foreground">
+        <div class="flex h-screen w-full min-w-0 bg-background overflow-hidden relative font-sans antialiased text-foreground">
             <Sidebar
                 currentView={props.currentView}
                 setView={props.setView}
@@ -62,8 +63,13 @@ export const Layout: Component<LayoutProps> = (props) => {
                 )}
 
                 {/* Main Content Area */}
-                <main class="flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6 lg:p-8 pb-32 sm:pb-6">
+                <main class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden pb-32 sm:pb-6 relative scroll-smooth">
-                    <div class="max-w-5xl mx-auto w-full">
+                    <div class="w-full max-w-screen-2xl mx-auto p-3 sm:p-6 lg:p-10 space-y-6 sm:space-y-8">
+                        {/* Global Top Header for Filter/Search */}
+                        <div class="sticky top-0 z-40 flex items-center justify-end py-2 -mx-3 px-3 md:relative md:top-auto md:z-auto md:py-0 md:mx-0 md:px-0 bg-background/80 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
+                            <FilterBar />
+                        </div>
+
                         {props.children}
                     </div>
                 </main>

src/components/TagPicker.tsx

@@ -53,7 +53,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
                 <Hash size={14} />
                 <span>Add Tag</span>
             </PopoverTrigger>
-            <PopoverContent class="p-3 w-[260px] flex flex-col gap-3" align="start">
+            <PopoverContent class="p-3 w-[min(calc(100vw-2rem),280px)] flex flex-col gap-3" align="start">
                 <div class="space-y-1.5">
                     <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
                     <div class="relative">

src/components/TaskCard.tsx

@@ -24,43 +24,43 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
     return (
         <div
             class={cn(
-                "group flex items-center p-4 bg-card border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer",
+                "group flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
                 props.task.completed && "opacity-60"
             )}
             onClick={() => setActiveTaskId(props.task.id)}
         >
             <button
                 onClick={(e) => { e.stopPropagation(); toggleTask(props.task.id); }}
-                class="mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
+                class="mr-3 sm:mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
             >
                 {props.task.completed ? (
-                    <CheckCircle2 class="text-green-500" size={24} />
+                    <CheckCircle2 class="text-green-500" size={22} />
                 ) : (
-                    <Circle size={24} />
+                    <Circle size={22} />
                 )}
             </button>
 
-            <div class="flex-1 min-w-0">
+            <div class="flex-1 min-w-0 flex flex-col">
                 <h3 class={cn(
-                    "text-base font-semibold truncate transition-all",
+                    "text-sm sm:text-base font-semibold truncate transition-all",
                     props.task.completed && "line-through"
                 )}>
                     {props.task.title}
                 </h3>
-                <div class="flex items-center space-x-4 mt-1">
+                <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-1 min-w-0">
                     {/* Priority */}
-                    <div class="flex items-center gap-1.5 min-w-[32px]">
+                    <div class="flex items-center gap-1.5 shrink-0">
                         <ArrowUpCircle size={12} class="text-primary opacity-60" />
-                        <span>P{props.task.priority}</span>
+                        <span class="text-[10px] font-medium">P{props.task.priority}</span>
                     </div>
 
                     {/* Tags */}
                     {props.task.tags && props.task.tags.length > 0 && (
-                        <div class="flex items-center gap-1">
+                        <div class="flex flex-wrap items-center gap-1 min-w-0">
                             <For each={props.task.tags}>
                                 {(tag) => (
-                                    <Badge variant="secondary" class="h-5 px-1.5 text-[10px] gap-1 bg-muted/50 border-border/50">
+                                    <Badge variant="secondary" class="h-4 px-1.5 text-[9px] gap-1 bg-muted/50 border-border/50 shrink-0">
-                                        <div class={cn("w-1.5 h-1.5 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
+                                        <div class={cn("w-1 h-1 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
                                         {tag}
                                     </Badge>
                                 )}
@@ -69,11 +69,11 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                     )}
 
                     {/* Due Date + Urgency Slide-out */}
-                    <div class="relative group/date flex items-center h-6 cursor-help">
+                    <div class="relative group/date flex items-center h-5 cursor-help shrink-0 min-w-0">
                         {/* Due Date - Static Layer on Top */}
-                        <div class="flex items-center space-x-1.5 text-[10px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
+                        <div class="flex items-center space-x-1 text-[9px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
-                            <Clock size={12} class="text-primary/60" />
+                            <Clock size={11} class="text-primary/60" />
-                            <span>{formattedDate()}</span>
+                            <span class="truncate">{formattedDate()}</span>
                         </div>
 
                         {/* Urgency Number - Slides out from behind with fade */}
@@ -81,7 +81,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                             "absolute left-4 top-0 bottom-0 flex items-center transition-all duration-300 ease-out z-10 opacity-0 group-hover/date:opacity-100 group-hover/date:left-full whitespace-nowrap",
                             urgencyColor()
                         )}>
-                            <span class="text-[10px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
+                            <span class="text-[9px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
                                 Urgency {urgencyLevel()}
                             </span>
                         </div>
@@ -89,9 +89,9 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                 </div>
             </div>
 
-            <div class="ml-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+            <div class="ml-2 sm:ml-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
-                <button class="p-2 hover:bg-muted rounded-full transition-colors">
+                <button class="p-1.5 hover:bg-muted rounded-full transition-colors">
-                    <div class="w-1.5 h-1.5 bg-muted-foreground rounded-full" />
+                    <div class="w-1 h-1 bg-muted-foreground rounded-full" />
                 </button>
             </div>
         </div>

src/components/TaskDetail.tsx

@@ -107,7 +107,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                     />
 
                     {/* Properties Bar */}
-                    <div class="flex flex-row items-center gap-1.5 sm:gap-4 mt-2 text-sm overflow-x-auto no-scrollbar flex-nowrap">
+                    <div class="flex flex-wrap items-center gap-1.5 sm:gap-4 mt-2 text-sm">
                         {/* Priority */}
                         <div class="flex items-center gap-1 group shrink-0">
                             <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
@@ -224,19 +224,19 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                     </div>
 
                     {/* Tags Row */}
-                    <div class="flex items-center gap-2 mt-4 overflow-x-auto no-scrollbar pb-1">
+                    <div class="flex flex-wrap items-center gap-2 mt-4 pb-1">
                         <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 shrink-0">Tags</span>
-                        <div class="flex items-center gap-1.5 min-w-0">
+                        <div class="flex flex-wrap items-center gap-1.5 min-w-0">
                             <TagPicker
                                 selectedTags={props.task.tags || []}
                                 onTagsChange={updateTags}
                             />
-                            <div class="flex items-center gap-1.5 flex-nowrap overflow-x-auto no-scrollbar">
+                            <div class="flex flex-wrap items-center gap-1.5">
                                 <For each={props.task.tags || []}>
                                     {(tag) => (
                                         <Badge
                                             variant="secondary"
-                                            class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap"
+                                            class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
                                             onClick={() => updateTags((props.task.tags || []).filter(t => t !== tag))}
                                         >
                                             <div class={cn("w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />

src/components/ui/button.tsx

@@ -39,6 +39,7 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
     type?: "button" | "submit" | "reset"
     disabled?: boolean
+    title?: string
 }
 
 const Button = (props: ButtonProps) => {

src/store/index.ts

@@ -25,6 +25,15 @@ export interface Task {
     deletedAt?: number; // Timestamp of soft delete
 }
 
+export interface Filter {
+    query: string;
+    tags: string[];
+    priorityMin: number;
+    priorityMax: number;
+    urgencyMin: number;
+    urgencyMax: number;
+}
+
 interface TaskStore {
     tasks: Task[];
     pWeight: number;
@@ -32,6 +41,7 @@ interface TaskStore {
     matrixScaleDays: number;
     prefId?: string; // ID of the user_preferences record
     tagDefinitions?: Record<string, number>;
+    filter: Filter;
 }
 
 // Initial empty state
@@ -41,8 +51,43 @@ export const [store, setStore] = createStore<TaskStore>({
     uWeight: 1.0,
     matrixScaleDays: 30,
     tagDefinitions: {}, // Map<Name, Value 0-10>
+    filter: {
+        query: "",
+        tags: [],
+        priorityMin: 1,
+        priorityMax: 10,
+        urgencyMin: 1,
+        urgencyMax: 10
+    }
 });
 
+export const matchesFilter = (task: Task) => {
+    const f = store.filter;
+
+    // Query search (title or content)
+    if (f.query) {
+        const q = f.query.toLowerCase();
+        const inTitle = task.title.toLowerCase().includes(q);
+        const inContent = task.content?.toLowerCase().includes(q);
+        if (!inTitle && !inContent) return false;
+    }
+
+    // Tags (OR logic if multiple selected?)
+    if (f.tags.length > 0) {
+        const hasTag = f.tags.some(tag => task.tags?.includes(tag));
+        if (!hasTag) return false;
+    }
+
+    // Priority
+    if (task.priority < f.priorityMin || task.priority > f.priorityMax) return false;
+
+    // Urgency (calculated)
+    const urgency = calculateUrgencyFromDate(task.dueDate);
+    if (urgency < f.urgencyMin || urgency > f.urgencyMax) return false;
+
+    return true;
+};
+
 // Auto-persist changes to localStorage (wrapped in root to avoid console warning)
 createRoot(() => {
     createEffect(() => {
@@ -527,6 +572,21 @@ export const renameTagDefinition = async (oldName: string, newName: string) => {
 };
 
 
+export const setFilter = (update: Partial<Filter>) => {
+    setStore("filter", (f) => ({ ...f, ...update }));
+};
+
+export const clearFilter = () => {
+    setStore("filter", {
+        query: "",
+        tags: [],
+        priorityMin: 1,
+        priorityMax: 10,
+        urgencyMin: 1,
+        urgencyMax: 10
+    });
+};
+
 // Legacy cleanup - We don't need local storage persistence setup anymore
 export const setupPersistence = () => {
     // Moved logic to initStore which is called on auth.

src/views/CriticalView.tsx

@@ -1,13 +1,15 @@
 import { type Component, For, createMemo } from "solid-js";
-import { store, getCombinedScore } from "@/store";
+import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
 
 export const CriticalView: Component = () => {
     const sortedTasks = createMemo(() => {
-        return [...store.tasks].filter(t => !t.deletedAt).sort((a, b) => {
+        return [...store.tasks]
-            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            .filter(t => !t.deletedAt && matchesFilter(t))
-            return getCombinedScore(b) - getCombinedScore(a);
+            .sort((a, b) => {
-        });
+                if (a.completed !== b.completed) return a.completed ? 1 : -1;
+                return getCombinedScore(b) - getCombinedScore(a);
+            });
     });
 
     return (

src/views/MatrixView.tsx

@@ -1,10 +1,10 @@
 import { type Component, For, createMemo } from "solid-js";
-import { store, calculateUrgencyScore, setActiveTaskId, setStore, getCombinedScore } from "@/store";
+import { store, calculateUrgencyScore, setActiveTaskId, setStore, getCombinedScore, matchesFilter } from "@/store";
 import { cn } from "@/lib/utils";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 
 export const MatrixView: Component = () => {
-    const activeTasks = createMemo(() => store.tasks.filter(t => !t.completed && !t.deletedAt));
+    const activeTasks = createMemo(() => store.tasks.filter(t => !t.completed && !t.deletedAt && matchesFilter(t)));
 
     const scaleOptions = ["1", "7", "30", "60", "90"];
 
@@ -15,12 +15,12 @@ export const MatrixView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Urgency vs Priority mapping.</p>
             </header>
 
-            <div class="flex-1 relative border-2 border-dashed border-muted rounded-3xl overflow-hidden bg-muted/20">
+            <div class="flex-1 relative border-2 border-dashed border-muted rounded-2xl md:rounded-3xl overflow-hidden bg-muted/20">
                 {/* Axis Labels */}
-                <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-2 z-30">
+                <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-1 md:gap-2 z-30 w-[calc(100%-2rem)] justify-center">
-                    <span>← Soon</span>
+                    <span class="truncate">← Soon</span>
-                    <div class="flex items-center gap-1 bg-background/50 backdrop-blur-sm px-2 py-0.5 rounded-full border border-border/50 group hover:bg-background/80 transition-colors cursor-pointer">
+                    <div class="flex items-center gap-1 bg-background/50 backdrop-blur-sm px-1.5 md:px-2 py-0.5 rounded-full border border-border/50 group hover:bg-background/80 transition-colors cursor-pointer shrink-0">
-                        <span class="text-[9px]">Time:</span>
+                        <span class="text-[8px] md:text-[9px]">Time:</span>
                         <Select
                             value={store.matrixScaleDays.toString()}
                             onChange={(val) => val && setStore("matrixScaleDays", parseInt(val))}
@@ -32,15 +32,15 @@ export const MatrixView: Component = () => {
                                 </SelectItem>
                             )}
                         >
-                            <SelectTrigger class="h-auto p-0 min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[10px] font-black text-foreground">
+                            <SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[8px] md:text-[10px] font-black text-foreground">
                                 <span>{store.matrixScaleDays} {store.matrixScaleDays === 1 ? 'day' : 'days'}</span>
                             </SelectTrigger>
                             <SelectContent class="z-[150]" />
                         </Select>
                     </div>
-                    <span>Later →</span>
+                    <span class="truncate">Later →</span>
                 </div>
-                <div class="absolute left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 pointer-events-none">
+                <div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[8px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
                     ← Low (Priority) High →
                 </div>
 

src/views/PriorityView.tsx

@@ -1,14 +1,16 @@
 import { type Component, For, createMemo } from "solid-js";
-import { store, getCombinedScore } from "@/store";
+import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
 
 export const PriorityView: Component = () => {
     const sortedTasks = createMemo(() => {
-        return [...store.tasks].filter(t => !t.deletedAt).sort((a, b) => {
+        return [...store.tasks]
-            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            .filter(t => !t.deletedAt && matchesFilter(t))
-            // Use combined score to account for priority, urgency, and tags
+            .sort((a, b) => {
-            return getCombinedScore(b) - getCombinedScore(a);
+                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-        });
+                // Use combined score to account for priority, urgency, and tags
+                return getCombinedScore(b) - getCombinedScore(a);
+            });
     });
 
     return (

src/views/SettingsView.tsx

@@ -12,7 +12,7 @@ import { createSignal } from "solid-js";
 
 export const SettingsView: Component = () => {
     return (
-        <div class="px-6 py-10 max-w-2xl mx-auto space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-500">
+        <div class="py-10 max-w-2xl mx-auto space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-500">
             <header class="space-y-1 flex items-center justify-between">
                 <div>
                     <h1 class="text-3xl font-bold tracking-tight">Settings</h1>

src/views/UrgencyView.tsx

@@ -1,17 +1,19 @@
 import { type Component, For, createMemo } from "solid-js";
-import { store, calculateUrgencyScore, getCombinedScore } from "@/store";
+import { store, calculateUrgencyScore, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
 
 export const UrgencyView: Component = () => {
     const sortedTasks = createMemo(() => {
-        return [...store.tasks].filter(t => !t.deletedAt).sort((a, b) => {
+        return [...store.tasks]
-            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            .filter(t => !t.deletedAt && matchesFilter(t))
-            const uA = calculateUrgencyScore(a.dueDate);
+            .sort((a, b) => {
-            const uB = calculateUrgencyScore(b.dueDate);
+                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-            if (uA !== uB) return uB - uA;
+                const uA = calculateUrgencyScore(a.dueDate);
-            // Tie-break with combined score (Priority + Tags)
+                const uB = calculateUrgencyScore(b.dueDate);
-            return getCombinedScore(b) - getCombinedScore(a);
+                if (uA !== uB) return uB - uA;
-        });
+                // Tie-break with combined score (Priority + Tags)
+                return getCombinedScore(b) - getCombinedScore(a);
+            });
     });
 
     return (