feat(ui-fixes-phase6): Complete US-604 - Toggle Temă cu 3 Stări în Meniul Mobil

Implemented by Ralph autonomous loop.
Iteration: 5

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

scripts/ralph/prd.json

@@ -100,8 +100,8 @@
         "npm run typecheck passes",
         "Verify in browser: Mobile menu theme selector cycles through 3 states on tap"
       ],
-      "passes": false,
+      "passes": true,
-      "notes": "Modifică componenta din src/shared/components/mobile/MobileDrawerMenu.vue"
+      "notes": "Completed in iteration 5"
     },
     {
       "id": "US-605",

scripts/ralph/progress.txt

@@ -261,3 +261,14 @@ PRD: tasks/prd-ui-fixes-phase6.md
 [2026-01-13 16:08:49] Working on story: US-603
 [2026-01-13 16:08:49] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_3_US-603.log)
 [2026-01-13 16:11:33] SUCCESS: Story US-603 passed!
+[2026-01-13 16:11:33] Changes committed
+[2026-01-13 16:11:33] Progress: 3/10 stories completed
+[2026-01-13 16:11:35] === Iteration 4/30 ===
+[2026-01-13 16:11:35] Working on story: US-604
+[2026-01-13 16:11:35] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_4_US-604.log)
+[2026-01-13 16:17:04] Story US-604 not yet complete, continuing...
+[2026-01-13 16:17:04] Progress: 3/10 stories completed
+[2026-01-13 16:17:06] === Iteration 5/30 ===
+[2026-01-13 16:17:06] Working on story: US-604
+[2026-01-13 16:17:06] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_5_US-604.log)
+[2026-01-13 16:18:21] SUCCESS: Story US-604 passed!

src/shared/components/mobile/MobileDrawerMenu.vue

@@ -195,28 +195,17 @@
               </div>
             </div>
 
-            <!-- Theme Selector -->
+            <!-- Theme Toggle (compact cyclic button) -->
-            <div class="theme-selector">
+            <button
-              <div class="theme-selector-label">
+              type="button"
-                <i class="pi pi-palette"></i>
+              class="drawer-link theme-toggle-link"
-                <span>Temă</span>
+              @click="cycleTheme"
-              </div>
+              :aria-label="`Schimbă tema: ${currentThemeOption.label}`"
-              <div class="theme-options">
+            >
-                <button
+              <i :class="['drawer-icon', currentThemeOption.icon]"></i>
-                  v-for="option in themeOptions"
+              <span class="drawer-label">{{ currentThemeOption.label }}</span>
-                  :key="option.value"
+              <i class="pi pi-chevron-right theme-cycle-hint"></i>
-                  class="theme-option"
+            </button>
-                  :class="{ active: currentTheme === option.value }"
-                  @click="selectTheme(option.value)"
-                  :title="option.label"
-                  :aria-label="`Selectează tema ${option.label}`"
-                  :aria-pressed="currentTheme === option.value"
-                >
-                  <i :class="option.icon"></i>
-                  <span class="theme-option-label">{{ option.label }}</span>
-                </button>
-              </div>
-            </div>
 
             <!-- Divider before logout -->
             <div class="drawer-divider profile-divider"></div>
@@ -519,11 +508,14 @@ const applyTheme = (theme) => {
 }
 
 /**
- * Select a specific theme
+ * Cycle through themes: auto → light → dark → auto
  */
-const selectTheme = (theme) => {
+const cycleTheme = () => {
-  currentTheme.value = theme
+  const themes = ['auto', 'light', 'dark']
-  applyTheme(theme)
+  const currentIndex = themes.indexOf(currentTheme.value)
+  const nextTheme = themes[(currentIndex + 1) % themes.length]
+  currentTheme.value = nextTheme
+  applyTheme(nextTheme)
 }
 
 // Initialize theme from localStorage on mount
@@ -954,75 +946,22 @@ onMounted(() => {
 }
 
 /* ================================================
-   Theme Selector
+   Theme Toggle (compact cyclic button) - US-604
    ================================================ */
 
-.theme-selector {
+.theme-toggle-link {
-  padding: var(--space-sm) var(--space-lg);
+  position: relative;
 }
 
-.theme-selector-label {
+.theme-toggle-link .drawer-icon {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--text-color-secondary);
-  margin-bottom: var(--space-sm);
-}
-
-.theme-selector-label i {
-  font-size: var(--text-base);
-}
-
-.theme-options {
-  display: flex;
-  gap: var(--space-xs);
-  background: var(--surface-ground);
-  padding: var(--space-xs);
-  border-radius: var(--radius-md);
-}
-
-.theme-option {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-xs);
-  padding: var(--space-sm);
-  min-height: 48px;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  color: var(--text-color-secondary);
-}
-
-.theme-option:hover {
-  background: var(--surface-hover);
-  color: var(--text-color);
-}
-
-.theme-option:active {
-  transform: scale(0.98);
-}
-
-.theme-option.active {
-  background: var(--surface-card);
   color: var(--color-primary);
-  box-shadow: var(--shadow-sm);
 }
 
-.theme-option i {
+.theme-cycle-hint {
-  font-size: var(--text-lg);
-}
-
-.theme-option-label {
   font-size: var(--text-xs);
-  font-weight: var(--font-medium);
+  color: var(--text-color-secondary);
-  white-space: nowrap;
+  margin-left: auto;
+  opacity: 0.6;
 }
 
 /* ================================================
@@ -1235,28 +1174,13 @@ onMounted(() => {
   background: var(--red-900);
 }
 
-/* Dark mode: Theme Selector */
+/* Dark mode: Theme Toggle */
-[data-theme="dark"] .theme-selector-label {
+[data-theme="dark"] .theme-toggle-link .drawer-icon {
-  color: var(--text-color-secondary);
-}
-
-[data-theme="dark"] .theme-options {
-  background: var(--surface-ground);
-}
-
-[data-theme="dark"] .theme-option {
-  color: var(--text-color-secondary);
-}
-
-[data-theme="dark"] .theme-option:hover {
-  background: var(--surface-hover);
-  color: var(--text-color);
-}
-
-[data-theme="dark"] .theme-option.active {
-  background: var(--surface-card);
   color: var(--blue-400);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .theme-cycle-hint {
+  color: var(--text-color-secondary);
 }
 
 /* Auto dark mode (when no manual theme is set) */
@@ -1430,28 +1354,13 @@ onMounted(() => {
     background: var(--red-900);
   }
 
-  /* Auto dark mode: Theme Selector */
+  /* Auto dark mode: Theme Toggle */
-  :root:not([data-theme]) .theme-selector-label {
+  :root:not([data-theme]) .theme-toggle-link .drawer-icon {
-    color: var(--text-color-secondary);
-  }
-
-  :root:not([data-theme]) .theme-options {
-    background: var(--surface-ground);
-  }
-
-  :root:not([data-theme]) .theme-option {
-    color: var(--text-color-secondary);
-  }
-
-  :root:not([data-theme]) .theme-option:hover {
-    background: var(--surface-hover);
-    color: var(--text-color);
-  }
-
-  :root:not([data-theme]) .theme-option.active {
-    background: var(--surface-card);
     color: var(--blue-400);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+
+  :root:not([data-theme]) .theme-cycle-hint {
+    color: var(--text-color-secondary);
   }
 }
 </style>