107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { Link, useMatches } from '@tanstack/react-router'
|
|
import { route } from '@/constants/routes'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useModelProvider } from '@/hooks/useModelProvider'
|
|
|
|
const menuSettings = [
|
|
{
|
|
title: 'common.general',
|
|
route: route.settings.general,
|
|
},
|
|
{
|
|
title: 'common.appearance',
|
|
route: route.settings.appearance,
|
|
},
|
|
{
|
|
title: 'common.privacy',
|
|
route: route.settings.privacy,
|
|
},
|
|
{
|
|
title: 'common.keyboardShortcuts',
|
|
route: route.settings.shortcuts,
|
|
},
|
|
{
|
|
title: 'Hardware',
|
|
route: route.settings.hardware,
|
|
},
|
|
{
|
|
title: 'MCP Servers',
|
|
route: route.settings.mcp_servers,
|
|
},
|
|
{
|
|
title: 'Local API Server',
|
|
route: route.settings.local_api_server,
|
|
},
|
|
{
|
|
title: 'HTTPS Proxy',
|
|
route: route.settings.https_proxy,
|
|
},
|
|
{
|
|
title: 'Extensions',
|
|
route: route.settings.extensions,
|
|
},
|
|
]
|
|
|
|
const SettingsMenu = () => {
|
|
const { t } = useTranslation()
|
|
const { providers } = useModelProvider()
|
|
const firstItemProvider =
|
|
providers.length > 0 ? providers[0].provider : 'llama.cpp'
|
|
const matches = useMatches()
|
|
const isActive = matches.some(
|
|
(match) =>
|
|
match.routeId === '/settings/providers/$providerName' &&
|
|
'providerName' in match.params
|
|
)
|
|
|
|
return (
|
|
<div className="flex h-full w-44 shrink-0 px-1.5 pt-3 border-r border-main-view-fg/5">
|
|
<div className="flex flex-col gap-1 w-full text-main-view-fg/90 font-medium">
|
|
{menuSettings.map((menu, index) => {
|
|
// Render the menu item
|
|
const menuItem = (
|
|
<Link
|
|
key={menu.title}
|
|
to={menu.route}
|
|
className="block px-2 gap-1.5 cursor-pointer hover:bg-main-view-fg/5 py-1 w-full rounded [&.active]:bg-main-view-fg/5"
|
|
>
|
|
<span className="text-main-view-fg/80">{t(menu.title)}</span>
|
|
</Link>
|
|
)
|
|
|
|
if (index === 2) {
|
|
return (
|
|
<div key={menu.title}>
|
|
<span className="mb-1 block">{menuItem}</span>
|
|
|
|
{/* Model Providers Link with default parameter */}
|
|
{isActive ? (
|
|
<div className="block px-2 mt-1 gap-1.5 py-1 w-full rounded bg-main-view-fg/5 cursor-pointer">
|
|
<span>{t('common.modelProviders')}</span>
|
|
</div>
|
|
) : (
|
|
<Link
|
|
key="common.modelProviders"
|
|
to={route.settings.providers}
|
|
params={{ providerName: firstItemProvider }}
|
|
className="block px-2 gap-1.5 cursor-pointer hover:bg-main-view-fg/5 py-1 w-full rounded"
|
|
>
|
|
<span className="text-main-view-fg/80">
|
|
{t('common.modelProviders')}
|
|
</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// For other menu items, just render them normally
|
|
return menuItem
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SettingsMenu
|