From a3c703bd37fc55c2377cb0bf099af6a21ea07e8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 14 Jun 2021 02:52:41 +0300
Subject: [PATCH 01/59] compact notifs

---
 src/components/gallery/gallery.vue            |  5 +-
 src/components/notification/notification.vue  |  3 +-
 src/components/status_body/status_body.js     |  1 +
 src/components/status_body/status_body.scss   | 56 +++++++++++++++++++
 src/components/status_body/status_body.vue    |  7 ++-
 .../status_content/status_content.js          |  1 +
 .../status_content/status_content.vue         | 13 ++++-
 7 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ca91c9c1..3e967e9c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -36,7 +36,10 @@
   height: 0;
   width: 100%;
   flex-grow: 1;
-  margin-top: 0.5em;
+
+  &:not(:first-child) {
+    margin-top: 0.5em;
+  }
 
   .gallery-row-inner {
     position: absolute;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0081dee4..396ae0e1 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -181,8 +181,9 @@
           </router-link>
         </div>
         <template v-else>
-          <status-content
+          <StatusContent
             class="faint"
+            :compact="true"
             :status="notification.action"
           />
         </template>
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 26491e1b..6dc028a6 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -23,6 +23,7 @@ library.add(
 const StatusContent = {
   name: 'StatusContent',
   props: [
+    'compact',
     'status',
     'focused',
     'noHeading',
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 81a687f1..a93c92e0 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,11 +1,17 @@
 @import '../../_variables.scss';
 
 .StatusBody {
+  display: flex;
+  flex-direction: column;
 
   .emoji {
     --_still_image-label-scale: 0.5;
   }
 
+  .attachments {
+    margin-top: 0.5em;
+  }
+
   & .text,
   & .summary {
     font-family: var(--postFont, sans-serif);
@@ -115,4 +121,54 @@
   .cyantext {
     color: var(--postCyantext, $fallback--cBlue);
   }
+
+  &.-compact {
+    flex-direction: row;
+
+    --emoji-size: 16px;
+
+    & .body,
+    & .attachments {
+      max-height: 3.25em;
+    }
+
+    .body {
+      overflow: hidden;
+      white-space: normal;
+      min-width: 5em;
+      flex: 5 1 auto;
+      mask-size: auto 3.5em, auto auto;
+      mask-position: 0 0, 0 0;
+      mask-repeat: repeat-x, repeat;
+      mask-image:
+        linear-gradient(to top, white 0.5em, transparent 2.5em),
+        linear-gradient(to top, white, white);
+
+      /* Autoprefixed seem to ignore this one, and also syntax is different */
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+
+    .attachments {
+      margin-top: 0;
+      flex: 1 1 auto;
+      min-width: 5em;
+      height: 100%;
+    }
+
+    .summary-wrapper {
+      .summary::after {
+        content: ': ';
+      }
+
+      line-height: inherit;
+      margin: 0;
+      border: none;
+      display: inline-block;
+    }
+
+    .text-wrapper {
+      display: inline-block;
+    }
+  }
 }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 3dc4916c..6609d989 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="StatusBody">
+<div
+  class="StatusBody"
+  :class="{ '-compact': compact }"
+>
     <div class="body">
       <div
         v-if="status.summary_raw_html"
@@ -8,6 +11,7 @@
       >
         <RichContent
           class="media-body summary"
+          :single-line="compact"
           :html="status.summary_raw_html"
           :emoji="status.emojis"
         />
@@ -52,6 +56,7 @@
             :html="status.raw_html"
             :emoji="status.emojis"
             :handle-links="true"
+            :single-line="compact"
             :greentext="mergedConfig.greentext"
             @parseReady="setHeadTailLinks"
           />
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 11a4974b..4d6f0a14 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -28,6 +28,7 @@ const StatusContent = {
   name: 'StatusContent',
   props: [
     'status',
+    'compact',
     'focused',
     'noHeading',
     'fullContent',
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index feb34d2c..06edd780 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="StatusContent">
+<div
+  class="StatusContent"
+  :class="{ '-compact': compact }"
+>
     <slot name="header" />
     <StatusBody
       :status="status"
+      :compact="compact"
       :single-line="singleLine"
       :hide-mentions="hideMentions"
       @parseReady="setHeadTailLinks"
@@ -36,7 +40,7 @@
       </div>
 
       <div
-        v-if="status.card && !noHeading"
+        v-if="status.card && !noHeading && !compact"
         class="link-preview media-body"
       >
         <link-preview
@@ -59,5 +63,10 @@ $status-margin: 0.75em;
 .StatusContent {
   flex: 1;
   min-width: 0;
+  &.-compact {
+    flex {
+      display: flex;
+    }
+  }
 }
 </style>

From 9e9ab5cec97f5f37a38ecd4bd1f81381b99ff3c3 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Mon, 14 Jun 2021 19:42:56 +0000
Subject: [PATCH 02/59] New option: Hide shoutbox

---
 src/App.js                                         | 3 +++
 src/App.vue                                        | 2 +-
 src/components/settings_modal/tabs/general_tab.js  | 1 +
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/i18n/en.json                                   | 1 +
 src/modules/config.js                              | 1 +
 6 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index fe4c30cb..8d9ec8c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,6 +73,9 @@ export default {
         this.$store.state.instance.instanceSpecificPanelContent
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    hideSB () {
+      return this.$store.getters.mergedConfig.hideShoutbox
+    },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
     privateMode () { return this.$store.state.instance.private },
     sidebarAlign () {
diff --git a/src/App.vue b/src/App.vue
index 6c582c03..39decde9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,7 +50,7 @@
       <media-modal />
     </div>
     <shout-panel
-      v-if="currentUser && shout"
+      v-if="currentUser && shout && !hideSB"
       :floating="true"
       class="floating-shout mobile-hidden"
     />
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 07fccf57..0e838e59 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -50,6 +50,7 @@ const GeneralTab = {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
+    shout () { return this.$store.state.shout.channel.state === 'joined' }, 
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index e62df290..764a4c76 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -21,6 +21,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li v-if="shout">
+          <BooleanSetting path="hideShoutbox">
+            {{ $t('settings.hide_shoutbox') }} {{ $t('shoutbox.title') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2b253efb..ca3ee273 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -351,6 +351,7 @@
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
     "right_sidebar": "Show sidebar on the right side",
+    "hide_shoutbox": "Hide ",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
diff --git a/src/modules/config.js b/src/modules/config.js
index ad9c8be5..db9d5ffb 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -21,6 +21,7 @@ export const defaultState = {
   customThemeSource: undefined,
   hideISP: false,
   hideInstanceWallpaper: false,
+  hideShoutbox: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default

From 1b26c713efa67c86eaccdd884f38d7b6862ce053 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Mon, 14 Jun 2021 19:43:47 +0000
Subject: [PATCH 03/59] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 905d9f65..ec9cfde8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added option to mark posts as sensitive by default
 - Added quick filters for notifications
 - Implemented user option to change sidebar position to the right side
+- Implemented user option to hide floating shout panel
 
 
 ## [2.3.0] - 2021-03-01

From dcfd1783140a3376b0a081c30f5fd8e6ca33167e Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Mon, 14 Jun 2021 20:02:13 +0000
Subject: [PATCH 04/59] Fix lint error

---
 src/components/settings_modal/tabs/general_tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0e838e59..be0fc768 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -50,7 +50,7 @@ const GeneralTab = {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
-    shout () { return this.$store.state.shout.channel.state === 'joined' }, 
+    shout () { return this.$store.state.shout.channel.state === 'joined' },
     ...SharedComputedObject()
   }
 }

From 0a3ce9cc8b44082557429ee0bc5372376f1b820a Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Mon, 14 Jun 2021 20:33:51 +0000
Subject: [PATCH 05/59] Don't shorten shoutbox to SB

---
 src/App.js  | 2 +-
 src/App.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8d9ec8c7..362ac19d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,7 +73,7 @@ export default {
         this.$store.state.instance.instanceSpecificPanelContent
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
-    hideSB () {
+    hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
diff --git a/src/App.vue b/src/App.vue
index 39decde9..c30f5e98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,7 +50,7 @@
       <media-modal />
     </div>
     <shout-panel
-      v-if="currentUser && shout && !hideSB"
+      v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
       class="floating-shout mobile-hidden"
     />

From 4ecbb58086064f2cd546f21b51f22604edfc47e0 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Tue, 15 Jun 2021 00:25:09 +0000
Subject: [PATCH 06/59] Make locale language cleaner

---
 src/components/settings_modal/tabs/general_tab.vue | 2 +-
 src/i18n/en.json                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 764a4c76..6e647cdc 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -23,7 +23,7 @@
         </li>
         <li v-if="shout">
           <BooleanSetting path="hideShoutbox">
-            {{ $t('settings.hide_shoutbox') }} {{ $t('shoutbox.title') }}
+            {{ $t('general.hide') }} {{ $t('shoutbox.title') }}
           </BooleanSetting>
         </li>
       </ul>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ca3ee273..315c8f62 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -75,6 +75,7 @@
     "confirm": "Confirm",
     "verify": "Verify",
     "close": "Close",
+    "hide": "Hide",
     "peek": "Peek",
     "role": {
       "admin": "Admin",
@@ -351,7 +352,6 @@
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
     "right_sidebar": "Show sidebar on the right side",
-    "hide_shoutbox": "Hide ",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",

From 6689fed5132fac12a696e87d56c2858d64c323a5 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Tue, 15 Jun 2021 00:59:36 +0000
Subject: [PATCH 07/59] Use cleaner instance config check for shoutbox setting

---
 src/components/settings_modal/tabs/general_tab.js  | 2 +-
 src/components/settings_modal/tabs/general_tab.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index be0fc768..eeda61bf 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -50,7 +50,7 @@ const GeneralTab = {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
-    shout () { return this.$store.state.shout.channel.state === 'joined' },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 6e647cdc..d08dfae3 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -21,7 +21,7 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
-        <li v-if="shout">
+        <li v-if="instanceShoutboxPresent">
           <BooleanSetting path="hideShoutbox">
             {{ $t('general.hide') }} {{ $t('shoutbox.title') }}
           </BooleanSetting>

From 9c4957268de656acdfceae526f18ab5250808bec Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Tue, 15 Jun 2021 18:09:00 +0000
Subject: [PATCH 08/59] Use proper setting name

---
 src/components/settings_modal/tabs/general_tab.vue | 2 +-
 src/i18n/en.json                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index d08dfae3..71780e00 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -23,7 +23,7 @@
         </li>
         <li v-if="instanceShoutboxPresent">
           <BooleanSetting path="hideShoutbox">
-            {{ $t('general.hide') }} {{ $t('shoutbox.title') }}
+            {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
       </ul>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 315c8f62..86870447 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -75,7 +75,6 @@
     "confirm": "Confirm",
     "verify": "Verify",
     "close": "Close",
-    "hide": "Hide",
     "peek": "Peek",
     "role": {
       "admin": "Admin",
@@ -351,6 +350,7 @@
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
+    "hide_shoutbox": "Hide instance shoutbox",
     "right_sidebar": "Show sidebar on the right side",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",

From e654fead23ebb457f81e8642c65e1f3e98ee0027 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 17 Jun 2021 16:29:46 +0300
Subject: [PATCH 09/59] refactored attachments and gallery. All attachments now
 are in gallery.

---
 src/components/attachment/attachment.js       |  41 ++-
 src/components/attachment/attachment.vue      | 307 ++++--------------
 src/components/chat_message/chat_message.scss |   4 -
 src/components/flash/flash.js                 |   5 +-
 src/components/flash/flash.vue                |   7 -
 src/components/gallery/gallery.js             |  65 +++-
 src/components/gallery/gallery.vue            | 175 +++++++---
 .../status_content/status_content.js          |  20 +-
 .../status_content/status_content.vue         |  31 +-
 src/i18n/en.json                              |   6 +-
 10 files changed, 296 insertions(+), 365 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 8849f501..06928ca6 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -11,7 +11,9 @@ import {
   faImage,
   faVideo,
   faPlayCircle,
-  faTimes
+  faTimes,
+  faStop,
+  faSearchPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -20,7 +22,9 @@ library.add(
   faImage,
   faVideo,
   faPlayCircle,
-  faTimes
+  faTimes,
+  faStop,
+  faSearchPlus
 )
 
 const Attachment = {
@@ -28,7 +32,6 @@ const Attachment = {
     'attachment',
     'nsfw',
     'size',
-    'allowPlay',
     'setMedia',
     'naturalSizeLoad'
   ],
@@ -40,7 +43,8 @@ const Attachment = {
       loading: false,
       img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false,
-      showHidden: false
+      showHidden: false,
+      flashLoaded: false
     }
   },
   components: {
@@ -49,9 +53,22 @@ const Attachment = {
     VideoAttachment
   },
   computed: {
+    classNames () {
+      return [
+        {
+          '-loading': this.loading,
+          '-nsfw-placeholder': this.hidden
+        },
+        '-' + this.type,
+        `-${this.useContainFit ? 'contain' : 'cover'}-fit`
+      ]
+    },
     usePlaceholder () {
       return this.size === 'hide' || this.type === 'unknown'
     },
+    useContainFit () {
+      return this.$store.getters.mergedConfig.useContainFit
+    },
     placeholderName () {
       if (this.attachment.description === '' || !this.attachment.description) {
         return this.type.toUpperCase()
@@ -79,10 +96,6 @@ const Attachment = {
     isSmall () {
       return this.size === 'small'
     },
-    fullwidth () {
-      if (this.size === 'hide') return false
-      return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
-    },
     useModal () {
       const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
         : this.mergedConfig.playVideosInModal
@@ -100,12 +113,20 @@ const Attachment = {
     },
     openModal (event) {
       if (this.useModal) {
-        event.stopPropagation()
-        event.preventDefault()
         this.setMedia()
         this.$store.dispatch('setCurrent', this.attachment)
       }
     },
+    openModalForce (event) {
+      this.setMedia()
+      this.$store.dispatch('setCurrent', this.attachment)
+    },
+    stopFlash () {
+      this.$refs.flash.closePlayer()
+    },
+    setFlashLoaded (event) {
+      this.flashLoaded = event
+    },
     toggleHidden (event) {
       if (
         (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index f80badfd..fe9e9398 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,7 +1,8 @@
 <template>
-  <div
+  <button
     v-if="usePlaceholder"
-    :class="{ 'fullwidth': fullwidth }"
+    class="Attachment -placeholder button-unstyled"
+    :class="classNames"
     @click="openModal"
   >
     <a
@@ -15,16 +16,16 @@
       <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
-  </div>
+  </button>
   <div
     v-else
     v-show="!isEmpty"
-    class="attachment"
-    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    class="Attachment"
+    :class="classNames"
   >
     <a
       v-if="hidden"
-      class="image-attachment"
+      class="image-container"
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
@@ -34,7 +35,6 @@
         :key="nsfwImage"
         class="nsfw"
         :src="nsfwImage"
-        :class="{'small': isSmall}"
       >
       <FAIcon
         v-if="type === 'video'"
@@ -42,21 +42,40 @@
         icon="play-circle"
       />
     </a>
-    <button
-      v-if="nsfw && hideNsfwLocal && !hidden"
-      class="button-unstyled hider"
-      @click.prevent="toggleHidden"
-    >
-      <FAIcon icon="times" />
-    </button>
+    <div
+      class="attachment-buttons"
+      v-if="!hidden"
+      >
+      <button
+        v-if="type === 'flash' && flashLoaded"
+        class="button-unstyled attachment-button"
+        @click.prevent="stopFlash"
+      >
+        <FAIcon icon="stop" />
+      </button>
+      <button
+        v-if="!useModal"
+        class="button-unstyled attachment-button"
+        @click.prevent="openModalForce"
+      >
+        <FAIcon icon="search-plus" />
+      </button>
+      <button
+        v-if="nsfw && hideNsfwLocal"
+        class="button-unstyled attachment-button"
+        @click.prevent="toggleHidden"
+      >
+        <FAIcon icon="times" />
+      </button>
+    </div>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
-      class="image-attachment"
-      :class="{'hidden': hidden && preloadImage }"
+      class="image-container"
+      :class="{'-hidden': hidden && preloadImage }"
       :href="attachment.url"
       target="_blank"
-      @click="openModal"
+      @click.stop.prevent="openModal"
     >
       <StillImage
         class="image"
@@ -71,37 +90,43 @@
     <a
       v-if="type === 'video' && !hidden"
       class="video-container"
-      :class="{'small': isSmall}"
-      :href="allowPlay ? undefined : attachment.url"
-      @click="openModal"
+      :href="attachment.url"
+      @click.stop.prevent="openModal"
     >
       <VideoAttachment
         class="video"
         :attachment="attachment"
-        :controls="allowPlay"
+        :controls="!useModal"
         @play="$emit('play')"
         @pause="$emit('pause')"
       />
       <FAIcon
-        v-if="!allowPlay"
+        v-if="useModal"
         class="play-icon"
         icon="play-circle"
       />
     </a>
 
-    <audio
-      v-if="type === 'audio'"
-      :src="attachment.url"
-      :alt="attachment.description"
-      :title="attachment.description"
-      controls
-      @play="$emit('play')"
-      @pause="$emit('pause')"
-    />
+    <a
+      v-if="type === 'audio' && !hidden"
+      class="audio-container"
+      :href="attachment.url"
+      @click.stop.prevent="openModal"
+    >
+      <audio
+        v-if="type === 'audio'"
+        :src="attachment.url"
+        :alt="attachment.description"
+        :title="attachment.description"
+        controls
+        @play="$emit('play')"
+        @pause="$emit('pause')"
+      />
+    </a>
 
     <div
       v-if="type === 'html' && attachment.oembed"
-      class="oembed"
+      class="oembed-container"
       @click.prevent="linkClicked"
     >
       <div
@@ -118,211 +143,23 @@
       </div>
     </div>
 
-    <Flash
-      v-if="type === 'flash'"
-      :src="attachment.large_thumb_url || attachment.url"
-    />
+    <a
+      v-if="type === 'flash' && !hidden"
+      class="flash-container"
+      :href="attachment.url"
+      @click.stop.prevent="openModal"
+    >
+      <Flash
+        class="flash"
+        ref="flash"
+        :src="attachment.large_thumb_url || attachment.url"
+        @playerOpened="setFlashLoaded(true)"
+        @playerClosed="setFlashLoaded(false)"
+      />
+    </a>
   </div>
 </template>
 
 <script src="./attachment.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.attachments {
-  display: flex;
-  flex-wrap: wrap;
-
-  .non-gallery {
-    max-width: 100%;
-  }
-
-  .placeholder {
-    display: inline-block;
-    padding: 0.3em 1em 0.3em 0;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 100%;
-
-    svg {
-      color: inherit;
-    }
-  }
-
-  .nsfw-placeholder {
-    cursor: pointer;
-
-    &.loading {
-      cursor: progress;
-    }
-  }
-
-  .attachment {
-    position: relative;
-    margin-top: 0.5em;
-    align-self: flex-start;
-    line-height: 0;
-
-    border-style: solid;
-    border-width: 1px;
-    border-radius: $fallback--attachmentRadius;
-    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    overflow: hidden;
-  }
-
-  .non-gallery.attachment {
-    &.flash,
-    &.video {
-      flex: 1 0 40%;
-    }
-    .nsfw {
-      height: 260px;
-    }
-    .small {
-      height: 120px;
-      flex-grow: 0;
-    }
-    .video {
-      height: 260px;
-      display: flex;
-    }
-    video {
-      max-height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  .fullwidth {
-    flex-basis: 100%;
-  }
-  // fixes small gap below video
-  &.video {
-    line-height: 0;
-  }
-
-  .video-container {
-    display: flex;
-    max-height: 100%;
-  }
-
-  .video {
-    width: 100%;
-    height: 100%;
-  }
-
-  .play-icon {
-    position: absolute;
-    font-size: 64px;
-    top: calc(50% - 32px);
-    left: calc(50% - 32px);
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-  }
-
-  .play-icon::before {
-    margin: 0;
-  }
-
-  &.html {
-    flex-basis: 90%;
-    width: 100%;
-    display: flex;
-  }
-
-  .hider {
-    position: absolute;
-    right: 0;
-    margin: 10px;
-    padding: 0;
-    z-index: 4;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    text-align: center;
-    width: 2em;
-    height: 2em;
-    font-size: 1.25em;
-    // TODO: theming? hard to theme with unknown background image color
-    background: rgba(230, 230, 230, 0.7);
-    .svg-inline--fa {
-      color: rgba(0, 0, 0, 0.6);
-    }
-    &:hover .svg-inline--fa {
-      color: rgba(0, 0, 0, 0.9);
-    }
-  }
-
-  video {
-    z-index: 0;
-  }
-
-  audio {
-    width: 100%;
-  }
-
-  img.media-upload {
-    line-height: 0;
-    max-height: 200px;
-    max-width: 100%;
-  }
-
-  .oembed {
-    line-height: 1.2em;
-    flex: 1 0 100%;
-    width: 100%;
-    margin-right: 15px;
-    display: flex;
-
-    img {
-      width: 100%;
-    }
-
-    .image {
-      flex: 1;
-      img {
-        border: 0px;
-        border-radius: 5px;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .text {
-      flex: 2;
-      margin: 8px;
-      word-break: break-all;
-      h1 {
-        font-size: 14px;
-        margin: 0px;
-      }
-    }
-  }
-
-  .image-attachment {
-    &,
-    & .image {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .nsfw {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-
-    img {
-      image-orientation: from-image; // NOTE: only FF supports this
-    }
-  }
-}
-</style>
+<style src="./attachment.scss" lang="scss"></style>
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index fcfa7c8a..1dbe1cad 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -62,10 +62,6 @@
     &.with-media {
       width: 100%;
 
-      .gallery-row {
-        overflow: hidden;
-      }
-
       .status {
         width: 100%;
       }
diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index d03384c7..87f940a7 100644
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@@ -39,12 +39,13 @@ const Flash = {
           this.player = 'error'
         })
         this.ruffleInstance = player
+        this.$emit('playerOpened')
       })
     },
     closePlayer () {
-      console.log(this.ruffleInstance)
-      this.ruffleInstance.remove()
+      this.ruffleInstance && this.ruffleInstance.remove()
       this.player = false
+      this.$emit('playerClosed')
     }
   }
 }
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index d20d037b..5a77d235 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -36,13 +36,6 @@
         </p>
       </span>
     </button>
-    <button
-      v-if="player"
-      class="button-unstyled hider"
-      @click="closePlayer"
-    >
-      <FAIcon icon="stop" />
-    </button>
   </div>
 </template>
 
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index f856fd0a..134ea77e 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,15 +1,17 @@
 import Attachment from '../attachment/attachment.vue'
-import { chunk, last, dropRight, sumBy } from 'lodash'
+import { sumBy } from 'lodash'
 
 const Gallery = {
   props: [
     'attachments',
     'nsfw',
-    'setMedia'
+    'setMedia',
+    'size'
   ],
   data () {
     return {
-      sizes: {}
+      sizes: {},
+      hidingLong: true
     }
   },
   components: { Attachment },
@@ -18,26 +20,54 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
-      const rows = chunk(this.attachments, 3)
-      if (last(rows).length === 1 && rows.length > 1) {
-        // if 1 attachment on last row -> add it to the previous row instead
-        const lastAttachment = last(rows)[0]
-        const allButLastRow = dropRight(rows)
-        last(allButLastRow).push(lastAttachment)
-        return allButLastRow
+      console.log(this.size)
+      if (this.size === 'hide') {
+        return this.attachments.map(item => ({ minimal: true, items: [item] }))
       }
+      const rows = this.attachments.reduce((acc, attachment, i) => {
+        if (attachment.mimetype.includes('audio')) {
+          return [...acc, { audio: true, items: [attachment] }, { items: [] }]
+        }
+        const maxPerRow = 3
+        const attachmentsRemaining = this.attachments.length - i - 1
+        const currentRow = acc[acc.length - 1].items
+        if (
+          currentRow.length <= maxPerRow ||
+            attachmentsRemaining === 1
+        ) {
+          currentRow.push(attachment)
+        }
+        if (currentRow.length === maxPerRow && attachmentsRemaining > 1) {
+          return [...acc, { items: [] }]
+        } else {
+          return acc
+        }
+      }, [{ items: [] }]).filter(_ => _.items.length > 0)
       return rows
     },
-    useContainFit () {
-      return this.$store.getters.mergedConfig.useContainFit
+    attachmentsDimensionalScore () {
+      return this.rows.reduce((acc, row) => {
+        return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6)))
+      }, 0)
+    },
+    tooManyAttachments () {
+      if (this.size === 'hide') {
+        return this.attachments.length > 8
+      } else {
+        return this.attachmentsDimensionalScore > 1
+      }
     }
   },
   methods: {
     onNaturalSizeLoad (id, size) {
       this.$set(this.sizes, id, size)
     },
-    rowStyle (itemsPerRow) {
-      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
+    rowStyle (row) {
+      if (row.audio) {
+        return { 'padding-bottom': '25%' } // fixed reduced height for audio
+      } else if (!row.minimal) {
+        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+      }
     },
     itemStyle (id, row) {
       const total = sumBy(row, item => this.getAspectRatio(item.id))
@@ -46,6 +76,13 @@ const Gallery = {
     getAspectRatio (id) {
       const size = this.sizes[id]
       return size ? size.width / size.height : 1
+    },
+    toggleHidingLong (event) {
+      this.hidingLong = event
+    },
+    openGallery () {
+      this.setMedia()
+      this.$store.dispatch('setCurrent', this.attachments[0])
     }
   }
 }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ca91c9c1..8e08e514 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,26 +1,74 @@
 <template>
   <div
+    class="Gallery"
     ref="galleryContainer"
-    style="width: 100%;"
+    :class="{ '-long': tooManyAttachments && hidingLong  }"
   >
+    <div class="gallery-rows">
+      <div
+        v-for="(row, index) in rows"
+        :key="index"
+        class="gallery-row"
+        :style="rowStyle(row)"
+        :class="{ '-audio': row.audio, '-minimal': row.minimal }"
+      >
+        <div class="gallery-row-inner">
+          <attachment
+            v-for="attachment in row.items"
+            class="gallery-item"
+            :key="attachment.id"
+            :set-media="setMedia"
+            :nsfw="nsfw"
+            :attachment="attachment"
+            :allow-play="false"
+            :size="size"
+            :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
+            :style="itemStyle(attachment.id, row.items)"
+          />
+        </div>
+      </div>
+    </div>
     <div
-      v-for="(row, index) in rows"
-      :key="index"
-      class="gallery-row"
-      :style="rowStyle(row.length)"
-      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+      v-if="tooManyAttachments"
+      class="many-attachments"
     >
-      <div class="gallery-row-inner">
-        <attachment
-          v-for="attachment in row"
-          :key="attachment.id"
-          :set-media="setMedia"
-          :nsfw="nsfw"
-          :attachment="attachment"
-          :allow-play="false"
-          :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
-          :style="itemStyle(attachment.id, row)"
-        />
+      <div class="many-attachments-text">
+        {{ $t("status.many_attachments", { number: attachments.length })}}
+      </div>
+      <div class="many-attachments-buttons">
+        <span
+          v-if="!hidingLong"
+          class="many-attachments-button"
+        >
+          <button
+            class="button-unstyled -link"
+            @click="toggleHidingLong(true)"
+          >
+            {{ $t("status.collapse_attachments") }}
+          </button>
+        </span>
+        <span
+          v-if="hidingLong"
+          class="many-attachments-button"
+        >
+          <button
+            class="button-unstyled -link"
+            @click="toggleHidingLong(false)"
+          >
+            {{ $t("status.show_all_attachments") }}
+          </button>
+        </span>
+        <span
+          class="many-attachments-button"
+          v-if="hidingLong"
+        >
+          <button
+            class="button-unstyled -link"
+            @click="openGallery"
+          >
+            {{ $t("status.open_gallery") }}
+          </button>
+        </span>
       </div>
     </div>
   </div>
@@ -31,12 +79,64 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.gallery-row {
-  position: relative;
-  height: 0;
-  width: 100%;
-  flex-grow: 1;
-  margin-top: 0.5em;
+.Gallery {
+  .gallery-rows {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .gallery-row {
+    position: relative;
+    height: 0;
+    width: 100%;
+    flex-grow: 1;
+    margin-top: 0.5em;
+  }
+
+  &.-long {
+    .gallery-rows {
+      max-height: 25em;
+      overflow: hidden;
+      mask:
+        linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+        linear-gradient(to top, white, white);
+
+      /* Autoprefixed seem to ignore this one, and also syntax is different */
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+  }
+
+  .many-attachments-text {
+    text-align: center;
+    line-height: 2;
+  }
+
+  .many-attachments-buttons {
+    display: flex;
+  }
+
+  .many-attachments-button {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    line-height: 2;
+
+    button {
+      padding: 0 2em;
+    }
+  }
+
+  .gallery-row {
+
+    &.-minimal {
+      height: auto;
+
+      .gallery-row-inner {
+        position: relative;
+      }
+    }
+  }
 
   .gallery-row-inner {
     position: absolute;
@@ -50,7 +150,7 @@
     align-content: stretch;
   }
 
-  .gallery-row-inner .attachment {
+  .gallery-item {
     margin: 0 0.5em 0 0;
     flex-grow: 1;
     height: 100%;
@@ -61,32 +161,5 @@
       margin: 0;
     }
   }
-
-  .image-attachment {
-    width: 100%;
-    height: 100%;
-  }
-
-  .video-container {
-    height: 100%;
-  }
-
-  &.contain-fit {
-    img,
-    video,
-    canvas {
-      object-fit: contain;
-      height: 100%;
-    }
-  }
-
-  &.cover-fit {
-    img,
-    video,
-    canvas {
-      object-fit: cover;
-    }
-  }
 }
-
 </style>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 51895ef6..49f9d7f8 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -58,24 +58,6 @@ const StatusContent = {
       }
       return 'normal'
     },
-    galleryTypes () {
-      if (this.attachmentSize === 'hide') {
-        return []
-      }
-      return this.mergedConfig.playVideosInModal
-        ? ['image', 'video']
-        : ['image']
-    },
-    galleryAttachments () {
-      return this.status.attachments.filter(
-        file => fileType.fileMatchesSomeType(this.galleryTypes, file)
-      )
-    },
-    nonGalleryAttachments () {
-      return this.status.attachments.filter(
-        file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
-      )
-    },
     maxThumbnails () {
       return this.mergedConfig.maxThumbnails
     },
@@ -93,7 +75,7 @@ const StatusContent = {
   },
   methods: {
     setMedia () {
-      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
+      const attachments = this.status.attachments
       return () => this.$store.dispatch('setMedia', attachments)
     }
   }
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 2e71757d..0f999da6 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -11,29 +11,16 @@
         <poll :base-poll="status.poll" />
       </div>
 
-      <div
-        v-if="status.attachments.length !== 0"
+      <gallery
         class="attachments media-body"
-      >
-        <attachment
-          v-for="attachment in nonGalleryAttachments"
-          :key="attachment.id"
-          class="non-gallery"
-          :size="attachmentSize"
-          :nsfw="nsfwClickthrough"
-          :attachment="attachment"
-          :allow-play="true"
-          :set-media="setMedia()"
-          @play="$emit('mediaplay', attachment.id)"
-          @pause="$emit('mediapause', attachment.id)"
-        />
-        <gallery
-          v-if="galleryAttachments.length > 0"
-          :nsfw="nsfwClickthrough"
-          :attachments="galleryAttachments"
-          :set-media="setMedia()"
-        />
-      </div>
+        v-if="status.attachments.length !== 0"
+        :nsfw="nsfwClickthrough"
+        :attachments="status.attachments"
+        :set-media="setMedia()"
+        :size="attachmentSize"
+        @play="$emit('mediaplay', attachment.id)"
+        @pause="$emit('mediapause', attachment.id)"
+      />
 
       <div
         v-if="status.card && !noHeading"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 86870447..a4f24c64 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -717,7 +717,11 @@
     "nsfw": "NSFW",
     "expand": "Expand",
     "you": "(You)",
-    "plus_more": "+{number} more"
+    "plus_more": "+{number} more",
+    "many_attachments": "Post has {number} attachment(s)",
+    "collapse_attachments": "Collapse attachments",
+    "show_all_attachments": "Show all attachments",
+    "open_gallery": "Open gallery"
   },
   "user_card": {
     "approve": "Approve",

From 90345f158ff2eb12e619dbd7406f2fa81c379637 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:01:37 +0300
Subject: [PATCH 10/59] gallery now supports flash, fixes for flash component.
 refactored media modal

---
 src/components/attachment/attachment.js       |  9 ++++----
 src/components/flash/flash.vue                | 21 +++++++++++--------
 src/components/media_modal/media_modal.js     |  8 ++++---
 src/components/media_modal/media_modal.vue    |  7 +++++++
 .../status_content/status_content.js          |  6 ------
 .../status_content/status_content.vue         |  2 +-
 src/components/user_card/user_card.js         |  2 +-
 src/modules/media_viewer.js                   |  9 ++++----
 8 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 06928ca6..3ea96a7a 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -113,13 +113,14 @@ const Attachment = {
     },
     openModal (event) {
       if (this.useModal) {
-        this.setMedia()
-        this.$store.dispatch('setCurrent', this.attachment)
+        this.$emit('setMedia')
+        this.$store.dispatch('setCurrentMedia', this.attachment)
       }
     },
     openModalForce (event) {
-      this.setMedia()
-      this.$store.dispatch('setCurrent', this.attachment)
+      this.$emit('setMedia')
+      this.$store.dispatch('setCurrentMedia', this.attachment)
+    },
     },
     stopFlash () {
       this.$refs.flash.closePlayer()
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 5a77d235..95f71950 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -44,8 +44,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .Flash {
+  display: inline-block;
   width: 100%;
-  height: 260px;
+  height: 100%;
   position: relative;
 
   .player {
@@ -53,6 +54,16 @@
     width: 100%;
   }
 
+  .placeholder {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg);
+    color: var(--link);
+  }
+
   .hider {
     top: 0;
   }
@@ -69,13 +80,5 @@
     display: none;
     visibility: 'hidden';
   }
-
-  .placeholder {
-    height: 100%;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
 </style>
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index e7384c93..b6919366 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -3,6 +3,7 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
+import Flash from 'src/components/flash/flash.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
@@ -18,7 +19,8 @@ const MediaModal = {
   components: {
     StillImage,
     VideoAttachment,
-    Modal
+    Modal,
+    Flash
   },
   computed: {
     showing () {
@@ -67,13 +69,13 @@ const MediaModal = {
     goPrev () {
       if (this.canNavigate) {
         const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        this.$store.dispatch('setCurrent', this.media[prevIndex])
+        this.$store.dispatch('setCurrentMedia', this.media[prevIndex])
       }
     },
     goNext () {
       if (this.canNavigate) {
         const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
-        this.$store.dispatch('setCurrent', this.media[nextIndex])
+        this.$store.dispatch('setCurrentMedia', this.media[nextIndex])
       }
     },
     handleKeyupEvent (e) {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 54bc5335..a578bc71 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -28,6 +28,13 @@
       :title="currentMedia.description"
       controls
     />
+    <Flash
+      v-if="type === 'flash'"
+      class="modal-image"
+      :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
+    />
     <button
       v-if="canNavigate"
       :title="$t('media_modal.previous')"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 49f9d7f8..c085c992 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -72,12 +72,6 @@ const StatusContent = {
     Gallery,
     LinkPreview,
     StatusBody
-  },
-  methods: {
-    setMedia () {
-      const attachments = this.status.attachments
-      return () => this.$store.dispatch('setMedia', attachments)
-    }
   }
 }
 
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 0f999da6..a9511fbe 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -16,8 +16,8 @@
         v-if="status.attachments.length !== 0"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
-        :set-media="setMedia()"
         :size="attachmentSize"
+        @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index d9fb64d1..23e6358f 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -159,7 +159,7 @@ export default {
         mimetype: 'image'
       }
       this.$store.dispatch('setMedia', [attachment])
-      this.$store.dispatch('setCurrent', attachment)
+      this.$store.dispatch('setCurrentMedia', attachment)
     },
     mentionUser () {
       this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
index 721c25e6..ebcba01d 100644
--- a/src/modules/media_viewer.js
+++ b/src/modules/media_viewer.js
@@ -1,4 +1,5 @@
 import fileTypeService from '../services/file_type/file_type.service.js'
+const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
 
 const mediaViewer = {
   state: {
@@ -10,7 +11,7 @@ const mediaViewer = {
     setMedia (state, media) {
       state.media = media
     },
-    setCurrent (state, index) {
+    setCurrentMedia (state, index) {
       state.activated = true
       state.currentIndex = index
     },
@@ -22,13 +23,13 @@ const mediaViewer = {
     setMedia ({ commit }, attachments) {
       const media = attachments.filter(attachment => {
         const type = fileTypeService.fileType(attachment.mimetype)
-        return type === 'image' || type === 'video' || type === 'audio'
+        return supportedTypes.has(type)
       })
       commit('setMedia', media)
     },
-    setCurrent ({ commit, state }, current) {
+    setCurrentMedia ({ commit, state }, current) {
       const index = state.media.indexOf(current)
-      commit('setCurrent', index || 0)
+      commit('setCurrentMedia', index || 0)
     },
     closeMediaViewer ({ commit }) {
       commit('close')

From f15599e6e57477131ba5592e2874916ed1da06e2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:04:01 +0300
Subject: [PATCH 11/59] gallery in post status form!

---
 src/components/attachment/attachment.js       |  30 +-
 src/components/attachment/attachment.vue      | 285 ++++++++++--------
 src/components/gallery/gallery.js             |  38 ++-
 src/components/gallery/gallery.vue            |   9 +-
 .../post_status_form/post_status_form.js      |   8 +-
 .../post_status_form/post_status_form.vue     |  57 +---
 6 files changed, 231 insertions(+), 196 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 3ea96a7a..a80c5c2e 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -13,7 +13,9 @@ import {
   faPlayCircle,
   faTimes,
   faStop,
-  faSearchPlus
+  faSearchPlus,
+  faTrashAlt,
+  faPencilAlt
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -24,19 +26,25 @@ library.add(
   faPlayCircle,
   faTimes,
   faStop,
-  faSearchPlus
+  faSearchPlus,
+  faTrashAlt,
+  faPencilAlt
 )
 
 const Attachment = {
   props: [
     'attachment',
+    'description',
+    'hideDescription',
     'nsfw',
     'size',
     'setMedia',
-    'naturalSizeLoad'
+    'remove',
+    'edit'
   ],
   data () {
     return {
+      localDescription: this.description || this.attachment.description,
       nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
       hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
       preloadImage: this.$store.getters.mergedConfig.preloadImage,
@@ -93,9 +101,6 @@ const Attachment = {
     isEmpty () {
       return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
     },
-    isSmall () {
-      return this.size === 'small'
-    },
     useModal () {
       const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
         : this.mergedConfig.playVideosInModal
@@ -105,6 +110,11 @@ const Attachment = {
     },
     ...mapGetters(['mergedConfig'])
   },
+  watch: {
+    localDescription (newVal) {
+      this.onEdit(newVal)
+    }
+  },
   methods: {
     linkClicked ({ target }) {
       if (target.tagName === 'A') {
@@ -121,6 +131,12 @@ const Attachment = {
       this.$emit('setMedia')
       this.$store.dispatch('setCurrentMedia', this.attachment)
     },
+    onEdit (event) {
+      console.log('ONEDIT', event)
+      this.edit && this.edit(this.attachment, event)
+    },
+    onRemove () {
+      this.remove && this.remove(this.attachment)
     },
     stopFlash () {
       this.$refs.flash.closePlayer()
@@ -154,7 +170,7 @@ const Attachment = {
     onImageLoad (image) {
       const width = image.naturalWidth
       const height = image.naturalHeight
-      this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
+      this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
     }
   }
 }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index fe9e9398..9b1e83a7 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,151 +12,180 @@
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
+      @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </button>
   <div
-    v-else
-    v-show="!isEmpty"
     class="Attachment"
     :class="classNames"
+    v-else
   >
-    <a
-      v-if="hidden"
-      class="image-container"
-      :href="attachment.url"
-      :alt="attachment.description"
-      :title="attachment.description"
-      @click.prevent.stop="toggleHidden"
-    >
-      <img
-        :key="nsfwImage"
-        class="nsfw"
-        :src="nsfwImage"
-      >
-      <FAIcon
-        v-if="type === 'video'"
-        class="play-icon"
-        icon="play-circle"
-      />
-    </a>
     <div
-      class="attachment-buttons"
-      v-if="!hidden"
-      >
-      <button
-        v-if="type === 'flash' && flashLoaded"
-        class="button-unstyled attachment-button"
-        @click.prevent="stopFlash"
-      >
-        <FAIcon icon="stop" />
-      </button>
-      <button
-        v-if="!useModal"
-        class="button-unstyled attachment-button"
-        @click.prevent="openModalForce"
-      >
-        <FAIcon icon="search-plus" />
-      </button>
-      <button
-        v-if="nsfw && hideNsfwLocal"
-        class="button-unstyled attachment-button"
-        @click.prevent="toggleHidden"
-      >
-        <FAIcon icon="times" />
-      </button>
-    </div>
-
-    <a
-      v-if="type === 'image' && (!hidden || preloadImage)"
-      class="image-container"
-      :class="{'-hidden': hidden && preloadImage }"
-      :href="attachment.url"
-      target="_blank"
-      @click.stop.prevent="openModal"
+      class="attachment-wrapper"
+      v-show="!isEmpty"
     >
-      <StillImage
-        class="image"
-        :referrerpolicy="referrerpolicy"
-        :mimetype="attachment.mimetype"
-        :src="attachment.large_thumb_url || attachment.url"
-        :image-load-handler="onImageLoad"
-        :alt="attachment.description"
-      />
-    </a>
-
-    <a
-      v-if="type === 'video' && !hidden"
-      class="video-container"
-      :href="attachment.url"
-      @click.stop.prevent="openModal"
-    >
-      <VideoAttachment
-        class="video"
-        :attachment="attachment"
-        :controls="!useModal"
-        @play="$emit('play')"
-        @pause="$emit('pause')"
-      />
-      <FAIcon
-        v-if="useModal"
-        class="play-icon"
-        icon="play-circle"
-      />
-    </a>
-
-    <a
-      v-if="type === 'audio' && !hidden"
-      class="audio-container"
-      :href="attachment.url"
-      @click.stop.prevent="openModal"
-    >
-      <audio
-        v-if="type === 'audio'"
-        :src="attachment.url"
+      <a
+        v-if="hidden"
+        class="image-container"
+        :href="attachment.url"
         :alt="attachment.description"
         :title="attachment.description"
-        controls
-        @play="$emit('play')"
-        @pause="$emit('pause')"
-      />
-    </a>
-
-    <div
-      v-if="type === 'html' && attachment.oembed"
-      class="oembed-container"
-      @click.prevent="linkClicked"
-    >
-      <div
-        v-if="attachment.thumb_url"
-        class="image"
+        @click.prevent.stop="toggleHidden"
       >
-        <img :src="attachment.thumb_url">
+        <img
+          :key="nsfwImage"
+          class="nsfw"
+          :src="nsfwImage"
+        >
+        <FAIcon
+          v-if="type === 'video'"
+          class="play-icon"
+          icon="play-circle"
+        />
+      </a>
+      <div
+        class="attachment-buttons"
+        v-if="!hidden"
+        >
+        <button
+          v-if="type === 'flash' && flashLoaded"
+          class="button-unstyled attachment-button"
+          @click.prevent="stopFlash"
+        >
+          <FAIcon icon="stop" />
+        </button>
+        <button
+          v-if="!useModal"
+          class="button-unstyled attachment-button"
+          @click.prevent="openModalForce"
+        >
+          <FAIcon icon="search-plus" />
+        </button>
+        <button
+          v-if="nsfw && hideNsfwLocal"
+          class="button-unstyled attachment-button"
+          @click.prevent="toggleHidden"
+        >
+          <FAIcon icon="times" />
+        </button>
+        <button
+          v-if="remove"
+          class="button-unstyled attachment-button"
+          @click.prevent="onRemove"
+        >
+          <FAIcon icon="trash-alt" />
+        </button>
       </div>
-      <div class="text">
-        <!-- eslint-disable vue/no-v-html -->
-        <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
-        <div v-html="attachment.oembed.oembedHTML" />
-        <!-- eslint-enable vue/no-v-html -->
-      </div>
-    </div>
 
-    <a
-      v-if="type === 'flash' && !hidden"
-      class="flash-container"
-      :href="attachment.url"
-      @click.stop.prevent="openModal"
+      <a
+        v-if="type === 'image' && (!hidden || preloadImage)"
+        class="image-container"
+        :class="{'-hidden': hidden && preloadImage }"
+        :href="attachment.url"
+        target="_blank"
+        @click.stop.prevent="openModal"
+      >
+        <StillImage
+          class="image"
+          :referrerpolicy="referrerpolicy"
+          :mimetype="attachment.mimetype"
+          :src="attachment.large_thumb_url || attachment.url"
+          :image-load-handler="onImageLoad"
+          :alt="attachment.description"
+        />
+      </a>
+
+      <a
+        v-if="type === 'video' && !hidden"
+        class="video-container"
+        :href="attachment.url"
+        @click.stop.prevent="openModal"
+      >
+        <VideoAttachment
+          class="video"
+          :attachment="attachment"
+          :controls="!useModal"
+          @play="$emit('play')"
+          @pause="$emit('pause')"
+        />
+        <FAIcon
+          v-if="useModal"
+          class="play-icon"
+          icon="play-circle"
+        />
+      </a>
+
+      <a
+        v-if="type === 'audio' && !hidden"
+        class="audio-container"
+        :href="attachment.url"
+        @click.stop.prevent="openModal"
+      >
+        <audio
+          v-if="type === 'audio'"
+          :src="attachment.url"
+          :alt="attachment.description"
+          :title="attachment.description"
+          controls
+          @play="$emit('play')"
+          @pause="$emit('pause')"
+        />
+      </a>
+
+      <div
+        v-if="type === 'html' && attachment.oembed"
+        class="oembed-container"
+        @click.prevent="linkClicked"
+      >
+        <div
+          v-if="attachment.thumb_url"
+          class="image"
+        >
+          <img :src="attachment.thumb_url">
+        </div>
+        <div class="text">
+          <!-- eslint-disable vue/no-v-html -->
+          <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
+          <div v-html="attachment.oembed.oembedHTML" />
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
+      </div>
+
+      <a
+        v-if="type === 'flash' && !hidden"
+        class="flash-container"
+        :href="attachment.url"
+        @click.stop.prevent="openModal"
+      >
+        <Flash
+          class="flash"
+          ref="flash"
+          :src="attachment.large_thumb_url || attachment.url"
+          @playerOpened="setFlashLoaded(true)"
+          @playerClosed="setFlashLoaded(false)"
+        />
+      </a>
+    </div>
+    <div
+      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      class="description-container"
+      :class="{ '-static': !edit }"
     >
-      <Flash
-        class="flash"
-        ref="flash"
-        :src="attachment.large_thumb_url || attachment.url"
-        @playerOpened="setFlashLoaded(true)"
-        @playerClosed="setFlashLoaded(false)"
-      />
-    </a>
+      <input
+        v-if="edit"
+        v-model="localDescription"
+        type="text"
+        class="description-field"
+        :placeholder="$t('post_status.media_description')"
+        @keydown.enter.prevent=""
+      >
+      <p v-else>
+        {{ localDescription }}
+      </p>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 134ea77e..cca67dbd 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -4,9 +4,15 @@ import { sumBy } from 'lodash'
 const Gallery = {
   props: [
     'attachments',
+    'limitRows',
+    'descriptions',
     'nsfw',
     'setMedia',
-    'size'
+    'size',
+    'editable',
+    'removeAttachment',
+    'editAttachment',
+    'maxPerRow'
   ],
   data () {
     return {
@@ -20,24 +26,19 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
-      console.log(this.size)
       if (this.size === 'hide') {
         return this.attachments.map(item => ({ minimal: true, items: [item] }))
       }
       const rows = this.attachments.reduce((acc, attachment, i) => {
+        if (this.size === 'small' && acc.length === 2) return acc
         if (attachment.mimetype.includes('audio')) {
           return [...acc, { audio: true, items: [attachment] }, { items: [] }]
         }
-        const maxPerRow = 3
-        const attachmentsRemaining = this.attachments.length - i - 1
+        const maxPerRow = this.maxPerRow || 3
+        const attachmentsRemaining = this.attachments.length - i + 1
         const currentRow = acc[acc.length - 1].items
-        if (
-          currentRow.length <= maxPerRow ||
-            attachmentsRemaining === 1
-        ) {
-          currentRow.push(attachment)
-        }
-        if (currentRow.length === maxPerRow && attachmentsRemaining > 1) {
+        currentRow.push(attachment)
+        if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
           return [...acc, { items: [] }]
         } else {
           return acc
@@ -51,7 +52,9 @@ const Gallery = {
       }, 0)
     },
     tooManyAttachments () {
-      if (this.size === 'hide') {
+      if (this.editable || this.size === 'small') {
+        return false
+      } else if (this.size === 'hide') {
         return this.attachments.length > 8
       } else {
         return this.attachmentsDimensionalScore > 1
@@ -59,8 +62,8 @@ const Gallery = {
     }
   },
   methods: {
-    onNaturalSizeLoad (id, size) {
-      this.$set(this.sizes, id, size)
+    onNaturalSizeLoad ({ id, width, height }) {
+      this.$set(this.sizes, id, { width, height })
     },
     rowStyle (row) {
       if (row.audio) {
@@ -81,8 +84,11 @@ const Gallery = {
       this.hidingLong = event
     },
     openGallery () {
-      this.setMedia()
-      this.$store.dispatch('setCurrent', this.attachments[0])
+      this.$store.dispatch('setMedia', this.attachments)
+      this.$store.dispatch('setCurrentMedia', this.attachments[0])
+    },
+    onMedia () {
+      this.$store.dispatch('setMedia', this.attachments)
     }
   }
 }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 8e08e514..cedf64d3 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -17,13 +17,18 @@
             v-for="attachment in row.items"
             class="gallery-item"
             :key="attachment.id"
-            :set-media="setMedia"
             :nsfw="nsfw"
             :attachment="attachment"
             :allow-play="false"
             :size="size"
-            :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
+            :editable="editable"
+            :remove="removeAttachment"
+            :edit="editAttachment"
+            :description="descriptions && descriptions[attachment.id]"
+            :hideDescription="tooManyAttachments && hidingLong"
             :style="itemStyle(attachment.id, row.items)"
+            @setMedia="onMedia"
+            @naturalSizeLoad="onNaturalSizeLoad"
           />
         </div>
       </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 5342894f..1a12db9c 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
 import Attachment from '../attachment/attachment.vue'
+import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
@@ -85,7 +86,8 @@ const PostStatusForm = {
     Checkbox,
     Select,
     Attachment,
-    StatusContent
+    StatusContent,
+    Gallery
   },
   mounted () {
     this.updateIdempotencyKey()
@@ -388,6 +390,10 @@ const PostStatusForm = {
       this.newStatus.files.splice(index, 1)
       this.$emit('resize')
     },
+    editAttachment (fileInfo, newText) {
+      console.log(fileInfo, newText)
+      this.newStatus.mediaDescriptions[fileInfo.id] = newText
+    },
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}
       this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index fbda41d6..c6f84a4b 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -287,32 +287,21 @@
           @click="clearError"
         />
       </div>
-      <div class="attachments">
-        <div
-          v-for="file in newStatus.files"
-          :key="file.url"
-          class="media-upload-wrapper"
-        >
-          <button
-            class="button-unstyled hider"
-            @click="removeMediaFile(file)"
-          >
-            <FAIcon icon="times" />
-          </button>
-          <attachment
-            :attachment="file"
-            :set-media="() => $store.dispatch('setMedia', newStatus.files)"
-            size="small"
-            allow-play="false"
-          />
-          <input
-            v-model="newStatus.mediaDescriptions[file.id]"
-            type="text"
-            :placeholder="$t('post_status.media_description')"
-            @keydown.enter.prevent=""
-          >
-        </div>
-      </div>
+      <gallery
+        v-if="newStatus.files && newStatus.files.length > 0"
+        class="attachments"
+        :maxPerRow="1"
+        :nsfw="false"
+        :attachments="newStatus.files"
+        :descriptions="newStatus.mediaDescriptions"
+        :set-media="() => $store.dispatch('setMedia', newStatus.files)"
+        :editable="true"
+        :editAttachment="editAttachment"
+        :removeAttachment="removeMediaFile"
+        size="small"
+        @play="$emit('mediaplay', attachment.id)"
+        @pause="$emit('mediapause', attachment.id)"
+      />
       <div
         v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
         class="upload_settings"
@@ -507,15 +496,6 @@
     flex-direction: column;
   }
 
-   .attachments .media-upload-wrapper {
-    position: relative;
-
-    .attachment {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
   .btn {
     cursor: pointer;
   }
@@ -616,11 +596,4 @@
     border: 2px dashed var(--text, $fallback--text);
   }
 }
-
-// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
-img.media-upload, .media-upload-container > video {
-  line-height: 0;
-  max-height: 200px;
-  max-width: 100%;
-}
 </style>

From f35c090caaccf272c12358a2a02df71b9212d16c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:27:32 +0300
Subject: [PATCH 12/59] merged in compact notifs and improved upon it

---
 src/components/gallery/gallery.js                    | 10 +++++++---
 src/components/gallery/gallery.vue                   |  2 +-
 src/components/post_status_form/post_status_form.vue |  1 -
 src/components/status_body/status_body.scss          |  2 +-
 src/components/status_body/status_body.vue           |  5 ++++-
 src/components/status_content/status_content.vue     |  1 +
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index cca67dbd..ab13f698 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -6,6 +6,7 @@ const Gallery = {
     'attachments',
     'limitRows',
     'descriptions',
+    'limit',
     'nsfw',
     'setMedia',
     'size',
@@ -26,11 +27,14 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
+      console.log(this.limit)
+      const attachments = this.limit > 0
+        ? this.attachments.slice(0, this.limit)
+        : this.attachments
       if (this.size === 'hide') {
-        return this.attachments.map(item => ({ minimal: true, items: [item] }))
+        return attachments.map(item => ({ minimal: true, items: [item] }))
       }
-      const rows = this.attachments.reduce((acc, attachment, i) => {
-        if (this.size === 'small' && acc.length === 2) return acc
+      const rows = attachments.reduce((acc, attachment, i) => {
         if (attachment.mimetype.includes('audio')) {
           return [...acc, { audio: true, items: [attachment] }, { items: [] }]
         }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index cedf64d3..a1f1c26c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -25,7 +25,7 @@
             :remove="removeAttachment"
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
-            :hideDescription="tooManyAttachments && hidingLong"
+            :hideDescription="size === 'small' || tooManyAttachments && hidingLong"
             :style="itemStyle(attachment.id, row.items)"
             @setMedia="onMedia"
             @naturalSizeLoad="onNaturalSizeLoad"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index c6f84a4b..88ca4c9c 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -298,7 +298,6 @@
         :editable="true"
         :editAttachment="editAttachment"
         :removeAttachment="removeMediaFile"
-        size="small"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 516ced9d..5be21171 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -151,7 +151,7 @@
 
     .attachments {
       margin-top: 0;
-      flex: 1 1 auto;
+      flex: 1 1 0;
       min-width: 5em;
       height: 100%;
     }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 2be46303..3eb13ce2 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="StatusBody">
+<div
+  class="StatusBody"
+  :class="{ '-compact': compact }"
+  >
     <div class="body">
       <div
         v-if="status.summary_raw_html"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index c1533b19..90ce130d 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -20,6 +20,7 @@
         v-if="status.attachments.length !== 0"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
+        :limit="this.compact ? 1 : 0"
         :size="attachmentSize"
         @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"

From bfe31e20eaddaa9435c98962c53c35f4184ed5fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 14:12:50 +0300
Subject: [PATCH 13/59] better compact attachments

---
 src/components/attachment/attachment.js         | 17 +++++++++++++----
 src/components/gallery/gallery.vue              |  5 ++++-
 src/components/status_body/status_body.scss     |  6 +++---
 .../status_content/status_content.vue           |  5 -----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index a80c5c2e..84656ffa 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -68,6 +68,7 @@ const Attachment = {
           '-nsfw-placeholder': this.hidden
         },
         '-' + this.type,
+        '-' + this.size,
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`
       ]
     },
@@ -102,10 +103,18 @@ const Attachment = {
       return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
     },
     useModal () {
-      const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
-        : this.mergedConfig.playVideosInModal
-          ? ['image', 'video']
-          : ['image']
+      let modalTypes = []
+      switch (this.size) {
+        case 'hide':
+        case 'small':
+          modalTypes = ['image', 'video', 'audio', 'flash']
+          break
+        default:
+          modalTypes = this.mergedConfig.playVideosInModal
+            ? ['image', 'video', 'flash']
+            : ['image']
+          break
+      }
       return modalTypes.includes(this.type)
     },
     ...mapGetters(['mergedConfig'])
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index a1f1c26c..65175366 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -95,7 +95,10 @@
     height: 0;
     width: 100%;
     flex-grow: 1;
-    margin-top: 0.5em;
+
+    &:not(:first-child) {
+      margin-top: 0.5em;
+    }
   }
 
   &.-long {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 5be21171..f261108e 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -123,6 +123,7 @@
   }
 
   &.-compact {
+    align-items: top;
     flex-direction: row;
 
     --emoji-size: 16px;
@@ -140,9 +141,7 @@
       mask-size: auto 3.5em, auto auto;
       mask-position: 0 0, 0 0;
       mask-repeat: repeat-x, repeat;
-      mask-image:
-        linear-gradient(to top, white 0.5em, transparent 2.5em),
-        linear-gradient(to top, white, white);
+      mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
       -webkit-mask-composite: xor;
@@ -154,6 +153,7 @@
       flex: 1 1 0;
       min-width: 5em;
       height: 100%;
+      margin-left: 0.5em;
     }
 
     .summary-wrapper {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 90ce130d..573eadf5 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -51,10 +51,5 @@ $status-margin: 0.75em;
 .StatusContent {
   flex: 1;
   min-width: 0;
-  &.-compact {
-    flex {
-      display: flex;
-    }
-  }
 }
 </style>

From 8bab8658e8efd5b8b9f8de9311432c814fa2ef9c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 16:11:16 +0300
Subject: [PATCH 14/59] better handling of unknown files, better upload display

---
 src/components/attachment/attachment.js       |  7 +++--
 src/components/attachment/attachment.vue      | 31 ++++++++++++++++++-
 src/components/gallery/gallery.js             | 17 +++++++++-
 .../post_status_form/post_status_form.vue     |  4 +++
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 84656ffa..bd424087 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -65,10 +65,11 @@ const Attachment = {
       return [
         {
           '-loading': this.loading,
-          '-nsfw-placeholder': this.hidden
+          '-nsfw-placeholder': this.hidden,
+          '-editable': this.edit !== undefined
         },
-        '-' + this.type,
-        '-' + this.size,
+        '-type-' + this.type,
+        this.size && '-size-' + this.size,
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`
       ]
     },
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 9b1e83a7..b8be82da 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -15,8 +15,37 @@
       @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ this.edit ? '' : placeholderName }}
     </a>
+    <div
+      class="attachment-buttons"
+      v-if="edit || remove"
+      >
+      <button
+        v-if="remove"
+        class="button-unstyled attachment-button"
+        @click.prevent="onRemove"
+      >
+        <FAIcon icon="trash-alt" />
+      </button>
+    </div>
+    <div
+      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      class="description-container"
+      :class="{ '-static': !edit }"
+    >
+      <input
+        v-if="edit"
+        v-model="localDescription"
+        type="text"
+        class="description-field"
+        :placeholder="$t('post_status.media_description')"
+        @keydown.enter.prevent=""
+      >
+      <p v-else>
+        {{ localDescription }}
+      </p>
+    </div>
   </button>
   <div
     class="Attachment"
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index ab13f698..741f1de2 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -38,6 +38,13 @@ const Gallery = {
         if (attachment.mimetype.includes('audio')) {
           return [...acc, { audio: true, items: [attachment] }, { items: [] }]
         }
+        if (!(
+          attachment.mimetype.includes('image') ||
+            attachment.mimetype.includes('video') ||
+            attachment.mimetype.includes('flash')
+        )) {
+          return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
+        }
         const maxPerRow = this.maxPerRow || 3
         const attachmentsRemaining = this.attachments.length - i + 1
         const currentRow = acc[acc.length - 1].items
@@ -52,7 +59,15 @@ const Gallery = {
     },
     attachmentsDimensionalScore () {
       return this.rows.reduce((acc, row) => {
-        return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6)))
+        let size = 0
+        if (row.minimal) {
+          size += 1 / 8
+        } else if (row.audio) {
+          size += 1 / 4
+        } else {
+          size += 1 / (row.items.length + 0.6)
+        }
+        return acc + size
       }, 0)
     },
     tooManyAttachments () {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 88ca4c9c..5078ad5f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -338,6 +338,10 @@
 .post-status-form {
   position: relative;
 
+  .attachments {
+    margin-bottom: 0.5em;
+  }
+
   .form-bottom {
     display: flex;
     justify-content: space-between;

From 44b741e270fcd949d25340d34cabbe4361ac5a03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 17:30:56 +0300
Subject: [PATCH 15/59] better attachments in uploading (grid layout)

---
 src/components/gallery/gallery.js             | 49 ++++++++++---------
 src/components/gallery/gallery.vue            | 25 ++++++++--
 .../post_status_form/post_status_form.vue     | 19 +------
 3 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 741f1de2..15436d61 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -13,7 +13,7 @@ const Gallery = {
     'editable',
     'removeAttachment',
     'editAttachment',
-    'maxPerRow'
+    'grid'
   ],
   data () {
     return {
@@ -27,34 +27,35 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
-      console.log(this.limit)
       const attachments = this.limit > 0
         ? this.attachments.slice(0, this.limit)
         : this.attachments
       if (this.size === 'hide') {
         return attachments.map(item => ({ minimal: true, items: [item] }))
       }
-      const rows = attachments.reduce((acc, attachment, i) => {
-        if (attachment.mimetype.includes('audio')) {
-          return [...acc, { audio: true, items: [attachment] }, { items: [] }]
-        }
-        if (!(
-          attachment.mimetype.includes('image') ||
-            attachment.mimetype.includes('video') ||
-            attachment.mimetype.includes('flash')
-        )) {
-          return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
-        }
-        const maxPerRow = this.maxPerRow || 3
-        const attachmentsRemaining = this.attachments.length - i + 1
-        const currentRow = acc[acc.length - 1].items
-        currentRow.push(attachment)
-        if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
-          return [...acc, { items: [] }]
-        } else {
-          return acc
-        }
-      }, [{ items: [] }]).filter(_ => _.items.length > 0)
+      const rows = this.grid
+        ? [{ grid: true, items: attachments }]
+        : attachments.reduce((acc, attachment, i) => {
+          if (attachment.mimetype.includes('audio')) {
+            return [...acc, { audio: true, items: [attachment] }, { items: [] }]
+          }
+          if (!(
+            attachment.mimetype.includes('image') ||
+              attachment.mimetype.includes('video') ||
+              attachment.mimetype.includes('flash')
+          )) {
+            return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
+          }
+          const maxPerRow = 3
+          const attachmentsRemaining = this.attachments.length - i + 1
+          const currentRow = acc[acc.length - 1].items
+          currentRow.push(attachment)
+          if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
+            return [...acc, { items: [] }]
+          } else {
+            return acc
+          }
+        }, [{ items: [] }]).filter(_ => _.items.length > 0)
       return rows
     },
     attachmentsDimensionalScore () {
@@ -87,7 +88,7 @@ const Gallery = {
     rowStyle (row) {
       if (row.audio) {
         return { 'padding-bottom': '25%' } // fixed reduced height for audio
-      } else if (!row.minimal) {
+      } else if (!row.minimal && !row.grid) {
         return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
       }
     },
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 65175366..424a15f1 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -10,9 +10,12 @@
         :key="index"
         class="gallery-row"
         :style="rowStyle(row)"
-        :class="{ '-audio': row.audio, '-minimal': row.minimal }"
+        :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
       >
-        <div class="gallery-row-inner">
+        <div
+          class="gallery-row-inner"
+          :class="{ '-grid': grid }"
+        >
           <attachment
             v-for="attachment in row.items"
             class="gallery-item"
@@ -136,10 +139,9 @@
   }
 
   .gallery-row {
-
+    &.-grid,
     &.-minimal {
       height: auto;
-
       .gallery-row-inner {
         position: relative;
       }
@@ -156,6 +158,21 @@
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: stretch;
+
+    &.-grid {
+      width: 100%;
+      height: auto;
+      position: relative;
+      display: grid;
+      grid-column-gap: 0.5em;
+      grid-row-gap: 0.5em;
+      grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+
+      .gallery-item {
+        margin: 0;
+        height: 200px;
+      }
+    }
   }
 
   .gallery-item {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5078ad5f..5ff191cf 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -290,7 +290,7 @@
       <gallery
         v-if="newStatus.files && newStatus.files.length > 0"
         class="attachments"
-        :maxPerRow="1"
+        :grid="true"
         :nsfw="false"
         :attachments="newStatus.files"
         :descriptions="newStatus.mediaDescriptions"
@@ -318,23 +318,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.tribute-container {
-  ul {
-    padding: 0px;
-    li {
-      display: flex;
-      align-items: center;
-    }
-  }
-  img {
-    padding: 3px;
-    width: 16px;
-    height: 16px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-  }
-}
-
 .post-status-form {
   position: relative;
 

From 6b8b9c017f5f07ad1b7c6692393554e5bf5d0f45 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 17:39:29 +0300
Subject: [PATCH 16/59] whoops

---
 src/components/attachment/attachment.scss | 271 ++++++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 src/components/attachment/attachment.scss

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
new file mode 100644
index 00000000..f902f37d
--- /dev/null
+++ b/src/components/attachment/attachment.scss
@@ -0,0 +1,271 @@
+@import '../../_variables.scss';
+
+.Attachment {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  align-self: flex-start;
+  line-height: 0;
+  height: 100%;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--attachmentRadius;
+  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  z-index: 1;
+
+  .attachment-wrapper {
+    flex: 1 1 auto;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+  }
+
+  .description-container {
+    flex: 0 1 0;
+    display: flex;
+    padding-top: 0.5em;
+
+    p {
+      flex: 1;
+      text-align: center;
+      line-height: 1.5;
+      padding: 0.5em;
+      margin: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &.-static {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 1;
+      background: var(--popover);
+      box-shadow: var(--popupShadow);
+      opacity: 0;
+      transition: 0.35s all;
+      transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    }
+  }
+
+  &:hover {
+    .description-container.-static {
+      opacity: 1;
+      transform: translateY(-3em);
+    }
+  }
+
+  .description-field {
+    flex: 1;
+    min-width: 0;
+  }
+
+  & .image-container,
+  & .audio-container,
+  & .video-container,
+  & .flash-container,
+  & .oembed-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-container {
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  & .flash-container,
+  & .video-container {
+    & .flash,
+    & video {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      align-self: center;
+      z-index: 0;
+    }
+  }
+
+  .audio-container {
+    display: flex;
+    align-items: flex-end;
+
+    audio {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .play-icon {
+    position: absolute;
+    font-size: 64px;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    color: rgba(255, 255, 255, 0.75);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+
+    &::before {
+      margin: 0;
+    }
+  }
+
+  .attachment-buttons {
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .attachment-button {
+      padding: 0;
+      z-index: 4;
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      text-align: center;
+      width: 2em;
+      height: 2em;
+      margin-left: 0.5em;
+      font-size: 1.25em;
+      // TODO: theming? hard to theme with unknown background image color
+      background: rgba(230, 230, 230, 0.7);
+
+      .svg-inline--fa {
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      &:hover .svg-inline--fa {
+        color: rgba(0, 0, 0, 0.9);
+      }
+    }
+  }
+
+  .oembed-container {
+    line-height: 1.2em;
+    flex: 1 0 100%;
+    width: 100%;
+    margin-right: 15px;
+    display: flex;
+
+    img {
+      width: 100%;
+    }
+
+    .image {
+      flex: 1;
+      img {
+        border: 0px;
+        border-radius: 5px;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .text {
+      flex: 2;
+      margin: 8px;
+      word-break: break-all;
+      h1 {
+        font-size: 14px;
+        margin: 0px;
+      }
+    }
+  }
+
+  &.-size-small {
+    .play-icon {
+      zoom: 0.5;
+      opacity: 0.7;
+    }
+
+    .attachment-buttons {
+      zoom: 0.7;
+      opacity: 0.5;
+    }
+  }
+
+  &.-editable {
+    padding: 0.5em;
+
+    & .description-container,
+    & .attachment-buttons {
+      margin: 0;
+    }
+  }
+
+  &.-placeholder {
+    display: inline-block;
+    color: $fallback--link;
+    color: var(--postLink, $fallback--link);
+    overflow: hidden;
+    white-space: nowrap;
+    height: auto;
+    line-height: 1.5;
+
+    &:not(.-editable) {
+      border: none;
+    }
+
+    &.-editable {
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      & .description-container,
+      & .attachment-buttons {
+        margin: 0;
+        padding: 0;
+        position: relative;
+      }
+
+      .description-container {
+        flex: 1;
+        padding-left: 0.5em;
+      }
+
+      .attachment-buttons {
+        order: 99;
+        align-self: center;
+      }
+    }
+
+    a {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  &.-loading {
+    cursor: progress;
+  }
+
+  &.-contain-fit {
+    img,
+    canvas {
+      object-fit: contain;
+    }
+  }
+
+  &.-cover-fit {
+    img,
+    canvas {
+      object-fit: cover;
+    }
+  }
+}

From 4016182b89dacbc9095ee7f4d2e021bb9fad65d0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:32:55 +0300
Subject: [PATCH 17/59] fix z-indexes

---
 src/components/attachment/attachment.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index f902f37d..b4a81a08 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -13,14 +13,12 @@
   border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  z-index: 1;
 
   .attachment-wrapper {
     flex: 1 1 auto;
     height: 100%;
     position: relative;
     overflow: hidden;
-    z-index: 2;
   }
 
   .description-container {
@@ -44,7 +42,6 @@
       left: 0;
       right: 0;
       top: 0;
-      z-index: 1;
       background: var(--popover);
       box-shadow: var(--popupShadow);
       opacity: 0;
@@ -91,7 +88,6 @@
       max-height: 100%;
       object-fit: contain;
       align-self: center;
-      z-index: 0;
     }
   }
 
@@ -123,13 +119,12 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 2;
     margin-top: 0.5em;
     margin-right: 0.5em;
+    z-index: 1;
 
     .attachment-button {
       padding: 0;
-      z-index: 4;
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       text-align: center;

From 4ba8d95a10fdf22a7cefc56ea0515b7c30ee53ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:33:57 +0300
Subject: [PATCH 18/59] fix videos and related not having working drag controls

---
 src/components/attachment/attachment.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index b8be82da..e1e700c4 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -127,7 +127,7 @@
         />
       </a>
 
-      <a
+      <span
         v-if="type === 'video' && !hidden"
         class="video-container"
         :href="attachment.url"
@@ -145,9 +145,9 @@
           class="play-icon"
           icon="play-circle"
         />
-      </a>
+      </span>
 
-      <a
+      <span
         v-if="type === 'audio' && !hidden"
         class="audio-container"
         :href="attachment.url"
@@ -162,7 +162,7 @@
           @play="$emit('play')"
           @pause="$emit('pause')"
         />
-      </a>
+      </span>
 
       <div
         v-if="type === 'html' && attachment.oembed"
@@ -183,7 +183,7 @@
         </div>
       </div>
 
-      <a
+      <span
         v-if="type === 'flash' && !hidden"
         class="flash-container"
         :href="attachment.url"
@@ -196,7 +196,7 @@
           @playerOpened="setFlashLoaded(true)"
           @playerClosed="setFlashLoaded(false)"
         />
-      </a>
+      </span>
     </div>
     <div
       v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"

From 5118eee19a5dba5245b9394ac222cf1ff7e09ea0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:35:34 +0300
Subject: [PATCH 19/59] fix videos not stretching to container

---
 src/components/attachment/attachment.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index b4a81a08..0cb23a37 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -84,8 +84,8 @@
   & .video-container {
     & .flash,
     & video {
-      max-width: 100%;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
       align-self: center;
     }

From 628b99d117240d3335d1730e66d7747c662a3acd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:37:08 +0300
Subject: [PATCH 20/59] don't stretch columns when uploading media

---
 src/components/gallery/gallery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 424a15f1..5a2de68d 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -166,7 +166,7 @@
       display: grid;
       grid-column-gap: 0.5em;
       grid-row-gap: 0.5em;
-      grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
 
       .gallery-item {
         margin: 0;

From a2f21f4e131e03240699017ef92b7dba38c4fb44 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:42:52 +0300
Subject: [PATCH 21/59] fix description colliding with extra-long text

---
 src/components/attachment/attachment.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 0cb23a37..33e058e7 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -25,6 +25,7 @@
     flex: 0 1 0;
     display: flex;
     padding-top: 0.5em;
+    z-index: 1;
 
     p {
       flex: 1;

From b67db47c888dd45c49a49b82e7922c2bf40ed61c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:47:35 +0300
Subject: [PATCH 22/59] lint

---
 src/components/attachment/attachment.vue         | 16 ++++++++--------
 src/components/gallery/gallery.vue               | 12 ++++++------
 .../post_status_form/post_status_form.vue        |  4 ++--
 src/components/status_body/status_body.vue       |  6 +++---
 src/components/status_content/status_content.js  |  1 -
 src/components/status_content/status_content.vue | 12 ++++++------
 6 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e1e700c4..98d9c3ec 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -15,12 +15,12 @@
       @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ this.edit ? '' : placeholderName }}
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
     </a>
     <div
-      class="attachment-buttons"
       v-if="edit || remove"
-      >
+      class="attachment-buttons"
+    >
       <button
         v-if="remove"
         class="button-unstyled attachment-button"
@@ -48,13 +48,13 @@
     </div>
   </button>
   <div
+    v-else
     class="Attachment"
     :class="classNames"
-    v-else
   >
     <div
-      class="attachment-wrapper"
       v-show="!isEmpty"
+      class="attachment-wrapper"
     >
       <a
         v-if="hidden"
@@ -76,9 +76,9 @@
         />
       </a>
       <div
-        class="attachment-buttons"
         v-if="!hidden"
-        >
+        class="attachment-buttons"
+      >
         <button
           v-if="type === 'flash' && flashLoaded"
           class="button-unstyled attachment-button"
@@ -190,8 +190,8 @@
         @click.stop.prevent="openModal"
       >
         <Flash
-          class="flash"
           ref="flash"
+          class="flash"
           :src="attachment.large_thumb_url || attachment.url"
           @playerOpened="setFlashLoaded(true)"
           @playerClosed="setFlashLoaded(false)"
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 5a2de68d..18b94d58 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="Gallery"
     ref="galleryContainer"
-    :class="{ '-long': tooManyAttachments && hidingLong  }"
+    class="Gallery"
+    :class="{ '-long': tooManyAttachments && hidingLong }"
   >
     <div class="gallery-rows">
       <div
@@ -18,8 +18,8 @@
         >
           <attachment
             v-for="attachment in row.items"
-            class="gallery-item"
             :key="attachment.id"
+            class="gallery-item"
             :nsfw="nsfw"
             :attachment="attachment"
             :allow-play="false"
@@ -28,7 +28,7 @@
             :remove="removeAttachment"
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
-            :hideDescription="size === 'small' || tooManyAttachments && hidingLong"
+            :hide-description="size === 'small' || tooManyAttachments && hidingLong"
             :style="itemStyle(attachment.id, row.items)"
             @setMedia="onMedia"
             @naturalSizeLoad="onNaturalSizeLoad"
@@ -41,7 +41,7 @@
       class="many-attachments"
     >
       <div class="many-attachments-text">
-        {{ $t("status.many_attachments", { number: attachments.length })}}
+        {{ $t("status.many_attachments", { number: attachments.length }) }}
       </div>
       <div class="many-attachments-buttons">
         <span
@@ -67,8 +67,8 @@
           </button>
         </span>
         <span
-          class="many-attachments-button"
           v-if="hidingLong"
+          class="many-attachments-button"
         >
           <button
             class="button-unstyled -link"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5ff191cf..87e6d2ab 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -296,8 +296,8 @@
         :descriptions="newStatus.mediaDescriptions"
         :set-media="() => $store.dispatch('setMedia', newStatus.files)"
         :editable="true"
-        :editAttachment="editAttachment"
-        :removeAttachment="removeMediaFile"
+        :edit-attachment="editAttachment"
+        :remove-attachment="removeMediaFile"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 91ab1797..1001508c 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -1,7 +1,7 @@
 <template>
-<div
-  class="StatusBody"
-  :class="{ '-compact': compact }"
+  <div
+    class="StatusBody"
+    :class="{ '-compact': compact }"
   >
     <div class="body">
       <div
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 55f701d0..9059642e 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -3,7 +3,6 @@ import Poll from '../poll/poll.vue'
 import Gallery from '../gallery/gallery.vue'
 import StatusBody from 'src/components/status_body/status_body.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
-import fileType from 'src/services/file_type/file_type.service'
 import { mapGetters, mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 573eadf5..86b3c52a 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -1,8 +1,8 @@
 <template>
-<div
-  class="StatusContent"
-  :class="{ '-compact': compact }"
->
+  <div
+    class="StatusContent"
+    :class="{ '-compact': compact }"
+  >
     <slot name="header" />
     <StatusBody
       :status="status"
@@ -16,11 +16,11 @@
       </div>
 
       <gallery
-        class="attachments media-body"
         v-if="status.attachments.length !== 0"
+        class="attachments media-body"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
-        :limit="this.compact ? 1 : 0"
+        :limit="compact ? 1 : 0"
         :size="attachmentSize"
         @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"

From 6aa6f6f300d2f9de1e6c70a67b9459ae4c4b5a8f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 17:53:35 +0300
Subject: [PATCH 23/59] fix console errors

---
 src/components/status_content/status_content.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 9db176f0..ea32890e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -24,7 +24,6 @@
         :attachments="status.attachments"
         :limit="compact ? 1 : 0"
         :size="attachmentSize"
-        @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />

From c8a7b6f4338e5240762915ef40aeb81e8d9beefe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:21:25 +0300
Subject: [PATCH 24/59] fix long posts double-fading in notifications

---
 src/components/status_body/status_body.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index f4167ac1..91c33135 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -50,6 +50,7 @@ const StatusContent = {
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
     tallStatus () {
+      if (this.singleLine || this.compact) return false
       const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
       return lengthScore > 20
     },

From 07c12ae16273498209ce557b59ea610e40365ad9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:26:37 +0300
Subject: [PATCH 25/59] replace poll with an icon in notifications

---
 src/components/status_content/status_content.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index ea32890e..69635aad 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -10,13 +10,20 @@
       :single-line="singleLine"
       @parseReady="$emit('parseReady', $event)"
     >
-      <div v-if="status.poll && status.poll.options">
+      <div v-if="status.poll && status.poll.options && !compact">
         <Poll
           :base-poll="status.poll"
           :emoji="status.emojis"
         />
       </div>
 
+      <div v-else-if="status.poll && status.poll.options && compact">
+        <FAIcon
+          icon="poll-h"
+          size="2x"
+        />
+      </div>
+
       <gallery
         v-if="status.attachments.length !== 0"
         class="attachments media-body"

From 299c00cf74fbef8b8b597330b8c0e6e28765ab7e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:35:26 +0300
Subject: [PATCH 26/59] fix video attachments in notifications not having
 pointer cursor

---
 src/components/attachment/attachment.js  | 3 +++
 src/components/attachment/attachment.vue | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index bd424087..b2ba1655 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -118,6 +118,9 @@ const Attachment = {
       }
       return modalTypes.includes(this.type)
     },
+    videoTag () {
+      return this.useModal ? 'button' : 'span'
+    },
     ...mapGetters(['mergedConfig'])
   },
   watch: {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 98d9c3ec..8a1c31c7 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -127,9 +127,11 @@
         />
       </a>
 
-      <span
+      <component
+        :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
+        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >
@@ -145,7 +147,7 @@
           class="play-icon"
           icon="play-circle"
         />
-      </span>
+      </component>
 
       <span
         v-if="type === 'audio' && !hidden"

From f5823a96e970b6936185b7545c68d9401f8b3281 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:43:52 +0300
Subject: [PATCH 27/59] add key attribute to make image refresh in media modal
 to give feedback when images are still loaded

---
 src/components/media_modal/media_modal.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index a578bc71..31455e48 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -8,6 +8,7 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
@@ -19,11 +20,13 @@
       class="modal-image"
       :attachment="currentMedia"
       :controls="true"
+      :key="currentMedia.url"
     />
     <audio
       v-if="type === 'audio'"
       class="modal-image"
       :src="currentMedia.url"
+      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       controls
@@ -31,6 +34,7 @@
     <Flash
       v-if="type === 'flash'"
       class="modal-image"
+      :key="currentMedia.url"
       :src="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"

From 34d265467a77d4e680e3c56c254df7dfb904fc18 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:45:48 +0300
Subject: [PATCH 28/59] add media description into media modal

---
 src/components/media_modal/media_modal.js  |   3 +
 src/components/media_modal/media_modal.vue | 126 ++++++++++++---------
 2 files changed, 76 insertions(+), 53 deletions(-)

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index b6919366..2e6aa1e3 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -29,6 +29,9 @@ const MediaModal = {
     media () {
       return this.$store.state.mediaViewer.media
     },
+    description () {
+      return this.currentMedia.description
+    },
     currentIndex () {
       return this.$store.state.mediaViewer.currentIndex
     },
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 31455e48..2a571056 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -61,6 +61,12 @@
         icon="chevron-right"
       />
     </button>
+    <span
+      v-if="description"
+      class="description"
+    >
+      {{ description }}
+    </span>
   </Modal>
 </template>
 
@@ -69,6 +75,7 @@
 <style lang="scss">
 .modal-view.media-modal-view {
   z-index: 1001;
+  flex-direction: column;
 
   .modal-view-button-arrow {
     opacity: 0.75;
@@ -84,63 +91,76 @@
   }
 }
 
-@keyframes media-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.modal-image {
-  max-width: 90%;
-  max-height: 90%;
-  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
-  image-orientation: from-image; // NOTE: only FF supports this
-  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
-}
-
-.modal-view-button-arrow {
-  position: absolute;
-  display: block;
-  top: 50%;
-  margin-top: -50px;
-  width: 70px;
-  height: 100px;
-  border: 0;
-  padding: 0;
-  opacity: 0;
-  box-shadow: none;
-  background: none;
-  appearance: none;
-  overflow: visible;
-  cursor: pointer;
-  transition: opacity 333ms cubic-bezier(.4,0,.22,1);
-
-  .arrow-icon {
-    position: absolute;
-    top: 35px;
-    height: 30px;
-    width: 32px;
-    font-size: 14px;
-    line-height: 30px;
-    color: #FFF;
-    text-align: center;
-    background-color: rgba(0,0,0,.3);
-  }
-
-  &--prev {
-    left: 0;
-    .arrow-icon {
-      left: 6px;
+.media-modal-view {
+  @keyframes media-fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
     }
   }
 
-  &--next {
-    right: 0;
+  /* Hardcoded since background is also hardcoded */
+  .description {
+    color: white;
+    margin-top: 1em;
+    text-shadow: 0 0 10px black, 0 0 10px black;
+    max-width: 500px;
+    max-height: 9.5em;
+    overflow-y: auto;
+    padding: 0 2em;
+  }
+
+  .modal-image {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+    image-orientation: from-image; // NOTE: only FF supports this
+    animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+  }
+
+  .modal-view-button-arrow {
+    position: absolute;
+    display: block;
+    top: 50%;
+    margin-top: -50px;
+    width: 70px;
+    height: 100px;
+    border: 0;
+    padding: 0;
+    opacity: 0;
+    box-shadow: none;
+    background: none;
+    appearance: none;
+    overflow: visible;
+    cursor: pointer;
+    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+
     .arrow-icon {
-      right: 6px;
+      position: absolute;
+      top: 35px;
+      height: 30px;
+      width: 32px;
+      font-size: 14px;
+      line-height: 30px;
+      color: #FFF;
+      text-align: center;
+      background-color: rgba(0,0,0,.3);
+    }
+
+    &--prev {
+      left: 0;
+      .arrow-icon {
+        left: 6px;
+      }
+    }
+
+    &--next {
+      right: 0;
+      .arrow-icon {
+        right: 6px;
+      }
     }
   }
 }

From 830a03a0d13738ed1677d364fdf03821fbc507ab Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 21:04:28 +0300
Subject: [PATCH 29/59] inline description display

---
 src/components/attachment/attachment.js   | 12 +++++++++---
 src/components/attachment/attachment.scss | 13 ++-----------
 src/components/attachment/attachment.vue  |  8 ++++++++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index b2ba1655..fea7c6f8 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -15,7 +15,8 @@ import {
   faStop,
   faSearchPlus,
   faTrashAlt,
-  faPencilAlt
+  faPencilAlt,
+  faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -28,7 +29,8 @@ library.add(
   faStop,
   faSearchPlus,
   faTrashAlt,
-  faPencilAlt
+  faPencilAlt,
+  faAlignRight
 )
 
 const Attachment = {
@@ -52,7 +54,8 @@ const Attachment = {
       img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false,
       showHidden: false,
-      flashLoaded: false
+      flashLoaded: false,
+      showDescription: false
     }
   },
   components: {
@@ -157,6 +160,9 @@ const Attachment = {
     setFlashLoaded (event) {
       this.flashLoaded = event
     },
+    toggleDescription () {
+      this.showDescription = !this.showDescription
+    },
     toggleHidden (event) {
       if (
         (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 33e058e7..065c38d2 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -42,19 +42,10 @@
       position: absolute;
       left: 0;
       right: 0;
-      top: 0;
+      bottom: 0;
+      padding-top: 0;
       background: var(--popover);
       box-shadow: var(--popupShadow);
-      opacity: 0;
-      transition: 0.35s all;
-      transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-    }
-  }
-
-  &:hover {
-    .description-container.-static {
-      opacity: 1;
-      transform: translateY(-3em);
     }
   }
 
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 8a1c31c7..82a72a8d 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -86,6 +86,14 @@
         >
           <FAIcon icon="stop" />
         </button>
+        <button
+          v-if="attachment.description && size !== 'small' && !edit"
+          class="button-unstyled attachment-button"
+          @click.prevent="toggleDescription"
+          :title="$t('status.show_attachment_description')"
+        >
+          <FAIcon icon="align-right" />
+        </button>
         <button
           v-if="!useModal"
           class="button-unstyled attachment-button"

From 0507eb6550830f7b76910d51200675de0aa9b1de Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 21:04:49 +0300
Subject: [PATCH 30/59] ability to move attachments around when making a new
 post

---
 src/components/attachment/attachment.js       |  8 +++++++
 src/components/attachment/attachment.vue      | 24 +++++++++++++++++--
 src/components/gallery/gallery.js             |  2 ++
 src/components/gallery/gallery.vue            | 10 ++++----
 .../post_status_form/post_status_form.js      | 13 +++++++++-
 .../post_status_form/post_status_form.vue     |  2 ++
 src/i18n/en.json                              |  7 ++++++
 7 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index fea7c6f8..f9c8d981 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -42,6 +42,8 @@ const Attachment = {
     'size',
     'setMedia',
     'remove',
+    'shiftUp',
+    'shiftDn',
     'edit'
   ],
   data () {
@@ -154,6 +156,12 @@ const Attachment = {
     onRemove () {
       this.remove && this.remove(this.attachment)
     },
+    onShiftUp () {
+      this.shiftUp && this.shiftUp(this.attachment)
+    },
+    onShiftDn () {
+      this.shiftDn && this.shiftDn(this.attachment)
+    },
     stopFlash () {
       this.$refs.flash.closePlayer()
     },
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 82a72a8d..4abf63dd 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -30,7 +30,7 @@
       </button>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
       class="description-container"
       :class="{ '-static': !edit }"
     >
@@ -83,6 +83,7 @@
           v-if="type === 'flash' && flashLoaded"
           class="button-unstyled attachment-button"
           @click.prevent="stopFlash"
+          :title="$t('status.attachment_stop_flash')"
         >
           <FAIcon icon="stop" />
         </button>
@@ -98,6 +99,7 @@
           v-if="!useModal"
           class="button-unstyled attachment-button"
           @click.prevent="openModalForce"
+          :title="$t('status.show_attachment_in_modal')"
         >
           <FAIcon icon="search-plus" />
         </button>
@@ -105,13 +107,31 @@
           v-if="nsfw && hideNsfwLocal"
           class="button-unstyled attachment-button"
           @click.prevent="toggleHidden"
+          :title="$t('status.hide_attachment')"
         >
           <FAIcon icon="times" />
         </button>
+        <button
+          v-if="shiftUp"
+          class="button-unstyled attachment-button"
+          @click.prevent="onShiftUp"
+          :title="$t('status.move_up')"
+        >
+          <FAIcon icon="chevron-left" />
+        </button>
+        <button
+          v-if="shiftDn"
+          class="button-unstyled attachment-button"
+          @click.prevent="onShiftDn"
+          :title="$t('status.move_down')"
+        >
+          <FAIcon icon="chevron-right" />
+        </button>
         <button
           v-if="remove"
           class="button-unstyled attachment-button"
           @click.prevent="onRemove"
+          :title="$t('status.remove_attachment')"
         >
           <FAIcon icon="trash-alt" />
         </button>
@@ -209,7 +229,7 @@
       </span>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
       class="description-container"
       :class="{ '-static': !edit }"
     >
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 15436d61..094b3e57 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -12,6 +12,8 @@ const Gallery = {
     'size',
     'editable',
     'removeAttachment',
+    'shiftUpAttachment',
+    'shiftDnAttachment',
     'editAttachment',
     'grid'
   ],
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 18b94d58..f9cad8a9 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -6,8 +6,8 @@
   >
     <div class="gallery-rows">
       <div
-        v-for="(row, index) in rows"
-        :key="index"
+        v-for="(row, rowIndex) in rows"
+        :key="rowIndex"
         class="gallery-row"
         :style="rowStyle(row)"
         :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
@@ -16,8 +16,8 @@
           class="gallery-row-inner"
           :class="{ '-grid': grid }"
         >
-          <attachment
-            v-for="attachment in row.items"
+          <Attachment
+            v-for="(attachment, attachmentIndex) in row.items"
             :key="attachment.id"
             class="gallery-item"
             :nsfw="nsfw"
@@ -26,6 +26,8 @@
             :size="size"
             :editable="editable"
             :remove="removeAttachment"
+            :shiftUp="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
+            :shiftDn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
             :hide-description="size === 'small' || tooManyAttachments && hidingLong"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1a12db9c..fe07309f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -391,9 +391,20 @@ const PostStatusForm = {
       this.$emit('resize')
     },
     editAttachment (fileInfo, newText) {
-      console.log(fileInfo, newText)
       this.newStatus.mediaDescriptions[fileInfo.id] = newText
     },
+    shiftUpMediaFile (fileInfo) {
+      const { files } = this.newStatus
+      const index = this.newStatus.files.indexOf(fileInfo)
+      files.splice(index, 1)
+      files.splice(index - 1, 0, fileInfo)
+    },
+    shiftDnMediaFile (fileInfo) {
+      const { files } = this.newStatus
+      const index = this.newStatus.files.indexOf(fileInfo)
+      files.splice(index, 1)
+      files.splice(index + 1, 0, fileInfo)
+    },
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}
       this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 87e6d2ab..2e0980a2 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -298,6 +298,8 @@
         :editable="true"
         :edit-attachment="editAttachment"
         :remove-attachment="removeMediaFile"
+        :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
+        :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a4f24c64..0ccd0da7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -721,6 +721,13 @@
     "many_attachments": "Post has {number} attachment(s)",
     "collapse_attachments": "Collapse attachments",
     "show_all_attachments": "Show all attachments",
+    "show_attachment_in_modal": "Show in media modal",
+    "show_attachment_description": "Preview description (open attachment for full description)",
+    "hide_attachment": "Hide attachment",
+    "remove_attachment": "Remove attachment",
+    "attachment_stop_flash": "Stop Flash player",
+    "move_up": "Shift attachment left",
+    "move_down": "Shift attachment right",
     "open_gallery": "Open gallery"
   },
   "user_card": {

From 7cc19ef2eadd9d2c41f46917b2ce80035712aec7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Aug 2021 01:02:56 +0300
Subject: [PATCH 31/59] better media modal loading

---
 src/components/media_modal/media_modal.js  | 31 ++++++++++++++++----
 src/components/media_modal/media_modal.vue | 34 +++++++++++++++++++---
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 2e6aa1e3..b8bce730 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -7,12 +7,14 @@ import Flash from 'src/components/flash/flash.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
-  faChevronRight
+  faChevronRight,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faChevronLeft,
-  faChevronRight
+  faChevronRight,
+  faCircleNotch
 )
 
 const MediaModal = {
@@ -22,6 +24,11 @@ const MediaModal = {
     Modal,
     Flash
   },
+  data () {
+    return {
+      loading: false
+    }
+  },
   computed: {
     showing () {
       return this.$store.state.mediaViewer.activated
@@ -42,7 +49,7 @@ const MediaModal = {
       return this.media.length > 1
     },
     type () {
-      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+      return this.currentMedia ? this.getType(this.currentMedia) : null
     }
   },
   created () {
@@ -58,6 +65,9 @@ const MediaModal = {
     )
   },
   methods: {
+    getType (media) {
+      return fileTypeService.fileType(media.mimetype)
+    },
     mediaTouchStart (e) {
       GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
       GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
@@ -72,15 +82,26 @@ const MediaModal = {
     goPrev () {
       if (this.canNavigate) {
         const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        this.$store.dispatch('setCurrentMedia', this.media[prevIndex])
+        const newMedia = this.media[prevIndex]
+        if (this.getType(newMedia) === 'image') {
+          this.loading = true
+        }
+        this.$store.dispatch('setCurrentMedia', newMedia)
       }
     },
     goNext () {
       if (this.canNavigate) {
         const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
-        this.$store.dispatch('setCurrentMedia', this.media[nextIndex])
+        const newMedia = this.media[nextIndex]
+        if (this.getType(newMedia) === 'image') {
+          this.loading = true
+        }
+        this.$store.dispatch('setCurrentMedia', newMedia)
       }
     },
+    onImageLoaded () {
+      this.loading = false
+    },
     handleKeyupEvent (e) {
       if (this.showing && e.keyCode === 27) { // escape
         this.hide()
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 2a571056..e8bc8591 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -6,27 +6,26 @@
   >
     <img
       v-if="type === 'image'"
+      :class="{ loading }"
       class="modal-image"
       :src="currentMedia.url"
-      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
       @touchmove.stop="mediaTouchMove"
       @click="hide"
+      @load="onImageLoaded"
     >
     <VideoAttachment
       v-if="type === 'video'"
       class="modal-image"
       :attachment="currentMedia"
       :controls="true"
-      :key="currentMedia.url"
     />
     <audio
       v-if="type === 'audio'"
       class="modal-image"
       :src="currentMedia.url"
-      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       controls
@@ -34,7 +33,6 @@
     <Flash
       v-if="type === 'flash'"
       class="modal-image"
-      :key="currentMedia.url"
       :src="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
@@ -67,6 +65,16 @@
     >
       {{ description }}
     </span>
+    <span
+      v-if="loading"
+      class="loading-spinner"
+    >
+      <FAIcon
+        spin
+        icon="circle-notch"
+        size="5x"
+      />
+    </span>
   </Modal>
 </template>
 
@@ -85,6 +93,7 @@
       outline: none;
       box-shadow: none;
     }
+
     &:hover {
       opacity: 1;
     }
@@ -118,6 +127,23 @@
     box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
     image-orientation: from-image; // NOTE: only FF supports this
     animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+
+    &.loading {
+      opacity: 0.5;
+    }
+  }
+
+  .loading-spinner {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      color: white;
+    }
   }
 
   .modal-view-button-arrow {

From 14ec7d6a41569af555ba5a361edbb413dbbd4c5d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Aug 2021 01:11:16 +0300
Subject: [PATCH 32/59] add attachment counter

---
 src/components/media_modal/media_modal.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index e8bc8591..bfe7ee6a 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -65,6 +65,11 @@
     >
       {{ description }}
     </span>
+    <span
+      class="counter"
+    >
+      {{ currentIndex + 1 }} / {{ media.length }}
+    </span>
     <span
       v-if="loading"
       class="loading-spinner"
@@ -110,15 +115,22 @@
     }
   }
 
-  /* Hardcoded since background is also hardcoded */
-  .description {
+  .description,
+  .counter {
+    /* Hardcoded since background is also hardcoded */
     color: white;
     margin-top: 1em;
     text-shadow: 0 0 10px black, 0 0 10px black;
+    padding: 0.2em 2em;
+  }
+
+  .description {
+    flex: 0 0 auto;
+    overflow-y: auto;
+    min-height: 1em;
     max-width: 500px;
     max-height: 9.5em;
-    overflow-y: auto;
-    padding: 0 2em;
+    word-break: break-all;
   }
 
   .modal-image {
@@ -141,6 +153,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
     svg {
       color: white;
     }

From 49fe33418609e68e4056783e84292ac856b989a5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Aug 2021 01:34:35 +0300
Subject: [PATCH 33/59] play gifs when hovering over notification

---
 src/components/notification/notification.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index ec291547..a91bf062 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -4,6 +4,12 @@
 .Notification {
   --emoji-size: 14px;
 
+  &:hover {
+    --_still-image-img-visibility: visible;
+    --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
+  }
+
   &.-muted {
     padding: 0.25em 0.6em;
     height: 1.2em;

From 56de3d2f528a818835c04baa1c1686f91fc42161 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Jan 2022 19:53:17 +0200
Subject: [PATCH 34/59] fix too-many-attachments in notifications column

---
 src/components/status_content/status_content.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 184f2783..dec8914a 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -48,12 +48,12 @@ const StatusContent = {
       return true
     },
     attachmentSize () {
-      if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
+      if (this.compact) {
+        return 'small'
+      } else if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
         (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
         (this.status.attachments.length > this.maxThumbnails)) {
         return 'hide'
-      } else if (this.compact) {
-        return 'small'
       }
       return 'normal'
     },

From d1f02221cb8e15654da2e101d51440db1570e14d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Jan 2022 21:44:41 +0200
Subject: [PATCH 35/59] changelog

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50eac575..09f767ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,12 +6,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## Unreleased
 ### Fixed
 - Completely hidden posts still had 1px border
+- Attachments are ALWAYS in same order as user uploaded, no more "videos first"
+- Attachment description is prefilled with backend-provided default when uploading
+- Proper visual feedback that next image is loading when browsing
 
 ### Changed
 - Settings window has been throughly rearranged to make make more sense and make navication settings easier.
+- Uploaded attachments are uniform with displayed attachments
+- Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues)
+- Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post.
 
 ### Added
 - Option to completely hide muted threads
+- Ability to open videos in modal even if you disabled that feature, via an icon button
+- New button on attachment that indicates that attachment has a description and shows a bar filled with description
+- Attachments are truncated just like post contents
+- Media modal now also displays description and counter position in gallery (i.e. 1/5)
+- Ability to rearrange order of attachments when uploading
 
 ## [2.4.2] - 2022-01-09
 ### Added 

From 06042569f1d2f2c7217917459df007adbb113e53 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:10:45 +0200
Subject: [PATCH 36/59] fix alignment issues

---
 src/components/mention_link/mention_link.scss |  2 +-
 src/components/popover/popover.vue            |  2 +-
 src/components/status/status.scss             | 10 ++++++++--
 src/components/status/status.vue              |  2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 03306dcc..23d18f59 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -3,7 +3,7 @@
 .MentionLink {
   position: relative;
   white-space: normal;
-  display: inline-block;
+  display: inline-flex;
   color: var(--link);
 
   & .new,
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2e78a09e..8588b351 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -33,7 +33,7 @@
 @import '../../_variables.scss';
 
 .popover-trigger-button {
-  display: block;
+  display: inline-block;
 }
 
 .popover {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 71305dd7..24c840ac 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -165,16 +165,23 @@ $status-margin: 0.75em;
     align-content: baseline;
     font-size: 12px;
     line-height: 160%;
+    margin-top: 0.2em;
+    line-height: 130%;
+
     max-width: 100%;
     align-items: stretch;
   }
 
   & .reply-to-popover,
-  & .reply-to-no-popover {
+  & .reply-to-no-popover,
+  & .mentions {
     min-width: 0;
     margin-right: 0.4em;
     flex-shrink: 0;
   }
+  .reply-glued-label {
+    margin-right: 0.5em;
+  }
 
   .reply-to-popover {
     .reply-to:hover::before {
@@ -209,7 +216,6 @@ $status-margin: 0.75em;
   & .reply-to {
     white-space: nowrap;
     position: relative;
-    padding-right: 0.25em;
   }
 
   & .mentions-text,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 2684e415..3bb29db6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -227,7 +227,7 @@
             >
               <span
                 v-if="isReply"
-                class="glued-label"
+                class="glued-label reply-glued-label"
               >
                 <StatusPopover
                   v-if="!isPreview"

From 6d3229b1a10a6547d5c0ebcf47a65f03a0f9c690 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:23:28 +0200
Subject: [PATCH 37/59] fix poast mentions tripping

---
 src/components/rich_content/rich_content.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index c0d20c5e..46bc661a 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -120,7 +120,8 @@ export default Vue.component('RichContent', {
           // don't include spaces when processing mentions - we'll include them
           // in MentionsLine
           lastSpacing = item
-          return currentMentions !== null ? item.trim() : item
+          // Don't remove last space in a container (fixes poast mentions)
+          return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
         }
 
         currentMentions = null

From bfb3a4364be3f71f7c46056aeb8972f04a072703 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:34:57 +0200
Subject: [PATCH 38/59] options to disable (You)s and highlighting of yourself

---
 src/components/mention_link/mention_link.js        |  8 +++++++-
 src/components/mention_link/mention_link.vue       |  4 ++--
 src/components/settings_modal/tabs/general_tab.vue | 10 ++++++++++
 src/i18n/en.json                                   |  2 ++
 src/modules/config.js                              |  2 ++
 src/modules/instance.js                            |  2 ++
 6 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 5209907d..55eea195 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -87,7 +87,7 @@ const MentionLink = {
     classnames () {
       return [
         {
-          '-you': this.isYou,
+          '-you': this.isYou && this.shouldBoldenYou,
           '-highlighted': this.highlight
         },
         this.highlightType
@@ -115,6 +115,12 @@ const MentionLink = {
     shouldShowAvatar () {
       return this.mergedConfig.mentionLinkShowAvatar
     },
+    shouldShowYous () {
+      return this.mergedConfig.mentionLinkShowYous
+    },
+    shouldBoldenYou () {
+      return this.mergedConfig.mentionLinkBoldenYou
+    },
     shouldFadeDomain () {
       return this.mergedConfig.mentionLinkFadeDomain
     },
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index ac20eb5a..d8ab79fb 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -45,8 +45,8 @@
           v-html="'@' + serverName"
         /></span>
         <span
-          v-if="isYou"
-          class="you"
+          v-if="isYou && shouldShowYous"
+          :class="{ '-you': shouldBoldenYou }"
         >{{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
       </a>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 44b1ac92..eba3b268 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -147,6 +147,11 @@
             {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="mentionLinkShowYous">
+            {{ $t('settings.show_yous') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
@@ -181,6 +186,11 @@
               {{ $t('settings.mention_link_fade_domain') }}
             </BooleanSetting>
           </li>
+          <li>
+            <BooleanSetting path="mentionLinkBoldenYou">
+              {{ $t('settings.mention_link_bolden_you') }}
+            </BooleanSetting>
+          </li>
         </ul>
       </ul>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 209fd184..8fd189c6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -493,8 +493,10 @@
     "mention_link_show_tooltip": "Show full user names as tooltip for remote users",
     "mention_link_show_avatar": "Show user avatar beside the link",
     "mention_link_fade_domain": "Fade domains (e.g. @example.org in @foo@example.org)",
+    "mention_link_bolden_you": "Bolden text of your mention",
     "fun": "Fun",
     "greentext": "Meme arrows",
+    "show_yous": "Show (You)s",
     "notifications": "Notifications",
     "notification_setting_filters": "Filters",
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
diff --git a/src/modules/config.js b/src/modules/config.js
index 9f2d4ef3..20979174 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -76,6 +76,8 @@ export const defaultState = {
   mentionLinkShowTooltip: undefined, // instance default
   mentionLinkShowAvatar: undefined, // instance default
   mentionLinkFadeDomain: undefined, // instance default
+  mentionLinkShowYous: undefined, // instance default
+  mentionLinkBoldenYou: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index d686f258..1abd784f 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -25,6 +25,8 @@ const defaultState = {
   mentionLinkShowTooltip: true,
   mentionLinkShowAvatar: false,
   mentionLinkFadeDomain: true,
+  mentionLinkShowYous: false,
+  mentionLinkBoldenYou: true,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,

From ea6114f63c972ac974f8e3055b93ae3340b6e85b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:36:13 +0200
Subject: [PATCH 39/59] better phrasing?

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8fd189c6..77f7e5b0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -493,7 +493,7 @@
     "mention_link_show_tooltip": "Show full user names as tooltip for remote users",
     "mention_link_show_avatar": "Show user avatar beside the link",
     "mention_link_fade_domain": "Fade domains (e.g. @example.org in @foo@example.org)",
-    "mention_link_bolden_you": "Bolden text of your mention",
+    "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "show_yous": "Show (You)s",

From 9a6363431d8f17cc1ee027eb498181d157fefdb7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:41:38 +0200
Subject: [PATCH 40/59] lint

---
 src/components/status/status.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 24c840ac..0f527def 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -164,10 +164,8 @@ $status-margin: 0.75em;
     position: relative;
     align-content: baseline;
     font-size: 12px;
-    line-height: 160%;
     margin-top: 0.2em;
     line-height: 130%;
-
     max-width: 100%;
     align-items: stretch;
   }
@@ -179,6 +177,7 @@ $status-margin: 0.75em;
     margin-right: 0.4em;
     flex-shrink: 0;
   }
+
   .reply-glued-label {
     margin-right: 0.5em;
   }

From a9830ff4913a56a3ff097505a4e65bb61117b4d5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:50:32 +0200
Subject: [PATCH 41/59] support width/height img attributes

---
 src/components/still-image/still-image.js  | 11 ++++++++++-
 src/components/still-image/still-image.vue |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 8044e994..d7abbcb5 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -5,7 +5,9 @@ const StillImage = {
     'mimetype',
     'imageLoadError',
     'imageLoadHandler',
-    'alt'
+    'alt',
+    'height',
+    'width'
   ],
   data () {
     return {
@@ -15,6 +17,13 @@ const StillImage = {
   computed: {
     animated () {
       return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+    },
+    style () {
+      const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
+      return {
+        height: this.height ? appendPx(this.height) : null,
+        width: this.width ? appendPx(this.width) : null
+      }
     }
   },
   methods: {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 0623b42e..cca75fcb 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -2,6 +2,7 @@
   <div
     class="still-image"
     :class="{ animated: animated }"
+    :style="style"
   >
     <canvas
       v-if="animated"

From 0f0193130963123998d3247426f3b3c9c60f2aa2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:52:41 +0200
Subject: [PATCH 42/59] make chat messages behave same as posts for animated
 gifs

---
 src/components/chat_message/chat_message.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index fcfa7c8a..5445d9f7 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -1,6 +1,7 @@
 @import '../../_variables.scss';
 
 .chat-message-wrapper {
+
   &.hovered-message-chain {
     .animated.Avatar {
       canvas {
@@ -40,6 +41,12 @@
   .chat-message {
     display: flex;
     padding-bottom: 0.5em;
+
+    .status-body:hover {
+      --_still-image-img-visibility: visible;
+      --_still-image-canvas-visibility: hidden;
+      --_still-image-label-visibility: hidden;
+    }
   }
 
   .avatar-wrapper {

From 39ecb338830a71c015688e7ec45e16e1151983d3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:58:12 +0200
Subject: [PATCH 43/59] fix amps in links

---
 src/components/rich_content/rich_content.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 46bc661a..8ebabad7 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -60,7 +60,7 @@ export default Vue.component('RichContent', {
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
+    const { newHtml: html } = preProcessPerLine(unescape(this.html), this.greentext)
     let currentMentions = null // Current chain of mentions, we group all mentions together
     // This is used to recover spacing removed when parsing mentions
     let lastSpacing = ''

From 571e73a346996f1bcdecb6545b44351a65fee3cb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 23:13:28 +0200
Subject: [PATCH 44/59] better approach to unescaping

---
 src/components/rich_content/rich_content.jsx               | 2 +-
 src/services/html_converter/html_tree_converter.service.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 8ebabad7..46bc661a 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -60,7 +60,7 @@ export default Vue.component('RichContent', {
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html } = preProcessPerLine(unescape(this.html), this.greentext)
+    const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
     let currentMentions = null // Current chain of mentions, we group all mentions together
     // This is used to recover spacing removed when parsing mentions
     let lastSpacing = ''
diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js
index 6a8796c4..247a8173 100644
--- a/src/services/html_converter/html_tree_converter.service.js
+++ b/src/services/html_converter/html_tree_converter.service.js
@@ -1,4 +1,5 @@
 import { getTagName } from './utility.service.js'
+import { unescape } from 'lodash'
 
 /**
  * This is a not-so-tiny purpose-built HTML parser/processor. This parses html
@@ -49,7 +50,7 @@ export const convertHtmlToTree = (html = '') => {
 
   const handleOpen = (tag) => {
     const curBuf = getCurrentBuffer()
-    const newLevel = [tag, []]
+    const newLevel = [unescape(tag), []]
     levels.push(newLevel)
     curBuf.push(newLevel)
   }

From d361a4d7dc18bd7c722ed76a894ebee8e5a50ed5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 4 Feb 2022 14:20:56 +0200
Subject: [PATCH 45/59] fix overflows

---
 src/components/mention_link/mention_link.scss   | 12 ++++++++----
 src/components/mentions_line/mentions_line.scss |  7 ++-----
 src/components/status/status.scss               |  2 ++
 src/components/status_body/status_body.scss     |  2 +-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 23d18f59..c7db7fb9 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -3,12 +3,12 @@
 .MentionLink {
   position: relative;
   white-space: normal;
-  display: inline-flex;
+  display: inline;
   color: var(--link);
 
   & .new,
   & .original {
-    display: inline-block;
+    display: inline;
     border-radius: 2px;
   }
 
@@ -38,8 +38,8 @@
     user-select: all;
   }
 
-  .short.-with-tooltip,
-  .you {
+  & .short.-with-tooltip,
+  & .you {
     user-select: none;
   }
 
@@ -48,6 +48,10 @@
     white-space: nowrap;
   }
 
+  .shortName {
+    white-space: normal;
+  }
+
   .new {
     &.-you {
       & .shortName,
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index b9d5c14a..1a485860 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,11 +1,8 @@
 .MentionsLine {
+  word-break: break-all;
+
   .showMoreLess {
     white-space: normal;
     color: var(--link);
   }
-
-  .fullExtraMentions,
-  .mention-link:not(:last-child) {
-    margin-right: 0.25em;
-  }
 }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0f527def..2028ade9 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -5,6 +5,8 @@ $status-margin: 0.75em;
 .Status {
   min-width: 0;
   white-space: normal;
+  word-wrap: break-word;
+  word-break: break-word;
 
   &:hover {
     --_still-image-img-visibility: visible;
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index c7732bfe..51623a26 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -9,7 +9,7 @@
   & .text,
   & .summary {
     font-family: var(--postFont, sans-serif);
-    white-space: pre-wrap;
+    white-space: normal;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;

From 4c7edfc9a9865003483bc4b78d29bb554e7901ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Feb 2022 23:34:06 +0200
Subject: [PATCH 46/59] more spacing/wrapping fixes

---
 src/components/mention_link/mention_link.scss   | 1 +
 src/components/mention_link/mention_link.vue    | 8 +++-----
 src/components/mentions_line/mentions_line.scss | 1 +
 src/components/status_body/status_body.scss     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index c7db7fb9..a4326296 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -5,6 +5,7 @@
   white-space: normal;
   display: inline;
   color: var(--link);
+  word-break: normal;
 
   & .new,
   & .original {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index d8ab79fb..13786c3a 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -43,14 +43,12 @@
           class="serverName"
           :class="{ '-faded': shouldFadeDomain }"
           v-html="'@' + serverName"
-        /></span>
-        <span
+        /></span><span
           v-if="isYou && shouldShowYous"
           :class="{ '-you': shouldBoldenYou }"
-        >{{ $t('status.you') }}</span>
+        > {{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
-      </a>
-      <span
+      </a><span
         v-if="shouldShowTooltip"
         class="full popover-default"
         :class="[highlightType]"
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 1a485860..9650a9a4 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -2,6 +2,7 @@
   word-break: break-all;
 
   .showMoreLess {
+    margin-left: 0.5em;
     white-space: normal;
     color: var(--link);
   }
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 51623a26..c7732bfe 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -9,7 +9,7 @@
   & .text,
   & .summary {
     font-family: var(--postFont, sans-serif);
-    white-space: normal;
+    white-space: pre-wrap;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;

From befd4d5fc787d3f8287456dbf5d1a6c70419591f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Feb 2022 15:42:28 +0200
Subject: [PATCH 47/59] improve unknown attachment handling

---
 src/components/attachment/attachment.js   |  7 ++++---
 src/components/attachment/attachment.scss | 10 ++++++++++
 src/components/attachment/attachment.vue  | 17 ++++++++++++++---
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index f9c8d981..d62a4adc 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -79,7 +79,7 @@ const Attachment = {
       ]
     },
     usePlaceholder () {
-      return this.size === 'hide' || this.type === 'unknown'
+      return this.size === 'hide'
     },
     useContainFit () {
       return this.$store.getters.mergedConfig.useContainFit
@@ -106,7 +106,7 @@ const Attachment = {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty () {
-      return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
+      return (this.type === 'html' && !this.attachment.oembed)
     },
     useModal () {
       let modalTypes = []
@@ -143,6 +143,8 @@ const Attachment = {
       if (this.useModal) {
         this.$emit('setMedia')
         this.$store.dispatch('setCurrentMedia', this.attachment)
+      } else if (this.type === 'unknown') {
+        window.open(this.attachment.url)
       }
     },
     openModalForce (event) {
@@ -150,7 +152,6 @@ const Attachment = {
       this.$store.dispatch('setCurrentMedia', this.attachment)
     },
     onEdit (event) {
-      console.log('ONEDIT', event)
       this.edit && this.edit(this.attachment, event)
     },
     onRemove () {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 065c38d2..dfda15bf 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -54,6 +54,7 @@
     min-width: 0;
   }
 
+  & .placeholder-container,
   & .image-container,
   & .audio-container,
   & .video-container,
@@ -93,6 +94,15 @@
     }
   }
 
+  .placeholder-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.5em;
+  }
+
+
   .play-icon {
     position: absolute;
     font-size: 64px;
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 4abf63dd..59173759 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,7 +12,6 @@
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
-      @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
@@ -88,7 +87,7 @@
           <FAIcon icon="stop" />
         </button>
         <button
-          v-if="attachment.description && size !== 'small' && !edit"
+          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
           class="button-unstyled attachment-button"
           @click.prevent="toggleDescription"
           :title="$t('status.show_attachment_description')"
@@ -96,7 +95,7 @@
           <FAIcon icon="align-right" />
         </button>
         <button
-          v-if="!useModal"
+          v-if="!useModal && type !== 'unknown'"
           class="button-unstyled attachment-button"
           @click.prevent="openModalForce"
           :title="$t('status.show_attachment_in_modal')"
@@ -155,6 +154,18 @@
         />
       </a>
 
+      <a
+        v-if="type === 'unknown' && !hidden"
+        class="placeholder-container"
+        :href="attachment.url"
+        target="_blank"
+      >
+        <FAIcon size="5x" :icon="placeholderIconClass" />
+        <p>
+          {{ localDescription }}
+        </p>
+      </a>
+
       <component
         :is="videoTag"
         v-if="type === 'video' && !hidden"

From 17d6f1b53b343fee3ed0ae6137846cd9f21097ec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Feb 2022 15:06:12 +0200
Subject: [PATCH 48/59] more spacing fixes

---
 src/components/mention_link/mention_link.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 13786c3a..3562f511 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -9,9 +9,7 @@
       class="original"
       target="_blank"
       v-html="content"
-    />
-    <!-- eslint-enable vue/no-v-html -->
-    <span
+    /><!-- eslint-enable vue/no-v-html --><span
       v-if="user"
       class="new"
       :style="style"

From ee86f56469e0eec44f3d2afa948c0213f83d0740 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Feb 2022 15:10:52 +0200
Subject: [PATCH 49/59] more spacing fixes

---
 src/components/mentions_line/mentions_line.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 9650a9a4..9a622e75 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,6 +1,10 @@
 .MentionsLine {
   word-break: break-all;
 
+  .mention-link:not(:first-child)::before {
+    content: ' ';
+  }
+
   .showMoreLess {
     margin-left: 0.5em;
     white-space: normal;

From a61f6e1590ce82e3c81203193469acb461b0ba4b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:12:37 +0200
Subject: [PATCH 50/59] use rich content in interaction lists

---
 src/components/user_list_popover/user_list_popover.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index f4b93c9a..e706bd1b 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -22,7 +22,12 @@
             />
             <div class="user-list-names">
               <!-- eslint-disable vue/no-v-html -->
-              <span v-html="user.name_html" />
+              <RichContent
+                class="username"
+                :title="'@'+user.screen_name_ui"
+                :html="user.name_html"
+                :emoji="user.emoji"
+              />
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
             </div>
@@ -47,6 +52,7 @@
 
 .user-list-popover {
   padding: 0.5em;
+  --emoji-size: 16px;
 
   .user-list-row {
     padding: 0.25em;

From 769a9a14fe99785270596ac587ac65f48d2043ac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:22:21 +0200
Subject: [PATCH 51/59] add emoji to chat titles

---
 src/components/chat_title/chat_title.vue       | 18 ++++++------------
 .../user_list_popover/user_list_popover.vue    |  1 +
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index b16ed39d..a92028e8 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <div
     class="chat-title"
     :title="title"
@@ -14,12 +13,13 @@
         height="23px"
       />
     </router-link>
-    <span
+    <RichContent
       class="username"
-      v-html="htmlTitle"
+      :title="'@'+user.screen_name_ui"
+      :html="htmlTitle"
+      :emoji="user.emoji"
     />
   </div>
-  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script src="./chat_title.js"></script>
@@ -34,6 +34,8 @@
   white-space: nowrap;
   align-items: center;
 
+  --emoji-size: 14px;
+
   .username {
     max-width: 100%;
     text-overflow: ellipsis;
@@ -41,14 +43,6 @@
     display: inline;
     word-wrap: break-word;
     overflow: hidden;
-    text-overflow: ellipsis;
-
-    .emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain
-    }
   }
 
   .Avatar {
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index e706bd1b..8706d0ff 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -52,6 +52,7 @@
 
 .user-list-popover {
   padding: 0.5em;
+
   --emoji-size: 16px;
 
   .user-list-row {

From 0d073d607cb2d033a9556eca64c5e905864ba2ed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:34:08 +0200
Subject: [PATCH 52/59] enable link handling in user bios to fix links not
 having _blank

---
 src/components/user_card/user_card.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5f957003..0708f387 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -275,6 +275,7 @@
         class="user-card-bio"
         :html="user.description_html"
         :emoji="user.emoji"
+        :handle-links="true"
       />
     </div>
   </div>

From a8d198768639435bad93a527228f62575eed37c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:40:19 +0200
Subject: [PATCH 53/59] fix unit tests

---
 test/unit/specs/components/rich_content.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index f6c478a9..8a29bd6e 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -350,7 +350,6 @@ describe('RichContent', () => {
         '<span>',
         '</span>',
         '</a>',
-        ' ',
         '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
         '</span>',
         '<!---->', // v-if placeholder, mentionsline's extra mentions and stuff

From 86e3aefdab3fa1314d4731eabcf03f8c9e418e41 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 23:04:51 +0200
Subject: [PATCH 54/59] new unit tests

---
 .../specs/components/rich_content.spec.js     | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 8a29bd6e..30c66a33 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -374,6 +374,84 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
+  it('rich contents of nested mentions are handled properly', () => {
+    attentions.push({ statusnet_profile_url: 'lol' })
+    const html = [
+      p(
+        '<span class="poast-style">',
+        '<a href="lol" class="mention">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        ' ',
+        '<a href="lol" class="mention">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        '</span>'
+      ),
+      p(
+        'Testing'
+      )
+    ].join('')
+    const expected = [
+      p(
+        '<span class="poast-style">',
+        '<span class="MentionsLine">',
+        '<span class="MentionLink mention-link">',
+        '<a href="lol" target="_blank" class="original">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+        '</span>',
+        '<span class="MentionLink mention-link">',
+        '<a href="lol" target="_blank" class="original">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+        '</span>',
+        '<!---->', // v-if placeholder, mentionsline's extra mentions and stuff
+        '</span>',
+        '</span>'
+      ),
+      ' ',
+      p(
+        'Testing'
+      )
+    ].join('')
+
+    const wrapper = mount(RichContent, {
+      localVue,
+      propsData: {
+        attentions,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
   it('rich contents of a link are handled properly', () => {
     const html = [
       '<p>',

From 2a97bdb39d7533ae55ddb0713d4fb3d670017ea5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 20 Feb 2022 00:04:47 +0200
Subject: [PATCH 55/59] fix pinned statuses appearing at the bottom of user
 timeline (and possibly fetching new ones there)

---
 src/components/timeline/timeline.vue |  2 +-
 src/modules/statuses.js              | 32 ++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 767428f0..c8cd38e0 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -37,7 +37,7 @@
         </template>
         <template v-for="status in timeline.visibleStatuses">
           <conversation
-            v-if="!excludedStatusIdsObject[status.id]"
+            v-if="status._meta.fetchedFromPinned <= 0"
             :key="status.id"
             class="status-fadein"
             :status-id="status.id"
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index ac5d25c4..4a968d1f 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -84,7 +84,7 @@ const mergeOrAdd = (arr, obj, item) => {
     // We already have this, so only merge the new info.
     // We ignore null values to avoid overwriting existing properties with missing data
     // we also skip 'user' because that is handled by users module
-    merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
+    merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user' || k === '_meta'))
     // Reactivity fix.
     oldItem.attachments.splice(oldItem.attachments.length)
     return { item: oldItem, new: false }
@@ -122,6 +122,22 @@ const sortTimeline = (timeline) => {
 
 // Add status to the global storages (arrays and objects maintaining statuses) except timelines
 const addStatusToGlobalStorage = (state, data) => {
+  // POST METADATA PROCESSING.
+  // In this context "metadata" means all the sidechannel information about the post that we have
+  // i.e. where post was obtained from (which endpoint), what timestamp was etc. anything that isn't
+  // directly attached into it by server.
+  //
+  // @@_meta.fetchedFromPinned: number
+  // -1 = fetched from elsewhere
+  // +1 = fetched from pinned posts
+  // 0 = fetched from elsewhere and from pinned posts
+  //
+  // The logic is mainly for user profile page - don't show post in timeline context
+  // if post was ONLY fetched from pinned posts, show it if it was obtained from
+  // elsewhere (i.e. user posts fetching)
+  data._meta = data._meta || {}
+  data._meta.fetchedFromPinned = data._meta.fetchedFromPinned || -1
+
   const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
   if (result.new) {
     // Add to conversation
@@ -133,6 +149,18 @@ const addStatusToGlobalStorage = (state, data) => {
     } else {
       set(conversationsObject, conversationId, [status])
     }
+  } else {
+    // If post was fetched from elsewhere AND from pinned (=0 we don't care anymore)
+    // otherwise we sum the old data and new data and clamp it to [-1; 1]
+    if (result.item._meta.fetchedFromPinned !== 0) {
+      result.item._meta.fetchedFromPinned = Math.min(
+        1,
+        Math.max(
+          -1,
+          result.item._meta.fetchedFromPinned + data._meta.fetchedFromPinned
+        )
+      )
+    }
   }
   return result
 }
@@ -626,7 +654,7 @@ const statuses = {
     },
     fetchPinnedStatuses ({ rootState, dispatch }, userId) {
       rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
-        .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
+        .then(statuses => dispatch('addNewStatuses', { statuses: statuses.map(status => ({ ...status, _meta: { fetchedFromPinned: 1 } })), timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
     },
     pinStatus ({ rootState, dispatch }, statusId) {
       return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })

From a31ff20f50906f70253bf43f4548c0f5b0ab8db4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 20 Feb 2022 00:36:21 +0200
Subject: [PATCH 56/59] lol, lmao, that was some shit, this is much easier and
 works all the time

---
 src/components/timeline/timeline.js  | 18 ----------------
 src/components/timeline/timeline.vue |  2 +-
 src/modules/statuses.js              | 32 ++--------------------------
 3 files changed, 3 insertions(+), 49 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 44f749c3..04f0e7d6 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -12,19 +12,6 @@ library.add(
   faCog
 )
 
-export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
-  const ids = []
-  if (pinnedStatusIds && pinnedStatusIds.length > 0) {
-    for (let status of statuses) {
-      if (!pinnedStatusIds.includes(status.id)) {
-        break
-      }
-      ids.push(status.id)
-    }
-  }
-  return ids
-}
-
 const Timeline = {
   props: [
     'timeline',
@@ -77,11 +64,6 @@ const Timeline = {
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
-    excludedStatusIdsObject () {
-      const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds)
-      // Convert id array to object
-      return keyBy(ids)
-    },
     pinnedStatusIdsObject () {
       return keyBy(this.pinnedStatusIds)
     },
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c8cd38e0..3ba5e8b5 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -37,7 +37,7 @@
         </template>
         <template v-for="status in timeline.visibleStatuses">
           <conversation
-            v-if="status._meta.fetchedFromPinned <= 0"
+            v-if="timelineName === 'bookmarks' || (status.id >= timeline.minId && status.id <= timeline.maxId)"
             :key="status.id"
             class="status-fadein"
             :status-id="status.id"
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 4a968d1f..ac5d25c4 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -84,7 +84,7 @@ const mergeOrAdd = (arr, obj, item) => {
     // We already have this, so only merge the new info.
     // We ignore null values to avoid overwriting existing properties with missing data
     // we also skip 'user' because that is handled by users module
-    merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user' || k === '_meta'))
+    merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
     // Reactivity fix.
     oldItem.attachments.splice(oldItem.attachments.length)
     return { item: oldItem, new: false }
@@ -122,22 +122,6 @@ const sortTimeline = (timeline) => {
 
 // Add status to the global storages (arrays and objects maintaining statuses) except timelines
 const addStatusToGlobalStorage = (state, data) => {
-  // POST METADATA PROCESSING.
-  // In this context "metadata" means all the sidechannel information about the post that we have
-  // i.e. where post was obtained from (which endpoint), what timestamp was etc. anything that isn't
-  // directly attached into it by server.
-  //
-  // @@_meta.fetchedFromPinned: number
-  // -1 = fetched from elsewhere
-  // +1 = fetched from pinned posts
-  // 0 = fetched from elsewhere and from pinned posts
-  //
-  // The logic is mainly for user profile page - don't show post in timeline context
-  // if post was ONLY fetched from pinned posts, show it if it was obtained from
-  // elsewhere (i.e. user posts fetching)
-  data._meta = data._meta || {}
-  data._meta.fetchedFromPinned = data._meta.fetchedFromPinned || -1
-
   const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
   if (result.new) {
     // Add to conversation
@@ -149,18 +133,6 @@ const addStatusToGlobalStorage = (state, data) => {
     } else {
       set(conversationsObject, conversationId, [status])
     }
-  } else {
-    // If post was fetched from elsewhere AND from pinned (=0 we don't care anymore)
-    // otherwise we sum the old data and new data and clamp it to [-1; 1]
-    if (result.item._meta.fetchedFromPinned !== 0) {
-      result.item._meta.fetchedFromPinned = Math.min(
-        1,
-        Math.max(
-          -1,
-          result.item._meta.fetchedFromPinned + data._meta.fetchedFromPinned
-        )
-      )
-    }
   }
   return result
 }
@@ -654,7 +626,7 @@ const statuses = {
     },
     fetchPinnedStatuses ({ rootState, dispatch }, userId) {
       rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
-        .then(statuses => dispatch('addNewStatuses', { statuses: statuses.map(status => ({ ...status, _meta: { fetchedFromPinned: 1 } })), timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
+        .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
     },
     pinStatus ({ rootState, dispatch }, statusId) {
       return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })

From 5864dc52f7144d230b8d8613723f6eb03be28f10 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 20 Feb 2022 00:43:38 +0200
Subject: [PATCH 57/59] removed file because that logic has been removed

---
 test/unit/specs/components/timeline.spec.js | 27 ---------------------
 1 file changed, 27 deletions(-)
 delete mode 100644 test/unit/specs/components/timeline.spec.js

diff --git a/test/unit/specs/components/timeline.spec.js b/test/unit/specs/components/timeline.spec.js
deleted file mode 100644
index 0c8674a8..00000000
--- a/test/unit/specs/components/timeline.spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { getExcludedStatusIdsByPinning } from 'src/components/timeline/timeline.js'
-
-describe('Timeline', () => {
-  describe('getExcludedStatusIdsByPinning', () => {
-    const mockStatuses = (ids) => ids.map(id => ({ id }))
-
-    it('should return only members of both pinnedStatusIds and ids of the given statuses', () => {
-      const statusIds = [1, 2, 3, 4]
-      const statuses = mockStatuses(statusIds)
-      const pinnedStatusIds = [1, 3, 5]
-      const result = getExcludedStatusIdsByPinning(statuses, pinnedStatusIds)
-      result.forEach(item => {
-        expect(item).to.be.oneOf(statusIds)
-        expect(item).to.be.oneOf(pinnedStatusIds)
-      })
-    })
-
-    it('should return ids of pinned statuses not posted before any unpinned status', () => {
-      const pinnedStatusIdSet1 = ['PINNED1', 'PINNED2']
-      const pinnedStatusIdSet2 = ['PINNED3', 'PINNED4']
-      const pinnedStatusIds = [...pinnedStatusIdSet1, ...pinnedStatusIdSet2]
-      const statusIds = [...pinnedStatusIdSet1, 'UNPINNED1', ...pinnedStatusIdSet2]
-      const statuses = mockStatuses(statusIds)
-      expect(getExcludedStatusIdsByPinning(statuses, pinnedStatusIds)).to.eql(pinnedStatusIdSet1)
-    })
-  })
-})

From 7b60adb480bdbce856c94164222820fcf8dede02 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 20 Feb 2022 00:57:31 +0200
Subject: [PATCH 58/59] only for user TL

---
 src/components/timeline/timeline.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 3ba5e8b5..ff16208d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -37,7 +37,7 @@
         </template>
         <template v-for="status in timeline.visibleStatuses">
           <conversation
-            v-if="timelineName === 'bookmarks' || (status.id >= timeline.minId && status.id <= timeline.maxId)"
+            v-if="timelineName !== 'user' || (status.id >= timeline.minId && status.id <= timeline.maxId)"
             :key="status.id"
             class="status-fadein"
             :status-id="status.id"

From 373c30be69310619af54777dcfdf9a6078743070 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 20 Feb 2022 16:06:26 +0200
Subject: [PATCH 59/59] fix #1133

---
 src/components/desktop_nav/desktop_nav.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 762aa610..304baf9d 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -52,6 +52,7 @@
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
+          @click.stop
         >
           <FAIcon
             fixed-width