ref: app UI

src/layouts/MainLayout.vue

@@ -35,8 +35,48 @@
       </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"
+            @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 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"
+              :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"
+              :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"
+              :to="{ name: 'members', params: { id: currentProject.id } }"
+              @click="handleNavClick"
+            >
+              <i class="pi pi-users"></i> Members
+            </router-link>
+          </div>
+        </div>
+
         <router-link
-          v-for="item in visibleNavItems"
+          v-for="item in topNavItems"
           :key="item.key"
           class="nav-link"
           :to="item.to"
@@ -44,9 +84,27 @@
         >
           <i :class="item.icon"></i> {{ item.label }}
         </router-link>
-        <router-link class="nav-link" to="/settings" @click="handleNavClick">
-          <i class="pi pi-cog"></i> Settings
-        </router-link>
+
+        <div v-if="auth.canView('masterdata') || auth.canView('permissions')">
+          <button
+            class="nav-link w-full"
+            @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 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" to="/settings/masterdata" @click="handleNavClick">
+              Master Data
+            </router-link>
+            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub" to="/settings/roles" @click="handleNavClick">
+              Roles
+            </router-link>
+            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub" to="/settings/permissions" @click="handleNavClick">
+              Permissions
+            </router-link>
+          </div>
+        </div>
       </nav>
 
       <div class="flex-1"></div>
@@ -57,7 +115,7 @@
         class="flex items-center justify-between gap-3 border-b px-4 py-2.5 lg:px-6"
         style="background: var(--panel); border-color: var(--hairline)"
       >
-        <div class="flex min-w-0 items-center gap-2">
+        <div class="flex min-w-0 items-center gap-3">
           <Button
             icon="pi pi-bars"
             rounded
@@ -66,26 +124,18 @@
             :aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
             @click="sidebarOpen = !sidebarOpen"
           />
-          <nav class="flex min-w-0 items-center gap-1.5 text-[13px]" aria-label="Breadcrumb">
-            <span class="shrink-0 font-medium" style="color: var(--ink-muted)">
-              {{ pageTitle }}
-            </span>
-            <template v-if="currentProject">
-              <span style="color: var(--ink-muted)">/</span>
-              <router-link
-                :to="{ name: 'project-overview', params: { id: currentProject.id } }"
-                class="truncate font-medium transition-colors hover:text-slate-900 dark:hover:text-white"
-                style="color: var(--ink-muted)"
-              >
-                {{ currentProject.name }}
-              </router-link>
-            </template>
-          </nav>
+          <Select
+            v-if="currentProject"
+            :model-value="currentProject.id"
+            :options="projects"
+            option-label="name"
+            option-value="id"
+            placeholder="Select project"
+            class="w-[200px]"
+            @change="onProjectChange"
+          />
         </div>
         <div class="flex min-w-0 items-center gap-2">
-          <span class="hidden shrink-0 text-[13px] font-semibold sm:block" style="color: var(--ink)">
-            Welcome back, {{ auth.user?.displayName ?? auth.user?.username }}
-          </span>
           <Button
             :icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
             rounded
@@ -120,23 +170,57 @@
         </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 { useAuthStore } from '../stores/auth'
 import { useTheme } from '../composables/useTheme'
-import { getProject } from '../services/backend'
+import { getProject, getProjects, updateUser } from '../services/backend'
+import { errorMessage } from '../services/api'
 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)
 desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
 
 function handleNavClick() {
@@ -144,33 +228,90 @@ function handleNavClick() {
 }
 
 const navItems = [
-  { key: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', to: '/dashboard' },
-  { key: 'projects', label: 'Projects', icon: 'pi pi-folder-open', to: '/projects' },
   { key: 'users', label: 'Users', icon: 'pi pi-users', to: '/users' },
 ]
-const visibleNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
+const topNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
 
-const pageTitle = computed(() => (route.meta.title as string | undefined) ?? 'Projects')
+const projectsExpanded = ref(false)
 
 const currentProject = ref<Project | null>(null)
+const projects = ref<Project[]>([])
+
+async function loadProjects() {
+  try {
+    const res = await getProjects(1, 100)
+    projects.value = res.items
+  } catch {
+    projects.value = []
+  }
+}
 
 async function loadCurrentProject(id: string | string[]) {
   try {
     currentProject.value = await getProject(String(id))
   } catch {
-    currentProject.value = null
+    // keep existing project, don't clear on error
+  }
+}
+
+async function loadLastProject() {
+  if (currentProject.value) return
+  const last = localStorage.getItem('mws_last_project')
+  if (last) {
+    try {
+      currentProject.value = await getProject(last)
+    } catch { /* ignore */ }
+  }
+}
+
+function onProjectChange(e: { value: string }) {
+  const projectId = e.value
+  if (projectId) {
+    localStorage.setItem('mws_last_project', projectId)
+    router.push({ name: 'tasks-board', params: { id: projectId } })
   }
 }
 
 watch(
   () => route.params.id,
   (id) => {
-    if (id) void loadCurrentProject(id)
-    else currentProject.value = null
+    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()
@@ -178,7 +319,8 @@ const initials = computed(() => {
 
 watch(
   () => route.fullPath,
-  () => {
+  (path) => {
+    if (path.startsWith('/settings')) settingsExpanded.value = true
     if (!isDesktop.value) sidebarOpen.value = false
   },
 )
@@ -187,7 +329,7 @@ const menuItems = computed(() => [
   {
     label: auth.user?.displayName ?? auth.user?.username,
     items: [
-      { label: 'Profile', icon: 'pi pi-user', command: () => router.push('/profile') },
+      { label: 'Profile', icon: 'pi pi-user', command: () => { profileDisplayName.value = auth.user?.displayName ?? ''; profileDialog.value = true } },
       {
         label: 'Logout',
         icon: 'pi pi-sign-out',
@@ -200,11 +342,14 @@ const menuItems = computed(() => [
   },
 ])
 
-const router = useRouter()
-
 function toggleMenu(event: Event) {
   menu.value?.toggle(event)
 }
+
+onMounted(() => {
+  void loadProjects()
+  void loadLastProject()
+})
 </script>
 
 <style scoped>
@@ -233,10 +378,30 @@ function toggleMenu(event: Event) {
   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;
 }
-/* Active marker: a magenta rail, the one place the second accent shows in the shell */
 .nav-link.router-link-active::before {
   content: '';
   position: absolute;