Move bookmarklet to header 🏗️

app/page.tsx

@@ -2,7 +2,6 @@ import Link from 'next/link';
 
 import { Card } from '@/components/ui/card';
 
-import BookmarkletLink from '@/components/BookmarkletLink';
 import SearchForm from '@/components/SearchForm';
 
 const EXAMPLE_DOMAINS = [
@@ -40,19 +39,6 @@ const Home = () => {
         </div>
       </Card>
 
-      <Card className="mx-auto my-16 max-w-lg p-6">
-        <h2 className="mb-5 text-center text-xl font-semibold tracking-tight sm:text-2xl">
-          Quick Inspect Bookmarklet
-        </h2>
-
-        <p className="mb-5 mt-2 text-center text-sm text-muted-foreground">
-          Drag this link to your bookmarks bar to quickly go to the results page
-          for the site you are currently on!
-        </p>
-
-        <BookmarkletLink />
-      </Card>
-
       <div className="mx-auto my-16 max-w-lg p-6">
         <h2 className="mb-5 text-center text-xl font-semibold tracking-tight sm:text-2xl">
           About Domain Digger

components/BookmarkletLink.tsx

@@ -20,6 +20,7 @@ import {
 const BookmarkletLink = () => {
   const [target, setTarget] = useState('');
   const [isOpen, setOpen] = useState(false);
+  const [isActivated, setActivated] = useState(false);
 
   useEffect(() => {
     const rawScript = `
@@ -47,12 +48,37 @@ const BookmarkletLink = () => {
     [setOpen]
   );
 
+  const mouseDownHandler = useCallback<
+    MouseEventHandler<HTMLAnchorElement>
+  >(() => {
+    setActivated(true);
+  }, [setActivated]);
+
+  useEffect(() => {
+    const handler = () => {
+      setActivated(false);
+    };
+
+    window.addEventListener('mouseup', handler);
+    window.addEventListener('dragend', handler);
+
+    return () => {
+      window.removeEventListener('mouseup', handler);
+      window.removeEventListener('dragend', handler);
+    };
+  });
+
   return (
     <>
       <div className="flex justify-center">
         {target ? (
-          <a className="text-center" href={target} onClick={clickHandler}>
-            Inspect Domain
+          <a
+            className="text-center"
+            href={target}
+            onClick={clickHandler}
+            onMouseDown={mouseDownHandler}
+          >
+            {isActivated ? 'Inspect Domain' : 'Bookmarklet'}
           </a>
         ) : (
           <span className="text-center">Loading...</span>

components/Header.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 
 import LogoDark from '@/assets/logo-dark.svg';
 import LogoLight from '@/assets/logo-light.svg';
+import BookmarkletLink from '@/components/BookmarkletLink';
 import ThemeMenu from '@/components/ThemeMenu';
 
 const Header = () => (
@@ -12,7 +13,11 @@ const Header = () => (
         <LogoLight className="hidden h-6 dark:inline" />
         Domain Digger
       </Link>
-      <ThemeMenu />
+
+      <div className="flex items-center justify-between gap-4">
+        <BookmarkletLink />
+        <ThemeMenu />
+      </div>
     </div>
   </header>
 );