fix(ui): align header between home and settings (#2411)

TabbyML · Jun 14, 2024 · d4e476c · d4e476c
1 parent 59c995d
commit d4e476c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
@@ -210,7 +210,7 @@ function MainPanel() {
     : { height: '100vh' }
   return (
     <div className="transition-all" style={style}>
-      <header className="flex h-16 items-center justify-between px-10">
+      <header className="flex h-16 items-center justify-between px-4">
         <div>
           {isSearch && (
             <Image
@@ -222,11 +222,11 @@ function MainPanel() {
             />
           )}
         </div>
-        <div className="flex items-center gap-x-3">
+        <div className="flex items-center gap-x-6">
           <ClientOnly>
             <ThemeToggle />
           </ClientOnly>
-          <UserPanel>
+          <UserPanel showHome={false} showSetting>
             <UserAvatar className="h-10 w-10 border" />
           </UserPanel>
         </div>

diff --git a/ee/tabby-ui/components/user-panel.tsx b/ee/tabby-ui/components/user-panel.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useRouter } from 'next/navigation'
 
 import { useMe } from '@/lib/hooks/use-me'
 import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
@@ -16,16 +17,22 @@ import {
   IconBackpack,
   IconChat,
   IconCode,
+  IconGear,
   IconHome,
   IconLogout,
   IconSpinner
 } from './ui/icons'
 
 export default function UserPanel({
-  children
+  children,
+  showHome = true,
+  showSetting = false
 }: {
   children?: React.ReactNode
+  showHome?: boolean
+  showSetting?: boolean
 }) {
+  const router = useRouter()
   const signOut = useSignOut()
   const [{ data }] = useMe()
   const user = data?.me
@@ -59,13 +66,24 @@ export default function UserPanel({
         )}
         {!user.name && <DropdownMenuLabel>{user.email}</DropdownMenuLabel>}
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => window.open('/')}
-          className="cursor-pointer"
-        >
-          <IconHome />
-          <span className="ml-2">Home</span>
-        </DropdownMenuItem>
+        {showHome && (
+          <DropdownMenuItem
+            onClick={() => router.push('/')}
+            className="cursor-pointer"
+          >
+            <IconHome />
+            <span className="ml-2">Home</span>
+          </DropdownMenuItem>
+        )}
+        {showSetting && (
+          <DropdownMenuItem
+            onClick={() => router.push('/profile')}
+            className="cursor-pointer"
+          >
+            <IconGear />
+            <span className="ml-2">Settings</span>
+          </DropdownMenuItem>
+        )}
         {isChatEnabled && (
           <DropdownMenuItem
             onClick={() => window.open('/playground')}