klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 13:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update the agents page with new UX (#850)

Browse Source 
- Use icons/colors for setting the styling of agents
- Update automations page to use the shadcn cards: https://github.com/shadcn-ui/ui
This commit is contained in:
sabaimran
2024-07-15 21:40:55 -07:00
committed by GitHub
parent 1c6ed9bc6d
commit c837f3779e
12 changed files with 395 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/interface/web/app/components/navMenu/navMenu.tsx
View File

@@ -40,6 +40,7 @@ export default function NavMenu(props: NavMenuProps) {
const [isMobileWidth, setIsMobileWidth] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [initialLoadDone, setInitialLoadDone] = useState(false);
useEffect(() => {
setIsMobileWidth(window.innerWidth < 768);
@@ -62,13 +63,26 @@ export default function NavMenu(props: NavMenuProps) {
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark');
setDarkMode(true);
} else if (mq.matches) {
document.documentElement.classList.add('dark');
setDarkMode(true);
} else if (localStorage.getItem('theme') === 'light') {
document.documentElement.classList.remove('dark');
setDarkMode(false);
} else {
const mq = window.matchMedia(
"(prefers-color-scheme: dark)"
);
if (mq.matches) {
document.documentElement.classList.add('dark');
setDarkMode(true);
}
}
setInitialLoadDone(true);
}, []);
useEffect(() => {
if (!initialLoadDone) return;
toggleDarkMode(darkMode);
}, [darkMode]);
@@ -128,17 +142,17 @@ export default function NavMenu(props: NavMenuProps) {
:
<Menubar className='items-top inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground'>
<MenubarMenu>
<Link href='/chat' target="_blank" rel="noreferrer" className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background`}>
<Link href='/chat' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background`}>
<MenubarTrigger>Chat</MenubarTrigger>
</Link>
</MenubarMenu>
<MenubarMenu>
<Link href='/agents' target="_blank" rel="noreferrer" className={`${props.selected.toLowerCase() === 'agent' ? styles.selected : ''} hover:bg-background`}>
<Link href='/agents' className={`${props.selected.toLowerCase() === 'agent' ? styles.selected : ''} hover:bg-background`}>
<MenubarTrigger>Agents</MenubarTrigger>
</Link>
</MenubarMenu>
<MenubarMenu>
<Link href='/automations' target="_blank" rel="noreferrer" className={`${props.selected.toLowerCase() === 'automations' ? styles.selected : ''} hover:bg-background`}>
<Link href='/automations' className={`${props.selected.toLowerCase() === 'automations' ? styles.selected : ''} hover:bg-background`}>
<MenubarTrigger>Automations</MenubarTrigger>
</Link>
</MenubarMenu>