From efdcfedfbeabcb71ad1756e993eba6a4c6ac720a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Dec 2022 22:20:15 +0200
Subject: [PATCH 1/4] add icon to allow expand collapsed (status-related)
 notifications

---
 src/components/notification/notification.js     | 15 ++++++++++-----
 src/components/notification/notification.vue    | 16 +++++++++++++---
 src/components/notifications/notifications.scss | 10 ++++++++++
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index ddba560e15..3e834bd538 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -20,7 +20,9 @@ import {
   faUserPlus,
   faEyeSlash,
   faUser,
-  faSuitcaseRolling
+  faSuitcaseRolling,
+  faExpandAlt,
+  faCompressAlt
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -31,13 +33,15 @@ library.add(
   faUserPlus,
   faUser,
   faEyeSlash,
-  faSuitcaseRolling
+  faSuitcaseRolling,
+  faExpandAlt,
+  faCompressAlt
 )
 
 const Notification = {
   data () {
     return {
-      userExpanded: false,
+      statusExpanded: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       unmuted: false
     }
@@ -55,8 +59,9 @@ const Notification = {
     UserLink
   },
   methods: {
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
+    toggleStatusExpanded () {
+      console.log('as')
+      this.statusExpanded = !this.statusExpanded
     },
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 84f3f7de55..2079cc7551 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -144,13 +144,23 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="faint-link"
+              class="timeago-link faint-link"
             >
               <Timeago
                 :time="notification.created_at"
                 :auto-update="240"
               />
             </router-link>
+            <button
+              class="button-unstyled expand-icon"
+              @click.prevent="toggleStatusExpanded"
+            >
+              <FAIcon
+                class="fa-scale-110"
+                fixed-width
+                :icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
+              />
+            </button>
           </div>
           <div
             v-else
@@ -222,8 +232,8 @@
         />
         <template v-else>
           <StatusContent
-            class="faint"
-            :compact="true"
+            :class="{ faint: !statusExpanded }"
+            :compact="!statusExpanded"
             :status="notification.action"
           />
         </template>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index f71f9b7612..9b24156541 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -112,6 +112,16 @@
       min-width: 3em;
       text-align: right;
     }
+
+    .timeago-link {
+      margin-right: 0.2em;
+    }
+
+    .expand-icon {
+      .svg-inline--fa {
+        margin-left: 0.25em;
+      }
+    }
   }
 
   .emoji-reaction-emoji {

From 5bde89297c11a0d35b1dfd314abaace8c238b4b5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Dec 2022 22:58:41 +0200
Subject: [PATCH 2/4] a11y

---
 src/components/notification/notification.vue | 2 ++
 src/i18n/en.json                             | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 2079cc7551..fcd48ed5f0 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -154,6 +154,7 @@
             <button
               class="button-unstyled expand-icon"
               @click.prevent="toggleStatusExpanded"
+              :title="$t('tool_tip.toggle_expand')"
             >
               <FAIcon
                 class="fa-scale-110"
@@ -176,6 +177,7 @@
           <button
             v-if="needMute"
             class="button-unstyled"
+            :title="$t('tool_tip.toggle_mute')"
             @click.prevent="toggleMute"
           >
             <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5793c3c8de..ddaa12cdeb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -986,7 +986,9 @@
     "user_settings": "User Settings",
     "accept_follow_request": "Accept follow request",
     "reject_follow_request": "Reject follow request",
-    "bookmark": "Bookmark"
+    "bookmark": "Bookmark",
+    "toggle_expand": "Expand or collapse notification to show post in full",
+    "toggle_mute": "Expand or collapse notification to reveal muted content"
   },
   "upload": {
     "error": {

From 9f30ccc26bf4f87f6836fe37e43a9f0ddede6727 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 22 Dec 2022 10:28:24 +0000
Subject: [PATCH 3/4] Apply 1 suggestion(s) to 1 file(s)

---
 src/components/notification/notification.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 3e834bd538..265aaee0a5 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -60,7 +60,6 @@ const Notification = {
   },
   methods: {
     toggleStatusExpanded () {
-      console.log('as')
       this.statusExpanded = !this.statusExpanded
     },
     generateUserProfileLink (user) {

From 8a594e2f98f49eeff105de9c956764c15a0ef80a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Dec 2022 12:31:36 +0200
Subject: [PATCH 4/4] more aria

---
 src/components/notification/notification.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index fcd48ed5f0..f1aa542076 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -155,6 +155,7 @@
               class="button-unstyled expand-icon"
               @click.prevent="toggleStatusExpanded"
               :title="$t('tool_tip.toggle_expand')"
+              :aria-expanded="statusExpanded"
             >
               <FAIcon
                 class="fa-scale-110"
@@ -178,6 +179,7 @@
             v-if="needMute"
             class="button-unstyled"
             :title="$t('tool_tip.toggle_mute')"
+            :aria-expanded="!unmuted"
             @click.prevent="toggleMute"
           >
             <FAIcon