feat: language switcher

frontend/package.json

@@ -13,7 +13,8 @@
     "clsx": "^2.1.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.13.1"
   },
   "devDependencies": {
     "@babel/types": "^7.18.10",

frontend/package.json.md5

@@ -1 +1 @@
-306073f1282c8f1f8789b7900fe179de
+8bcddfc74c44330550c0531dc9c334bd

frontend/src/App.vue

@@ -9,6 +9,11 @@ import IconButton from "./components/ui/IconButton.vue";
 import AddIcon from "./components/ui/icons/AddIcon.vue";
 import { useProfileStore } from "./stores/ProfileStore";
 import ProfileSelector from "./components/ProfileSelector.vue";
+import LanguageSwitcher from "./components/LanguageSwitcher.vue";
+import { isUserPortugueseSpeaker } from "./shared/utils";
+import { useI18n } from "vue-i18n";
+
+const { locale } = useI18n();
 
 const profileStore = useProfileStore();
 
@@ -52,6 +57,12 @@ onMounted(() => {
     setThemeOnLocalStorage(newVal);
   });
 
+  if (isUserPortugueseSpeaker()) {
+    locale.value = "pt-BR";
+  } else {
+    locale.value = "en-US";
+  }
+
   fetchData();
 });
 
@@ -85,9 +96,7 @@ fetchAppVersion();
         class="w-full grid place-items-center p-8 text-center text-black dark:text-white"
         v-if="!profileStore.hasProfileCreated()"
       >
-        <span class="text-lg font-semibold"
-          >No profiles found. Create one right now!</span
-        >
+        <span class="text-lg font-semibold">{{ $t("no_profile") }}</span>
         <IconButton @click="openCreateProfileModal">
           <AddIcon />
         </IconButton>
@@ -122,6 +131,10 @@ fetchAppVersion();
           appVersion
         }}</span>
       </div>
+
+      <div class="absolute bottom-0 right-0 p-4">
+        <LanguageSwitcher />
+      </div>
     </div>
   </ThemeSwitcher>
 </template>

frontend/src/components/AddItemModal.vue

@@ -49,20 +49,21 @@ function onSubmit(): void {
   <Dialog :isOpen="isOpen">
     <form class="flex flex-col gap-4" @submit.prevent="onSubmit">
       <h1 class="text-2xl text-black dark:text-white">
-        Add {{ selectedTab === Tab.EARNING ? "earning" : "expense" }}
+        {{ $t("create") }}
+        {{ selectedTab === Tab.EARNING ? $t("earning") : $t("expense") }}
       </h1>
       <Input
         :required="true"
         :name="'description'"
-        :title="'Description'"
+        :title="$t('description')"
         :type="'text'"
         :model-value="formData.description"
         @update:model-value="(newValue) => (formData.description = newValue)"
       />
       <Input
         :required="true"
         :name="'amount'"
-        :title="'Amount'"
+        :title="$t('amount')"
         :type="'number'"
         :model-value="formData.amount"
         @update:model-value="(newValue) => (formData.amount = newValue)"
@@ -72,16 +73,18 @@ function onSubmit(): void {
         :required="true"
         v-if="selectedTab === Tab.EXPENSE"
         :name="'category'"
-        :title="'Category'"
+        :title="$t('category')"
         :model-value="(formData as types.ExpenseUpdate).category_id"
         @update:model-value="
           (newValue) =>
             ((formData as types.ExpenseUpdate).category_id = newValue)
         "
       />
       <div class="flex gap-4">
-        <CancelButton @click="emit('on-cancel')">Cancel</CancelButton>
-        <ConfirmButton>Add</ConfirmButton>
+        <CancelButton @click="emit('on-cancel')">{{
+          $t("cancel")
+        }}</CancelButton>
+        <ConfirmButton>{{ $t("save") }}</ConfirmButton>
       </div>
     </form>
   </Dialog>

frontend/src/components/BalanceTab.vue

@@ -2,6 +2,9 @@
 import { computed, ref, toRefs } from "vue";
 import { maskCurrency } from "@/shared/utils";
 import SelectArrowIcon from "./ui/icons/SelectArrowIcon.vue";
+import { useI18n } from "vue-i18n";
+
+const i18n = useI18n();
 
 const props = defineProps<{
   earnings_subtotal: number;
@@ -35,7 +38,7 @@ const toggleDropdown = () => {
         'bg-gray-600 hover:bg-gray-700': balance == 0,
       }"
     >
-      <span>Balance: {{ maskCurrency(balance) }}</span>
+      <span>{{ $t("balance") + ": " + maskCurrency(balance) }}</span>
       <SelectArrowIcon />
     </div>
     <transition name="fade">
@@ -45,12 +48,25 @@ const toggleDropdown = () => {
       >
         <span
           class="p-2 rounded-md bg-green-600 bg-opacity-50 hover:bg-opacity-100 duration-200"
-          >Total Earnings: {{ maskCurrency(earnings_subtotal) }}</span
+        >
+          {{
+            $t("total") +
+            " " +
+            i18n.t("earning", 2) +
+            ": " +
+            maskCurrency(earnings_subtotal)
+          }}</span
         >
 
         <span
           class="p-2 rounded-md bg-red-600 bg-opacity-50 hover:bg-opacity-100 duration-200"
-          >Total Expenses: {{ maskCurrency(expenses_subtotal) }}</span
+          >{{
+            $t("total") +
+            " " +
+            i18n.t("expense", 2) +
+            ": " +
+            maskCurrency(expenses_subtotal)
+          }}</span
         >
       </div>
     </transition>

frontend/src/components/CreateProfileModal.vue

@@ -37,11 +37,13 @@ function onSubmit(): void {
 <template>
   <Dialog :isOpen="isOpen">
     <form class="flex flex-col gap-4" @submit.prevent="onSubmit">
-      <h1 class="text-2xl text-black dark:text-white">Create profile</h1>
+      <h1 class="text-2xl text-black dark:text-white">
+        {{ $t("create") + " " + $t("profile") }}
+      </h1>
       <Input
         :required="true"
         :name="'description'"
-        :title="'Description'"
+        :title="$t('description')"
         :type="'text'"
         :model-value="description"
         @update:model-value="(newValue) => (description = newValue)"
@@ -50,7 +52,7 @@ function onSubmit(): void {
         v-if="profileStore.hasProfileCreated()"
         :required="false"
         :name="'default'"
-        :title="'Main profile'"
+        :title="$t('main_profile')"
         :type="'checkbox'"
         :checked="false"
         :model-value="isDefault"
@@ -62,8 +64,10 @@ function onSubmit(): void {
         "
       />
       <div class="flex gap-4">
-        <CancelButton @click="$emit('on-cancel')">Cancel</CancelButton>
-        <ConfirmButton>Add</ConfirmButton>
+        <CancelButton @click="$emit('on-cancel')">{{
+          $t("cancel")
+        }}</CancelButton>
+        <ConfirmButton>{{ $t("save") }}</ConfirmButton>
       </div>
     </form>
   </Dialog>

frontend/src/components/DestructiveActionModal.vue

@@ -15,17 +15,20 @@ const { isOpen, title } = toRefs(props);
 <template>
   <div class="fixed z-50">
     <Dialog :isOpen="isOpen">
-      <h1 class="text-2xl text-black dark:text-white">
-        {{ title ? title : "Delete" }}
+      <h1 class="text-2xl mb-2 text-black dark:text-white">
+        {{ title ? title : $t("delete") }}
       </h1>
       <div class="flex flex-col gap-4">
         <h1 class="text-lg text-black dark:text-white">
-          Are you sure you want to delete this item? This action cannot be
-          undone.
+          {{ $t("warning") }}
         </h1>
         <div class="flex gap-4">
-          <CancelButton @click="$emit('on-cancel')">Cancel</CancelButton>
-          <DangerButton @click="$emit('on-confirm')">Delete</DangerButton>
+          <CancelButton @click="$emit('on-cancel')">{{
+            $t("cancel")
+          }}</CancelButton>
+          <DangerButton @click="$emit('on-confirm')">{{
+            $t("delete")
+          }}</DangerButton>
         </div>
       </div>
     </Dialog>

frontend/src/components/EditItemModal.vue

@@ -82,12 +82,13 @@ function onSubmit(): void {
   <Dialog :isOpen="isOpen">
     <form class="flex flex-col gap-4" @submit.prevent="onSubmit">
       <h1 class="text-2xl text-black dark:text-white">
-        Edit {{ selectedTab === Tab.EARNING ? "earning" : "expense" }}
+        {{ $t("edit") }}
+        {{ selectedTab === Tab.EARNING ? $t("earning") : $t("expense") }}
       </h1>
       <Input
         :required="true"
         :name="'description'"
-        :title="'Description'"
+        :title="$t('description')"
         :type="'text'"
         :model-value="formData.description"
         @update:model-value="
@@ -97,7 +98,7 @@ function onSubmit(): void {
       <Input
         :required="true"
         :name="'amount'"
-        :title="'Amount'"
+        :title="$t('amount')"
         :type="'number'"
         :model-value="formData.amount"
         @update:model-value="(newValue: number) => (formData.amount = newValue)"
@@ -107,16 +108,18 @@ function onSubmit(): void {
         :required="true"
         v-if="selectedTab === Tab.EXPENSE"
         :name="'category'"
-        :title="'Category'"
+        :title="$t('category')"
         :model-value="formData && (formData as types.ExpenseUpdate).category_id"
         @update:model-value="
           (newValue: number) =>
             ((formData as types.ExpenseUpdate).category_id = newValue)
         "
       />
       <div class="flex gap-4">
-        <CancelButton @click="emit('on-cancel')">Cancel</CancelButton>
-        <ConfirmButton>Edit</ConfirmButton>
+        <CancelButton @click="emit('on-cancel')">{{
+          $t("cancel")
+        }}</CancelButton>
+        <ConfirmButton>{{ $t("save") }}</ConfirmButton>
       </div>
     </form>
   </Dialog>