refactor(libra): redesign transactions list status + type encoding

Rework how the standalone transactions list communicates entry status
and type so each visual channel does one job and the filter UI matches
the underlying axes.

Encoding:
- Type lives in the signed/colored amount (+green income, -red expense)
  and a matching Income/Expense badge in the badge row.
- Status lives in badges only: red Voided (leftmost) and yellow Pending
  (after the type badge). Cleared entries carry no status badge — the
  quiet default.
- Voided rows additionally strike-through and mute the amount.
- Drop the title-row status icons and the colored left border that
  previously fought with the amount color for the same meaning.

Filter UI:
- Replace the type radio + voided switch with three category chips —
  Income, Expenses, Voided — that independently toggle inclusion of one
  bucket of rows. Each row belongs to exactly one bucket (voided wins
  over type). Defaults: Income + Expenses on, Voided off.
- Empty-selection state nudges the user to enable a category.

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

src/modules/expenses/views/TransactionsPage.vue

@@ -12,10 +12,6 @@ import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import {
-  CheckCircle2,
-  Clock,
-  Flag,
-  XCircle,
   RefreshCw,
   Calendar,
   Filter
@@ -30,14 +26,26 @@ const isLoading = ref(false)
 const dateRangeType = ref<number | 'custom'>(15) // 15, 30, 60, or 'custom'
 const customStartDate = ref<string>('')
 const customEndDate = ref<string>('')
-const typeFilter = ref<'all' | 'income' | 'expense'>('all')
+// Each chip is an inclusion toggle for one bucket of rows. Every row
+// belongs to exactly one bucket (voided rows go to 'voided' regardless
+// of their income/expense type). Default hides voided.
+type Category = 'income' | 'expense' | 'voided'
 
-const typeFilterOptions = [
-  { label: 'All', value: 'all' as const },
-  { label: 'Income', value: 'income' as const },
-  { label: 'Expenses', value: 'expense' as const }
+const activeCategories = ref<Set<Category>>(new Set<Category>(['income', 'expense']))
+
+const categoryChips: { label: string; value: Category }[] = [
+  { label: 'Income', value: 'income' },
+  { label: 'Expenses', value: 'expense' },
+  { label: 'Voided', value: 'voided' }
 ]
 
+function toggleCategory(cat: Category) {
+  const next = new Set(activeCategories.value)
+  if (next.has(cat)) next.delete(cat)
+  else next.add(cat)
+  activeCategories.value = next
+}
+
 function isIncome(t: Transaction): boolean {
   return t.tags?.includes('income-entry') ?? false
 }
@@ -50,6 +58,18 @@ function isVoided(t: Transaction): boolean {
   return t.tags?.includes('voided') ?? false
 }
 
+function isPending(t: Transaction): boolean {
+  return t.flag === '!' && !isVoided(t)
+}
+
+// Which chip bucket a row falls into. Voided always wins over type.
+function getBucket(t: Transaction): Category | null {
+  if (isVoided(t)) return 'voided'
+  if (isIncome(t)) return 'income'
+  if (isExpense(t)) return 'expense'
+  return null
+}
+
 const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
 
 // Fuzzy search state and configuration
@@ -75,12 +95,13 @@ const searchOptions: FuzzySearchOptions<Transaction> = {
   matchAllWhenSearchEmpty: true
 }
 
-// Transactions to display (search results or all transactions), filtered by type
+// Transactions to display: row passes if its bucket's chip is active.
 const transactionsToDisplay = computed(() => {
   const base = searchResults.value.length > 0 ? searchResults.value : transactions.value
-  if (typeFilter.value === 'income') return base.filter(isIncome)
-  if (typeFilter.value === 'expense') return base.filter(isExpense)
-  return base
+  return base.filter(t => {
+    const bucket = getBucket(t)
+    return bucket !== null && activeCategories.value.has(bucket)
+  })
 })
 
 // Handle search results
@@ -112,23 +133,28 @@ function formatAmount(amount: number): string {
   return new Intl.NumberFormat('en-US').format(amount)
 }
 
-// Get status icon and color. Voided entries (per libra convention) keep
-// flag='!' and carry a 'voided' tag — surface that as the icon regardless
-// of the underlying flag.
-function getStatusInfo(transaction: Transaction) {
-  if (isVoided(transaction)) {
-    return { icon: XCircle, color: 'text-muted-foreground', label: 'Voided' }
-  }
-  switch (transaction.flag) {
-    case '*':
-      return { icon: CheckCircle2, color: 'text-green-600', label: 'Cleared' }
-    case '!':
-      return { icon: Clock, color: 'text-orange-600', label: 'Pending' }
-    case '#':
-      return { icon: Flag, color: 'text-red-600', label: 'Flagged' }
-    default:
-      return null
-  }
+// Income gets a leading '+', expense a leading '-'.
+function getAmountSign(t: Transaction): string {
+  if (isIncome(t)) return '+'
+  if (isExpense(t)) return '-'
+  return ''
+}
+
+// Color tint for the amount text. Voided entries drop to muted regardless
+// of type since the strike-through carries the "ignore this" signal.
+function getAmountColorClass(t: Transaction): string {
+  if (isVoided(t)) return 'line-through text-muted-foreground'
+  if (isIncome(t)) return 'text-green-600 dark:text-green-400'
+  if (isExpense(t)) return 'text-red-600 dark:text-red-400'
+  return ''
+}
+
+// Tags that drive other visual channels (border / sign / strike-through) —
+// suppressed from the badge row so it only carries user-added tags.
+const TYPE_TAGS = new Set(['income-entry', 'expense-entry', 'voided'])
+
+function getDisplayTags(t: Transaction): string[] {
+  return (t.tags ?? []).filter(tag => !TYPE_TAGS.has(tag))
 }
 
 // Load transactions
@@ -231,19 +257,20 @@ onMounted(() => {
             </Button>
           </div>
 
-          <!-- Type Filter (All / Income / Expenses) -->
+          <!-- Category chips: each chip toggles inclusion of one bucket
+               of rows. Defaults: Income + Expenses on, Voided off. -->
           <div class="flex items-center gap-2 flex-wrap">
             <Filter class="h-4 w-4 text-muted-foreground" />
             <Button
-              v-for="option in typeFilterOptions"
-              :key="option.value"
-              :variant="typeFilter === option.value ? 'default' : 'outline'"
+              v-for="chip in categoryChips"
+              :key="chip.value"
+              :variant="activeCategories.has(chip.value) ? 'default' : 'outline'"
               size="sm"
               class="h-7 md:h-8 px-3 text-xs"
-              @click="typeFilter = option.value"
+              @click="toggleCategory(chip.value)"
               :disabled="isLoading"
             >
-              {{ option.label }}
+              {{ chip.label }}
             </Button>
           </div>
 
@@ -298,7 +325,7 @@ onMounted(() => {
           Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
         </span>
         <span v-else>
-          {{ transactions.length }} transaction{{ transactions.length === 1 ? '' : 's' }}
+          {{ transactionsToDisplay.length }} transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
         </span>
       </div>
 
@@ -314,7 +341,9 @@ onMounted(() => {
       <div v-else-if="transactionsToDisplay.length === 0" class="text-center py-12 px-4">
         <p class="text-muted-foreground">No transactions found</p>
         <p class="text-sm text-muted-foreground mt-2">
-          {{ searchResults.length > 0 ? 'Try a different search term' : 'Try selecting a different time period' }}
+          <template v-if="searchResults.length > 0">Try a different search term</template>
+          <template v-else-if="activeCategories.size === 0">Select a category above to see transactions</template>
+          <template v-else>Try selecting a different time period or toggling more categories</template>
         </p>
       </div>
 
@@ -323,34 +352,19 @@ onMounted(() => {
         <div
           v-for="transaction in transactionsToDisplay"
           :key="transaction.id"
-          :class="[
-            'border-b md:border md:rounded-lg p-4 hover:bg-muted/50 transition-colors',
-            isIncome(transaction) && 'border-l-4 border-l-green-600',
-            isExpense(transaction) && 'border-l-4 border-l-red-600'
-          ]"
+          class="border-b md:border md:rounded-lg p-4 hover:bg-muted/50 transition-colors"
         >
           <!-- Transaction Header -->
           <div class="flex items-start justify-between gap-3 mb-2">
             <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2 mb-1">
-                <!-- Status Icon -->
-                <component
-                  v-if="getStatusInfo(transaction)"
-                  :is="getStatusInfo(transaction)!.icon"
-                  :class="[
-                    'h-4 w-4 flex-shrink-0',
-                    getStatusInfo(transaction)!.color
-                  ]"
-                />
               <h3
                 :class="[
-                    'font-medium text-sm sm:text-base truncate',
+                  'font-medium text-sm sm:text-base truncate mb-1',
                   isVoided(transaction) && 'line-through text-muted-foreground'
                 ]"
               >
                 {{ transaction.description }}
               </h3>
-              </div>
               <p class="text-xs sm:text-sm text-muted-foreground">
                 {{ formatDate(transaction.date) }}
               </p>
@@ -358,22 +372,17 @@ onMounted(() => {
 
             <!-- Amount -->
             <div class="text-right flex-shrink-0">
-              <p
-                :class="[
-                  'font-semibold text-sm sm:text-base',
-                  isVoided(transaction) && 'line-through text-muted-foreground'
-                ]"
-              >
-                {{ formatAmount(transaction.amount) }} sats
+              <p :class="['font-semibold text-sm sm:text-base', getAmountColorClass(transaction)]">
+                {{ getAmountSign(transaction) }}{{ formatAmount(transaction.amount) }} sats
               </p>
               <p
                 v-if="transaction.fiat_amount"
                 :class="[
-                  'text-xs text-muted-foreground',
-                  isVoided(transaction) && 'line-through'
+                  'text-xs',
+                  getAmountColorClass(transaction) || 'text-muted-foreground'
                 ]"
               >
-                {{ transaction.fiat_amount.toFixed(2) }} {{ transaction.fiat_currency }}
+                {{ getAmountSign(transaction) }}{{ transaction.fiat_amount.toFixed(2) }} {{ transaction.fiat_currency }}
               </p>
             </div>
           </div>
@@ -390,20 +399,44 @@ onMounted(() => {
               <span class="font-medium">Ref:</span> {{ transaction.reference }}
             </div>
 
-            <!-- Tags -->
-            <div v-if="transaction.tags && transaction.tags.length > 0" class="flex flex-wrap gap-1 mt-2">
+            <!-- Badges: Voided (leftmost, high-signal) + type (Income /
+                 Expense) + Pending (after type) + any user-added tags. -->
+            <div class="flex flex-wrap gap-1 mt-2">
               <Badge
-                v-for="tag in transaction.tags"
+                v-if="isVoided(transaction)"
+                variant="secondary"
+                class="text-xs bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300"
+              >
+                Voided
+              </Badge>
+              <Badge
+                v-if="isIncome(transaction)"
+                variant="secondary"
+                class="text-xs bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300"
+              >
+                Income
+              </Badge>
+              <Badge
+                v-else-if="isExpense(transaction)"
+                variant="secondary"
+                class="text-xs bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300"
+              >
+                Expense
+              </Badge>
+              <Badge
+                v-if="isPending(transaction)"
+                variant="secondary"
+                class="text-xs bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300"
+              >
+                Pending
+              </Badge>
+              <Badge
+                v-for="tag in getDisplayTags(transaction)"
                 :key="tag"
                 variant="secondary"
-                :class="[
-                  'text-xs',
-                  tag === 'income-entry' && 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
-                  tag === 'expense-entry' && 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300',
-                  tag === 'voided' && 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300'
-                ]"
+                class="text-xs"
               >
-                {{ tag === 'voided' ? 'Voided' : tag }}
+                {{ tag }}
               </Badge>
             </div>
           </div>