fix: borrow filter and matrix UX

components/entities/vault/discovery/DiscoveryMarketMatrix.vue

@@ -793,13 +793,7 @@ const explorerLink = (address: string) => getExplorerLink(address, chainId.value
                     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

@@ -10,7 +10,7 @@ export const useCustomFilters = <T>(
   initialFilters: CustomFilter[] = [],
 ) => {
   const modal = useModal()
-  const customFilters = ref<CustomFilter[]>([])
+  const customFilters = ref<CustomFilter[]>([...initialFilters])
 
   const addCustomFilter = (filter: CustomFilter) => {
     customFilters.value = [...customFilters.value, filter]
@@ -21,7 +21,7 @@ export const useCustomFilters = <T>(
   }
 
   const clearCustomFilters = () => {
-    customFilters.value = []
+    customFilters.value = [...initialFilters]
   }
 
   const openCustomFilterModal = () => {
@@ -34,7 +34,7 @@ export const useCustomFilters = <T>(
   }
 
   const matchesCustomFilters = (item: T): boolean => {
-    const filters = [...initialFilters, ...customFilters.value]
+    const filters = customFilters.value
     if (!filters.length) return true
     return filters.every((f) => {
       const val = getValue(item, f.metric)

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])
+  })
+})

tests/setup.ts

@@ -6,7 +6,7 @@
  * server/ module that calls one of these globals at module top level.
  */
 
-import { computed, reactive, ref, shallowReactive, shallowRef, watch, watchEffect } from 'vue'
+import { computed, reactive, readonly, ref, shallowReactive, shallowRef, watch, watchEffect } from 'vue'
 
 type AnyFn = (...args: unknown[]) => unknown
 
@@ -27,6 +27,7 @@ const vueGlobals: Record<string, unknown> = {
   reactive,
   shallowReactive,
   computed,
+  readonly,
   watch,
   watchEffect,
 }