extension: Instead of manually creating api keys, let users exchange their username passwords for one

1 files changed, 36 insertions, 30 deletions

diff --git a/packages/browser-extension/src/BookmarkSavedPage.tsx b/packages/browser-extension/src/BookmarkSavedPage.tsx
index 52c09b2c..f25a83ba 100644
--- a/packages/browser-extension/src/BookmarkSavedPage.tsx
+++ b/packages/browser-extension/src/BookmarkSavedPage.tsx
@@ -1,55 +1,61 @@
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { api } from "./utils/trpc";
 import usePluginSettings from "./utils/settings";
 import { ArrowUpRightFromSquare, Trash } from "lucide-react";
 import Spinner from "./Spinner";
+import { useState } from "react";
 
 export default function BookmarkSavedPage() {
   const { bookmarkId } = useParams();
   const navigate = useNavigate();
+  const [error, setError] = useState("");
 
   const { mutate: deleteBookmark, isPending } =
     api.bookmarks.deleteBookmark.useMutation({
       onSuccess: () => {
         navigate("/bookmarkdeleted");
       },
-      onError: () => {},
+      onError: (e) => {
+        setError(e.message);
+      },
     });
 
-  const [settings] = usePluginSettings();
+  const { settings } = usePluginSettings();
 
   if (!bookmarkId) {
     return <div>NOT FOUND</div>;
   }
 
   return (
-    <div className="flex items-center justify-between gap-2">
-      <p className="text-lg">Bookmarked!</p>
-      <div className="flex gap-2">
-        <a
-          className="flex gap-2 rounded-md p-3 text-black hover:text-black"
-          target="_blank"
-          href={`${settings.address}/dashboard/preview/${bookmarkId}`}
-        >
-          <ArrowUpRightFromSquare className="my-auto" size="20" />
-          <p className="my-auto">Open</p>
-        </a>
-        <a
-          onClick={() => deleteBookmark({ bookmarkId: bookmarkId })}
-          className="flex gap-2 text-red-500 hover:text-red-500"
-          href="#"
-        >
-          {!isPending ? (
-            <>
-              <Trash className="my-auto" size="20" />
-              <p className="my-auto">Delete</p>
-            </>
-          ) : (
-            <span className="m-auto">
-              <Spinner />
-            </span>
-          )}
-        </a>
+    <div className="flex flex-col gap-2">
+      {error && <p className="text-red-500">{error}</p>}
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-lg">Bookmarked!</p>
+        <div className="flex gap-2">
+          <Link
+            className="flex gap-2 rounded-md p-3 text-black hover:text-black"
+            target="_blank"
+            to={`${settings.address}/dashboard/preview/${bookmarkId}`}
+          >
+            <ArrowUpRightFromSquare className="my-auto" size="20" />
+            <p className="my-auto">Open</p>
+          </Link>
+          <button
+            onClick={() => deleteBookmark({ bookmarkId: bookmarkId })}
+            className="flex gap-2 bg-transparent text-red-500 hover:text-red-500"
+          >
+            {!isPending ? (
+              <>
+                <Trash className="my-auto" size="20" />
+                <p className="my-auto">Delete</p>
+              </>
+            ) : (
+              <span className="m-auto">
+                <Spinner />
+              </span>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );