From f043b75b98f0803bd81184484c25c8f6bedefc75 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sun, 24 May 2026 13:11:57 +0330
Subject: [PATCH] Compact business cards and fix production image URLs

---
 .env.example                             |  4 ++-
 .env.production                          |  1 +
 src/components/business/BusinessCard.vue | 46 ++++++++++++++----------
 src/utils/media.ts                       |  9 +++--
 src/views/app/AppHomeView.vue            |  2 +-
 5 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/.env.example b/.env.example
index c51665f..21abf97 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,5 @@
-# Dev: /api (Vite proxy) | Production build: .env.production
+# Dev: /api (Vite proxy) | Production: see .env.production
 # Full local API: http://localhost:3000
 VITE_API_URL=/api
+# Production: https://api.montime.ir (uploads served from API)
+# VITE_ASSETS_URL=https://api.montime.ir
diff --git a/.env.production b/.env.production
index 89903f1..2bbec04 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,3 @@
 VITE_API_URL=https://api.montime.ir
+VITE_ASSETS_URL=https://api.montime.ir
 VITE_APP_MODE=web
diff --git a/src/components/business/BusinessCard.vue b/src/components/business/BusinessCard.vue
index 88e2872..e10b105 100644
--- a/src/components/business/BusinessCard.vue
+++ b/src/components/business/BusinessCard.vue
@@ -1,9 +1,29 @@
 <template>
   <RouterLink
     :to="{ name: 'app-business-detail', params: { id: business.id } }"
-    class="block overflow-hidden rounded-2xl border border-border bg-surface-2 transition hover:border-brand-500/40 hover:shadow-md"
+    class="flex items-center gap-3 rounded-xl border border-border bg-surface-2 p-2.5 transition hover:border-brand-500/40 hover:shadow-sm"
   >
-    <div class="relative aspect-[16/10] bg-surface-3">
+    <div class="min-w-0 flex-1">
+      <div class="flex items-start justify-between gap-2">
+        <h2 class="truncate text-sm font-semibold text-text">{{ business.title }}</h2>
+        <span
+          v-if="business.category"
+          class="shrink-0 rounded-lg bg-brand-500/10 px-1.5 py-0.5 text-[10px] text-brand-700 dark:text-brand-500"
+        >
+          {{ business.category.title }}
+        </span>
+      </div>
+      <p v-if="business.description" class="mt-0.5 truncate text-xs text-muted">
+        {{ business.description }}
+      </p>
+      <p v-if="business.address" class="mt-0.5 truncate text-xs text-muted">
+        📍 {{ business.address }}
+      </p>
+    </div>
+
+    <div
+      class="relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-surface-3 sm:h-16 sm:w-16"
+    >
       <img
         v-if="cover"
         :src="cover"
@@ -11,24 +31,12 @@
         class="h-full w-full object-cover"
         loading="lazy"
       />
-      <div v-else class="flex h-full items-center justify-center text-3xl text-muted/40">🏪</div>
-    </div>
-    <div class="p-4">
-    <div class="flex items-start justify-between gap-2">
-      <h2 class="font-semibold text-text">{{ business.title }}</h2>
-      <span
-        v-if="business.category"
-        class="shrink-0 rounded-lg bg-brand-500/10 px-2 py-0.5 text-xs text-brand-700 dark:text-brand-500"
+      <div
+        v-else
+        class="flex h-full w-full items-center justify-center text-xl text-muted/50"
       >
-        {{ business.category.title }}
-      </span>
-    </div>
-    <p v-if="business.description" class="mt-2 line-clamp-2 text-sm text-muted">
-      {{ business.description }}
-    </p>
-    <p v-if="business.address" class="mt-2 text-xs text-muted">
-      📍 {{ business.address }}
-    </p>
+        🏪
+      </div>
     </div>
   </RouterLink>
 </template>
diff --git a/src/utils/media.ts b/src/utils/media.ts
index cd73769..5f2a7e2 100644
--- a/src/utils/media.ts
+++ b/src/utils/media.ts
@@ -1,9 +1,14 @@
+/** Base URL for uploaded files (empty = same origin /uploads via Vite proxy). */
 const assetsBase = (import.meta.env.VITE_ASSETS_URL ?? '').replace(/\/$/, '');
 
 export function uploadUrl(path: string | null | undefined): string {
   if (!path) return '';
-  if (path.startsWith('http')) return path;
-  const rel = path.startsWith('/uploads/') ? path : `/uploads/${path}`;
+  if (path.startsWith('http://') || path.startsWith('https://')) return path;
+  const rel = path.startsWith('/uploads/')
+    ? path
+    : path.startsWith('/')
+      ? path
+      : `/uploads/${path}`;
   return assetsBase ? `${assetsBase}${rel}` : rel;
 }
 
diff --git a/src/views/app/AppHomeView.vue b/src/views/app/AppHomeView.vue
index 5fe882a..1f8087e 100644
--- a/src/views/app/AppHomeView.vue
+++ b/src/views/app/AppHomeView.vue
@@ -42,7 +42,7 @@
       >
         کسب‌وکاری یافت نشد.
       </div>
-      <ul v-else class="space-y-3">
+      <ul v-else class="space-y-2">
         <li v-for="b in filteredBusinesses" :key="b.id">
           <BusinessCard :business="b" />
         </li>