[C-4939] Add comment action menu popup

[DejayJD]

Description

Replaces the placeholder icon buttons with an action menu like designs have.
Also set up the permissions to show options accordingly.
I also tweaked the deleting UI to show half opacity while deleting. Imo it looks pretty nice 👌

How Has This Been Tested?

web:stage

[changeset-bot]

⚠️ No Changeset found

Latest commit: ceec2b0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[audius-infra]

Preview this change https://demo.audius.co/jd/comments-action-menu

[DejayJD]

I've done this quite a few times already, probably makes sense to update aquery to have some sort of callback like onStatusChange or like onFetchFinish or something instead doing it manually like this 🤔

[DejayJD]

Actually in hindsight the reason I have to do this is so that I can handle individual load states vs global ones (i.e. one comment delete status). Maybe this is just a side-effect of sharing the useAQueryHook in context vs using it at each component.
Hmmm

[sliptype]

Would it make sense to write useDeleteComment as a standalone hook that reaches into the comment context, instead of sharing the hook itself via the comment context? Like this:

const useDeleteComment = () => {
  const { userId, entityId } = useCurrentCommentSection()
  const [deleteComment, deleteCommentResponse] = useDeleteCommentById()

  const wrappedHandler = async (commentId: string) => {
    if (userId) {
      deleteComment({ id: commentId, userId, entityId })
    }
  }
  return [wrappedHandler, deleteCommentResponse]
}

[DejayJD]

yeah maybe this is the move. Let me see how this feels instead

[DejayJD]

yea ok thats the way to go, I changed the delete to this and it worked as expected 👌

[DejayJD]

Will change the others later on 💯
Feel free to change them next week while I'm on call if you need

[sliptype]

Awesome! I'll probably copy CommentActionBar into mobile too

[sliptype]

I would assume they want the popup aligned left bottom similar to our track tile overflow menus

[DejayJD]

I'll add it to a list of qa things to have design look at 👀 Planning to do some early desktop design QA soon

[sliptype]

Would it make sense to write useDeleteComment as a standalone hook that reaches into the comment context, instead of sharing the hook itself via the comment context? Like this:

const useDeleteComment = () => {
  const { userId, entityId } = useCurrentCommentSection()
  const [deleteComment, deleteCommentResponse] = useDeleteCommentById()

  const wrappedHandler = async (commentId: string) => {
    if (userId) {
      deleteComment({ id: commentId, userId, entityId })
    }
  }
  return [wrappedHandler, deleteCommentResponse]
}

[audius-infra]

Preview this change https://demo.audius.co/jd/comments-action-menu

[audius-infra]

Preview this change https://demo.audius.co/jd/comments-action-menu