refactor(ChatNavbar, Navbar): simplify toggle functions and remove unused fullscreen hook

- Removed unnecessary useCallback functions for toggling assistants and topics, directly using the toggle functions instead.
- Eliminated the unused fullscreen hook import to clean up the code.
- Updated click handlers in the Navbar components for better readability and efficiency.
This commit is contained in:
kangfenmao 2025-07-24 17:53:10 +08:00
parent d302785241
commit ce93104e2d
3 changed files with 11 additions and 47 deletions

View File

@ -2,7 +2,6 @@ import { NavbarHeader } from '@renderer/components/app/Navbar'
import { HStack } from '@renderer/components/Layout' import { HStack } from '@renderer/components/Layout'
import SearchPopup from '@renderer/components/Popups/SearchPopup' import SearchPopup from '@renderer/components/Popups/SearchPopup'
import { useAssistant } from '@renderer/hooks/useAssistant' import { useAssistant } from '@renderer/hooks/useAssistant'
import { useFullscreen } from '@renderer/hooks/useFullscreen'
import { modelGenerating } from '@renderer/hooks/useRuntime' import { modelGenerating } from '@renderer/hooks/useRuntime'
import { useSettings } from '@renderer/hooks/useSettings' import { useSettings } from '@renderer/hooks/useSettings'
import { useShortcut } from '@renderer/hooks/useShortcuts' import { useShortcut } from '@renderer/hooks/useShortcuts'
@ -14,7 +13,7 @@ import { Assistant, Topic } from '@renderer/types'
import { Tooltip } from 'antd' import { Tooltip } from 'antd'
import { t } from 'i18next' import { t } from 'i18next'
import { Menu, PanelLeftClose, PanelRightClose, Search } from 'lucide-react' import { Menu, PanelLeftClose, PanelRightClose, Search } from 'lucide-react'
import { FC, useCallback } from 'react' import { FC } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import AssistantsDrawer from './components/AssistantsDrawer' import AssistantsDrawer from './components/AssistantsDrawer'
@ -32,29 +31,11 @@ interface Props {
const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTopic, setActiveTopic }) => { const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTopic, setActiveTopic }) => {
const { assistant } = useAssistant(activeAssistant.id) const { assistant } = useAssistant(activeAssistant.id)
const { showAssistants, toggleShowAssistants } = useShowAssistants() const { showAssistants, toggleShowAssistants } = useShowAssistants()
const isFullscreen = useFullscreen()
const { topicPosition, narrowMode } = useSettings() const { topicPosition, narrowMode } = useSettings()
const { showTopics, toggleShowTopics } = useShowTopics() const { showTopics, toggleShowTopics } = useShowTopics()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
// Function to toggle assistants with cooldown useShortcut('toggle_show_assistants', toggleShowAssistants)
const handleToggleShowAssistants = useCallback(() => {
if (showAssistants) {
toggleShowAssistants()
} else {
toggleShowAssistants()
}
}, [showAssistants, toggleShowAssistants])
const handleToggleShowTopics = useCallback(() => {
if (showTopics) {
toggleShowTopics()
} else {
toggleShowTopics()
}
}, [showTopics, toggleShowTopics])
useShortcut('toggle_show_assistants', handleToggleShowAssistants)
useShortcut('toggle_show_topics', () => { useShortcut('toggle_show_topics', () => {
if (topicPosition === 'right') { if (topicPosition === 'right') {
@ -87,7 +68,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
<HStack alignItems="center"> <HStack alignItems="center">
{showAssistants && ( {showAssistants && (
<Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={0.8}> <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={0.8}>
<NavbarIcon onClick={handleToggleShowAssistants}> <NavbarIcon onClick={toggleShowAssistants}>
<PanelLeftClose size={18} /> <PanelLeftClose size={18} />
</NavbarIcon> </NavbarIcon>
</Tooltip> </Tooltip>
@ -120,14 +101,14 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
</Tooltip> </Tooltip>
{topicPosition === 'right' && !showTopics && ( {topicPosition === 'right' && !showTopics && (
<Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}> <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
<NavbarIcon onClick={() => toggleShowTopics()}> <NavbarIcon onClick={toggleShowTopics}>
<PanelLeftClose size={18} /> <PanelLeftClose size={18} />
</NavbarIcon> </NavbarIcon>
</Tooltip> </Tooltip>
)} )}
{topicPosition === 'right' && showTopics && ( {topicPosition === 'right' && showTopics && (
<Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}> <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}>
<NavbarIcon onClick={() => handleToggleShowTopics()}> <NavbarIcon onClick={toggleShowTopics}>
<PanelRightClose size={18} /> <PanelRightClose size={18} />
</NavbarIcon> </NavbarIcon>
</Tooltip> </Tooltip>

View File

@ -15,7 +15,7 @@ import { Assistant, Topic } from '@renderer/types'
import { Tooltip } from 'antd' import { Tooltip } from 'antd'
import { t } from 'i18next' import { t } from 'i18next'
import { Menu, MessageSquareDiff, PanelLeftClose, PanelRightClose, Search } from 'lucide-react' import { Menu, MessageSquareDiff, PanelLeftClose, PanelRightClose, Search } from 'lucide-react'
import { FC, useCallback } from 'react' import { FC } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import AssistantsDrawer from './components/AssistantsDrawer' import AssistantsDrawer from './components/AssistantsDrawer'
@ -38,24 +38,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
const { showTopics, toggleShowTopics } = useShowTopics() const { showTopics, toggleShowTopics } = useShowTopics()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
// Function to toggle assistants with cooldown useShortcut('toggle_show_assistants', toggleShowAssistants)
const handleToggleShowAssistants = useCallback(() => {
if (showAssistants) {
toggleShowAssistants()
} else {
toggleShowAssistants()
}
}, [showAssistants, toggleShowAssistants])
const handleToggleShowTopics = useCallback(() => {
if (showTopics) {
toggleShowTopics()
} else {
toggleShowTopics()
}
}, [showTopics, toggleShowTopics])
useShortcut('toggle_show_assistants', handleToggleShowAssistants)
useShortcut('toggle_show_topics', () => { useShortcut('toggle_show_topics', () => {
if (topicPosition === 'right') { if (topicPosition === 'right') {
@ -88,7 +71,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
{showAssistants && ( {showAssistants && (
<NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: 0 }}> <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: 0 }}>
<Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={0.8}> <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={0.8}>
<NavbarIcon onClick={handleToggleShowAssistants} style={{ marginLeft: isMac && !isFullscreen ? 16 : 0 }}> <NavbarIcon onClick={toggleShowAssistants} style={{ marginLeft: isMac && !isFullscreen ? 16 : 0 }}>
<PanelLeftClose size={18} /> <PanelLeftClose size={18} />
</NavbarIcon> </NavbarIcon>
</Tooltip> </Tooltip>
@ -131,14 +114,14 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
</Tooltip> </Tooltip>
{topicPosition === 'right' && !showTopics && ( {topicPosition === 'right' && !showTopics && (
<Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}> <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
<NavbarIcon onClick={() => toggleShowTopics()}> <NavbarIcon onClick={toggleShowTopics}>
<PanelLeftClose size={18} /> <PanelLeftClose size={18} />
</NavbarIcon> </NavbarIcon>
</Tooltip> </Tooltip>
)} )}
{topicPosition === 'right' && showTopics && ( {topicPosition === 'right' && showTopics && (
<Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}> <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}>
<NavbarIcon onClick={() => handleToggleShowTopics()}> <NavbarIcon onClick={toggleShowTopics}>
<PanelRightClose size={18} /> <PanelRightClose size={18} />
</NavbarIcon> </NavbarIcon>
</Tooltip> </Tooltip>

View File

@ -145,8 +145,8 @@ const TranslateSettings: FC<{
providers={providers} providers={providers}
predicate={modelPredicate} predicate={modelPredicate}
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder={t('translate.settings.model_placeholder')}
value={defaultTranslateModel} value={defaultTranslateModel}
placeholder={t('settings.models.empty')}
onChange={(value) => { onChange={(value) => {
const selectedModel = find(allModels, JSON.parse(value)) as Model const selectedModel = find(allModels, JSON.parse(value)) as Model
if (selectedModel) { if (selectedModel) {