feat(ui): standardize design system, modals, sidebar, and form inputs

- Implement unified design system tokens, 10px radius, and IRANSans typography
- Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout
- Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions
- Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components
- Add draggable bottom-left QuickCreate floating action button

apps/web/src/views/LeadFormsSettingsView.vue

@@ -3,6 +3,13 @@ import { computed, onMounted, ref } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import {
+  UiBadge,
+  UiButton,
+  UiCard,
+  UiEmptyState,
+  UiPageHeader,
+} from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
 import type { LeadFormDto } from '@mento/shared';
 import { toFaDigits } from '@/lib/jalali';
@@ -59,59 +66,186 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
-    <header class="page-head">
-      <div>
-        <h1>
-          فرم‌ساز
-          <UiIcon name="layers" :size="22" />
-        </h1>
-        <p class="lead">فرم وب بسازید، فیلدها را بچینید و پاسخ‌ها را در باشگاه مشتریان و کاریز ببینید.</p>
-      </div>
-      <button class="btn primary" type="button" :disabled="saving" @click="createForm">
-        + فرم جدید
-      </button>
-    </header>
-    <p v-if="error" class="err">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
-    <p v-else class="muted">{{ countLabel }} فرم</p>
+  <section class="crm-page lead-forms-page" dir="rtl">
+    <UiPageHeader
+      title="فرم‌ساز وب"
+      description="فرم‌های آنلاین بسازید، فیلدها را بچینید و لیدها را به صورت خودکار در کاریز و باشگاه مشتریان دریافت کنید."
+    >
+      <template #actions>
+        <UiButton :loading="saving" @click="createForm">
+          <template #icon>
+            <UiIcon name="plus" />
+          </template>
+          فرم جدید
+        </UiButton>
+      </template>
+    </UiPageHeader>
 
-    <div class="list">
-      <article v-for="form in forms" :key="form.id" class="card">
-        <div>
-          <strong>{{ form.name }}</strong>
-          <p>{{ form.isActive ? 'فعال' : 'غیرفعال' }} · {{ toFaDigits(form.fields.length) }} فیلد · {{ toFaDigits(form.submissionCount ?? 0) }} پاسخ</p>
+    <div v-if="error" class="crm-alert crm-alert-danger">{{ error }}</div>
+
+    <div v-else-if="!loading && forms.length" class="forms-summary">
+      <span class="forms-count-badge">{{ countLabel }} فرم ساخته شده</span>
+    </div>
+
+    <UiEmptyState
+      v-if="!loading && !forms.length"
+      title="هنوز فرمی نساخته‌اید"
+      description="با ساخت اولین فرم، می‌توانید در وب‌سایت یا شبکه‌های اجتماعی سرنخ و مشتری جذب کنید."
+      icon="document"
+    >
+      <template #action>
+        <UiButton :loading="saving" @click="createForm">
+          <template #icon>
+            <UiIcon name="plus" />
+          </template>
+          ساخت اولین فرم
+        </UiButton>
+      </template>
+    </UiEmptyState>
+
+    <div v-else class="forms-list">
+      <UiCard v-for="form in forms" :key="form.id" class="form-card">
+        <div class="form-info">
+          <div class="form-title-row">
+            <strong class="form-name">{{ form.name }}</strong>
+            <UiBadge :variant="form.isActive ? 'success' : 'neutral'">
+              {{ form.isActive ? 'فعال' : 'غیرفعال' }}
+            </UiBadge>
+          </div>
+          <p class="form-meta">
+            <span>{{ toFaDigits(form.fields.length) }} فیلد سفارشی</span>
+            <span class="meta-dot">·</span>
+            <span>{{ toFaDigits(form.submissionCount ?? 0) }} ارسال شده</span>
+            <span v-if="form.source" class="meta-dot">·</span>
+            <span v-if="form.source">منبع: {{ form.source }}</span>
+          </p>
         </div>
-        <div class="ops">
-          <RouterLink class="btn ghost" :to="{ name: 'lead-form-builder', params: { id: form.id } }">ویرایش</RouterLink>
-          <a class="btn ghost" :href="form.publicPath" target="_blank" rel="noopener">پیش‌نمایش</a>
-          <button class="link danger" type="button" @click="removeForm(form)">حذف</button>
+
+        <div class="form-actions">
+          <RouterLink :to="{ name: 'lead-form-builder', params: { id: form.id } }">
+            <UiButton variant="secondary" size="sm">
+              <template #icon>
+                <UiIcon name="pencil" />
+              </template>
+              ویرایش فیلدها
+            </UiButton>
+          </RouterLink>
+
+          <a :href="form.publicPath" target="_blank" rel="noopener" class="preview-link">
+            <UiButton variant="ghost" size="sm">
+              <template #icon>
+                <UiIcon name="eye" />
+              </template>
+              پیش‌نمایش
+            </UiButton>
+          </a>
+
+          <UiButton variant="danger" size="sm" @click="removeForm(form)">
+            <template #icon>
+              <UiIcon name="trash" />
+            </template>
+            حذف
+          </UiButton>
         </div>
-      </article>
-      <p v-if="!loading && !forms.length" class="empty">هنوز فرمی نساخته‌اید.</p>
+      </UiCard>
     </div>
   </section>
 </template>
 
 <style scoped>
-.page { display: grid; gap: 1rem; }
-.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
-h1 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 800; display: inline-flex; gap: 0.4rem; align-items: center; }
-h1 :deep(.ico) { color: #14b8a6; }
-.lead, .muted { margin: 0.25rem 0 0; color: #64748b; }
-.err { color: #b91c1c; }
-.btn, .link { font: inherit; cursor: pointer; }
-.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); height: var(--control-h); padding: 0 0.95rem; border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; text-decoration: none; box-sizing: border-box; }
-.btn.primary { background: #14b8a6; color: #fff; }
-.btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; }
-.link { background: none; border: 0; font-weight: 700; }
-.danger { color: #b91c1c; }
-.list { display: grid; gap: 0.75rem; }
-.card { background: #fff; border-radius: 16px; padding: 1rem 1.05rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
-.card p { margin: 0.25rem 0 0; color: #64748b; font-size: 0.88rem; }
-.ops { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
-.empty { padding: 1rem; border: 1px dashed #e2e8f0; border-radius: 16px; color: #64748b; text-align: center; }
-@media (max-width: 700px) {
-  .page-head, .card, .ops { flex-direction: column; align-items: stretch; }
+.lead-forms-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-6);
+  width: 100%;
+  max-width: 100%;
+}
+
+.forms-summary {
+  display: flex;
+  align-items: center;
+}
+
+.forms-count-badge {
+  font-size: var(--fs-sm);
+  color: var(--color-text-secondary);
+  background: var(--color-surface-soft);
+  padding: var(--sp-1) var(--sp-3);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+}
+
+.forms-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+
+.form-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--sp-4);
+  padding: var(--sp-4) var(--sp-5);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.form-card:hover {
+  border-color: var(--color-brand-300, #5eead4);
+  box-shadow: var(--shadow-sm);
+}
+
+.form-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1);
+}
+
+.form-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
+.form-name {
+  font-size: var(--fs-md);
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.form-meta {
+  margin: 0;
+  font-size: var(--fs-xs);
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+
+.meta-dot {
+  color: var(--color-text-muted);
+}
+
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+}
+
+.preview-link {
+  text-decoration: none;
+}
+
+@media (max-width: 640px) {
+  .form-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .form-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
 }
 </style>