add markup columns

src/composables/useFilters.ts

@@ -1,32 +1,68 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { FilterState, VariantType } from '../types/filters'
 import { ALL_VARIANTS } from '../types/filters'
 import type { Tier, Enchantment } from '../types/crafting'
 import type { AlbionCity } from '../types/api'
-import { ENCHANTMENTS } from '../data/constants'
+import { ENCHANTMENTS, TIERS } from '../data/constants'
 
-function loadCity(): AlbionCity {
-  return (localStorage.getItem('albion-city') as AlbionCity) ?? 'Caerleon'
+const STORAGE_KEY = 'albion-filters'
+
+// ─── Persistence ──────────────────────────────────────────────────────────────
+
+interface StoredFilters {
+  city?: AlbionCity
+  rrr?: number
+  tiers?: Tier[]
+  enchantments?: Enchantment[] | null
+  variants?: VariantType[] | null
+  selectedItemTypes?: string[] | null
 }
 
-function loadRrr(): number {
-  const v = Number(localStorage.getItem('albion-rrr'))
-  return isNaN(v) || v < 0 || v > 100 ? 15 : v
+function loadStored(): StoredFilters {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : {}
+  } catch {
+    return {}
+  }
 }
 
-const filters = ref<FilterState>({
-  city: loadCity(),
-  tiers: new Set([2, 3, 4, 5, 6, 7, 8]),
-  selectedItemTypes: null,
-  rrr: loadRrr(),
-  nameFilter: '',
-  enchantments: null,
-  variants: null,
-})
+function buildInitialState(): FilterState {
+  const s = loadStored()
+  return {
+    city:              s.city ?? 'Caerleon',
+    rrr:               (s.rrr != null && s.rrr >= 0 && s.rrr <= 100) ? s.rrr : 15,
+    tiers:             s.tiers ? new Set(s.tiers) : new Set(TIERS),
+    enchantments:      s.enchantments === undefined ? null : (s.enchantments === null ? null : new Set(s.enchantments)),
+    variants:          s.variants === undefined ? null : (s.variants === null ? null : new Set(s.variants)),
+    selectedItemTypes: s.selectedItemTypes === undefined ? null : (s.selectedItemTypes === null ? null : new Set(s.selectedItemTypes)),
+    nameFilter:        '',
+  }
+}
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const filters = ref<FilterState>(buildInitialState())
+
+watch(filters, () => {
+  const f = filters.value
+  const toStore: StoredFilters = {
+    city:              f.city,
+    rrr:               f.rrr,
+    tiers:             [...f.tiers],
+    enchantments:      f.enchantments === null ? null : [...f.enchantments],
+    variants:          f.variants === null ? null : [...f.variants],
+    selectedItemTypes: f.selectedItemTypes === null ? null : [...f.selectedItemTypes],
+  }
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore))
+  } catch {}
+}, { deep: true })
+
+// ─── Setters ──────────────────────────────────────────────────────────────────
 
 function setCity(city: AlbionCity) {
   filters.value.city = city
-  localStorage.setItem('albion-city', city)
 }
 
 function toggleTier(tier: Tier) {
@@ -45,7 +81,6 @@ function setSelectedItemTypes(value: Set<string> | null) {
 
 function setRrr(rate: number) {
   filters.value.rrr = Math.max(0, Math.min(100, rate))
-  localStorage.setItem('albion-rrr', String(filters.value.rrr))
 }
 
 function setNameFilter(value: string) {