Add fuzzy search to expense account selector

Users can now type to search accounts instead of manually navigating
the hierarchy. Uses existing FuzzySearch component with Fuse.js.
Search matches against account names and descriptions. The hierarchical
browser remains available when the search input is empty.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/modules/expenses/components/AccountSelector.vue

@@ -1,5 +1,54 @@
 <template>
   <div class="space-y-4">
+    <!-- Fuzzy search input -->
+    <FuzzySearch
+      :data="allLeafAccounts"
+      :options="searchOptions"
+      placeholder="Search accounts..."
+      :show-result-count="false"
+      @results="handleSearchResults"
+      @search="handleSearchQuery"
+    />
+
+    <!-- Search results mode -->
+    <div v-if="isSearching" class="border border-border rounded-lg bg-card">
+      <div v-if="searchResults.length > 0" class="divide-y divide-border">
+        <button
+          v-for="account in searchResults"
+          :key="account.id"
+          @click="selectAccount(account)"
+          type="button"
+          class="w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors text-left"
+        >
+          <div class="flex items-center gap-3">
+            <FileText class="h-5 w-5 text-muted-foreground" />
+            <div>
+              <p class="font-medium text-foreground">
+                {{ getAccountDisplayName(account.name) }}
+              </p>
+              <p class="text-xs text-muted-foreground">
+                {{ formatAccountPath(account.name) }}
+              </p>
+              <p
+                v-if="account.description"
+                class="text-sm text-muted-foreground"
+              >
+                {{ account.description }}
+              </p>
+            </div>
+          </div>
+          <Badge variant="outline" class="text-xs">
+            {{ account.account_type }}
+          </Badge>
+        </button>
+      </div>
+      <div v-else class="py-8 text-center text-sm text-muted-foreground">
+        No matching accounts
+      </div>
+    </div>
+
+    <!-- Browse mode (when not searching) -->
+    <template v-else>
       <!-- Breadcrumb showing current path -->
       <div v-if="selectedPath.length > 0" class="flex items-center gap-2 text-sm">
         <Button
@@ -118,6 +167,7 @@
           <p class="text-sm text-muted-foreground">No accounts available</p>
         </div>
       </div>
+    </template>
 
     <!-- Selected account display -->
     <div
@@ -140,6 +190,8 @@
 import { ref, computed, onMounted } from 'vue'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { FuzzySearch } from '@/components/ui/fuzzy-search'
+import type { FuzzySearchOptions } from '@/composables/useFuzzySearch'
 import {
   ChevronLeft,
   ChevronRight,
@@ -179,25 +231,90 @@ const accountHierarchy = ref<AccountNode[]>([])
 const selectedPath = ref<AccountNode[]>([])
 const selectedAccount = ref<Account | null>(props.modelValue ?? null)
 
+// Search state
+const isSearching = ref(false)
+const searchResults = ref<Account[]>([])
+
+// Fuzzy search config
+const searchOptions: FuzzySearchOptions<Account> = {
+  fuseOptions: {
+    keys: [
+      { name: 'name', weight: 0.7 },
+      { name: 'description', weight: 0.3 }
+    ],
+    threshold: 0.4,
+    ignoreLocation: true,
+    minMatchCharLength: 1
+  },
+  resultLimit: 20,
+  minSearchLength: 1,
+  matchAllWhenSearchEmpty: false
+}
+
+// Flatten hierarchy to get all selectable (leaf) accounts
+const allLeafAccounts = computed(() => {
+  const accounts: Account[] = []
+  const traverse = (nodes: AccountNode[]) => {
+    for (const node of nodes) {
+      if (!node.account.has_children) {
+        accounts.push(node.account)
+      }
+      if (node.children.length > 0) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(accountHierarchy.value)
+  return accounts
+})
+
 // Current nodes to display (either root or children of selected node)
 const currentNodes = computed(() => {
   if (selectedPath.value.length === 0) {
     return accountHierarchy.value
   }
-
   const lastNode = selectedPath.value[selectedPath.value.length - 1]
   return lastNode.children
 })
 
 /**
  * Get display name from full account path
- * e.g., "Expenses:Groceries:Organic" -> "Organic"
  */
 function getAccountDisplayName(fullName: string): string {
   const parts = fullName.split(':')
   return parts[parts.length - 1]
 }
 
+/**
+ * Format full account path for display
+ */
+function formatAccountPath(fullName: string): string {
+  return fullName.split(':').join(' > ')
+}
+
+/**
+ * Handle search query changes
+ */
+function handleSearchQuery(query: string) {
+  isSearching.value = query.length > 0
+}
+
+/**
+ * Handle search results from FuzzySearch
+ */
+function handleSearchResults(results: Account[]) {
+  searchResults.value = results
+}
+
+/**
+ * Select an account directly (from search results)
+ */
+function selectAccount(account: Account) {
+  selectedAccount.value = account
+  emit('update:modelValue', account)
+  emit('account-selected', account)
+}
+
 /**
  * Load accounts from API
  */
@@ -206,20 +323,16 @@ async function loadAccounts() {
   error.value = null
 
   try {
-    // Get wallet key from first wallet (invoice key for read operations)
     const wallet = user.value?.wallets?.[0]
     if (!wallet || !wallet.inkey) {
       throw new Error('No wallet available. Please log in.')
     }
 
-    // Filter by user permissions to only show authorized accounts
     accountHierarchy.value = await expensesAPI.getAccountHierarchy(
       wallet.inkey,
       props.rootAccount,
-      true // filterByUser
+      true
     )
-
-    console.log('[AccountSelector] Loaded user-authorized accounts:', accountHierarchy.value)
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to load accounts'
     console.error('[AccountSelector] Error loading accounts:', err)
@@ -229,19 +342,15 @@ async function loadAccounts() {
 }
 
 /**
- * Handle node selection
+ * Handle node selection in browse mode
  */
 function selectNode(node: AccountNode) {
   if (node.account.has_children) {
-    // Navigate into folder
     selectedPath.value.push(node)
     selectedAccount.value = null
     emit('update:modelValue', null)
   } else {
-    // Select leaf account
+    selectAccount(node.account)
-    selectedAccount.value = node.account
-    emit('update:modelValue', node.account)
-    emit('account-selected', node.account)
   }
 }
 
@@ -263,7 +372,6 @@ function navigateToLevel(level: number) {
   emit('update:modelValue', null)
 }
 
-// Load accounts on mount
 onMounted(() => {
   loadAccounts()
 })