fix(convert): keep units before amounts in the copper calculator

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

src/views/base/convert/components/CopperConvertCalculator.vue

@@ -21,7 +21,10 @@
               :class="{ 'copper-convert__chip--muted': row.missing }"
             >
               <span class="copper-convert__chip-label">{{ row.label }}</span>
-              <span class="copper-convert__chip-value" dir="ltr">{{ row.value }}</span>
+              <span class="copper-convert__measure">
+                <bdi v-if="row.unit">{{ row.unit }}</bdi>
+                <bdi>{{ row.value }}</bdi>
+              </span>
             </li>
           </ul>
         </div>
@@ -35,7 +38,10 @@
               class="copper-convert__chip copper-convert__chip--accent"
             >
               <span class="copper-convert__chip-label">{{ row.label }}</span>
-              <span class="copper-convert__chip-value" dir="ltr">{{ row.value }}</span>
+              <span class="copper-convert__measure">
+                <bdi v-if="row.unit">{{ row.unit }}</bdi>
+                <bdi>{{ row.value }}</bdi>
+              </span>
             </li>
           </ul>
         </div>
@@ -60,12 +66,12 @@
 
         <div class="copper-convert__weight">
           <label class="copper-convert__field-label">مقدار</label>
-          <div class="copper-convert__weight-wrap">
-            <span class="copper-convert__weight-value" dir="ltr">{{ formatAssetAmount(sliderAmount) }}</span>
+          <div class="copper-convert__weight-wrap" dir="ltr">
+            <span class="copper-convert__weight-value">{{ formatAssetAmount(sliderAmount) }}</span>
             <span class="copper-convert__weight-unit">{{ assetUnit }}</span>
           </div>
           <p class="copper-convert__asset-hint">
-            <template v-if="assetAmount > 0">از دارایی شما؛ انتهای زبانه {{ formatAssetAmount(assetAmount) }} {{ assetUnit }} است</template>
+            <template v-if="assetAmount > 0">از دارایی شما؛ انتهای زبانه <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(assetAmount) }}</bdi></span> است</template>
             <template v-else>موجودی این دارایی صفر است.</template>
           </p>
           <div
@@ -85,7 +91,7 @@
           </div>
           <div class="copper-convert__slider-scale">
             <span>۰</span>
-            <span dir="ltr">{{ formatAssetAmount(assetAmount) }} {{ assetUnit }}</span>
+            <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(assetAmount) }}</bdi></span>
           </div>
         </div>
       </section>
@@ -98,12 +104,12 @@
 
         <div class="copper-convert__rings">
           <article class="copper-convert__ring-card">
-            <span class="copper-convert__ring-badge">۱.۵ mm²</span>
+            <span class="copper-convert__ring-badge" dir="ltr">۱.۵ mm²</span>
             <p class="copper-convert__ring-count" dir="ltr">{{ formatRings(result.rings15ByValue) }}</p>
             <p class="copper-convert__ring-caption">حلقه سیم</p>
           </article>
           <article class="copper-convert__ring-card">
-            <span class="copper-convert__ring-badge">۲.۵ mm²</span>
+            <span class="copper-convert__ring-badge" dir="ltr">۲.۵ mm²</span>
             <p class="copper-convert__ring-count" dir="ltr">{{ formatRings(result.rings25ByValue) }}</p>
             <p class="copper-convert__ring-caption">حلقه سیم</p>
           </article>
@@ -112,11 +118,11 @@
         <div class="copper-convert__summary">
           <div class="copper-convert__summary-row">
             <span>ارزش معادل</span>
-            <strong dir="ltr">{{ formatRial(result.totalValueRial) }} <small>ریال</small></strong>
+            <strong class="copper-convert__measure"><small>ریال</small><bdi>{{ formatRial(result.totalValueRial) }}</bdi></strong>
           </div>
           <div class="copper-convert__summary-row">
             <span>معادل مفتول</span>
-            <strong dir="ltr">{{ formatKg(result.equivalentMaftoulKg) }} <small>کیلو</small></strong>
+            <strong class="copper-convert__measure"><small>کیلو</small><bdi>{{ formatKg(result.equivalentMaftoulKg) }}</bdi></strong>
           </div>
         </div>
       </section>
@@ -127,13 +133,13 @@
           <span class="copper-convert__result-title">تقسیم بین دو سیم</span>
         </div>
         <p class="copper-convert__asset-hint">
-          مانده {{ formatAssetAmount(remainderAmount) }} {{ assetUnit }} است. هر زبانه فقط عدد صحیح حلقه است؛ اعشاری که به یک حلقه نرسد در دارایی می‌ماند.
+          مانده <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(remainderAmount) }}</bdi></span> است. هر زبانه فقط عدد صحیح حلقه است؛ اعشاری که به یک حلقه نرسد در دارایی می‌ماند.
         </p>
 
         <div class="copper-convert__weight">
-          <label class="copper-convert__field-label">سیم ۱.۵ mm²</label>
-          <div class="copper-convert__weight-wrap">
-            <span class="copper-convert__weight-value" dir="ltr">{{ wire15Rings }}</span>
+          <label class="copper-convert__field-label">سیم <span dir="ltr">۱.۵ mm²</span></label>
+          <div class="copper-convert__weight-wrap" dir="ltr">
+            <span class="copper-convert__weight-value">{{ wire15Rings }}</span>
             <span class="copper-convert__weight-unit">عدد حلقه</span>
           </div>
           <div
@@ -153,14 +159,14 @@
           </div>
           <div class="copper-convert__slider-scale">
             <span>۰</span>
-            <span dir="ltr">{{ maxRings15 }} عدد حلقه</span>
+            <span class="copper-convert__measure"><bdi>عدد حلقه</bdi><bdi>{{ maxRings15 }}</bdi></span>
           </div>
         </div>
 
         <div class="copper-convert__weight">
-          <label class="copper-convert__field-label">سیم ۲.۵ mm²</label>
-          <div class="copper-convert__weight-wrap">
-            <span class="copper-convert__weight-value" dir="ltr">{{ wire25Rings }}</span>
+          <label class="copper-convert__field-label">سیم <span dir="ltr">۲.۵ mm²</span></label>
+          <div class="copper-convert__weight-wrap" dir="ltr">
+            <span class="copper-convert__weight-value">{{ wire25Rings }}</span>
             <span class="copper-convert__weight-unit">عدد حلقه</span>
           </div>
           <div
@@ -180,12 +186,12 @@
           </div>
           <div class="copper-convert__slider-scale">
             <span>۰</span>
-            <span dir="ltr">{{ maxRings25 }} عدد حلقه</span>
+            <span class="copper-convert__measure"><bdi>عدد حلقه</bdi><bdi>{{ maxRings25 }}</bdi></span>
           </div>
         </div>
 
         <p class="copper-convert__asset-hint">
-          اعشار مانده: {{ formatAssetAmount(leftoverAmount) }} {{ assetUnit }} نگه داشته می‌شود.
+          اعشار مانده: <span class="copper-convert__measure"><bdi>{{ assetUnit }}</bdi><bdi>{{ formatAssetAmount(leftoverAmount) }}</bdi></span> نگه داشته می‌شود.
         </p>
         <BasicButton
           type="primary"
@@ -252,11 +258,11 @@ function formatAssetAmount(value: number) {
 }
 
 function sliderTip(value?: number) {
-  return `${formatAssetAmount(Number(value ?? 0))} ${assetUnit.value}`
+  return `${assetUnit.value} ${formatAssetAmount(Number(value ?? 0))}`
 }
 
 function ringTip(value?: number) {
-  return `${Math.floor(Number(value ?? 0))} عدد حلقه`
+  return `عدد حلقه ${Math.floor(Number(value ?? 0))}`
 }
 
 function formatRial(value: number) {
@@ -371,17 +377,14 @@ function formatRings(value: number) {
   border-color: #d4e3de;
 }
 
-.copper-convert__chip--muted .copper-convert__chip-value {
-  color: #94a3b8;
-}
-
 .copper-convert__chip-label {
   font-size: 0.625rem;
   line-height: 1.45;
   color: #64748b;
 }
 
-.copper-convert__chip-value {
+.copper-convert__chip-value,
+.copper-convert__price-grid .copper-convert__measure {
   font-size: 0.6875rem;
   font-weight: 700;
   color: #0f172a;
@@ -390,6 +393,17 @@ function formatRings(value: number) {
   text-overflow: ellipsis;
 }
 
+.copper-convert__measure {
+  display: inline-flex;
+  direction: ltr;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.copper-convert__chip--muted .copper-convert__measure {
+  color: #94a3b8;
+}
+
 .copper-convert__form,
 .copper-convert__split {
   display: flex;
@@ -451,7 +465,7 @@ function formatRings(value: number) {
   font-weight: 800;
   color: #0f172a;
   direction: ltr;
-  text-align: right;
+  text-align: left;
 }
 
 .copper-convert__asset-hint {

src/views/base/convert/composables/useCopperConvertPage.ts

@@ -289,7 +289,8 @@ export function useCopperConvertPage() {
     const p = prices.value
     const row = (label: string, amount: number) => ({
       label,
-      value: amount > 0 ? `${Math.round(amount).toLocaleString('en-US')} ریال` : '—',
+      value: amount > 0 ? Math.round(amount).toLocaleString('en-US') : '—',
+      unit: amount > 0 ? 'ریال' : '',
       missing: amount <= 0,
     })
     return [