Upgrade mobile keyboard with more keys.

src/ui/Mobile/Apps/Terminal/Terminal.tsx

@@ -405,7 +405,7 @@ style.innerHTML = `
   font-feature-settings: "liga" 1, "calt" 1;
 }
 
-.xterm .xterm-screen .xterm-char[data-char-code^="\\uE"] {
+.xterm .xterm-screen .xterm-char[data-char-code^="\uE000"] {
   font-family: 'JetBrains Mono Nerd Font', 'MesloLGS NF', 'FiraCode Nerd Font' !important;
 }
 `;

src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx

@@ -9,59 +9,137 @@ interface TerminalKeyboardProps {
 
 export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
     const [layoutName, setLayoutName] = useState("default");
+    const [isCtrl, setIsCtrl] = useState(false);
+    const [isAlt, setIsAlt] = useState(false);
 
-    const onKeyPress = (button: string) => {
+    const onKeyPress = async (button: string) => {
         if (button === "{shift}") {
             setLayoutName("shift");
             return;
         }
-
         if (button === "{unshift}") {
             setLayoutName("default");
             return;
         }
-
         if (button === "{more}") {
-            setLayoutName("more")
+            setLayoutName("more");
             return;
         }
-
         if (button === "{less}") {
             setLayoutName("default");
             return;
         }
-
         if (button === "{hide}") {
             setLayoutName("hide");
             return;
         }
-
         if (button === "{unhide}") {
             setLayoutName("default");
             return;
         }
 
-        onSendInput(button);
+        if (button === "{ctrl}") {
+            setIsCtrl(prev => !prev);
+            return;
+        }
+        if (button === "{alt}") {
+            setIsAlt(prev => !prev);
+            return;
+        }
+
+        if (button === "{paste}") {
+            if (navigator.clipboard?.readText) {
+                try {
+                    const text = await navigator.clipboard.readText();
+                    if (text) {
+                        onSendInput(text);
+                    }
+                } catch (err) {
+
+                }
+            }
+            return;
+        }
+
+        let input = button;
+
+        const specialKeyMap: { [key: string]: string } = {
+            "{esc}": "\x1b", "{enter}": "\r", "{tab}": "\t", "{backspace}": "\x7f",
+            "{arrowUp}": "\x1b[A", "{arrowDown}": "\x1b[B", "{arrowRight}": "\x1b[C", "{arrowLeft}": "\x1b[D",
+            "{home}": "\x1b[H", "{end}": "\x1b[F", "{pgUp}": "\x1b[5~", "{pgDn}": "\x1b[6~",
+            "F1": "\x1bOP", "F2": "\x1bOQ", "F3": "\x1bOR", "F4": "\x1bOS",
+            "F5": "\x1b[15~", "F6": "\x1b[17~", "F7": "\x1b[18~", "F8": "\x1b[19~",
+            "F9": "\x1b[20~", "F10": "\x1b[21~", "F11": "\x1b[23~", "F12": "\x1b[24~",
+            "{space}": " "
+        };
+
+        if (specialKeyMap[input]) {
+            input = specialKeyMap[input];
+        }
+
+        if (isCtrl) {
+            if (input.length === 1) {
+                const charCode = input.toUpperCase().charCodeAt(0);
+                if (charCode >= 64 && charCode <= 95) {
+                    input = String.fromCharCode(charCode - 64);
+                }
+            }
+        }
+
+        if (isAlt) {
+            input = `\x1b${input}`;
+        }
+
+        onSendInput(input);
     };
 
+    const buttonTheme = [
+        {
+            class: "hg-space-big",
+            buttons: "{space}",
+        },
+        {
+            class: "hg-space-medium",
+            buttons: "{enter} {backspace}",
+        },
+        {
+            class: "hg-space-small",
+            buttons: "{hide} {less} {more}",
+        }
+    ];
+
+    if (isCtrl) {
+        buttonTheme.push({class: "key-active", buttons: "{ctrl}"});
+    }
+    if (isAlt) {
+        buttonTheme.push({class: "key-active", buttons: "{alt}"});
+    }
+
     return (
         <div className="">
             <Keyboard
                 layout={{
                     default: [
+                        "{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
                         "q w e r t y u i o p",
                         "a s d f g h j k l",
                         "{shift} z x c v b n m {backspace}",
                         "{hide} {more} {space} {enter}",
                     ],
                     shift: [
+                        "{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
                         "Q W E R T Y U I O P",
                         "A S D F G H J K L",
                         "{unshift} Z X C V B N M {backspace}",
                         "{hide} {more} {space} {enter}",
                     ],
                     more: [
-                        "{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {backspace}",
+                        "{esc} {tab} {ctrl} {alt} {end} {home} {pgUp} {pgDn}",
+                        "1 2 3 4 5 6 7 8 9 0",
+                        "! @ # $ % ^ & * ( ) _ +",
+                        "[ ] { } | \\ ; : ' \" , . / < >",
+                        "F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
+                        "{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {paste} {backspace}",
                         "{hide} {less} {space} {enter}",
                     ],
                     hide: [
@@ -73,7 +151,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                 display={{
                     "{shift}": "up",
                     "{unshift}": "dn",
-                    "{backspace}": "del",
+                    "{backspace}": "back",
                     "{more}": "more",
                     "{less}": "less",
                     "{space}": "space",
@@ -84,23 +162,19 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                     "{arrowDown}": "↓",
                     "{hide}": "hide",
                     "{unhide}": "unhide",
+                    "{esc}": "esc",
+                    "{tab}": "tab",
+                    "{ctrl}": "ctrl",
+                    "{alt}": "alt",
+                    "{paste}": "paste",
+                    "{end}": "end",
+                    "{home}": "home",
+                    "{pgUp}": "pgUp",
+                    "{pgDn}": "pgDn",
                 }}
                 theme={"hg-theme-default dark-theme"}
                 useTouchEvents={true}
-                buttonTheme={[
+                buttonTheme={buttonTheme}
-                    {
-                        class: "hg-space-big",
-                        buttons: "{space}",
-                    },
-                    {
-                        class: "hg-space-medium",
-                        buttons: "{enter} {backspace}",
-                    },
-                    {
-                        class: "hg-space-small",
-                        buttons: "{hide} {less} {more}",
-                    }
-                ]}
             />
         </div>
     );

src/ui/Mobile/Apps/Terminal/kb-dark-theme.css

@@ -22,6 +22,11 @@
     background: rgba(83, 83, 83, 0.5);
 }
 
+.dark-theme .hg-button.key-active {
+    background: rgba(126, 126, 126, 0.5);
+    color: white;
+}
+
 .hg-space-big {
     width: 100px;
 }

src/ui/Mobile/MobileApp.tsx

@@ -1,8 +1,8 @@
-import {useRef} from "react";
+import {useRef, FC} from "react";
 import {Terminal} from "@/ui/Mobile/Apps/Terminal/Terminal.tsx";
 import {TerminalKeyboard} from "@/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx";
 
-export function MobileApp() {
+export const MobileApp: FC = () => {
     const terminalRef = useRef<any>(null);
 
     function handleKeyboardInput(input: string) {
@@ -34,16 +34,18 @@ export function MobileApp() {
 
     return (
         <div className="h-screen w-screen flex flex-col bg-[#09090b] overflow-y-hidden overflow-x-hidden">
-            <Terminal
+            <div className="flex-1 min-h-0">
-                ref={terminalRef}
+                <Terminal
-                hostConfig={{
+                    ref={terminalRef}
-                    ip: "192.210.197.55",
+                    hostConfig={{
-                    port: 22,
+                        ip: "192.210.197.55",
-                    username: "bugattiguy527",
+                        port: 22,
-                    password: "bugatti$123"
+                        username: "bugattiguy527",
-                }}
+                        password: "bugatti$123"
-                isVisible={true}
+                    }}
-            />
+                    isVisible={true}
+                />
+            </div>
             <TerminalKeyboard
                 onSendInput={handleKeyboardInput}
             />