diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index e1d083e9..e876f401 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -69,6 +69,7 @@ declare global { const isReadonly: typeof import('vue')['isReadonly'] const isRef: typeof import('vue')['isRef'] const lightTheme: typeof import('./stores/settings')['lightTheme'] + const locale: typeof import('./stores/settings')['locale'] const logSearchContext: typeof import('./composable/logSearchContext')['logSearchContext'] const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable'] const mapActions: typeof import('pinia')['mapActions'] @@ -423,6 +424,7 @@ declare module 'vue' { readonly isReadonly: UnwrapRef readonly isRef: UnwrapRef readonly lightTheme: UnwrapRef + readonly locale: UnwrapRef readonly makeDestructurable: UnwrapRef readonly mapActions: UnwrapRef readonly mapGetters: UnwrapRef @@ -769,6 +771,7 @@ declare module '@vue/runtime-core' { readonly isReadonly: UnwrapRef readonly isRef: UnwrapRef readonly lightTheme: UnwrapRef + readonly locale: UnwrapRef readonly makeDestructurable: UnwrapRef readonly mapActions: UnwrapRef readonly mapGetters: UnwrapRef diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue index 9fb5887f..bfa4d996 100644 --- a/assets/components/SideMenu.vue +++ b/assets/components/SideMenu.vue @@ -20,14 +20,11 @@
  • - - + +
  • @@ -65,8 +65,6 @@ import { Container } from "@/models/Container"; import { sessionHost } from "@/composable/storage"; -const { t } = useI18n(); - const store = useContainerStore(); const { activeContainers, visibleContainers, ready } = storeToRefs(store); @@ -104,15 +102,13 @@ const groupedContainers = computed(() => ), ); -type MenuLabel = { label: string; id: string; state: string }; -const pinnedLabel = { label: t("label.pinned"), id: "pinned", state: "label" } as MenuLabel; -const allLabel = { label: t("label.containers"), id: "containers", state: "label" } as MenuLabel; - -function isLabel(item: Container | MenuLabel): item is MenuLabel { - return (item as MenuLabel).label !== undefined; +function isContainer(item: any): item is Container { + return item.hasOwnProperty("image"); } const menuItems = computed(() => { + const pinnedLabel = { keyLabel: "label.pinned" }; + const allLabel = { keyLabel: "label.containers" }; if (groupedContainers.value.pinned.length > 0) { return [pinnedLabel, ...groupedContainers.value.pinned, allLabel, ...groupedContainers.value.unpinned]; } else { diff --git a/assets/modules/i18n.ts b/assets/modules/i18n.ts index 39bcbf08..87a5caf9 100644 --- a/assets/modules/i18n.ts +++ b/assets/modules/i18n.ts @@ -1,19 +1,21 @@ import { type App } from "vue"; import { createI18n } from "vue-i18n"; +import { locale } from "@/stores/settings"; import messages from "@intlify/unplugin-vue-i18n/messages"; -const locale = messages?.hasOwnProperty(navigator.language) ? navigator.language : navigator.language.slice(0, 2); +const defaultLocale = messages?.hasOwnProperty(navigator.language) + ? navigator.language + : navigator.language.slice(0, 2); const i18n = createI18n({ legacy: false, - locale: locale, + locale: locale.value ?? defaultLocale, fallbackLocale: "en", messages, }); -export const install = (app: App) => { - app.use(i18n); -}; +syncRefs(locale, i18n.global.locale, { immediate: false }); +export const install = (app: App) => app.use(i18n); export default i18n; diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue index f440fcca..c8df1dad 100644 --- a/assets/pages/settings.vue +++ b/assets/pages/settings.vue @@ -29,6 +29,15 @@ {{ $t("settings.soft-wrap") }} + + + + +