From 8279df02d3fc39d92245f86570f362f6b742f055 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Fri, 13 Feb 2026 09:02:16 +0100
Subject: [PATCH] feat(share): integrate share button in reader views and fix
 types

---
 web/src/components/MobileReaderView.tsx |  2 ++
 web/src/components/ReaderView.tsx       |  5 ++++-
 web/src/components/ShareButton.tsx      | 14 +++++++-------
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/src/components/MobileReaderView.tsx b/web/src/components/MobileReaderView.tsx
index 05c35e7..ff3f261 100644
--- a/web/src/components/MobileReaderView.tsx
+++ b/web/src/components/MobileReaderView.tsx
@@ -1,5 +1,6 @@
 import type { Article } from '../api/articles';
 import { useSwipeable } from 'react-swipeable';
+import { ShareButton } from './ShareButton';
 
 interface MobileReaderViewProps {
     article: Article;
@@ -71,6 +72,7 @@ export function MobileReaderView({ article, onClose, onToggleFavorite, onNext, o
 
                     {/* Mobile Action Bar */}
                     <div className="flex items-center justify-between py-6 border-y border-white/5 mb-8">
+                        <ShareButton article={article} />
                         <button
                             onClick={() => onToggleFavorite(article.id)}
                             className={`flex items-center space-x-3 px-4 py-2 rounded-full border transition-all duration-300 ${article.is_favorite
diff --git a/web/src/components/ReaderView.tsx b/web/src/components/ReaderView.tsx
index 0c5b8a8..0e72bb7 100644
--- a/web/src/components/ReaderView.tsx
+++ b/web/src/components/ReaderView.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { ReaderViewProps } from './ReaderView'; // Self-reference import seems wrong, removing.
+import { ShareButton } from './ShareButton';
+// No need to import ReaderViewProps if we define it here, but let's keep clean.
 import { type Article, articlesApi } from '../api/articles';
 
 interface ReaderViewProps {
@@ -113,6 +115,7 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
 
                     <div className="flex items-center justify-between py-8 border-y border-white/5 mb-16">
                         <div className="flex items-center space-x-6">
+                            <ShareButton article={article} />
                             <button
                                 onClick={() => onToggleFavorite(article.id)}
                                 className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
diff --git a/web/src/components/ShareButton.tsx b/web/src/components/ShareButton.tsx
index d4a84ba..d779ec5 100644
--- a/web/src/components/ShareButton.tsx
+++ b/web/src/components/ShareButton.tsx
@@ -11,9 +11,9 @@ export function ShareButton({ article, className = "" }: ShareButtonProps) {
     const [copied, setCopied] = useState(false);
 
     const shareData = {
-        title: article.title,
-        text: article.summary ? article.summary.substring(0, 100) + '...' : article.title,
-        url: article.url,
+        title: article.title || 'Article FlowReader',
+        text: article.summary ? article.summary.substring(0, 100) + '...' : (article.title || ''),
+        url: article.url || window.location.href,
     };
 
     const handleShare = async () => {
@@ -65,7 +65,7 @@ export function ShareButton({ article, className = "" }: ShareButtonProps) {
                     <div className="absolute right-0 bottom-12 mt-2 w-48 bg-white dark:bg-carbon border border-gray-200 dark:border-white/10 rounded-xl shadow-xl z-50 overflow-hidden text-sm animate-in fade-in zoom-in-95 duration-200 origin-bottom-right">
                         <div className="py-1">
                             <button
-                                onClick={() => openLink(`https://wa.me/?text=${encodeURIComponent(article.title + ' ' + article.url)}`)}
+                                onClick={() => openLink(`https://wa.me/?text=${encodeURIComponent((article.title || '') + ' ' + (article.url || ''))}`)}
                                 className="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-white/5 flex items-center gap-3 text-gray-700 dark:text-gray-200"
                             >
                                 <span className="text-green-500">
@@ -74,7 +74,7 @@ export function ShareButton({ article, className = "" }: ShareButtonProps) {
                                 WhatsApp
                             </button>
                             <button
-                                onClick={() => openLink(`mailto:?subject=${encodeURIComponent(article.title)}&body=${encodeURIComponent(article.url)}`)}
+                                onClick={() => openLink(`mailto:?subject=${encodeURIComponent(article.title || '')}&body=${encodeURIComponent(article.url || '')}`)}
                                 className="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-white/5 flex items-center gap-3 text-gray-700 dark:text-gray-200"
                             >
                                 <span className="text-gray-500">
@@ -83,7 +83,7 @@ export function ShareButton({ article, className = "" }: ShareButtonProps) {
                                 Email
                             </button>
                             <button
-                                onClick={() => openLink(`https://twitter.com/intent/tweet?text=${encodeURIComponent(article.title)}&url=${encodeURIComponent(article.url)}`)}
+                                onClick={() => openLink(`https://twitter.com/intent/tweet?text=${encodeURIComponent(article.title || '')}&url=${encodeURIComponent(article.url || '')}`)}
                                 className="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-white/5 flex items-center gap-3 text-gray-700 dark:text-gray-200"
                             >
                                 <span className="text-blue-400">
@@ -92,7 +92,7 @@ export function ShareButton({ article, className = "" }: ShareButtonProps) {
                                 X / Twitter
                             </button>
                             <button
-                                onClick={() => openLink(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(article.url)}`)}
+                                onClick={() => openLink(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(article.url || '')}`)}
                                 className="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-white/5 flex items-center gap-3 text-gray-700 dark:text-gray-200"
                             >
                                 <span className="text-blue-700">