feat: add Admin layout

src/layouts/MainLayout.vue

@@ -12,10 +12,10 @@
     <aside
       class="fixed inset-y-0 left-0 z-40 flex w-[236px] transform flex-col border-r px-3 py-4 transition-transform duration-200 lg:static"
       :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
-      style="background: var(--panel); border-color: var(--hairline)"
+      style="background: var(--board); border-color: var(--hairline)"
     >
       <div class="mb-5 flex items-center justify-between px-2">
-        <router-link to="/dashboard" class="flex items-center gap-2.5">
+        <router-link :to="auth.isAdmin ? '/projects' : '/select-project'" class="flex items-center gap-2.5">
           <span
             class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold text-white"
             style="background: var(--primary)"
@@ -25,88 +25,44 @@
             Workspace
           </span>
         </router-link>
-        <button
-          class="text-slate-400 transition-colors hover:text-slate-900 dark:hover:text-white lg:hidden"
+        <Button
+          icon="pi pi-times"
+          text
+          rounded
+          severity="secondary"
+          class="lg:hidden"
           aria-label="Close menu"
           @click="sidebarOpen = false"
-        >
-          <i class="pi pi-times text-base"></i>
-        </button>
+        />
       </div>
 
-      <nav class="flex flex-col gap-0.5">
-        <router-link class="nav-link" to="/select-project" @click="handleNavClick">
-          <i class="pi pi-arrow-left"></i> Back to Projects
-        </router-link>
-
-        <!-- Projects expandable -->
-        <div v-if="currentProject">
-          <button
-            class="nav-link w-full"
-            :class="{ 'router-link-active': isProjectsActive }"
-            @click="projectsExpanded = !projectsExpanded"
-          >
-            <i class="pi pi-folder-open"></i> Projects
-            <i class="pi ml-auto text-xs" :class="projectsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
-          </button>
-          <div v-show="projectsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
-            <router-link
-              v-if="auth.canView('tasks')"
-              class="nav-link nav-link-sub submenu-link"
-              :to="{ name: 'tasks-board', params: { id: currentProject.id } }"
-              @click="handleNavClick"
-            >
-              <i class="pi pi-check-square"></i> Tasks
-            </router-link>
-            <router-link
-              v-if="auth.canView('documents')"
-              class="nav-link nav-link-sub submenu-link"
-              :to="{ name: 'documents', params: { id: currentProject.id } }"
-              @click="handleNavClick"
-            >
-              <i class="pi pi-file"></i> Documents
-            </router-link>
-            <router-link
-              class="nav-link nav-link-sub submenu-link"
-              :to="{ name: 'members', params: { id: currentProject.id } }"
-              @click="handleNavClick"
-            >
-              <i class="pi pi-users"></i> Members
-            </router-link>
-          </div>
+      <nav v-if="currentProject" class="flex flex-col gap-0.5">
+        <div class="truncate px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide" style="color: var(--ink-muted)">
+          {{ currentProject.name }}
         </div>
-
         <router-link
-          v-for="item in topNavItems"
-          :key="item.key"
+          v-if="auth.canView('tasks')"
           class="nav-link"
-          :to="item.to"
+          :to="{ name: 'tasks-board', params: { id: currentProject.id } }"
           @click="handleNavClick"
         >
-          <i :class="item.icon"></i> {{ item.label }}
+          <i class="pi pi-check-square"></i> Tasks
+        </router-link>
+        <router-link
+          v-if="auth.canView('documents')"
+          class="nav-link"
+          :to="{ name: 'documents', params: { id: currentProject.id } }"
+          @click="handleNavClick"
+        >
+          <i class="pi pi-file"></i> Documents
+        </router-link>
+        <router-link
+          class="nav-link"
+          :to="{ name: 'members', params: { id: currentProject.id } }"
+          @click="handleNavClick"
+        >
+          <i class="pi pi-users"></i> Members
         </router-link>
-
-        <div v-if="auth.canView('masterdata') || auth.canView('permissions')">
-          <button
-            class="nav-link w-full"
-            :class="{ 'router-link-active': isSettingsActive }"
-            @click="settingsExpanded = !settingsExpanded"
-          >
-            <i class="pi pi-cog"></i> Settings
-            <i class="pi ml-auto text-xs" :class="settingsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
-          </button>
-          <div v-show="settingsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
-            <router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub submenu-link" to="/settings/masterdata" @click="handleNavClick">
-              Master Data
-            </router-link>
-            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/roles" @click="handleNavClick">
-              Roles
-            </router-link>
-            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/permissions" @click="handleNavClick">
-              Permissions
-            </router-link>
-          </div>
-        </div>
       </nav>
 
       <div class="flex-1"></div>
@@ -146,24 +102,8 @@
             :aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
             @click="theme.toggle"
           />
-          <button
-            class="flex w-auto items-center gap-2.5 rounded-xl border px-2.5 py-1.5 text-left transition-colors hover:bg-slate-50 dark:hover:bg-white/5"
-            style="border-color: var(--hairline)"
-            aria-haspopup="true"
-            @click="toggleMenu"
-          >
-            <Avatar :label="initials" :style="{ background: 'var(--primary)', color: '#fff' }" size="normal" />
-            <span class="hidden min-w-0 sm:block">
-              <span class="block truncate text-[13px] font-semibold" style="color: var(--ink)">
-                {{ auth.user?.displayName ?? auth.user?.username }}
-              </span>
-              <span class="block truncate text-[11px]" style="color: var(--ink-muted)">
-                @{{ auth.user?.username }}
-              </span>
-            </span>
-          </button>
+          <UserMenu />
         </div>
-        <Menu ref="menu" :model="menuItems" popup />
       </header>
 
       <main class="flex-1 overflow-auto">
@@ -172,73 +112,34 @@
         </div>
       </main>
     </div>
-
-    <Dialog v-model:visible="profileDialog" header="Profile" :modal="true" style="width: min(480px, 92vw)">
-      <div class="flex items-center gap-3 mb-5">
-        <Avatar :label="initials" size="xlarge" :style="{ background: 'var(--primary)', color: '#fff' }" />
-        <div>
-          <div class="text-[15px] font-semibold" style="color: var(--ink)">
-            {{ auth.user?.displayName ?? auth.user?.username }}
-          </div>
-          <div class="text-[13px]" style="color: var(--ink-muted)">@{{ auth.user?.username }}</div>
-        </div>
-      </div>
-      <form @submit.prevent="onSaveProfile">
-        <div class="field">
-          <label for="prof-username">Username</label>
-          <InputText id="prof-username" :model-value="auth.user?.username" disabled class="w-full" />
-        </div>
-        <div class="field">
-          <label for="prof-displayname">Display name</label>
-          <InputText id="prof-displayname" v-model.trim="profileDisplayName" class="w-full" />
-        </div>
-        <div class="field">
-          <label for="prof-role">Role</label>
-          <InputText id="prof-role" :model-value="auth.user?.roleName" disabled class="w-full" />
-        </div>
-      </form>
-      <template #footer>
-        <Button label="Cancel" severity="secondary" text @click="profileDialog = false" />
-        <Button label="Save" :loading="profileSaving" @click="onSaveProfile" />
-      </template>
-    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useTheme } from '../composables/useTheme'
-import { getProject, getProjects, updateUser } from '../services/backend'
-import { errorMessage } from '../services/api'
+import { getProject, getProjects } from '../services/backend'
+import UserMenu from '../components/UserMenu.vue'
 import type { Project } from '../types'
 
 const auth = useAuthStore()
-const toast = useToast()
 const route = useRoute()
 const router = useRouter()
-const menu = ref()
 const theme = useTheme()
 
 const desktopMq = window.matchMedia('(min-width: 1024px)')
 const isDesktop = ref(desktopMq.matches)
 const sidebarOpen = ref(isDesktop.value)
-const settingsExpanded = ref(false)
-const isProjectsActive = computed(() => route.path.startsWith('/projects/'))
-const isSettingsActive = computed(() => route.path.startsWith('/settings/'))
-desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
+const onDesktopChange = (e: MediaQueryListEvent) => {
+  isDesktop.value = e.matches
+}
+desktopMq.addEventListener('change', onDesktopChange)
+onBeforeUnmount(() => desktopMq.removeEventListener('change', onDesktopChange))
 
 function handleNavClick() {
   if (!isDesktop.value) sidebarOpen.value = false
 }
 
-const navItems = [
-  { key: 'users', label: 'Users', icon: 'pi pi-users', to: '/users' },
-]
-const topNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
-
-const projectsExpanded = ref(false)
-
 const currentProject = ref<Project | null>(null)
 const projects = ref<Project[]>([])
 
@@ -254,6 +155,7 @@ async function loadProjects() {
 async function loadCurrentProject(id: string | string[]) {
   try {
     currentProject.value = await getProject(String(id))
+    localStorage.setItem('mws_last_project', String(id))
   } catch {
     // keep existing project, don't clear on error
   }
@@ -282,75 +184,18 @@ watch(
   (id) => {
     if (id) {
       void loadCurrentProject(id)
-      projectsExpanded.value = true
     }
   },
   { immediate: true },
 )
 
-const profileDialog = ref(false)
-const profileDisplayName = ref('')
-const profileSaving = ref(false)
-
-async function onSaveProfile() {
-  if (!auth.user?.id) return
-  if (!profileDisplayName.value) {
-    toast.add({ severity: 'warn', summary: 'Display name required', life: 3000 })
-    return
-  }
-  profileSaving.value = true
-  try {
-    const updated = await updateUser(auth.user.id, {
-      displayName: profileDisplayName.value,
-      isActive: true,
-    })
-    if (auth.user) {
-      auth.user.displayName = updated.displayName
-      localStorage.setItem('mws_user', JSON.stringify(auth.user))
-    }
-    profileDialog.value = false
-    toast.add({ severity: 'success', summary: 'Profile updated', life: 3000 })
-  } catch (e) {
-    toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
-  } finally {
-    profileSaving.value = false
-  }
-}
-
-const initials = computed(() => {
-  const name = auth.user?.displayName ?? auth.user?.username ?? '?'
-  return name.slice(0, 2).toUpperCase()
-})
-
 watch(
   () => route.fullPath,
-  (path) => {
-    if (path.startsWith('/settings')) settingsExpanded.value = true
+  () => {
     if (!isDesktop.value) sidebarOpen.value = false
   },
 )
 
-const menuItems = computed(() => [
-  {
-    label: auth.user?.displayName ?? auth.user?.username,
-    items: [
-      { label: 'Profile', icon: 'pi pi-user', command: () => { profileDisplayName.value = auth.user?.displayName ?? ''; profileDialog.value = true } },
-      {
-        label: 'Logout',
-        icon: 'pi pi-sign-out',
-        command: () => {
-          auth.logout()
-          window.location.href = '/login'
-        },
-      },
-    ],
-  },
-])
-
-function toggleMenu(event: Event) {
-  menu.value?.toggle(event)
-}
-
 onMounted(() => {
   void loadProjects()
   void loadLastProject()
@@ -383,27 +228,6 @@ onMounted(() => {
   color: var(--primary);
   font-weight: 600;
 }
-.nav-link-sub {
-  position: relative;
-  padding: 0.375rem 0.875rem;
-  font-size: 0.8125rem;
-  border-radius: 8px;
-}
-.nav-link-sub.router-link-active {
-  background-color: var(--primary-soft);
-  color: var(--primary);
-  font-weight: 600;
-}
-.nav-link-sub.router-link-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 20%;
-  height: 60%;
-  width: 3px;
-  border-radius: 999px;
-  background: var(--magenta);
-}
 .app-dark .nav-link.router-link-active {
   color: #9ba6f8;
 }
@@ -417,18 +241,4 @@ onMounted(() => {
   border-radius: 999px;
   background: var(--magenta);
 }
-.submenu-link.router-link-active {
-  background: transparent !important;
-  color: #6a7cd0 !important;
-}
-.submenu-link.router-link-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 20%;
-  height: 60%;
-  width: 2px;
-  border-radius: 999px;
-  background: var(--magenta);
-}
 </style>