Remain in app UI when clicking back button on a column

[jerome-tgl]

1. I remote-followed someone in another instance (from this URL)
2. The page directsme to this URL, which shows the Mastodon main UI with the user's profile in the right-column
3. I click the < back button in this column

What happens: I'm redirected to the previous URL, as if I clicked the back button of my Web browser.

What I expected: that the user's profile would be close and the right-column would display the getting-started guide, or the local/public timeline.

---

• I searched or browsed the repo’s other issues to ensure this is not a duplicate.

[michaeljdeeb]

I wanted to start a conversation around solving this specifically for the remote follow use-case as #1522 is more complicated given that it would be a major privacy concern if your browser exposed your search history. Also, the remote follow use-case is more likely and can be jarring to new users.

This behavior does not occur on community_timeline or public_timeline components because they use column_back_button_slim which always returns the user to /. You'll notice that if you click Local Timeline, then Federated Timeline, then back, you are returned to Getting Started instead of the expected Local Timeline.

The account_timeline is different because it can be called directly with a URL or while clicking on a profile in one of your timelines so instead it uses collumn_back_button. The section I've highlighted looks like it was coded with good intentions, but I'm not entirely sure that if statement is ever called.

I noticed that after you remote follow someone and are returned to your timelines, document.referrer will return something similar to https://your.mastodon.instance/authorize_follow?acct=acct%3Auser%40domain. So we could modify the column_back_button component like so

handleClick () {
    if ((window.history && window.history.length === 1 ) || (document.referrer && /authorize_follow?/.test(document.referrer))) {
        this.context.router.push("/");
    }
    else this.context.router.goBack();
}

Definitely open to ways of improving this as I see edge cases, but wanted to put the research/explanation out there.

EDIT: After thinking about this more, tracking session history using react-router-redux and basing decisions on what is stored there would make the back button do what you expect it to and could possibly eliminate the need for two back_button components.

[southrop]

I think this is the same issue at work, but if you open a toot by the /web URL (e.g. https://mastodon.social/web/statuses/288036 ), the back link at the top of the column does not do anything.

A few experiments with the back link lead me to believe that it does indeed work via the browser's history stack. Given that Mastodon timelines, etc. are all unique URLs, I think that's a fine approach, but there needs to be some logic in the back function that checks what the next URL in the stack is, and inserts an appropriate landing page (e.g. the getting started one) if the user were to hit the end of the history or leave the site.

[michaeljdeeb]

@southrop yeah, you're right. The status component uses the same back button as the account_timeline.

For the happy path, the browser's history works okay, and although you can control navigation, you cannot read what URLs are in it (this is a good thing). I think we can use react-router-redux to track history across the site and improve/unify the back button components. I just haven't worked with redux enough for a PR.

[beryllium]

Encountered this issue today. I can see the justification for not being able to see what's in the user's browser history, but if I load a page (e.g., https://phpc.social/web/accounts/28461) and then click the < Back link in the far-right column, it still bounces me straight out of Mastodon. Quite jarring. The idea of tracking the history within the app seems good, since it'll be able to detect when the Mastodon history has been exhausted and is about to be handed back to the browser...

[c960657]

Fixed in #23953.