UX: make entire topic card clickable

To avoid very strange positioning and sizing, I'm opting to keep the
chat in front of the composer, when in peak-mode.
Still not ideal, but better than before.

![CleanShot 2025-05-14 at 13 11
16@2x](https://github.com/user-attachments/assets/9b28f097-a63b-4bbb-a016-68cbcd04ee3c)
⬇️ 
![CleanShot 2025-05-14 at 13 10
57@2x](https://github.com/user-attachments/assets/10b9c17e-1207-4775-8933-0f6aca8c3ab6)

Due to the way peakmode positions itself, it's impossible to place the
chat flush next to it. And due to the way resizing works (frop the top
left, anchored right), it also can't be placed on any left-handed
alignment.

javascripts/discourse/api-initializers/clickable-topic-row.js

@@ -0,0 +1,41 @@
+import { apiInitializer } from "discourse/lib/api";
+import { wantsNewWindow } from "discourse/lib/intercept-click";
+
+export default apiInitializer((api) => {
+  api.registerBehaviorTransformer(
+    "topic-list-item-click",
+    ({ context, next }) => {
+      const event = context.event;
+      const target = event.target;
+      const topic = context.topic;
+
+      const excludedSelectors = [
+        "a:not(.title)",
+        "button",
+        ".bulk-select",
+        ".topic-category-data",
+      ];
+
+      const isExcluded = excludedSelectors.some((selector) =>
+        target.closest(selector)
+      );
+
+      if (isExcluded) {
+        return next();
+      }
+
+      const mainLink = target.closest(".title, .main-link, .topic-list-item");
+      if (mainLink) {
+        if (wantsNewWindow(event)) {
+          window.open(topic.lastUnreadUrl, "_blank");
+        } else {
+          event.preventDefault();
+          context.navigateToTopic(topic, topic.lastUnreadUrl);
+        }
+        return;
+      }
+
+      next();
+    }
+  );
+});

scss/chat.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .full-page-chat.full-page-chat-sidebar-enabled {
   border: none;
 }
@@ -23,6 +25,22 @@ body.has-full-page-chat {
 
 .chat-drawer-outlet-container {
   z-index: z("composer", "content");
+
+  .peek-mode-active & {
+    padding-bottom: 0;
+    left: unset;
+    right: var(--main-grid-gap);
+
+    &:has(.is-expanded) {
+      z-index: calc(z("composer", "dropdown") + 1);
+    }
+  }
+}
+
+.chat-drawer {
+  .peek-mode-active & {
+    max-width: 90vw;
+  }
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
@@ -56,3 +74,9 @@ body.has-full-page-chat {
 .chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
   z-index: z("composer", "content") + 1;
 }
+
+.chat-replying-indicator-container {
+  @include viewport.from(sm) {
+    margin-left: calc(0.65em + 0.2rem);
+  }
+}

scss/composer.scss

@@ -19,6 +19,8 @@
 
     .grippie {
       background: var(--tertiary-low);
+      border-top-right-radius: var(--d-border-radius);
+      border-top-left-radius: var(--d-border-radius);
     }
 
     .user-selector,

scss/topic-cards.scss

@@ -359,6 +359,7 @@
 }
 
 .topic-list-item {
+  cursor: pointer;
   background: var(--d-content-background);
   box-shadow: 0 0 12px 1px var(--topic-card-shadow);