From be03b9c9cc972075a1efe986489f7faf78724938 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 22 Nov 2025 01:59:02 +0100
Subject: [PATCH] feat: add three-dot menu to profile view

- Add menu button with options: Copy Link, Share, Open with njump, Open with Native App
- Position menu next to AuthorCard in profile header
- Add click-outside detection to close menu
- Style menu consistently with other menus in the app
---
 src/components/Profile.tsx        | 115 +++++++++++++++++++++++++++++-
 src/styles/components/me.css      |   3 +-
 src/styles/components/profile.css |  89 +++++++++++++++++++++++
 3 files changed, 203 insertions(+), 4 deletions(-)

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 17ed5e33..ec3afe73 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faPenToSquare, faEllipsisH, faCopy, faShare, faExternalLinkAlt, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
 import { IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
@@ -20,6 +20,7 @@ import { Hooks } from 'applesauce-react'
 import { readingProgressController } from '../services/readingProgressController'
 import { writingsController } from '../services/writingsController'
 import { highlightsController } from '../services/highlightsController'
+import { getProfileUrl, getNostrUrl } from '../config/nostrGateways'
 
 interface ProfileProps {
   relayPool: RelayPool
@@ -38,6 +39,8 @@ const Profile: React.FC<ProfileProps> = ({
   const activeAccount = Hooks.useActiveAccount()
   const [activeTab, setActiveTab] = useState<'highlights' | 'writings'>(propActiveTab || 'highlights')
   const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [showProfileMenu, setShowProfileMenu] = useState(false)
+  const profileMenuRef = useRef<HTMLDivElement>(null)
   
   // Reading progress state (naddr -> progress 0-1)
   const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
@@ -168,6 +171,68 @@ const Profile: React.FC<ProfileProps> = ({
   const npub = nip19.npubEncode(pubkey)
   const showSkeletons = cachedHighlights.length === 0 && sortedWritings.length === 0
 
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
+        setShowProfileMenu(false)
+      }
+    }
+
+    if (showProfileMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showProfileMenu])
+
+  // Profile menu handlers
+  const handleMenuToggle = () => {
+    setShowProfileMenu(!showProfileMenu)
+  }
+
+  const handleCopyProfileLink = async () => {
+    try {
+      const borisUrl = `${window.location.origin}/p/${npub}`
+      await navigator.clipboard.writeText(borisUrl)
+      setShowProfileMenu(false)
+    } catch (e) {
+      console.warn('Copy failed', e)
+    }
+  }
+
+  const handleShareProfile = async () => {
+    try {
+      const borisUrl = `${window.location.origin}/p/${npub}`
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: 'Profile', 
+          url: borisUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(borisUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowProfileMenu(false)
+    }
+  }
+
+  const handleOpenPortal = () => {
+    const portalUrl = getProfileUrl(npub)
+    window.open(portalUrl, '_blank', 'noopener,noreferrer')
+    setShowProfileMenu(false)
+  }
+
+  const handleOpenNative = () => {
+    const nativeUrl = `nostr:${npub}`
+    window.location.href = nativeUrl
+    setShowProfileMenu(false)
+  }
+
   const renderTabContent = () => {
     switch (activeTab) {
       case 'highlights':
@@ -236,7 +301,51 @@ const Profile: React.FC<ProfileProps> = ({
         pullPosition={pullPosition}
       />
       <div className="explore-header">
-        <AuthorCard authorPubkey={pubkey} clickable={false} />
+        <div className="profile-header-wrapper">
+          <AuthorCard authorPubkey={pubkey} clickable={false} />
+          <div className="profile-menu-wrapper" ref={profileMenuRef}>
+            <button
+              className="profile-menu-btn"
+              onClick={handleMenuToggle}
+              title="More options"
+              aria-label="Profile menu"
+            >
+              <FontAwesomeIcon icon={faEllipsisH} />
+            </button>
+            {showProfileMenu && (
+              <div className="profile-menu">
+                <button
+                  className="profile-menu-item"
+                  onClick={handleCopyProfileLink}
+                >
+                  <FontAwesomeIcon icon={faCopy} />
+                  <span>Copy Link</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={handleShareProfile}
+                >
+                  <FontAwesomeIcon icon={faShare} />
+                  <span>Share</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={handleOpenPortal}
+                >
+                  <FontAwesomeIcon icon={faExternalLinkAlt} />
+                  <span>Open with njump</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={handleOpenNative}
+                >
+                  <FontAwesomeIcon icon={faMobileAlt} />
+                  <span>Open with Native App</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
         
         <div className="me-tabs">
           <button
diff --git a/src/styles/components/me.css b/src/styles/components/me.css
index 1ed24471..7b563e36 100644
--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -73,7 +73,8 @@
 
 /* Align highlight list width with profile card width on /my */
 .me-highlights-list { padding-left: 0; padding-right: 0; }
-.explore-header .author-card { max-width: 600px; margin: 0 auto; width: 100%; }
+.explore-header .profile-header-wrapper { max-width: 600px; margin: 0 auto; width: 100%; }
+.explore-header .author-card { max-width: none; margin: 0; width: auto; flex: 1; }
 
 /* Hide tab labels on mobile to save space */
 @media (max-width: 768px) {
diff --git a/src/styles/components/profile.css b/src/styles/components/profile.css
index caad4eaa..20cbdb1d 100644
--- a/src/styles/components/profile.css
+++ b/src/styles/components/profile.css
@@ -10,6 +10,83 @@
 .author-card-name { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; text-align: left; }
 .author-card-bio { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
 
+/* Profile header wrapper for menu positioning */
+.profile-header-wrapper {
+  position: relative;
+  max-width: 600px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+/* Profile menu */
+.profile-menu-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  margin-top: 0.5rem;
+}
+
+.profile-menu-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+  border-radius: 6px;
+}
+
+.profile-menu-btn:hover {
+  color: var(--color-primary);
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.profile-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  min-width: 180px;
+  overflow: hidden;
+}
+
+.profile-menu-item {
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--color-text);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.profile-menu-item:hover {
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--color-text);
+}
+
+.profile-menu-item svg {
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
 @media (max-width: 768px) {
   .author-card-container { 
     padding: 1.5rem 1rem; 
@@ -26,5 +103,17 @@
   .author-card-avatar svg { font-size: 2rem; }
   .author-card-name { font-size: 0.95rem; }
   .author-card-bio { font-size: 0.85rem; -webkit-line-clamp: 2; }
+  
+  .profile-header-wrapper {
+    padding: 0 1rem;
+  }
+  
+  .profile-menu-wrapper {
+    margin-top: 0.25rem;
+  }
+  
+  .profile-menu-btn {
+    padding: 0.5rem;
+  }
 }