feat: update UI components and styles for improved layout and aesthetics

Author: wangshunnn

src-tauri/tauri.conf.json

@@ -26,7 +26,7 @@
         "transparent": true,
         "trafficLightPosition": {
           "x": 24,
-          "y": 26
+          "y": 25
         }
       }
     ],

src/components/ai-elements/prompt-input.tsx

@@ -1,9 +1,9 @@
 import type { ChatStatus, FileUIPart } from "ai"
 import {
+  ArrowUpIcon,
   ImageIcon,
   Loader2Icon,
   MicIcon,
-  Navigation2Icon,
   PaperclipIcon,
   PlusIcon,
   SquareIcon,
@@ -912,7 +912,7 @@ export const PromptInputTextarea = forwardRef<PromptInputTextareaHandle, PromptI
     return (
       <InputGroupTextarea
         ref={textareaRef}
-        rows={1}
+        rows={2}
         className={cn(
           "field-sizing-content min-h-(--chat-input-line-height) max-h-(--chat-input-max-height)",
           "text-sm leading-(--chat-input-line-height)",
@@ -1033,7 +1033,7 @@ export const PromptInputSubmit = ({
   children,
   ...props
 }: PromptInputSubmitProps) => {
-  let Icon = <Navigation2Icon className="mb-px fixed text-white fill-current" />
+  let Icon = <ArrowUpIcon className="size-4 fixed" />
 
   if (status === "submitted") {
     Icon = <Loader2Icon className="fixedanimate-spin" />
@@ -1046,11 +1046,7 @@ export const PromptInputSubmit = ({
   return (
     <InputGroupButton
       aria-label="Submit"
-      className={cn(
-        "rounded-full bg-brand-green hover:bg-brand-green",
-        "transition-all duration-200",
-        className
-      )}
+      className={cn("rounded-full bg-foreground", "transition-all duration-200", className)}
       size={size}
       type="submit"
       variant={variant}

src/components/ai-elements/tool-calls-container.tsx

@@ -137,7 +137,7 @@ export const ToolCallsContainerContent = memo(
   ({ className, maxHeight = "24rem", children, ...props }: ToolCallsContainerContentProps) => (
     <CollapsibleContent
       className={cn(
-        "relative mt-4 text-sm leading-normal",
+        "relative mt-2 text-sm leading-normal",
         "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2",
         "outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className

src/components/app-chat.tsx

@@ -301,7 +301,8 @@ const AppChat = ({ activeChatId, onChatCreated }: AppChatProps) => {
   }, [messages])
 
   const handleSubmit = (message: PromptInputMessage) => {
-    const hasText = Boolean(message.text)
+    const messageText = message.text?.trim() ?? ""
+    const hasText = Boolean(messageText)
     const hasAttachments = Boolean(message.files?.length)
     if (!(hasText || hasAttachments)) {
       return
@@ -323,8 +324,8 @@ const AppChat = ({ activeChatId, onChatCreated }: AppChatProps) => {
         description: toastConstants.filesAttachedDescription(message.files.length)
       })
     }
-    if (message.text) {
-      sendMessage({ text: message.text })
+    if (messageText) {
+      sendMessage({ text: messageText })
       setInput("")
       textareaRef.current?.resetHeight()
     }
@@ -353,7 +354,7 @@ const AppChat = ({ activeChatId, onChatCreated }: AppChatProps) => {
         <div
           className={cn(
             "fixed left-10 flex z-50 items-center justify-center pointer-events-auto gap-1.25",
-            !isCompact && open ? "left-66.75" : "left-42",
+            !isCompact && open ? "left-66.75" : "left-43",
             "transition-left duration-300 ease"
           )}
         >

src/components/nav-top.tsx

@@ -19,12 +19,12 @@ function NewChatTrigger({ className, ...props }: React.ComponentProps<typeof But
           variant="ghost"
           size="icon"
           className={cn(
-            "size-8 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            "size-7 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
             className
           )}
           {...props}
         >
-          <MessageSquarePlus className="cursor-pointer size-4.5" />
+          <MessageSquarePlus className="size-4 lucide-light" />
           <span className="sr-only">{t("nav.newChat")}</span>
         </Button>
       </TooltipTrigger>

src/components/nav-user.tsx

@@ -28,6 +28,7 @@ import { useLanguage } from "@/hooks/use-language"
 import { useShortcutDisplay } from "@/hooks/use-shortcut-config"
 import { openSettingsWindow, SettingsSection } from "@/lib/window-manager"
 import { ShortcutAction } from "@/types/settings"
+import { cn } from "../lib/utils"
 import { useTheme } from "./theme-provider"
 import { Button } from "./ui/button"
 import { Kbd, KbdGroup } from "./ui/kbd"
@@ -43,7 +44,13 @@ export function NavUser() {
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="size-8 transition-transform hover:rotate-12">
+            <Button
+              variant="ghost"
+              className={cn(
+                "size-8 transition-transform opacity-50",
+                "hover:opacity-100 hover:rotate-12"
+              )}
+            >
               <GhostIcon className="size-4" />
             </Button>
           </DropdownMenuTrigger>

src/components/select-model.tsx

@@ -57,14 +57,14 @@ function SelectModel({ className, value, onChange, ...props }: SelectModelProps)
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>
             <Button
-              variant="ghost"
-              className={cn("h-8 gap-2 data-[state=open]:bg-accent font-medium", className)}
+              variant="outline-no-shadow"
+              className={cn("h-7 gap-2 data-[state=open]:bg-accent font-normal text-xs", className)}
               {...props}
             >
-              <ProviderLogo providerId={selectedModel.provider} className="size-4" />
+              <ProviderLogo providerId={selectedModel.provider} className="size-3.5" />
               {selectedModel.label || t("model.selectModel")}
               <ChevronDown
-                className={cn("size-3.5 transition-transform duration-300", open && "-rotate-180")}
+                className={cn("size-3 transition-transform duration-300", open && "-rotate-180")}
               />
               <span className="sr-only">{t("model.selectModel")}</span>
             </Button>
@@ -73,7 +73,7 @@ function SelectModel({ className, value, onChange, ...props }: SelectModelProps)
         <TooltipContent>{t("model.switchModel")}</TooltipContent>
       </Tooltip>
 
-      <DropdownMenuContent align="start" sideOffset={6}>
+      <DropdownMenuContent align="start" sideOffset={4}>
         <DropdownMenuGroup>
           {isLoading ? (
             <DropdownMenuItem disabled className="text-muted-foreground">

src/components/ui/button.tsx

@@ -14,6 +14,8 @@ const buttonVariants = cva(
         destructive: "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        "outline-no-shadow":
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-sidebar-accent aria-expanded:bg-accent dark:aria-expanded:bg-sidebar-accent aria-expanded:text-accent-foreground",

src/components/ui/sidebar.tsx

@@ -256,7 +256,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
           variant="ghost"
           size="icon"
           className={cn(
-            "size-8 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            "size-7 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
             className
           )}
           onClick={event => {
@@ -265,7 +265,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
           }}
           {...props}
         >
-          <PanelLeftIcon className="size-4.5" />
+          <PanelLeftIcon className="size-4 lucide-light" />
           <span className="sr-only">{t("sidebar.toggleSidebar")}</span>
         </Button>
       </TooltipTrigger>

src/pages/Home.tsx

@@ -55,10 +55,13 @@ export default function Page() {
       />
 
       {/* Top drag region */}
-      <div data-tauri-drag-region className="z-50 fixed top-0 left-0 right-0 h-13.5"></div>
+      <div data-tauri-drag-region className="z-50 h-12 fixed top-0 left-0 right-0"></div>
 
       {/* Top buttons */}
-      <div className="z-50 fixed top-3 left-23 flex items-center justify-center pointer-events-auto gap-1">
+      <div
+        data-tauri-drag-region
+        className="z-50 pt-1.5 h-12 fixed left-24 flex items-center justify-center pointer-events-auto gap-2"
+      >
         <SidebarTrigger />
         <NewChatTrigger onClick={handleNewChat} />
       </div>