Merge branch 'admin-tabs-2' into shigusegubu-themes3

src/components/settings_modal/admin_tabs/instance_tab.vue

@@ -49,11 +49,15 @@
           <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>
+        <h4>{{ $t('admin_dash.instance.misc_brand') }}</H4>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
         </li>

src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue

@@ -131,13 +131,14 @@
         </li>
       </ul>
     </div>
-    <DraftButtons />
   </div>
 </template>
 
 <script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
 div.PWAManifestIconsSetting {
+  margin-left: 3em;
+
   &.setting-item {
     display: grid;
     grid-template-areas:

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,

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 {

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>

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",
@@ -1404,6 +1405,7 @@
           "maskable": "Maskable"
         }
       },
+      "misc_brand": "Miscellaneous elements",
       "branding": "Branding",
       "access": "Instance access",
       "rich_metadata": "Metadata",

src/modules/config.js

@@ -116,7 +116,6 @@ const config = {
       }
 
       useInterfaceStore().setTemporaryChanges({
-        timeoutId: setTimeout(revert, 10000),
         confirm,
         revert
       })

src/stores/interface.js

@@ -18,7 +18,8 @@ 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
     settingsModalState: 'hidden',
@@ -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 = () => {}
     },