Replace emoji icons with Lucide icons

package-lock.json

@@ -8,6 +8,7 @@
       "name": "montime-web",
       "version": "0.0.1",
       "dependencies": {
+        "@lucide/vue": "^1.16.0",
         "@vueuse/core": "^12.8.2",
         "pinia": "^2.3.1",
         "vue": "^3.5.13",
@@ -562,6 +563,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lucide/vue": {
+      "version": "1.16.0",
+      "resolved": "https://mirror-npm.runflare.com/@lucide/vue/-/vue-1.16.0.tgz",
+      "integrity": "sha512-kiHx0fe49DMjQuvNaEOu9Jou6u9FwdqQ8xbZIKlD47sXrOI8g59kIeeQL42NBLI4AvO+UJsbaPX0hEK/4rHSBQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://mirror-npm.runflare.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

package.json

@@ -10,6 +10,7 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json"
   },
   "dependencies": {
+    "@lucide/vue": "^1.16.0",
     "@vueuse/core": "^12.8.2",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",

src/components/business/BusinessCard.vue

@@ -16,8 +16,12 @@
       <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">
+      <p
-        📍 {{ business.address }}
+        v-if="business.address"
+        class="mt-0.5 flex items-center gap-1 truncate text-xs text-muted"
+      >
+        <AppIcon name="map-pin" size="sm" class="shrink-0" />
+        <span class="truncate">{{ business.address }}</span>
       </p>
     </div>
 
@@ -33,9 +37,9 @@
       />
       <div
         v-else
-        class="flex h-full w-full items-center justify-center text-xl text-muted/50"
+        class="flex h-full w-full items-center justify-center text-muted/40"
       >
-        🏪
+        <AppIcon name="store" size="lg" />
       </div>
     </div>
   </RouterLink>
@@ -44,6 +48,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Business } from '@/api/types';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import { businessCoverUrl } from '@/utils/media';
 
 const props = defineProps<{

src/components/ui/AppIcon.vue

@@ -0,0 +1,72 @@
+<template>
+  <component
+    :is="iconComponent"
+    :class="sizeClass"
+    :stroke-width="strokeWidth"
+    aria-hidden="true"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { computed } from 'vue';
+import {
+  ArrowRight,
+  Calendar,
+  Camera,
+  CircleCheck,
+  ClipboardList,
+  FolderOpen,
+  Home,
+  LayoutDashboard,
+  MapPin,
+  Moon,
+  Plus,
+  Search,
+  Store,
+  Sun,
+  User,
+  Users,
+  X,
+} from '@lucide/vue';
+import type { AppIconName } from '@/types/icons';
+
+const iconMap: Record<AppIconName, Component> = {
+  home: Home,
+  calendar: Calendar,
+  user: User,
+  store: Store,
+  plus: Plus,
+  'layout-dashboard': LayoutDashboard,
+  folder: FolderOpen,
+  'clipboard-list': ClipboardList,
+  users: Users,
+  'map-pin': MapPin,
+  sun: Sun,
+  moon: Moon,
+  'arrow-right': ArrowRight,
+  x: X,
+  camera: Camera,
+  'circle-check': CircleCheck,
+  search: Search,
+};
+
+const props = withDefaults(
+  defineProps<{
+    name: AppIconName;
+    size?: 'sm' | 'md' | 'lg';
+    strokeWidth?: number;
+  }>(),
+  {
+    size: 'md',
+    strokeWidth: 2,
+  },
+);
+
+const sizeClass = computed(() => {
+  const map = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' } as const;
+  return map[props.size];
+});
+
+const iconComponent = computed(() => iconMap[props.name]);
+</script>

src/components/ui/ThemeToggle.vue

@@ -5,13 +5,14 @@
     :aria-label="isDark ? 'حالت روشن' : 'حالت تاریک'"
     @click="toggle"
   >
-    <span v-if="isDark" aria-hidden="true">☀️</span>
+    <AppIcon v-if="isDark" name="sun" />
-    <span v-else aria-hidden="true">🌙</span>
+    <AppIcon v-else name="moon" />
   </button>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import { useTheme } from '@/composables/useTheme';
 
 const { isDark: mode, toggle } = useTheme();

src/layouts/WebAppLayout.vue

@@ -41,7 +41,7 @@
               : 'text-muted hover:bg-surface-3 hover:text-text'
           "
         >
-          <span class="text-lg" aria-hidden="true">{{ item.icon }}</span>
+          <AppIcon :name="item.icon" size="lg" />
           <span>{{ item.label }}</span>
         </RouterLink>
       </div>
@@ -53,32 +53,34 @@
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import AppShell from '@/components/shell/AppShell.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import ThemeToggle from '@/components/ui/ThemeToggle.vue';
+import type { NavItem } from '@/types/icons';
 import { useAuthStore } from '@/stores/auth';
 
 const auth = useAuthStore();
 const route = useRoute();
 const router = useRouter();
 
-const navItems = computed(() => {
+const navItems = computed((): NavItem[] => {
-  const items = [
+  const items: NavItem[] = [
-    { to: '/app', name: 'app-home', label: 'خانه', icon: '🏠' },
+    { to: '/app', name: 'app-home', label: 'خانه', icon: 'home' },
-    { to: '/app/bookings', name: 'app-bookings', label: 'رزروها', icon: '📅' },
+    { to: '/app/bookings', name: 'app-bookings', label: 'رزروها', icon: 'calendar' },
-    { to: '/app/profile', name: 'app-profile', label: 'پروفایل', icon: '👤' },
+    { to: '/app/profile', name: 'app-profile', label: 'پروفایل', icon: 'user' },
   ];
   if (auth.isBusinessOwner) {
     items.splice(2, 0, {
       to: '/app/owner',
       name: 'app-owner',
       label: 'کسب‌وکار',
-      icon: '🏪',
+      icon: 'store',
     });
   } else if (auth.isCustomer) {
     items.splice(2, 0, {
       to: '/app/register-business',
       name: 'app-register-business',
       label: 'ثبت کسب‌وکار',
-      icon: '➕',
+      icon: 'plus',
     });
   }
   return items;

src/types/icons.ts

@@ -0,0 +1,25 @@
+export type AppIconName =
+  | 'home'
+  | 'calendar'
+  | 'user'
+  | 'store'
+  | 'plus'
+  | 'layout-dashboard'
+  | 'folder'
+  | 'clipboard-list'
+  | 'users'
+  | 'map-pin'
+  | 'sun'
+  | 'moon'
+  | 'arrow-right'
+  | 'x'
+  | 'camera'
+  | 'circle-check'
+  | 'search';
+
+export type NavItem = {
+  to: string;
+  name: string;
+  label: string;
+  icon: AppIconName;
+};

src/views/app/AppBusinessDetailView.vue

@@ -10,10 +10,11 @@
     <section v-else-if="business" class="space-y-6">
       <button
         type="button"
-        class="text-sm text-brand-600 dark:text-brand-500"
+        class="inline-flex items-center gap-1 text-sm text-brand-600 dark:text-brand-500"
         @click="router.back()"
       >
-        ← بازگشت
+        <AppIcon name="arrow-right" size="sm" />
+        بازگشت
       </button>
 
       <div>
@@ -92,6 +93,7 @@ import { fetchBusiness } from '@/api/businesses';
 import { ApiError } from '@/api/client';
 import type { Business, BusinessService } from '@/api/types';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import WebAppLayout from '@/layouts/WebAppLayout.vue';
 import { formatDuration, formatPriceToman } from '@/utils/format';
 

src/views/app/AppHomeView.vue

@@ -6,14 +6,19 @@
         <p class="mt-1 text-sm text-muted">کسب‌وکارهای محلی نزدیک شما</p>
       </div>
 
-      <div>
+      <div class="relative">
         <label class="sr-only" for="search">جستجو</label>
+        <AppIcon
+          name="search"
+          size="sm"
+          class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted"
+        />
         <input
           id="search"
           v-model="searchQuery"
           type="search"
           placeholder="جستجو در نام یا آدرس…"
-          class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+          class="w-full rounded-xl border border-border bg-surface-2 py-3 pe-4 ps-10 text-sm text-text outline-none placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
         />
       </div>
 
@@ -58,6 +63,7 @@ import { fetchBusinesses } from '@/api/businesses';
 import { ApiError } from '@/api/client';
 import type { Business, BusinessCategory } from '@/api/types';
 import BusinessCard from '@/components/business/BusinessCard.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import CategoryFilter from '@/components/business/CategoryFilter.vue';
 import WebAppLayout from '@/layouts/WebAppLayout.vue';