collapse notifications and also allow expand on click anywhere

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)
     },

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;

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>

src/components/status_content/status_content.js

@@ -53,6 +53,7 @@ const StatusContent = {
   props: [
     'status',
     'compact',
+    'collapse',
     'focused',
     'noHeading',
     'fullContent',

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">