From 0b9b7a51a63756d85e4093b3f9cf579bc44c042f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Aug 2025 12:53:19 +0300
Subject: [PATCH] collapse notifications and also allow expand on click
 anywhere

---
 src/components/notification/notification.js      |  4 ++++
 src/components/notification/notification.scss    |  7 +++++++
 src/components/notification/notification.vue     | 12 ++++++++++--
 src/components/status_content/status_content.js  |  1 +
 src/components/status_content/status_content.vue |  2 +-
 5 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 043be1b1a..247b73848 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -64,6 +64,7 @@ const Notification = {
   },
   methods: {
     toggleStatusExpanded () {
+      if (!this.expandable) return
       this.statusExpanded = !this.statusExpanded
     },
     generateUserProfileLink (user) {
@@ -136,6 +137,9 @@ const Notification = {
       const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
     },
+    expandable () {
+      return (new Set(['like', '-pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
+    },
     user () {
       return this.$store.getters.findUser(this.notification.from_profile.id)
     },
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index e8895ce59..9c94d4090 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,10 +1,17 @@
 // TODO Copypaste from Status, should unify it somehow
+.NotificationParent {
+  &.-expandable {
+    cursor: pointer;
+  }
+}
+
 .Notification {
   border-bottom: 1px solid;
   border-color: var(--border);
   overflow-wrap: break-word;
   text-wrap: pretty;
 
+
   &.Status {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: transparent !important;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a531b35d3..c9b557970 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -9,9 +9,17 @@
       @interacted="interacted"
     />
   </article>
-  <article v-else>
+  <article
+    class="NotificationParent"
+    :class="{ '-expandable': expandable }"
+    :aria-controls="'notif-' +notification.id"
+    @click="toggleStatusExpanded()"
+    v-else
+  >
     <div
       v-if="needMute && !unmuted"
+      :id="'notif-' +notification.id"
+      :aria-expanded="statusExpanded"
       class="Notification container -muted"
     >
       <small>
@@ -247,7 +255,7 @@
           <StatusContent
             :compact="!statusExpanded"
             :status="notification.status"
-            :collapse="true"
+            :collapse="statusExpanded"
           />
         </template>
       </div>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 3bf25c75b..f61ba0d05 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -53,6 +53,7 @@ const StatusContent = {
   props: [
     'status',
     'compact',
+    'collapse',
     'focused',
     'noHeading',
     'fullContent',
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 6f5b1d613..fb08186b4 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -14,7 +14,7 @@
       :toggle-showing-tall="toggleShowingTall"
       :toggle-expanding-subject="toggleExpandingSubject"
       :toggle-showing-long-subject="toggleShowingLongSubject"
-      :collapse="true"
+      :collapse="collapse"
       @parse-ready="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options && !compact">