diff --git a/src/UI/Settings/UITabLanguage.js b/src/UI/Settings/UITabLanguage.js
new file mode 100644
index 00000000..c0c36df2
--- /dev/null
+++ b/src/UI/Settings/UITabLanguage.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (C) 2024 Puter Technologies Inc.
+ *
+ * This file is part of Puter.
+ *
+ * Puter is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
+import changeLanguage from '../../i18n/i18nChangeLanguage.js';
+
+// About
+export default {
+ id: 'language',
+ title_i18n_key: 'language',
+ icon: 'language.svg',
+ html: () => {
+ let h = `
${i18n('language')}
`;
+
+ // search
+ h += `
+
+
`;
+
+ // list of languages
+ const available_languages = listSupportedLanguages();
+ h += `
`;
+ for (let lang of available_languages) {
+ h += `
${lang.name}
`;
+ }
+ h += `
`;
+ return h;
+ },
+ init: ($el_window) => {
+ $el_window.on('click', '.language-item', function(){
+ const $this = $(this);
+ const lang = $this.attr('data-lang');
+ changeLanguage(lang);
+ $this.siblings().removeClass('active');
+ $this.addClass('active');
+ // make sure all other language items are visible
+ $this.closest('.language-list').find('.language-item').show();
+ });
+
+ $el_window.on('input', '.search-language', function(){
+ const $this = $(this);
+ const search = $this.val().toLowerCase();
+ const $container = $this.closest('.settings').find('.settings-content-container');
+ const $content = $container.find('.settings-content.active');
+ const $list = $content.find('.language-list');
+ const $items = $list.find('.language-item');
+ $items.each(function(){
+ const $item = $(this);
+ const lang = $item.attr('data-lang');
+ const name = $item.text().toLowerCase();
+ const english_name = $item.attr('data-english-name').toLowerCase();
+ if(name.includes(search) || lang.includes(search) || english_name.includes(search)){
+ $item.show();
+ }else{
+ $item.hide();
+ }
+ })
+ });
+ },
+ on_show: ($content) => {
+ // Focus on search
+ $content.find('.search').first().focus();
+ // make sure all language items are visible
+ $content.find('.language-item').show();
+ // empty search
+ $content.find('.search').val('');
+ },
+};
diff --git a/src/UI/Settings/UIWindowSettings.js b/src/UI/Settings/UIWindowSettings.js
index 6d59664f..20397f5d 100644
--- a/src/UI/Settings/UIWindowSettings.js
+++ b/src/UI/Settings/UIWindowSettings.js
@@ -27,6 +27,7 @@ import AboutTab from './UITabAbout.js';
import UsageTab from './UITabUsage.js';
import AccountTab from './UITabAccount.js';
import PersonalizationTab from './UITabPersonalization.js';
+import LanguageTab from './UITabLanguage.js';
import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
import UIWindowManageSessions from '../UIWindowManageSessions.js';
@@ -39,7 +40,7 @@ async function UIWindowSettings(options){
UsageTab,
AccountTab,
PersonalizationTab,
- // LanguageTab,
+ LanguageTab,
// ClockTab,
];
@@ -52,7 +53,6 @@ async function UIWindowSettings(options){
tabs.forEach((tab, i) => {
h += `
${i18n(tab.title_i18n_key)}
`;
});
- h += `
${i18n('language')}
`;
h += `
${i18n('clock')}
`;
h += ``;
@@ -65,22 +65,6 @@ async function UIWindowSettings(options){
`;
});
- // Language
- h += `
`;
- h += `
${i18n('language')}
`;
- // search
- h += `
`;
- h += ``;
- h += `
`;
- // list of languages
- const available_languages = listSupportedLanguages();
- h += `
`;
- for (let lang of available_languages) {
- h += `
${lang.name}
`;
- }
- h += `
`;
- h += `
`;
-
// Clock
h += `
`;
h += `
${i18n('clock')}
`;
@@ -146,46 +130,14 @@ async function UIWindowSettings(options){
// add active class to content
$container.find('.settings-content').removeClass('active');
$content.addClass('active');
- // if language, focus on search
- if(settings === 'language'){
- $content.find('.search').first().focus();
- // make sure all language items are visible
- $content.find('.language-item').show();
- // empty search
- $content.find('.search').val('');
+
+ // Run on_show handlers
+ const tab = tabs.find((tab) => tab.id === settings);
+ if (tab.on_show) {
+ tab.on_show($content);
}
})
- $(el_window).on('click', '.language-item', function(){
- const $this = $(this);
- const lang = $this.attr('data-lang');
- changeLanguage(lang);
- $this.siblings().removeClass('active');
- $this.addClass('active');
- // make sure all other language items are visible
- $this.closest('.language-list').find('.language-item').show();
- })
-
- $(el_window).on('input', '.search', function(){
- const $this = $(this);
- const search = $this.val().toLowerCase();
- const $container = $this.closest('.settings').find('.settings-content-container');
- const $content = $container.find('.settings-content.active');
- const $list = $content.find('.language-list');
- const $items = $list.find('.language-item');
- $items.each(function(){
- const $item = $(this);
- const lang = $item.attr('data-lang');
- const name = $item.text().toLowerCase();
- const english_name = $item.attr('data-english-name').toLowerCase();
- if(name.includes(search) || lang.includes(search) || english_name.includes(search)){
- $item.show();
- }else{
- $item.hide();
- }
- })
- });
-
$(el_window).on('change', 'select.change-clock-visible', function(e){
const $this = $(this);
const value = $this.val();