Split desktop and mobile layouts with shared page data so APIs fetch once per context.

Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/home/components/AssetsSection.vue

@@ -1,26 +1,31 @@
 <template>
-  <div class="bg-primary rounded-lg p-2 py-3 mt-2">
-    <div v-if="meta?.has_count_based_products" class="flex justify-center text-tertiary w-full z-20">
+  <div :class="plain ? 'py-2' : 'bg-primary rounded-lg p-2 py-3 mt-2'">
+    <div
+      v-if="meta?.has_count_based_products"
+      :class="rowClass"
+      class="flex justify-center w-full z-20"
+    >
       محصولات:
       <div class="text-l mr-2 font-bold">{{ countBasedInventory }} عدد</div>
     </div>
     <template v-if="meta?.single_metal && primaryMetalTotal">
-      <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+      <div :class="[rowClass, meta?.has_count_based_products ? 'mt-2' : '']" class="flex justify-center w-full z-20">
         {{ primaryMetalTotal.label }}:
         <div class="text-l mr-2 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
         <BasicIcon
           icon="vuesax-linear:info-circle"
           size="18"
-          color="tertiary"
+          :color="iconColor"
           @click="$emit('openGoldModal', primaryMetalTotal)"
         />
       </div>
     </template>
     <template v-else>
       <div
-        v-for="metal in metalTotals"
+        v-for="(metal, index) in metalTotals"
         :key="metal.metal_id"
-        class="flex mt-2 justify-center text-tertiary w-full z-20"
+        :class="[rowClass, index > 0 || meta?.has_count_based_products ? 'mt-2' : '']"
+        class="flex justify-center w-full z-20"
       >
         {{ metal.label }}:
         <div class="text-l mr-2 font-bold">{{ formatMetalTotal(metal) }}</div>
@@ -28,34 +33,50 @@
           v-if="metal.metal_id === metalTotals[0]?.metal_id"
           icon="vuesax-linear:info-circle"
           size="18"
-          color="tertiary"
+          :color="iconColor"
           @click="$emit('openGoldModal', metal)"
         />
       </div>
     </template>
-    <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+    <div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
       دارایی ریالی:
       <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
-      <BasicIcon @click="$emit('openRialModal')" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
+      <BasicIcon
+        icon="vuesax-linear:info-circle"
+        size="18"
+        :color="iconColor"
+        @click="$emit('openRialModal')"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
 import { resolveSummaryMetalWeight } from '@/utils/productAssets'
 
-const { assetsSummary, loadWalletAssets } = useWalletAssets()
+const props = withDefaults(
+  defineProps<{
+    plain?: boolean
+  }>(),
+  { plain: false }
+)
+
+/** Display-only — wallet assets are loaded once in useHomePageData.initHomePageData() */
+const { assetsSummary } = useWalletAssets()
 
 defineEmits<{
   openGoldModal: [metal: WalletMetalTotal]
   openRialModal: []
 }>()
 
+const rowClass = computed(() => (props.plain ? 'text-primary' : 'text-tertiary'))
+const iconColor = computed(() => (props.plain ? 'primary' : 'tertiary'))
+
 const meta = computed(() => assetsSummary.value?.meta)
 const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
 const primaryMetalTotal = computed(() => metalTotals.value[0])
@@ -65,10 +86,6 @@ const countBasedInventory = computed(() =>
   (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
 )
 
-onMounted(() => {
-  void loadWalletAssets()
-})
-
 function formatMetalTotal(metal: WalletMetalTotal) {
   return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
 }