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

Add side bar inset to home page. Simplify automations card.

Browse Source
This commit is contained in:
sabaimran
2024-12-20 11:37:23 -08:00
parent b8a9dcd600
commit 7770caa793
3 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/interface/web/app/automations/page.tsx
View File

@@ -395,13 +395,13 @@ function AutomationsCard(props: AutomationsCardProps) {
</CardContent> </CardContent>
<CardFooter className="flex flex-col items-start md:flex-row md:justify-between md:items-center gap-2"> <CardFooter className="flex flex-col items-start md:flex-row md:justify-between md:items-center gap-2">
<div className="flex gap-2"> <div className="flex gap-2">
<div className="flex items-center bg-blue-50 rounded-lg p-1.5 border-blue-200 border dark:bg-blue-800 dark:border-blue-500"> <div className="flex items-center rounded-lg p-1.5 border-blue-200 border dark:border-blue-500">
<CalendarCheck className="h-4 w-4 mr-2 text-blue-700 dark:text-blue-300" /> <CalendarCheck className="h-4 w-4 mr-2 text-blue-700 dark:text-blue-300" />
<div className="text-s text-blue-700 dark:text-blue-300"> <div className="text-s text-blue-700 dark:text-blue-300">
{timeRecurrence} {timeRecurrence}
</div> </div>
</div> </div>
<div className="flex items-center bg-purple-50 rounded-lg p-1.5 border-purple-200 border dark:bg-purple-800 dark:border-purple-500"> <div className="flex items-center rounded-lg p-1.5 border-purple-200 border dark:border-purple-500">
<ClockAfternoon className="h-4 w-4 mr-2 text-purple-700 dark:text-purple-300" /> <ClockAfternoon className="h-4 w-4 mr-2 text-purple-700 dark:text-purple-300" />
<div className="text-s text-purple-700 dark:text-purple-300"> <div className="text-s text-purple-700 dark:text-purple-300">
{intervalString} {intervalString}

2
src/interface/web/app/page.module.css
View File

@@ -1,5 +1,5 @@
div.main { div.main {
height: 100dvh; height: 100%;
color: hsla(var(--foreground)); color: hsla(var(--foreground));
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

44
src/interface/web/app/page.tsx
View File

@@ -34,8 +34,10 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { AgentCard } from "@/app/components/agentCard/agentCard"; import { AgentCard } from "@/app/components/agentCard/agentCard";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import LoginPopup from "./components/loginPrompt/loginPopup"; import LoginPopup from "./components/loginPrompt/loginPopup";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "./components/appSidebar/appSidebar"; import { AppSidebar } from "./components/appSidebar/appSidebar";
import { Separator } from "@/components/ui/separator";
import { KhojLogoType } from "./components/logo/khojLogo";
interface ChatBodyDataProps { interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null; chatOptionsData: ChatOptions | null;
@@ -461,23 +463,33 @@ export default function Home() {
return ( return (
<SidebarProvider> <SidebarProvider>
<AppSidebar conversationId={conversationId} /> <AppSidebar conversationId={conversationId} />
<SidebarTrigger /> <SidebarInset>
<div className={`${styles.main} ${styles.chatLayout}`}> <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<title>Khoj AI - Your Second Brain</title> <SidebarTrigger className="-ml-1" />
<div className={`${styles.chatBox}`}> <Separator orientation="vertical" className="mr-2 h-4" />
<div className={`${styles.chatBoxBody}`}> {isMobileWidth ? (
<ChatBodyData <KhojLogoType className="h-auto w-16" />
isLoggedIn={authenticatedData !== null} ) : (
chatOptionsData={chatOptionsData} <h2 className="text-lg">Ask Anything</h2>
setUploadedFiles={setUploadedFiles} )}
isMobileWidth={isMobileWidth} </header>
onConversationIdChange={handleConversationIdChange} <div className={`${styles.main} ${styles.chatLayout}`}>
userConfig={userConfig} <title>Khoj AI - Your Second Brain</title>
isLoadingUserConfig={isLoadingUserConfig} <div className={`${styles.chatBox}`}>
/> <div className={`${styles.chatBoxBody}`}>
<ChatBodyData
isLoggedIn={authenticatedData !== null}
chatOptionsData={chatOptionsData}
setUploadedFiles={setUploadedFiles}
isMobileWidth={isMobileWidth}
onConversationIdChange={handleConversationIdChange}
userConfig={userConfig}
isLoadingUserConfig={isLoadingUserConfig}
/>
</div>
</div> </div>
</div> </div>
</div> </SidebarInset>
</SidebarProvider> </SidebarProvider>
); );
} }