Polish boursecu UX: branding logos, home price stats, assets, and desktop footer.

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

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

@@ -5,8 +5,7 @@
   >
     <div class="flex justify-between my-2 items-center">
       <div v-if="isBoursecuProject()" class="flex items-center gap-2">
-        <img :src="projectLogo" alt="" class="h-8 w-auto object-contain" />
-        <div class="color-transition font-bold text-primary">{{ appName }}</div>
+        <img :src="projectLogo" alt="" class="h-10 w-auto max-w-[9rem] object-contain" />
       </div>
       <div v-else class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
         <div
@@ -46,16 +45,13 @@
 import { computed } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
 import { useUserStore } from '@/store/userStore'
-import { useConfigStore } from '@/store/configStore'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { getProjectNavLogo, isBoursecuProject } from '@/utils/config'
+import { getProjectMobileNavLogo, isBoursecuProject } from '@/utils/config'
 
 const { y } = useWindowScroll()
 const userStore = useUserStore()
-const config = useConfigStore()
-const projectLogo = computed(() => getProjectNavLogo())
-const appName = computed(() => config.config?.name_fa || config.config?.name || 'بورس مس')
+const projectLogo = computed(() => getProjectMobileNavLogo())
 
 defineEmits<{
   logout: []

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

@@ -1,12 +1,12 @@
 <template>
-  <div :class="plain ? 'py-2' : 'bg-primary rounded-lg p-2 py-3 mt-2'">
+  <div :class="rootClass">
     <div
       v-if="!boursecuLayout && 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 class="text-l mr-2 font-bold">{{ usePriceWithoutType(countBasedInventory, false) }} عدد</div>
     </div>
 
     <template v-if="boursecuAssetRows.length">
@@ -94,7 +94,7 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  openGoldModal: [metal: WalletMetalTotal]
+  openGoldModal: [metal: WalletMetalTotal, modalText?: string]
   openRialModal: []
 }>()
 
@@ -103,6 +103,16 @@ const { assetsSummary } = useWalletAssets()
 const rowClass = computed(() => (props.plain ? 'text-primary' : 'text-tertiary'))
 const iconColor = computed(() => (props.plain ? 'primary' : 'tertiary'))
 
+const rootClass = computed(() => {
+  if (props.boursecuLayout) {
+    return 'assets-section assets-section--boursecu rounded-lg px-3 py-3 mt-2'
+  }
+  if (props.plain) {
+    return 'py-2'
+  }
+  return 'bg-primary rounded-lg p-2 py-3 mt-2'
+})
+
 const meta = computed(() => assetsSummary.value?.meta)
 const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
 const primaryMetalTotal = computed(() => metalTotals.value[0])
@@ -116,7 +126,7 @@ const countBasedInventory = computed(() =>
 )
 
 function formatMetalTotal(metal: WalletMetalTotal) {
-  return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
+  return `${usePriceWithoutType(resolveSummaryMetalWeight(metal, inventoryCards.value), false)}${metal.unit}`
 }
 
 function handleRowInfo(row: HomeAssetRow) {
@@ -126,7 +136,16 @@ function handleRowInfo(row: HomeAssetRow) {
   }
 
   if (row.metal) {
-    emit('openGoldModal', row.metal)
+    emit('openGoldModal', row.metal, row.modalText)
   }
 }
 </script>
+
+<style scoped lang="less">
+@boursecu-surface-border: #d4e3de;
+
+.assets-section--boursecu {
+  background-color: #eff5f3;
+  border: 2px solid @boursecu-surface-border;
+}
+</style>

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

@@ -20,7 +20,7 @@
         <Vue3Odometer
             :value="displayGoldVal"
             class="o-text !text-xl font-bold"
-            style="font-family: var(--App-font-family); direction: ltr"
+            style="font-family: iran-sans; direction: ltr"
         />
         ریال
       </div>

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

@@ -2,7 +2,7 @@
   <div
     class="w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in"
     :class="[
-      layout === 'boursecu' ? 'mt-8 pt-2' : 'mt-6',
+      isBoursecuLayout ? 'mt-8 pt-2' : 'mt-6',
       variant === 'mobile' ? 'pb-45' : 'mt-0 pb-0',
     ]"
   >
@@ -33,31 +33,28 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { usePriceWithoutType } from '../../../../utils/usePrice'
-import type { ChartMetalType } from '../composables/usePriceChart'
-import { resolveMetalDayRangePrices } from '../composables/usePriceChart'
+import { price } from '@/utils/price'
+import { getHomeLayoutId } from '../layouts/registry'
+import { resolveMetalDayRangePrices, usePriceChart } from '../composables/usePriceChart'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    price: any
-    layout?: 'default' | 'boursecu'
     variant?: 'mobile' | 'desktop'
-    selectedMetal?: ChartMetalType
-    maftolRatio?: number
   }>(),
   {
-    layout: 'default',
     variant: 'mobile',
-    selectedMetal: 'katod',
-    maftolRatio: 0,
   }
 )
 
+const { selectedChartMetal, maftolChartRatio } = usePriceChart()
+const isBoursecuLayout = computed(() => getHomeLayoutId() === 'boursecu')
+
 const rangePrices = computed(() =>
   resolveMetalDayRangePrices({
-    price: props.price,
-    metal: props.selectedMetal,
-    isBoursecuLayout: props.layout === 'boursecu',
-    maftolRatio: props.maftolRatio,
+    price: price.value,
+    metal: selectedChartMetal.value,
+    isBoursecuLayout: isBoursecuLayout.value,
+    maftolRatio: maftolChartRatio.value,
   })
 )