[Glitch] Add more actions to collections notifications & context menus

Port 543db6d24c8764fe3975a138c777ffb1c28ae29e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/collections/components/collection_menu.tsx

@@ -4,6 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { matchPath } from 'react-router';
 
+import { showAlert } from '@/flavours/glitch/actions/alerts';
+import { initBlockModal } from '@/flavours/glitch/actions/blocks';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import MoreVertIcon from '@/material-icons/400-24px/more_vert.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -21,6 +23,18 @@ const messages = defineMessages({
     id: 'collections.view_collection',
     defaultMessage: 'View collection',
   },
+  share: {
+    id: 'collections.share_short',
+    defaultMessage: 'Share',
+  },
+  copyLink: {
+    id: 'collections.copy_link',
+    defaultMessage: 'Copy link',
+  },
+  copyLinkConfirmation: {
+    id: 'collections.copy_link_confirmation',
+    defaultMessage: 'Copied collection link to clipboard',
+  },
   viewOtherCollections: {
     id: 'collections.view_other_collections_by_user',
     defaultMessage: 'View other collections by this user',
@@ -33,6 +47,10 @@ const messages = defineMessages({
     id: 'collections.report_collection',
     defaultMessage: 'Report this collection',
   },
+  blockOwner: {
+    id: 'collections.block_collection_owner',
+    defaultMessage: 'Block account',
+  },
   revoke: {
     id: 'collections.revoke_collection_inclusion',
     defaultMessage: 'Remove myself from this collection',
@@ -42,15 +60,29 @@ const messages = defineMessages({
 
 export const CollectionMenu: React.FC<{
   collection: ApiCollectionJSON;
-  context: 'list' | 'collection';
+  context: 'list' | 'notifications' | 'collection';
   className?: string;
 }> = ({ collection, context, className }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const { id, name, account_id } = collection;
+  const { id, name, account_id, items } = collection;
-  const isOwnCollection = account_id === me;
   const ownerAccount = useAccount(account_id);
+  const isOwnCollection = account_id === me;
+  const currentAccountInCollection = items.find(
+    (item) => item.account_id === me,
+  );
+
+  const openShareModal = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'SHARE_COLLECTION',
+        modalProps: {
+          collection,
+        },
+      }),
+    );
+  }, [collection, dispatch]);
 
   const openDeleteConfirmation = useCallback(() => {
     dispatch(
@@ -75,9 +107,9 @@ export const CollectionMenu: React.FC<{
     );
   }, [collection, dispatch]);
 
-  const currentAccountInCollection = collection.items.find(
+  const openBlockModal = useCallback(() => {
-    (item) => item.account_id === me,
+    dispatch(initBlockModal(ownerAccount));
-  );
+  }, [ownerAccount, dispatch]);
 
   const openRevokeConfirmation = useCallback(() => {
     void dispatch(
@@ -92,8 +124,28 @@ export const CollectionMenu: React.FC<{
   }, [collection.id, currentAccountInCollection?.id, dispatch]);
 
   const menu = useMemo(() => {
+    const viewCollectionItem: MenuItem = {
+      text: intl.formatMessage(messages.view),
+      to: `/collections/${id}`,
+    };
+    const shareItems: MenuItem[] = [
+      {
+        text: intl.formatMessage(messages.share),
+        action: openShareModal,
+      },
+      {
+        text: intl.formatMessage(messages.copyLink),
+        action: () => {
+          void navigator.clipboard.writeText(`/collections/${id}`);
+          dispatch(showAlert({ message: messages.copyLinkConfirmation }));
+        },
+      },
+    ];
+
     if (isOwnCollection) {
-      const commonItems: MenuItem[] = [
+      const ownerItems: MenuItem[] = [
+        ...shareItems,
+        null,
         {
           text: intl.formatMessage(editorMessages.manageAccounts),
           to: `/collections/${id}/edit`,
@@ -111,18 +163,14 @@ export const CollectionMenu: React.FC<{
       ];
 
       if (context === 'list') {
-        return [
+        return [viewCollectionItem, ...ownerItems];
-          { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
-          null,
-          ...commonItems,
-        ];
       } else {
-        return commonItems;
+        return ownerItems;
       }
     } else {
-      const items: MenuItem[] = [];
+      const nonOwnerItems: MenuItem[] = [viewCollectionItem, ...shareItems];
 
-      if (ownerAccount) {
+      if (context !== 'notifications' && ownerAccount) {
         const featuredCollectionsPath = `/@${ownerAccount.acct}/featured`;
         // Don't show menu link to featured collections while on that very page
         if (
@@ -131,42 +179,50 @@ export const CollectionMenu: React.FC<{
             exact: true,
           })
         ) {
-          items.push(
+          nonOwnerItems.push({
-            ...[
+            text: intl.formatMessage(messages.viewOtherCollections),
-              {
+            to: featuredCollectionsPath,
-                text: intl.formatMessage(messages.viewOtherCollections),
+          });
-                to: featuredCollectionsPath,
-              },
-              null,
-            ],
-          );
         }
       }
 
-      if (currentAccountInCollection) {
+      nonOwnerItems.push(null);
-        items.push({
+
+      // Collection notifications already have a prominent 'Remove me' button
+      if (currentAccountInCollection && context !== 'notifications') {
+        nonOwnerItems.push({
           text: intl.formatMessage(messages.revoke),
           action: openRevokeConfirmation,
         });
       }
 
-      items.push({
+      nonOwnerItems.push({
         text: intl.formatMessage(messages.report),
         action: openReportModal,
       });
 
-      return items;
+      if (currentAccountInCollection) {
+        nonOwnerItems.push({
+          text: intl.formatMessage(messages.blockOwner),
+          action: openBlockModal,
+        });
+      }
+
+      return nonOwnerItems;
     }
   }, [
-    isOwnCollection,
     intl,
     id,
+    openShareModal,
+    isOwnCollection,
+    dispatch,
     openDeleteConfirmation,
     context,
-    currentAccountInCollection,
-    openRevokeConfirmation,
     ownerAccount,
+    currentAccountInCollection,
     openReportModal,
+    openBlockModal,
+    openRevokeConfirmation,
   ]);
 
   return (

app/javascript/flavours/glitch/features/collections/detail/index.tsx

@@ -115,7 +115,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
   );
   const isCurrentUserInCollection = !isOwnCollection && currentUserIndex > -1;
 
-  const handleShare = useCallback(() => {
+  const openShareModal = useCallback(() => {
     dispatch(
       openModal({
         modalType: 'SHARE_COLLECTION',
@@ -132,9 +132,9 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
     if (isNewCollection) {
       // Replace with current pathname to clear `newCollection` state
       history.replace(location.pathname);
-      handleShare();
+      openShareModal();
     }
-  }, [history, handleShare, isNewCollection, location.pathname]);
+  }, [history, openShareModal, isNewCollection, location.pathname]);
 
   return (
     <header className={classes.header}>
@@ -150,7 +150,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
             icon='share-icon'
             title={intl.formatMessage(messages.share)}
             className={classes.iconButton}
-            onClick={handleShare}
+            onClick={openShareModal}
           />
           <CollectionMenu
             context='collection'

app/javascript/flavours/glitch/features/notifications_v2/components/notification_collection.module.scss

@@ -0,0 +1,17 @@
+.actions {
+  display: flex;
+  align-items: center;
+}
+
+.menuButton {
+  box-sizing: content-box;
+  margin-inline-start: auto;
+  padding: 4px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-primary);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}

app/javascript/flavours/glitch/features/notifications_v2/components/notification_collection.tsx

@@ -2,8 +2,12 @@ import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { DisplayNameSimple } from '@/flavours/glitch/components/display_name/simple';
+import { Button } from '@/flavours/glitch/components/button';
+import { LinkedDisplayName } from '@/flavours/glitch/components/display_name';
 import { Icon } from '@/flavours/glitch/components/icon';
+import { CollectionMenu } from '@/flavours/glitch/features/collections/components/collection_menu';
+import { CollectionPreviewCard } from '@/flavours/glitch/features/collections/components/collection_preview_card';
+import { useConfirmRevoke } from '@/flavours/glitch/features/collections/detail/revoke_collection_inclusion_modal';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import CollectionsFilledIcon from '@/material-icons/400-24px/category-fill.svg?react';
 import type {
@@ -11,7 +15,7 @@ import type {
   NotificationGroupCollectionUpdate,
 } from 'flavours/glitch/models/notification_group';
 
-import { CollectionPreviewCard } from '../../collections/components/collection_preview_card';
+import classes from './notification_collection.module.scss';
 
 export const NotificationCollection: React.FC<{
   notification:
@@ -21,6 +25,7 @@ export const NotificationCollection: React.FC<{
 }> = ({ notification, unread }) => {
   const { collection, type } = notification;
   const collectionCreatorAccount = useAccount(collection.account_id);
+  const confirmRevoke = useConfirmRevoke(collection);
 
   return (
     <div
@@ -43,7 +48,12 @@ export const NotificationCollection: React.FC<{
                 defaultMessage='{name} added you to a collection'
                 values={{
                   name: (
-                    <DisplayNameSimple account={collectionCreatorAccount} />
+                    <LinkedDisplayName
+                      displayProps={{
+                        variant: 'simple',
+                        account: collectionCreatorAccount,
+                      }}
+                    />
                   ),
                 }}
               />
@@ -54,7 +64,12 @@ export const NotificationCollection: React.FC<{
                 defaultMessage='{name} edited a collection you’re in'
                 values={{
                   name: (
-                    <DisplayNameSimple account={collectionCreatorAccount} />
+                    <LinkedDisplayName
+                      displayProps={{
+                        variant: 'simple',
+                        account: collectionCreatorAccount,
+                      }}
+                    />
                   ),
                 }}
               />
@@ -63,6 +78,26 @@ export const NotificationCollection: React.FC<{
         </div>
 
         <CollectionPreviewCard collection={collection} />
+
+        <div className={classes.actions}>
+          <Button
+            compact
+            secondary
+            className='button--destructive'
+            onClick={confirmRevoke}
+          >
+            <FormattedMessage
+              id='collections.detail.revoke_inclusion'
+              defaultMessage='Remove me'
+            />
+          </Button>
+
+          <CollectionMenu
+            context='notifications'
+            collection={collection}
+            className={classes.menuButton}
+          />
+        </div>
       </div>
     </div>
   );