shares updated

frontend/package.json

@@ -31,6 +31,7 @@
     "posthog-js": "^1.356.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   },

frontend/src/components/features/social-share/ShareButton.tsx

@@ -4,12 +4,11 @@ import { type SharePlatform, getPlatformLabel } from '@/lib/social-utils';
 import { 
   Facebook, 
   Twitter, 
-  MessageCircle, 
   Send, 
-  Mail, 
   Link, 
   Share2 
 } from 'lucide-react';
+import { FaInstagram, FaTiktok } from 'react-icons/fa';
 
 interface ShareButtonProps {
   platform: SharePlatform;
@@ -52,12 +51,12 @@ export function ShareButton({
         return Facebook;
       case 'twitter':
         return Twitter;
-      case 'whatsapp':
-        return MessageCircle;
+      case 'instagram':
+        return FaInstagram;
+      case 'tiktok':
+        return FaTiktok;
       case 'telegram':
         return Send;
-      case 'email':
-        return Mail;
       case 'link':
         return Link;
       default:

frontend/src/components/features/social-share/SocialShareButtons.tsx

@@ -14,7 +14,7 @@ interface SocialShareButtonsProps extends ShareData {
   onShare?: (platform: SharePlatform) => void;
 }
 
-const PLATFORMS: SharePlatform[] = ['facebook', 'twitter', 'whatsapp', 'telegram', 'email', 'link'];
+const PLATFORMS: SharePlatform[] = ['facebook', 'twitter', 'instagram', 'tiktok', 'telegram', 'link'];
 
 export function SocialShareButtons({
   articleId,
@@ -62,15 +62,38 @@ export function SocialShareButtons({
         onShare(platform);
       }
 
-      // Open share URL in new window for social platforms
-      if (platform !== 'link') {
+      // For Instagram and TikTok, use Web Share API if available
+      if (platform === 'instagram' || platform === 'tiktok') {
+        if (navigator.share) {
+          try {
+            await navigator.share({
+              title: shareData.title,
+              text: shareData.excerpt,
+              url: shareData.url,
+            });
+          } catch (shareError) {
+            // User cancelled or share failed - fallback to copying link
+            if ((shareError as Error).name !== 'AbortError') {
+              const { copyToClipboard } = await import('@/lib/social-utils');
+              await copyToClipboard(shareData.url);
+              alert('Link copied! You can now paste it in ' + (platform === 'instagram' ? 'Instagram' : 'TikTok'));
+            }
+          }
+        } else {
+          // Web Share API not available - copy link as fallback
+          const { copyToClipboard } = await import('@/lib/social-utils');
+          await copyToClipboard(shareData.url);
+          alert('Link copied! You can now paste it in ' + (platform === 'instagram' ? 'Instagram' : 'TikTok'));
+        }
+      } else if (platform !== 'link') {
+        // Open share URL in new window for other social platforms
         const shareUrl = getShareUrl(platform, shareData);
         window.open(shareUrl, '_blank', 'noopener,noreferrer');
       }
     } catch (error) {
       console.error('Failed to track share:', error);
       // Still open the share URL even if tracking fails
-      if (platform !== 'link') {
+      if (platform !== 'link' && platform !== 'instagram' && platform !== 'tiktok') {
         const shareUrl = getShareUrl(platform, shareData);
         window.open(shareUrl, '_blank', 'noopener,noreferrer');
       }

frontend/src/lib/social-utils.ts

@@ -1,4 +1,4 @@
-export type SharePlatform = 'facebook' | 'twitter' | 'whatsapp' | 'telegram' | 'email' | 'link';
+export type SharePlatform = 'facebook' | 'twitter' | 'instagram' | 'tiktok' | 'telegram' | 'link';
 
 export interface ShareData {
   title: string;
@@ -12,22 +12,23 @@ export const getShareUrl = (
   platform: Exclude<SharePlatform, 'link'>,
   data: ShareData
 ): string => {
-  const { title, url, excerpt } = data;
+  const { title, url } = data;
   const encodedUrl = encodeURIComponent(url);
   const encodedTitle = encodeURIComponent(title);
-  const encodedText = encodeURIComponent(excerpt ? `${title} - ${excerpt}` : title);
 
   switch (platform) {
     case 'facebook':
       return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
     case 'twitter':
       return `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`;
-    case 'whatsapp':
-      return `https://wa.me/?text=${encodedText}%20${encodedUrl}`;
+    case 'instagram':
+      // Instagram doesn't have a web share URL, will use Web Share API in component
+      return url;
+    case 'tiktok':
+      // TikTok has limited web share support, will use Web Share API in component
+      return url;
     case 'telegram':
       return `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`;
-    case 'email':
-      return `mailto:?subject=${encodedTitle}&body=${encodedUrl}`;
     default:
       return url;
   }
@@ -64,12 +65,12 @@ export const getPlatformIcon = (platform: SharePlatform): string => {
       return 'Facebook';
     case 'twitter':
       return 'Twitter';
-    case 'whatsapp':
-      return 'MessageCircle';
+    case 'instagram':
+      return 'Instagram';
+    case 'tiktok':
+      return 'TikTok';
     case 'telegram':
       return 'Send';
-    case 'email':
-      return 'Mail';
     case 'link':
       return 'Link';
     default:
@@ -83,12 +84,12 @@ export const getPlatformLabel = (platform: SharePlatform): string => {
       return 'Facebook';
     case 'twitter':
       return 'Twitter';
-    case 'whatsapp':
-      return 'WhatsApp';
+    case 'instagram':
+      return 'Instagram';
+    case 'tiktok':
+      return 'TikTok';
     case 'telegram':
       return 'Telegram';
-    case 'email':
-      return 'Email';
     case 'link':
       return 'Copy Link';
     default: