Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: relayout menu left panel setting page

Browse Source
This commit is contained in:
Faisal Amir 2024-01-17 21:22:40 +07:00
parent 87f621129e
commit 334baed782
2 changed files with 10 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/screens/Settings/Appearance/index.tsx
View File

@ -9,7 +9,9 @@ export default function AppearanceOptions() {
<h6 className="text-sm font-semibold capitalize"> <h6 className="text-sm font-semibold capitalize">
Base color scheme Base color scheme
</h6> </h6>
<p className="leading-relaxed ">Choose between light and dark modes.</p> <p className="leading-relaxed ">
Choose between light and dark modes.
</p>
</div> </div>
<ToggleTheme /> <ToggleTheme />
</div> </div>

49
web/screens/Settings/index.tsx
View File

@ -17,18 +17,17 @@ import Models from '@/screens/Settings/Models'
import { formatExtensionsName } from '@/utils/converter' import { formatExtensionsName } from '@/utils/converter'
const SettingsScreen = () => { const SettingsScreen = () => {
const [activeStaticMenu, setActiveStaticMenu] = useState('Appearance') const [activeStaticMenu, setActiveStaticMenu] = useState('My Models')
const [menus, setMenus] = useState<any[]>([]) const [menus, setMenus] = useState<any[]>([])
const [preferenceItems, setPreferenceItems] = useState<any[]>([]) const [preferenceItems, setPreferenceItems] = useState<any[]>([])
const [preferenceValues, setPreferenceValues] = useState<any[]>([]) const [preferenceValues, setPreferenceValues] = useState<any[]>([])
useEffect(() => { useEffect(() => {
const menu = ['Appearance'] const menu = ['My Models', 'My Settings', 'Advanced Settings']
if (typeof window !== 'undefined' && window.electronAPI) { if (typeof window !== 'undefined' && window.electronAPI) {
menu.push('Extensions') menu.push('Extensions')
} }
menu.push('Advanced')
setMenus(menu) setMenus(menu)
}, []) }, [])
@ -45,13 +44,13 @@ const SettingsScreen = () => {
case 'Extensions': case 'Extensions':
return <ExtensionCatalog /> return <ExtensionCatalog />
case 'Appearance': case 'My Settings':
return <AppearanceOptions /> return <AppearanceOptions />
case 'Advanced': case 'Advanced Settings':
return <Advanced /> return <Advanced />
case 'Models': case 'My Models':
return <Models /> return <Models />
default: default:
@ -69,12 +68,9 @@ const SettingsScreen = () => {
<div className="flex h-full bg-background"> <div className="flex h-full bg-background">
<div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border"> <div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
<ScrollArea className="h-full w-full"> <ScrollArea className="h-full w-full">
<div className="p-4"> <div className="px-6 py-4">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<label className="font-bold uppercase text-muted-foreground"> <div className="font-medium">
General
</label>
<div className="mt-2 font-medium">
{menus.map((menu, i) => { {menus.map((menu, i) => {
const isActive = activeStaticMenu === menu const isActive = activeStaticMenu === menu
return ( return (
@ -140,37 +136,6 @@ const SettingsScreen = () => {
})} })}
</div> </div>
</div> </div>
<div className="flex-shrink-0">
<label className="font-bold uppercase text-muted-foreground">
Core extensions
</label>
<div className="mt-2 font-medium">
<div className="relative my-0.5 block py-1.5">
<div
onClick={() => {
setActiveStaticMenu('Models')
setActivePreferenceExtension('')
}}
className="block w-full cursor-pointer"
>
<span
className={twMerge(
activeStaticMenu === 'Models' && 'relative z-10'
)}
>
Models
</span>
</div>
{activeStaticMenu === 'Models' && (
<m.div
className="absolute inset-0 -left-3 h-full w-[calc(100%+24px)] rounded-md bg-primary/50"
layoutId="active-static-core-extentions"
/>
)}
</div>
</div>
</div>
</div> </div>
</ScrollArea> </ScrollArea>
</div> </div>