From 50eb5e7e0fdf1ceb81e152042fb31d23e56590ba Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 6 Oct 2025 18:59:31 +0200
Subject: [PATCH] Add Share button to article page for copying article links
 (#13)

* Initial plan

* Add share button to article page with copy-to-clipboard functionality

Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>
---
 src/pages/BlogPostPage.tsx | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/pages/BlogPostPage.tsx b/src/pages/BlogPostPage.tsx
index 398d5ec..4c72806 100644
--- a/src/pages/BlogPostPage.tsx
+++ b/src/pages/BlogPostPage.tsx
@@ -15,15 +15,19 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
-import { Calendar, Heart, Edit, ArrowLeft } from 'lucide-react';
+import { Calendar, Heart, Edit, ArrowLeft, Share2, Check } from 'lucide-react';
 import { genUserName } from '@/lib/genUserName';
 import { calculateReadingTime } from '@/lib/calculateReadingTime';
+import { useToast } from '@/hooks/useToast';
+import { useState } from 'react';
 import NotFound from '@/pages/NotFound';
 
 export default function BlogPostPage() {
   const { nip19: naddr } = useParams<{ nip19: string }>();
   const navigate = useNavigate();
   const { user } = useCurrentUser();
+  const { toast } = useToast();
+  const [copied, setCopied] = useState(false);
 
   // Decode naddr
   let pubkey = '';
@@ -101,6 +105,25 @@ export default function BlogPostPage() {
     react({ eventId: post.id, eventAuthor: post.pubkey });
   };
 
+  const handleShare = async () => {
+    try {
+      const articleUrl = window.location.href;
+      await navigator.clipboard.writeText(articleUrl);
+      setCopied(true);
+      toast({
+        title: "Link copied!",
+        description: "Article link copied to clipboard",
+      });
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast({
+        title: "Failed to copy",
+        description: "Could not copy link to clipboard",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <div className="min-h-screen">
       {/* Sticky progress bar */}
@@ -217,6 +240,19 @@ export default function BlogPostPage() {
             showCount={true}
           />
 
+          <Button
+            variant="outline"
+            onClick={handleShare}
+            className="gap-2"
+          >
+            {copied ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <Share2 className="h-4 w-4" />
+            )}
+            <span className="text-xs">Share</span>
+          </Button>
+
           <BookmarkButton
             articleCoordinate={`${post.kind}:${post.pubkey}:${identifier}`}
             variant="outline"