organize

Author: connorabbas

src/app.js

@@ -2,9 +2,6 @@ import './assets/css/app.css';
 import './assets/css/tailwind.css';
 import 'nprogress/nprogress.css';
 
-import { useColorMode } from '@vueuse/core';
-import { useThemePreset } from '@/composables/useThemePreset';
-
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 
@@ -17,8 +14,8 @@ import ToastService from 'primevue/toastservice';
 import Container from '@/components/Container.vue';
 import PageTitleSection from '@/components/PageTitleSection.vue';
 
-const app = createApp(App);
-const pinia = createPinia();
+import { useColorMode } from '@vueuse/core';
+import { useThemePreset } from '@/composables/useThemePreset';
 
 // Site light/dark mode
 const colorMode = useColorMode({ emitAuto: true });
@@ -27,6 +24,9 @@ const colorMode = useColorMode({ emitAuto: true });
 const { getCurrentPreset } = useThemePreset();
 const themePreset = getCurrentPreset();
 
+const app = createApp(App);
+const pinia = createPinia();
+
 app.provide('colorMode', colorMode)
     .use(pinia)
     .use(router)

src/components/ThemePresetSelector.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useThemePreset } from '@/composables/useThemePreset';
+
+const { presets, selectedPreset, setPreset } = useThemePreset();
+</script>
+
+<template>
+    <Select
+        v-model="selectedPreset"
+        :options="presets"
+        optionLabel="label"
+        optionValue="value"
+        @change="setPreset(selectedPreset)"
+    />
+</template>

src/views/settings/Appearance.vue

@@ -2,9 +2,7 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
 import SelectColorModeButton from '@/components/SelectColorModeButton.vue';
-import { useThemePreset } from '@/composables/useThemePreset';
-
-const { presets, selectedPreset, setPreset } = useThemePreset();
+import ThemePresetSelector from '@/components/ThemePresetSelector.vue';
 </script>
 
 <template>
@@ -28,13 +26,7 @@ const { presets, selectedPreset, setPreset } = useThemePreset();
                         </div>
                         <div class="flex flex-col gap-2">
                             <label for="theme-preset-selector">Theme</label>
-                            <Select
-                                v-model="selectedPreset"
-                                :options="presets"
-                                optionLabel="label"
-                                optionValue="value"
-                                @change="setPreset(selectedPreset)"
-                            />
+                            <ThemePresetSelector id="theme-preset-selector" />
                         </div>
                     </div>
                 </template>