Merge pull request 'fix: chathistory starred, normal type and block UI' (#95) from historybar_UI into main

Reviewed-on: https://git.biggo.com/john/dive/pulls/95

Author: johnfunmula

src/atoms/historyState.ts

@@ -1,20 +1,22 @@
 import { atom } from "jotai"
 
-interface ChatHistoryResponse {
-  starred: ChatHistory[]
-  normal: ChatHistory[]
+interface ChatHistory {
+  starred: ChatHistoryItem[]
+  normal: ChatHistoryItem[]
 }
-export interface ChatHistory {
+export type ChatHistoryItem = {
   id: string
   title: string
   createdAt: string
   updatedAt: string
   starredAt: string
   user_id: string
-  type: "normal" | "starred"
 }
 
-export const historiesAtom = atom<ChatHistory[]>([])
+export const historiesAtom = atom<ChatHistory>({
+  starred: [],
+  normal: []
+})
 
 export const loadHistoriesAtom = atom(
   null,
@@ -24,12 +26,7 @@ export const loadHistoriesAtom = atom(
       const data = await response.json()
 
       if (data.success) {
-        const response: ChatHistoryResponse = data.data
-        const historyList: ChatHistory[] = []
-        Object.entries(response).forEach(([key, value]) => {
-          historyList.push(...value.map((item: ChatHistory) => ({ ...item, type: key })))
-        })
-        set(historiesAtom, historyList)
+        set(historiesAtom, data.data as ChatHistory)
       }
     } catch (error) {
       console.warn("Failed to load chat history:", error)

src/components/Header.tsx

@@ -4,6 +4,7 @@ import { sidebarVisibleAtom, toggleSidebarAtom } from "../atoms/sidebarState"
 import { useTranslation } from "react-i18next"
 import { keymapModalVisibleAtom } from "../atoms/modalState"
 import ModelSelect from "./ModelSelect"
+import Tooltip from "./Tooltip"
 
 type Props = {
   showHelpButton?: boolean
@@ -25,14 +26,18 @@ const Header = ({ showHelpButton = false, showModelSelect = false }: Props) => {
       <div className="header-content">
         <div className="left-side">
           <div className="menu-container">
-            <button
-              className="menu-btn"
-              onClick={onClose}
+            <Tooltip
+              content={isSidebarVisible ? t("header.closeSidebar") : t("header.openSidebar")}
             >
-              <svg width="24" height="24" viewBox="0 0 24 24">
-                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-              </svg>
-            </button>
+              <button
+                className="menu-btn"
+                onClick={onClose}
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24">
+                  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+                </svg>
+              </button>
+            </Tooltip>
             <h1>{t("header.title")}</h1>
             {showModelSelect && <ModelSelect />}
           </div>

src/components/HistorySidebar.tsx

@@ -1,6 +1,8 @@
 {
   "header": {
-    "title": "Dive AI"
+    "title": "Dive AI",
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar"
   },
   "chat": {
     "placeholder": "Send any message...",

src/locales/en/translation.json

@@ -1,6 +1,8 @@
 {
   "header": {
-    "title": "Dive AI"
+    "title": "Dive AI",
+    "openSidebar": "Abrir lista de chats",
+    "closeSidebar": "Cerrar lista de chats"
   },
   "chat": {
     "placeholder": "Escribe un mensaje...",

src/locales/es/translation.json

@@ -1,6 +1,8 @@
 {
   "header": {
-    "title": "Dive AI"
+    "title": "Dive AI",
+    "openSidebar": "チャットリストを開く",
+    "closeSidebar": "チャットリストを閉じる"
   },
   "chat": {
     "placeholder": "メッセージを送信...",

src/locales/ja/translation.json

@@ -1,6 +1,8 @@
 {
   "header": {
-    "title": "Dive AI"
+    "title": "Dive AI",
+    "openSidebar": "채팅 목록 열기",
+    "closeSidebar": "채팅 목록 닫기"
   },
   "chat": {
     "placeholder": "메시지를 입력하세요...",

src/locales/ko/translation.json

@@ -1,6 +1,8 @@
 {
   "header": {
-    "title": "Dive AI"
+    "title": "Dive AI",
+    "openSidebar": "打开侧边栏",
+    "closeSidebar": "关闭侧边栏"
   },
   "chat": {
     "placeholder": "发送任何消息...",

src/locales/zh-CN/translation.json

@@ -1,6 +1,8 @@
 {
   "header": {
-    "title": "Dive AI"
+    "title": "Dive AI",
+    "openSidebar": "開啟側邊欄",
+    "closeSidebar": "關閉側邊欄"
   },
   "chat": {
     "placeholder": "傳送任何訊息...",

src/locales/zh-TW/translation.json

@@ -41,6 +41,23 @@
     @include scrollbar;
   }
 
+  .history-star {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    padding: 6px 6px 6px 10px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .history-list-split {
+    height: 1px;
+    width: 100%;
+    background: var(--bg-op-dark-mediumweak);
+    margin: 16px 0;
+  }
+
   .history-item {
     display: flex;
     align-items: center;
@@ -68,16 +85,6 @@
       min-width: 0;
       margin-right: 8px;
 
-      .history-star {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 4px;
-        margin-bottom: 4px;
-        font-size: 14px;
-        font-weight: 500;
-      }
-
       .history-title {
         font-weight: 500;
         margin-bottom: 2px;