fix: borrow filter and matrix UX

components/entities/vault/discovery/DiscoveryMarketMatrix.vue

@@ -497,13 +497,7 @@ watch(
                     v-if="isUnavailableMetricCell(row.address, col.address)"
                     class="text-p5 whitespace-nowrap text-content-muted"
                   >
-                    <UiHoverPreviewTooltip
-                      title="Max ROE unavailable"
-                      :text="unavailableRoeCellLabel"
-                      placement="top-start"
-                    >
-                      <span>-</span>
-                    </UiHoverPreviewTooltip>
+                    -
                   </span>
                   <span
                     v-else-if="

composables/useCustomFilters.ts

@@ -45,8 +45,9 @@ export const useCustomFilters = <T>(
   }
 
   const matchesCustomFilters = (item: T): boolean => {
-    if (!customFilters.value.length) return true
-    return customFilters.value.every((f) => {
+    const filters = customFilters.value
+    if (!filters.length) return true
+    return filters.every((f) => {
       const val = getValue(item, f.metric)
       if (typeof val !== 'number' || !Number.isFinite(val)) return f.includeWhenValueUnavailable === true
       return f.operator === 'gt' ? val > f.value : val < f.value

tests/composables/useCustomFilters.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useCustomFilters, type CustomFilter } from '~/composables/useCustomFilters'
+
+vi.mock('#components', () => ({
+  UiCustomFilterModal: {},
+}))
+
+vi.mock('~/components/ui/composables/useModal', () => ({
+  useModal: () => ({ open: vi.fn() }),
+}))
+
+type Market = {
+  liquidity?: number
+  apy?: number
+}
+
+const initialLiquidityFilter: CustomFilter = {
+  id: 'borrow-min-liquidity-usd',
+  metric: 'liquidity',
+  operator: 'gt',
+  value: 1000,
+  label: 'Avail. liquidity > $1K',
+  includeWhenValueUnavailable: true,
+}
+
+describe('useCustomFilters', () => {
+  it('shows initial filters as active filters and resets back to them', () => {
+    const {
+      customFilters,
+      addCustomFilter,
+      removeCustomFilter,
+      clearCustomFilters,
+      matchesCustomFilters,
+    } = useCustomFilters<Market>(
+      [
+        { key: 'liquidity', label: 'Available liquidity', shortLabel: 'Avail. liquidity', unit: 'usd' },
+        { key: 'apy', label: 'APY', shortLabel: 'APY', unit: 'percent' },
+      ],
+      (market, metric) => market[metric as keyof Market],
+      [initialLiquidityFilter],
+    )
+
+    expect(customFilters.value).toEqual([initialLiquidityFilter])
+    expect(matchesCustomFilters({ liquidity: 1500 })).toBe(true)
+    expect(matchesCustomFilters({ liquidity: 500 })).toBe(false)
+
+    removeCustomFilter(initialLiquidityFilter.id)
+    expect(customFilters.value).toEqual([])
+    expect(matchesCustomFilters({ liquidity: 500 })).toBe(true)
+
+    addCustomFilter({
+      id: 'apy-floor',
+      metric: 'apy',
+      operator: 'gt',
+      value: 5,
+      label: 'APY > 5%',
+    })
+
+    clearCustomFilters()
+    expect(customFilters.value).toEqual([initialLiquidityFilter])
+  })
+})