Group the sidebar by sales, tools, and settings, and keep commissions under sales.

apps/web/src/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
@@ -28,25 +28,17 @@ const todayLabel = computed(() => formatJalaliShort(new Date()));
 
 const SIDEBAR_KEY = 'mento_sidebar_collapsed';
 const collapsed = ref(false);
-const moreFlyout = ref(false);
 
+const customersOpen = ref(false);
 const salesOpen = ref(false);
-const moreOpen = ref(false);
+const activitiesOpen = ref(false);
+const supportOpen = ref(false);
+const toolsOpen = ref(false);
 const settingsOpen = ref(false);
 const globalSearch = ref('');
 const activityBadge = ref(0);
 
-const salesPaths = ['/quotes', '/invoices', '/inventory', '/cheques', '/commissions', '/sales/forecast', '/reports', '/notes', '/tickets'];
-const morePaths = ['/activities/calendar', '/projects', '/project-cards', '/loyalty'];
-const settingsPaths = [
-  '/settings/team',
-  '/settings/lead-forms',
-  '/settings/custom-fields',
-  '/settings/products',
-  '/settings/currencies',
-  '/settings/tahesab',
-  '/settings/faq',
-];
+type FoldKey = 'customers' | 'sales' | 'activities' | 'support' | 'tools' | 'settings';
 
 function pathIn(prefixes: string[]) {
   return prefixes.some(
@@ -54,45 +46,108 @@ function pathIn(prefixes: string[]) {
   );
 }
 
-const salesActive = computed(() => pathIn(salesPaths));
-const moreActive = computed(() => pathIn(morePaths));
-const settingsActive = computed(() => pathIn(settingsPaths));
-const productsActive = computed(() => route.path.startsWith('/settings/products'));
+const customersActive = computed(() => pathIn(['/contacts']));
+const salesActive = computed(() =>
+  pathIn(['/pipeline', '/deals', '/quotes', '/invoices', '/commissions', '/sales/forecast', '/settings/products']),
+);
+const activitiesActive = computed(() => pathIn(['/activities']));
+const notesActive = computed(() => route.path === '/notes' || route.path.startsWith('/notes/'));
+const supportActive = computed(() => pathIn(['/tickets']));
+const loyaltyActive = computed(() => pathIn(['/loyalty']));
+const reportsActive = computed(() => pathIn(['/reports']));
 const automationsActive = computed(() => route.path.startsWith('/settings/automations'));
-const extraActive = computed(() =>
+const toolsActive = computed(() =>
+  pathIn(['/settings/lead-forms', '/projects', '/project-cards', '/inventory', '/cheques', '/attachments']),
+);
+const settingsActive = computed(() =>
   pathIn([
-    '/quotes',
-    '/invoices',
-    '/inventory',
-    '/cheques',
-    '/commissions',
-    '/sales/forecast',
-    '/notes',
-    '/tickets',
-    '/settings/lead-forms',
+    '/settings/team',
     '/settings/custom-fields',
     '/settings/currencies',
     '/settings/tahesab',
     '/settings/faq',
-  ]) || moreActive.value,
+  ]),
 );
+const peopleContactsActive = computed(
+  () => customersActive.value && route.query.tab !== 'companies',
+);
+const companyContactsActive = computed(
+  () => customersActive.value && route.query.tab === 'companies',
+);
+const myActivitiesActive = computed(
+  () =>
+    route.path === '/activities' ||
+    route.path.startsWith('/activities/new') ||
+    (route.path.startsWith('/activities/') && !route.path.startsWith('/activities/calendar')),
+);
+
+function givenName(fullName: string): string {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length <= 1) return fullName.trim();
+  return parts.slice(0, -1).join(' ');
+}
+
+const profileNameEl = ref<HTMLElement | null>(null);
+const useShortProfileName = ref(false);
+const profileFullName = computed(() => auth.user?.fullName?.trim() || '');
+const profileDisplayName = computed(() => {
+  if (!profileFullName.value) return '';
+  return useShortProfileName.value
+    ? givenName(profileFullName.value)
+    : profileFullName.value;
+});
+
+async function fitProfileName() {
+  if (collapsed.value) {
+    useShortProfileName.value = false;
+    return;
+  }
+  useShortProfileName.value = false;
+  await nextTick();
+  const el = profileNameEl.value;
+  if (!el) return;
+  if (el.scrollWidth > el.clientWidth + 1) {
+    useShortProfileName.value = true;
+  }
+}
+
+let profileNameObserver: ResizeObserver | null = null;
+
+watch([profileFullName, collapsed], () => {
+  void fitProfileName();
+});
 
 watch(
   () => route.path,
   () => {
+    if (customersActive.value) customersOpen.value = true;
     if (salesActive.value) salesOpen.value = true;
-    if (moreActive.value) moreOpen.value = true;
+    if (activitiesActive.value) activitiesOpen.value = true;
+    if (supportActive.value) supportOpen.value = true;
+    if (toolsActive.value) toolsOpen.value = true;
     if (settingsActive.value) settingsOpen.value = true;
   },
   { immediate: true },
 );
 
-function toggleGroup(key: 'sales' | 'more' | 'settings', event: Event) {
+function toggleFold(key: FoldKey) {
+  if (key === 'customers') customersOpen.value = !customersOpen.value;
+  if (key === 'sales') salesOpen.value = !salesOpen.value;
+  if (key === 'activities') activitiesOpen.value = !activitiesOpen.value;
+  if (key === 'support') supportOpen.value = !supportOpen.value;
+  if (key === 'tools') toolsOpen.value = !toolsOpen.value;
+  if (key === 'settings') settingsOpen.value = !settingsOpen.value;
+}
+
+function onFoldClick(key: FoldKey, fallback: string, event: Event) {
   event.preventDefault();
   event.stopPropagation();
-  if (key === 'sales') salesOpen.value = !salesOpen.value;
-  if (key === 'more') moreOpen.value = !moreOpen.value;
-  if (key === 'settings') settingsOpen.value = !settingsOpen.value;
+  if (collapsed.value) {
+    void router.push(fallback);
+    closeMenu();
+    return;
+  }
+  toggleFold(key);
 }
 
 const menuOpen = ref(false);
@@ -106,12 +161,10 @@ const hasUnread = computed(() => unreadCount.value > 0);
 
 function closeMenu() {
   menuOpen.value = false;
-  moreFlyout.value = false;
 }
 
 function toggleCollapsed() {
   collapsed.value = !collapsed.value;
-  moreFlyout.value = false;
   try {
     localStorage.setItem(SIDEBAR_KEY, collapsed.value ? '1' : '0');
   } catch {
@@ -119,21 +172,6 @@ function toggleCollapsed() {
   }
 }
 
-const moreBtnRef = ref<HTMLElement | null>(null);
-const flyoutRef = ref<HTMLElement | null>(null);
-
-function toggleMoreFlyout() {
-  moreFlyout.value = !moreFlyout.value;
-}
-
-function onDocClick(event: MouseEvent) {
-  if (!moreFlyout.value) return;
-  const target = event.target;
-  if (!(target instanceof Node)) return;
-  if (moreBtnRef.value?.contains(target) || flyoutRef.value?.contains(target)) return;
-  moreFlyout.value = false;
-}
-
 function closeNotif() {
   notifOpen.value = false;
 }
@@ -241,13 +279,20 @@ onMounted(() => {
   void refreshNotifs();
   void loadActivityBadge();
   pollTimer = setInterval(() => void refreshNotifs(), 45000);
-  document.addEventListener('click', onDocClick, true);
+  void fitProfileName();
+  if (typeof ResizeObserver !== 'undefined') {
+    profileNameObserver = new ResizeObserver(() => {
+      void fitProfileName();
+    });
+    const meta = profileNameEl.value?.parentElement;
+    if (meta) profileNameObserver.observe(meta);
+  }
 });
 
 onUnmounted(() => {
   if (pollTimer) clearInterval(pollTimer);
-  document.removeEventListener('click', onDocClick, true);
   document.body.style.overflow = '';
+  profileNameObserver?.disconnect();
 });
 </script>
 
@@ -277,7 +322,7 @@ onUnmounted(() => {
               <i class="online-dot" title="آنلاین" aria-hidden="true" />
             </span>
             <span class="profile-meta">
-              <strong>{{ auth.user?.fullName }}</strong>
+              <strong ref="profileNameEl">{{ profileDisplayName }}</strong>
             </span>
           </RouterLink>
         </div>
@@ -298,58 +343,126 @@ onUnmounted(() => {
             <UiIcon name="home" :size="collapsed ? 20 : 18" />
             <span>داشبورد</span>
           </RouterLink>
-          <RouterLink to="/contacts" class="nav-item" title="مشتریان" @click="closeMenu">
-            <UiIcon name="users" :size="collapsed ? 20 : 18" />
-            <span>مشتریان</span>
-          </RouterLink>
-          <RouterLink to="/pipeline" class="nav-item" title="معاملات" @click="closeMenu">
-            <UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
-            <span>معاملات</span>
-          </RouterLink>
+
+          <div class="nav-fold" :class="{ open: customersOpen, active: customersActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="مشتریان"
+              :class="{ 'router-link-active': customersActive }"
+              :aria-expanded="customersOpen"
+              @click="onFoldClick('customers', '/contacts', $event)"
+            >
+              <UiIcon name="users" :size="collapsed ? 20 : 18" />
+              <span>مشتریان</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="customersOpen" class="nav-sub">
+              <RouterLink
+                to="/contacts"
+                :class="{ 'router-link-active': peopleContactsActive }"
+                @click="closeMenu"
+              >اشخاص</RouterLink>
+              <RouterLink
+                to="/contacts?tab=companies"
+                :class="{ 'router-link-active': companyContactsActive }"
+                @click="closeMenu"
+              >شرکت‌ها</RouterLink>
+            </div>
+          </div>
+
+          <div class="nav-fold" :class="{ open: salesOpen, active: salesActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="فروش"
+              :class="{ 'router-link-active': salesActive }"
+              :aria-expanded="salesOpen"
+              @click="onFoldClick('sales', '/pipeline', $event)"
+            >
+              <UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
+              <span>فروش</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="salesOpen" class="nav-sub">
+              <RouterLink
+                to="/pipeline"
+                :class="{ 'router-link-active': pathIn(['/pipeline', '/deals']) }"
+                @click="closeMenu"
+              >کاریز فروش / معاملات</RouterLink>
+              <RouterLink to="/quotes" @click="closeMenu">پیش‌فاکتورها</RouterLink>
+              <RouterLink to="/invoices" @click="closeMenu">فاکتورها</RouterLink>
+              <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
+              <RouterLink
+                v-if="canSettings"
+                to="/settings/products"
+                @click="closeMenu"
+              >محصولات و خدمات</RouterLink>
+              <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
+            </div>
+          </div>
+
+          <div class="nav-fold" :class="{ open: activitiesOpen, active: activitiesActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="فعالیت‌ها"
+              :class="{ 'router-link-active': activitiesActive }"
+              :aria-expanded="activitiesOpen"
+              @click="onFoldClick('activities', '/activities', $event)"
+            >
+              <UiIcon name="check" :size="collapsed ? 20 : 18" />
+              <span>فعالیت‌ها</span>
+              <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="activitiesOpen" class="nav-sub">
+              <RouterLink
+                to="/activities"
+                :class="{ 'router-link-active': myActivitiesActive }"
+                @click="closeMenu"
+              >فعالیت‌های من</RouterLink>
+              <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
+            </div>
+          </div>
+
           <RouterLink
-            to="/activities"
+            to="/notes"
             class="nav-item"
-            title="فعالیت‌ها"
-            active-class=""
-            exact-active-class=""
-            :class="{
-              'router-link-active':
-                route.path === '/activities' ||
-                route.path.startsWith('/activities/new') ||
-                (route.path.startsWith('/activities/') &&
-                  !route.path.startsWith('/activities/calendar')),
-            }"
+            title="یادداشت‌ها"
+            :class="{ 'router-link-active': notesActive }"
             @click="closeMenu"
           >
-            <UiIcon name="check" :size="collapsed ? 20 : 18" />
-            <span>فعالیت‌ها</span>
-            <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
+            <UiIcon name="document" :size="collapsed ? 20 : 18" />
+            <span>یادداشت‌ها</span>
           </RouterLink>
-          <RouterLink
-            to="/settings/products"
-            class="nav-item"
-            title="محصولات"
-            :class="{ 'router-link-active': productsActive }"
-            @click="closeMenu"
-          >
-            <UiIcon name="box" :size="collapsed ? 20 : 18" />
-            <span>محصولات</span>
+
+          <div class="nav-fold" :class="{ open: supportOpen, active: supportActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="پشتیبانی"
+              :class="{ 'router-link-active': supportActive }"
+              :aria-expanded="supportOpen"
+              @click="onFoldClick('support', '/tickets', $event)"
+            >
+              <UiIcon name="chat" :size="collapsed ? 20 : 18" />
+              <span>پشتیبانی</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="supportOpen" class="nav-sub">
+              <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
+            </div>
+          </div>
+
+          <RouterLink to="/loyalty" class="nav-item" title="باشگاه مشتریان" @click="closeMenu">
+            <UiIcon name="gift" :size="collapsed ? 20 : 18" />
+            <span>باشگاه مشتریان</span>
           </RouterLink>
           <RouterLink to="/reports" class="nav-item" title="گزارش‌ها" @click="closeMenu">
             <UiIcon name="chart" :size="collapsed ? 20 : 18" />
             <span>گزارش‌ها</span>
           </RouterLink>
-          <RouterLink
-            v-if="canSettings"
-            to="/settings/team"
-            class="nav-item"
-            title="تنظیمات"
-            :class="{ 'router-link-active': settingsActive && !productsActive }"
-            @click="closeMenu"
-          >
-            <UiIcon name="settings" :size="collapsed ? 20 : 18" />
-            <span>تنظیمات</span>
-          </RouterLink>
           <RouterLink
             v-if="canSettings"
             to="/settings/automations"
@@ -363,83 +476,64 @@ onUnmounted(() => {
           </RouterLink>
         </div>
 
-        <div v-if="collapsed" ref="moreBtnRef" class="nav-more desktop-only">
-          <button
-            class="nav-item more-btn"
-            type="button"
-            title="بیشتر"
-            :class="{ 'router-link-active': extraActive }"
-            :aria-expanded="moreFlyout"
-            @click="toggleMoreFlyout"
-          >
-            <UiIcon name="dots" :size="20" />
-            <span>بیشتر</span>
-          </button>
-        </div>
+        <div class="nav-sep" aria-hidden="true" />
 
-        <div class="nav-group" :class="{ open: salesOpen, active: salesActive }">
-          <button
-            class="nav-group-btn"
-            type="button"
-            :aria-expanded="salesOpen"
-            @click="toggleGroup('sales', $event)"
-          >
-            <span>فروش و مالی</span>
-            <span class="chev" aria-hidden="true" />
-          </button>
-          <div v-show="salesOpen" class="nav-sub">
-            <RouterLink
-              to="/invoices"
-              :class="{ 'router-link-active': route.path.startsWith('/invoices') || route.path.startsWith('/quotes') }"
-              @click="closeMenu"
-            >فاکتورها</RouterLink>
-            <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
-            <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
-            <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
-            <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
-            <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
-            <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
+        <div class="nav-utility">
+          <div class="nav-fold" :class="{ open: toolsOpen, active: toolsActive }">
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="ابزارها"
+              :class="{ 'router-link-active': toolsActive }"
+              :aria-expanded="toolsOpen"
+              @click="onFoldClick('tools', canSettings ? '/settings/lead-forms' : '/projects', $event)"
+            >
+              <UiIcon name="apps-plus" :size="collapsed ? 20 : 18" />
+              <span>ابزارها</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="toolsOpen" class="nav-sub">
+              <RouterLink
+                v-if="canSettings"
+                to="/settings/lead-forms"
+                @click="closeMenu"
+              >فرم‌ساز سرنخ</RouterLink>
+              <RouterLink
+                to="/projects"
+                :class="{ 'router-link-active': pathIn(['/projects', '/project-cards']) }"
+                @click="closeMenu"
+              >کاریز پروژه</RouterLink>
+              <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
+              <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
+              <RouterLink to="/attachments" @click="closeMenu">پیوست‌ها</RouterLink>
+            </div>
           </div>
-        </div>
 
-        <div class="nav-group" :class="{ open: moreOpen, active: moreActive }">
-          <button
-            class="nav-group-btn"
-            type="button"
-            :aria-expanded="moreOpen"
-            @click="toggleGroup('more', $event)"
+          <div
+            v-if="canSettings"
+            class="nav-fold"
+            :class="{ open: settingsOpen, active: settingsActive }"
           >
-            <span>موارد بیشتر</span>
-            <span class="chev" aria-hidden="true" />
-          </button>
-          <div v-show="moreOpen" class="nav-sub">
-            <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
-            <RouterLink to="/projects" @click="closeMenu">کاریز پروژه</RouterLink>
-            <RouterLink to="/loyalty" @click="closeMenu">باشگاه مشتریان</RouterLink>
-          </div>
-        </div>
-
-        <div
-          v-if="canSettings"
-          class="nav-group"
-          :class="{ open: settingsOpen, active: settingsActive }"
-        >
-          <button
-            class="nav-group-btn"
-            type="button"
-            :aria-expanded="settingsOpen"
-            @click="toggleGroup('settings', $event)"
-          >
-            <span>جزئیات تنظیمات</span>
-            <span class="chev" aria-hidden="true" />
-          </button>
-          <div v-show="settingsOpen" class="nav-sub">
-            <RouterLink to="/settings/team" @click="closeMenu">تیم و نقش‌ها</RouterLink>
-            <RouterLink to="/settings/lead-forms" @click="closeMenu">فرم‌ساز سرنخ</RouterLink>
-            <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
-            <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
-            <RouterLink to="/settings/tahesab" @click="closeMenu">ته‌حساب</RouterLink>
-            <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="تنظیمات"
+              :class="{ 'router-link-active': settingsActive }"
+              :aria-expanded="settingsOpen"
+              @click="onFoldClick('settings', '/settings/team', $event)"
+            >
+              <UiIcon name="settings" :size="collapsed ? 20 : 18" />
+              <span>تنظیمات</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+            <div v-show="settingsOpen" class="nav-sub">
+              <RouterLink to="/settings/team#settings-org" @click="closeMenu">تنظیمات عمومی</RouterLink>
+              <RouterLink to="/settings/team#settings-team" @click="closeMenu">تیم و نقش‌ها</RouterLink>
+              <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
+              <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
+              <RouterLink to="/settings/tahesab" @click="closeMenu">تنظیمات مالی / ته‌حساب</RouterLink>
+              <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
+            </div>
           </div>
         </div>
       </nav>
@@ -476,32 +570,6 @@ onUnmounted(() => {
       </div>
       </div>
 
-      <div v-if="collapsed && moreFlyout" ref="flyoutRef" class="more-flyout desktop-only">
-        <p>فروش و مالی</p>
-        <RouterLink
-          to="/invoices"
-          :class="{ 'router-link-active': route.path.startsWith('/invoices') || route.path.startsWith('/quotes') }"
-          @click="closeMenu"
-        >فاکتورها</RouterLink>
-        <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
-        <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
-        <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
-        <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
-        <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
-        <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
-        <p>موارد بیشتر</p>
-        <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
-        <RouterLink to="/projects" @click="closeMenu">کاریز پروژه</RouterLink>
-        <RouterLink to="/loyalty" @click="closeMenu">باشگاه مشتریان</RouterLink>
-        <template v-if="canSettings">
-          <p>تنظیمات</p>
-          <RouterLink to="/settings/lead-forms" @click="closeMenu">فرم‌ساز سرنخ</RouterLink>
-          <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
-          <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
-          <RouterLink to="/settings/tahesab" @click="closeMenu">ته‌حساب</RouterLink>
-          <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
-        </template>
-      </div>
     </aside>
 
     <div class="workspace">
@@ -670,18 +738,26 @@ onUnmounted(() => {
 
 .brand-cluster :deep(.brand-logo.full) {
   gap: 0.35rem;
-  min-width: 0;
+  flex-shrink: 0;
+  min-width: max-content;
+}
+
+.sidebar-logo {
+  flex-shrink: 0;
+}
+
+.brand-cluster :deep(.text) {
+  flex-shrink: 0;
 }
 
 .brand-cluster :deep(.text strong) {
   font-size: 0.92rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .brand-cluster :deep(.text small) {
   font-size: 0.62rem;
+  white-space: nowrap;
 }
 
 .side-nav {
@@ -750,27 +826,35 @@ onUnmounted(() => {
   color: #fff;
 }
 
-.nav-group {
-  margin-top: 0.55rem;
+.nav-fold {
+  display: grid;
+  gap: 0.15rem;
 }
 
-.nav-group-btn {
+.nav-fold-btn {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   border: 0;
   background: transparent;
-  color: #94a3b8;
-  font: inherit;
-  font-size: 0.78rem;
-  font-weight: 700;
-  padding: 0.55rem 1rem;
-  border-radius: 14px;
   cursor: pointer;
+  font: inherit;
   text-align: right;
 }
 
+.nav-fold-btn .chev {
+  margin-inline-start: auto;
+}
+
+.nav-sep {
+  height: 1px;
+  margin: 0.55rem 0.85rem;
+  background: #e8eef4;
+}
+
+.nav-utility {
+  display: grid;
+  gap: 0.35rem;
+}
+
 .chev {
   width: 0.42rem;
   height: 0.42rem;
@@ -778,9 +862,10 @@ onUnmounted(() => {
   border-bottom: 1.6px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s ease;
+  flex-shrink: 0;
 }
 
-.nav-group.open .chev {
+.nav-fold.open > .nav-fold-btn .chev {
   transform: rotate(-135deg);
 }
 
@@ -832,7 +917,7 @@ onUnmounted(() => {
   background: transparent;
   color: inherit;
   text-decoration: none;
-  flex-shrink: 0;
+  flex: 1 1 0;
   min-width: 0;
   max-width: 4.8rem;
 }
@@ -1146,19 +1231,23 @@ onUnmounted(() => {
   }
 
   .sidebar.collapsed .nav-primary,
-  .sidebar.collapsed .nav-more {
+  .sidebar.collapsed .nav-utility {
     display: grid;
     width: 100%;
     gap: 0.08rem;
   }
 
-  .sidebar.collapsed .more-btn {
-    width: 100%;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
+  .sidebar.collapsed .nav-sep {
+    margin: 0.25rem 0.55rem;
+  }
+
+  .sidebar.collapsed .nav-fold {
+    gap: 0;
+  }
+
+  .sidebar.collapsed .nav-sub,
+  .sidebar.collapsed .nav-fold-btn .chev {
+    display: none;
   }
 
   .sidebar.collapsed .nav-item {
@@ -1197,7 +1286,6 @@ onUnmounted(() => {
     font-size: 0.58rem;
   }
 
-  .sidebar.collapsed .nav-group,
   .sidebar.collapsed .promo-card,
   .sidebar.collapsed .scope-banner {
     display: none;

apps/web/src/router/index.ts

@@ -183,6 +183,11 @@ export const router = createRouter({
           name: 'notes',
           component: () => import('@/views/NotesView.vue'),
         },
+        {
+          path: 'attachments',
+          name: 'attachments',
+          component: () => import('@/views/AttachmentsView.vue'),
+        },
         {
           path: 'settings/automations',
           name: 'automations',

apps/web/src/views/AttachmentsView.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import { formatJalaliNumeric } from '@/lib/jalali';
+import type { NoteAttachmentDto, NoteDto, PaginatedResponse } from '@mento/shared';
+
+type Row = NoteAttachmentDto & {
+  noteId: string;
+  noteTitle: string;
+};
+
+const loading = ref(false);
+const error = ref('');
+const items = ref<Row[]>([]);
+
+function sizeLabel(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.get<PaginatedResponse<NoteDto>>('/notes', {
+      params: { limit: 100 },
+    });
+    items.value = data.items.flatMap((note) =>
+      (note.attachments ?? []).map((att) => ({
+        ...att,
+        noteId: note.id,
+        noteTitle: note.title?.trim() || note.body.slice(0, 40) || 'یادداشت',
+      })),
+    );
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? 'بارگذاری پیوست‌ها ناموفق بود.'
+      : 'بارگذاری پیوست‌ها ناموفق بود.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function download(row: Row) {
+  const { data } = await api.get<Blob>(
+    `/notes/${row.noteId}/attachments/${row.id}/download`,
+    { responseType: 'blob' },
+  );
+  const url = URL.createObjectURL(data);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = row.fileName;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <section class="page" dir="rtl">
+    <header class="head">
+      <div>
+        <h1>پیوست‌ها</h1>
+        <p class="sub">فایل‌های پیوست‌شده به یادداشت‌ها</p>
+      </div>
+    </header>
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading && !items.length" class="muted">در حال بارگذاری…</p>
+    <p v-else-if="!items.length" class="muted">پیوستی ثبت نشده.</p>
+    <div v-else class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>نام فایل</th>
+            <th>یادداشت</th>
+            <th>حجم</th>
+            <th>تاریخ</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in items" :key="`${row.noteId}-${row.id}`">
+            <td>{{ row.fileName }}</td>
+            <td>
+              <RouterLink :to="{ name: 'notes' }">
+                {{ row.noteTitle }}
+              </RouterLink>
+            </td>
+            <td>{{ sizeLabel(row.sizeBytes) }}</td>
+            <td>{{ formatJalaliNumeric(new Date(row.createdAt)) }}</td>
+            <td>
+              <button type="button" @click="download(row)">دانلود</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.page { display: grid; gap: 1rem; }
+h1 { margin: 0; font-size: 1.25rem; }
+.sub, .muted { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; }
+.error { color: var(--danger, #dc2626); font-weight: 600; }
+.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
+table { width: 100%; border-collapse: collapse; min-width: 640px; }
+th, td { padding: 0.7rem 0.65rem; border-bottom: 1px solid #eef2f7; text-align: right; }
+th { background: #f8fafc; color: #64748b; font-size: 0.82rem; }
+a { color: #0f766e; font-weight: 700; }
+button {
+  min-height: var(--control-h); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 0 0.75rem; background: #fff; cursor: pointer; font: inherit;
+}
+</style>

apps/web/src/views/TeamSettingsView.vue

@@ -180,7 +180,7 @@ onMounted(load);
       </div>
     </header>
 
-    <form v-if="org" class="panel" @submit.prevent="saveOrg">
+    <form v-if="org" id="settings-org" class="panel" @submit.prevent="saveOrg">
       <h2>سازمان</h2>
       <div class="grid">
         <label>
@@ -235,7 +235,7 @@ onMounted(load);
       </button>
     </form>
 
-    <div class="list">
+    <div id="settings-team" class="list">
       <article v-for="user in users" :key="user.id" class="row">
         <div>
           <strong>{{ user.fullName }}</strong>