From 1fd0aae0be8c8a4bf0e1766911102f9954812729 Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Sun, 14 Jul 2024 20:48:06 -0500
Subject: [PATCH] small UX fixes and multi space save actually works now

---
 .eslintrc.js                                 |   5 -
 apps/web/app/(dash)/(memories)/content.tsx   |   9 +-
 apps/web/app/(dash)/menu.tsx                 | 288 +++++++++----------
 apps/web/app/actions/doers.ts                |  16 +-
 apps/web/components/twitter/render-tweet.tsx |   6 +-
 package.json                                 |   3 +-
 packages/shared-types/utils.ts               |  15 +-
 packages/ui/shadcn/combobox.tsx              |  34 +--
 8 files changed, 173 insertions(+), 203 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8c1f1f56..e928b868 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,9 +7,4 @@ module.exports = {
   parserOptions: {
     project: true,
   },
-  // ignore some rules
-  rules: {
-    "@": "off",
-    "import/no-unresolved": "off",
-  },
 };
diff --git a/apps/web/app/(dash)/(memories)/content.tsx b/apps/web/app/(dash)/(memories)/content.tsx
index 9f84a6b6..879c0502 100644
--- a/apps/web/app/(dash)/(memories)/content.tsx
+++ b/apps/web/app/(dash)/(memories)/content.tsx
@@ -284,7 +284,10 @@ function LinkComponent({
             <div className="flex items-center gap-2 text-xs">
               <PaperclipIcon className="w-3 h-3" /> Page
             </div>
-            <div className="text-lg text-[#fff] mt-4 line-clamp-2">{title}</div>
+            {/* remove `<---chunkId: ${vector.id}\n${content}\n---->` pattern from title */}
+            <div className="text-lg text-[#fff] mt-4 line-clamp-2">
+              {title.replace(/(<---chunkId: .*?\n.*?\n---->)/g, "")}
+            </div>
             <div>
               {url.replace("https://supermemory.ai", "").split("#")[0] ?? "/"}
             </div>
@@ -294,7 +297,9 @@ function LinkComponent({
             <div className="flex items-center gap-2 text-xs">
               <NotebookIcon className="w-3 h-3" /> Note
             </div>
-            <div className="text-lg text-[#fff] mt-4 line-clamp-2">{title}</div>
+            <div className="text-lg text-[#fff] mt-4 line-clamp-2">
+              {title.replace(/(<---chunkId: .*?\n.*?\n---->)/g, "")}
+            </div>
             <div className="line-clamp-3 mt-2">
               {content.replace(title, "")}
             </div>
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index d9ba6c71..c807c579 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -17,34 +17,15 @@ import {
 } from "@repo/ui/shadcn/dialog";
 import { Label } from "@repo/ui/shadcn/label";
 import { Textarea } from "@repo/ui/shadcn/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@repo/ui/shadcn/select";
 import { toast } from "sonner";
 import { getSpaces } from "../actions/fetchers";
-import { Space } from "../actions/types";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@repo/ui/shadcn/tooltip";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import { HomeIcon } from "@heroicons/react/24/solid";
 import { createMemory, createSpace } from "../actions/doers";
-import { Input } from "@repo/ui/shadcn/input";
 import ComboboxWithCreate from "@repo/ui/shadcn/combobox";
 import { StoredSpace } from "@/server/db/schema";
-import { revalidatePath } from "next/cache";
 import useMeasure from "react-use-measure";
-import { motion } from "framer-motion";
 
 function Menu() {
-  const [ref, bounds] = useMeasure();
   const [spaces, setSpaces] = useState<StoredSpace[]>([]);
 
   useEffect(() => {
@@ -109,7 +90,7 @@ function Menu() {
     [spaces],
   );
 
-  const handleSubmit = async (content?: string, space?: string) => {
+  const handleSubmit = async (content?: string, spaces?: number[]) => {
     setDialogOpen(false);
 
     toast.info("Creating memory...", {
@@ -122,12 +103,15 @@ function Menu() {
       return;
     }
 
+    console.log(spaces);
+
     const cont = await createMemory({
       content: content,
-      spaces: space ? [space] : undefined,
+      spaces: spaces ?? undefined,
     });
 
     setContent("");
+    setSelectedSpaces([]);
 
     if (cont.success) {
       toast.success("Memory created", {
@@ -187,148 +171,138 @@ function Menu() {
         </div>
 
         <DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39] backdrop-blur-md">
-          <motion.div
-            className="overflow-hidden max-h-[70vh]"
-            animate={{ height: bounds.height + 10 }}
-          >
-            <form
-              ref={ref}
-              action={async (e: FormData) => {
-                const content = e.get("content")?.toString();
-                const space = e.get("space")?.toString();
+          <form
+            action={async (e: FormData) => {
+              const content = e.get("content")?.toString();
 
-                await handleSubmit(content, space);
-              }}
-              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>
+              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 ??
+                        "Unknown error",
+                    );
+                  }
+                }}
+                placeholder="Select or create a new space."
+                className="bg-[#2F353C] h-min rounded-md mt-4 mb-4"
+              />
 
               <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);
-                    }
-                  }}
-                />
-              </div>
-
-              {autoDetectedType != "none" && (
-                <div>
-                  <Label className="space-y-2" htmlFor="space">
-                    <h3 className="font-bold text-lg">Spaces (Optional)</h3>
-                    <p className="leading-normal">
-                      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 [];
+                {selectedSpaces.length > 0 && (
+                  <div className="flex flex-row flex-wrap gap-0.5 h-min">
+                    {selectedSpaces.map((x, idx) => (
+                      <button
+                        key={x}
+                        type="button"
+                        onClick={() =>
+                          setSelectedSpaces((prev) =>
+                            prev.filter((y) => y !== x),
+                          )
                         }
-                        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 ??
-                            "Unknown 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">
-                        {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>
-                    )}
+                        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>
+            </div>
 
-              <DialogFooter>
-                <Button
-                  disabled={autoDetectedType === "none"}
-                  variant={"secondary"}
-                  type="submit"
-                >
-                  Save {autoDetectedType != "none" && autoDetectedType}
-                </Button>
-              </DialogFooter>
-            </form>
-          </motion.div>
+            <DialogFooter>
+              <Button
+                disabled={autoDetectedType === "none"}
+                variant={"secondary"}
+                type="submit"
+              >
+                Save {autoDetectedType != "none" && autoDetectedType}
+              </Button>
+            </DialogFooter>
+          </form>
         </DialogContent>
 
         {/* Mobile Menu */}
diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts
index fcbab0f8..16dcf169 100644
--- a/apps/web/app/actions/doers.ts
+++ b/apps/web/app/actions/doers.ts
@@ -158,7 +158,7 @@ const getTweetData = async (tweetID: string) => {
 
 export const createMemory = async (input: {
   content: string;
-  spaces?: string[];
+  spaces?: number[];
 }): ServerActionReturnType<number> => {
   const data = await auth();
 
@@ -239,7 +239,7 @@ export const createMemory = async (input: {
         title: metadata.title,
         description: metadata.description,
         url: metadata.baseUrl,
-        spaces: storeToSpaces,
+        spaces: storeToSpaces.map((spaceId) => spaceId.toString()),
         user: data.user.id,
         type,
       }),
@@ -302,7 +302,7 @@ export const createMemory = async (input: {
     const insertResponse = await db
       .insert(storedContent)
       .values({
-        content: response.chunkedInput,
+        content: pageContent,
         title: metadata.title,
         description: metadata.description,
         url: saveToDbUrl,
@@ -355,13 +355,7 @@ export const createMemory = async (input: {
       .select()
       .from(space)
       .where(
-        and(
-          inArray(
-            space.id,
-            storeToSpaces.map((s) => parseInt(s)),
-          ),
-          eq(space.user, data.user.id),
-        ),
+        and(inArray(space.id, storeToSpaces), eq(space.user, data.user.id)),
       )
       .all();
 
@@ -371,7 +365,7 @@ export const createMemory = async (input: {
           .insert(contentToSpace)
           .values({ contentId: contentId, spaceId: s.id });
 
-        db.update(space).set({ numItems: s.numItems + 1 });
+        await db.update(space).set({ numItems: s.numItems + 1 });
       }),
     );
   }
diff --git a/apps/web/components/twitter/render-tweet.tsx b/apps/web/components/twitter/render-tweet.tsx
index 9d6d1a8a..889f1977 100644
--- a/apps/web/components/twitter/render-tweet.tsx
+++ b/apps/web/components/twitter/render-tweet.tsx
@@ -15,7 +15,7 @@ import s from "./tweet-header.module.css";
 import { VerifiedBadge } from "./verified-badge";
 
 type Props = {
-  tweet: Tweet;
+  tweet: Tweet | { error: string };
   components?: TwitterComponents;
 };
 
@@ -101,6 +101,10 @@ const TweetHeader = ({
 };
 
 export const MyTweet = ({ tweet: t, components }: Props) => {
+  if ("error" in t) {
+    return <div>{t.error}</div>;
+  }
+
   const tweet = enrichTweet(t);
   return (
     <TweetContainer className="bg-transparent !m-0 !p-0 !z-0">
diff --git a/package.json b/package.json
index 7a0fa0b8..38669d01 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "eslint-plugin-next-on-pages": "^1.11.3",
     "lint-staged": "^15.2.5",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "readline-sync": "^1.4.10",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
@@ -79,6 +79,7 @@
     "cheerio": "^1.0.0-rc.12",
     "compromise": "^14.13.0",
     "drizzle-orm": "0.30.0",
+    "eslint-config-turbo": "^2.0.6",
     "framer-motion": "^11.2.6",
     "geist": "^1.3.0",
     "grammy": "^1.25.1",
diff --git a/packages/shared-types/utils.ts b/packages/shared-types/utils.ts
index c97d053c..0bd86564 100644
--- a/packages/shared-types/utils.ts
+++ b/packages/shared-types/utils.ts
@@ -12,15 +12,12 @@ export const tweetToMd = (tweet: Tweet) => {
 
 export const getRawTweet = (tweet: string) => {
   // Get the content inside the last <raw> tag, there can any number of <raw> tags in the tweet (or just one)
-  const rawTag = /<raw>(.*)<\/raw>/gs; // Use 's' flag to match across multiple lines
+  const rawTag = /<raw>(.*)<\/raw>/g;
   const match = rawTag.exec(tweet);
-  if (match && match.length > 1) {
-    // Remove the specified item pattern
-    const cleanedContent = match[1]?.replace(
-      /<---chunkId:.*?\n.*?\n---->/gs,
-      "",
-    );
-    return cleanedContent;
+  if (match) {
+    return match[1];
   }
-  return tweet;
+  return `{
+    "error": "No <raw> tag found"
+  }`;
 };
diff --git a/packages/ui/shadcn/combobox.tsx b/packages/ui/shadcn/combobox.tsx
index 9fdb4b67..eb7cab25 100644
--- a/packages/ui/shadcn/combobox.tsx
+++ b/packages/ui/shadcn/combobox.tsx
@@ -52,23 +52,6 @@ const ComboboxWithCreate: React.FC<ComboboxWithCreateProps> = ({
         value={inputValue}
       />
       <CommandList className="z-10 translate-y-12 translate-x-5 opacity-0 absolute group-focus-within:opacity-100 bg-secondary p-2 rounded-b-xl max-w-64">
-        <CommandEmpty>
-          <Button
-            className="px-1"
-            type="button"
-            onClick={async () => onSubmit(inputValue)}
-            variant="link"
-            disabled={inputValue.length === 0}
-          >
-            {inputValue.length > 0 ? (
-              <>
-                {createNewMessage} "{inputValue}"
-              </>
-            ) : (
-              <>Create a new space</>
-            )}
-          </Button>
-        </CommandEmpty>
         <CommandGroup className="hidden group-focus-within:block">
           {options.map((option, idx) => (
             <CommandItem
@@ -78,6 +61,23 @@ const ComboboxWithCreate: React.FC<ComboboxWithCreateProps> = ({
               {option.label}
             </CommandItem>
           ))}
+          {!options.map((opts) => opts.label).includes(inputValue) && (
+            <Button
+              className="px-1"
+              type="button"
+              onClick={async () => onSubmit(inputValue)}
+              variant="link"
+              disabled={inputValue.length === 0}
+            >
+              {inputValue.length > 0 ? (
+                <>
+                  {createNewMessage} "{inputValue}"
+                </>
+              ) : (
+                <>Type to create a new space</>
+              )}
+            </Button>
+          )}
         </CommandGroup>
       </CommandList>
     </Command>