1 files changed, 60 insertions, 0 deletions
diff --git a/apps/browser-extension/src/SavePage.tsx b/apps/browser-extension/src/SavePage.tsx
new file mode 100644
index 00000000..638af149
--- /dev/null
+++ b/apps/browser-extension/src/SavePage.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import Spinner from "./Spinner";
+import { api } from "./utils/trpc";
+import { Navigate } from "react-router-dom";
+
+export default function SavePage() {
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  const {
+    data,
+    mutate: createBookmark,
+    status,
+  } = api.bookmarks.createBookmark.useMutation({
+    onError: (e) => {
+      setError("Something went wrong: " + e.message);
+    },
+  });
+
+  useEffect(() => {
+    async function runSave() {
+      let currentUrl;
+      const [currentTab] = await chrome.tabs.query({
+        active: true,
+        lastFocusedWindow: true,
+      });
+      if (currentTab?.url) {
+        currentUrl = currentTab.url;
+      } else {
+        setError("Couldn't find the URL of the current tab");
+        return;
+      }
+
+      createBookmark({
+        type: "link",
+        url: currentUrl,
+      });
+    }
+    runSave();
+  }, [createBookmark]);
+
+  switch (status) {
+    case "error": {
+      return <div className="text-red-500">{error}</div>;
+    }
+    case "success": {
+      return <Navigate to={`/bookmark/${data.id}`} />;
+    }
+    case "pending": {
+      return (
+        <div className="flex justify-between text-lg">
+          <span>Saving Bookmark </span>
+          <Spinner />
+        </div>
+      );
+    }
+    case "idle": {
+      return <div />;
+    }
+  }
+}