From ca3938a933fb529a2122d634cf9d0bf998b725f3 Mon Sep 17 00:00:00 2001
From: Thomas Reitz <T.Reitz@xinion.de>
Date: Tue, 10 Mar 2026 12:16:24 +0100
Subject: [PATCH] fix: move theme toggle below profile section in sidebar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/shell/AppLayout.tsx | 70 +++++++++++------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/frontend/src/shell/AppLayout.tsx b/packages/frontend/src/shell/AppLayout.tsx
index f95eeff..a184ed8 100644
--- a/packages/frontend/src/shell/AppLayout.tsx
+++ b/packages/frontend/src/shell/AppLayout.tsx
@@ -331,41 +331,6 @@ export function AppLayout() {
           </div>
         )}
 
-        {/* Theme Toggle */}
-        <div className={styles.themeToggle}>
-          {collapsed ? (
-            <button
-              className={styles.themeBtn}
-              onClick={() => {
-                const next =
-                  mode === 'light'
-                    ? 'dark'
-                    : mode === 'dark'
-                      ? 'system'
-                      : 'light';
-                setMode(next);
-              }}
-              title={`Theme: ${THEME_OPTIONS.find((o) => o.value === mode)?.label}`}
-            >
-              {THEME_OPTIONS.find((o) => o.value === mode)?.icon}
-            </button>
-          ) : (
-            <div className={styles.themeBtnGroup}>
-              {THEME_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  className={`${styles.themeOption} ${mode === opt.value ? styles.themeOptionActive : ''}`}
-                  onClick={() => setMode(opt.value)}
-                  title={opt.label}
-                >
-                  <span className={styles.themeIcon}>{opt.icon}</span>
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
         <div className={styles.userInfo}>
           {collapsed ? (
             <div
@@ -419,6 +384,41 @@ export function AppLayout() {
             </>
           )}
         </div>
+
+        {/* Theme Toggle (unter dem Profil) */}
+        <div className={styles.themeToggle}>
+          {collapsed ? (
+            <button
+              className={styles.themeBtn}
+              onClick={() => {
+                const next =
+                  mode === 'light'
+                    ? 'dark'
+                    : mode === 'dark'
+                      ? 'system'
+                      : 'light';
+                setMode(next);
+              }}
+              title={`Theme: ${THEME_OPTIONS.find((o) => o.value === mode)?.label}`}
+            >
+              {THEME_OPTIONS.find((o) => o.value === mode)?.icon}
+            </button>
+          ) : (
+            <div className={styles.themeBtnGroup}>
+              {THEME_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  className={`${styles.themeOption} ${mode === opt.value ? styles.themeOptionActive : ''}`}
+                  onClick={() => setMode(opt.value)}
+                  title={opt.label}
+                >
+                  <span className={styles.themeIcon}>{opt.icon}</span>
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
       </aside>
 
       {/* Main Content */}