fix favicons

2 files changed, 46 insertions, 10 deletions

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 1482774e..b9ab1d86 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -77,6 +77,9 @@ export function AddMemoryPage() {
 }
 
 export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
+	
+	const { addMemory } = useMemory()
+
   const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -116,6 +119,7 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
         placeholder="Title of the note"
         data-modal-autofocus
         value={name}
+				disabled={loading}
         onChange={(e) => setName(e.target.value)}
       />
       <Editor
@@ -138,16 +142,39 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
         <button
           onClick={() => {
             if (check()) {
-              closeDialog();
+							setLoading(true)
+							addMemory({
+								content,
+								title: name,
+								type: "note",
+								url: "https://notes.supermemory.dhr.wtf/",
+								image: '',
+								savedAt: new Date()
+							}, selectedSpacesId).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
           type={undefined}
-          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"
+					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>
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 88262f4e..eb26827c 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -194,7 +194,8 @@ const SpaceExitVariant: Variant = {
 export function MemoryItem({
 	id,
 	title,
-	image
+	image,
+	type
 }: StoredContent) {
 
 	const name = title ? title.length > 10 ? title.slice(0, 10) + "..." : title : '<no title>';
@@ -209,11 +210,19 @@ export function MemoryItem({
       </button>
 			
 			<div className="w-24 h-24 flex justify-center items-center">
-				<img
-					className="h-16 w-16"
-					id={id.toString()}
-					src={image!}
-				/>
+				{type === "page" ? (
+					<img
+						className="h-16 w-16"
+						id={id.toString()}
+						src={image!}
+					/>
+				): type === "note" ? (
+					<div className="shadow-md rounded-md bg-rgray-4 p-2 flex justify-center items-center">
+						<Text className="w-10 h-10" />
+					</div>
+				) : (
+					<></>
+				)}
 			</div>
 		</div>
 	)