feat: support customizing mentioned users

src/components/PostEditor/Mentions.tsx

@@ -1,57 +1,138 @@
 import { Button } from '@/components/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
 import { extractMentions } from '@/lib/event'
 import { useNostr } from '@/providers/NostrProvider'
 import { Event } from 'nostr-tools'
 import { useEffect, useState } from 'react'
-import UserAvatar from '../UserAvatar'
-import Username from '../Username'
 import { useTranslation } from 'react-i18next'
+import { SimpleUserAvatar } from '../UserAvatar'
+import { SimpleUsername } from '../Username'
 
 export default function Mentions({
   content,
+  mentions,
+  setMentions,
   parentEvent
 }: {
   content: string
+  mentions: string[]
+  setMentions: (mentions: string[]) => void
   parentEvent?: Event
 }) {
   const { t } = useTranslation()
   const { pubkey } = useNostr()
   const [pubkeys, setPubkeys] = useState<string[]>([])
+  const [relatedPubkeys, setRelatedPubkeys] = useState<string[]>([])
+  const [parentEventPubkey, setParentEventPubkey] = useState<string | undefined>()
+  const [addedPubkeys, setAddedPubkeys] = useState<string[]>([])
+  const [removedPubkeys, setRemovedPubkeys] = useState<string[]>([])
 
   useEffect(() => {
-    extractMentions(content, parentEvent).then(({ pubkeys }) =>
+    extractMentions(content, parentEvent).then(({ pubkeys, relatedPubkeys, parentEventPubkey }) => {
       setPubkeys(pubkeys.filter((p) => p !== pubkey))
-    )
+      setRelatedPubkeys(relatedPubkeys.filter((p) => p !== pubkey))
+      setParentEventPubkey(parentEventPubkey !== pubkey ? parentEventPubkey : undefined)
+      const potentialMentions = [...pubkeys, ...relatedPubkeys]
+      setAddedPubkeys((pubkeys) => {
+        return pubkeys.filter((p) => potentialMentions.includes(p))
+      })
+      setRemovedPubkeys((pubkeys) => {
+        return pubkeys.filter((p) => potentialMentions.includes(p))
+      })
+    })
   }, [content, parentEvent, pubkey])
 
+  useEffect(() => {
+    const newMentions = [...pubkeys]
+    addedPubkeys.forEach((pubkey) => {
+      if (!newMentions.includes(pubkey) && pubkey !== parentEventPubkey) {
+        newMentions.push(pubkey)
+      }
+    })
+    removedPubkeys.forEach((pubkey) => {
+      const index = newMentions.indexOf(pubkey)
+      if (index !== -1) {
+        newMentions.splice(index, 1)
+      }
+    })
+    if (parentEventPubkey) {
+      newMentions.push(parentEventPubkey)
+    }
+    setMentions(newMentions)
+  }, [pubkeys, relatedPubkeys, parentEventPubkey, addedPubkeys, removedPubkeys])
+
   return (
-    <Popover>
-      <PopoverTrigger asChild>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <Button
           className="px-3"
           variant="ghost"
-          disabled={pubkeys.length === 0}
+          disabled={pubkeys.length === 0 && relatedPubkeys.length === 0 && !parentEventPubkey}
           onClick={(e) => e.stopPropagation()}
         >
-          {t('Mentions')} {pubkeys.length > 0 && `(${pubkeys.length})`}
+          {t('Mentions')} {mentions.length > 0 && `(${mentions.length})`}
         </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-48">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-48">
         <div className="space-y-2">
-          <div className="text-sm font-semibold">{t('Mentions')}:</div>
-          {pubkeys.map((pubkey, index) => (
-            <div key={`${pubkey}-${index}`} className="flex gap-1 items-center">
-              <UserAvatar userId={pubkey} size="small" />
-              <Username
+          <DropdownMenuLabel>{t('Mentions')}:</DropdownMenuLabel>
+          {parentEventPubkey && (
+            <DropdownMenuCheckboxItem className="flex gap-1 items-center" checked disabled>
+              <SimpleUserAvatar userId={parentEventPubkey} size="small" />
+              <SimpleUsername
+                userId={parentEventPubkey}
+                className="font-semibold text-sm truncate"
+                skeletonClassName="h-3"
+              />
+            </DropdownMenuCheckboxItem>
+          )}
+          {(pubkeys.length > 0 || relatedPubkeys.length > 0) && <DropdownMenuSeparator />}
+          {pubkeys.concat(relatedPubkeys).map((pubkey, index) => (
+            <DropdownMenuCheckboxItem
+              key={`${pubkey}-${index}`}
+              className="flex gap-1 items-center cursor-pointer"
+              checked={mentions.includes(pubkey)}
+              onCheckedChange={(checked) => {
+                if (checked) {
+                  setAddedPubkeys((pubkeys) => [...pubkeys, pubkey])
+                  setRemovedPubkeys((pubkeys) => pubkeys.filter((p) => p !== pubkey))
+                } else {
+                  setRemovedPubkeys((pubkeys) => [...pubkeys, pubkey])
+                  setAddedPubkeys((pubkeys) => pubkeys.filter((p) => p !== pubkey))
+                }
+              }}
+            >
+              <SimpleUserAvatar userId={pubkey} size="small" />
+              <SimpleUsername
                 userId={pubkey}
                 className="font-semibold text-sm truncate"
                 skeletonClassName="h-3"
               />
-            </div>
+            </DropdownMenuCheckboxItem>
           ))}
+          {(relatedPubkeys.length > 0 || pubkeys.length > 0) && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  setAddedPubkeys([...relatedPubkeys])
+                  setRemovedPubkeys([])
+                }}
+              >
+                {t('Select all')}
+              </DropdownMenuItem>
+            </>
+          )}
         </div>
-      </PopoverContent>
-    </Popover>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }

src/components/PostEditor/NormalPostContent.tsx

@@ -34,6 +34,7 @@ export default function NormalPostContent({
   const [addClientTag, setAddClientTag] = useState(false)
   const [specifiedRelayUrls, setSpecifiedRelayUrls] = useState<string[] | undefined>(undefined)
   const [uploadingPicture, setUploadingPicture] = useState(false)
+  const [mentions, setMentions] = useState<string[]>([])
   const canPost = !!content && !posting
 
   const post = async (e: React.MouseEvent) => {
@@ -79,11 +80,11 @@ export default function NormalPostContent({
         }
         const draftEvent =
           parentEvent && parentEvent.kind !== kinds.ShortTextNote
-            ? await createCommentDraftEvent(content, parentEvent, pictureInfos, {
+            ? await createCommentDraftEvent(content, parentEvent, pictureInfos, mentions, {
                 addClientTag,
                 protectedEvent: !!specifiedRelayUrls
               })
-            : await createShortTextNoteDraftEvent(content, pictureInfos, {
+            : await createShortTextNoteDraftEvent(content, pictureInfos, mentions, {
                 parentEvent,
                 addClientTag,
                 protectedEvent: !!specifiedRelayUrls
@@ -162,7 +163,12 @@ export default function NormalPostContent({
           </Button>
         </div>
         <div className="flex gap-2 items-center">
-          <Mentions content={content} parentEvent={parentEvent} />
+          <Mentions
+            content={content}
+            parentEvent={parentEvent}
+            mentions={mentions}
+            setMentions={setMentions}
+          />
           <div className="flex gap-2 items-center max-sm:hidden">
             <Button
               variant="secondary"

src/components/PostEditor/PicturePostContent.tsx

@@ -22,6 +22,7 @@ export default function PicturePostContent({ close }: { close: () => void }) {
   const [posting, setPosting] = useState(false)
   const [showMoreOptions, setShowMoreOptions] = useState(false)
   const [addClientTag, setAddClientTag] = useState(false)
+  const [mentions, setMentions] = useState<string[]>([])
   const [specifiedRelayUrls, setSpecifiedRelayUrls] = useState<string[] | undefined>(undefined)
   const canPost = !!content && !posting && pictureInfos.length > 0
 
@@ -38,7 +39,7 @@ export default function PicturePostContent({ close }: { close: () => void }) {
         if (!pictureInfos.length) {
           throw new Error(t('Picture note requires images'))
         }
-        const draftEvent = await createPictureNoteDraftEvent(content, pictureInfos, {
+        const draftEvent = await createPictureNoteDraftEvent(content, pictureInfos, mentions, {
           addClientTag,
           protectedEvent: !!specifiedRelayUrls
         })
@@ -99,7 +100,7 @@ export default function PicturePostContent({ close }: { close: () => void }) {
           <ChevronDown className={`transition-transform ${showMoreOptions ? 'rotate-180' : ''}`} />
         </Button>
         <div className="flex gap-2 items-center">
-          <Mentions content={content} />
+          <Mentions content={content} mentions={mentions} setMentions={setMentions} />
           <div className="flex gap-2 items-center max-sm:hidden">
             <Button
               variant="secondary"