I18n translation by Lantum-Brendan · Pull Request #47 · flatrun/ui

Lantum-Brendan · 2026-03-02T19:34:04Z

This PR handles a slight setup documentation modification and handles translation to locale languages.

Screencast.From.2026-03-26.14-43-44.mp4

sourceant · 2026-03-04T13:47:17Z

Code Review Summary

This PR successfully internationalizes the application using vue-i18n. It introduces support for English, French, German, Spanish, Portuguese, and Italian. It also cleans up the README and ESLint configuration.

🚀 Key Improvements

Extracted all UI strings into locale JSON files for better maintainability.
Introduced a LanguageSelector component with flag support.
Cleaned up hardcoded configuration objects in PermissionPicker and SecurityHealthCard.

💡 Minor Suggestions

Centralize status and token normalization logic to avoid duplication across views.
Fix case-sensitivity issues in existing unit tests revealed by the translation changes.

🚨 Critical Issues

Address failing unit tests in BackupsTab and ContainerTerminal where expectations don't match the new i18n-driven output.

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-03-04T13:47:18Z

src/stores/auth.ts

    error.value = "";
+    const normalizedApiKey = apiKey.trim();
+
+    if (!normalizedApiKey) {


The error message 'API key is required' is still hardcoded while the rest of the app has been internationalized. This should use the $t function or be handled in the view layer with a translation key.

Suggested change

if (!normalizedApiKey) {

if (!normalizedApiKey) {

error.value = "auth.errors.apiKeyRequired";

loading.value = false;

return false;

}

sourceant · 2026-03-04T13:47:18Z

src/views/SettingsView.vue

@@ -951,12 +974,18 @@ const deleteCredential = async () => {
  try {


When calling templatesApi.refresh(), the response potentially contains a count or message that is being ignored in favor of a static notification. It's better to verify if the count needs to be passed to the translation string.

Suggested change

try {

const response = await templatesApi.refresh();

notifications.success(

t("settings.general.quickActions.templatesRefreshedTitle"),

t("settings.general.quickActions.templatesRefreshedDesc", { n: response.data.count || 0 })

);

nfebe

The refactoring in CI is not related. Please update the PR (resolve conflicts and update the video)

This looks quite good! Thank you

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-03-23T14:28:10Z

src/components/BackupsTab.vue

  return date.toLocaleString();
 };

+const formatBackupStatus = (status: string): string => {


The helper function formatBackupStatus attempts to translate status strings but falls back to a manual string replacement. It's safer to ensure all possible statuses are defined in the locale files to avoid inconsistent UI labels.

Suggested change

const formatBackupStatus = (status: string): string => {

const formatBackupStatus = (status: string): string => {

const key = `deployment.backups.status.${status}`;

return te(key) ? t(key) : t('deployment.backups.status.unknown');

};

sourceant · 2026-03-23T14:28:10Z

src/components/LanguageSelector.vue

+<template>
+  <div class="language-dropdown" @keydown.esc="closeMenu">
+    <button class="language-trigger" type="button" :aria-expanded="isOpen" aria-haspopup="menu" @click="toggleMenu">
+      <img class="language-flag" :src="currentLanguage.flagPath" :alt="currentLanguage.code" />
+      <span class="language-label">{{ currentLanguage.label }}</span>
+      <i class="pi pi-chevron-down" />
+    </button>
+    <div v-if="isOpen" class="language-menu" role="menu">
+      <button


The new LanguageSelector component lacks accessibility attributes for the list items. Using role="menu" on the container is good, but the trigger and items should have appropriate ARIA labels and keyboard navigation handling beyond just 'Esc'.

Suggested change

<template>

<div class="language-dropdown" @keydown.esc="closeMenu">

<button class="language-trigger" type="button" :aria-expanded="isOpen" aria-haspopup="menu" @click="toggleMenu">

<img class="language-flag" :src="currentLanguage.flagPath" :alt="currentLanguage.code" />

<span class="language-label">{{ currentLanguage.label }}</span>

<i class="pi pi-chevron-down" />

</button>

<div v-if="isOpen" class="language-menu" role="menu">

<button

<button

v-for="lang in languages"

:key="lang.code"

class="language-item"

type="button"

role="menuitem"

:aria-label="'Switch to ' + lang.label"

@click="selectLanguage(lang)"

>

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-03-23T14:38:49Z

src/components/FileBrowser.vue

-              >?
-            </p>
-            <p v-if="fileToDelete?.is_dir" class="warning-text">This will delete all contents inside the folder.</p>
+            <!-- eslint-disable vue/no-v-html -->


Using v-html for simple string interpolation is a security risk (XSS) and unnecessary for this use case. Use standard interpolation or the <i18n-t> component if specific formatting is needed.

Suggested change



<p>{{ $t('deployment.files.modal.delete.confirm', { name: fileToDelete?.name }) }}</p>

…lector

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-03-26T13:30:02Z

src/components/BackupsTab.vue

+const formatBackupStatus = (status: string): string => {
+  const key = `deployment.backups.status.${status}`;
+  if (te(key)) return t(key);
+  return status.replace(/_/g, " ");


When a translation is missing, the fallback logic simply replaces underscores. This is a good safety measure, but it's often better to title-case the result for a cleaner UI.

Suggested change

return status.replace(/_/g, " ");

return status.replace(/_/g, " ").replace(/\b\w/g, l => l.toUpperCase());

sourceant · 2026-03-26T13:30:02Z

src/components/LanguageSelector.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="language-dropdown" @keydown.esc="closeMenu">


The container uses keydown.esc but lacks a blur/outside click handler. If a user clicks away from the menu, it will stay open. Adding a simple directive or global listener would improve UX.

Suggested change

<div class="language-dropdown" @keydown.esc="closeMenu">

<div class="language-dropdown" v-click-outside="closeMenu" @keydown.esc="closeMenu">

sourceant · 2026-03-26T13:30:02Z

src/views/SecurityView.vue

+  return t("security.events.dynamicType", { type: humanized });
+};
+
+const normalizeEventToken = (value?: string) =>


The manual string manipulation for token normalization is repeated. Consider moving this to a central utility file since it is used in multiple components (Backups, Security, Services).

Suggested change

const normalizeEventToken = (value?: string) =>

const normalizeEventToken = (value?: string) =>

normalizeToken(value);

Lantum-Brendan · 2026-03-26T13:50:41Z

The refactoring in CI is not related. Please update the PR (resolve conflicts and update the video)

This looks quite good! Thank you

Changes to CI file removed, conflicts resolved and video updated.

Lantum-Brendan marked this pull request as ready for review March 4, 2026 13:46

sourceant bot reviewed Mar 4, 2026

View reviewed changes

nfebe reviewed Mar 19, 2026

View reviewed changes

Lantum-Brendan force-pushed the i18n-translation branch from cc9d209 to 8a8e623 Compare March 23, 2026 14:27

sourceant bot reviewed Mar 23, 2026

View reviewed changes

Lantum-Brendan force-pushed the i18n-translation branch from 8a8e623 to 38c18ad Compare March 23, 2026 14:38

sourceant bot suggested changes Mar 23, 2026

View reviewed changes

Lantum-Brendan added 13 commits March 26, 2026 14:20

chore: Align API configuration and harden authentication

c052825

feat(i18n): Implement dashboard internationalization with language se…

09dd599

…lector

feat: Add translation for /deployments

5cc6315

fix: Fix lint & format issues

56e4d5c

feat: Add Translation for Docker links

825b6cd

feat: Translate system links

7b2f8e1

fix: Fix test setup & mocks for i18n compatibility

7d94212

style: Fix prettier formating on test files

ab4f64e

feat: Add locales for database & dns links

c5f478f

feat: Add locales for security pages

599dfe8

feat: Add locales for Apps

3398a32

feat: Add locales for Administration links

ff58863

fix: Fix failling format(Run prettier --write)

42a7f47

Lantum-Brendan force-pushed the i18n-translation branch from 38c18ad to 42a7f47 Compare March 26, 2026 13:29

sourceant bot reviewed Mar 26, 2026

View reviewed changes

Lantum-Brendan requested a review from nfebe March 26, 2026 13:49

-    if (!normalizedApiKey) {
+    if (!normalizedApiKey) {
+      error.value = "auth.errors.apiKeyRequired";
+      loading.value = false;
+      return false;
+    }

		@@ -951,12 +974,18 @@ const deleteCredential = async () => {
		try {

-  try {
+    const response = await templatesApi.refresh();
+    notifications.success(
+      t("settings.general.quickActions.templatesRefreshedTitle"),
+      t("settings.general.quickActions.templatesRefreshedDesc", { n: response.data.count || 0 })
+    );

	<!-- eslint-disable vue/no-v-html -->
	<p>{{ $t('deployment.files.modal.delete.confirm', { name: fileToDelete?.name }) }}</p>

	return status.replace(/_/g, " ");
	return status.replace(/_/g, " ").replace(/\b\w/g, l => l.toUpperCase());

		@@ -0,0 +1,148 @@
		<template>
		<div class="language-dropdown" @keydown.esc="closeMenu">

	<div class="language-dropdown" @keydown.esc="closeMenu">
	<div class="language-dropdown" v-click-outside="closeMenu" @keydown.esc="closeMenu">

	const normalizeEventToken = (value?: string) =>
	const normalizeEventToken = (value?: string) =>
	normalizeToken(value);

Conversation

Lantum-Brendan commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sourceant bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

🚀 Key Improvements

💡 Minor Suggestions

🚨 Critical Issues

Uh oh!

sourceant bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

nfebe left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Lantum-Brendan commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Lantum-Brendan commented Mar 2, 2026 •

edited

Loading

sourceant bot commented Mar 4, 2026 •

edited

Loading