From 3accef8c921ce40a1223bb6c9b7697d9829ddee5 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 12 Jun 2025 09:04:47 +0700
Subject: [PATCH] fix: minor ui (#5247)

---
 .../src/containers/DropdownModelProvider.tsx  | 21 ++++++++++++-------
 .../src/containers/DropdownToolsAvailable.tsx | 10 ++++++---
 web-app/src/containers/LeftPanel.tsx          |  4 ++--
 web-app/src/containers/ModelSetting.tsx       | 15 +++++++++++--
 web-app/src/containers/ProvidersMenu.tsx      |  2 +-
 web-app/src/routes/threads/$threadId.tsx      |  7 ++++++-
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/web-app/src/containers/DropdownModelProvider.tsx b/web-app/src/containers/DropdownModelProvider.tsx
index 9e3c61535..6d5d24155 100644
--- a/web-app/src/containers/DropdownModelProvider.tsx
+++ b/web-app/src/containers/DropdownModelProvider.tsx
@@ -258,7 +258,7 @@ const DropdownModelProvider = ({
 
   return (
     <Popover open={open} onOpenChange={onOpenChange}>
-      <div className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 flex items-center gap-1.5 rounded-sm max-h-[32px]">
+      <div className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 flex items-center gap-1.5 rounded-sm max-h-[32px] ">
         <PopoverTrigger asChild>
           <button
             title={displayModel}
@@ -280,12 +280,19 @@ const DropdownModelProvider = ({
           </button>
         </PopoverTrigger>
         {currentModel?.settings && provider && (
-          <ModelSetting model={currentModel as Model} provider={provider} />
+          <ModelSetting
+            model={currentModel as Model}
+            provider={provider}
+            smallIcon
+          />
         )}
       </div>
 
       <PopoverContent
-        className={cn('w-60 p-0', searchValue.length === 0 && 'h-[320px]')}
+        className={cn(
+          'w-60 p-0 backdrop-blur-2xl',
+          searchValue.length === 0 && 'h-[320px]'
+        )}
         align="start"
         sideOffset={10}
         alignOffset={-8}
@@ -294,7 +301,7 @@ const DropdownModelProvider = ({
       >
         <div className="flex flex-col w-full h-full">
           {/* Search input */}
-          <div className="relative px-2 py-1.5 border-b border-main-view-fg/10">
+          <div className="relative px-2 py-1.5 border-b border-main-view-fg/10 backdrop-blur-4xl">
             <input
               ref={searchInputRef}
               value={searchValue}
@@ -331,7 +338,7 @@ const DropdownModelProvider = ({
                   return (
                     <div
                       key={providerKey}
-                      className="bg-main-view-fg/4 first:mt-0 rounded-sm my-1.5 mx-1.5 first:mb-0"
+                      className="bg-main-view-fg/4 backdrop-blur-2xl first:mt-0 rounded-sm my-1.5 mx-1.5 first:mb-0"
                     >
                       {/* Provider header */}
                       <div className="flex items-center justify-between px-2 py-1">
@@ -342,7 +349,7 @@ const DropdownModelProvider = ({
                           </span>
                         </div>
                         <div
-                          className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
+                          className="size-6 cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
                           onClick={(e) => {
                             e.stopPropagation()
                             navigate({
@@ -377,7 +384,7 @@ const DropdownModelProvider = ({
                               key={searchableModel.value}
                               onClick={() => handleSelect(searchableModel)}
                               className={cn(
-                                'mx-1 mb-1 px-2 py-1.5 rounded cursor-pointer flex items-center gap-2 transition-all duration-200',
+                                'mx-1 mb-1 px-2 py-1.5 rounded-sm cursor-pointer flex items-center gap-2 transition-all duration-200',
                                 'hover:bg-main-view-fg/10',
                                 isSelected && 'bg-main-view-fg/15'
                               )}
diff --git a/web-app/src/containers/DropdownToolsAvailable.tsx b/web-app/src/containers/DropdownToolsAvailable.tsx
index eb8bc2e93..d9964a188 100644
--- a/web-app/src/containers/DropdownToolsAvailable.tsx
+++ b/web-app/src/containers/DropdownToolsAvailable.tsx
@@ -99,8 +99,12 @@ export default function DropdownToolsAvailable({
     <DropdownMenu onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger>
 
-      <DropdownMenuContent side="top" align="start" className="max-w-64">
-        <DropdownMenuLabel className="flex items-center gap-2 sticky -top-1 z-10 bg-main-view px-4 pl-2 py-2">
+      <DropdownMenuContent
+        side="top"
+        align="start"
+        className="max-w-64 backdrop-blur-xl bg-main-view"
+      >
+        <DropdownMenuLabel className="flex items-center gap-2 sticky -top-1 z-10 px-4 pl-2 py-2 ">
           Available Tools
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
@@ -110,7 +114,7 @@ export default function DropdownToolsAvailable({
             return (
               <div
                 key={tool.name}
-                className="py-2 hover:bg-main-view-fg/5 rounded-sm px-2 mx-auto w-full"
+                className="py-2 hover:bg-main-view-fg/5 hover:backdrop-blur-2xl rounded-sm px-2 mx-auto w-full"
               >
                 <div className="flex items-start justify-center gap-3">
                   <div className="flex items-start justify-between gap-4 w-full">
diff --git a/web-app/src/containers/LeftPanel.tsx b/web-app/src/containers/LeftPanel.tsx
index a7aaba9b9..4f8fb8535 100644
--- a/web-app/src/containers/LeftPanel.tsx
+++ b/web-app/src/containers/LeftPanel.tsx
@@ -117,7 +117,7 @@ const LeftPanel = () => {
             <input
               type="text"
               placeholder={t('common.search')}
-              className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
+              className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded-sm text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
@@ -141,7 +141,7 @@ const LeftPanel = () => {
               <input
                 type="text"
                 placeholder={t('common.search')}
-                className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
+                className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded-sm text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
diff --git a/web-app/src/containers/ModelSetting.tsx b/web-app/src/containers/ModelSetting.tsx
index 833d1423f..776ced4d5 100644
--- a/web-app/src/containers/ModelSetting.tsx
+++ b/web-app/src/containers/ModelSetting.tsx
@@ -13,13 +13,19 @@ import { DynamicControllerSetting } from '@/containers/dynamicControllerSetting'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { updateModel, stopModel } from '@/services/models'
 import { ModelSettingParams } from '@janhq/core'
+import { cn } from '@/lib/utils'
 
 type ModelSettingProps = {
   provider: ProviderObject
   model: Model
+  smallIcon?: boolean
 }
 
-export function ModelSetting({ model, provider }: ModelSettingProps) {
+export function ModelSetting({
+  model,
+  provider,
+  smallIcon,
+}: ModelSettingProps) {
   const { updateProvider } = useModelProvider()
 
   // Create a debounced version of stopModel that waits 500ms after the last call
@@ -87,7 +93,12 @@ export function ModelSetting({ model, provider }: ModelSettingProps) {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <div className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out">
+        <div
+          className={cn(
+            'size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out',
+            smallIcon && 'size-5'
+          )}
+        >
           <IconSettings size={18} className="text-main-view-fg/50" />
         </div>
       </SheetTrigger>
diff --git a/web-app/src/containers/ProvidersMenu.tsx b/web-app/src/containers/ProvidersMenu.tsx
index f2dfa1bdc..b8e97e201 100644
--- a/web-app/src/containers/ProvidersMenu.tsx
+++ b/web-app/src/containers/ProvidersMenu.tsx
@@ -106,7 +106,7 @@ const ProvidersMenu = ({
 
         <Dialog>
           <DialogTrigger asChild>
-            <div className="bg-main-view flex cursor-pointer px-4 my-1.5 items-center gap-1.5  text-main-view-fg/80">
+            <div className="flex cursor-pointer px-4 my-1.5 items-center gap-1.5  text-main-view-fg/80">
               <IconCirclePlus size={18} />
               <span>Add Provider</span>
             </div>
diff --git a/web-app/src/routes/threads/$threadId.tsx b/web-app/src/routes/threads/$threadId.tsx
index 7b05a6871..1190dfc1c 100644
--- a/web-app/src/routes/threads/$threadId.tsx
+++ b/web-app/src/routes/threads/$threadId.tsx
@@ -17,6 +17,7 @@ import { fetchMessages } from '@/services/messages'
 import { useAppState } from '@/hooks/useAppState'
 import DropdownAssistant from '@/containers/DropdownAssistant'
 import { useAssistant } from '@/hooks/useAssistant'
+import { useAppearance } from '@/hooks/useAppearance'
 
 // as route.threadsDetail
 export const Route = createFileRoute('/threads/$threadId')({
@@ -33,6 +34,7 @@ function ThreadDetail() {
   const { setCurrentAssistant, assistants } = useAssistant()
   const { setMessages } = useMessages()
   const { streamingContent } = useAppState()
+  const { appMainViewBgColor } = useAppearance()
 
   const { messages } = useMessages(
     useShallow((state) => ({
@@ -241,7 +243,10 @@ function ThreadDetail() {
         <div className="w-4/6 mx-auto pt-2 pb-3 shrink-0 relative">
           <div
             className={cn(
-              'from-main-view/20 bg-gradient-to-b to-main-view absolute z-0 -top-6 h-8 py-1 flex w-full justify-center backdrop-blur pointer-events-none opacity-0 visibility-hidden',
+              'absolute z-0 -top-6 h-8 py-1 flex w-full justify-center pointer-events-none opacity-0 visibility-hidden',
+              appMainViewBgColor.a === 1
+                ? 'from-main-view/20 bg-gradient-to-b to-main-view backdrop-blur'
+                : 'bg-transparent',
               !isAtBottom && hasScrollbar && 'visibility-visible opacity-100'
             )}
           >