Enhancements #240, #233 Comments reply and other actions

[dellagustin]

This commit implements #240 and initial support for #233.

A menu is added to comments that support initiating the following actions:

• Reply to post
• Copy link to post
• Open in original site - opens the post in its original system at another tab
• Follow author of the post
• Forget interactor account

This commit is based on
nathangathright/comment-thread-mockup@6b2f716

Known issues

• When the user is first prompted to enter their account, the opening of a new tab for interaction will be blocked as a pop-up.
• When using the dark mode, the text in the menu does not appear (it is the same color as the background) - fixed with a0bd277 and Fix dark mode and other issues #251
• When you click outside of the menu, it does not disappear, it only disappear when you click a menu item or the menu button - fixed with 851afe1
• There are very little guardrails, so some might need to be implemented later (e.g. verifying the input for the interactor account).

Open Questions

Which fediverse software (e.g. Mastodon, Pleroma) supports the remote interaction flow we are using here? At least Mastodon and Pleroma (actually Akkoma) were tested.

Related issues

• Comments: Add button / icon to open the original post in a new tab #240
• Comments: reply to comments on the podcast page #233

Related links and references

• OStatus 1.0 Draft 2 - Section 11 - Discover
• https://socialhub.activitypub.rocks/t/represent-endpoint-for-remote-interaction/480
• WebFinger - https://www.rfc-editor.org/rfc/rfc7033
• https://www.hughrundle.net/how-to-implement-remote-following-for-your-activitypub-project/

Implementation Details

The remote interaction is implemented using the WebFinger protocol/API and also the OStatus Subscribe mechanism.

In summary, it gets to remote interact URL template using WebFinger with a call to https://<follower instance host>/.well-known/webfinger?resource=acct:<follower account>, and inspect the response for the link with rel equals to http://ostatus.org/schema/1.0/subscribe, then builds the remote interact URL and opens it in a new tab.

[dellagustin]

Demo

Known issue:

either open the pop up, or interact again.
@daveajones 's post is open on my instance (a login flow is triggered if I'm not already logged in):

[dellagustin]

@daveajones , ready for review, if you can live with the known issues.
@nathangathright I was too lazy to implement a modal dialog, to avoid the pop up block, but since it only happens when you first enter your account, that was acceptable for me
@glaszig , @stevencrader , @nathangathright , it would be great if you could propose a fix to the known issue related to the "Dark mode" (related, #221, #251).

[daveajones]

10-4. Will review!

[stevencrader]

After rebasing on the current master (b7d2b76), make the changes mentioned below.

Change Menu Background

Add background: var(--button-background); to .context-menu menu in /ui/src/components/CommentMenu/styles.scss

Change Show/Hide Comments to use button style

Use the custom button used throughout the site in /ui/src/components/Comments/index.tsx.

Change:

            {!this.state.showComments && <button disabled={this.state.loadingComments} onClick={() => this.onClickShowComments()}>Show comments</button>}
            {this.state.showComments && <button onClick={() => this.onClickHideComments()}>Hide comments</button>}

To:

            {!this.state.showComments && <Button disabled={this.state.loadingComments} onClick={() => this.onClickShowComments()}>Show comments</Button>}
            {this.state.showComments && <Button onClick={() => this.onClickHideComments()}>Hide comments</Button>}

[dellagustin]

@stevencrader I adopted the change to the menu background with a0bd277 and sent a separate pull request for the button replacement - #258

Thanks a lot for the suggestions!

[stevencrader]

When you click outside of the menu, it does not disappear, it only disappear when you click a menu item or the menu button

To solve this, you could look at the fix I added for the top bar menu on mobile. See handleClickOutside in:

web-ui/ui/src/components/TopBar/index.tsx

Lines 57 to 66 in b7d2b76

	handleClickOutside(event) {
	// @ts-ignore
	if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
	setTimeout(() => {
	this.setState({
	dropdownOpen: false,
	})
	}, 100)
	}
	}

Since your menu will be removed when navigating unlike the top bar, you could get away with a much shorter timeout value. I found a value of 10 works.

[dellagustin]

Hello @stevencrader , thanks for tip with #253 (comment).
I implemented it and it worked. It also worked without setTimeout entirely. Do you see any reason to keep it in my case?

[dellagustin]

@daveajones I added some fixed to the known issues with the help of @stevencrader .
From my side, this is ready to go.

[stevencrader]

Hello @stevencrader , thanks for tip with #253 (comment). I implemented it and it worked. It also worked without setTimeout entirely. Do you see any reason to keep it in my case?

I don't see any reason to keep the timeout if it isn't needed.