feat(user-apps): appearance settings (dark mode + reduced motion), product morph, filter sheet

Applies to both user-app and user-app-v2. Logic and structure are shared;
each app keeps its own look.

Appearance settings
- New "تنظیمات ظاهری" page (/settings/appearance), opened from the
  dashboard and available without login. It offers a light/dark/system
  theme and a "fast & light" motion switch.
- appearanceStore saves the choice to localStorage. A small inline boot
  script in index.html applies it before first paint so there is no
  white flash. The "system" option follows OS changes live.
- New ToggleSwitch component.

Dark mode
- Theme LESS tokens now compile to CSS custom properties. Light/dark
  values come from a generated virtual:palette.css (themeConfig/
  appearance.ts, with colors.json + new colors.dark.json).
- New LESS alpha() plugin replaces fade() on theme tokens.
- New semantic tokens: page, onInk, heroSurface, hairlineStrong,
  photoMat, photoStage.
- The dark palette is layered (page < card < panel < border) so
  surfaces separate without shadows.
- Hard-coded colors were replaced by tokens according to their role.
- antd inputs/text get dark overrides; vant uses its own
  .van-theme-dark.
- Light mode looks the same as before.

Reduced motion
- With html.motion-reduced, transitions are capped at 120ms, keyframe
  loops stop, and backdrop blurs and permanent will-change are dropped.
- Spinners and the toast progress bar (which closes the toast) are
  exempt via .keep-motion.
- Carousel autoplay, the v1 Lottie and the product morph honor the
  setting.

Product detail
- Opening a product is now a container-transform morph from the tapped
  card (ProductMorph). It replaces the bottom Drawer and uses composited
  transform/opacity only.
- The detail view is seeded with the card's data, so it no longer
  opens blank and jumps.

Filters and sheets
- Filters are now a full-width bottom sheet. Selections stay a draft
  until applied, so the result list no longer re-renders while
  dragging the slider.
- DropDown collapse animates grid-template-rows instead of a capped
  max-height.
- v2 IslandSheet is restyled to the v2 design language (API unchanged).

Fixes
- filtersStore.reset() shallow-copied shared arrays, so clearing the
  filters never cleared the selected brands.

apps/user-app-v2/src/views/search/CollectionView.vue

@@ -67,7 +67,7 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .coll {
-  background: @canvas;
+  background: @page;
   min-height: 100vh;
 }
 

apps/user-app-v2/src/views/search/SearchView.vue

@@ -14,12 +14,12 @@
 -->
 <template>
   <div class="search">
-    <PageBar :title="showFilter ? 'فیلترها' : 'جستجو'" :back="showFilter" @click.capture="onBarClick">
+    <PageBar title="جستجو">
       <template #below>
         <div class="search__barExtra">
           <SearchInput @search="search" place-holder="جستجوی دسته بندی، محصولات و ..." />
 
-          <div v-if="!showFilter" class="search__chips no-scrollbar">
+          <div class="search__chips no-scrollbar">
             <button
               type="button"
               class="search__chip search__chip--filter"
@@ -54,15 +54,7 @@
     </PageBar>
 
     <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
-      <Filters
-        v-model:filterKeys="filterKeys"
-        v-show="showFilter"
-        v-model="filters.query"
-        :products="allProducts"
-        @change="hideFilters"
-      />
-
-      <PullRefresh v-show="!showFilter" v-model="refreshing" @refresh="onRefresh">
+      <PullRefresh v-model="refreshing" @refresh="onRefresh">
         <template #pulling><Loading size="18" /></template>
         <template #loosing><Loading size="18" /></template>
         <template #loading><Loading size="18" /></template>
@@ -93,12 +85,20 @@
       </container>
       </PullRefresh>
     </Spinner>
+
+    <!-- A bottom sheet over a see-through backdrop (teleported to <body>);
+         see Filters.vue. The result list stays in place underneath. -->
+    <Filters
+      v-model:show="showFilter"
+      v-model:filterKeys="filterKeys"
+      v-model="filters.query"
+      :products="allProducts"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { onBeforeRouteLeave } from 'vue-router'
 import { PullRefresh } from 'vant'
 import Icon from '../../components/icon/Icon.vue'
 import PageBar from '../../components/ui/PageBar.vue'
@@ -108,11 +108,9 @@ import Filters from '../../components/search/Filters.vue'
 import SectionHead from '../../components/home/SectionHead.vue'
 import ProductCard from '../../components/product/ProductCard.vue'
 import { useFiltersStore } from '../../stores/filtersStore'
-import { useNavStore } from '../../stores/navStore'
 import { api, type ProductSummary } from '../../api/client'
 
 const filters = useFiltersStore()
-const nav = useNavStore()
 
 const loadingPage = ref(false)
 const refreshing = ref(false)
@@ -211,50 +209,14 @@ function setCats(id: string | undefined) {
 }
 function showFilters() {
   showFilter.value = true
-  nav.setNavVisibility(false)
 }
-function hideFilters(event?: { resetFilters: boolean }) {
-  showFilter.value = false
-  nav.setNavVisibility(true)
-  if (event?.resetFilters) {
-    filters.reset()
-    filterKeys.value = []
-  }
-}
-
-// While the filter sheet is open the bar's back button closes the sheet
-// rather than leaving the route, matching the legacy "بازگشت" affordance.
-function onBarClick(e: MouseEvent) {
-  if (!showFilter.value) return
-  const btn = (e.target as HTMLElement)?.closest('button')
-  if (btn) {
-    e.stopPropagation()
-    hideFilters()
-  }
-}
-
-// The filter sheet deliberately hides the bottom tab bar while it is open, so
-// its own fixed action bar ("اعمال فیلتر" / "حذف فیلترها") stays clickable —
-// the tab bar sits at the same bottom edge with a higher z-index. But leaving
-// the page with the sheet still open (browser/swipe back, or tapping a
-// collection tile) never ran hideFilters, so that hide leaked: showNav stayed
-// false, and on any destination outside the five tab routes the user was left
-// with no tab bar at all until a full page refresh reset the store.
-//
-// Restoring it here rather than in onBeforeUnmount is deliberate: this guard
-// runs BEFORE router.afterEach, which then writes the correct visibility for
-// the destination and gets the last word. onBeforeUnmount runs after it, and
-// would wrongly re-show the bar on full-page routes like /product/:id.
-onBeforeRouteLeave(() => {
-  if (showFilter.value) nav.setNavVisibility(true)
-})
 
 onMounted(loadProducts)
 </script>
 
 <style scoped lang="less">
 .search {
-  background: @canvas;
+  background: @page;
   min-height: 100vh;
 }
 
@@ -305,7 +267,7 @@ onMounted(loadProducts)
 }
 
 .search__chip.is-on {
-  color: #fff;
+  color: @onInk;
   background: @ink;
   border-color: @ink;
 }