feat(frontend): main page

frontend/app/components/navbar/LanguageSwitcher.vue

@@ -0,0 +1,30 @@
+<template>
+  <UDropdownMenu
+    :key="locale"
+    :items="availableLocales"
+    :content="{ align: 'start' }"
+  >
+    <UButton color="neutral" variant="outline" icon="material-symbols:globe" />
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui';
+const { locale, locales, setLocale } = useI18n();
+
+const availableLocales = computed(() => {
+  return locales.value.map(
+    (optionLocale) =>
+      ({
+        label: optionLocale.name,
+        code: optionLocale.code,
+        type: 'checkbox' as const,
+        checked: optionLocale.code === locale.value,
+        onUpdateChecked: () => switchLocale(optionLocale.code),
+      }) as DropdownMenuItem,
+  );
+});
+const switchLocale = (newLocale: string) => {
+  setLocale(newLocale);
+};
+</script>

frontend/app/components/navbar/ThemeSwitcher.vue

@@ -0,0 +1,31 @@
+<template>
+  <UDropdownMenu
+    :key="colorMode.preference"
+    :items="themes"
+    :content="{ align: 'start' }"
+  >
+    <UButton color="neutral" variant="outline" :icon="icons[currentColor]" />
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+type Theme = 'light' | 'dark' | 'system';
+const icons: Dictionary<Theme, string> = {
+  light: 'material-symbols:light-mode',
+  dark: 'material-symbols:dark-mode',
+  system: 'material-symbols:computer-outline',
+};
+const colorMode = useColorMode();
+const currentColor = computed<Theme>(() => colorMode.preference ?? 'system');
+const themes = computed<DropdownValue[]>(() =>
+  ['light', 'dark', 'system'].map((theme) => ({
+    code: theme,
+    label: $t(`theme.${theme}`),
+    icon: icons[theme],
+    type: 'checkbox' as const,
+    checked: currentColor.value === theme,
+    onUpdateChecked: () => switchColor(theme),
+  })),
+);
+const switchColor = (theme: Theme) => (colorMode.preference = theme);
+</script>