feat: internationalization

src/components/options/Startliner.vue

@@ -1,92 +1,43 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import SelectButton from 'primevue/selectbutton';
 import ToggleSwitch from 'primevue/toggleswitch';
 import OptionCategory from '../OptionCategory.vue';
 import OptionRow from '../OptionRow.vue';
 import { useClientStore } from '../../stores';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const client = useClientStore();
-
-const offlineModel = computed({
-    get() {
-        return client.offlineMode;
-    },
-    async set(value: boolean) {
-        await client.setOfflineMode(value);
-    },
-});
-
-const updatesModel = computed({
-    get() {
-        return client.enableAutoupdates;
-    },
-    async set(value: boolean) {
-        await client.setAutoupdates(value);
-    },
-});
-
-const verboseModel = computed({
-    get() {
-        return client.verbose;
-    },
-    async set(value: boolean) {
-        await client.setVerbose(value);
-    },
-});
-
-const themeModel = computed({
-    get() {
-        return client.theme;
-    },
-    async set(value: 'light' | 'dark' | 'system') {
-        await client.setTheme(value);
-    },
-});
 </script>
 
 <template>
     <OptionCategory title="STARTLINER">
-        <OptionRow title="UI scaling">
-            <SelectButton
-                v-model="client.scaleModel"
-                :options="[
-                    { title: 'S', value: 's' },
-                    { title: 'M', value: 'm' },
-                    { title: 'L', value: 'l' },
-                    { title: 'XL', value: 'xl' },
-                ]"
-                :allow-empty="false"
-                option-label="title"
-                option-value="value"
+        <OptionRow
+            :title="t('cfg.startliner.offlineMode')"
+            :tooltip="`${t('cfg.startliner.offlineModeTooltip')} ${t('cfg.afterRestart')}`"
+        >
+            <ToggleSwitch
+                :model-value="client.offlineMode"
+                @update:model-value="
+                    async (v) => await client.setOfflineMode(v)
+                "
             />
         </OptionRow>
-        <OptionRow
-            title="Offline mode"
-            tooltip="Disables the package store. Applies after a restart."
-        >
-            <ToggleSwitch v-model="offlineModel" />
-        </OptionRow>
-        <OptionRow title="Enable automatic updates">
-            <ToggleSwitch v-model="updatesModel" />
+        <OptionRow :title="t('cfg.startliner.autoUpdate')">
+            <ToggleSwitch
+                :model-value="client.enableAutoupdates"
+                @update:model-value="
+                    async (v) => await client.setAutoupdates(v)
+                "
+            ></ToggleSwitch>
         </OptionRow>
         <OptionRow
-            title="Enable detailed logs"
-            tooltip="Applies after a restart."
+            :title="t('cfg.startliner.verbose')"
+            :tooltip="t('cfg.afterRestart')"
         >
-            <ToggleSwitch v-model="verboseModel" />
-        </OptionRow>
-        <OptionRow title="Theme">
-            <SelectButton
-                v-model="themeModel"
-                :options="[
-                    { title: 'System', value: 'system' },
-                    { title: 'Light', value: 'light' },
-                    { title: 'Dark', value: 'dark' },
-                ]"
-                :allow-empty="false"
-                option-label="title"
-                option-value="value"
+            <ToggleSwitch
+                :model-value="client.verbose"
+                @update:model-value="async (v) => await client.setVerbose(v)"
             />
         </OptionRow>
     </OptionCategory>