why is this novel shit broke

3 files changed, 160 insertions, 468 deletions

diff --git a/apps/web/app/(dash)/dialogContentContainer.tsx b/apps/web/app/(dash)/dialogContentContainer.tsx
deleted file mode 100644
index 0b2b615c..00000000
--- a/apps/web/app/(dash)/dialogContentContainer.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { StoredSpace } from "@repo/db/schema";
-import { useEffect, useMemo, useState } from "react";
-import { createMemory, createSpace } from "../actions/doers";
-import ComboboxWithCreate from "@repo/ui/shadcn/combobox";
-import { toast } from "sonner";
-import { getSpaces } from "../actions/fetchers";
-import { MinusIcon, PlusCircleIcon } from "lucide-react";
-import {
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@repo/ui/shadcn/dialog";
-import { Label } from "@repo/ui/shadcn/label";
-import { Textarea } from "@repo/ui/shadcn/textarea";
-import { Button } from "@repo/ui/shadcn/button";
-
-export function DialogContentContainer({
-	DialogClose,
-}: {
-	DialogClose: () => void;
-}) {
-	const [spaces, setSpaces] = useState<StoredSpace[]>([]);
-	const [content, setContent] = useState("");
-	const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
-
-	const options = useMemo(
-		() =>
-			spaces.map((x) => ({
-				label: x.name,
-				value: x.id.toString(),
-			})),
-		[spaces],
-	);
-
-	const autoDetectedType = useMemo(() => {
-		if (content.length === 0) {
-			return "none";
-		}
-
-		if (
-			content.match(/https?:\/\/(x\.com|twitter\.com)\/[\w]+\/[\w]+\/[\d]+/)
-		) {
-			return "tweet";
-		} else if (content.match(/https?:\/\/[\w\.]+/)) {
-			return "page";
-		} else if (content.match(/https?:\/\/www\.[\w\.]+/)) {
-			return "page";
-		} else {
-			return "note";
-		}
-	}, [content]);
-
-	const handleSubmit = async (content?: string, spaces?: number[]) => {
-		DialogClose();
-
-		toast.info("Creating memory...", {
-			icon: <PlusCircleIcon className="w-4 h-4 text-white animate-spin" />,
-			duration: 7500,
-		});
-
-		if (!content || content.length === 0) {
-			toast.error("Content is required");
-			return;
-		}
-
-		console.log(spaces);
-
-		const cont = await createMemory({
-			content: content,
-			spaces: spaces ?? undefined,
-		});
-
-		setContent("");
-		setSelectedSpaces([]);
-	};
-
-	useEffect(() => {
-		(async () => {
-			let spaces = await getSpaces();
-
-			if (!spaces.success || !spaces.data) {
-				toast.warning("Unable to get spaces", {
-					richColors: true,
-				});
-				setSpaces([]);
-				return;
-			}
-			setSpaces(spaces.data);
-		})();
-	}, []);
-
-	return (
-		<DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
-			<form
-				action={async (e: FormData) => {
-					const content = e.get("content")?.toString();
-
-					await handleSubmit(content, selectedSpaces);
-				}}
-				className="flex flex-col gap-4 "
-			>
-				<DialogHeader>
-					<DialogTitle>Add memory</DialogTitle>
-					<DialogDescription className="text-[#F2F3F5]">
-						A "Memory" is a bookmark, something you want to remember.
-					</DialogDescription>
-				</DialogHeader>
-
-				<div>
-					<Label htmlFor="name">Resource (URL or content)</Label>
-					<Textarea
-						className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto  focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
-						id="content"
-						name="content"
-						rows={8}
-						placeholder="Start typing a note or paste a URL here. I'll remember it."
-						value={content}
-						onChange={(e) => setContent(e.target.value)}
-						onKeyDown={(e) => {
-							if (e.key === "Enter" && !e.shiftKey) {
-								e.preventDefault();
-								handleSubmit(content, selectedSpaces);
-							}
-						}}
-					/>
-				</div>
-
-				<div>
-					<Label className="space-y-1" htmlFor="space">
-						<h3 className="font-semibold text-lg tracking-tight">
-							Spaces (Optional)
-						</h3>
-						<p className="leading-normal text-[#F2F3F5] text-sm">
-							A space is a collection of memories. It's a way to organise your
-							memories.
-						</p>
-					</Label>
-
-					<ComboboxWithCreate
-						options={spaces.map((x) => ({
-							label: x.name,
-							value: x.id.toString(),
-						}))}
-						onSelect={(v) =>
-							setSelectedSpaces((prev) => {
-								if (v === "") {
-									return [];
-								}
-								return [...prev, parseInt(v)];
-							})
-						}
-						onSubmit={async (spaceName) => {
-							const space = options.find((x) => x.label === spaceName);
-							toast.info("Creating space...");
-
-							if (space) {
-								toast.error("A space with that name already exists.");
-							}
-
-							const creationTask = await createSpace(spaceName);
-							if (creationTask.success && creationTask.data) {
-								toast.success("Space created " + creationTask.data);
-								setSpaces((prev) => [
-									...prev,
-									{
-										name: spaceName,
-										id: creationTask.data!,
-										createdAt: new Date(),
-										user: null,
-										numItems: 0,
-									},
-								]);
-								setSelectedSpaces((prev) => [...prev, creationTask.data!]);
-							} else {
-								toast.error("Space creation failed: " + creationTask.error);
-							}
-						}}
-						placeholder="Select or create a new space."
-						className="bg-[#2F353C] h-min rounded-md mt-4 mb-4"
-					/>
-
-					<div>
-						{selectedSpaces.length > 0 && (
-							<div className="flex flex-row flex-wrap gap-0.5 h-min">
-								{[...new Set(selectedSpaces)].map((x, idx) => (
-									<button
-										key={x}
-										type="button"
-										onClick={() =>
-											setSelectedSpaces((prev) => prev.filter((y) => y !== x))
-										}
-										className={`relative group p-2 py-3 bg-[#3C464D] max-w-32 ${
-											idx === selectedSpaces.length - 1 ? "rounded-br-xl" : ""
-										}`}
-									>
-										<p className="line-clamp-1">
-											{spaces.find((y) => y.id === x)?.name}
-										</p>
-										<div className="absolute h-full right-0 top-0 p-1 opacity-0 group-hover:opacity-100 items-center">
-											<MinusIcon className="w-6 h-6 rounded-full bg-secondary" />
-										</div>
-									</button>
-								))}
-							</div>
-						)}
-					</div>
-				</div>
-
-				<DialogFooter>
-					<Button
-						disabled={autoDetectedType === "none"}
-						variant={"secondary"}
-						type="submit"
-					>
-						Save {autoDetectedType != "none" && autoDetectedType}
-					</Button>
-				</DialogFooter>
-			</form>
-		</DialogContent>
-	);
-}
diff --git a/apps/web/app/(dash)/dialogTriggerWrapper.tsx b/apps/web/app/(dash)/dialogTriggerWrapper.tsx
deleted file mode 100644
index 1e07e429..00000000
--- a/apps/web/app/(dash)/dialogTriggerWrapper.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { Dialog, DialogTrigger } from "@repo/ui/shadcn/dialog";
-import { useState } from "react";
-import { DialogContentContainer } from "./dialogContentContainer";
-import { PlusIcon } from "@heroicons/react/24/solid";
-
-export function DialogDesktopTrigger() {
-	return (
-		<DialogTriggerWrapper>
-			<div className="border-gray-700/50 border-[1px] space-y-4 group relative bg-secondary shadow-md shadow-[#1d1d1dc7] rounded-xl flex justify-center">
-				<button className="cursor-pointer p-2 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
-					<PlusIcon className="h-6 w-6" />
-				</button>
-				<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all  absolute whitespace-nowrap pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1 left-[120%] -top-2">
-					Add Memories
-				</div>
-			</div>
-		</DialogTriggerWrapper>
-	);
-}
-
-export function DialogMobileTrigger() {
-	return (
-		<DialogTriggerWrapper>
-			<div className={`flex flex-col items-center cursor-pointer text-white`}>
-				<PlusIcon className="h-6 w-6 hover:brightness-125 focus:brightness-125 duration-200 stroke-white" />
-				<p className="text-xs text-foreground-menu mt-2">Add</p>
-			</div>
-		</DialogTriggerWrapper>
-	);
-}
-export default function DialogTriggerWrapper({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	const [dialogOpen, setDialogOpen] = useState(false);
-
-	return (
-		<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-			<DialogTrigger>{children}</DialogTrigger>
-			<DialogContentContainer
-				DialogClose={() => {
-					setDialogOpen(false);
-				}}
-			/>
-		</Dialog>
-	);
-}
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index bdc1aa8a..51e97108 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -5,7 +5,6 @@ import Image from "next/image";
 import Link from "next/link";
 import {
 	MemoriesIcon,
-	ExploreIcon,
 	CanvasIcon,
 	AddIcon,
 	HomeIcon as HomeIconWeb,
@@ -29,36 +28,10 @@ import { HomeIcon } from "@heroicons/react/24/solid";
 import { createMemory, createSpace } from "../actions/doers";
 import ComboboxWithCreate from "@repo/ui/shadcn/combobox";
 import { StoredSpace } from "@repo/db/schema";
-import useMeasure from "react-use-measure";
 import { useKeyPress } from "@/lib/useKeyPress";
 import { useFormStatus } from "react-dom";
 
 function Menu() {
-	const [spaces, setSpaces] = useState<StoredSpace[]>([]);
-
-	function SubmitButton() {
-		const status = useFormStatus();
-		return (
-			<Button disabled={status.pending} variant={"secondary"} type="submit">
-				Save {autoDetectedType != "none" && autoDetectedType}
-			</Button>
-		);
-	}
-
-	useEffect(() => {
-		(async () => {
-			let spaces = await getSpaces();
-
-			if (!spaces.success || !spaces.data) {
-				toast.warning("Unable to get spaces", {
-					richColors: true,
-				});
-				setSpaces([]);
-				return;
-			}
-			setSpaces(spaces.data);
-		})();
-	}, []);
 	useKeyPress("a", () => {
 		if (!dialogOpen) {
 			setDialogOpen(true);
@@ -85,6 +58,130 @@ function Menu() {
 		},
 	];
 
+
+
+	const [dialogOpen, setDialogOpen] = useState(false);
+
+	return (
+		<>
+			{/* Desktop Menu */}
+			<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+				<div className="hidden lg:flex fixed h-screen pb-20 w-full p-4 items-center justify-start top-0 left-0 pointer-events-none z-[39]">
+					<div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] border-2 border-border bg-secondary px-3 py-4 duration-200 hover:w-40 z-[99999]">
+						<div className="border-b border-border pb-4 w-full">
+							<DialogTrigger
+								className={`flex w-full text-white brightness-75 hover:brightness-125 focus:brightness-125  cursor-pointer items-center gap-3 px-1 duration-200 justify-start`}
+							>
+								<Image
+									src={AddIcon}
+									alt="Logo"
+									width={24}
+									height={24}
+									className="hover:brightness-125 focus:brightness-125 duration-200 text-white"
+								/>
+								<p className="opacity-0 duration-200 group-hover:opacity-100">
+									Add
+								</p>
+							</DialogTrigger>
+						</div>
+						{menuItems.map((item) => (
+							<Link
+								aria-disabled={item.disabled}
+								href={item.disabled ? "#" : item.url}
+								key={item.url}
+								className={`flex w-full ${
+									item.disabled
+										? "cursor-not-allowed opacity-30"
+										: "text-white brightness-75 hover:brightness-125 cursor-pointer"
+								} items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-start`}
+							>
+								<Image
+									src={item.icon}
+									alt={`${item.text} icon`}
+									width={24}
+									height={24}
+									className="hover:brightness-125 duration-200"
+								/>
+								<p className="opacity-0 duration-200 group-hover:opacity-100">
+									{item.text}
+								</p>
+							</Link>
+						))}
+					</div>
+				</div>
+
+				<DialogContentMenu setDialogClose={()=> setDialogOpen(false)} />
+
+				{/* Mobile Menu */}
+				<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
+					<div className="flex justify-around items-center">
+						<Link
+							href={"/"}
+							className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
+						>
+							<HomeIcon width={24} height={24} />
+							<p className="text-xs text-foreground-menu mt-2">Home</p>
+						</Link>
+
+						<DialogTrigger
+							className={`flex flex-col items-center cursor-pointer text-white`}
+						>
+							<Image
+								src={AddIcon}
+								alt="Logo"
+								width={24}
+								height={24}
+								className="hover:brightness-125 focus:brightness-125 duration-200 stroke-white"
+							/>
+							<p className="text-xs text-foreground-menu mt-2">Add</p>
+						</DialogTrigger>
+						{menuItems.slice(1, 2).map((item) => (
+							<Link
+								aria-disabled={item.disabled}
+								href={item.disabled ? "#" : item.url}
+								key={item.url}
+								className={`flex flex-col items-center ${
+									item.disabled
+										? "opacity-50 cursor-not-allowed"
+										: "cursor-pointer"
+								}`}
+								onClick={(e) => item.disabled && e.preventDefault()}
+							>
+								<Image
+									src={item.icon}
+									alt={`${item.text} icon`}
+									width={24}
+									height={24}
+								/>
+								<p className="text-xs text-foreground-menu mt-2">{item.text}</p>
+							</Link>
+						))}
+					</div>
+				</div>
+			</Dialog>
+		</>
+	);
+}
+
+function DialogContentMenu({setDialogClose}: {setDialogClose: ()=> void}){
+
+	const [spaces, setSpaces] = useState<StoredSpace[]>([]);
+
+	useEffect(() => {
+		(async () => {
+			let spaces = await getSpaces();
+
+			if (!spaces.success || !spaces.data) {
+				toast.warning("Unable to get spaces", {
+					richColors: true,
+				});
+				setSpaces([]);
+				return;
+			}
+			setSpaces(spaces.data);
+		})();
+	}, []);
+
 	const [content, setContent] = useState("");
 	const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
 
@@ -108,8 +205,6 @@ function Menu() {
 		}
 	}, [content]);
 
-	const [dialogOpen, setDialogOpen] = useState(false);
-
 	const options = useMemo(
 		() =>
 			spaces.map((x) => ({
@@ -120,7 +215,7 @@ function Menu() {
 	);
 
 	const handleSubmit = async (content?: string, spaces?: number[]) => {
-		setDialogOpen(false);
+		setDialogClose();
 		if (!content || content.length === 0) {
 			throw new Error("Content is required");
 		}
@@ -131,7 +226,7 @@ function Menu() {
 		setContent("");
 		setSelectedSpaces([]);
 		return cont;
-	};
+	}
 
 	const formSubmit = () => {
 		toast.promise(handleSubmit(content, selectedSpaces), {
@@ -146,95 +241,18 @@ function Menu() {
 			richColors: true,
 		});
 	};
-
 	return (
-		<>
-			{/* Desktop Menu */}
-			<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-				<div className="hidden lg:flex fixed h-screen pb-20 w-full p-4 items-center justify-start top-0 left-0 pointer-events-none z-[39]">
-					<div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] border-2 border-border bg-secondary px-3 py-4 duration-200 hover:w-40 z-[99999]">
-						<div className="border-b border-border pb-4 w-full">
-							<DialogTrigger
-								className={`flex w-full text-white brightness-75 hover:brightness-125 focus:brightness-125  cursor-pointer items-center gap-3 px-1 duration-200 justify-start`}
-							>
-								<Image
-									src={AddIcon}
-									alt="Logo"
-									width={24}
-									height={24}
-									className="hover:brightness-125 focus:brightness-125 duration-200 text-white"
-								/>
-								<p className="opacity-0 duration-200 group-hover:opacity-100">
-									Add
-								</p>
-							</DialogTrigger>
-						</div>
-						{menuItems.map((item) => (
-							<Link
-								aria-disabled={item.disabled}
-								href={item.disabled ? "#" : item.url}
-								key={item.url}
-								className={`flex w-full ${
-									item.disabled
-										? "cursor-not-allowed opacity-30"
-										: "text-white brightness-75 hover:brightness-125 cursor-pointer"
-								} items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-start`}
-							>
-								<Image
-									src={item.icon}
-									alt={`${item.text} icon`}
-									width={24}
-									height={24}
-									className="hover:brightness-125 duration-200"
-								/>
-								<p className="opacity-0 duration-200 group-hover:opacity-100">
-									{item.text}
-								</p>
-							</Link>
-						))}
-					</div>
-				</div>
-
-				<DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
+		<DialogContent className="sm:max-w-[575px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
 					<form action={formSubmit} className="flex flex-col gap-4 ">
-						<DialogHeader>
-							<DialogTitle>Add memory</DialogTitle>
-							<DialogDescription className="text-[#F2F3F5]">
-								A "Memory" is a bookmark, something you want to remember.
-							</DialogDescription>
-						</DialogHeader>
-
-						<div>
-							<Label htmlFor="name">Resource (URL or content)</Label>
-							<Textarea
-								className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto  focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
-								id="content"
-								name="content"
-								rows={8}
-								placeholder="Start typing a note or paste a URL here. I'll remember it."
-								value={content}
-								onChange={(e) => setContent(e.target.value)}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" && !e.shiftKey) {
-										e.preventDefault();
-										formSubmit();
-									}
-								}}
-							/>
-						</div>
+					<DialogHeader>
+					<DialogTitle>Add memory</DialogTitle>
+				</DialogHeader>
 
 						<div>
-							<Label className="space-y-1" htmlFor="space">
-								<h3 className="font-semibold text-lg tracking-tight">
-									Spaces (Optional)
-								</h3>
-								<p className="leading-normal text-[#F2F3F5] text-sm">
-									A space is a collection of memories. It's a way to organise
-									your memories.
-								</p>
-							</Label>
-
+							<Label htmlFor="space">Save to Spaces (Optional)</Label>
 							<ComboboxWithCreate
+								setSelectedSpaces={setSelectedSpaces}
+								selectedSpaces={selectedSpaces}							
 								options={spaces.map((x) => ({
 									label: x.name,
 									value: x.id.toString(),
@@ -273,95 +291,42 @@ function Menu() {
 										toast.error("Space creation failed: " + creationTask.error);
 									}
 								}}
-								placeholder="Select or create a new space."
-								className="bg-[#2F353C] h-min rounded-md mt-4 mb-4"
 							/>
+						</div>
 
-							<div>
-								{selectedSpaces.length > 0 && (
-									<div className="flex flex-row flex-wrap gap-0.5 h-min">
-										{[...new Set(selectedSpaces)].map((x, idx) => (
-											<button
-												key={x}
-												type="button"
-												onClick={() =>
-													setSelectedSpaces((prev) =>
-														prev.filter((y) => y !== x),
-													)
-												}
-												className={`relative group p-2 py-3 bg-[#3C464D] max-w-32 ${
-													idx === selectedSpaces.length - 1
-														? "rounded-br-xl"
-														: ""
-												}`}
-											>
-												<p className="line-clamp-1">
-													{spaces.find((y) => y.id === x)?.name}
-												</p>
-												<div className="absolute h-full right-0 top-0 p-1 opacity-0 group-hover:opacity-100 items-center">
-													<MinusIcon className="w-6 h-6 rounded-full bg-secondary" />
-												</div>
-											</button>
-										))}
-									</div>
-								)}
-							</div>
+						<div>
+							<Label htmlFor="name">Resource (URL or content)</Label>
+							<Textarea
+								className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto  focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
+								id="content"
+								name="content"
+								rows={8}
+								placeholder="Start typing a note or paste a URL here. I'll remember it."
+								value={content}
+								onChange={(e) => setContent(e.target.value)}
+								onKeyDown={(e) => {
+									if (e.key === "Enter" && !e.shiftKey) {
+										e.preventDefault();
+										formSubmit();
+									}
+								}}
+							/>
 						</div>
 
 						<DialogFooter>
-							<SubmitButton />
+							<SubmitButton autoDetectedType={autoDetectedType} />
 						</DialogFooter>
 					</form>
 				</DialogContent>
+	)
+}
 
-				{/* Mobile Menu */}
-				<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
-					<div className="flex justify-around items-center">
-						<Link
-							href={"/"}
-							className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
-						>
-							<HomeIcon width={24} height={24} />
-							<p className="text-xs text-foreground-menu mt-2">Home</p>
-						</Link>
-
-						<DialogTrigger
-							className={`flex flex-col items-center cursor-pointer text-white`}
-						>
-							<Image
-								src={AddIcon}
-								alt="Logo"
-								width={24}
-								height={24}
-								className="hover:brightness-125 focus:brightness-125 duration-200 stroke-white"
-							/>
-							<p className="text-xs text-foreground-menu mt-2">Add</p>
-						</DialogTrigger>
-						{menuItems.slice(1, 2).map((item) => (
-							<Link
-								aria-disabled={item.disabled}
-								href={item.disabled ? "#" : item.url}
-								key={item.url}
-								className={`flex flex-col items-center ${
-									item.disabled
-										? "opacity-50 cursor-not-allowed"
-										: "cursor-pointer"
-								}`}
-								onClick={(e) => item.disabled && e.preventDefault()}
-							>
-								<Image
-									src={item.icon}
-									alt={`${item.text} icon`}
-									width={24}
-									height={24}
-								/>
-								<p className="text-xs text-foreground-menu mt-2">{item.text}</p>
-							</Link>
-						))}
-					</div>
-				</div>
-			</Dialog>
-		</>
+function SubmitButton({autoDetectedType}: {autoDetectedType: string}) {
+	const status = useFormStatus();
+	return (
+		<Button disabled={status.pending} variant={"secondary"} type="submit">
+			Save {autoDetectedType != "none" && autoDetectedType}
+		</Button>
 	);
 }