UX: chat drawer increase unread channel visibility (#28731)

This change increases the visibility of unread channels to make them stand out more in drawer mode (desktop).

When a channel is unread:

- it floats to the top;
- when multiple channels are unread, they are sorted alphabetically (equal to how it’s done on mobile)
- the unread indicator blue dot moves to directly right of the channel name

plugins/chat/test/javascripts/components/chat-channel-metadata-test.js

@@ -3,7 +3,6 @@ import { render } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { exists } from "discourse/tests/helpers/qunit-helpers";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 module("Discourse Chat | Component | chat-channel-metadata", function (hooks) {
@@ -29,23 +28,4 @@ module("Discourse Chat | Component | chat-channel-metadata", function (hooks) {
       .dom(".chat-channel__metadata-date")
       .hasText(lastMessageSentAt.format("LT"));
   });
-
-  test("unreadIndicator", async function (assert) {
-    this.channel = new ChatFabricators(getOwner(this)).directMessageChannel();
-    this.channel.tracking.unreadCount = 1;
-
-    this.unreadIndicator = true;
-    await render(
-      hbs`<ChatChannelMetadata @channel={{this.channel}} @unreadIndicator={{this.unreadIndicator}}/>`
-    );
-
-    assert.true(exists(".chat-channel-unread-indicator"));
-
-    this.unreadIndicator = false;
-    await render(
-      hbs`<ChatChannelMetadata @channel={{this.channel}} @unreadIndicator={{this.unreadIndicator}}/>`
-    );
-
-    assert.false(exists(".chat-channel-unread-indicator"));
-  });
 });