added browser rendering for getting clean page content

3 files changed, 44 insertions, 12 deletions

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index d0523581..3043c972 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -16,10 +16,12 @@ import { Loader, Plus, X } from "lucide-react";
 import { StoredContent } from "@/server/db/schema";
 import { cleanUrl } from "@/lib/utils";
 import { motion } from "framer-motion";
+import { getMetaData } from "@/server/helpers";
 
-export function AddMemoryPage() {
+export function AddMemoryPage({ closeDialog }: { closeDialog: () => void }) {
   const { addMemory } = useMemory();
 
+  const [loading, setLoading] = useState(false);
   const [url, setUrl] = useState("");
   const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
 
@@ -37,38 +39,59 @@ export function AddMemoryPage() {
         placeholder="Enter the URL of the page"
         type="url"
         data-modal-autofocus
-        className="bg-rgray-4 mt-2 w-full"
+        className="bg-rgray-4 mt-2 w-full disabled:cursor-not-allowed disabled:opacity-70"
         value={url}
         onChange={(e) => setUrl(e.target.value)}
+        disabled={loading}
       />
       <DialogFooter>
         <FilterSpaces
           selectedSpaces={selectedSpacesId}
           setSelectedSpaces={setSelectedSpacesId}
-          className="hover:bg-rgray-5 mr-auto bg-white/5"
+          className="hover:bg-rgray-5 mr-auto bg-white/5 disabled:cursor-not-allowed disabled:opacity-70"
           name={"Spaces"}
+          disabled={loading}
         />
         <button
           type={"submit"}
+          disabled={loading}
           onClick={async () => {
-            // @Dhravya this is adding a memory with insufficient information fix pls
+            setLoading(true);
+            const metadata = await getMetaData(url);
             await addMemory(
               {
-                title: url,
+                title: metadata.title,
+                description: metadata.description,
                 content: "",
                 type: "page",
                 url: url,
-                image: "/icons/logo_without_bg.png",
+                image: metadata.image,
                 savedAt: new Date(),
               },
               selectedSpacesId,
             );
+            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"
+          className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 relative rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-70"
         >
-          Add
+          <motion.div
+            initial={{ x: "-50%", y: "-100%" }}
+            animate={loading && { y: "-50%", x: "-50%", opacity: 1 }}
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 translate-y-[-100%] opacity-0"
+          >
+            <Loader className="text-rgray-11 h-5 w-5 animate-spin" />
+          </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="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:cursor-not-allowed disabled:opacity-70"
+        >
           Cancel
         </DialogClose>
       </DialogFooter>
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 970deb68..0c468475 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -210,7 +210,15 @@ export function MemoryItem({ id, title, image, type }: StoredContent) {
 
       <div className="flex h-24 w-24 items-center justify-center">
         {type === "page" ? (
-          <img className="h-16 w-16" id={id.toString()} src={image!} />
+          <img
+            className="h-16 w-16"
+            id={id.toString()}
+            src={image!}
+            onError={(e) => {
+              (e.target as HTMLImageElement).src =
+                "/icons/white_without_bg.png";
+            }}
+          />
         ) : type === "note" ? (
           <div className="bg-rgray-4 flex items-center justify-center rounded-md p-2 shadow-md">
             <Text className="h-10 w-10" />
@@ -406,7 +414,7 @@ export function SpaceMoreButton({
               className="focus:bg-red-100 focus:text-red-400 dark:focus:bg-red-100/10"
             >
               <Trash2 className="mr-2 h-4 w-4" strokeWidth={1.5} />
-              Move to Trash
+              Delete
             </DropdownMenuItem>
           </DialogTrigger>
         </DropdownMenuContent>
@@ -471,7 +479,7 @@ export function AddMemoryModal({
         className="w-max max-w-[auto]"
       >
         {type === "page" ? (
-          <AddMemoryPage />
+          <AddMemoryPage closeDialog={() => setIsDialogOpen(false)} />
         ) : type === "note" ? (
           <NoteAddPage closeDialog={() => setIsDialogOpen(false)} />
         ) : type === "space" ? (
diff --git a/apps/web/src/server/helpers.ts b/apps/web/src/server/helpers.ts
index 8538f743..9a9a9607 100644
--- a/apps/web/src/server/helpers.ts
+++ b/apps/web/src/server/helpers.ts
@@ -1,3 +1,4 @@
+"use server";
 import * as cheerio from "cheerio";
 
 export async function getMetaData(url: string) {