Format next.js web app with prettier

src/interface/web/app/search/layout.tsx

@@ -2,12 +2,12 @@ import type { Metadata } from "next";
 
 import "../globals.css";
 
-
 export const metadata: Metadata = {
     title: "Khoj AI - Search",
-    description: "Find anything in documents you've shared with Khoj using natural language queries.",
+    description:
+        "Find anything in documents you've shared with Khoj using natural language queries.",
     icons: {
-        icon: '/static/favicon.ico',
+        icon: "/static/favicon.ico",
     },
 };
 
@@ -16,9 +16,5 @@ export default function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    return (
-        <div>
-            {children}
-        </div>
-    );
+    return <div>{children}</div>;
 }

src/interface/web/app/search/page.tsx

@@ -1,16 +1,36 @@
-'use client'
+"use client";
 
-import { Input } from '@/components/ui/input';
+import { Input } from "@/components/ui/input";
 
-import { useAuthenticatedData } from '../common/auth';
-import { useEffect, useRef, useState } from 'react';
-import SidePanel from '../components/sidePanel/chatHistorySidePanel';
-import styles from './search.module.css';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { ArrowLeft, ArrowRight, FileDashed, FileMagnifyingGlass, Folder, FolderOpen, GithubLogo, Lightbulb, LinkSimple, MagnifyingGlass, NoteBlank, NotionLogo } from '@phosphor-icons/react';
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
+import { useAuthenticatedData } from "../common/auth";
+import { useEffect, useRef, useState } from "react";
+import SidePanel from "../components/sidePanel/chatHistorySidePanel";
+import styles from "./search.module.css";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import {
+    ArrowLeft,
+    ArrowRight,
+    FileDashed,
+    FileMagnifyingGlass,
+    Folder,
+    FolderOpen,
+    GithubLogo,
+    Lightbulb,
+    LinkSimple,
+    MagnifyingGlass,
+    NoteBlank,
+    NotionLogo,
+} from "@phosphor-icons/react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 interface AdditionalData {
     file: string;
@@ -28,13 +48,13 @@ interface SearchResult {
 }
 
 function getNoteTypeIcon(source: string) {
-    if (source === 'notion') {
-        return <NotionLogo className='text-muted-foreground' />;
+    if (source === "notion") {
+        return <NotionLogo className="text-muted-foreground" />;
     }
-    if (source === 'github') {
-        return <GithubLogo className='text-muted-foreground' />;
+    if (source === "github") {
+        return <GithubLogo className="text-muted-foreground" />;
     }
-    return <NoteBlank className='text-muted-foreground' />;
+    return <NoteBlank className="text-muted-foreground" />;
 }
 
 const naturalLanguageSearchQueryExamples = [
@@ -54,7 +74,7 @@ const naturalLanguageSearchQueryExamples = [
     "Fish farming Kenya 2021",
     "How to make a cake without an oven",
     "Installing a solar panel at home",
-]
+];
 
 interface NoteResultProps {
     note: SearchResult;
@@ -63,69 +83,80 @@ interface NoteResultProps {
 
 function Note(props: NoteResultProps) {
     const note = props.note;
-    const isFileNameURL = (note.additional.file || '').startsWith('http');
-    const fileName = isFileNameURL ? note.additional.heading : note.additional.file.split('/').pop();
+    const isFileNameURL = (note.additional.file || "").startsWith("http");
+    const fileName = isFileNameURL
+        ? note.additional.heading
+        : note.additional.file.split("/").pop();
 
     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>
-                <CardDescription className='p-1 border-muted border w-fit rounded-lg mb-2'>
+                <CardDescription className="p-1 border-muted border w-fit rounded-lg mb-2">
                     {getNoteTypeIcon(note.additional.source)}
                 </CardDescription>
-                <CardTitle>
-                    {fileName}
-                </CardTitle>
+                <CardTitle>{fileName}</CardTitle>
             </CardHeader>
             <CardContent>
-                <div className='line-clamp-4 text-muted-foreground'>
-                    {note.entry}
-                </div>
-                <Button onClick={() => props.setFocusSearchResult(note)} variant={'ghost'} className='p-0 mt-2 text-orange-400 hover:bg-inherit'>
-                    See content<ArrowRight className='inline ml-2' />
+                <div className="line-clamp-4 text-muted-foreground">{note.entry}</div>
+                <Button
+                    onClick={() => props.setFocusSearchResult(note)}
+                    variant={"ghost"}
+                    className="p-0 mt-2 text-orange-400 hover:bg-inherit"
+                >
+                    See content
+                    <ArrowRight className="inline ml-2" />
                 </Button>
             </CardContent>
             <CardFooter>
-                {
-                    isFileNameURL ?
-                        <a href={note.additional.file} target="_blank" className='underline text-sm bg-muted p-1 rounded-lg text-muted-foreground'>
-                            <LinkSimple className='inline m-2' />{note.additional.file}
-                        </a>
-                        :
-                        <div className='bg-muted p-1 text-sm rounded-lg text-muted-foreground'>
-                            <FolderOpen className='inline m-2' />{note.additional.file}
-                        </div>
-                }
+                {isFileNameURL ? (
+                    <a
+                        href={note.additional.file}
+                        target="_blank"
+                        className="underline text-sm bg-muted p-1 rounded-lg text-muted-foreground"
+                    >
+                        <LinkSimple className="inline m-2" />
+                        {note.additional.file}
+                    </a>
+                ) : (
+                    <div className="bg-muted p-1 text-sm rounded-lg text-muted-foreground">
+                        <FolderOpen className="inline m-2" />
+                        {note.additional.file}
+                    </div>
+                )}
             </CardFooter>
         </Card>
     );
 }
 
 function focusNote(note: SearchResult) {
-    const isFileNameURL = (note.additional.file || '').startsWith('http');
-    const fileName = isFileNameURL ? note.additional.heading : note.additional.file.split('/').pop();
+    const isFileNameURL = (note.additional.file || "").startsWith("http");
+    const fileName = isFileNameURL
+        ? note.additional.heading
+        : note.additional.file.split("/").pop();
     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>
-                <CardTitle>
-                    {fileName}
-                </CardTitle>
+                <CardTitle>{fileName}</CardTitle>
             </CardHeader>
             <CardFooter>
-                {
-                    isFileNameURL ?
-                        <a href={note.additional.file} target="_blank" className='underline text-sm bg-muted p-3 rounded-lg text-muted-foreground flex items-center gap-2'>
-                            <LinkSimple className='inline' />{note.additional.file}
-                        </a>
-                        :
-                        <div className='bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2'>
-                            <FolderOpen className='inline' />{note.additional.file}
-                        </div>
-                }
+                {isFileNameURL ? (
+                    <a
+                        href={note.additional.file}
+                        target="_blank"
+                        className="underline text-sm bg-muted p-3 rounded-lg text-muted-foreground flex items-center gap-2"
+                    >
+                        <LinkSimple className="inline" />
+                        {note.additional.file}
+                    </a>
+                ) : (
+                    <div className="bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2">
+                        <FolderOpen className="inline" />
+                        {note.additional.file}
+                    </div>
+                )}
             </CardFooter>
             <CardContent>
-                <div className='text-m'>
-                    {note.entry}
-                </div>
+                <div className="text-m">{note.entry}</div>
             </CardContent>
         </Card>
     );
@@ -133,29 +164,31 @@ function focusNote(note: SearchResult) {
 
 export default function Search() {
     const authenticatedData = useAuthenticatedData();
-    const [searchQuery, setSearchQuery] = useState('');
+    const [searchQuery, setSearchQuery] = useState("");
     const [isMobileWidth, setIsMobileWidth] = useState(false);
-    const [title, setTitle] = useState('Search');
+    const [title, setTitle] = useState("Search");
     const [searchResults, setSearchResults] = useState<SearchResult[] | null>(null);
     const [searchResultsLoading, setSearchResultsLoading] = useState(false);
     const [focusSearchResult, setFocusSearchResult] = useState<SearchResult | null>(null);
-    const [exampleQuery, setExampleQuery] = useState('');
+    const [exampleQuery, setExampleQuery] = useState("");
     const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-
     useEffect(() => {
         setIsMobileWidth(window.innerWidth < 786);
 
-        window.addEventListener('resize', () => {
+        window.addEventListener("resize", () => {
             setIsMobileWidth(window.innerWidth < 786);
         });
 
-        setExampleQuery(naturalLanguageSearchQueryExamples[Math.floor(Math.random() * naturalLanguageSearchQueryExamples.length)]);
-
+        setExampleQuery(
+            naturalLanguageSearchQueryExamples[
+                Math.floor(Math.random() * naturalLanguageSearchQueryExamples.length)
+            ],
+        );
     }, []);
 
     useEffect(() => {
-        setTitle(isMobileWidth ? '' : 'Search');
+        setTitle(isMobileWidth ? "" : "Search");
     }, [isMobileWidth]);
 
     function search() {
@@ -163,16 +196,18 @@ export default function Search() {
 
         const apiUrl = `/api/search?q=${encodeURIComponent(searchQuery)}&client=web`;
         fetch(apiUrl, {
-            method: 'GET',
+            method: "GET",
             headers: {
-                'Content-Type': 'application/json',
-            }
-        }).then(response => response.json())
-            .then(data => {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
                 setSearchResults(data);
                 setSearchResultsLoading(false);
-            }).catch((error) => {
-                console.error('Error:', error);
+            })
+            .catch((error) => {
+                console.error("Error:", error);
             });
     }
 
@@ -198,99 +233,104 @@ export default function Search() {
                 clearTimeout(searchTimeoutRef.current);
             }
         };
-
     }, [searchQuery]);
 
     return (
         <div>
             <div className={`h-full ${styles.sidePanel}`}>
-                <SidePanel
-                    conversationId={null}
-                    uploadedFiles={[]}
-                    isMobileWidth={isMobileWidth}
-                />
+                <SidePanel conversationId={null} uploadedFiles={[]} isMobileWidth={isMobileWidth} />
             </div>
             <div className={`${styles.searchLayout}`}>
                 <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='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
-                            <MagnifyingGlass className='inline m-2 h-4 w-4' />
+                    <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">
+                            <MagnifyingGlass className="inline m-2 h-4 w-4" />
                             <Input
                                 autoFocus={true}
-                                className='border-none'
+                                className="border-none"
                                 onChange={(e) => setSearchQuery(e.currentTarget.value)}
-                                onKeyDown={(e) => e.key === 'Enter' && search()}
+                                onKeyDown={(e) => e.key === "Enter" && search()}
                                 type="search"
-                                placeholder="Search Documents" />
-                            <button className='px-4 rounded' onClick={() => search()}>
+                                placeholder="Search Documents"
+                            />
+                            <button className="px-4 rounded" onClick={() => search()}>
                                 Find
                             </button>
                         </div>
-                        {
-                            focusSearchResult &&
-                            <div className='mt-4'>
-                                <Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
-                                    <ArrowLeft className='inline mr-2' />
+                        {focusSearchResult && (
+                            <div className="mt-4">
+                                <Button
+                                    onClick={() => setFocusSearchResult(null)}
+                                    className="mb-4"
+                                    variant={"outline"}
+                                >
+                                    <ArrowLeft className="inline mr-2" />
                                     Back
                                 </Button>
                                 {focusNote(focusSearchResult)}
                             </div>
-                        }
-                        {
-                            !focusSearchResult && searchResults && searchResults.length > 0 &&
-                            <div className='mt-4 max-w-[92vw] break-all'>
+                        )}
+                        {!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} />
-                                            );
-                                        })
-                                    }
+                                    {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' />
+                        )}
+                        {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'>
+                                    <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 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' />
+                        )}
+                        {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'>
+                                    <CardTitle className="text-center">
                                         No documents found
                                     </CardTitle>
                                 </CardHeader>
                                 <CardContent>
-                                    <div className='text-muted-foreground items-center justify-center text-center flex'>
+                                    <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'>
+                                    <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">
                                             Learn More
                                         </div>
                                     </Link>
                                 </CardContent>
                             </Card>
-                        }
+                        )}
                     </div>
                 </div>
             </div>