mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-07 21:29:13 +00:00
Add side bar to search page
This commit is contained in:
sabaimran
@@ -29,6 +29,8 @@ import { Button } from "@/components/ui/button";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { getIconFromFilename } from "../common/iconUtils";
|
import { getIconFromFilename } from "../common/iconUtils";
|
||||||
import { useIsMobileWidth } from "../common/utils";
|
import { useIsMobileWidth } from "../common/utils";
|
||||||
|
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
|
||||||
|
import { AppSidebar } from "../components/appSidebar/appSidebar";
|
||||||
|
|
||||||
interface AdditionalData {
|
interface AdditionalData {
|
||||||
file: string;
|
file: string;
|
||||||
@@ -226,104 +228,108 @@ export default function Search() {
|
|||||||
}, [searchQuery]);
|
}, [searchQuery]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<SidebarProvider>
|
||||||
<div className={`${styles.searchLayout}`}>
|
<AppSidebar conversationId={""} />
|
||||||
<div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
|
<SidebarTrigger />
|
||||||
<div className="p-4 md:w-3/4 sm:w-full mx-auto">
|
<div>
|
||||||
<div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
|
<div className={`${styles.searchLayout}`}>
|
||||||
<Input
|
<div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
|
||||||
autoFocus={true}
|
<div className="p-4 md:w-3/4 sm:w-full mx-auto">
|
||||||
className="border-none pl-4"
|
<div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
|
||||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
<Input
|
||||||
onKeyDown={(e) => e.key === "Enter" && search()}
|
autoFocus={true}
|
||||||
type="search"
|
className="border-none pl-4"
|
||||||
placeholder="Search Documents"
|
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||||
/>
|
onKeyDown={(e) => e.key === "Enter" && search()}
|
||||||
<button
|
type="search"
|
||||||
className="px-2 gap-2 inline-flex items-center rounded border-l border-gray-300 hover:text-gray-500"
|
placeholder="Search Documents"
|
||||||
onClick={() => search()}
|
/>
|
||||||
>
|
<button
|
||||||
<MagnifyingGlass className="h-4 w-4" />
|
className="px-2 gap-2 inline-flex items-center rounded border-l border-gray-300 hover:text-gray-500"
|
||||||
<span>Find</span>
|
onClick={() => search()}
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{focusSearchResult && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<Button
|
|
||||||
onClick={() => setFocusSearchResult(null)}
|
|
||||||
className="mb-4"
|
|
||||||
variant={"outline"}
|
|
||||||
>
|
>
|
||||||
<ArrowLeft className="inline mr-2" />
|
<MagnifyingGlass className="h-4 w-4" />
|
||||||
Back
|
<span>Find</span>
|
||||||
</Button>
|
</button>
|
||||||
{focusNote(focusSearchResult)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
{focusSearchResult && (
|
||||||
{!focusSearchResult && searchResults && searchResults.length > 0 && (
|
<div className="mt-4">
|
||||||
<div className="mt-4 max-w-[92vw] break-all">
|
<Button
|
||||||
<ScrollArea className="h-[80vh]">
|
onClick={() => setFocusSearchResult(null)}
|
||||||
{searchResults.map((result, index) => {
|
className="mb-4"
|
||||||
return (
|
variant={"outline"}
|
||||||
<Note
|
|
||||||
key={result["corpus-id"]}
|
|
||||||
note={result}
|
|
||||||
setFocusSearchResult={setFocusSearchResult}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{searchResults == null && (
|
|
||||||
<Card className="flex flex-col items-center justify-center border-none shadow-none">
|
|
||||||
<CardHeader className="flex flex-col items-center justify-center">
|
|
||||||
<CardDescription className="border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4">
|
|
||||||
<FileMagnifyingGlass
|
|
||||||
weight="fill"
|
|
||||||
className="text-muted-foreground h-10 w-10"
|
|
||||||
/>
|
|
||||||
</CardDescription>
|
|
||||||
<CardTitle className="text-center">
|
|
||||||
Search across your documents
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="text-muted-foreground items-center justify-center text-center flex">
|
|
||||||
<Lightbulb className="inline mr-2" /> {exampleQuery}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
{searchResults && searchResults.length === 0 && (
|
|
||||||
<Card className="flex flex-col items-center justify-center border-none shadow-none">
|
|
||||||
<CardHeader className="flex flex-col items-center justify-center">
|
|
||||||
<CardDescription className="border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4">
|
|
||||||
<FileDashed
|
|
||||||
weight="fill"
|
|
||||||
className="text-muted-foreground h-10 w-10"
|
|
||||||
/>
|
|
||||||
</CardDescription>
|
|
||||||
<CardTitle className="text-center">
|
|
||||||
No documents found
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-muted-foreground items-center justify-center text-center flex">
|
|
||||||
To use search, upload your docs to your account.
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href="https://docs.khoj.dev/data-sources/share_your_data"
|
|
||||||
className="no-underline"
|
|
||||||
>
|
>
|
||||||
<div className="mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg">
|
<ArrowLeft className="inline mr-2" />
|
||||||
Learn More
|
Back
|
||||||
|
</Button>
|
||||||
|
{focusNote(focusSearchResult)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!focusSearchResult && searchResults && searchResults.length > 0 && (
|
||||||
|
<div className="mt-4 max-w-[92vw] break-all">
|
||||||
|
<ScrollArea className="h-[80vh]">
|
||||||
|
{searchResults.map((result, index) => {
|
||||||
|
return (
|
||||||
|
<Note
|
||||||
|
key={result["corpus-id"]}
|
||||||
|
note={result}
|
||||||
|
setFocusSearchResult={setFocusSearchResult}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{searchResults == null && (
|
||||||
|
<Card className="flex flex-col items-center justify-center border-none shadow-none">
|
||||||
|
<CardHeader className="flex flex-col items-center justify-center">
|
||||||
|
<CardDescription className="border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4">
|
||||||
|
<FileMagnifyingGlass
|
||||||
|
weight="fill"
|
||||||
|
className="text-muted-foreground h-10 w-10"
|
||||||
|
/>
|
||||||
|
</CardDescription>
|
||||||
|
<CardTitle className="text-center">
|
||||||
|
Search across your documents
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-muted-foreground items-center justify-center text-center flex">
|
||||||
|
<Lightbulb className="inline mr-2" /> {exampleQuery}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
{searchResults && searchResults.length === 0 && (
|
||||||
|
<Card className="flex flex-col items-center justify-center border-none shadow-none">
|
||||||
|
<CardHeader className="flex flex-col items-center justify-center">
|
||||||
|
<CardDescription className="border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4">
|
||||||
|
<FileDashed
|
||||||
|
weight="fill"
|
||||||
|
className="text-muted-foreground h-10 w-10"
|
||||||
|
/>
|
||||||
|
</CardDescription>
|
||||||
|
<CardTitle className="text-center">
|
||||||
|
No documents found
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-muted-foreground items-center justify-center text-center flex">
|
||||||
|
To use search, upload your docs to your account.
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
<Link
|
||||||
</CardContent>
|
href="https://docs.khoj.dev/data-sources/share_your_data"
|
||||||
</Card>
|
className="no-underline"
|
||||||
)}
|
>
|
||||||
|
<div className="mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg">
|
||||||
|
Learn More
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</SidebarProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user