From c38e6f35d3f34848961538344f78082bd8bbe044 Mon Sep 17 00:00:00 2001
From: reverb256 <reverb256@users.noreply.github.com>
Date: Thu, 9 Apr 2026 01:35:04 -0500
Subject: [PATCH] feat: add search bar to skills view

Skills list can be long with many built-in and local skills.
Added a search bar at the top of the skills view that filters
by skill name and description. Uses the same TextField pattern
as the archived tasks view.

Fixes #1526

Signed-off-by: reverb256 <reverb256@users.noreply.github.com>
---
 .../features/skills/components/SkillsView.tsx | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/code/src/renderer/features/skills/components/SkillsView.tsx b/apps/code/src/renderer/features/skills/components/SkillsView.tsx
index 63653f3a4..34d1a7bef 100644
--- a/apps/code/src/renderer/features/skills/components/SkillsView.tsx
+++ b/apps/code/src/renderer/features/skills/components/SkillsView.tsx
@@ -1,7 +1,7 @@
 import { ResizableSidebar } from "@components/ResizableSidebar";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
-import { Lightbulb } from "@phosphor-icons/react";
-import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
+import { Lightbulb, MagnifyingGlass } from "@phosphor-icons/react";
+import { Box, Flex, ScrollArea, Text, TextField } from "@radix-ui/themes";
 import { useTRPC } from "@renderer/trpc";
 import type { SkillInfo, SkillSource } from "@shared/types/skills";
 import { useQuery } from "@tanstack/react-query";
@@ -19,6 +19,7 @@ export function SkillsView() {
   );
 
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
 
   const {
     width: sidebarWidth,
@@ -48,14 +49,22 @@ export function SkillsView() {
     for (const source of SOURCE_ORDER) {
       map.set(source, []);
     }
+    const query = searchQuery.trim().toLowerCase();
     for (const skill of skills) {
+      if (
+        query &&
+        !skill.name.toLowerCase().includes(query) &&
+        !(skill.description?.toLowerCase().includes(query) ?? false)
+      ) {
+        continue;
+      }
       const list = map.get(skill.source);
       if (list) {
         list.push(skill);
       }
     }
     return map;
-  }, [skills]);
+  }, [skills, searchQuery]);
 
   const headerContent = useMemo(
     () => (
@@ -86,6 +95,19 @@ export function SkillsView() {
             style={{ height: "100%" }}
           >
             <Box px="4" py="3">
+              <Box pb="3">
+                <TextField.Root
+                  size="2"
+                  placeholder="Search skills..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="text-[13px]"
+                >
+                  <TextField.Slot>
+                    <MagnifyingGlass size={14} />
+                  </TextField.Slot>
+                </TextField.Root>
+              </Box>
               {skills.length === 0 && !isLoading ? (
                 <Flex
                   align="center"