Merge design_ui_v2 into design_ui so the new design system can be previewed without dropping later product work.

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

apps/web/src/views/ActivitiesView.vue

@@ -10,8 +10,12 @@ import {
   startOfLocalDay,
   toFaDigits,
 } from '@/lib/jalali';
-import UiButton from '@/components/ui/UiButton.vue';
-import UiModal from '@/components/ui/UiModal.vue';
+import {
+  UiButton,
+  UiModal,
+  UiPageHeader,
+  UiPagination,
+} from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
 import ActivityFormView from '@/views/ActivityFormView.vue';
 import type {
@@ -124,8 +128,6 @@ const pageCount = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE))
 const filterLabel = computed(() => TABS.find((t) => t.key === filter.value)?.label ?? 'امروز');
 const trulyEmpty = computed(() => !loading.value && counts.value.all === 0 && !q.value.trim());
 const listEmpty = computed(() => !loading.value && !items.value.length);
-const rangeFrom = computed(() => (total.value ? (page.value - 1) * PAGE_SIZE + 1 : 0));
-const rangeTo = computed(() => Math.min(page.value * PAGE_SIZE, total.value));
 
 function isLastItem(id: string) {
   const rows = items.value;
@@ -346,21 +348,19 @@ onMounted(() => {
       <span>فعالیت‌ها</span>
     </nav>
 
-    <header class="page-head">
-      <div>
-        <p class="eyebrow">پیگیری</p>
-        <h1>فعالیت‌ها</h1>
-        <p class="lead">تماس، جلسه و وظیفه — امروز و عقب‌افتاده‌ها یکجا.</p>
-      </div>
-      <div class="head-actions">
-        <button class="btn ghost excel-btn" type="button" :disabled="busy" @click.stop="exportExcel">
+    <UiPageHeader
+      title="فعالیت‌ها"
+      lead="تماس، جلسه و وظیفه — امروز و عقب‌افتاده‌ها یکجا."
+    >
+      <template #actions>
+        <UiButton variant="ghost" type="button" :disabled="busy" @click.stop="exportExcel">
           <span class="btn-full">خروجی اکسل</span>
           <span class="btn-short">خروجی</span>
-        </button>
-        <button class="btn ghost excel-btn" type="button" :disabled="busy" @click.stop="pickImportFile">
+        </UiButton>
+        <UiButton variant="ghost" type="button" :disabled="busy" @click.stop="pickImportFile">
           <span class="btn-full">ورود از اکسل</span>
           <span class="btn-short">ورود</span>
-        </button>
+        </UiButton>
         <input
           ref="fileInput"
           type="file"
@@ -368,16 +368,18 @@ onMounted(() => {
           hidden
           @change="onImportFile"
         />
-        <UiButton type="button" @click="activityModal = {}">
+        <UiButton variant="primary" @click="activityModal = {}">
           <UiIcon name="plus" :size="16" />
           فعالیت جدید
         </UiButton>
-        <RouterLink class="btn ghost" :to="{ name: 'activities-calendar' }">
-          <UiIcon name="calendar" :size="18" />
-          تقویم
+        <RouterLink :to="{ name: 'activities-calendar' }">
+          <UiButton variant="ghost">
+            <UiIcon name="calendar" :size="16" />
+            تقویم
+          </UiButton>
         </RouterLink>
-      </div>
-    </header>
+      </template>
+    </UiPageHeader>
 
     <div class="tabs" role="tablist" aria-label="فیلتر فعالیت">
       <button
@@ -621,23 +623,13 @@ onMounted(() => {
         </article>
       </div>
 
-      <footer v-if="total" class="pager">
-        <p>نمایش {{ toFaDigits(rangeFrom) }} تا {{ toFaDigits(rangeTo) }} از {{ toFaDigits(total) }} فعالیت</p>
-        <div class="pages">
-          <button type="button" :disabled="page <= 1" @click="setPage(page - 1)">‹</button>
-          <button
-            v-for="n in pageCount"
-            :key="n"
-            type="button"
-            :class="{ on: n === page }"
-            @click="setPage(n)"
-          >
-            {{ toFaDigits(n) }}
-          </button>
-          <button type="button" :disabled="page >= pageCount" @click="setPage(page + 1)">›</button>
-        </div>
-        <p class="per">نمایش {{ toFaDigits(PAGE_SIZE) }} در هر صفحه</p>
-      </footer>
+      <UiPagination
+        v-if="total"
+        :page="page"
+        :total-pages="pageCount"
+        :total-items="total"
+        @update:page="setPage"
+      />
     </template>
 
     <UiModal
@@ -737,26 +729,34 @@ h1 {
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
+  height: var(--control-h);
   min-height: var(--control-h);
-  padding: 0 0.95rem;
+  padding: 0 0.85rem;
   border-radius: var(--radius);
-  font-weight: 700;
+  font-weight: 600;
+  font-size: var(--fs-sm);
   border: 1px solid transparent;
   cursor: pointer;
   font: inherit;
   text-decoration: none;
+  box-sizing: border-box;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
 }
 
 .btn.primary {
-  background: #14b8a6;
+  background: var(--accent);
   color: #fff;
-  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
 }
 
 .btn.ghost {
   background: #fff;
-  color: #0f766e;
-  border-color: #99f6e4;
+  color: var(--ink-secondary);
+  border-color: var(--line);
+}
+
+.btn.ghost:hover {
+  background: var(--surface-subtle);
+  border-color: var(--line-strong);
 }
 
 .btn.wide {
@@ -802,25 +802,38 @@ h1 {
 }
 
 .search {
-  flex: 1;
-  min-width: 0;
+  flex: 1 1 200px;
+  min-width: 180px;
+  max-width: 400px;
+  height: var(--control-h);
+  min-height: var(--control-h);
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 0 0.85rem;
-  color: #94a3b8;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0 0.75rem;
+  color: var(--muted);
+  box-sizing: border-box;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.search:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
 }
 
 .search input {
   flex: 1;
   min-width: 0;
   border: 0;
+  outline: none;
   background: none;
-  padding: 0.75rem 0;
+  padding: 0;
   font: inherit;
+  font-size: var(--fs-sm);
+  color: var(--ink);
 }
 
 .filter-wrap,
@@ -839,7 +852,7 @@ h1 {
   inset-inline-end: 0;
   min-width: 11rem;
   background: #fff;
-  border-radius: 12px;
+  border-radius: var(--radius);
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
   padding: 0.35rem;
   display: grid;
@@ -859,7 +872,7 @@ h1 {
   border: 0;
   background: none;
   padding: 0.6rem 0.7rem;
-  border-radius: 8px;
+  border-radius: var(--radius);
   font: inherit;
   cursor: pointer;
   color: #0f172a;
@@ -874,7 +887,7 @@ h1 {
 
 .empty-card {
   background: #fff;
-  border-radius: 22px;
+  border-radius: var(--radius);
   box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
   padding: 2.4rem 1.2rem 2rem;
   display: grid;
@@ -914,7 +927,7 @@ h1 {
   font: inherit;
   cursor: pointer;
   background: #f8fafc;
-  border-radius: 10px;
+  border-radius: var(--radius);
   padding: 0.65rem 0.8rem;
   color: #0f766e;
   font-weight: 700;
@@ -933,7 +946,7 @@ h1 {
 
 .table {
   background: #fff;
-  border-radius: 18px;
+  border-radius: var(--radius);
   overflow: visible;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
@@ -950,9 +963,9 @@ h1 {
 .thead {
   color: #94a3b8;
   font-size: 0.78rem;
-  font-weight: 700;
+  font-weight: 600;
   border-bottom: 1px solid #f1f5f9;
-  border-radius: 18px 18px 0 0;
+  border-radius: var(--radius) var(--radius) 0 0;
 }
 
 .trow {
@@ -962,7 +975,7 @@ h1 {
 
 .trow:last-child {
   border-bottom: 0;
-  border-radius: 0 0 18px 18px;
+  border-radius: 0 0 var(--radius) var(--radius);
 }
 
 .trow.menu-open {
@@ -982,7 +995,7 @@ h1 {
 
 .title {
   color: inherit;
-  font-weight: 800;
+  font-weight: 600;
   overflow-wrap: anywhere;
 }
 
@@ -1100,7 +1113,7 @@ time.note {
   border: 0;
   background: none;
   color: #64748b;
-  border-radius: 8px;
+  border-radius: var(--radius);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -1114,7 +1127,7 @@ time.note {
 .card {
   background: #fff;
   border: 1px solid #eef2f6;
-  border-radius: 18px;
+  border-radius: var(--radius);
   padding: 0.9rem 0.95rem 0.75rem;
 }
 
@@ -1132,7 +1145,7 @@ time.note {
 .card-main time {
   display: inline-block;
   background: none;
-  font-weight: 800;
+  font-weight: 600;
   font-size: 0.95rem;
   margin-bottom: 0.2rem;
 }
@@ -1224,7 +1237,7 @@ time.note {
   height: 32px;
   border: 0;
   background: #fff;
-  border-radius: 8px;
+  border-radius: var(--radius);
   cursor: pointer;
 }