Skip to content

Commit

Permalink
UX improvements (#179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adityanandanx
adityanandanx authored May 27, 2023
1 parent 655f07d commit 3ee6968
Show file tree
Hide file tree
Showing 8 changed files with 78 additions and 76 deletions.
14 changes: 9 additions & 5 deletions frontend/app/components/NavBar/NavItems.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import { useSupabase } from "@/app/supabase-provider";
import { cn } from "@/lib/utils";
import Link from "next/link";
Expand All @@ -12,6 +13,7 @@ interface NavItemsProps extends HTMLAttributes<HTMLUListElement> {
const NavItems: FC<NavItemsProps> = ({ className, setOpen, ...props }) => {
const { session } = useSupabase();
const isUserLoggedIn = session?.user !== undefined;
const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
return (
<ul
className={cn(
Expand All @@ -20,7 +22,7 @@ const NavItems: FC<NavItemsProps> = ({ className, setOpen, ...props }) => {
)}
{...props}
>
{process.env.NEXT_PUBLIC_ENV === "local" ? (
{isLocal ? (
<>
<NavLink setOpen={setOpen} to="/upload">
Upload
Expand All @@ -43,15 +45,17 @@ const NavItems: FC<NavItemsProps> = ({ className, setOpen, ...props }) => {
</>
)}
<div className="flex sm:flex-1 sm:justify-end flex-col items-center justify-center sm:flex-row gap-5 sm:gap-2">
<Link href={"https://try-quivr.streamlit.app"}>
<Button variant={"secondary"}>Try Demo</Button>
</Link>
<DarkModeToggle />
{isUserLoggedIn && (
<Link href={"/logout"}>
<Button variant={"secondary"}>Logout</Button>
</Link>
)}
{!isLocal && (
<Link href={"https://try-quivr.streamlit.app"}>
<Button variant={"secondary"}>Try Demo</Button>
</Link>
)}
<DarkModeToggle />
</div>
</ul>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/components/ui/PageHeading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ interface PageHeadingProps {

const PageHeading: FC<PageHeadingProps> = ({ title, subtitle }) => {
return (
<div className="flex flex-col items-center justify-center">
<div className="flex flex-col items-center justify-center px-5">
<h1 className="text-3xl font-bold text-center">{title}</h1>
{subtitle && <h2 className="opacity-50">{subtitle}</h2>}
{subtitle && <h2 className="opacity-50 text-center">{subtitle}</h2>}
</div>
);
};
Expand Down
4 changes: 4 additions & 0 deletions frontend/app/explore/DocumentItem/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import Spinner from "@/app/components/ui/Spinner";
import { useSupabase } from "@/app/supabase-provider";
import { useToast } from "@/lib/hooks/useToast";
import axios from "axios";
import { Dispatch, SetStateAction, Suspense, useState } from "react";
import Button from "../../components/ui/Button";
Expand All @@ -16,6 +17,7 @@ interface DocumentProps {

const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
const [isDeleting, setIsDeleting] = useState(false);
const { publish } = useToast();
const { session } = useSupabase();
if (!session) {
throw new Error("User session not found");
Expand All @@ -33,6 +35,7 @@ const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
}
);
setDocuments((docs) => docs.filter((doc) => doc.name !== name)); // Optimistic update
publish({ variant: "success", text: `${name} deleted.` });
} catch (error) {
console.error(`Error deleting ${name}`, error);
}
Expand All @@ -44,6 +47,7 @@ const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
initial={{ x: -64, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 64, opacity: 0 }}
layout
className="flex flex-col sm:flex-row sm:items-center justify-between w-full p-5 gap-5"
>
<p className="text-lg leading-tight max-w-sm">{document.name}</p>
Expand Down
10 changes: 5 additions & 5 deletions frontend/app/explore/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import axios from "axios";
import { AnimatePresence } from "framer-motion";
import { AnimatePresence, motion } from "framer-motion";
import Link from "next/link";
import { redirect } from "next/navigation";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -46,7 +46,7 @@ export default function ExplorePage() {
return (
<main>
<section className="w-full outline-none pt-32 flex flex-col gap-5 items-center justify-center p-6">
<div className="flex flex-col items-center justify-center my-10">
<div className="flex flex-col items-center justify-center">
<h1 className="text-3xl font-bold text-center">
Explore uploaded data
</h1>
Expand All @@ -57,9 +57,9 @@ export default function ExplorePage() {
{isPending ? (
<Spinner />
) : (
<div className="w-full max-w-xl flex flex-col gap-5">
<motion.div layout className="w-full max-w-xl flex flex-col gap-5">
{documents.length !== 0 ? (
<AnimatePresence>
<AnimatePresence mode="popLayout">
{documents.map((document) => (
<DocumentItem
key={document.name}
Expand All @@ -76,7 +76,7 @@ export default function ExplorePage() {
</Link>
</div>
)}
</div>
</motion.div>
)}
</section>
</main>
Expand Down
10 changes: 5 additions & 5 deletions frontend/app/upload/components/Crawler/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ export const Crawler = (): JSX.Element => {
const { urlInputRef, isCrawling, crawlWebsite } = useCrawler();
return (
<div className="w-full">
<div className="flex justify-center gap-5">
<div className="w-1/2">
<div className="flex-column justify-center gap-5">
<Card className="h-32 flex justify-center items-center">
<div className="text-center mt-2 p-6 max-w-sm w-full flex flex-col gap-5 items-center">
<div className="flex justify-center gap-5 px-6">
<div className="max-w-xl w-full">
<div className="flex-col justify-center gap-5">
<Card className="h-32 flex gap-5 justify-center items-center px-5">
<div className="text-center max-w-sm w-full flex flex-col gap-5 items-center">
<Field
name="crawlurl"
ref={urlInputRef}
Expand Down
27 changes: 12 additions & 15 deletions frontend/app/upload/components/FileUploader/components/FileComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,11 @@ export const FileComponent = ({
initial={{ x: "-10%", opacity: 0 }}
animate={{ x: "0%", opacity: 1 }}
exit={{ x: "10%", opacity: 0 }}
className="flex flex-row gap-1 py-2 dark:bg-black border-b border-black/10 dark:border-white/25 leading-none px-6"
layout
className="relative flex flex-row gap-1 py-2 dark:bg-black border-b last:border-none border-black/10 dark:border-white/25 leading-none px-6 overflow-hidden"
>
<div className="flex flex-1">
<div className="flex flex flex-col">
<div className="flex flex-col">
<span className="overflow-ellipsis overflow-hidden whitespace-nowrap">
{file.name}
</span>
Expand All @@ -26,19 +27,15 @@ export const FileComponent = ({
</span>
</div>
</div>
<div className="flex w-5">
<button
role="remove file"
className="text-xl text-red-500 text-ellipsis"
onClick={() =>
setFiles((files) =>
files.filter((f) => f.name !== file.name || f.size !== file.size)
)
}
>
<MdClose />
</button>
</div>
<button
role="remove file"
className="text-xl text-red-500 text-ellipsis absolute top-0 h-full right-0 flex items-center justify-center bg-white dark:bg-black p-3 shadow-md aspect-square"
onClick={() =>
setFiles((files) => files.filter((f) => f.name !== file.name))
}
>
<MdClose />
</button>
</motion.div>
);
};
83 changes: 40 additions & 43 deletions frontend/app/upload/components/FileUploader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,52 +21,49 @@ export const FileUploader = (): JSX.Element => {
return (
<section
{...getRootProps()}
className="w-full outline-none flex flex-col gap-5 items-center justify-center p-6"
className="w-full outline-none flex flex-col gap-10 items-center justify-center px-6 py-3"
>
<div className="w-full">
<div className="flex justify-center gap-5">
{/* Assign a width of 50% to each card */}
<div className="w-1/2">
<Card className="h-52 flex justify-center items-center">
<input {...getInputProps()} />
<div className="text-center mt-2 p-6 max-w-sm w-full flex flex-col gap-5 items-center">
{isDragActive ? (
<p className="text-blue-600">Drop the files here...</p>
) : (
<button
onClick={open}
className="opacity-50 h-full cursor-pointer hover:opacity-100 hover:underline transition-opacity"
>
Drag and drop files here, or click to browse
</button>
)}
</div>
</Card>
</div>

{files.length > 0 && (
<div className="w-1/2">
<Card className="h-52 py-3 overflow-y-auto">
{files.length > 0 ? (
<AnimatePresence>
{files.map((file) => (
<FileComponent
key={file.name + file.size}
file={file}
setFiles={setFiles}
/>
))}
</AnimatePresence>
) : null}
</Card>
<div className="flex flex-col sm:flex-row max-w-3xl w-full items-center gap-5">
<div className="flex-1 w-full">
<Card className="h-52 flex justify-center items-center">
<input {...getInputProps()} />
<div className="text-center p-6 max-w-sm w-full flex flex-col gap-5 items-center">
{isDragActive ? (
<p className="text-blue-600">Drop the files here...</p>
) : (
<button
onClick={open}
className="opacity-50 h-full cursor-pointer hover:opacity-100 hover:underline transition-opacity"
>
Drag and drop files here, or click to browse
</button>
)}
</div>
)}
</div>
<div className="flex flex-col items-center justify-center mt-5">
<Button isLoading={isPending} onClick={uploadAllFiles}>
{isPending ? `Uploading ${files[pendingFileIndex].name}` : "Upload"}
</Button>
</Card>
</div>

{files.length > 0 && (
<div className="flex-1 w-full">
<Card className="h-52 py-3 overflow-y-auto">
{files.length > 0 ? (
<AnimatePresence mode="popLayout">
{files.map((file) => (
<FileComponent
key={file.name + file.size}
file={file}
setFiles={setFiles}
/>
))}
</AnimatePresence>
) : null}
</Card>
</div>
)}
</div>
<div className="flex flex-col items-center justify-center">
<Button isLoading={isPending} onClick={uploadAllFiles}>
{isPending ? `Uploading ${files[pendingFileIndex].name}` : "Upload"}
</Button>
</div>
</section>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/upload/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { FileUploader } from "./components/FileUploader";

export default function UploadPage() {
return (
<main className="pt-20">
<main className="pt-24">
<PageHeading
title="Upload Knowledge"
subtitle="Text, document, spreadsheet, presentation, audio, video, and URLs supported"
Expand Down

1 comment on commit 3ee6968

@vercel
Copy link

@vercel vercel bot commented on 3ee6968 May 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

quiver – ./

quiver-two.vercel.app
quiver-git-main-stangirard.vercel.app
quivr.app
www.quivr.app
quiver-stangirard.vercel.app

Please sign in to comment.