sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use file icon associated with search page results. Improve search bar

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-08-05 19:24:39 +05:30
parent 4258392fc7
commit ec106d743d
1 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/interface/web/app/search/page.tsx
View file

@ -20,8 +20,6 @@ import {
ArrowRight, ArrowRight,
FileDashed, FileDashed,
FileMagnifyingGlass, FileMagnifyingGlass,
Folder,
FolderOpen,
GithubLogo, GithubLogo,
Lightbulb, Lightbulb,
LinkSimple, LinkSimple,
@ -31,6 +29,7 @@ import {
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import Link from "next/link"; import Link from "next/link";
import { getIconFromFilename } from "../common/iconUtils";
interface AdditionalData { interface AdditionalData {
file: string; file: string;
@ -87,14 +86,15 @@ function Note(props: NoteResultProps) {
const fileName = isFileNameURL const fileName = isFileNameURL
? note.additional.heading ? note.additional.heading
: note.additional.file.split("/").pop(); : note.additional.file.split("/").pop();
const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2");
return ( return (
<Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4"> <Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4">
<CardHeader> <CardHeader>
<CardDescription className="p-1 border-muted border w-fit rounded-lg mb-2"> <CardTitle className="inline-flex gap-2">
{getNoteTypeIcon(note.additional.source)} {getNoteTypeIcon(note.additional.source)}
</CardDescription> {fileName}
<CardTitle>{fileName}</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="line-clamp-4 text-muted-foreground">{note.entry}</div> <div className="line-clamp-4 text-muted-foreground">{note.entry}</div>
@ -118,8 +118,8 @@ function Note(props: NoteResultProps) {
{note.additional.file} {note.additional.file}
</a> </a>
) : ( ) : (
<div className="bg-muted p-1 text-sm rounded-lg text-muted-foreground"> <div className="bg-muted p-2 text-sm rounded-lg text-muted-foreground">
<FolderOpen className="inline m-2" /> {fileIcon}
{note.additional.file} {note.additional.file}
</div> </div>
)} )}
@ -133,6 +133,8 @@ function focusNote(note: SearchResult) {
const fileName = isFileNameURL const fileName = isFileNameURL
? note.additional.heading ? note.additional.heading
: note.additional.file.split("/").pop(); : note.additional.file.split("/").pop();
const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2");
return ( return (
<Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4"> <Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4">
<CardHeader> <CardHeader>
@ -150,7 +152,7 @@ function focusNote(note: SearchResult) {
</a> </a>
) : ( ) : (
<div className="bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2"> <div className="bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2">
<FolderOpen className="inline" /> {fileIcon}
{note.additional.file} {note.additional.file}
</div> </div>
)} )}
@ -243,18 +245,21 @@ export default function Search() {
<div className={`${styles.searchLayout}`}> <div className={`${styles.searchLayout}`}>
<div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8"> <div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
<div className="p-4 md:w-3/4 sm:w-full mx-auto"> <div className="p-4 md:w-3/4 sm:w-full mx-auto">
<div className="flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg"> <div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
<MagnifyingGlass className="inline m-2 h-4 w-4" />
<Input <Input
autoFocus={true} autoFocus={true}
className="border-none" className="border-none pl-4"
onChange={(e) => setSearchQuery(e.currentTarget.value)} onChange={(e) => setSearchQuery(e.currentTarget.value)}
onKeyDown={(e) => e.key === "Enter" && search()} onKeyDown={(e) => e.key === "Enter" && search()}
type="search" type="search"
placeholder="Search Documents" placeholder="Search Documents"
/> />
<button className="px-4 rounded" onClick={() => search()}> <button
Find className="px-2 gap-2 inline-flex items-center rounded border-l border-gray-300 hover:text-gray-500"
onClick={() => search()}
>
<MagnifyingGlass className="h-4 w-4" />
<span>Find</span>
</button> </button>
</div> </div>
{focusSearchResult && ( {focusSearchResult && (