added keyboard shortcut in the setting for better ui navigation (#2484)

src/gui/src/UI/Settings/UITabKeyboardShortcuts.js

@@ -0,0 +1,132 @@
+/**
+ * Copyright (C) 2024-present 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/>.
+ */
+
+const shortcutSections = () => ([
+    {
+        title: i18n('keyboard_shortcuts_general'),
+        rows: [
+            {
+                action: i18n('keyboard_shortcuts_open_help'),
+                keys: 'F1 / Ctrl+?',
+            },
+            {
+                action: i18n('keyboard_shortcuts_search'),
+                keys: 'Ctrl/Cmd + F',
+            },
+            {
+                action: i18n('keyboard_shortcuts_close_window'),
+                keys: 'Ctrl + W',
+            },
+            {
+                action: i18n('keyboard_shortcuts_undo'),
+                keys: 'Ctrl/Cmd + Z',
+            },
+            {
+                action: i18n('keyboard_shortcuts_select_all'),
+                keys: 'Ctrl/Cmd + A',
+            },
+            {
+                action: i18n('keyboard_shortcuts_open_item'),
+                keys: 'Enter',
+            },
+            {
+                action: i18n('keyboard_shortcuts_close_menus'),
+                keys: 'Esc',
+            },
+        ],
+    },
+    {
+        title: i18n('keyboard_shortcuts_navigation'),
+        rows: [
+            {
+                action: i18n('keyboard_shortcuts_arrow_navigation'),
+                keys: 'Arrow Keys',
+            },
+            {
+                action: i18n('keyboard_shortcuts_type_to_select'),
+                keys: i18n('keyboard_shortcuts_type_to_select_keys'),
+            },
+        ],
+    },
+    {
+        title: i18n('keyboard_shortcuts_files'),
+        rows: [
+            {
+                action: i18n('keyboard_shortcuts_copy'),
+                keys: 'Ctrl/Cmd + C',
+            },
+            {
+                action: i18n('keyboard_shortcuts_cut'),
+                keys: 'Ctrl/Cmd + X',
+            },
+            {
+                action: i18n('keyboard_shortcuts_paste'),
+                keys: 'Ctrl/Cmd + V',
+            },
+            {
+                action: i18n('keyboard_shortcuts_delete'),
+                keys: 'Delete (Win/Linux) / Cmd + Backspace (Mac)',
+            },
+            {
+                action: i18n('keyboard_shortcuts_permanent_delete'),
+                keys: 'Shift + Delete (Win/Linux) / Option + Cmd + Backspace (Mac)',
+            },
+        ],
+    },
+]);
+
+export default {
+    id: 'keyboard-shortcuts',
+    title_i18n_key: 'keyboard_shortcuts',
+    icon: 'shortcut.svg',
+    html: () => {
+        const sections = shortcutSections();
+        const sectionHtml = sections.map(section => {
+            const rows = section.rows.map(row => `
+                <tr>
+                    <td class="settings-shortcuts-action">${row.action}</td>
+                    <td class="settings-shortcuts-keys"><span>${row.keys}</span></td>
+                </tr>
+            `).join('');
+
+            return `
+                <div class="settings-shortcuts-section">
+                    <h2>${section.title}</h2>
+                    <table class="settings-shortcuts-table">
+                        <thead>
+                            <tr>
+                                <th>${i18n('keyboard_shortcuts_action')}</th>
+                                <th>${i18n('keyboard_shortcuts_shortcut')}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${rows}
+                        </tbody>
+                    </table>
+                </div>
+            `;
+        }).join('');
+
+        return `
+            <h1>${i18n('keyboard_shortcuts')}</h1>
+            <p class="settings-shortcuts-intro">${i18n('keyboard_shortcuts_intro')}</p>
+            ${sectionHtml}
+        `;
+    },
+};

src/gui/src/UI/UIDesktop.js

@@ -2232,6 +2232,16 @@ $(document).on('click', '.user-options-menu-btn', async function (e) {
                 },
             },
             //--------------------------------------------------
+            // Keyboard Shortcuts
+            //--------------------------------------------------
+            {
+                html: i18n('keyboard_shortcuts'),
+                id: 'keyboard_shortcuts',
+                onClick: async function () {
+                    UIWindowSettings({ tab: 'keyboard-shortcuts' });
+                },
+            },
+            //--------------------------------------------------
             // My Websites
             //--------------------------------------------------
             {

src/gui/src/css/style.css

@@ -4514,6 +4514,60 @@ fieldset[name=number-code] {
     font-weight: 500;
 }
 
+.settings-shortcuts-intro {
+    font-size: 14px;
+    color: #4a4a4a;
+    margin: -8px 0 18px;
+}
+
+.settings-shortcuts-section {
+    margin-bottom: 24px;
+}
+
+.settings-shortcuts-section h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 10px;
+    color: #2c2c2c;
+}
+
+.settings-shortcuts-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    background: #ffffff;
+    border: 1px solid #ececec;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.settings-shortcuts-table thead th {
+    text-align: left;
+    padding: 10px 14px;
+    background: #f6f6f6;
+    font-weight: 600;
+    color: #444;
+}
+
+.settings-shortcuts-table tbody td {
+    padding: 10px 14px;
+    border-top: 1px solid #eeeeee;
+    vertical-align: top;
+}
+
+.settings-shortcuts-keys span {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    border-radius: 6px;
+    background: #f3f3f3;
+    border: 1px solid #e0e0e0;
+    font-family: "SFMono-Regular", "Segoe UI", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12px;
+    color: #333;
+}
+
 .settings-content.active {
     display: flex;
     flex-direction: column;

src/gui/src/i18n/translations/en.js

@@ -297,6 +297,28 @@ const en = {
         server_information: 'Server Information',
         session_saved: 'Thank you for creating an account. This session has been saved.',
         settings: 'Settings',
+        keyboard_shortcuts: 'Keyboard Shortcuts',
+        keyboard_shortcuts_intro: 'Learn the most useful shortcuts for navigating Puter faster.',
+        keyboard_shortcuts_action: 'Action',
+        keyboard_shortcuts_shortcut: 'Shortcut',
+        keyboard_shortcuts_general: 'General',
+        keyboard_shortcuts_navigation: 'Navigation',
+        keyboard_shortcuts_files: 'Files & Clipboard',
+        keyboard_shortcuts_open_help: 'Open this keyboard shortcuts guide',
+        keyboard_shortcuts_search: 'Open search',
+        keyboard_shortcuts_close_window: 'Close the active window',
+        keyboard_shortcuts_undo: 'Undo last action',
+        keyboard_shortcuts_select_all: 'Select all items',
+        keyboard_shortcuts_open_item: 'Open selected item',
+        keyboard_shortcuts_close_menus: 'Close dialogs, menus, and popovers',
+        keyboard_shortcuts_arrow_navigation: 'Navigate menus and selections',
+        keyboard_shortcuts_type_to_select: 'Type to jump to an item by name',
+        keyboard_shortcuts_type_to_select_keys: 'Type letters or numbers',
+        keyboard_shortcuts_copy: 'Copy selected items',
+        keyboard_shortcuts_cut: 'Cut selected items',
+        keyboard_shortcuts_paste: 'Paste items',
+        keyboard_shortcuts_delete: 'Move selected items to Trash',
+        keyboard_shortcuts_permanent_delete: 'Permanently delete (after confirmation)',
         set_new_password: 'Set New Password',
         share: 'Share',
         share_to: 'Share to',

src/gui/src/keyboard.js

@@ -19,6 +19,7 @@
 
 import UIAlert from './UI/UIAlert.js';
 import UIWindowSearch from './UI/UIWindowSearch.js';
+import UIWindowSettings from './UI/Settings/UIWindowSettings.js';
 import launch_app from './helpers/launch_app.js';
 import open_item from './helpers/open_item.js';
 import determine_active_container_parent from './helpers/determine_active_container_parent.js';
@@ -26,6 +27,16 @@ import determine_active_container_parent from './helpers/determine_active_contai
 $(document).bind('keydown', async function (e) {
     const focused_el = document.activeElement;
     //-----------------------------------------------------------------------------
+    // Keyboard Shortcuts help
+    // F1 or Ctrl/Cmd + ? (Ctrl/Cmd + Shift + /)
+    //-----------------------------------------------------------------------------
+    if ( e.which === 112 || ((e.ctrlKey || e.metaKey) && e.shiftKey && e.which === 191) ) {
+        e.preventDefault();
+        e.stopPropagation();
+        UIWindowSettings({ tab: 'keyboard-shortcuts' });
+        return false;
+    }
+    //-----------------------------------------------------------------------------
     // Search
     // ctrl/command + f, will open UIWindowSearch
     //-----------------------------------------------------------------------------

src/gui/src/services/SettingsService.js

@@ -24,6 +24,7 @@ import AccountTab from '../UI/Settings/UITabAccount.js';
 import SecurityTab from '../UI/Settings/UITabSecurity.js';
 import PersonalizationTab from '../UI/Settings/UITabPersonalization.js';
 import LanguageTag from '../UI/Settings/UITabLanguage.js';
+import KeyboardShortcutsTab from '../UI/Settings/UITabKeyboardShortcuts.js';
 import UIElement from '../UI/UIElement.js';
 const TSettingsTab = use('ui.traits.TSettingsTab');
 
@@ -36,6 +37,7 @@ export class SettingsService extends Service {
             SecurityTab,
             PersonalizationTab,
             LanguageTag,
+            KeyboardShortcutsTab,
             AboutTab,
         ].forEach(tab => {
             this.register_tab(tab);