feat(settings): add item search (#1592)

Adds item-level search inside Settings so users can find concrete settings like provider auth, agent mode, terminal font size, tunnel options, notification events, and similar controls instead of only filtering top-level pages.
Groups search results by Settings page and shows localized labels plus optional descriptions where useful.
Supports keyboard navigation with Arrow Up/Down, Enter, and Escape, matching the existing autocomplete interaction style.
Opens the correct Settings page or split-page draft state before scrolling to the matching control.
Highlights the matched setting with a subtle token-based background so users can see where they landed without an aggressive outline.
Adds explicit data-settings-item anchors across Settings pages and a centralized search registry with runtime/mobile availability guards.
Updates Settings UI skill guidance so future Settings changes keep search registry entries, anchors, localization, and availability guards in sync.

packages/ui/src/components/sections/projects/ProjectsPage.tsx

@@ -259,7 +259,7 @@ export const ProjectsPage: React.FC = () => {
           <section className="px-2 pb-2 pt-0 space-y-0.5">
             
             {/* Name */}
-            <div className="py-1.5">
+            <div data-settings-item="projects.name" className="py-1.5">
               <div className="flex min-w-0 flex-col">
                 <span className="typography-ui-label text-foreground">{t('settings.projects.page.field.projectName')}</span>
               </div>
@@ -274,7 +274,7 @@ export const ProjectsPage: React.FC = () => {
             </div>
 
             {/* Color */}
-            <div className="py-1.5">
+            <div data-settings-item="projects.accent-color" className="py-1.5">
               <div className="flex min-w-0 flex-col">
                 <span className="typography-ui-label text-foreground">{t('settings.projects.page.field.accentColor')}</span>
               </div>
@@ -311,7 +311,7 @@ export const ProjectsPage: React.FC = () => {
             </div>
 
             {/* Icon */}
-            <div className="py-1.5">
+            <div data-settings-item="projects.icon" className="py-1.5">
               <div className="flex min-w-0 flex-col">
                 <span className="typography-ui-label text-foreground">{t('settings.projects.page.field.projectIcon')}</span>
               </div>
@@ -482,7 +482,7 @@ export const ProjectsPage: React.FC = () => {
         </div>
 
         {/* Worktree Group */}
-        <div className="mb-8">
+        <div data-settings-item="projects.worktree" className="mb-8">
           <section className="px-2 pb-2 pt-0">
             {selectedProjectRef && <ProjectActionsSection projectRef={selectedProjectRef} />}
           </section>