From 6c19c9acba97db2332c1e3e79f9a898e95e38005 Mon Sep 17 00:00:00 2001
From: zerob13 <zerob13@gmail.com>
Date: Sat, 11 Oct 2025 17:48:28 +0800
Subject: [PATCH] feat(history): move history btn to appbar

---
 src/renderer/shell/components/AppBar.vue    | 24 +++++++++
 src/renderer/src/App.vue                    | 19 ++++++-
 src/renderer/src/components/ThreadView.vue  | 60 +++++++++++++++++++++
 src/renderer/src/components/ThreadsView.vue |  1 -
 src/renderer/src/components/TitleView.vue   | 38 ++++---------
 src/renderer/src/events.ts                  |  5 ++
 src/renderer/src/views/ChatTabView.vue      | 44 +--------------
 7 files changed, 119 insertions(+), 72 deletions(-)
 create mode 100644 src/renderer/src/components/ThreadView.vue

diff --git a/src/renderer/shell/components/AppBar.vue b/src/renderer/shell/components/AppBar.vue
index 293c2ec75..9d1fe18fc 100644
--- a/src/renderer/shell/components/AppBar.vue
+++ b/src/renderer/shell/components/AppBar.vue
@@ -75,6 +75,13 @@
         <Icon v-else-if="themeStore.themeMode === 'light'" icon="lucide:sun" class="w-4 h-4" />
         <Icon v-else icon="lucide:monitor" class="w-4 h-4" />
       </Button>
+      <Button
+        variant="ghost"
+        class="text-xs font-medium px-2 h-7 bg-transparent rounded-md flex items-center justify-center hover:bg-zinc-500/20"
+        @click="toggleThreadView"
+      >
+        <Icon icon="lucide:history" class="w-4 h-4" />
+      </Button>
       <Button
         variant="ghost"
         class="text-xs font-medium px-2 h-7 bg-transparent rounded-md flex items-center justify-center hover:bg-zinc-500/20"
@@ -129,6 +136,7 @@ import { useThemeStore } from '@/stores/theme'
 import { useElementSize } from '@vueuse/core'
 import { useLanguageStore } from '@/stores/language'
 import { useI18n } from 'vue-i18n'
+import { THREAD_VIEW_EVENTS } from '@/events'
 const tabStore = useTabStore()
 const langStore = useLanguageStore()
 const windowPresenter = usePresenter('windowPresenter')
@@ -162,6 +170,22 @@ const onTabContainerWrapperScroll = () => {
   })
 }
 
+const toggleThreadView = async () => {
+  try {
+    const windowId = window.api.getWindowId()
+    if (windowId == null) {
+      console.warn('Failed to toggle thread view: unable to determine window id.')
+      return
+    }
+    const success = await windowPresenter.sendToActiveTab(windowId, THREAD_VIEW_EVENTS.TOGGLE)
+    if (!success) {
+      console.warn('Failed to toggle thread view: no active tab found.')
+    }
+  } catch (error) {
+    console.warn('Failed to toggle thread view via windowPresenter.', error)
+  }
+}
+
 const isTabContainerOverflowingLeft = computed(() => {
   return (
     tabContainerWrapperSize.width.value < tabContainerSize.width.value &&
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index ed81f4bee..9cbe9c7a0 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -6,7 +6,7 @@ import { usePresenter } from './composables/usePresenter'
 import SelectedTextContextMenu from './components/message/SelectedTextContextMenu.vue'
 import { useArtifactStore } from './stores/artifact'
 import { useChatStore } from '@/stores/chat'
-import { NOTIFICATION_EVENTS, SHORTCUT_EVENTS } from './events'
+import { NOTIFICATION_EVENTS, SHORTCUT_EVENTS, THREAD_VIEW_EVENTS } from './events'
 import { Toaster } from '@shadcn/components/ui/sonner'
 import { useToast } from '@/components/use-toast'
 import { useSettingsStore } from '@/stores/settings'
@@ -14,6 +14,7 @@ import { useThemeStore } from '@/stores/theme'
 import { useLanguageStore } from '@/stores/language'
 import { useI18n } from 'vue-i18n'
 import TranslatePopup from '@/components/popup/TranslatePopup.vue'
+import ThreadView from '@/components/ThreadView.vue'
 import ModelCheckDialog from '@/components/settings/ModelCheckDialog.vue'
 import { useModelCheckStore } from '@/stores/modelCheck'
 import MessageDialog from './components/ui/MessageDialog.vue'
@@ -165,6 +166,15 @@ const handleCreateNewConversation = () => {
   }
 }
 
+const handleThreadViewToggle = () => {
+  if (router.currentRoute.value.name !== 'chat') {
+    void router.push({ name: 'chat' })
+    chatStore.isSidebarOpen = true
+    return
+  }
+  chatStore.isSidebarOpen = !chatStore.isSidebarOpen
+}
+
 // Removed GO_SETTINGS handler; now handled in main via tab logic
 
 // Handle ESC key - close floating chat window
@@ -224,6 +234,8 @@ onMounted(() => {
     })
   })
 
+  window.electron.ipcRenderer.on(THREAD_VIEW_EVENTS.TOGGLE, handleThreadViewToggle)
+
   window.electron.ipcRenderer.on(NOTIFICATION_EVENTS.SYS_NOTIFY_CLICKED, (_, msg) => {
     let threadId: string | null = null
 
@@ -265,6 +277,9 @@ onMounted(() => {
       }
       // Close artifacts page when route changes
       artifactStore.hideArtifact()
+      if (route.name !== 'chat') {
+        chatStore.isSidebarOpen = false
+      }
     }
   )
 
@@ -302,6 +317,7 @@ onBeforeUnmount(() => {
   // GO_SETTINGS listener removed; handled in main
   window.electron.ipcRenderer.removeAllListeners(NOTIFICATION_EVENTS.SYS_NOTIFY_CLICKED)
   window.electron.ipcRenderer.removeAllListeners(NOTIFICATION_EVENTS.DATA_RESET_COMPLETE_DEV)
+  window.electron.ipcRenderer.removeListener(THREAD_VIEW_EVENTS.TOGGLE, handleThreadViewToggle)
 })
 </script>
 
@@ -320,6 +336,7 @@ onBeforeUnmount(() => {
     <Toaster />
     <SelectedTextContextMenu />
     <TranslatePopup />
+    <ThreadView />
     <!-- Global model check dialog -->
     <ModelCheckDialog
       :open="modelCheckStore.isDialogOpen"
diff --git a/src/renderer/src/components/ThreadView.vue b/src/renderer/src/components/ThreadView.vue
new file mode 100644
index 000000000..e998480ef
--- /dev/null
+++ b/src/renderer/src/components/ThreadView.vue
@@ -0,0 +1,60 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200 ease-out"
+      leave-active-class="transition-opacity duration-150 ease-in"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="chatStore.isSidebarOpen" class="fixed inset-0 z-50" :dir="langStore.dir">
+        <div class="absolute inset-0 bg-transparent" @click="closeSidebar"></div>
+        <div
+          class="relative h-full flex"
+          :class="langStore.dir === 'rtl' ? 'justify-end' : 'justify-start'"
+        >
+          <Transition
+            enter-active-class="transition-transform duration-200 ease-out"
+            leave-active-class="transition-transform duration-150 ease-in"
+            :enter-from-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
+            :leave-to-class="langStore.dir === 'rtl' ? 'translate-x-full' : '-translate-x-full'"
+          >
+            <div
+              v-if="chatStore.isSidebarOpen"
+              class="h-full w-60 max-w-60 shadow-lg border-r border-border bg-bg-card"
+            >
+              <ThreadsView class="h-full" />
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+import ThreadsView from './ThreadsView.vue'
+import { useChatStore } from '@/stores/chat'
+import { useLanguageStore } from '@/stores/language'
+
+const chatStore = useChatStore()
+const langStore = useLanguageStore()
+
+const closeSidebar = () => {
+  chatStore.isSidebarOpen = false
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && chatStore.isSidebarOpen) {
+    closeSidebar()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
diff --git a/src/renderer/src/components/ThreadsView.vue b/src/renderer/src/components/ThreadsView.vue
index af6f214c2..9748f6129 100644
--- a/src/renderer/src/components/ThreadsView.vue
+++ b/src/renderer/src/components/ThreadsView.vue
@@ -5,7 +5,6 @@
     <!-- 固定在顶部的"新会话"按钮 -->
     <div class="flex-none flex flex-row gap-2">
       <Button
-        v-if="windowSize.width.value < 1024"
         variant="outline"
         size="icon"
         class="shrink-0 text-xs justify-center h-7 w-7"
diff --git a/src/renderer/src/components/TitleView.vue b/src/renderer/src/components/TitleView.vue
index aef237d36..1bfc21c43 100644
--- a/src/renderer/src/components/TitleView.vue
+++ b/src/renderer/src/components/TitleView.vue
@@ -1,28 +1,14 @@
 <template>
-  <div class="flex items-center justify-between w-full p-2">
-    <div class="flex flex-row gap-2 items-center">
-      <Button
-        class="w-7 h-7 rounded-md"
-        size="icon"
-        variant="outline"
-        @click="onSidebarButtonClick"
-      >
-        <Icon v-if="chatStore.isSidebarOpen" icon="lucide:panel-left-close" class="w-4 h-4" />
-        <Icon v-else icon="lucide:panel-left-open" class="w-4 h-4" />
-      </Button>
-    </div>
-
-    <div class="flex items-center gap-2">
-      <Button
-        class="w-7 h-7 rounded-md relative"
-        size="icon"
-        variant="outline"
-        :class="{ 'bg-accent': chatStore.isMessageNavigationOpen }"
-        @click="onMessageNavigationButtonClick"
-      >
-        <Icon icon="lucide:list" class="w-4 h-4" />
-      </Button>
-    </div>
+  <div class="flex items-center justify-end w-full p-2">
+    <Button
+      class="w-7 h-7 rounded-md relative"
+      size="icon"
+      variant="outline"
+      :class="{ 'bg-accent': chatStore.isMessageNavigationOpen }"
+      @click="onMessageNavigationButtonClick"
+    >
+      <Icon icon="lucide:list" class="w-4 h-4" />
+    </Button>
   </div>
 </template>
 
@@ -35,10 +21,6 @@ const emit = defineEmits(['messageNavigationToggle'])
 
 const chatStore = useChatStore()
 
-const onSidebarButtonClick = () => {
-  chatStore.isSidebarOpen = !chatStore.isSidebarOpen
-}
-
 // 新增的事件处理函数
 const onMessageNavigationButtonClick = () => {
   emit('messageNavigationToggle')
diff --git a/src/renderer/src/events.ts b/src/renderer/src/events.ts
index 59a93eae6..ab01adb7f 100644
--- a/src/renderer/src/events.ts
+++ b/src/renderer/src/events.ts
@@ -124,6 +124,11 @@ export const SHORTCUT_EVENTS = {
   DELETE_CONVERSATION: 'shortcut:delete-conversation'
 }
 
+// Thread view related events
+export const THREAD_VIEW_EVENTS = {
+  TOGGLE: 'thread-view:toggle'
+}
+
 // 标签页相关事件
 export const TAB_EVENTS = {
   TITLE_UPDATED: 'tab:title-updated', // 标签页标题更新
diff --git a/src/renderer/src/views/ChatTabView.vue b/src/renderer/src/views/ChatTabView.vue
index 738c6fbcb..0760b4418 100644
--- a/src/renderer/src/views/ChatTabView.vue
+++ b/src/renderer/src/views/ChatTabView.vue
@@ -8,30 +8,6 @@
       ]"
     >
       <div class="flex h-full">
-        <!-- 会话列表 (根据语言方向自适应位置) -->
-        <Transition
-          enter-active-class="transition-all duration-300 ease-out"
-          leave-active-class="transition-all duration-300 ease-in"
-          :enter-from-class="
-            langStore.dir === 'rtl' ? 'translate-x-full opacity-0' : '-translate-x-full opacity-0'
-          "
-          :leave-to-class="
-            langStore.dir === 'rtl' ? 'translate-x-full opacity-0' : '-translate-x-full opacity-0'
-          "
-        >
-          <div
-            v-show="chatStore.isSidebarOpen"
-            ref="sidebarRef"
-            :class="[
-              'w-60 max-w-60 h-full fixed z-20 lg:relative',
-              langStore.dir === 'rtl' ? 'right-0' : 'left-0'
-            ]"
-            :dir="langStore.dir"
-          >
-            <ThreadsView class="transform" />
-          </div>
-        </Transition>
-
         <!-- 主聊天区域 -->
         <div class="flex-1 flex flex-col w-0">
           <!-- 新会话 -->
@@ -73,7 +49,7 @@
           <div class="flex-1" @click="chatStore.isMessageNavigationOpen = false"></div>
 
           <!-- 侧边栏 -->
-          <div ref="messageNavigationRef" class="w-80 max-w-80">
+          <div class="w-80 max-w-80">
             <MessageNavigationSidebar
               :messages="chatStore.variantAwareMessages"
               :is-open="chatStore.isMessageNavigationOpen"
@@ -94,13 +70,11 @@
 import { defineAsyncComponent } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { watch, ref } from 'vue'
-import { onClickOutside, useTitle, useMediaQuery } from '@vueuse/core'
+import { useTitle, useMediaQuery } from '@vueuse/core'
 import { useArtifactStore } from '@/stores/artifact'
 import ArtifactDialog from '@/components/artifacts/ArtifactDialog.vue'
 import MessageNavigationSidebar from '@/components/MessageNavigationSidebar.vue'
 import { useRoute } from 'vue-router'
-import { useLanguageStore } from '@/stores/language'
-const ThreadsView = defineAsyncComponent(() => import('@/components/ThreadsView.vue'))
 const TitleView = defineAsyncComponent(() => import('@/components/TitleView.vue'))
 const ChatView = defineAsyncComponent(() => import('@/components/ChatView.vue'))
 const NewThread = defineAsyncComponent(() => import('@/components/NewThread.vue'))
@@ -108,7 +82,6 @@ const artifactStore = useArtifactStore()
 const route = useRoute()
 const chatStore = useChatStore()
 const title = useTitle()
-const langStore = useLanguageStore()
 const chatViewRef = ref()
 // 添加标题更新逻辑
 const updateTitle = () => {
@@ -141,21 +114,8 @@ watch(
 )
 
 // 点击外部区域关闭侧边栏
-const sidebarRef = ref<HTMLElement>()
-const messageNavigationRef = ref<HTMLElement>()
 const isLargeScreen = useMediaQuery('(min-width: 1024px)')
 
-onClickOutside(sidebarRef, (event) => {
-  const isClickInMessageNavigation = messageNavigationRef.value?.contains(event.target as Node)
-
-  if (chatStore.isSidebarOpen && !isLargeScreen.value) {
-    chatStore.isSidebarOpen = false
-  }
-  if (chatStore.isMessageNavigationOpen && !isLargeScreen.value && !isClickInMessageNavigation) {
-    chatStore.isMessageNavigationOpen = false
-  }
-})
-
 const handleMessageNavigationToggle = () => {
   if (artifactStore.isOpen) {
     artifactStore.isOpen = false