Settings: Move 'Clock' tab into its own file

src/UI/Settings/UITabClock.js

@@ -0,0 +1,45 @@
+/**
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
+
+// About
+export default {
+    id: 'clock',
+    title_i18n_key: 'clock',
+    icon: 'clock.svg',
+    html: () => {
+        return `
+            <h1>${i18n('clock')}</h1>
+            <div style="display: flex;align-items: center">
+                <span>${i18n('visibility')}:</span>
+                <select class="change-clock-visible" style="margin-left: 10px;flex: 1">
+                    <option value="auto">${i18n('clock_visible_auto')}</option>
+                    <option value="hide">${i18n('clock_visible_hide')}</option>
+                    <option value="show">${i18n('clock_visible_show')}</option>
+                </select>
+            </div>`;
+    },
+    init: ($el_window) => {
+        $el_window.on('change', 'select.change-clock-visible', function(e){
+            window.change_clock_visible(this.value);
+        });
+
+        window.change_clock_visible();
+    },
+};

src/UI/Settings/UIWindowSettings.js

@@ -28,6 +28,7 @@ import UsageTab from './UITabUsage.js';
 import AccountTab from './UITabAccount.js';
 import PersonalizationTab from './UITabPersonalization.js';
 import LanguageTab from './UITabLanguage.js';
+import ClockTab from './UITabClock.js';
 import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
 import UIWindowManageSessions from '../UIWindowManageSessions.js';
 
@@ -41,7 +42,7 @@ async function UIWindowSettings(options){
             AccountTab,
             PersonalizationTab,
             LanguageTab,
-            // ClockTab,
+            ClockTab,
         ];
 
         let h = '';
@@ -53,7 +54,6 @@ async function UIWindowSettings(options){
             tabs.forEach((tab, i) => {
                 h += `<div class="settings-sidebar-item disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
             });
-                h += `<div class="settings-sidebar-item disable-user-select" data-settings="clock" style="background-image: url(${icons['clock.svg']});">${i18n('clock')}</div>`;
             h += `</div>`;
 
             // content
@@ -65,19 +65,6 @@ async function UIWindowSettings(options){
                     </div>`;
             });
 
-                // Clock
-                h += `<div class="settings-content" data-settings="clock">`;
-                     h += `<h1>${i18n('clock')}</h1>`;
-                     h += `<div style="display: flex;align-items: center">`
-                        h += `<span>${i18n('visibility')}:</span>`
-                        h += `<select class="change-clock-visible" style="margin-left: 10px;flex: 1">`
-                            h += `<option value="auto">${i18n('clock_visible_auto')}</option>`
-                            h += `<option value="hide">${i18n('clock_visible_hide')}</option>`
-                            h += `<option value="show">${i18n('clock_visible_show')}</option>`
-                        h += `</select>`
-                     h += `</div>`
-                h += `</div>`;      
-
             h += `</div>`;
         h += `</div>`;
         h += `</div>`;
@@ -138,15 +125,6 @@ async function UIWindowSettings(options){
             }
         })
 
-        $(el_window).on('change', 'select.change-clock-visible', function(e){
-            const $this = $(this);  
-            const value = $this.val();
-
-            window.change_clock_visible(value);
-        })
-
-        window.change_clock_visible();
-
         resolve(el_window);
     });
 }