From 9966652542ea874ec30be567c28d505048ab9124 Mon Sep 17 00:00:00 2001
From: bdim404 <i@bdim.moe>
Date: Fri, 6 Feb 2026 14:28:13 +0800
Subject: [PATCH] feat: Update Navbar and HistorySidebar layout for improved
 navigation and styling

---
 .../src/components/HistorySidebar.tsx         |  9 +-
 qwen3-tts-frontend/src/components/Navbar.tsx  | 87 ++++++++-----------
 qwen3-tts-frontend/src/pages/Home.tsx         | 14 +--
 3 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/qwen3-tts-frontend/src/components/HistorySidebar.tsx b/qwen3-tts-frontend/src/components/HistorySidebar.tsx
index 03322ec..1f88e0d 100644
--- a/qwen3-tts-frontend/src/components/HistorySidebar.tsx
+++ b/qwen3-tts-frontend/src/components/HistorySidebar.tsx
@@ -1,5 +1,6 @@
 import { useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 import { useHistoryContext } from '@/contexts/HistoryContext'
 import { HistoryItem } from '@/components/HistoryItem'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -36,7 +37,13 @@ function HistorySidebarContent() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-4 pt-4 pb-6">
+      <div className="px-4 pt-4 pb-3">
+        <Link to="/" className="flex items-center gap-2 mb-6">
+          <img src="/qwen.svg" alt="Qwen" className="h-6 w-6" />
+          <h1 className="text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity">
+            Qwen3-TTS-WebUI
+          </h1>
+        </Link>
         <h2 className="text-lg font-semibold">{t('historyTitle')}</h2>
         <p className="text-sm text-muted-foreground">{t('historyCount', { count: jobs.length })}</p>
       </div>
diff --git a/qwen3-tts-frontend/src/components/Navbar.tsx b/qwen3-tts-frontend/src/components/Navbar.tsx
index 9ca8187..6a6a22e 100644
--- a/qwen3-tts-frontend/src/components/Navbar.tsx
+++ b/qwen3-tts-frontend/src/components/Navbar.tsx
@@ -22,69 +22,58 @@ export function Navbar({ onToggleSidebar }: NavbarProps) {
   const { t, i18n } = useTranslation(['nav', 'constants'])
 
   return (
-    <nav className="h-16 border-b bg-background flex items-center px-4 gap-4">
+    <nav className="h-16 bg-background flex items-center justify-end px-4 gap-2">
       {onToggleSidebar && (
         <Button
           variant="ghost"
           size="icon"
           onClick={onToggleSidebar}
-          className="lg:hidden"
+          className="lg:hidden mr-auto"
         >
           <Menu className="h-5 w-5" />
         </Button>
       )}
 
-      <div className="flex-1">
-        <Link to="/" className="flex items-center gap-2">
-          <img src="/qwen.svg" alt="Qwen" className="h-6 w-6" />
-          <h1 className="hidden md:block text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity">
-            Qwen3-TTS-WebUI
-          </h1>
-        </Link>
-      </div>
-
-      <div className="flex items-center gap-2">
-        {user?.is_superuser && (
-          <Link to="/users">
-            <Button variant="ghost" size="icon">
-              <Users className="h-5 w-5" />
-            </Button>
-          </Link>
-        )}
-        <Link to="/settings">
+      {user?.is_superuser && (
+        <Link to="/users">
           <Button variant="ghost" size="icon">
-            <Settings className="h-5 w-5" />
+            <Users className="h-5 w-5" />
           </Button>
         </Link>
-        <ThemeToggle />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <Globe className="h-5 w-5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => changeLanguage('zh-CN')}>
-              {t('constants:uiLanguages.zh-CN')} {i18n.language === 'zh-CN' && '✓'}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => changeLanguage('zh-TW')}>
-              {t('constants:uiLanguages.zh-TW')} {i18n.language === 'zh-TW' && '✓'}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => changeLanguage('en-US')}>
-              {t('constants:uiLanguages.en-US')} {i18n.language === 'en-US' && '✓'}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => changeLanguage('ja-JP')}>
-              {t('constants:uiLanguages.ja-JP')} {i18n.language === 'ja-JP' && '✓'}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => changeLanguage('ko-KR')}>
-              {t('constants:uiLanguages.ko-KR')} {i18n.language === 'ko-KR' && '✓'}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Button variant="ghost" size="icon" onClick={logout}>
-          <LogOut className="h-5 w-5" />
+      )}
+      <Link to="/settings">
+        <Button variant="ghost" size="icon">
+          <Settings className="h-5 w-5" />
         </Button>
-      </div>
+      </Link>
+      <ThemeToggle />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <Globe className="h-5 w-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => changeLanguage('zh-CN')}>
+            {t('constants:uiLanguages.zh-CN')} {i18n.language === 'zh-CN' && '✓'}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => changeLanguage('zh-TW')}>
+            {t('constants:uiLanguages.zh-TW')} {i18n.language === 'zh-TW' && '✓'}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => changeLanguage('en-US')}>
+            {t('constants:uiLanguages.en-US')} {i18n.language === 'en-US' && '✓'}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => changeLanguage('ja-JP')}>
+            {t('constants:uiLanguages.ja-JP')} {i18n.language === 'ja-JP' && '✓'}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => changeLanguage('ko-KR')}>
+            {t('constants:uiLanguages.ko-KR')} {i18n.language === 'ko-KR' && '✓'}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant="ghost" size="icon" onClick={logout}>
+        <LogOut className="h-5 w-5" />
+      </Button>
     </nav>
   )
 }
diff --git a/qwen3-tts-frontend/src/pages/Home.tsx b/qwen3-tts-frontend/src/pages/Home.tsx
index 5819435..a5347f0 100644
--- a/qwen3-tts-frontend/src/pages/Home.tsx
+++ b/qwen3-tts-frontend/src/pages/Home.tsx
@@ -33,19 +33,19 @@ function Home() {
 
 
   return (
-    <div className="h-screen overflow-hidden flex flex-col bg-background">
+    <div className="h-screen overflow-hidden flex bg-background">
       <OnboardingDialog
         open={showOnboarding}
         onComplete={() => setShowOnboarding(false)}
       />
 
-      <Navbar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
+      <HistorySidebar
+        open={sidebarOpen}
+        onOpenChange={setSidebarOpen}
+      />
 
-      <div className="flex-1 flex overflow-hidden">
-        <HistorySidebar
-          open={sidebarOpen}
-          onOpenChange={setSidebarOpen}
-        />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Navbar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
 
         <main className="flex-1 overflow-y-auto flex items-start md:items-center justify-center">
           <div className="w-full container mx-auto p-3 md:p-6 max-w-[800px] md:max-w-[700px]">