Reader Feed: a "Subscribed" button unsubscribes me without warning

[jsnajdr]

Steps to reproduce:

1. Go to a Reader feed for a blog: /read/feeds/:feed_id
2. If you're subscribed to the blog, you'll see a "✔ Subscribed" label (button-shaped) in the header:
   
3. Click on that label/button. The label doesn't say that you'll be unsubscribed, does it?
4. You're unsubscribed immediately. The header UI becomes:
   

I didn't expect that because the UI never told me that clicking the button means "Unsubscribe". There's also no affordance that would tell me that it behaves like a toggle button.

How to do it better? On Twitter/X, the "Following" button changes to "Unfollow" (in red) on mouse hover:

Screen.Recording.2025-01-25.at.10.05.54.mov

On Facebook, clicking on the ":+1: Liked" button opens a "Follow settings" modal that is basically the same thing as our "Manage subscription" page (/read/subscriptions/:sub_id). There I can unlike/unfollow the page.

One more thing: when I click "+ Subscribe" again, Reader immediately shows me this modal:

I found this very confusing: after subscribing, I'd expect to see a very visible confirmation that "you just successfully subscribed to veselin.blog" and only as a footnote there should be "Suggested Sites". But this modal is all about "Suggested Sites" and there is nothing about the subscription I just created. Except the very vague and indirect "While you're at it..."

[Robertght]

Replicated the above and I can confirm the modal bit is also confusing so I raised that here:

#96854

cc @davemart-in in case we need to merge or group these somehow

[davemart-in]

@Robertght let's keep them separate. Looks like @mehmoodak picked up that other issue. I'm adding this issue to unassigned on our main team board to be picked up.

Let's change this label to be "Unsubscribe" instead of "Subscribed":

And we should probably change the icon from a circle with a check to lineSolid.