streams: Improve subscription toggle buttons on stream rows.

This commit changes the UI for subscribing to streams on stream rows
to be more like the mobile version (zulip/zulip-mobile#5333).
The current design made it hard to discover how to subscribe to
streams via left panel and is not very clear on the fact that
its not possible to subscribe to private streams.

To address this the following changes have been made:
- For unsubscribed streams, the on hover-checkmark is replaced by
a "+" which is always displayed and has on-hover highlighting.

- For unsubscribed private streams, the "+" is disabled.

- Tooltips with appropriate messages are added on the "+" sign for the
above 2 cases.

- A tooltip has also been for the on-hover checkmark for subscribed
streams.

Fixes: #22217.
Co-authored-by: Raghav Luthra <rluthra2002@gmail.com>

web/src/stream_edit.js

@@ -535,6 +535,11 @@ export function initialize() {
     // This handler isn't part of the normal edit interface; it's the convenient
     // checkmark in the subscriber list.
     $("#streams_overlay_container").on("click", ".sub_unsub_button", (e) => {
+        if ($(e.currentTarget).hasClass("disabled")) {
+            // We do not allow users to subscribe themselves to private streams.
+            return;
+        }
+
         const sub = get_sub_for_target(e.target);
         // Makes sure we take the correct stream_row.
         const $stream_row = $(