pass computeColor into shadow control, fix shadow switching types due to invalid shadow color

src/components/palette_editor/palette_editor.vue

@@ -46,12 +46,12 @@ library.add(
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 const paletteExporter = newExporter({
-  filename: 'pleroma',
-  extension: 'palette.json',
+  filename: 'pleroma_palette',
+  extension: 'json',
   getExportedObject: () => props.modelValue
 })
 const paletteImporter = newImporter({
-  accept: '.palette.json',
+  accept: '.json',
   onImport (parsed, filename) {
     emit('update:modelValue', parsed)
   }

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -620,7 +620,6 @@ export default {
             }
           }
           case 'color':
-            console.log('COLOR', selectedVirtualDirective.value.value)
             return selectedVirtualDirective.value.value
           default:
             return selectedVirtualDirective.value.value

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

@@ -409,6 +409,7 @@
           <ShadowControl
             v-if="selectedVirtualDirectiveValType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
+            :computeColor="computeColor"
             :compact="true"
           />
           <ColorInput

src/components/shadow_control/shadow_control.js

@@ -46,6 +46,7 @@ export default {
     'separateInset',
     'noPreview',
     'disabled',
+    'computeColor',
     'compact'
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
@@ -107,6 +108,13 @@ export default {
     usingFallback () {
       return this.modelValue == null
     },
+    getFallback () {
+      if (typeof this.computeColor === 'function' && this.selected?.color) {
+        return this.computeColor(this.selected.color)
+      } else {
+        return this.currentFallback?.color
+      }
+    },
     style () {
       try {
         if (this.separateInset) {

src/components/shadow_control/shadow_control.vue

@@ -165,7 +165,7 @@
           :model-value="selected?.color"
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
-          :fallback="currentFallback?.color"
+          :fallback="getFallback"
           :show-optional-tickbox="false"
           name="shadow"
           @update:modelValue="e => updateProperty('color', e)"