code refactor

src/components/base/LanguageSelectBase.ts

@@ -5,22 +5,23 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useSettingsStore } from '@/stores/setting.ts';
 
-export interface LanguageSelectButtonBaseProps {
+export interface LanguageSelectBaseProps {
     disabled?: boolean;
+    includeSystemDefault?: boolean;
     useModelValue?: boolean;
     modelValue?: string;
 }
 
-export interface LanguageSelectButtonBaseEmits {
+export interface LanguageSelectBaseEmits {
     (e: 'update:modelValue', value: string): void;
 }
 
-export function useLanguageSelectButtonBase(props: LanguageSelectButtonBaseProps, emit: LanguageSelectButtonBaseEmits) {
+export function useLanguageSelectButtonBase(props: LanguageSelectBaseProps, emit: LanguageSelectBaseEmits) {
     const { getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions, getLanguageInfo, setLanguage } = useI18n();
 
     const settingsStore = useSettingsStore();
 
-    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(!!props.includeSystemDefault));
 
     const currentLocale = computed<string>({
         get: () => getCurrentLanguageTag(),

src/components/desktop/LanguageSelect.vue

@@ -0,0 +1,67 @@
+<template>
+    <v-select
+        item-title="nativeDisplayName"
+        item-value="languageTag"
+        persistent-placeholder
+        :disabled="disabled"
+        :label="label"
+        :placeholder="placeholder"
+        :items="allLanguages"
+        v-model="currentLocaleValue"
+    >
+        <template #item="{ props, item }">
+            <v-list-item :value="item.value" v-bind="props">
+                <template #title>
+                    <v-list-item-title>
+                        <div class="d-flex align-center">
+                            <span>{{ item.title }}</span>
+                            <v-spacer style="min-width: 40px" />
+                            <v-icon :icon="mdiCheck" v-if="isLanguageSelected(item.raw.languageTag)" />
+                            <span class="text-field-append-text" v-if="!isLanguageSelected(item.raw.languageTag)">{{ item.raw.displayName }}</span>
+                        </div>
+                    </v-list-item-title>
+                </template>
+            </v-list-item>
+        </template>
+    </v-select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import {
+    mdiCheck
+} from '@mdi/js';
+
+interface DesktopLanguageSelectProps extends LanguageSelectBaseProps {
+    label?: string;
+    placeholder?: string;
+}
+
+const props = defineProps<DesktopLanguageSelectProps>();
+const emit = defineEmits<LanguageSelectBaseEmits>();
+
+const { getCurrentLanguageTag } = useI18n();
+
+const {
+    allLanguages,
+    updateLanguage,
+    isLanguageSelected
+} = useLanguageSelectButtonBase(props, emit);
+
+const currentLocaleValue = computed<string>({
+    get: () => {
+        if (props.useModelValue) {
+            return props.modelValue ?? '';
+        } else {
+            return getCurrentLanguageTag()
+        }
+    },
+    set: (value: string) => {
+        updateLanguage(value);
+    }
+});
+</script>

src/components/desktop/LanguageSelectButton.vue

@@ -19,14 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
 
 import {
     mdiCheck
 } from '@mdi/js';
 
-const props = defineProps<LanguageSelectButtonBaseProps>();
-const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+const props = defineProps<LanguageSelectBaseProps>();
+const emit = defineEmits<LanguageSelectBaseEmits>();
 
 const {
     allLanguages,

src/components/mobile/LanguageSelectButton.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script setup lang="ts">
-import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
 
-const props = defineProps<LanguageSelectButtonBaseProps>();
-const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+const props = defineProps<LanguageSelectBaseProps>();
+const emit = defineEmits<LanguageSelectBaseEmits>();
 
 const {
     allLanguages,