From 4ed8847b9dfc42113aa8afd0f3d6e05d8dd24567 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sat, 4 Jan 2025 17:01:50 +0000
Subject: [PATCH 01/15] Apply 3 suggestion(s) to 3 file(s)

---
 changelog.d/mutes.change        | 2 +-
 src/components/status/status.js | 1 -
 src/i18n/en.json                | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/changelog.d/mutes.change b/changelog.d/mutes.change
index f55a8abbf..fa13609bb 100644
--- a/changelog.d/mutes.change
+++ b/changelog.d/mutes.change
@@ -1 +1 @@
-better display of mutes
+better display of mute reason on posts
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 41275a5be..ccecaac7e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -288,7 +288,6 @@ const Status = {
           case 'nsfw': return this.$t('status.sensitive_muted')
         }
       }
-      console.log(this.muteReasons, mainReason())
       return this.$t(
         'status.multi_reason_mute',
         {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 66ddb4139..3d7a674ce 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1243,7 +1243,7 @@
     "status_unavailable": "Status unavailable",
     "copy_link": "Copy link to status",
     "external_source": "External source",
-    "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more word",
+    "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more words",
     "multi_reason_mute": "{main} | {main} + one more reason | {main} + {numReasonsMore} more reasons",
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",

From a18854a30d5a687ee3a2a028aa2a7e1b73b5597c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 17:23:24 +0200
Subject: [PATCH 02/15] separate draft hiding from draft disable, fixes #1350

---
 src/components/draft/draft.vue                       | 4 ++--
 src/components/post_status_form/post_status_form.js  | 1 +
 src/components/post_status_form/post_status_form.vue | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 46227b684..7a9bdd7af 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -64,12 +64,12 @@
     <div v-if="editing">
       <PostStatusForm
         v-if="draft.type !== 'edit'"
-        :disable-draft="true"
+        :hide-draft="true"
         v-bind="postStatusFormProps"
       />
       <EditStatusForm
         v-else
-        :disable-draft="true"
+        :hide-draft="true"
         :params="postStatusFormProps"
       />
     </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c31b86be0..bd699c5f7 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -101,6 +101,7 @@ const PostStatusForm = {
     'disableSubmit',
     'disablePreview',
     'disableDraft',
+    'hideDraft',
     'placeholder',
     'maxHeight',
     'postHandler',
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 8607b5a8f..0d29e4d18 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -316,7 +316,7 @@
             </template>
           </button>
           <Popover
-            v-if="!disableDraft"
+            v-if="!hideDraft"
             class="more-post-actions"
             :normal-button="true"
             trigger="click"
@@ -336,7 +336,7 @@
                 role="menu"
               >
                 <button
-                  v-if="!disableDraft"
+                  v-if="!hideDraft"
                   class="menu-item dropdown-item dropdown-item-icon"
                   role="menu"
                   :disabled="!safeToSaveDraft"

From d0228728f4214059ec9663351cb102e711eb63bd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 17:39:47 +0200
Subject: [PATCH 03/15] Close dialog on draft save/abandon without promting to
 save. Fixes #1351

---
 src/components/edit_status_modal/edit_status_modal.vue | 1 +
 src/components/post_status_form/post_status_form.js    | 3 +++
 src/components/post_status_form/post_status_form.vue   | 2 +-
 src/components/post_status_modal/post_status_modal.vue | 1 +
 src/components/status/status.vue                       | 1 +
 5 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 42073d7d3..a53caf4ec 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -15,6 +15,7 @@
         class="panel-body"
         :params="params"
         @posted="doCloseModal"
+        @draft-done="doCloseModal"
         @can-close="doCloseModal"
       />
     </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index bd699c5f7..00ee58866 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -116,6 +116,7 @@ const PostStatusForm = {
   ],
   emits: [
     'posted',
+    'draft-done',
     'resize',
     'mediaplay',
     'mediapause',
@@ -761,12 +762,14 @@ const PostStatusForm = {
                 this.newStatus.id = id
               }
               this.saveable = false
+              this.$emit('draft-done')
             })
         } else if (this.newStatus.id) {
           // There is a draft, but there is nothing in it, clear it
           return this.abandonDraft()
             .then(() => {
               this.saveable = false
+              this.$emit('draft-done')
             })
         }
       }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0d29e4d18..ac5a6ce4f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -339,7 +339,7 @@
                   v-if="!hideDraft"
                   class="menu-item dropdown-item dropdown-item-icon"
                   role="menu"
-                  :disabled="!safeToSaveDraft"
+                  :disabled="!safeToSaveDraft && saveable"
                   :class="{ disabled: !safeToSaveDraft }"
                   @click.prevent="saveDraft"
                   @click="close"
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index 2bdf41d55..054da0c64 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -15,6 +15,7 @@
         class="panel-body"
         v-bind="params"
         @posted="resetAndClose"
+        @draft-done="resetAndClose"
       />
     </div>
   </Modal>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c58178b3c..b5b984833 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -606,6 +606,7 @@
           :copy-message-scope="status.visibility"
           :subject="replySubject"
           @posted="doToggleReplying"
+          @draft-done="doToggleReplying"
           @can-close="doToggleReplying"
         />
       </div>

From 3cab1faaf4d127cb69f4bc1963a471fc6ab3aa08 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 17:50:49 +0200
Subject: [PATCH 04/15] fix redmond theme inputs being black on selected
 statuses

---
 .../theme_data/theme3_slot_functions.js       | 20 ++++++++++++++++++-
 static/styles/Redmond DX.iss                  |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index ae644763a..3ca8af437 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -81,9 +81,27 @@ export const colorFunctions = {
       return alphaBlend(background, amount, foreground)
     }
   },
+  boost: {
+    argsNeeded: 2,
+    documentation: 'If given color is dark makes it darker, if color is light - makes it lighter',
+    args: [
+      'color: source color',
+      'amount: how much darken/brighten the color'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [colorArg, amountArg] = args
+
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
+      const amount = Number(amountArg)
+
+      const isLight = relativeLuminance(color) < 0.5
+      const mod = isLight ? -1 : 1
+      return brightness(amount * mod, color).rgb
+    }
+  },
   mod: {
     argsNeeded: 2,
-    documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.',
+    documentation: 'Old function that increases or decreases brightness depending if background color is dark or light. Advised against using it as it might give unexpected results.',
     args: [
       'color: source color',
       'amount: how much darken/brighten the color'
diff --git a/static/styles/Redmond DX.iss b/static/styles/Redmond DX.iss
index 7777b7d33..76e325932 100644
--- a/static/styles/Redmond DX.iss	
+++ b/static/styles/Redmond DX.iss	
@@ -94,7 +94,7 @@ Button:toggled:pressed {
 }
 
 Input {
-  background: $mod(--bg -80);
+  background: $boost(--bg 20);
   shadow: --defaultInputBevel;
   roundness: 0
 }

From 28955d8444d966e76a2f2777a6ec1d49ec0b7432 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 18:28:24 +0200
Subject: [PATCH 05/15] bring stock theme to be on par with v2
 pleroma-dark/light

---
 src/components/button.style.js                | 16 ++++++++--------
 src/components/panel.style.js                 | 17 +++++++++++++----
 src/components/panel_header.style.js          | 19 ++++++++++++++++++-
 src/components/top_bar.style.js               | 13 +++++++++++--
 src/components/user_avatar/avatar.style.js    |  4 ++--
 .../theme_data/theme3_slot_functions.js       |  1 +
 6 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 747cfd5eb..410d2f7e0 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -35,11 +35,11 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
         '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
-        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
-        '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
+        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
       }
     },
     {
@@ -78,28 +78,28 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--inheritedBackground,-14.2',
+        background: '--accent,-24.2',
         shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--inheritedBackground,-14.2',
+        background: '--accent,-24.2',
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonPressedBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonDefaultBevel']
       }
     },
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 1bba4766d..c7afd827e 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -38,12 +38,21 @@ export default {
         roundness: 3,
         blur: '5px',
         shadow: [{
-          x: 1,
-          y: 1,
-          blur: 4,
+          x: 0,
+          y: 0,
+          blur: 3,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.5
+        },
+        {
+          x: 0,
+          y: 4,
+          blur: 6,
+          spread: 3,
+          inset: false,
+          color: '#000000',
+          alpha: 0.3
         }]
       }
     }
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 32464bc50..3440d6d4b 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -17,7 +17,24 @@ export default {
       directives: {
         backgroundNoCssColor: 'yes',
         background: '--fg',
-        shadow: []
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 3,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 1,
+          blur: 0,
+          spread: 0,
+          inset: true,
+          color: '#ffffff',
+          alpha: 0.2
+        }]
       }
     }
   ]
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index daee80afe..e43e6a4f4 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -16,11 +16,20 @@ export default {
         background: '--fg',
         shadow: [{
           x: 0,
-          y: 0,
+          y: 1,
           blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 2,
+          blur: 7,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 0.3
         }]
       }
     },
diff --git a/src/components/user_avatar/avatar.style.js b/src/components/user_avatar/avatar.style.js
index 812d45a46..d49213476 100644
--- a/src/components/user_avatar/avatar.style.js
+++ b/src/components/user_avatar/avatar.style.js
@@ -11,10 +11,10 @@ export default {
         shadow: [{
           x: 0,
           y: 1,
-          blur: 8,
+          blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.7
+          alpha: 0.2
         }]
       }
     }
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index 3ca8af437..89bcd21e1 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -127,6 +127,7 @@ export const shadowFunctions = {
     args: [
       'color: border color',
       'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
+      'width: border width (thickness)',
       '[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
       '[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
     ],

From fa76be2f9a478a1b599ba0b66184577cd89209c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 18:37:16 +0200
Subject: [PATCH 06/15] check for betterShadow support in the userAvatar
 instead of its parents

---
 src/components/chat_message/chat_message.js  |  1 -
 src/components/chat_message/chat_message.vue |  1 -
 src/components/input.style.js                |  2 +-
 src/components/notification/notification.js  |  1 -
 src/components/notification/notification.vue |  1 -
 src/components/status/status.js              |  3 ---
 src/components/status/status.vue             |  2 --
 src/components/user_avatar/user_avatar.js    |  4 ++--
 src/components/user_card/user_card.js        |  1 -
 src/components/user_card/user_card.vue       | 11 ++---------
 10 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index ebe09814c..530a1ec70 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -66,7 +66,6 @@ const ChatMessage = {
       return this.message.attachments.length > 0
     },
     ...mapState({
-      betterShadow: state => state.interface.browserSupport.cssFilter,
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 166889d71..7e3498197 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -20,7 +20,6 @@
         >
           <UserAvatar
             :compact="true"
-            :better-shadow="betterShadow"
             :user="author"
           />
         </UserPopover>
diff --git a/src/components/input.style.js b/src/components/input.style.js
index c60ac1e4e..30715ec1d 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -18,7 +18,7 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15',
         '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
         '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 0e938c422..043be1b1a 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -43,7 +43,6 @@ const Notification = {
   data () {
     return {
       statusExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       unmuted: false,
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 044d43dbc..0930e0990 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -48,7 +48,6 @@
           <UserAvatar
             class="post-avatar"
             :compact="true"
-            :better-shadow="betterShadow"
             :user="notification.from_profile"
           />
         </UserPopover>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ccecaac7e..e248b1ba2 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -416,9 +416,6 @@ const Status = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    betterShadow () {
-      return this.$store.state.interface.browserSupport.cssFilter
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b5b984833..cecc9d69e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -65,7 +65,6 @@
           v-if="retweet"
           class="left-side repeater-avatar"
           :show-actor-type-indicator="showActorTypeIndicator"
-          :better-shadow="betterShadow"
           :user="statusoid.user"
         />
         <div class="right-side faint">
@@ -120,7 +119,6 @@
                 class="post-avatar"
                 :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
-                :better-shadow="betterShadow"
                 :user="status.user"
               />
             </UserPopover>
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index ffd81f87c..8cd1eeb43 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -15,14 +15,14 @@ library.add(
 const UserAvatar = {
   props: [
     'user',
-    'betterShadow',
     'compact',
     'showActorTypeIndicator'
   ],
   data () {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
+      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   components: {
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index b1fe2e8f3..1d2e19467 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -48,7 +48,6 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       showingConfirmMute: false,
       muteExpiryAmount: 0,
       muteExpiryUnit: 'minutes'
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c2d9899e3..ed5401589 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -16,10 +16,7 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :user="user"
-            />
+            <UserAvatar :user="user" />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -30,7 +27,6 @@
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
-            :better-shadow="betterShadow"
             :user="user"
             @click="avatarAction"
           />
@@ -38,10 +34,7 @@
             v-else
             :to="userProfileLink(user)"
           >
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :user="user"
-            />
+            <UserAvatar :user="user" />
           </router-link>
           <div class="user-summary">
             <div class="top-line">

From 16031934369e818a4fe1a11749188d273d9c17f6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 21:57:08 +0200
Subject: [PATCH 07/15] make dialog buttons stick to the right if content is
 wider than buttons

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

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 096c8ac8c..b75d88d7d 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -79,6 +79,7 @@
     padding: 0.5em;
     border-top: 1px solid var(--border);
     display: grid;
+    justify-content: end;
     grid-gap: 0.5em;
     grid-template-columns: min-content;
     grid-auto-columns: min-content;

From b461fc1c4a28aa03f9cc2a3e4b99b52355885364 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 22:08:12 +0200
Subject: [PATCH 08/15] add option to center the modal

---
 src/components/dialog_modal/dialog_modal.js           | 5 +++++
 src/components/dialog_modal/dialog_modal.vue          | 6 +++++-
 src/components/settings_modal/tabs/appearance_tab.vue | 5 +++++
 src/i18n/en.json                                      | 1 +
 src/modules/config.js                                 | 1 +
 src/modules/instance.js                               | 1 +
 6 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
index f14e3fe9a..b39851fe7 100644
--- a/src/components/dialog_modal/dialog_modal.js
+++ b/src/components/dialog_modal/dialog_modal.js
@@ -8,6 +8,11 @@ const DialogModal = {
       default: () => {},
       type: Function
     }
+  },
+  computed: {
+    mobileCenter () {
+      return this.$store.getters.mergedConfig.modalMobileCenter
+    }
   }
 }
 
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index b75d88d7d..1eb88efb5 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     class="dialog-container"
-    :class="{ 'dark-overlay': darkOverlay }"
+    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -100,6 +100,10 @@
     justify-content: stretch;
     align-items: end;
     justify-items: stretch;
+
+    &.-center-mobile {
+      align-items: center;
+    }
   }
 
   .dialog-modal.panel {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index bda0ab144..f1dde28ad 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -345,6 +345,11 @@
     <div class="setting-item">
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
+        <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="forcedRoundness"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3d7a674ce..49c7fc8b1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -381,6 +381,7 @@
     "actor_type_Person": "a normal user",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",
+    "mobile_center_dialog": "Vertically center dialogs on mobile",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
diff --git a/src/modules/config.js b/src/modules/config.js
index e1e395855..0543062c1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -142,6 +142,7 @@ export const defaultState = {
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
+  modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 72e34628e..7f920eaac 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -82,6 +82,7 @@ const defaultState = {
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
   modalOnRemoveUserFromFollowers: false,
+  modalMobileCenter: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',

From 0da19268029e7887ab2d1d84178ce7ef1b47b277 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 22:13:04 +0200
Subject: [PATCH 09/15] changelog

---
 changelog.d/batch2.skip | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 changelog.d/batch2.skip

diff --git a/changelog.d/batch2.skip b/changelog.d/batch2.skip
new file mode 100644
index 000000000..e69de29bb

From 758fc48156b59e4a9c17744dd9128f966c32c100 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jan 2025 14:18:43 +0200
Subject: [PATCH 10/15] remove border around picked emoji since default theme
 makes toggled buttons more visible

---
 src/components/emoji_reactions/emoji_reactions.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 7b9944d18..63adef5f9 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -99,11 +99,6 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-
-        &.-picked-reaction {
-          border: 1px solid var(--accent);
-          margin-right: -1px;
-        }
       }
     }
   }
@@ -154,10 +149,6 @@
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent);
-      margin-left: -1px; // offset the border, can't use inset shadows either
-      margin-right: -1px;
-
       .svg-inline--fa {
         color: var(--accent);
       }

From fe35147649eabde62aeea9c90a82457e065e90f5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jan 2025 16:33:43 +0200
Subject: [PATCH 11/15] fix v2 themes lacking toggle state

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

diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index f1dde28ad..baba7a7de 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -57,7 +57,7 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
+          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
           :disabled="switchInProgress"
         >

From ad8579af9982eb364dae7ded00c0ef36d45d4ec2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jan 2025 19:58:16 +0200
Subject: [PATCH 12/15] font control style update

---
 src/components/font_control/font_control.vue  | 19 +++-
 .../settings_modal/tabs/appearance_tab.vue    | 86 +++++++++----------
 src/i18n/en.json                              |  3 +-
 3 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 644efc20b..a41355a50 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -5,18 +5,22 @@
       :for="manualEntry ? name : name + '-font-switcher'"
       class="label"
     >
-      {{ label }}
+      {{ $t('settings.style.themes3.font.label', { label }) }}
     </label>
     {{ ' ' }}
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
+      class="font-checkbox"
       :id="name + '-o'"
       :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
       {{ $t('settings.style.themes3.define') }}
     </Checkbox>
-    <p v-if="modelValue?.family">
+    <div
+      v-if="modelValue?.family"
+      class="font-input"
+    >
       <label
         v-if="manualEntry"
         :id="name + '-label'"
@@ -122,7 +126,7 @@
           </optgroup>
         </Select>
       </span>
-    </p>
+    </div>
   </div>
 </template>
 
@@ -134,6 +138,15 @@
     min-width: 20em;
     max-width: 20em;
   }
+
+  .font-input {
+    margin-left: 2em;
+    margin-top: 0.5em;
+  }
+
+  .font-checkbox {
+    margin-left: 1em;
+  }
 }
 
 .invalid-tooltip {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index baba7a7de..4a6de3286 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -206,51 +206,6 @@
             </small>
           </div>
         </li>
-        <li>
-          <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-          <ul class="setting-list">
-            <li>
-              <FontControl
-                :model-value="mergedConfig.theme3hacks.fonts.interface"
-                name="ui"
-                :label="$t('settings.style.fonts.components.interface')"
-                :fallback="{ family: 'sans-serif' }"
-                no-inherit="1"
-                @update:modelValue="v => updateFont('interface', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.input"
-                name="input"
-                :fallback="{ family: 'inherit' }"
-                :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => updateFont('input', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.post"
-                name="post"
-                :fallback="{ family: 'inherit' }"
-                :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => updateFont('post', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.monospace"
-                name="postCode"
-                :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.monospace')"
-                @update:modelValue="v => updateFont('monospace', v)"
-              />
-            </li>
-          </ul>
-        </li>
         <li>
           <UnitSetting
             path="emojiSize"
@@ -284,6 +239,47 @@
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
         </li>
+        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="{ family: 'sans-serif' }"
+            no-inherit="1"
+            @update:modelValue="v => updateFont('interface', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.input"
+            name="input"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.input')"
+            @update:modelValue="v => updateFont('input', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.post"
+            name="post"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.post')"
+            @update:modelValue="v => updateFont('post', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            name="postCode"
+            :fallback="{ family: 'monospace' }"
+            :label="$t('settings.style.fonts.components.monospace')"
+            @update:modelValue="v => updateFont('monospace', v)"
+          />
+        </li>
         <h3>{{ $t('settings.columns') }}</h3>
         <li>
           <UnitSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 49c7fc8b1..0183191c8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -868,7 +868,8 @@
           "lookup_local_fonts": "Load list of fonts installed on this computer",
           "enter_manually": "Enter font name family manually",
           "entry": "Enter {fontFamily}",
-          "select": "Select font"
+          "select": "Select font",
+          "label": "{label} font"
         }
       },
       "interface_font_user_override": "Override theme/browser font used",

From c0875ee34e2ab70d6fc12ddb3559e4181353d6ea Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jan 2025 21:02:52 +0200
Subject: [PATCH 13/15] do the save to drafts/save to drafts and close

---
 src/components/post_status_form/post_status_form.js  | 10 +++++++++-
 src/components/post_status_form/post_status_form.vue | 12 ++++++++----
 .../post_status_modal/post_status_modal.vue          |  1 +
 src/components/status/status.vue                     |  1 +
 src/i18n/en.json                                     |  3 ++-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 00ee58866..71d6615f4 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -102,6 +102,7 @@ const PostStatusForm = {
     'disablePreview',
     'disableDraft',
     'hideDraft',
+    'closeable',
     'placeholder',
     'maxHeight',
     'postHandler',
@@ -234,6 +235,9 @@ const PostStatusForm = {
     showAllScopes () {
       return !this.mergedConfig.minimalScopesMode
     },
+    hideExtraActions () {
+      return this.disableDraft || this.hideDraft
+    },
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
@@ -355,10 +359,12 @@ const PostStatusForm = {
       }
     },
     safeToSaveDraft () {
-      return this.newStatus.status ||
+      return (
+        this.newStatus.status ||
         this.newStatus.spoilerText ||
         this.newStatus.files?.length ||
         this.newStatus.hasPoll
+      ) && this.saveable
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
@@ -762,6 +768,7 @@ const PostStatusForm = {
                 this.newStatus.id = id
               }
               this.saveable = false
+              this.clearStatus()
               this.$emit('draft-done')
             })
         } else if (this.newStatus.id) {
@@ -769,6 +776,7 @@ const PostStatusForm = {
           return this.abandonDraft()
             .then(() => {
               this.saveable = false
+              this.clearStatus()
               this.$emit('draft-done')
             })
         }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ac5a6ce4f..220d3e975 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -316,13 +316,12 @@
             </template>
           </button>
           <Popover
-            v-if="!hideDraft"
+            v-if="!hideExtraActions"
             class="more-post-actions"
             :normal-button="true"
             trigger="click"
             placement="bottom"
             :offset="{ y: 5 }"
-            :bound-to="{ x: 'container' }"
           >
             <template #trigger>
               <FAIcon
@@ -336,7 +335,7 @@
                 role="menu"
               >
                 <button
-                  v-if="!hideDraft"
+                  v-if="!hideDraft || !disableDraft"
                   class="menu-item dropdown-item dropdown-item-icon"
                   role="menu"
                   :disabled="!safeToSaveDraft && saveable"
@@ -344,7 +343,12 @@
                   @click.prevent="saveDraft"
                   @click="close"
                 >
-                  {{ $t('post_status.save_to_drafts_button') }}
+                  <template v-if="closeable">
+                    {{ $t('post_status.save_to_drafts_and_close_button') }}
+                  </template>
+                  <template v-else>
+                    {{ $t('post_status.save_to_drafts_button') }}
+                  </template>
                 </button>
               </div>
             </template>
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index 054da0c64..414dd5bd1 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -14,6 +14,7 @@
       <PostStatusForm
         class="panel-body"
         v-bind="params"
+        :closeable="true"
         @posted="resetAndClose"
         @draft-done="resetAndClose"
       />
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cecc9d69e..408e6c52b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -598,6 +598,7 @@
         <PostStatusForm
           ref="postStatusForm"
           class="reply-body"
+          :closeable="true"
           :reply-to="status.id"
           :attentions="status.attentions"
           :replied-user="status.user"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0183191c8..a85746332 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -321,7 +321,8 @@
     "auto_save_nothing_new": "Nothing new to save.",
     "auto_save_saved": "Saved.",
     "auto_save_saving": "Saving...",
-    "save_to_drafts_button": "Save to drafts"
+    "save_to_drafts_button": "Save to drafts",
+    "save_to_drafts_and_close_button": "Save to drafts and close"
   },
   "registration": {
     "bio_optional": "Bio (optional)",

From dad461f4078db3d9d47986b28d7ae1ea518c30ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jan 2025 21:41:31 +0200
Subject: [PATCH 14/15] don't do this with autosave turned on

---
 src/components/post_status_form/post_status_form.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 71d6615f4..d6735319d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -769,7 +769,9 @@ const PostStatusForm = {
               }
               this.saveable = false
               this.clearStatus()
-              this.$emit('draft-done')
+              if (!this.shouldAutoSaveDraft) {
+                this.$emit('draft-done')
+              }
             })
         } else if (this.newStatus.id) {
           // There is a draft, but there is nothing in it, clear it
@@ -777,7 +779,9 @@ const PostStatusForm = {
             .then(() => {
               this.saveable = false
               this.clearStatus()
-              this.$emit('draft-done')
+              if (!this.shouldAutoSaveDraft) {
+                this.$emit('draft-done')
+              }
             })
         }
       }

From 1eb96182bba3684b7b71f5f74e9574aade3fdd39 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jan 2025 22:09:24 +0200
Subject: [PATCH 15/15] fix tests

---
 src/components/panel.style.js        | 1 -
 src/components/panel_header.style.js | 5 ++---
 src/components/top_bar.style.js      | 1 -
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index c7afd827e..a017a52bc 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -50,7 +50,6 @@ export default {
           y: 4,
           blur: 6,
           spread: 3,
-          inset: false,
           color: '#000000',
           alpha: 0.3
         }]
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 3440d6d4b..226ff9e16 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -22,7 +22,6 @@ export default {
           y: 1,
           blur: 3,
           spread: 0,
-          inset: false,
           color: '#000000',
           alpha: 0.4
         },
@@ -31,9 +30,9 @@ export default {
           y: 1,
           blur: 0,
           spread: 0,
-          inset: true,
           color: '#ffffff',
-          alpha: 0.2
+          alpha: 0.2,
+          inset: true
         }]
       }
     }
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index e43e6a4f4..945ae7781 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -27,7 +27,6 @@ export default {
           y: 2,
           blur: 7,
           spread: 0,
-          inset: false,
           color: '#000000',
           alpha: 0.3
         }]