feat: Update Navbar and HistorySidebar layout for improved navigation and styling

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>

qwen3-tts-frontend/src/components/Navbar.tsx

@@ -22,28 +22,18 @@ 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">
@@ -84,7 +74,6 @@ export function Navbar({ onToggleSidebar }: NavbarProps) {
       <Button variant="ghost" size="icon" onClick={logout}>
         <LogOut className="h-5 w-5" />
       </Button>
-      </div>
     </nav>
   )
 }

qwen3-tts-frontend/src/pages/Home.tsx

@@ -33,20 +33,20 @@ 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)} />
-
-      <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]">
             <Tabs value={currentTab} onValueChange={setCurrentTab}>