From a7e69eefa6865659816c91692a4c913239ebf936 Mon Sep 17 00:00:00 2001
From: Steven RYDELL <srydell@gmx.com>
Date: Thu, 30 Jul 2026 13:50:28 +0200
Subject: [PATCH] refactor(ui): move Appearance from sidebar to header user
 dropdown

---
 src/components/layout/Sidebar.tsx | 21 ---------------------
 src/components/layout/TopBar.tsx  |  7 ++++++-
 2 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 7c6be6c..67b2fbb 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -6,7 +6,6 @@
 
 import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import * as LucideIcons from 'lucide-react';
 const { ChevronDown, Lock } = LucideIcons;
 import { cn } from '@/lib/utils';
@@ -325,7 +324,6 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
 export function Sidebar() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { t } = useTranslation();
   const activeSection = useUIStore((s) => s.activeSection);
   const setActiveSection = useUIStore((s) => s.setActiveSection);
   const sidebarOpen = useUIStore((s) => s.sidebarOpen);
@@ -376,9 +374,6 @@ export function Sidebar() {
     if (first) navigate(`/${target.name}/${first}`);
   };
 
-  const isAppearanceActive =
-    location.pathname === '/Appearance' || location.pathname.startsWith('/Appearance/');
-
   return (
     <>
       <div
@@ -408,22 +403,6 @@ export function Sidebar() {
           </nav>
         </ScrollArea>
 
-        <div className="border-t px-2 py-2 [[data-radius='square']_&]:px-0">
-          <Button
-            variant="ghost"
-            data-sidebar-active={isAppearanceActive || undefined}
-            className={cn(
-              sidebarItemClass,
-              sidebarItemSquareClass,
-              isAppearanceActive && 'bg-accent text-accent-foreground hover:bg-accent',
-            )}
-            onClick={() => navigate('/Appearance')}
-          >
-            <LucideIcons.Palette className="h-4 w-4 shrink-0" />
-            <span className="truncate">{t('appearance.label', 'Appearance')}</span>
-          </Button>
-        </div>
-
         {layouts.length > 1 && (
           <TooltipProvider>
             <div className="flex items-center justify-around border-t bg-background px-2 py-2 [[data-radius='square']_&]:px-0 [[data-radius='square']_&]:py-0">
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index d04ce8a..6c7c82e 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -7,7 +7,7 @@
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import * as LucideIcons from 'lucide-react';
-const { User, LogOut, Check, Menu, Sparkles, Search } = LucideIcons;
+const { User, LogOut, Check, Menu, Sparkles, Search, Palette } = LucideIcons;
 import { Button } from '@/components/ui/button';
 import { CommandPalette } from '@/components/common/CommandPalette';
 import {
@@ -198,6 +198,11 @@ export function TopBar() {
               </>
             )}
 
+            <DropdownMenuItem onClick={() => navigate('/Appearance')}>
+              <Palette className="mr-2 h-4 w-4" />
+              {t('appearance.label', 'Appearance')}
+            </DropdownMenuItem>
+
             <DropdownMenuItem
               variant="destructive"
               onClick={() => {