From b662c25007650e3541d615e48829bb3146cab077 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 30 May 2024 10:53:40 +0700
Subject: [PATCH] fix: adjustment minor UI from qa feedback (#2963)

* feat: update minor ui from feedback

* fix: adjust spacing import model

* feat: edit title thread (#2964)

* feat: edit title thread

* fix: fix copies

* fix copies

* fix copies
---
 themes/dark-dimmed/theme.json                 |  4 +-
 .../BottomPanel/DownloadingState/index.tsx    |  2 +-
 web/containers/Layout/RibbonPanel/index.tsx   | 10 ++-
 web/containers/Layout/TopPanel/index.tsx      |  2 +-
 web/containers/LeftPanelContainer/index.tsx   |  4 +-
 web/screens/Settings/Appearance/index.tsx     |  3 +-
 .../Settings/EditModelInfoModal/index.tsx     |  4 +-
 .../ThreadCenterPanel/ChatInput/index.tsx     |  5 +-
 .../ModalEditTitleThread/index.tsx            | 71 +++++++++++++++++++
 web/screens/Thread/ThreadLeftPanel/index.tsx  |  2 +
 10 files changed, 96 insertions(+), 11 deletions(-)
 create mode 100644 web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx

diff --git a/themes/dark-dimmed/theme.json b/themes/dark-dimmed/theme.json
index 908c6eec9..c96085092 100644
--- a/themes/dark-dimmed/theme.json
+++ b/themes/dark-dimmed/theme.json
@@ -52,7 +52,7 @@
     },
 
     "left-panel": {
-      "bg": "0, 0%, 13%, 0",
+      "bg": "215, 25%, 9%, 1",
       "menu": "0, 0%, 95%, 1",
       "menu-hover": "0, 0%, 28%, 0.2",
       "menu-active": "0, 0%, 100%, 1",
@@ -64,7 +64,7 @@
     },
 
     "right-panel": {
-      "bg": "0, 0%, 13%, 0"
+      "bg": "215, 25%, 9%, 1"
     },
 
     "tooltip": {
diff --git a/web/containers/Layout/BottomPanel/DownloadingState/index.tsx b/web/containers/Layout/BottomPanel/DownloadingState/index.tsx
index 7f71c8248..ddc2eab91 100644
--- a/web/containers/Layout/BottomPanel/DownloadingState/index.tsx
+++ b/web/containers/Layout/BottomPanel/DownloadingState/index.tsx
@@ -33,7 +33,7 @@ export default function DownloadingState() {
         <Modal
           title="Downloading model"
           trigger={
-            <div className="flex items-center gap-2">
+            <div className="flex cursor-pointer items-center gap-2">
               <Button size="small" theme="ghost">
                 <span className="font-medium">
                   Downloading model{' '}
diff --git a/web/containers/Layout/RibbonPanel/index.tsx b/web/containers/Layout/RibbonPanel/index.tsx
index 9dc8fb72b..b9b1434ae 100644
--- a/web/containers/Layout/RibbonPanel/index.tsx
+++ b/web/containers/Layout/RibbonPanel/index.tsx
@@ -40,7 +40,15 @@ export default function RibbonPanel() {
   const RibbonNavMenus = [
     {
       name: 'Thread',
-      icon: <MessageCircleIcon size={18} className="flex-shrink-0" />,
+      icon: (
+        <MessageCircleIcon
+          size={18}
+          className={twMerge(
+            'flex-shrink-0',
+            serverEnabled && 'text-[hsla(var(--disabled-fg))]'
+          )}
+        />
+      ),
       state: MainViewState.Thread,
     },
     {
diff --git a/web/containers/Layout/TopPanel/index.tsx b/web/containers/Layout/TopPanel/index.tsx
index 43d17611b..bd34f5858 100644
--- a/web/containers/Layout/TopPanel/index.tsx
+++ b/web/containers/Layout/TopPanel/index.tsx
@@ -96,7 +96,7 @@ const TopPanel = () => {
             <PaletteIcon size={16} className="cursor-pointer" />
           </Button>
 
-          {!isMac && (
+          {isWindows && (
             <div className="flex items-center gap-x-2">
               <Button
                 theme="icon"
diff --git a/web/containers/LeftPanelContainer/index.tsx b/web/containers/LeftPanelContainer/index.tsx
index b09f47335..9cde257ed 100644
--- a/web/containers/LeftPanelContainer/index.tsx
+++ b/web/containers/LeftPanelContainer/index.tsx
@@ -93,9 +93,9 @@ const LeftPanelContainer = ({ children }: Props) => {
         showLeftPanel ? 'opacity-100' : 'w-0 translate-x-full opacity-0',
         isResizing && 'cursor-col-resize',
         matches &&
-          'absolute left-2 z-50 rounded-s-lg border-r border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
+          'absolute left-2 z-[100] rounded-s-lg border-r border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
         reduceTransparent &&
-          'border-r border-[hsla(var(--app-border))] bg-[hsla(var(--left-panel-bg))]'
+          'left-0 border-r border-[hsla(var(--app-border))] bg-[hsla(var(--left-panel-bg))]'
       )}
       style={{ width: showLeftPanel ? threadLeftPanelWidth : 0 }}
       onMouseDown={(e) => isResizing && e.stopPropagation()}
diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
index 1d59dfde1..23a791aa8 100644
--- a/web/screens/Settings/Appearance/index.tsx
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -32,13 +32,14 @@ export default function AppearanceOptions() {
       setThemeData(theme)
       setTheme(String(theme?.nativeTheme))
       if (theme?.reduceTransparent) {
-        setReduceTransparent(false)
+        setReduceTransparent(reduceTransparent)
       } else {
         setReduceTransparent(true)
       }
     },
     [
       janThemesPath,
+      reduceTransparent,
       setReduceTransparent,
       setSelectedIdTheme,
       setTheme,
diff --git a/web/screens/Settings/EditModelInfoModal/index.tsx b/web/screens/Settings/EditModelInfoModal/index.tsx
index 99b1d594d..1c3604e21 100644
--- a/web/screens/Settings/EditModelInfoModal/index.tsx
+++ b/web/screens/Settings/EditModelInfoModal/index.tsx
@@ -145,7 +145,7 @@ const EditModelInfoModal = () => {
             </div>
           </div>
 
-          <form className="flex flex-col space-y-4">
+          <form className="mt-4 flex flex-col space-y-4">
             <div className="flex flex-col">
               <label className="mb-1">Model Name</label>
               <Input
@@ -183,7 +183,7 @@ const EditModelInfoModal = () => {
             </div>
           </form>
 
-          <div className="flex gap-x-2">
+          <div className="mt-4 flex gap-x-2">
             <ModalClose asChild onClick={onCancelClick}>
               <Button theme="ghost">Cancel</Button>
             </ModalClose>
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index 52b237868..13187b7a4 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -232,7 +232,10 @@ const ChatInput = () => {
         {showAttacmentMenus && (
           <div
             ref={refAttachmentMenus}
-            className="absolute bottom-14 left-0 z-30 w-36 cursor-pointer rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] py-1 shadow-sm"
+            className={twMerge(
+              'absolute bottom-14 left-0 z-30 w-36 cursor-pointer rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] py-1 shadow-sm',
+              activeSetting && 'bottom-28'
+            )}
           >
             <ul>
               <Tooltip
diff --git a/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx b/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
new file mode 100644
index 000000000..79cb26e27
--- /dev/null
+++ b/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
@@ -0,0 +1,71 @@
+import { useCallback, memo, useState } from 'react'
+
+import { Thread } from '@janhq/core'
+import { Modal, ModalClose, Button, Input } from '@janhq/joi'
+import { PencilIcon } from 'lucide-react'
+
+import { useCreateNewThread } from '@/hooks/useCreateNewThread'
+
+type Props = {
+  thread: Thread
+}
+
+const ModalEditTitleThread = ({ thread }: Props) => {
+  const [title, setTitle] = useState(thread.title)
+
+  const { updateThreadMetadata } = useCreateNewThread()
+
+  const onUpdateTitle = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      e.stopPropagation()
+
+      updateThreadMetadata({
+        ...thread,
+        title: title || 'New Thread',
+      })
+    },
+    [thread, title, updateThreadMetadata]
+  )
+
+  return (
+    <Modal
+      title="Edit title thread"
+      trigger={
+        <div
+          className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <PencilIcon size={16} className="text-[hsla(var(--secondary))]" />
+          <span className="text-bold text-[hsla(var(--secondary))]">
+            Edit title
+          </span>
+        </div>
+      }
+      content={
+        <form className="mt-4">
+          <Input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            autoFocus
+          />
+          <div className="mt-4 flex justify-end gap-x-2">
+            <ModalClose asChild onClick={(e) => e.stopPropagation()}>
+              <Button theme="ghost">Cancel</Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button
+                type="submit"
+                onClick={onUpdateTitle}
+                disabled={title.length === 0}
+              >
+                Save
+              </Button>
+            </ModalClose>
+          </div>
+        </form>
+      }
+    />
+  )
+}
+
+export default memo(ModalEditTitleThread)
diff --git a/web/screens/Thread/ThreadLeftPanel/index.tsx b/web/screens/Thread/ThreadLeftPanel/index.tsx
index ea25d1fee..0da7d0088 100644
--- a/web/screens/Thread/ThreadLeftPanel/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/index.tsx
@@ -22,6 +22,7 @@ import useSetActiveThread from '@/hooks/useSetActiveThread'
 
 import ModalCleanThread from './ModalCleanThread'
 import ModalDeleteThread from './ModalDeleteThread'
+import ModalEditTitleThread from './ModalEditTitleThread'
 
 import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 import { editMessageAtom } from '@/helpers/atoms/ChatMessage.atom'
@@ -143,6 +144,7 @@ const ThreadLeftPanel = () => {
                   <MoreHorizontalIcon />
                 </Button>
                 <div className="invisible absolute -right-1 z-50 w-40 overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg group-hover/icon:visible">
+                  <ModalEditTitleThread thread={thread} />
                   <ModalCleanThread threadId={thread.id} />
                   <ModalDeleteThread threadId={thread.id} />
                 </div>