space add

2 files changed, 44 insertions, 15 deletions

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 4f8ef734..1482774e 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -12,9 +12,10 @@ import { Markdown } from "tiptap-markdown";
 import { useEffect, useRef, useState } from "react";
 import { FilterMemories, FilterSpaces } from "./FilterCombobox";
 import { useMemory } from "@/contexts/MemoryContext";
-import { Command, Plus, X } from "lucide-react";
+import { Loader, Plus, X } from "lucide-react";
 import { StoredContent } from "@/server/db/schema";
 import { cleanUrl } from "@/lib/utils";
+import { motion } from "framer-motion"
 
 export function AddMemoryPage() {
   const { addMemory } = useMemory();
@@ -157,8 +158,11 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
 
 export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
 
+	const { addSpace } = useMemory()
+
   const inputRef = useRef<HTMLInputElement>(null);
   const [name, setName] = useState("");
+
   const [loading, setLoading] = useState(false);
 
 	const [selected, setSelected] = useState<StoredContent[]>([]);
@@ -198,6 +202,7 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
         type="url"
         data-modal-autofocus
 				value={name}
+				disabled={loading}
 				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"
       />
@@ -219,7 +224,8 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
 				<FilterMemories
 					selected={selected}
 					setSelected={setSelected}
-					className="mr-auto bg-white/5 hover:bg-rgray-4 focus-visible:bg-rgray-4"
+					disabled={loading}
+					className="mr-auto bg-white/5 hover:bg-rgray-4 focus-visible:bg-rgray-4 disabled:opacity-70 disabled:cursor-not-allowed"
 				>
 					<Plus className="w-5 h-5" />
 					Memory
@@ -228,14 +234,28 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
           type={undefined}
 					onClick={() => {
 						if (check()) {
-
+							setLoading(true)
+							addSpace(name, selected.map(s => s.id)).then(() => closeDialog())
 						}
 					}}
-          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"
+					disabled={loading}
+          className="relative disabled:opacity-70 disabled:cursor-not-allowed 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
+					<motion.div 
+						initial={{ x: '-50%', y: '-100%' }}
+						animate={loading && { y: '-50%', x: '-50%', opacity: 1 }}
+						className="opacity-0 absolute top-1/2 left-1/2 translate-y-[-100%] -translate-x-1/2"
+					>
+						<Loader className="w-5 h-5 animate-spin text-rgray-11" />
+					</motion.div>
+					<motion.div
+						initial={{ y: '0%' }}
+						animate={loading && { opacity: 0, y: '30%' }}
+					>
+						Add
+					</motion.div>
         </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">
+        <DialogClose disabled={loading} className="disabled:opacity-70 disabled:cursor-not-allowed 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>
       </DialogFooter>
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 1c9e7143..88262f4e 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -196,13 +196,16 @@ export function MemoryItem({
 	title,
 	image
 }: StoredContent) {
+
+	const name = title ? title.length > 10 ? title.slice(0, 10) + "..." : title : '<no title>';
+
 	return (
 		<div
 
       className="hover:bg-rgray-2 has-[[data-state='true']]:bg-rgray-2 has-[[data-space-text]:focus-visible]:bg-rgray-2 has-[[data-space-text]:focus-visible]:ring-rgray-7 [&:has-[[data-space-text]:focus-visible]>[data-more-button]]:opacity-100 relative flex select-none flex-col-reverse items-center justify-center rounded-md p-2 pb-4 text-center font-normal ring-transparent transition has-[[data-space-text]:focus-visible]:outline-none has-[[data-space-text]:focus-visible]:ring-2 md:has-[[data-state='true']]:bg-transparent [&:hover>[data-more-button]]:opacity-100"
 		>
 			<button data-space-text className="focus-visible:outline-none">
-        {title}
+        {name}
       </button>
 			
 			<div className="w-24 h-24 flex justify-center items-center">
@@ -240,6 +243,8 @@ export function SpaceItem({
 		return cachedMemories.filter(m => m.space === id)
 	}, [cachedMemories])
 
+	const _name = name.length > 10 ? name.slice(0, 10) + "..." : name
+
   return (
     <motion.div
       ref={itemRef}
@@ -248,7 +253,7 @@ export function SpaceItem({
       className="hover:bg-rgray-2 has-[[data-state='true']]:bg-rgray-2 has-[[data-space-text]:focus-visible]:bg-rgray-2 has-[[data-space-text]:focus-visible]:ring-rgray-7 [&:has-[[data-space-text]:focus-visible]>[data-more-button]]:opacity-100 relative flex select-none flex-col-reverse items-center justify-center rounded-md p-2 pb-4 text-center font-normal ring-transparent transition has-[[data-space-text]:focus-visible]:outline-none has-[[data-space-text]:focus-visible]:ring-2 md:has-[[data-state='true']]:bg-transparent [&:hover>[data-more-button]]:opacity-100"
     >
       <button data-space-text className="focus-visible:outline-none">
-        {name}
+        {_name}
       </button>
       <SpaceMoreButton
         isOpen={moreDropdownOpen}
@@ -341,19 +346,23 @@ export function SpaceItem({
           id={id.toString()}
           images={spaceMemories.map((c) => c.image).reverse() as string[]}
         />
-      ) : spaceMemories.length === 1 ? (
-        <MemoryWithImage
+      ) : spaceMemories.length > 1 ? (
+				<MemoryWithImages2
           className="h-24 w-24"
           id={id.toString()}
-          image={spaceMemories[0].image!}
+          images={spaceMemories.map((c) => c.image).reverse() as string[]}
         />
-      ) : (
-        <MemoryWithImages2
+			) : spaceMemories.length === 1 ? (
+        <MemoryWithImage
           className="h-24 w-24"
           id={id.toString()}
-          images={spaceMemories.map((c) => c.image).reverse() as string[]}
+          image={spaceMemories[0].image!}
         />
-      )}
+      ) : (
+				<div className="bg-rgray-4 opacity-30 rounded-full w-24 h-24 scale-50 shadow-">
+
+				</div>
+			)}
     </motion.div>
   );
 }