feat(ui-fixes-phase6): Complete US-607 - Secțiune Utilizator Compactă în Meniul Mobil

Implemented by Ralph autonomous loop.
Iteration: 8

Co-Authored-By: Claude <noreply@anthropic.com>

scripts/ralph/prd.json

@@ -146,8 +146,8 @@
         "npm run typecheck passes",
         "Verify in browser: User section is visually compact"
       ],
-      "passes": false,
+      "passes": true,
-      "notes": "Depinde de US-604 pentru toggle-ul de temă, modifică layout-ul în MobileDrawerMenu.vue"
+      "notes": "Completed in iteration 8"
     },
     {
       "id": "US-608",

scripts/ralph/progress.txt

@@ -284,3 +284,9 @@ PRD: tasks/prd-ui-fixes-phase6.md
 [2026-01-13 16:23:41] Working on story: US-606
 [2026-01-13 16:23:41] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_7_US-606.log)
 [2026-01-13 16:29:48] SUCCESS: Story US-606 passed!
+[2026-01-13 16:29:48] Changes committed
+[2026-01-13 16:29:48] Progress: 6/10 stories completed
+[2026-01-13 16:29:50] === Iteration 8/30 ===
+[2026-01-13 16:29:50] Working on story: US-607
+[2026-01-13 16:29:50] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-607.log)
+[2026-01-13 16:33:08] SUCCESS: Story US-607 passed!

src/shared/components/mobile/MobileDrawerMenu.vue

@@ -210,40 +210,35 @@
             </div>
           </div>
 
-          <!-- Profile Section (at bottom) -->
+          <!-- Profile Section (at bottom) - US-607: Compact layout -->
-          <div class="drawer-profile">
+          <div class="drawer-profile drawer-profile--compact">
-            <div class="profile-header">
+            <!-- US-607: User name + Logout on same line -->
-              <div class="profile-avatar">
+            <div class="profile-row">
-                <i class="pi pi-user"></i>
+              <div class="profile-user">
-              </div>
+                <i class="pi pi-user profile-icon"></i>
-              <div class="profile-info">
                 <span class="profile-name">{{ displayName }}</span>
-                <span class="profile-role">Utilizator</span>
               </div>
+              <button
+                type="button"
+                class="logout-btn"
+                @click="handleLogout"
+                aria-label="Deconectare"
+              >
+                <i class="pi pi-sign-out"></i>
+                <span>Ieșire</span>
+              </button>
             </div>
 
-            <!-- Theme Toggle (compact cyclic button) -->
+            <!-- Theme Toggle (compact cyclic button) - US-604 -->
             <button
               type="button"
-              class="drawer-link theme-toggle-link"
+              class="theme-toggle-compact"
               @click="cycleTheme"
               :aria-label="`Schimbă tema: ${currentThemeOption.label}`"
             >
-              <i :class="['drawer-icon', currentThemeOption.icon]"></i>
+              <i :class="currentThemeOption.icon"></i>
-              <span class="drawer-label">{{ currentThemeOption.label }}</span>
+              <span>{{ currentThemeOption.label }}</span>
-              <i class="pi pi-chevron-right theme-cycle-hint"></i>
+              <i class="pi pi-chevron-right"></i>
-            </button>
-
-            <!-- Divider before logout -->
-            <div class="drawer-divider profile-divider"></div>
-
-            <button
-              type="button"
-              class="drawer-link logout-link"
-              @click="handleLogout"
-            >
-              <i class="drawer-icon pi pi-sign-out"></i>
-              <span class="drawer-label">Deconectare</span>
             </button>
           </div>
         </nav>
@@ -1013,49 +1008,51 @@ onMounted(() => {
 }
 
 /* ================================================
-   Profile Section
+   Profile Section - US-607: Compact layout
    US-606: No longer fixed at bottom, scrolls with content
    ================================================ */
 
 .drawer-profile {
-  padding: var(--space-md) 0;
+  padding: var(--space-sm) var(--space-md);
   border-top: 1px solid var(--surface-border);
   /* Extra padding at bottom for MobileBottomNav clearance (56px) */
-  padding-bottom: calc(var(--header-height) + var(--space-md));
+  padding-bottom: calc(var(--header-height) + var(--space-sm));
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
 }
 
-.profile-header {
+/* US-607: Compact variant - reduced spacing */
-  display: flex;
+.drawer-profile--compact {
-  align-items: center;
+  padding: var(--space-sm) var(--space-md);
-  gap: var(--space-md);
+  gap: var(--space-xs);
-  padding: var(--space-sm) var(--space-lg);
-  margin-bottom: var(--space-xs);
 }
 
-.profile-avatar {
+/* US-607: User name + Logout on same row */
-  width: 40px;
+.profile-row {
-  height: 40px;
-  border-radius: var(--radius-full);
-  background: var(--blue-100);
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  min-height: 44px;
+}
+
+.profile-user {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-width: 0;
+  flex: 1;
+}
+
+.profile-icon {
+  font-size: var(--text-base);
+  color: var(--color-primary);
   flex-shrink: 0;
 }
 
-.profile-avatar i {
-  font-size: var(--text-lg);
-  color: var(--color-primary);
-}
-
-.profile-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
 .profile-name {
-  font-size: var(--text-base);
+  font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-color);
   white-space: nowrap;
@@ -1063,45 +1060,73 @@ onMounted(() => {
   text-overflow: ellipsis;
 }
 
-.profile-role {
+/* US-607: Compact logout button */
+.logout-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  background: transparent;
+  border: 1px solid var(--color-error);
+  border-radius: var(--radius-md);
+  color: var(--color-error);
   font-size: var(--text-sm);
-  color: var(--text-color-secondary);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  min-height: 36px;
+  flex-shrink: 0;
 }
 
-/* Logout link styling */
+.logout-btn:hover {
-.logout-link {
-  color: var(--color-error);
-}
-
-.logout-link .drawer-icon {
-  color: var(--color-error);
-}
-
-.logout-link:hover {
   background: var(--red-50);
 }
 
-/* Profile divider (spacing adjustment) */
+.logout-btn:active {
-.profile-divider {
+  background: var(--red-100);
-  margin: var(--space-sm) var(--space-md);
+}
+
+.logout-btn i {
+  font-size: var(--text-sm);
 }
 
 /* ================================================
-   Theme Toggle (compact cyclic button) - US-604
+   Theme Toggle (compact cyclic button) - US-604/US-607
    ================================================ */
 
-.theme-toggle-link {
+.theme-toggle-compact {
-  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--surface-hover);
+  border: none;
+  border-radius: var(--radius-md);
+  color: var(--text-color);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  min-height: 36px;
 }
 
-.theme-toggle-link .drawer-icon {
+.theme-toggle-compact:hover {
+  background: var(--surface-border);
+}
+
+.theme-toggle-compact i:first-child {
   color: var(--color-primary);
+  font-size: var(--text-sm);
 }
 
-.theme-cycle-hint {
+.theme-toggle-compact span {
+  flex: 1;
+  text-align: left;
+}
+
+.theme-toggle-compact i:last-child {
   font-size: var(--text-xs);
   color: var(--text-color-secondary);
-  margin-left: auto;
   opacity: 0.6;
 }
 
@@ -1300,15 +1325,12 @@ onMounted(() => {
   color: var(--text-color-secondary);
 }
 
+/* Dark mode: Profile Section (US-607) */
 [data-theme="dark"] .drawer-profile {
   border-top-color: var(--surface-border);
 }
 
-[data-theme="dark"] .profile-avatar {
+[data-theme="dark"] .profile-icon {
-  background: var(--blue-900);
-}
-
-[data-theme="dark"] .profile-avatar i {
   color: var(--blue-400);
 }
 
@@ -1316,28 +1338,34 @@ onMounted(() => {
   color: var(--text-color);
 }
 
-[data-theme="dark"] .profile-role {
+[data-theme="dark"] .logout-btn {
-  color: var(--text-color-secondary);
+  border-color: var(--red-400);
-}
-
-[data-theme="dark"] .logout-link {
   color: var(--red-400);
 }
 
-[data-theme="dark"] .logout-link .drawer-icon {
+[data-theme="dark"] .logout-btn:hover {
-  color: var(--red-400);
-}
-
-[data-theme="dark"] .logout-link:hover {
   background: var(--red-900);
 }
 
-/* Dark mode: Theme Toggle */
+[data-theme="dark"] .logout-btn:active {
-[data-theme="dark"] .theme-toggle-link .drawer-icon {
+  background: var(--red-800);
+}
+
+/* Dark mode: Theme Toggle (US-607) */
+[data-theme="dark"] .theme-toggle-compact {
+  background: var(--surface-hover);
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .theme-toggle-compact:hover {
+  background: var(--surface-border);
+}
+
+[data-theme="dark"] .theme-toggle-compact i:first-child {
   color: var(--blue-400);
 }
 
-[data-theme="dark"] .theme-cycle-hint {
+[data-theme="dark"] .theme-toggle-compact i:last-child {
   color: var(--text-color-secondary);
 }
 
@@ -1497,15 +1525,12 @@ onMounted(() => {
     color: var(--text-color-secondary);
   }
 
+  /* Auto dark mode: Profile Section (US-607) */
   :root:not([data-theme]) .drawer-profile {
     border-top-color: var(--surface-border);
   }
 
-  :root:not([data-theme]) .profile-avatar {
+  :root:not([data-theme]) .profile-icon {
-    background: var(--blue-900);
-  }
-
-  :root:not([data-theme]) .profile-avatar i {
     color: var(--blue-400);
   }
 
@@ -1513,28 +1538,34 @@ onMounted(() => {
     color: var(--text-color);
   }
 
-  :root:not([data-theme]) .profile-role {
+  :root:not([data-theme]) .logout-btn {
-    color: var(--text-color-secondary);
+    border-color: var(--red-400);
-  }
-
-  :root:not([data-theme]) .logout-link {
     color: var(--red-400);
   }
 
-  :root:not([data-theme]) .logout-link .drawer-icon {
+  :root:not([data-theme]) .logout-btn:hover {
-    color: var(--red-400);
-  }
-
-  :root:not([data-theme]) .logout-link:hover {
     background: var(--red-900);
   }
 
-  /* Auto dark mode: Theme Toggle */
+  :root:not([data-theme]) .logout-btn:active {
-  :root:not([data-theme]) .theme-toggle-link .drawer-icon {
+    background: var(--red-800);
+  }
+
+  /* Auto dark mode: Theme Toggle (US-607) */
+  :root:not([data-theme]) .theme-toggle-compact {
+    background: var(--surface-hover);
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .theme-toggle-compact:hover {
+    background: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .theme-toggle-compact i:first-child {
     color: var(--blue-400);
   }
 
-  :root:not([data-theme]) .theme-cycle-hint {
+  :root:not([data-theme]) .theme-toggle-compact i:last-child {
     color: var(--text-color-secondary);
   }
 }