mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-04 05:39:06 +00:00
Use the new shadcn sidebar for khoj nav and actions
- Use the sidebar across all pages to quickly navigate through the app, access settings, and go to past chats - Pending: mobile friendliness
This commit is contained in:
sabaimran
@@ -66,8 +66,9 @@ import LoginPrompt from "../components/loginPrompt/loginPrompt";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { ToastAction } from "@/components/ui/toast";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import SidePanel from "../components/sidePanel/chatHistorySidePanel";
|
||||
import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
|
||||
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
|
||||
import { AppSidebar } from "../components/appSidebar/appSidebar";
|
||||
|
||||
const automationsFetcher = () =>
|
||||
window
|
||||
@@ -1023,94 +1024,106 @@ export default function Automations() {
|
||||
return <InlineLoading message="Oops, something went wrong. Please refresh the page." />;
|
||||
|
||||
return (
|
||||
<main className={`w-full mx-auto`}>
|
||||
<div className={`grid w-full mx-auto`}>
|
||||
<div className={`${styles.sidePanel} top-0`}>
|
||||
<SidePanel
|
||||
conversationId={null}
|
||||
uploadedFiles={[]}
|
||||
isMobileWidth={isMobileWidth}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.pageLayout} w-full`}>
|
||||
<div className="pt-6 md:pt-8 grid gap-1 md:flex md:justify-between">
|
||||
<h1 className="text-3xl flex items-center">Automations</h1>
|
||||
<div className="flex flex-wrap gap-2 items-center justify-start">
|
||||
<SidebarProvider>
|
||||
<AppSidebar conversationId={""} />
|
||||
<SidebarTrigger />
|
||||
<main className={`w-full mx-auto`}>
|
||||
<div className={`grid w-full mx-auto`}>
|
||||
<div className={`${styles.pageLayout} w-full`}>
|
||||
<div className="pt-6 md:pt-8 grid gap-1 md:flex md:justify-between">
|
||||
<h1 className="text-3xl flex items-center">Automations</h1>
|
||||
<div className="flex flex-wrap gap-2 items-center justify-start">
|
||||
{authenticatedData ? (
|
||||
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
|
||||
<Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
|
||||
{authenticatedData.email}
|
||||
</span>
|
||||
) : null}
|
||||
{locationData && (
|
||||
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
|
||||
<MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" />
|
||||
{locationData
|
||||
? `${locationData.city}, ${locationData.country}`
|
||||
: "Unknown"}
|
||||
</span>
|
||||
)}
|
||||
{locationData && (
|
||||
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
|
||||
<Clock className="h-4 w-4 mr-2 inline text-green-500" />
|
||||
{locationData ? `${locationData.timezone}` : "Unknown"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
loginRedirectMessage={
|
||||
"Create an account to make your own automation"
|
||||
}
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={isMobileWidth}
|
||||
/>
|
||||
)}
|
||||
<Alert className="bg-secondary border-none my-4">
|
||||
<AlertDescription>
|
||||
<Lightning
|
||||
weight={"fill"}
|
||||
className="h-4 w-4 text-purple-400 inline"
|
||||
/>
|
||||
<span className="font-bold">How it works</span> Automations help you
|
||||
structure your time by automating tasks you do regularly. Build your
|
||||
own, or try out our presets. Get results straight to your inbox.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex justify-between items-center py-4">
|
||||
{authenticatedData ? (
|
||||
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
|
||||
<Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
|
||||
{authenticatedData.email}
|
||||
</span>
|
||||
) : null}
|
||||
{locationData && (
|
||||
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
|
||||
<MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" />
|
||||
{locationData
|
||||
? `${locationData.city}, ${locationData.country}`
|
||||
: "Unknown"}
|
||||
</span>
|
||||
)}
|
||||
{locationData && (
|
||||
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
|
||||
<Clock className="h-4 w-4 mr-2 inline text-green-500" />
|
||||
{locationData ? `${locationData.timezone}` : "Unknown"}
|
||||
</span>
|
||||
<AutomationComponentWrapper
|
||||
isMobileWidth={isMobileWidth}
|
||||
callToAction="Create Automation"
|
||||
createNew={true}
|
||||
setIsCreating={setIsCreating}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
setNewAutomationData={setNewAutomationData}
|
||||
authenticatedData={authenticatedData}
|
||||
isCreating={isCreating}
|
||||
ipLocationData={locationData}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
className="shadow-sm"
|
||||
onClick={() => setShowLoginPrompt(true)}
|
||||
variant={"outline"}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create Automation
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
loginRedirectMessage={"Create an account to make your own automation"}
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={isMobileWidth}
|
||||
/>
|
||||
)}
|
||||
<Alert className="bg-secondary border-none my-4">
|
||||
<AlertDescription>
|
||||
<Lightning weight={"fill"} className="h-4 w-4 text-purple-400 inline" />
|
||||
<span className="font-bold">How it works</span> Automations help you
|
||||
structure your time by automating tasks you do regularly. Build your
|
||||
own, or try out our presets. Get results straight to your inbox.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex justify-between items-center py-4">
|
||||
{authenticatedData ? (
|
||||
<AutomationComponentWrapper
|
||||
<Suspense>
|
||||
<SharedAutomationCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
callToAction="Create Automation"
|
||||
createNew={true}
|
||||
setIsCreating={setIsCreating}
|
||||
authenticatedData={authenticatedData}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
setNewAutomationData={setNewAutomationData}
|
||||
authenticatedData={authenticatedData}
|
||||
isCreating={isCreating}
|
||||
ipLocationData={locationData}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
className="shadow-sm"
|
||||
onClick={() => setShowLoginPrompt(true)}
|
||||
variant={"outline"}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create Automation
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Suspense>
|
||||
<SharedAutomationCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
authenticatedData={authenticatedData}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
setNewAutomationData={setNewAutomationData}
|
||||
/>
|
||||
</Suspense>
|
||||
{isLoading && <InlineLoading message="booting up your automations" />}
|
||||
<div className={`${styles.automationsLayout}`}>
|
||||
{personalAutomations &&
|
||||
personalAutomations.map((automation) => (
|
||||
</Suspense>
|
||||
{isLoading && <InlineLoading message="booting up your automations" />}
|
||||
<div className={`${styles.automationsLayout}`}>
|
||||
{personalAutomations &&
|
||||
personalAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
/>
|
||||
))}
|
||||
{allNewAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
key={automation.id}
|
||||
@@ -1121,36 +1134,26 @@ export default function Automations() {
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
/>
|
||||
))}
|
||||
{allNewAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-xl py-4">Explore</h3>
|
||||
<div className={`${styles.automationsLayout}`}>
|
||||
{suggestedAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
setNewAutomationData={setNewAutomationData}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
suggestedCard={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-xl py-4">Explore</h3>
|
||||
<div className={`${styles.automationsLayout}`}>
|
||||
{suggestedAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
setNewAutomationData={setNewAutomationData}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
suggestedCard={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user