Add right-aligned post sharing with chat, copy-link, and native share actions, plus media downloads and mobile-safe action layout.

Hop-State: A_06FPA5BJBEJ930H9MP07GNG
Hop-Proposal: R_06FPA5AQ4HY44EBZAGHH5KG
Hop-Task: T_06FPA3T7TNGR6E7KE0A2ECR
Hop-Attempt: AT_06FPA3T7TN53HDSQHEBWSS8

src/app/chat/page.tsx

@@ -41,6 +41,7 @@ export default function ChatPage() {
     const router = useRouter();
     const searchParams = useSearchParams();
     const composeHandle = searchParams.get('compose');
+    const sharedPostUrl = searchParams.get('share');
 
     // Chat Data State
     const [conversations, setConversations] = useState<Conversation[]>([]);
@@ -61,6 +62,7 @@ export default function ChatPage() {
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const [isAtBottom, setIsAtBottom] = useState(true);
+    const appliedSharedPostRef = useRef<string | null>(null);
 
     // ============================================
     // HELPER FUNCTIONS (Defined before useEffects)
@@ -337,6 +339,16 @@ export default function ChatPage() {
         }
     }, [selectedConversation]);
 
+    // A post shared from the timeline waits for the user to choose a conversation,
+    // then appears in the composer so they remain in control of sending it.
+    useEffect(() => {
+        if (!selectedConversation || !sharedPostUrl || appliedSharedPostRef.current === sharedPostUrl) return;
+
+        setNewMessage(sharedPostUrl);
+        appliedSharedPostRef.current = sharedPostUrl;
+        router.replace('/chat', { scroll: false });
+    }, [selectedConversation, sharedPostUrl, router]);
+
     // Auto-scroll to bottom of messages only if user was already at bottom
     useEffect(() => {
         if (messagesEndRef.current && isAtBottom) {
@@ -555,6 +567,12 @@ export default function ChatPage() {
                     </div>
                 </header>
 
+                {sharedPostUrl && (
+                    <div className="chat-share-intent">
+                        Choose a conversation to share this post.
+                    </div>
+                )}
+
                 <div style={{
                     padding: '16px', // Reverted from 20px to 16px as requested
                     borderBottom: '1px solid var(--border)',

src/app/globals.css

@@ -620,9 +620,79 @@ a.btn-primary:visited {
 
 .post-actions {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.post-actions-primary,
+.post-actions-secondary {
+  display: flex;
+  align-items: center;
   gap: 24px;
 }
 
+.post-actions-secondary {
+  margin-left: auto;
+}
+
+.post-share-control {
+  position: relative;
+  display: flex;
+}
+
+.post-share-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 109;
+}
+
+.post-share-menu {
+  position: absolute;
+  right: -12px;
+  bottom: calc(100% + 12px);
+  z-index: 110;
+  width: max-content;
+  min-width: 230px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--background-secondary);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
+}
+
+.post-share-menu button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 14px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.post-share-menu button:hover,
+.post-share-menu button:focus-visible {
+  background: var(--background-tertiary);
+  outline: none;
+}
+
+.chat-share-intent {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--accent) 12%, var(--background));
+  color: var(--foreground-secondary);
+  font-size: 13px;
+  text-align: center;
+}
+
 .post-action {
   display: flex;
   align-items: center;
@@ -1768,10 +1838,32 @@ a.btn-primary:visited {
 
   /* Larger touch targets for actions */
   .post-actions {
-    gap: 16px;
+    gap: 4px;
     margin-top: 12px;
   }
 
+  .post-actions-primary {
+    flex: 1;
+    min-width: 0;
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  .post-actions-secondary {
+    flex-shrink: 0;
+    gap: 0;
+  }
+
+  .post-actions-primary .post-action {
+    flex: 1;
+    min-width: 0;
+    padding-inline: 4px;
+  }
+
+  .post-actions-secondary .post-action {
+    min-width: 40px;
+  }
+
   .post-action {
     padding: 8px;
     min-width: 44px;

src/components/PostCard.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { HeartIcon, RepeatIcon, MessageIcon, FlagIcon, TrashIcon } from '@/components/Icons';
-import { Bot, MoreHorizontal, UserX, VolumeX, Globe } from 'lucide-react';
+import { Bot, MoreHorizontal, UserX, VolumeX, Globe, Download, MessageCircle, Link2, Share } from 'lucide-react';
 import { Post, LinkPreviewMediaItem } from '@/lib/types';
 import { useAuth } from '@/lib/contexts/AuthContext';
 import { useToast } from '@/lib/contexts/ToastContext';
@@ -122,6 +122,8 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
     const [reporting, setReporting] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [showMenu, setShowMenu] = useState(false);
+    const [showShareMenu, setShowShareMenu] = useState(false);
+    const [downloading, setDownloading] = useState(false);
     const [hydratedPreview, setHydratedPreview] = useState<LinkPreviewData | null>(null);
     const domain = useDomain();
     const authorHandle = useFormattedHandle(post.author.handle, post.nodeDomain);
@@ -425,6 +427,102 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
 
     const postUrl = `/u/${post.author.handle}/posts/${post.id}`;
 
+    const getAbsolutePostUrl = () => new URL(postUrl, window.location.origin).toString();
+
+    const handleSendViaChat = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowShareMenu(false);
+
+        if (!currentUser) {
+            showToast('Please log in to send posts via chat', 'error');
+            return;
+        }
+
+        router.push(`/chat?share=${encodeURIComponent(getAbsolutePostUrl())}`);
+    };
+
+    const handleCopyLink = async (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowShareMenu(false);
+
+        try {
+            await navigator.clipboard.writeText(getAbsolutePostUrl());
+            showToast('Post link copied', 'success');
+        } catch {
+            showToast('Could not copy the post link', 'error');
+        }
+    };
+
+    const handleSystemShare = async (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowShareMenu(false);
+
+        const url = getAbsolutePostUrl();
+        if (!navigator.share) {
+            try {
+                await navigator.clipboard.writeText(url);
+                showToast('Sharing is not available here, so the link was copied', 'success');
+            } catch {
+                showToast('Sharing is not available in this browser', 'error');
+            }
+            return;
+        }
+
+        try {
+            await navigator.share({
+                title: `${post.author.displayName || post.author.handle} on Synapsis`,
+                text: post.content || `Media from @${authorHandle}`,
+                url,
+            });
+        } catch (error) {
+            if (error instanceof DOMException && error.name === 'AbortError') return;
+            showToast('Could not share this post', 'error');
+        }
+    };
+
+    const getDownloadName = (url: string, mimeType: string | null | undefined, index: number) => {
+        try {
+            const pathName = new URL(url, window.location.origin).pathname;
+            const existingName = decodeURIComponent(pathName.split('/').pop() || '');
+            if (existingName && existingName.includes('.')) return existingName;
+        } catch {
+            // Fall through to a generated filename.
+        }
+
+        const extension = mimeType?.split('/')[1]?.split(';')[0]?.replace('jpeg', 'jpg') || 'bin';
+        return `synapsis-${post.author.handle}-${post.id}-${index + 1}.${extension}`;
+    };
+
+    const handleDownloadMedia = async (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!post.media?.length || downloading) return;
+
+        setDownloading(true);
+        try {
+            for (const [index, item] of post.media.entries()) {
+                const response = await fetch(item.url);
+                if (!response.ok) throw new Error(`Download failed with status ${response.status}`);
+                const blob = await response.blob();
+                const objectUrl = URL.createObjectURL(blob);
+                const anchor = document.createElement('a');
+                anchor.href = objectUrl;
+                anchor.download = getDownloadName(item.url, item.mimeType || blob.type, index);
+                document.body.appendChild(anchor);
+                anchor.click();
+                anchor.remove();
+                window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+            }
+        } catch {
+            showToast('Could not download this media', 'error');
+        } finally {
+            setDownloading(false);
+        }
+    };
+
     // Get the full handle for profile links (includes domain for remote users)
     const getProfileHandle = () => {
         // If handle already has domain, use it
@@ -919,30 +1017,81 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
                 {renderLinkPreviewCard()}
 
                 <div className="post-actions">
-                    <button className="post-action" onClick={handleComment}>
+                    <div className="post-actions-primary">
-                        <MessageIcon />
+                        <button className="post-action" onClick={handleComment} title="Reply">
-                        <span>{post.repliesCount || ''}</span>
+                            <MessageIcon />
-                    </button>
+                            <span>{post.repliesCount || ''}</span>
-                    <button className={`post-action ${reposted ? 'reposted' : ''}`} onClick={handleRepost} disabled={repostPending}>
-                        <RepeatIcon />
-                        <span>{repostsCount || ''}</span>
-                    </button>
-                    <button className={`post-action ${liked ? 'liked' : ''}`} onClick={handleLike}>
-                        <HeartIcon filled={liked} />
-                        <span>{likesCount || ''}</span>
-                    </button>
-                    {!isOwnOrOwnedBotPost && (
-                        <button className="post-action" onClick={handleReport} disabled={reporting}>
-                            <FlagIcon />
-                            <span>{reporting ? '...' : ''}</span>
                         </button>
-                    )}
+                        <button className={`post-action ${reposted ? 'reposted' : ''}`} onClick={handleRepost} disabled={repostPending} title="Repost">
-                    {canDeletePost && (
+                            <RepeatIcon />
+                            <span>{repostsCount || ''}</span>
+                        </button>
+                        <button className={`post-action ${liked ? 'liked' : ''}`} onClick={handleLike} title="Like">
+                            <HeartIcon filled={liked} />
+                            <span>{likesCount || ''}</span>
+                        </button>
+                        {!isOwnOrOwnedBotPost && (
+                            <button className="post-action" onClick={handleReport} disabled={reporting} title="Report post">
+                                <FlagIcon />
+                                <span>{reporting ? '...' : ''}</span>
+                            </button>
+                        )}
+                        {canDeletePost && (
                             <button className="post-action delete-action" onClick={handleDelete} disabled={deleting} title="Delete post">
                                 <TrashIcon />
                                 <span>{deleting ? '...' : ''}</span>
                             </button>
                         )}
+                    </div>
+                    <div className="post-actions-secondary">
+                        {post.media && post.media.length > 0 && (
+                            <button className="post-action" onClick={handleDownloadMedia} disabled={downloading} title="Download media" aria-label="Download media">
+                                <Download size={20} />
+                            </button>
+                        )}
+                        <div className="post-share-control">
+                            <button
+                                className="post-action"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    setShowShareMenu((visible) => !visible);
+                                }}
+                                title="Share post"
+                                aria-label="Share post"
+                                aria-haspopup="menu"
+                                aria-expanded={showShareMenu}
+                            >
+                                <Share size={20} />
+                            </button>
+                            {showShareMenu && (
+                                <>
+                                    <div
+                                        className="post-share-backdrop"
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            setShowShareMenu(false);
+                                        }}
+                                    />
+                                    <div className="post-share-menu" role="menu" onClick={(e) => e.stopPropagation()}>
+                                        <button type="button" role="menuitem" onClick={handleSendViaChat}>
+                                            <MessageCircle size={22} />
+                                            Send via Chat
+                                        </button>
+                                        <button type="button" role="menuitem" onClick={handleCopyLink}>
+                                            <Link2 size={22} />
+                                            Copy Link
+                                        </button>
+                                        <button type="button" role="menuitem" onClick={handleSystemShare}>
+                                            <Share size={22} />
+                                            Share post via…
+                                        </button>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
                 </div>
             </article>
         </>