feat(history): move history btn to appbar #975
Conversation
WalkthroughIntroduces a thread view toggle feature: adds a toggle button in AppBar, defines THREAD_VIEW_EVENTS.TOGGLE, wires IPC/listeners in App.vue to open/close a new ThreadView sidebar component, and refactors ChatTabView/TitleView to remove the old sidebar/toggle logic. ThreadsView always shows the “新会话” button. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant AB as AppBar.vue
participant WP as windowPresenter
participant EVT as THREAD_VIEW_EVENTS
participant APP as App.vue
participant CS as chatStore
participant TV as ThreadView.vue
U->>AB: Click "thread-view" toggle button
AB->>WP: send(THREAD_VIEW_EVENTS.TOGGLE) to active tab
Note over AB,WP: Warn if no window/tab or errors
WP-->>APP: Emit thread-view:toggle
APP->>APP: handleThreadViewToggle()
alt On chat route
APP->>CS: Toggle isSidebarOpen
else Not on chat route
APP->>APP: Navigate to chat route
APP->>CS: Ensure isSidebarOpen = true
end
CS-->>TV: isSidebarOpen changed
TV->>U: Sidebar appears (RTL/LTR aware)
U->>TV: Click backdrop or press Esc
TV->>CS: isSidebarOpen = false
CS-->>TV: Sidebar hides
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/renderer/src/views/ChatTabView.vue (2)
92-92: Replace hardcoded string with i18n key.The hardcoded string
'New Chat'violates the i18n guidelines. All user-facing text must use translation keys from thevue-i18nframework.As per coding guidelines.
Apply this diff to use an i18n key:
- title.value = 'New Chat' + title.value = t('chat.newChat') // or appropriate i18n keyNote: You'll need to ensure the translation key exists in your i18n files (e.g.,
src/renderer/src/i18n).
11-64: Use English for comments.Several comments are written in Chinese (lines 11, 13, 16, 19, 26, 39, 48, 51, 64). According to the coding guidelines, all comments should be in English for consistency and maintainability.
As per coding guidelines.
Example translations:
- Line 11:
<!-- 主聊天区域 -->→<!-- Main chat area -->- Line 13:
<!-- 新会话 -->→<!-- New thread -->- Line 16:
<!-- 标题栏 -->→<!-- Title bar -->- Line 19:
<!-- 聊天内容区域 -->→<!-- Chat content area -->- Line 26:
<!-- 消息导航侧边栏 (大屏幕) -->→<!-- Message navigation sidebar (large screen) -->- Line 39:
<!-- 小屏幕模式下的消息导航侧边栏 -->→<!-- Message navigation sidebar for small screens -->- Line 48:
<!-- 背景遮罩 -->→<!-- Background overlay -->- Line 51:
<!-- 侧边栏 -->→<!-- Sidebar -->- Line 64:
<!-- Artifacts 预览区域 -->→<!-- Artifacts preview area -->
🧹 Nitpick comments (8)
src/renderer/src/events.ts (1)
127-131: Narrow event type with literal typing (as const).Helps maintain strict typing of event values and prevents accidental widening.
export const THREAD_VIEW_EVENTS = { TOGGLE: 'thread-view:toggle' -} +} as constsrc/renderer/src/components/TitleView.vue (1)
2-11: Add accessible labels and i18n to the icon-only button.Provide aria labels and pressed state; use vue-i18n.
- <div class="flex items-center justify-end w-full p-2"> + <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 }" + :aria-label="t('titleView.messageNavigation')" + :title="t('titleView.messageNavigation')" + :aria-pressed="chatStore.isMessageNavigationOpen" @click="onMessageNavigationButtonClick" > - <Icon icon="lucide:list" class="w-4 h-4" /> + <Icon icon="lucide:list" class="w-4 h-4" aria-hidden="true" focusable="false" /> </Button> </div>Add i18n in script (outside changed lines):
import { useI18n } from 'vue-i18n' const { t } = useI18n()Please add the translation key: titleView.messageNavigation.
src/renderer/shell/components/AppBar.vue (2)
78-84: Add accessible labels and i18n to the new history toggle button.Improves a11y and follows i18n guideline for user-facing strings.
- <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" + :aria-label="t('appBar.threadHistory')" + :title="t('appBar.threadHistory')" > - <Icon icon="lucide:history" class="w-4 h-4" /> + <Icon icon="lucide:history" class="w-4 h-4" aria-hidden="true" focusable="false" /> </Button>Please add the translation key: appBar.threadHistory.
173-187: Toggle handler looks good; minor logging polish optional.Current try/catch is fine. Optionally include windowId in the warning messages to aid debugging.
src/renderer/src/App.vue (2)
169-176: Await navigation when toggling from non-chat routes.Avoids timing races; adds error handling.
-const handleThreadViewToggle = () => { - if (router.currentRoute.value.name !== 'chat') { - void router.push({ name: 'chat' }) - chatStore.isSidebarOpen = true - return - } - chatStore.isSidebarOpen = !chatStore.isSidebarOpen -} +const handleThreadViewToggle = async () => { + if (router.currentRoute.value.name !== 'chat') { + try { + await router.push({ name: 'chat' }) + chatStore.isSidebarOpen = true + } catch (error) { + console.error('Failed to navigate to chat for thread view toggle:', error) + } + return + } + chatStore.isSidebarOpen = !chatStore.isSidebarOpen +}
339-339: Consider lazy‑loading ThreadView to reduce initial bundle size.Define the component with defineAsyncComponent and dynamic import.
Outside-changes snippet:
import { defineAsyncComponent } from 'vue' const ThreadView = defineAsyncComponent(() => import('@/components/ThreadView.vue'))src/renderer/src/components/ThreadView.vue (2)
21-26: Add ARIA semantics to the sidebar panel.Improve a11y: mark as dialog, modal, and label via i18n.
- <div + <div v-if="chatStore.isSidebarOpen" - class="h-full w-60 max-w-60 shadow-lg border-r border-border bg-bg-card" + class="h-full w-60 max-w-60 shadow-lg border-r border-border bg-bg-card" + role="dialog" + aria-modal="true" + :aria-label="t('threadView.title')" > <ThreadsView class="h-full" /> </div>Add i18n in script (outside changed lines):
import { useI18n } from 'vue-i18n' const { t } = useI18n()Please add the translation key: threadView.title.
47-51: Prevent global ESC handler from closing the window when the sidebar is open.Stop propagation/default when handling Escape locally.
const handleKeydown = (event: KeyboardEvent) => { if (event.key === 'Escape' && chatStore.isSidebarOpen) { - closeSidebar() + event.preventDefault() + event.stopImmediatePropagation?.() + closeSidebar() } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/renderer/shell/components/AppBar.vue(3 hunks)src/renderer/src/App.vue(6 hunks)src/renderer/src/components/ThreadView.vue(1 hunks)src/renderer/src/components/ThreadsView.vue(0 hunks)src/renderer/src/components/TitleView.vue(1 hunks)src/renderer/src/events.ts(1 hunks)src/renderer/src/views/ChatTabView.vue(2 hunks)
💤 Files with no reviewable changes (1)
- src/renderer/src/components/ThreadsView.vue
🧰 Additional context used
📓 Path-based instructions (19)
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/App.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.Use Pinia for frontend state management (do not introduce alternative state libraries)
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/{src,shell,floating}/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Files:
src/renderer/src/App.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
src/renderer/src/App.vuesrc/renderer/src/events.tssrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/App.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/TitleView.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
**/*.{js,jsx,ts,tsx}: Use OxLint for JS/TS code; pre-commit hooks run lint-staged and typecheck
Use camelCase for variables and functions
Use PascalCase for types and classes
Use SCREAMING_SNAKE_CASE for constants
Files:
src/renderer/src/events.ts
src/{main,renderer}/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/renderer/src/events.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/renderer/src/events.ts
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/ThreadView.vuesrc/renderer/src/components/TitleView.vue
src/renderer/shell/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep shell UI code in src/renderer/shell/
Files:
src/renderer/shell/components/AppBar.vue
🧠 Learnings (1)
📚 Learning: 2025-07-21T01:45:54.229Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/electron-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:45:54.229Z
Learning: Applies to src/main/presenter/index.ts : The IPC messages from the main process to notify the view mainly rely on the EventBus index.ts to listen for events that need to be notified and then send them to the renderer through the mainWindow
Applied to files:
src/renderer/src/App.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (4)
src/renderer/src/App.vue (2)
237-238: LGTM: IPC listener wiring for thread view toggle.Listener registration aligns with event namespace and is cleaned up on unmount.
281-282: LGTM: Closing sidebar when leaving chat route.Prevents stray sidebar state across routes.
src/renderer/src/views/ChatTabView.vue (2)
52-52: LGTM: Simplified sidebar wrapper structure.The removal of the ref attribute aligns with the elimination of external-click handling logic, simplifying the component structure as intended by this PR.
73-73: LGTM: Import cleanup aligns with refactoring.The removal of
onClickOutsidefrom imports correctly reflects the elimination of external-click handling logic for sidebars.
Summary by CodeRabbit
New Features
Refactor