merged

1 files changed, 78 insertions, 56 deletions

diff --git a/apps/web/app/(dash)/(memories)/content.tsx b/apps/web/app/(dash)/(memories)/content.tsx
index 5d81e823..0f83d0fc 100644
--- a/apps/web/app/(dash)/(memories)/content.tsx
+++ b/apps/web/app/(dash)/(memories)/content.tsx
@@ -37,7 +37,22 @@ import { toast } from "sonner";
 import { Input } from "@repo/ui/shadcn/input";
 import { motion } from "framer-motion";
 import { useSearchParams } from "next/navigation";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@repo/ui/shadcn/alert-dialog";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@repo/ui/shadcn/alert-dialog";
+import {
+	BookOpenIcon,
+	DocumentTextIcon,
+	FolderIcon,
+} from "@heroicons/react/24/outline";
 
 type TMemoriesPage = {
 	memoriesAndSpaces: { memories: Content[]; spaces: StoredSpace[] };
@@ -154,9 +169,24 @@ export function MemoriesPage({
 				</h2>
 			</div>
 
+			<div className="flex justify-between w-full">
+				<Filters
+					setFilter={setFilter}
+					filter={filter}
+					filterMethods={
+						currentSpace ? SpaceFilterMethods : MemoriesFilterMethods
+					}
+				/>
+				<button
+					onClick={handleExport}
+					className={`transition px-4 py-2 rounded-lg text-[#B3BCC5] bg-secondary hover:bg-secondary hover:text-[#76a3cc]`}
+				>
+					JSON Export
+				</button>
+			</div>
+
 			{currentSpace && (
 				<div className="flex flex-col gap-2">
-
 					{usersWithAccess && usersWithAccess.length > 0 && (
 						<div className="flex gap-4 items-center">
 							Users with access
@@ -204,22 +234,6 @@ export function MemoriesPage({
 				</div>
 			)}
 
-			<div className="flex justify-between w-full">
-				<Filters
-					setFilter={setFilter}
-					filter={filter}
-					filterMethods={
-						currentSpace ? SpaceFilterMethods : MemoriesFilterMethods
-					}
-				/>
-				<button
-					onClick={handleExport}
-					className={`transition px-4 py-2 rounded-lg text-[#B3BCC5] bg-secondary hover:bg-secondary hover:text-[#76a3cc]`}
-				>
-					JSON Export
-				</button>
-			</div>
-
 			<Masonry
 				className="mt-6 relative"
 				columns={{ 640: 1, 768: 2, 1024: 3 }}
@@ -280,9 +294,9 @@ function SpaceComponent({
 	handleDeleteSpace: (id: number) => void;
 }) {
 	return (
-		<div className="flex group flex-col gap-4 bg-[#161f2a]/25 backdrop-blur-md border-[1px] shadow-md border-border w-full rounded-xl p-4">
+		<div className="flex group flex-col gap-4 bg-[#161f2a]/25 backdrop-blur-md border-[1px] shadow-md border-border w-full rounded-xl py-4 px-6">
 			<div className="flex items-center gap-2 text-xs">
-				<Image alt="Spaces icon" src={MemoriesIcon} className="size-3" /> Space
+				<FolderIcon className="h-4" /> Space
 			</div>
 
 			<div>
@@ -290,12 +304,7 @@ function SpaceComponent({
 					href={`/space/${id}`}
 					className="flex items-center justify-between w-full"
 				>
-					<div>
-						<div className="h-12 w-12 flex justify-center items-center rounded-md">
-							{title.slice(0, 2).toUpperCase()}{id}
-						</div>
-					</div>
-					<div className="grow px-2">
+					<div className="grow">
 						<div className="text-lg text-[#fff] line-clamp-2">{title}</div>
 						<div>{description}</div>
 					</div>
@@ -303,9 +312,12 @@ function SpaceComponent({
 						<Image src={NextIcon} alt="Search icon" />
 					</div>
 				</Link>
-				<div className="absolute z-40 right-3 top-3 opacity-0 group-hover:opacity-100 hover:text-red-600">
-
-				<SpaceDeleteAlert onClick={()=> {handleDeleteSpace(id)}} />
+				<div className="absolute z-40 right-5 top-4 opacity-0 group-hover:opacity-100 hover:text-red-600">
+					<SpaceDeleteAlert
+						onClick={() => {
+							handleDeleteSpace(id);
+						}}
+					/>
 				</div>
 			</div>
 		</div>
@@ -344,7 +356,7 @@ function MemoryComponent({
 				{type === "page" ? (
 					<>
 						<div className="flex items-center gap-2 text-xs">
-							<PaperclipIcon className="w-3 h-3" /> Page
+							<DocumentTextIcon className="w-3 h-3" /> Page
 						</div>
 						{/* remove `<---chunkId: ${vector.id}\n${content}\n---->` pattern from title */}
 						<div className="text-lg text-[#fff] mt-4 line-clamp-2">
@@ -357,7 +369,7 @@ function MemoryComponent({
 				) : type === "note" ? (
 					<>
 						<div className="flex items-center gap-2 text-xs">
-							<NotebookIcon className="w-3 h-3" /> Note
+							<BookOpenIcon className="h-4" /> Note
 						</div>
 						<div className="text-lg text-[#fff] mt-4 line-clamp-2">
 							{title.replace(/(<---chunkId: .*?\n.*?\n---->)/g, "")}
@@ -442,38 +454,48 @@ function Filters({
 		<div className="flex gap-3 flex-wrap">
 			{filterMethods.map((i) => {
 				return (
-					<button
-						onClick={() => setFilter(i)}
-						className={`transition px-4 py-2 shadow-md rounded-lg bg-border ${i === filter ? " text-[#369DFD]" : "text-[#B3BCC5] bg-secondary drop-shadow-md hover:bg-secondary hover:text-[#76a3cc]"}`}
-					>
-						{i}
-					</button>
+					<div className="relative">
+						<button
+							onClick={() => setFilter(i)}
+							className={`transition px-4 py-2   ${i === filter ? " text-[#369DFD]" : "text-[#B3BCC5]"}`}
+						>
+							{i}
+						</button>
+						{i === filter && (
+							<motion.div
+								layoutId="bg"
+								className="bg-secondary shadow-md drop-shadow-md rounded-lg z-[-1] absolute h-full w-full top-0 left-0"
+							></motion.div>
+						)}
+					</div>
 				);
 			})}
 		</div>
 	);
 }
 
-function SpaceDeleteAlert({onClick}: {onClick: ()=> void}){
+function SpaceDeleteAlert({ onClick }: { onClick: () => void }) {
 	return (
 		<AlertDialog>
-  <AlertDialogTrigger>					<TrashIcon
-						className="w-4 cursor-pointer"
-					/></AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>
-        This is irreversible. This will delete the space and all memories inside it.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction onClick={onClick}>Delete</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-	)
+			<AlertDialogTrigger>
+				{" "}
+				<TrashIcon className="w-4 cursor-pointer" />
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This is irreversible. This will delete the space and all memories
+						inside it.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction onClick={onClick}>Delete</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 }
 
-export default MemoriesPage;
\ No newline at end of file
+export default MemoriesPage;