moved the select motion stuff into its own component

src/components/select/select_motion.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    class="SelectMotion btn-group"
+  >
+    <button
+      class="btn button-default"
+      :disabled="disabled || shadowsAreNull"
+      @click="add"
+    >
+      <FAIcon
+        fixed-width
+        icon="plus"
+      />
+    </button>
+    <button
+      class="btn button-default"
+      :disabled="disabled || !moveUpValid"
+      :class="{ disabled: disabled || !moveUpValid }"
+      @click="moveUp"
+      >
+      <FAIcon
+        fixed-width
+        icon="chevron-up"
+        />
+    </button>
+    <button
+      class="btn button-default"
+      :disabled="disabled || !moveDnValid"
+      :class="{ disabled: disabled || !moveDnValid }"
+      @click="moveDn"
+      >
+      <FAIcon
+        fixed-width
+        icon="chevron-down"
+      />
+    </button>
+    <button
+      class="btn button-default"
+      :disabled="disabled || !present"
+      :class="{ disabled: disabled || !present }"
+      @click="del"
+    >
+      <FAIcon
+        fixed-width
+        icon="times"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineEmits, defineProps } from 'vue'
+
+const props = defineProps(['modelValue', 'selectedId', 'disabled', 'getAddValue'])
+const emit = defineEmits(['update:modelValue', 'update:selectedId'])
+
+const moveUpValid = computed(() => {
+  return props.selectedId > 0
+})
+
+const present = computed(() => props.modelValue[props.selectedId] != null)
+
+const moveUp = () => {
+  const newModel = [...props.modelValue]
+  const movable = newModel.splice(props.selectedId, 1)[0]
+  newModel.splice(props.selectedId - 1, 0, movable)
+
+  emit('update:modelValue', newModel)
+  emit('update:selectedId', props.selectedId - 1)
+}
+
+const moveDnValid = computed(() => {
+  return props.selectedId < props.modelValue.length - 1
+})
+const moveDn = () => {
+  const newModel = [...props.modelValue]
+  const movable = newModel.splice(props.selectedId.value, 1)[0]
+  newModel.splice(props.selectedId + 1, 0, movable)
+
+  emit('update:modelValue', newModel)
+  emit('update:selectedId', props.selectedId + 1)
+}
+
+const add = () => {
+  const newModel = [...props.modelValue]
+  newModel.push(props.getAddValue())
+  console.log(newModel)
+
+  emit('update:modelValue', newModel)
+  emit('update:selectedId', Math.max(newModel.length - 1, 0))
+}
+
+const del = () => {
+  const newModel = [...props.modelValue]
+  newModel.splice(props.selectedId, 1)
+
+  emit('update:modelValue', newModel)
+  emit('update:selectedId', newModel.length === 0 ? undefined : Math.max(props.selectedId - 1, 0))
+}
+</script>
+
+<style lang="scss">
+.SelectMotion {
+  flex: 0 0 auto;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  margin-top: 0.25em;
+
+  .button-default {
+    margin: 0;
+    padding: 0;
+  }
+}
+</style>

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -51,7 +51,12 @@
         </li>
       </ul>
     </div>
-    <div class="setting-item component-editor">
+    <tab-switcher>
+      <div
+        class="setting-item component-editor"
+        key="component"
+        :label="$t('settings.style.themes3.editor.component_tab')"
+      >
         <div class="component-selector">
           <label for="component-selector">
             {{ $t('settings.style.themes3.editor.component_selector') }}
@@ -250,7 +255,11 @@
           </div>
         </tab-switcher>
       </div>
-    <div class="setting-item palette-editor">
+      <div
+        key="palette"
+        :label="$t('settings.style.themes3.editor.palette_tab')"
+        class="setting-item palette-editor"
+      >
         <div class="label">
           <label for="palette-selector">
             {{ $t('settings.style.themes3.palette.label') }}
@@ -276,6 +285,7 @@
         </div>
         <PaletteEditor v-model="palette" />
       </div>
+    </tab-switcher>
   </div>
 </template>
 

src/components/shadow_control/shadow_control.js

@@ -1,6 +1,7 @@
 import ColorInput from 'src/components/color_input/color_input.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ComponentPreview from 'src/components/component_preview/component_preview.vue'
@@ -54,13 +55,11 @@ export default {
     ColorInput,
     OpacityInput,
     Select,
+    SelectMotion,
     Checkbox,
     Popover,
     ComponentPreview
   },
-  beforeUpdate () {
-    this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
-  },
   computed: {
     selectedType: {
       get () {
@@ -73,7 +72,6 @@ export default {
     selected: {
       get () {
         const selected = this.cValue[this.selectedId]
-        console.log('SELECTED', selected)
         if (selected && typeof selected === 'object') {
           return { ...selected }
         } else if (typeof selected === 'string') {
@@ -95,12 +93,6 @@ export default {
     currentFallback () {
       return this.fallback?.[this.selectedId]
     },
-    moveUpValid () {
-      return this.selectedId > 0
-    },
-    moveDnValid () {
-      return this.selectedId < this.cValue.length - 1
-    },
     usingFallback () {
       return this.modelValue == null
     },
@@ -123,11 +115,20 @@ export default {
     }
   },
   watch: {
+    modelValue (value) {
+      if (!value) this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
+    },
     selected (value) {
       this.$emit('subShadowSelected', this.selectedId)
     }
   },
   methods: {
+    getNewSubshadow () {
+      return toModel(this.selected)
+    },
+    onSelectChange (id) {
+      this.selectedId = id
+    },
     getSubshadowLabel (shadow, index) {
       if (typeof shadow === 'object') {
         return shadow?.name ?? this.$t('settings.style.shadows.shadow_id', { value: index })
@@ -141,28 +142,6 @@ export default {
         this.cValue[this.selectedId].spread = 0
       }
       this.$emit('update:modelValue', this.cValue)
-    }, 100),
+    }, 100)
-    add () {
-      this.cValue.push(toModel(this.selected))
-      this.selectedId = Math.max(this.cValue.length - 1, 0)
-      this.$emit('update:modelValue', this.cValue)
-    },
-    del () {
-      this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
-      this.$emit('update:modelValue', this.cValue)
-    },
-    moveUp () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId - 1, 0, movable)
-      this.selectedId -= 1
-      this.$emit('update:modelValue', this.cValue)
-    },
-    moveDn () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId + 1, 0, movable)
-      this.selectedId += 1
-      this.$emit('update:modelValue', this.cValue)
-    }
   }
 }

src/components/shadow_control/shadow_control.vue

@@ -28,53 +28,14 @@
           {{ getSubshadowLabel(shadow, index) }}
         </option>
       </Select>
-      <div
+      <SelectMotion
-        class="id-control btn-group arrange-buttons"
+        class="arrange-buttons"
-      >
+        v-model="cValue"
-        <button
+        :selectedId="selectedId"
-          class="btn button-default"
+        :get-add-value="getNewSubshadow"
-          :disabled="disabled || shadowsAreNull"
+        :disabled="disabled"
-          @click="add"
+        @update:selectedId="onSelectChange"
-        >
-          <FAIcon
-            fixed-width
-            icon="plus"
       />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="disabled || !moveUpValid"
-          :class="{ disabled: disabled || !moveUpValid }"
-          @click="moveUp"
-        >
-          <FAIcon
-            fixed-width
-            icon="chevron-up"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="disabled || !moveDnValid"
-          :class="{ disabled: disabled || !moveDnValid }"
-          @click="moveDn"
-        >
-          <FAIcon
-            fixed-width
-            icon="chevron-down"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="disabled || !present"
-          :class="{ disabled: disabled || !present }"
-          @click="del"
-        >
-          <FAIcon
-            fixed-width
-            icon="times"
-          />
-        </button>
-      </div>
     </div>
     <div class="shadow-tweak">
       <Select