UX: make entire topic card clickable

about.json

@@ -132,6 +132,5 @@
       "header_primary": "ffffff",
       "hover": "584B3E"
     }
-  },
+  }
-  "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
 }

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();
+    }
+  );
+});

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -83,34 +83,6 @@ export default {
       api.registerValueTransformer("topic-list-item-mobile-layout", () => {
         return false;
       });
-
-      api.registerBehaviorTransformer(
-        "topic-list-item-click",
-        ({ context: { event }, next }) => {
-          if (event.target.closest("a, button, input")) {
-            return next();
-          }
-
-          event.preventDefault();
-          event.stopPropagation();
-
-          const topicLink = event.target
-            .closest("tr")
-            .querySelector("a.raw-topic-link");
-
-          // Redespatch the click on the topic link, so that all key-handing is sorted
-          topicLink.dispatchEvent(
-            new MouseEvent("click", {
-              ctrlKey: event.ctrlKey,
-              metaKey: event.metaKey,
-              shiftKey: event.shiftKey,
-              button: event.button,
-              bubbles: true,
-              cancelable: true,
-            })
-          );
-        }
-      );
     });
   },
 };

locales/en.yml

@@ -1,6 +1,6 @@
 en:
   theme_metadata:
-    description: "A modern theme designed for communities that want a beautiful community out of the box."
+    description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
   topic_pinned: "Pinned"
   topic_hot: "Hot"
   user_replied: "replied"

scss/box-view.scss

@@ -127,36 +127,6 @@
   }
 }
 
-.rtl .experimental-screen {
-  &__top-left {
-    right: var(--left-distance);
-    left: unset;
-  }
-
-  &__top-right {
-    transform: rotate(-90deg) !important;
-    right: calc(var(--right-distance) - var(--d-border-radius-large));
-    left: unset;
-  }
-
-  &__bottom-left {
-    transform: rotate(90deg);
-    right: var(--left-distance);
-    left: unset;
-  }
-
-  &__bottom-right {
-    transform: rotate(180deg);
-    left: unset;
-    right: calc(var(--right-distance) - var(--d-border-radius-large));
-  }
-
-  &__bottom-bar {
-    right: var(--left-distance);
-    left: unset;
-  }
-}
-
 @media screen and (min-width: 768px) {
   .with-topic-progress {
     bottom: calc(

scss/chat.scss

@@ -72,7 +72,7 @@ body.has-full-page-chat {
 }
 
 .chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
-  z-index: z("modal", "dialog");
+  z-index: z("composer", "content") + 1;
 }
 
 .chat-replying-indicator-container {

scss/misc.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 .user-main .about.collapsed-info .details {
   background: var(--d-content-background);
 }
@@ -107,35 +105,3 @@ input[type="color"]:focus,
 .period-chooser-header {
   border-radius: 0;
 }
-
-// compatibility with the top contributors sidebar theme component
-// https://meta.discourse.org/t/top-contributors-sidebar/215110
-.list-container
-  #list-area
-  > .contents
-  > .topic-list:has(.discourse-top-contributors) {
-  grid-template-areas: "head head" "body sidebar";
-  grid-template-rows: auto 1fr;
-
-  @include viewport.until(lg) {
-    grid-template-areas: "head head" "body body";
-  }
-
-  tbody {
-    display: flex;
-  }
-
-  .discourse-top-contributors {
-    width: auto;
-    box-sizing: border-box;
-
-    @include viewport.until(lg) {
-      display: none;
-    }
-
-    .top-contributors-heading {
-      font-size: var(--font-up-2);
-      padding-bottom: 0.5em;
-    }
-  }
-}

scss/topic-cards.scss

@@ -40,7 +40,6 @@
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
-  cursor: pointer;
 
   td.main-link .link-top-line {
     grid-row: 1/2;
@@ -256,10 +255,6 @@
     min-width: unset;
   }
 
-  .badge-notification.new-topic::before {
-    display: none;
-  }
-
   // timestamp
   td.activity .post-activity {
     grid-area: activity;
@@ -364,6 +359,7 @@
 }
 
 .topic-list-item {
+  cursor: pointer;
   background: var(--d-content-background);
   box-shadow: 0 0 12px 1px var(--topic-card-shadow);
 
@@ -725,8 +721,15 @@ body.user-messages-page {
   }
 }
 
-.event-date-container {
+.mobile-view {
-  display: inline-flex;
+  .link-top-line .event-date-container {
-  position: relative;
+    display: inline;
-  top: -0.25em; // optical alignment
+    margin-top: 0;
+  }
+
+  .topic-list-body .topic-list-item .link-top-line .event-date {
+    position: relative;
+    margin-left: 0;
+    top: -0.125em;
+  }
 }