Added More menu for feed items and static Delete menu item

ref https://linear.app/tryghost/issue/AP-308/ui-for-deleting-replies

- Added `dotdotdot` icon
- Added optional `destructive` prop to `Menu` items

apps/admin-x-activitypub/src/components/feed/FeedItem.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
-import {Button, Heading, Icon} from '@tryghost/admin-x-design-system';
+import {Button, Heading, Icon, Menu, MenuItem} from '@tryghost/admin-x-design-system';
 
 import APAvatar from '../global/APAvatar';
 
@@ -220,11 +220,37 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
         // Don't need to know about setting timeouts or anything like that
     };
 
+    const handleDelete = () => {
+        // Handle delete action
+    };
+
     let author = actor;
     if (type === 'Announce' && object.type === 'Note') {
         author = typeof object.attributedTo === 'object' ? object.attributedTo as ActorProperties : actor;
     }
 
+    const menuItems: MenuItem[] = [];
+
+    // TODO: If this is your own Note/Article, you should be able to delete it
+    menuItems.push({
+        id: 'delete',
+        label: 'Delete',
+        destructive: true,
+        onClick: handleDelete
+    });
+
+    const UserMenuTrigger = (
+        <Button
+            className='relative z-10 ml-auto self-start'
+            hideLabel={true}
+            icon='dotdotdot'
+            iconColorClass='text-grey-600'
+            id='more'
+            size='sm'
+            unstyled={true}
+        />
+    );
+
     if (layout === 'feed') {
         return (
             <>
@@ -236,7 +262,7 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
                         </div>}
                         <div className={`border-1 z-10 -my-1 grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] gap-x-3 gap-y-2 border-b-grey-200 pb-6`} data-test-activity>
                             <APAvatar author={author}/>
-                            {/* <div className='border-1 z-10 -mt-1 flex w-full flex-col items-start justify-between border-b border-b-grey-200 pb-4' data-test-activity> */}
+                            <div className='flex justify-between'>
                                 <div className='relative z-10 flex w-full flex-col overflow-visible text-[1.5rem]'>
                                     <div className='flex'>
                                         <span className='truncate whitespace-nowrap font-bold' data-test-activity-heading>{author.name}</span>
@@ -246,6 +272,9 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
                                         <span className='truncate text-grey-700'>{getUsername(author)}</span>
                                     </div>
                                 </div>
+                                <Menu items={menuItems} position='end' trigger={UserMenuTrigger}/>
+                                
+                            </div>
                             <div className={`relative z-10 col-start-2 col-end-3 w-full gap-4`}>
                                 <div className='flex flex-col'>
                                     {object.name && <Heading className='mb-1 leading-tight' level={4} data-test-activity-heading>{object.name}</Heading>}

apps/admin-x-design-system/src/assets/icons/dotdotdot.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      circle{fill:currentColor}
+    </style>
+  </defs>
+  <circle cx="3.25" cy="12" r="2.6"/>
+  <circle cx="12" cy="12" r="2.6"/>
+  <circle cx="20.75" cy="12" r="2.6"/>
+</svg>

apps/admin-x-design-system/src/global/Menu.tsx

@@ -5,6 +5,7 @@ import Popover, {PopoverPosition} from './Popover';
 export type MenuItem = {
     id: string,
     label: string;
+    destructive?: boolean;
     onClick?: () => void
 }
 
@@ -30,7 +31,7 @@ const Menu: React.FC<MenuProps> = ({
         <Popover position={position} trigger={trigger} closeOnItemClick>
             <div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
                 {items.map(item => (
-                    <button key={item.id} className="mx-1 block cursor-pointer rounded-[2.5px] px-4 py-1.5 text-left text-sm hover:bg-grey-100 dark:hover:bg-grey-800" type="button" onClick={item.onClick}>{item.label}</button>
+                    <button key={item.id} className={`mx-1 block cursor-pointer rounded-[2.5px] px-4 py-1.5 text-left text-sm hover:bg-grey-100 ${item.destructive && ' text-red-500'}`} type="button" onClick={item.onClick}>{item.label}</button>
                 ))}
             </div>
         </Popover>