From 5b340071245cfe9906fd3534ec5176de1e3fd3bd Mon Sep 17 00:00:00 2001
From: yxshv <yashverma30115@gmail.com>
Date: Sat, 13 Apr 2024 18:11:14 +0530
Subject: spaces dialog

---
 .../web/src/components/Sidebar/AddMemoryDialog.tsx | 66 ++++++++++++++++++----
 1 file changed, 55 insertions(+), 11 deletions(-)

(limited to 'apps/web/src/components/Sidebar/AddMemoryDialog.tsx')

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 886507ff..4f8ef734 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -10,8 +10,11 @@ import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Markdown } from "tiptap-markdown";
 import { useEffect, useRef, useState } from "react";
-import { FilterSpaces } from "./FilterCombobox";
+import { FilterMemories, FilterSpaces } from "./FilterCombobox";
 import { useMemory } from "@/contexts/MemoryContext";
+import { Command, Plus, X } from "lucide-react";
+import { StoredContent } from "@/server/db/schema";
+import { cleanUrl } from "@/lib/utils";
 
 export function AddMemoryPage() {
   const { addMemory } = useMemory();
@@ -153,29 +156,28 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
 }
 
 export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
-  const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const [name, setName] = useState("");
-  const [content, setContent] = useState("");
   const [loading, setLoading] = useState(false);
 
+	const [selected, setSelected] = useState<StoredContent[]>([]);
+
+
   function check(): boolean {
     const data = {
       name: name.trim(),
-      content,
     };
-    console.log(name);
     if (!data.name || data.name.length < 1) {
       if (!inputRef.current) {
         alert("Please enter a name for the note");
         return false;
       }
       inputRef.current.value = "";
-      inputRef.current.placeholder = "Please enter a title for the note";
+      inputRef.current.placeholder = "Please enter a title for the space";
       inputRef.current.dataset["error"] = "true";
       setTimeout(() => {
-        inputRef.current!.placeholder = "Title of the note";
+        inputRef.current!.placeholder = "Enter the name of the space";
         inputRef.current!.dataset["error"] = "false";
       }, 500);
       inputRef.current.focus();
@@ -191,19 +193,48 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
       </DialogHeader>
       <Label className="mt-5 block">Name</Label>
       <Input
+				ref={inputRef}
         placeholder="Enter the name of the space"
         type="url"
         data-modal-autofocus
-        className="bg-rgray-4 mt-2 w-full"
+				value={name}
+				onChange={e => setName(e.target.value)}
+        className="bg-rgray-4 mt-2 w-full focus-visible:data-[error=true]:ring-red-500/10 data-[error=true]:placeholder:text-red-400 placeholder:transition placeholder:duration-500"
       />
-      <Label className="mt-5 block">Memories</Label>
+      {selected.length > 0 && (
+				<>
+					<Label className="mt-5 block">Add Memories</Label>
+					<div className="flex min-h-5 py-2 flex-col justify-center items-center">
+						{selected.map(i => (
+							<MemorySelectedItem
+								key={i.id}
+								onRemove={() => setSelected(prev => prev.filter(p => p.id !== i.id))}
+								{...i}
+							/>
+						))}
+					</div>
+				</>
+			)}
       <DialogFooter>
-        <DialogClose
+				<FilterMemories
+					selected={selected}
+					setSelected={setSelected}
+					className="mr-auto bg-white/5 hover:bg-rgray-4 focus-visible:bg-rgray-4"
+				>
+					<Plus className="w-5 h-5" />
+					Memory
+				</FilterMemories>
+        <button
           type={undefined}
+					onClick={() => {
+						if (check()) {
+
+						}
+					}}
           className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2"
         >
           Add
-        </DialogClose>
+        </button>
         <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
           Cancel
         </DialogClose>
@@ -211,3 +242,16 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
     </div>
   );
 }
+
+export function MemorySelectedItem({ id, title, url, image, onRemove }: StoredContent & { onRemove: () => void; }) {
+	return (
+		<div className="flex justify-start gap-2 p-1 px-2 w-full items-center text-sm rounded-md hover:bg-rgray-4 focus-within-bg-rgray-4 [&:hover>[data-icon]]:block [&:hover>img]:hidden">
+			<img src={image ?? "/icons/logo_without_bg.png"} className="h-5 w-5" />
+			<button onClick={onRemove} data-icon className="w-5 h-5 p-0 m-0 hidden focus-visible:outline-none">
+				<X className="w-5 h-5 scale-90" />
+			</button>
+			<span>{title}</span>
+			<span className="ml-auto block opacity-50">{cleanUrl(url)}</span>
+		</div>
+	)
+}
-- 
cgit v1.2.3