From d26dca92e24dcaace9c0a8ea3b35dc503d126f6d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Dec 2025 22:31:54 +0200
Subject: [PATCH 1/4] manifest is grouped together as a setting

---
 src/components/settings_modal/admin_tabs/instance_tab.vue  | 7 +++++--
 .../settings_modal/helpers/pwa_manifest_icons_setting.vue  | 1 -
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 1ad84113a..5536343d0 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -49,10 +49,13 @@
           <PWAManifestIconsSetting path=":pleroma.:manifest.:icons" />
         </li>
         <li>
-          <ColorSetting path=":pleroma.:manifest.:theme_color" />
+          <ColorSetting hide-draft-buttons path=":pleroma.:manifest.:theme_color" />
         </li>
         <li>
-          <ColorSetting path=":pleroma.:manifest.:background_color" />
+          <ColorSetting hide-draft-buttons path=":pleroma.:manifest.:background_color" />
+        </li>
+        <li>
+          <GroupSetting path=":pleroma.:manifest" />
         </li>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
index d75eb44b0..f5f04e837 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -131,7 +131,6 @@
         </li>
       </ul>
     </div>
-    <DraftButtons />
   </div>
 </template>
 

From 25a9033b6bd3d5c43814accb96311589339d2525 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Dec 2025 22:35:35 +0200
Subject: [PATCH 2/4] better separation + style of PWA manifest

---
 src/components/settings_modal/admin_tabs/instance_tab.vue       | 1 +
 .../settings_modal/helpers/pwa_manifest_icons_setting.vue       | 2 ++
 src/i18n/en.json                                                | 1 +
 3 files changed, 4 insertions(+)

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 5536343d0..fa55cef41 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -57,6 +57,7 @@
         <li>
           <GroupSetting path=":pleroma.:manifest" />
         </li>
+        <h4>{{ $t('admin_dash.instance.misc_brand') }}</H4>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
         </li>
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
index f5f04e837..20e50fe25 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -137,6 +137,8 @@
 <script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
 div.PWAManifestIconsSetting {
+  margin-left: 3em;
+
   &.setting-item {
     display: grid;
     grid-template-areas:
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 763d77d20..c1c3978d1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1404,6 +1404,7 @@
           "maskable": "Maskable"
         }
       },
+      "misc_brand": "Miscellaneous elements",
       "branding": "Branding",
       "access": "Instance access",
       "rich_metadata": "Metadata",

From 4edf6b03cefc7ce0bab02e660784ffc53f91c715 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Dec 2025 22:39:59 +0200
Subject: [PATCH 3/4] better styles

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

diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 53add37fa..032b603fa 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -70,7 +70,6 @@
     .setting-label {
       grid-area: label;
       text-align: right;
-      align-self: baseline;
     }
 
     .ModifiedIndicator,
@@ -218,6 +217,13 @@
       .setting-label {
         text-align: left;
       }
+
+      .checkbox {
+        .label {
+          text-align: left;
+          margin-left: 0;
+        }
+      }
     }
 
     ul {

From db7e4a3434f4d50f38113018e2de12bd478d1e4b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Dec 2025 22:56:04 +0200
Subject: [PATCH 4/4] actual countdown

---
 .../settings_modal/settings_modal.js          |  2 +-
 .../settings_modal/settings_modal.vue         |  4 ++--
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  1 -
 src/stores/interface.js                       | 22 ++++++++++++++-----
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index b4677fe7f..789ebd0ee 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -170,7 +170,7 @@ const SettingsModal = {
   },
   computed: {
     ...mapState(useInterfaceStore, {
-      temporaryChangesTimeoutId: store => store.temporaryChangesTimeoutId,
+      temporaryChangesCountdown: store => store.temporaryChangesCountdown,
       currentSaveStateNotice: store => store.settings.currentSaveStateNotice,
       modalActivated: store => store.settingsModalState !== 'hidden',
       modalMode: store => store.settingsModalMode,
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index b4ccba191..d2b4f60ee 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -158,14 +158,14 @@
     </div>
     <teleport to="#modal">
       <ConfirmModal
-        v-if="temporaryChangesTimeoutId"
+        v-if="temporaryChangesCountdown > 0"
         :title="$t('settings.confirm_new_setting')"
         :cancel-text="$t('settings.revert')"
         :confirm-text="$t('settings.confirm')"
         @cancelled="temporaryChangesRevert"
         @accepted="temporaryChangesConfirm"
       >
-        {{ $t('settings.confirm_new_question') }}
+        {{ $t('settings.confirm_new_question_countdown', temporaryChangesCountdown) }}
       </ConfirmModal>
     </teleport>
   </Modal>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c1c3978d1..05a2d5ae5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -411,6 +411,7 @@
     "appearance": "Appearance",
     "confirm_new_setting": "Confirm new setting?",
     "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
+    "confirm_new_question_countdown": "Does this look ok? Setting will be reverted in 1 second. | Does this look ok? Setting will be reverted in {count} seconds.",
     "revert": "Revert",
     "confirm": "Confirm",
     "text_size": "Text and interface size",
diff --git a/src/modules/config.js b/src/modules/config.js
index 7b54225ef..8b4691341 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -116,7 +116,6 @@ const config = {
       }
 
       useInterfaceStore().setTemporaryChanges({
-        timeoutId: setTimeout(revert, 10000),
         confirm,
         revert
       })
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 56999217f..51ed42f65 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -18,9 +18,10 @@ export const useInterfaceStore = defineStore('interface', {
     paletteDataUsed: null,
     themeNameUsed: null,
     themeDataUsed: null,
-    temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
+    temporaryChangesTimeoutId: null,
+    temporaryChangesCountdown: -1,     // used for temporary options that revert after a timeout
     temporaryChangesConfirm: () => {}, // used for applying temporary options
-    temporaryChangesRevert: () => {}, // used for reverting temporary options
+    temporaryChangesRevert: () => {},  // used for reverting temporary options
     settingsModalState: 'hidden',
     settingsModalLoadedUser: false,
     settingsModalLoadedAdmin: false,
@@ -44,14 +45,25 @@ export const useInterfaceStore = defineStore('interface', {
     lastTimeline: null
   }),
   actions: {
-    setTemporaryChanges ({ timeoutId, confirm, revert }) {
-      this.temporaryChangesTimeoutId = timeoutId
+    setTemporaryChanges ({ confirm, revert }) {
+      this.temporaryChangesCountdown = 10
       this.temporaryChangesConfirm = confirm
       this.temporaryChangesRevert = revert
+      const countdownFunc = () => {
+        if (this.temporaryChangesCountdown === 1) {
+          this.temporaryChangesRevert()
+          this.clearTemporaryChanges()
+        } else {
+          this.temporaryChangesCountdown--
+          this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
+        }
+      }
+      this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
     },
     clearTemporaryChanges () {
-      clearTimeout(this.temporaryChangesTimeoutId)
+      this.temporaryChangesTimeoutId ?? clearTimeout(this.temporaryChangesTimeoutId)
       this.temporaryChangesTimeoutId = null
+      this.temporaryChangesCountdown = -1
       this.temporaryChangesConfirm = () => {}
       this.temporaryChangesRevert = () => {}
     },