initial commit. Cloned timetracker repository

bo/src/components/inner/langSwitch.vue

@@ -0,0 +1,71 @@
+<template>
+  <USelectMenu v-model="locale" :items="langs"
+    class="w-40 bg-white dark:bg-(--black) rounded-md shadow-sm  hover:none!"
+    valueKey="iso_code" :searchInput="false">
+    <template #default="{ modelValue }">
+      <div class="flex items-center gap-1">
+        <span class="text-md dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.flag}}</span>
+        <span class="font-medium dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.name}}</span>
+      </div>
+    </template>
+    <template #item-leading="{ item }">
+      <div class="flex items-center rounded-md cursor-pointer transition-colors">
+        <span class="text-md ">{{ item.flag }}</span>
+        <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
+      </div>
+    </template>
+  </USelectMenu>
+</template>
+
+<script setup lang="ts">
+import { langs, currentLang } from '@/router/langs'
+import { useRouter, useRoute } from 'vue-router'
+import { useCookie } from '@/composable/useCookie'
+import { computed, watch } from 'vue'
+import { i18n } from '@/plugins/i18n'
+const router = useRouter()
+const route = useRoute()
+
+const cookie = useCookie()
+
+const locale = computed({
+  get() {
+    return currentLang.value?.iso_code || i18n.locale.value
+  },
+  set(value: string) {
+    i18n.locale.value = value
+    currentLang.value = langs.find((x) => x.iso_code == value)
+
+    // Update URL to reflect language change
+    const currentPath = route.path
+    const pathParts = currentPath.split('/').filter(Boolean)
+
+    cookie.setCookie('lang_id', `${langs.find((x) => x.iso_code == value)?.id}`, { days: 60, secure: true, sameSite: 'Lax' })
+
+    if (pathParts.length > 0) {
+      // Check if first part is a locale
+      const isLocale = langs.some((l) => l.lang_code === pathParts[0])
+      if (isLocale) {
+        // Replace existing locale
+        pathParts[0] = value
+        router.replace({ path: '/' + pathParts.join('/'), query: route.query })
+      } else {
+        // Add locale to path
+        router.replace({ path: '/' + value + currentPath, query: route.query })
+      }
+    }
+  },
+})
+
+// Sync i18n locale with router locale on initial load
+watch(
+  () => route.params.locale,
+  (newLocale) => {
+    if (newLocale && typeof newLocale === 'string') {
+      i18n.locale.value = newLocale
+      currentLang.value = langs.find((x) => x.iso_code == newLocale)
+    }
+  },
+  { immediate: true },
+)
+</script>

bo/src/components/inner/themeSwitch.vue

@@ -0,0 +1,12 @@
+<template>
+  <UButton variant="ghost" size="sm" @click="themeStorage.setTheme()">
+    <span class="hidden sm:inline">
+      <UIcon class="size-5" :name="themeStorage.themeIcon" />
+    </span>
+  </UButton>
+</template>
+
+<script setup lang="ts">
+import { useThemeStore } from '@/stores/theme'
+const themeStorage = useThemeStore()
+</script>