Add row selection, bulk delete, row numbers and page size picker to tables; redesign person profile header

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

apps/web/src/lib/pageSize.ts

@@ -0,0 +1,25 @@
+import { ref, watch, type Ref } from 'vue';
+
+export const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+const STORAGE_PREFIX = 'mento_page_size:';
+
+/** تعداد ردیف هر صفحه‌ی جدول که برای هر جدول در مرورگر به خاطر سپرده می‌شود. */
+export function usePageSize(tableKey: string, fallback = 20): Ref<number> {
+  let initial = fallback;
+  try {
+    const stored = Number(localStorage.getItem(STORAGE_PREFIX + tableKey));
+    if (PAGE_SIZE_OPTIONS.includes(stored)) initial = stored;
+  } catch {
+    /* storage unavailable */
+  }
+  const size = ref(initial);
+  watch(size, (next) => {
+    try {
+      localStorage.setItem(STORAGE_PREFIX + tableKey, String(next));
+    } catch {
+      /* storage unavailable */
+    }
+  });
+  return size;
+}

apps/web/src/lib/tableColumns.ts

@@ -132,6 +132,10 @@ function syncLabels(el: HTMLElement, key: string) {
   if (!(el instanceof HTMLTableElement)) return;
   el.dataset.tc = key;
   const labels = readHeaderLabels(el);
+  const wantsRowNum = !labels.includes('#') && !el.hasAttribute('data-no-rownum');
+  if (wantsRowNum !== el.hasAttribute('data-rownum')) {
+    el.toggleAttribute('data-rownum', wantsRowNum);
+  }
   const prev = labelsByTable[key];
   if (!prev || prev.length !== labels.length || prev.some((v, i) => v !== labels[i])) {
     labelsByTable[key] = labels;