From 6816bc8badb34a41e41718b0d42e1021c974ff64 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 5 May 2023 01:50:41 +0300
Subject: [PATCH 1/9] remove unused stuff

---
 .../admin_tabs/frontends_tab.vue              |   8 +-
 .../admin_tabs/instance_tab.vue               | 108 +++++-------------
 .../settings_modal/admin_tabs/limits_tab.vue  |  56 +++------
 3 files changed, 43 insertions(+), 129 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index e108a9638..5281ef222 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -13,14 +13,10 @@
           <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
         </li>
         <li>
-          <StringSetting path=":pleroma.:frontends.:primary.name">
-            NAME
-          </StringSetting>
+          <StringSetting path=":pleroma.:frontends.:primary.name"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:frontends.:primary.ref">
-            REF
-          </StringSetting>
+          <StringSetting path=":pleroma.:frontends.:primary.ref"/>
         </li>
         <li>
           <GroupSetting path=":pleroma.:frontends.:primary" />
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index e519e135a..d537adb6f 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -4,34 +4,22 @@
       <h2>{{ $t('admin_dash.instance.instance') }}</h2>
       <ul class="setting-list">
         <li>
-          <StringSetting path=":pleroma.:instance.:name">
-            NAME
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:name"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:email">
-            ADMIN EMAIL
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:email"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:description">
-            DESCRIPTION
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:description"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:short_description">
-            SHORT DESCRIPTION
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:short_description"/>
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail">
-            INSTANCE THUMBNAIL
-          </AttachmentSetting>
+          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail"/>
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:background_image">
-            BACKGROUND IMAGE
-          </AttachmentSetting>
+          <AttachmentSetting path=":pleroma.:instance.:background_image"/>
         </li>
       </ul>
     </div>
@@ -39,53 +27,39 @@
       <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:registrations_open">
-            REGISTRATIONS OPEN
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open"/>
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path=":pleroma.:instance.:invites_enabled"
                 parent-path=":pleroma.:instance.:registrations_open"
                 parent-invert
-              >
-                INVITES ENABLED
-              </BooleanSetting>
+              />
             </li>
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:birthday_required">
-            BDEY REQUIRED
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required"/>
           <ul class="setting-list suboptions">
             <li>
               <IntegerSetting
                 path=":pleroma.:instance.:birthday_min_age"
                 parent-path=":pleroma.:instance.:birthday_required"
-              >
-                BDEY age of consent
-              </IntegerSetting>
+              />
             </li>
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_activation_required">
-            ACTIVATION REQUIRED
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required"/>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_approval_required">
-            APPROVAL REQUIRED
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required"/>
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
         </li>
         <li>
-          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']">
-            CAPTCHA
-          </BooleanSetting>
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
           <ul class="setting-list suboptions">
             <li>
               <ChoiceSetting
@@ -95,15 +69,11 @@
                   'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
                   'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
                 }"
-              >
-                CAPTCHA TYPE
-              </ChoiceSetting>
+              />
               <IntegerSetting
                 :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
                 :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-              >
-                VALID
-              </IntegerSetting>
+              />
             </li>
           </ul>
           <ul
@@ -112,9 +82,7 @@
           >
             <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
             <li>
-              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']">
-                cockAPTCHA ENDPOINT
-              </StringSetting>
+              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
             </li>
           </ul>
         </li>
@@ -124,17 +92,13 @@
       <h2>{{ $t('admin_dash.instance.access') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:public">
-            PUBLIC
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:public"/>
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
         </li>
         <li>
-          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content">
-            SEARCH RESTRICTION
-          </ChoiceSetting>
+          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content"/>
         </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
@@ -145,9 +109,7 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            LOCAL TIMELINES
-          </BooleanSetting>
+          />
         </li>
         <li>
           <BooleanSetting
@@ -155,14 +117,10 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            FED TIMELINES
-          </BooleanSetting>
+          />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines">
-            TIMELINES
-          </GroupSetting>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
         </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
@@ -173,9 +131,7 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            LOCAL PROFILES
-          </BooleanSetting>
+          />
         </li>
         <li>
           <BooleanSetting
@@ -183,14 +139,10 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            FED PROFILES
-          </BooleanSetting>
+          />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles">
-            PROFILES
-          </GroupSetting>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
         </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
@@ -201,9 +153,7 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            LOCAL STATUSES
-          </BooleanSetting>
+          />
         </li>
         <li>
           <BooleanSetting
@@ -211,14 +161,10 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            FED STATUSES
-          </BooleanSetting>
+          />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities">
-            STATUSES
-          </GroupSetting>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
         </li>
       </ul>
     </div>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
index f7a70c970..068f2cdab 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.vue
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -11,9 +11,7 @@
             source="admin"
             path=":pleroma.:instance.:limit"
             draft-mode
-          >
-            POST LIMIT
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
@@ -21,9 +19,7 @@
             path=":pleroma.:instance.:remote_limit"
             expert="1"
             draft-mode
-          >
-            POST LIMIT (remote)
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
@@ -33,27 +29,21 @@
             source="admin"
             path=":pleroma.:instance.:description_limit"
             draft-mode
-          >
-            IMAGE DESCRIPTION LIMIT
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:upload_limit"
             draft-mode
-          >
-            UPLOAD LIMIT KiB
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:max_media_attachments"
             draft-mode
-          >
-            MAX ATTACHMENTS
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.users') }}</h3>
@@ -63,27 +53,21 @@
             source="admin"
             path=":pleroma.:instance.:max_pinned_statuses"
             draft-mode
-          >
-            MAX PINNED POSTS
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:user_bio_length"
             draft-mode
-          >
-            BIO LENGTH
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:user_name_length"
             draft-mode
-          >
-            NAME LENGTH
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
@@ -93,9 +77,7 @@
             source="admin"
             path=":pleroma.:instance.:max_account_fields"
             draft-mode
-          >
-            MAX ACCOUNT FIELDS
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
@@ -103,27 +85,21 @@
             path=":pleroma.:instance.:max_remote_account_fields"
             draft-mode
             expert="1"
-          >
-            MAX ACCOUNT FIELDS (remote)
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:account_field_name_length"
             draft-mode
-          >
-            MAX ACCOUNT FIELD NAME
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:account_field_value_length"
             draft-mode
-          >
-            MAX ACCOUNT VALUE NAME
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
@@ -133,18 +109,14 @@
             source="admin"
             path=":pleroma.:instance.:avatar_upload_limit"
             draft-mode
-          >
-            MAX AVATAR SIZE KiB
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:banner_upload_limit"
             draft-mode
-          >
-            MAX BANNER SIZE KiB
-          </IntegerSetting>
+          />
         </li>
       </ul>
     </div>

From 1935bf6bd4fdef1336b8b709c38dba0ee8d7448f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 20:49:44 +0300
Subject: [PATCH 2/9] fix media upload bug

---
 src/components/media_upload/media_upload.vue | 7 +++----
 src/i18n/en.json                             | 2 ++
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 993c01a4f..2ea5567a2 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,7 @@
 <template>
-  <component
-    :is="normalButton ? 'button' : 'label'"
+  <button
     class="media-upload"
-    :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
+    :class="[normalButton ? 'button-default btn' : 'button-unstyled', { disabled }]"
     :title="$t('tool_tip.media_upload')"
     @click="onClick"
   >
@@ -31,7 +30,7 @@
       :accept="acceptTypes"
       @change="change"
     >
-  </component>
+  </button>
 </template>
 
 <script src="./media_upload.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 44998453d..072ce9522 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -892,6 +892,8 @@
       "is_default_custom": "(Default, version: {version})",
       "install": "Install",
       "install_version": "Install version {version}",
+      "more_install_options": "More install options",
+      "more_default_options": "More default setting options",
       "set_default": "Set default",
       "set_default_version": "Set version {version} as default",
       "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",

From b9c69a2272219865ff7e5b35dd1a0df7ead16538 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:01:29 +0300
Subject: [PATCH 3/9] improve the semantics

---
 .../admin_tabs/frontends_tab.vue              |  28 +--
 .../settings_modal/admin_tabs/limits_tab.vue  | 222 +++++++++---------
 2 files changed, 130 insertions(+), 120 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 5281ef222..f09e6a800 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -11,15 +11,17 @@
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
-        </li>
-        <li>
-          <StringSetting path=":pleroma.:frontends.:primary.name"/>
-        </li>
-        <li>
-          <StringSetting path=":pleroma.:frontends.:primary.ref"/>
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:frontends.:primary" />
+          <ul class="setting-list">
+            <li>
+              <StringSetting path=":pleroma.:frontends.:primary.name"/>
+            </li>
+            <li>
+              <StringSetting path=":pleroma.:frontends.:primary.ref"/>
+            </li>
+            <li>
+              <GroupSetting path=":pleroma.:frontends.:primary" />
+            </li>
+          </ul>
         </li>
       </ul>
       <div class="setting-list">
@@ -77,7 +79,6 @@
                 <button
                   class="button button-default btn"
                   type="button"
-                  :title="$t('admin_dash.frontend.update')"
                   @click="update(frontend)"
                 >
                   {{
@@ -112,7 +113,7 @@
                     <button
                       class="button button-default btn dropdown-button"
                       type="button"
-                      :title="$t('admin_dash.frontend.update')"
+                      :title="$t('admin_dash.frontend.more_install_options')"
                     >
                       <FAIcon icon="chevron-down" />
                     </button>
@@ -120,7 +121,7 @@
                 </Popover>
               </span>
               <span
-                v-if="frontend.name !== 'admin-fe'"
+                v-if="frontend.installed && frontend.name !== 'admin-fe'"
                 class="btn-group"
               >
                 <button
@@ -130,7 +131,6 @@
                     adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
                       adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
                   "
-                  :title="$t('admin_dash.frontend.update')"
                   @click="setDefault(frontend)"
                 >
                   {{
@@ -164,7 +164,7 @@
                     <button
                       class="button button-default btn dropdown-button"
                       type="button"
-                      :title="$t('admin_dash.frontend.update')"
+                      :title="$t('admin_dash.frontend.more_default_options')"
                     >
                       <FAIcon icon="chevron-down" />
                     </button>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
index 068f2cdab..ef4b9271d 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.vue
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -5,118 +5,128 @@
       <ul class="setting-list">
         <li>
           <h3>{{ $t('admin_dash.limits.posts') }}</h3>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:remote_limit"
-            expert="1"
-            draft-mode
-          />
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:remote_limit"
+                expert="1"
+                draft-mode
+              />
+            </li>
+          </ul>
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:description_limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:upload_limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_media_attachments"
-            draft-mode
-          />
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:description_limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:upload_limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_media_attachments"
+                draft-mode
+              />
+            </li>
+          </ul>
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.users') }}</h3>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_pinned_statuses"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:user_bio_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:user_name_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_account_fields"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_remote_account_fields"
-            draft-mode
-            expert="1"
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:account_field_name_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:account_field_value_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:avatar_upload_limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:banner_upload_limit"
-            draft-mode
-          />
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_pinned_statuses"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:user_bio_length"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:user_name_length"
+                draft-mode
+              />
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:max_account_fields"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:max_remote_account_fields"
+                    draft-mode
+                    expert="1"
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:account_field_name_length"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:account_field_value_length"
+                    draft-mode
+                  />
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:avatar_upload_limit"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:banner_upload_limit"
+                    draft-mode
+                  />
+                </li>
+              </ul>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>

From 05a7e612aa6d9f2a44eea22266b325933da6f5ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:10:06 +0300
Subject: [PATCH 4/9] show warning for developer for missing labels

---
 .../helpers/attachment_setting.vue               |  5 +++--
 .../settings_modal/helpers/boolean_setting.vue   | 16 +++++++++++++---
 .../settings_modal/helpers/number_setting.vue    |  5 +++--
 .../settings_modal/helpers/string_setting.vue    |  5 +++--
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 0bede2c24..447fa1729 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
 
     </label>
     <p
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 3089c3b3c..5ddf5aad5 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -10,16 +10,16 @@
       @update:modelValue="update"
     >
       <span
-        v-if="!!$slots.default"
         class="label"
         :class="{ 'faint': shouldBeDisabled }"
       >
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
         </template>
-        <template v-else>
-          <slot />
+        <template v-else-if="source === 'admin'">
+          MISSING LABEL FOR {{ path }}
         </template>
+        <slot v-else />
       </span>
     </Checkbox>
     <ModifiedIndicator
@@ -35,6 +35,16 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
+    <!-- debugging -->
+    <!--
+    <p
+      v-else
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      MISSING DESCRIPTION FOR {{ path }}
+    </p>
+    -->
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 065cfbcfe..93f113318 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
     </label>
     <input
       :id="path"
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 9de99d78c..0cfa61ce7 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
     </label>
     <input
       :id="path"

From 0f812394515c2dd428e3889a924df2885bdf44f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:11:48 +0300
Subject: [PATCH 5/9] remove restriction on number input's width

---
 .../settings_modal/settings_modal_admin_content.scss          | 4 ----
 .../settings_modal/settings_modal_user_content.scss           | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
index 87df79821..c984d703a 100644
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -48,9 +48,5 @@
       color: var(--cRed, $fallback--cRed);
       color: $fallback--cRed;
     }
-
-    .number-input {
-      max-width: 6em;
-    }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index 87df79821..c984d703a 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -48,9 +48,5 @@
       color: var(--cRed, $fallback--cRed);
       color: $fallback--cRed;
     }
-
-    .number-input {
-      max-width: 6em;
-    }
   }
 }

From 2322646442365b0575393a897098a90c3bdc961f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:13:07 +0300
Subject: [PATCH 6/9] reintroduce width limit on number input but only for
 sizesetting

---
 .../settings_modal/helpers/size_setting.vue   | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
index 5a78f1004..6c3fbaeba 100644
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ b/src/components/settings_modal/helpers/size_setting.vue
@@ -45,11 +45,18 @@
 <script src="./size_setting.js"></script>
 
 <style lang="scss">
-.css-unit-input,
-.css-unit-input select {
-  margin-left: 0.5em;
-  width: 4em;
-  max-width: 4em;
-  min-width: 4em;
+.SizeSetting {
+  .number-input {
+    max-width: 6.5em;
+  }
+
+  .css-unit-input,
+  .css-unit-input select {
+    margin-left: 0.5em;
+    width: 4em;
+    max-width: 4em;
+    min-width: 4em;
+  }
 }
+
 </style>

From 09e3735e375b9b8248d9aa1153d065a118abca58 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:36:18 +0300
Subject: [PATCH 7/9] semantics + description for instance access section

---
 .../admin_tabs/instance_tab.vue               | 212 ++++++++++--------
 src/i18n/en.json                              |  11 +-
 2 files changed, 127 insertions(+), 96 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index d537adb6f..a7ef0f689 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -57,32 +57,35 @@
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
-          <ul class="setting-list suboptions">
+          <ul class="setting-list">
             <li>
-              <ChoiceSetting
-                :path="[':pleroma', 'Pleroma.Captcha', ':method']"
-                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-                :option-label-map="{
-                  'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
-                  'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
-                }"
-              />
-              <IntegerSetting
-                :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
-                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-              />
-            </li>
-          </ul>
-          <ul
-            v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
-            class="setting-list suboptions"
-          >
-            <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
-            <li>
-              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
+              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
+              <ul class="setting-list suboptions">
+                <li>
+                  <ChoiceSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                    :option-label-map="{
+                      'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                      'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                    }"
+                  />
+                  <IntegerSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                  />
+                </li>
+                <li
+                  v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+                >
+                  <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
+                  <ul class="setting-list">
+                    <li>
+                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
             </li>
           </ul>
         </li>
@@ -92,79 +95,98 @@
       <h2>{{ $t('admin_dash.instance.access') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:public"/>
+          <BooleanSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:public"
+            />
+        </li>
+        <li>
+          <ChoiceSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:limit_to_local_content"
+          />
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
-        </li>
-        <li>
-          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content"/>
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:timelines.:local"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:profiles.:local"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:activities.:local"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:activities.:remote"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
+          <p>
+            {{ $t('admin_dash.instance.restrict.description') }}
+          </p>
+          <ul class="setting-list">
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:timelines.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:profiles.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:activities.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:activities.:remote"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
+                </li>
+              </ul>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 072ce9522..33f482252 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -869,7 +869,8 @@
       "kocaptcha": "KoCaptcha settings",
       "access": "Instance access",
       "restrict": {
-        "header": "Restrict access",
+        "header": "Restrict access for anonymous visitors",
+        "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
         "timelines": "Timelines access",
         "profiles": "User profiles access",
         "activities": "Statues/activities access"
@@ -905,6 +906,14 @@
     "temp_overrides": {
       ":pleroma": {
         ":instance": {
+          ":public": {
+            "label": "Instance is public",
+            "description": "Disabling this will make all API accessible only for logged-in users, this will make Public and Federated timelines inaccessible to anonymous visitors."
+          },
+          ":limit_to_local_content": {
+            "label": "Limit search to local content",
+            "description": "Disables global network search for unauthenticated (default), all users or none"
+          },
           ":description_limit": {
             "label": "Limit",
             "description": "Character limit for attachment descriptions"

From 039b6c61a2ac0c64b1d24295374401f8bf56af0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:37:29 +0300
Subject: [PATCH 8/9] lint

---
 .../admin_tabs/frontends_tab.vue              |  4 +-
 .../admin_tabs/instance_tab.vue               | 44 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index f09e6a800..13b8fa6b6 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -13,10 +13,10 @@
           <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
           <ul class="setting-list">
             <li>
-              <StringSetting path=":pleroma.:frontends.:primary.name"/>
+              <StringSetting path=":pleroma.:frontends.:primary.name" />
             </li>
             <li>
-              <StringSetting path=":pleroma.:frontends.:primary.ref"/>
+              <StringSetting path=":pleroma.:frontends.:primary.ref" />
             </li>
             <li>
               <GroupSetting path=":pleroma.:frontends.:primary" />
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index a7ef0f689..cbc578f15 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -4,22 +4,22 @@
       <h2>{{ $t('admin_dash.instance.instance') }}</h2>
       <ul class="setting-list">
         <li>
-          <StringSetting path=":pleroma.:instance.:name"/>
+          <StringSetting path=":pleroma.:instance.:name" />
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:email"/>
+          <StringSetting path=":pleroma.:instance.:email" />
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:description"/>
+          <StringSetting path=":pleroma.:instance.:description" />
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:short_description"/>
+          <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail"/>
+          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:background_image"/>
+          <AttachmentSetting path=":pleroma.:instance.:background_image" />
         </li>
       </ul>
     </div>
@@ -27,7 +27,7 @@
       <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:registrations_open"/>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open" />
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
@@ -39,7 +39,7 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:birthday_required"/>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required" />
           <ul class="setting-list suboptions">
             <li>
               <IntegerSetting
@@ -50,16 +50,16 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_activation_required"/>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required" />
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_approval_required"/>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required" />
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
           <ul class="setting-list">
             <li>
-              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
+              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']" />
               <ul class="setting-list suboptions">
                 <li>
                   <ChoiceSetting
@@ -81,7 +81,7 @@
                   <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
                   <ul class="setting-list">
                     <li>
-                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
+                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']" />
                     </li>
                   </ul>
                 </li>
@@ -99,7 +99,7 @@
             override-backend-description
             override-backend-description-label
             path=":pleroma.:instance.:public"
-            />
+          />
         </li>
         <li>
           <ChoiceSetting
@@ -123,7 +123,7 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
                   <BooleanSetting
@@ -131,10 +131,10 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
-                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines" />
                 </li>
               </ul>
             </li>
@@ -147,7 +147,7 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
                   <BooleanSetting
@@ -155,10 +155,10 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
-                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles" />
                 </li>
               </ul>
             </li>
@@ -171,7 +171,7 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
                   <BooleanSetting
@@ -179,10 +179,10 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
-                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities" />
                 </li>
               </ul>
             </li>

From b79f297692eeca5e774a1dd124cec2b3bc41b977 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 22:04:05 +0300
Subject: [PATCH 9/9] fix double pushbuttons in the draft buttons

---
 src/components/popover/popover.js             |  3 ++
 src/components/popover/popover.vue            |  3 +-
 .../settings_modal/helpers/draft_buttons.vue  | 40 ++++++-------------
 3 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d44b266bb..bc078533e 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,6 +45,9 @@ const Popover = {
     // Lets hover popover stay when clicking inside of it
     stayOnClick: Boolean,
 
+    // Use styled button (to avoid nested buttons)
+    normalButton: Boolean,
+
     triggerAttrs: {
       type: Object,
       default: {}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fd0fd821c..1a4bffd91 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,8 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled popover-trigger-button"
+      class="popover-trigger-button"
+      :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
       v-bind="triggerAttrs"
       @click="onClick"
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 80da92e80..fd6d50e35 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -7,18 +7,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
+      @click="$parent.commitDraft"
       :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.commit_value')"
-          @click="$parent.commitDraft"
-        >
-          {{ $t('settings.commit_value') }}
-        </button>
+        {{ $t('settings.commit_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -29,18 +23,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
       :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
+      @click="$parent.reset"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.reset_value')"
-          @click="$parent.reset"
-        >
-          {{ $t('settings.reset_value') }}
-        </button>
+        {{ $t('settings.reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -51,18 +39,12 @@
     <Popover
       v-if="$parent.canHardReset"
       trigger="hover"
+      normal-button
+      @click="$parent.hardReset"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.hard_reset_value')"
-          @click="$parent.hardReset"
-        >
-          {{ $t('settings.hard_reset_value') }}
-        </button>
+        {{ $t('settings.hard_reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -92,6 +74,10 @@ export default {
 .DraftButtons {
   display: inline-block;
   position: relative;
+
+  .button-default {
+    margin-left: 0.5em;
+  }
 }
 
 .draft-tooltip {