more predictable styles order, custom styles before builtins

src/components/settings_modal/tabs/appearance_tab.js

@@ -34,7 +34,8 @@ library.add(
 const AppearanceTab = {
   data () {
     return {
-      availableStyles: [],
+      availableThemesV3: [],
+      availableThemesV2: [],
       bundledPalettes: [],
       compilationCache: {},
       fileImporter: newImporter({
@@ -108,13 +109,13 @@ const AppearanceTab = {
     updateIndex('style').then(styles => {
       styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
         const meta = data.find(x => x.component === '@meta')
-        this.availableStyles.push({ key, data, name: meta.directives.name, version: 'v3' })
+        this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3' })
       }))
     })
 
     updateIndex('theme').then(themes => {
       themes.forEach(([key, themePromise]) => themePromise.then(data => {
-        this.availableStyles.push({ key, data, name: data.name, version: 'v2' })
+        this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
       }))
     })
 
@@ -169,6 +170,12 @@ const AppearanceTab = {
     })
   },
   computed: {
+    availableStyles () {
+      return [
+        ...this.availableThemesV3,
+        ...this.availableThemesV2
+      ]
+    },
     availablePalettes () {
       return [
         ...this.bundledPalettes,

src/services/style_setter/style_setter.js

@@ -275,7 +275,7 @@ export const getResourcesIndex = async (url, parser = JSON.parse) => {
     console.warn(`Custom resources at ${customUrl} unavailable`)
   }
 
-  const total = [...builtin, ...custom]
+  const total = [...custom, ...builtin]
   if (total.length === 0) {
     return Promise.reject(new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`))
   }