feat: add url shortner

components/selection-toolbar/share-modal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { useState } from "react";
 import { useCopyFeedback } from "./shared";
-import { buildHighlightUrl } from "@/lib/text-highlight";
+import { buildShortHighlightUrl } from "@/lib/text-highlight";
 import { createPortal } from "react-dom";
 import { X, MessageSquare, ExternalLink } from "lucide-react";
 import {
@@ -24,6 +25,18 @@ export function ShareModal({
   isMobile: boolean;
 }) {
   const { copied, copy } = useCopyFeedback();
+  const [generating, setGenerating] = useState(false);
+
+  async function handleCopyShareLink() {
+    if (generating) return;
+    setGenerating(true);
+    try {
+      const url = await buildShortHighlightUrl(selectedText);
+      await copy(url);
+    } finally {
+      setGenerating(false);
+    }
+  }
 
   const shareOptions = [
     {
@@ -41,12 +54,17 @@ export function ShareModal({
       label: "Share Link",
       icon: <ExternalLink className="size-4" />,
       description: "Copy a shareable link",
-      onClick: () => {
-        copy(buildHighlightUrl(selectedText));
-      },
+      onClick: handleCopyShareLink,
     },
   ];
 
+  function linkLabel(optKey: string, optLabel: string) {
+    if (optKey !== "link") return optLabel;
+    if (copied) return "Link Copied!";
+    if (generating) return "Generating link…";
+    return optLabel;
+  }
+
   if (isMobile) {
     return (
       <Drawer open={open} onOpenChange={(o) => !o && onClose()}>
@@ -72,7 +90,7 @@ export function ShareModal({
                 </div>
                 <div>
                   <p className="text-sm font-medium text-white/90">
-                    {opt.key === "link" && copied ? "Link Copied!" : opt.label}
+                    {linkLabel(opt.key, opt.label)}
                   </p>
                   <p className="text-xs text-white/50">{opt.description}</p>
                 </div>
@@ -130,7 +148,7 @@ export function ShareModal({
               </div>
               <div>
                 <p className="text-sm font-medium text-white/90">
-                  {opt.key === "link" && copied ? "Link Copied!" : opt.label}
+                  {linkLabel(opt.key, opt.label)}
                 </p>
                 <p className="text-xs text-white/50">{opt.description}</p>
               </div>