From b0f725671adbb7590a3f86a0dec369e1b3a373df Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Nov 2025 16:19:23 +0200
Subject: [PATCH] improve scope selector

---
 .../post_status_form/post_status_form.scss    |  2 +-
 .../scope_selector/scope_selector.js          | 43 ++++++++++++++-----
 .../scope_selector/scope_selector.vue         | 14 +++---
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index 78b93fd28..641dc6dac 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -104,8 +104,8 @@
   .visibility-tray {
     display: flex;
     justify-content: space-between;
-    padding-top: 0.5em;
     align-items: baseline;
+    margin-left: -0.5em;
   }
 
   .visibility-notice {
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 52cda368b..462892cb6 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -14,13 +14,33 @@ library.add(
 )
 
 const ScopeSelector = {
-  props: [
-    'showAll',
-    'userDefault',
-    'originalScope',
-    'initialScope',
-    'onScopeChange'
-  ],
+  props: {
+    showAll: {
+      required: true,
+      type: Boolean
+    },
+    userDefault: {
+      required: true,
+      type: String
+    },
+    originalScope: {
+      required: false,
+      type: String
+    },
+    initialScope: {
+      required: false,
+      type: String
+    },
+    onScopeChange: {
+      required: true,
+      type: Function
+    },
+    unstyled: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       currentScope: this.initialScope
@@ -43,11 +63,12 @@ const ScopeSelector = {
       return this.shouldShow('direct')
     },
     css () {
+      const style = this.unstyled ? 'button-unstyled' : 'button-default'
       return {
-        public: { toggled: this.currentScope === 'public' },
-        unlisted: { toggled: this.currentScope === 'unlisted' },
-        private: { toggled: this.currentScope === 'private' },
-        direct: { toggled: this.currentScope === 'direct' }
+        public: [style, { toggled: this.currentScope === 'public' }],
+        unlisted: [style, { toggled: this.currentScope === 'unlisted' }],
+        private: [style, { toggled: this.currentScope === 'private' }],
+        direct: [style, { toggled: this.currentScope === 'direct' }]
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index b90ae0205..cbe51a07f 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="!showNothing"
-    class="ScopeSelector"
+    class="ScopeSelector btn-group"
   >
     <button
       v-if="showDirect"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       type="button"
@@ -19,7 +19,7 @@
     {{ ' ' }}
     <button
       v-if="showPrivate"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       type="button"
@@ -33,7 +33,7 @@
     {{ ' ' }}
     <button
       v-if="showUnlisted"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       type="button"
@@ -47,7 +47,7 @@
     {{ ' ' }}
     <button
       v-if="showPublic"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       type="button"
@@ -65,12 +65,14 @@
 
 <style lang="scss">
 .ScopeSelector {
+  display: inline-block;
+
   .scope {
     display: inline-block;
-    cursor: pointer;
     min-width: 1.3em;
     min-height: 1.3em;
     text-align: center;
+    padding: 0.5em 0.25em
   }
 }
 </style>