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

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

View File

@@ -395,13 +395,13 @@ function AutomationsCard(props: AutomationsCardProps) {
</CardContent>
<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 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" />
<div className="text-s text-blue-700 dark:text-blue-300">
{timeRecurrence}
</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" />
<div className="text-s text-purple-700 dark:text-purple-300">
{intervalString}

View File

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

View File

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