task list header changes

Author: joshsny

src/renderer/features/tasks/components/TaskFilterBadges.tsx

@@ -71,7 +71,7 @@ export function TaskFilterBadges({
   };
 
   return (
-    <Flex gap="1" wrap="wrap" align="center" style={{ maxWidth: "60%" }}>
+    <Flex gap="1" wrap="wrap" align="center">
       {badges.map((badge) => {
         const categoryConfig = filterCategories.find(
           (c) => c.category === badge.category,

src/renderer/features/tasks/components/TaskListHeader.tsx

@@ -24,8 +24,8 @@ export function TaskListHeader({
   return (
     <Box pl="2" py="4" className="border-gray-6 border-b">
       <Flex gap="2" align="start" justify="between">
-        <TaskListFilter />
         <Flex align="center" justify="center" gap="2">
+          <TaskListFilter />
           {totalActiveFilterCount > 0 && (
             <Flex gap="2" className="flex-shrink-0">
               <TaskFilterMatchToggle />
@@ -35,6 +35,8 @@ export function TaskListHeader({
               <TaskFilterClearButton />
             </Flex>
           )}
+        </Flex>
+        <Flex align="center" justify="center" gap="2">
           <TaskListDisplayOptions />
           <TaskSearch value={filter} onChange={onFilterChange} />
         </Flex>

src/renderer/features/tasks/components/TaskSearch.tsx

@@ -1,4 +1,3 @@
-import { useTaskStore } from "@features/tasks/stores/taskStore";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { IconButton, Kbd, TextField } from "@radix-ui/themes";
 import { useEffect, useRef } from "react";
@@ -9,26 +8,14 @@ interface TaskSearchProps {
 }
 
 export function TaskSearch({ value, onChange }: TaskSearchProps) {
-  const isExpanded = useTaskStore((state) => state.isSearchExpanded);
-  const setIsExpanded = useTaskStore((state) => state.setIsSearchExpanded);
   const inputRef = useRef<HTMLInputElement>(null);
-  const shouldBeExpanded = isExpanded || value.length > 0;
-
-  const handleExpand = () => {
-    setIsExpanded(true);
-    setTimeout(() => inputRef.current?.focus(), 100);
-  };
 
   const handleClear = () => {
     onChange("");
     setTimeout(() => inputRef.current?.focus(), 0);
   };
 
-  const handleBlur = () => {
-    if (value.length === 0) {
-      setIsExpanded(false);
-    }
-  };
+
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -43,39 +30,25 @@ export function TaskSearch({ value, onChange }: TaskSearchProps) {
           return;
         }
         e.preventDefault();
-        setIsExpanded(true);
         setTimeout(() => inputRef.current?.focus(), 100);
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [setIsExpanded]);
+  }, []);
 
   return (
     <div
       className="transition-all duration-200"
       style={{
-        width: shouldBeExpanded ? "250px" : "32px",
+        width: "250px",
       }}
     >
-      {!shouldBeExpanded ? (
-        <IconButton
-          size="1"
-          variant="outline"
-          color="gray"
-          onClick={handleExpand}
-          type="button"
-          title="Search tasks (⌘F)"
-        >
-          <MagnifyingGlassIcon />
-        </IconButton>
-      ) : (
         <TextField.Root
           ref={inputRef}
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          onBlur={handleBlur}
           placeholder="Search tasks..."
           size="1"
         >
@@ -100,7 +73,6 @@ export function TaskSearch({ value, onChange }: TaskSearchProps) {
             </TextField.Slot>
           )}
         </TextField.Root>
-      )}
     </div>
   );
 }

src/renderer/features/tasks/stores/taskStore.ts

@@ -72,7 +72,6 @@ export const useTaskStore = create<TaskState>()(
       filterMatchMode: "all",
       filterSearchQuery: "",
       filterMenuSelectedIndex: -1,
-      isSearchExpanded: false,
       isFilterDropdownOpen: false,
       editingFilterBadgeKey: null,
 
@@ -209,7 +208,6 @@ export const useTaskStore = create<TaskState>()(
       setFilterSearchQuery: (query) => set({ filterSearchQuery: query }),
       setFilterMenuSelectedIndex: (index) =>
         set({ filterMenuSelectedIndex: index }),
-      setIsSearchExpanded: (expanded) => set({ isSearchExpanded: expanded }),
       setIsFilterDropdownOpen: (open) => set({ isFilterDropdownOpen: open }),
       setEditingFilterBadgeKey: (key) => set({ editingFilterBadgeKey: key }),
     }),

src/renderer/features/tasks/stores/taskStore.types.ts

@@ -71,7 +71,6 @@ export interface TaskState {
   filterMatchMode: FilterMatchMode;
   filterSearchQuery: string;
   filterMenuSelectedIndex: number;
-  isSearchExpanded: boolean;
   isFilterDropdownOpen: boolean;
   editingFilterBadgeKey: string | null;
 
@@ -118,7 +117,6 @@ export interface TaskState {
   setFilterMatchMode: (mode: FilterMatchMode) => void;
   setFilterSearchQuery: (query: string) => void;
   setFilterMenuSelectedIndex: (index: number) => void;
-  setIsSearchExpanded: (expanded: boolean) => void;
   setIsFilterDropdownOpen: (open: boolean) => void;
   setEditingFilterBadgeKey: (key: string | null) => void;
 }