From 97c7500487e8a8da6cf3b27ff749f0a79875cdca Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 00:13:23 -0500
Subject: [PATCH 01/10] Add vibration to keyboard

---
 src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 68c40217..35f42222 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -90,6 +90,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
             input = `\x1b${input}`;
         }
 
+        navigator.vibrate(20)
         onSendInput(input);
     };
 
-- 
2.49.1


From 198a5c2796aaa51c245026fa4a05e4cab21918a7 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 00:24:20 -0500
Subject: [PATCH 02/10] Fix keyboard keys

---
 src/ui/Mobile/Apps/Terminal/Terminal.tsx      |  11 ++
 .../Mobile/Apps/Terminal/TerminalKeyboard.tsx | 184 +++++++++---------
 2 files changed, 100 insertions(+), 95 deletions(-)

diff --git a/src/ui/Mobile/Apps/Terminal/Terminal.tsx b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
index af0c9c80..1739b9f2 100644
--- a/src/ui/Mobile/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
@@ -105,6 +105,17 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
             textarea.setAttribute("readonly", "true");
             textarea.setAttribute("inputmode", "none");
             textarea.style.caretColor = "transparent";
+
+            const preventKeyboard = () => {
+                textarea.blur();
+            };
+
+            textarea.addEventListener('focus', preventKeyboard);
+            textarea.blur(); // Initial blur
+
+            return () => {
+                textarea.removeEventListener('focus', preventKeyboard);
+            };
         }
     }, [terminal]);
 
diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 35f42222..24a95178 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useCallback} from "react";
 import Keyboard from "react-simple-keyboard";
 import "react-simple-keyboard/build/css/index.css";
 import "./kb-dark-theme.css";
@@ -12,29 +12,35 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
     const [isCtrl, setIsCtrl] = useState(false);
     const [isAlt, setIsAlt] = useState(false);
 
-    const onKeyPress = async (button: string) => {
-        if (button === "{shift}") {
-            setLayoutName("shift");
+    const handlePaste = useCallback(async () => {
+        if (navigator.clipboard?.readText) {
+            try {
+                const text = await navigator.clipboard.readText();
+                if (text) {
+                    onSendInput(text);
+                }
+            } catch (err) {
+                console.error("Failed to read clipboard:", err);
+            }
+        }
+    }, [onSendInput]);
+
+    const onKeyPress = useCallback((button: string) => {
+        const layoutMap: { [key: string]: string } = {
+            "{shift}": "shift",
+            "{unshift}": "default",
+            "{symbols}": "symbols",
+            "{fn}": "fn",
+            "{abc}": "default",
+        };
+
+        if (layoutMap[button]) {
+            setLayoutName(layoutMap[button]);
             return;
         }
-        if (button === "{unshift}") {
-            setLayoutName("default");
-            return;
-        }
-        if (button === "{more}") {
-            setLayoutName("more");
-            return;
-        }
-        if (button === "{less}") {
-            setLayoutName("default");
-            return;
-        }
-        if (button === "{hide}") {
-            setLayoutName("hide");
-            return;
-        }
-        if (button === "{unhide}") {
-            setLayoutName("default");
+
+        if (button === "{paste}") {
+            handlePaste();
             return;
         }
 
@@ -42,25 +48,12 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
             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 } = {
@@ -80,6 +73,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         if (isCtrl) {
             if (input.length === 1) {
                 const charCode = input.toUpperCase().charCodeAt(0);
+                // @, A-Z, [, \, ], ^, _
                 if (charCode >= 64 && charCode <= 95) {
                     input = String.fromCharCode(charCode - 64);
                 }
@@ -90,9 +84,9 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
             input = `\x1b${input}`;
         }
 
-        navigator.vibrate(20)
+        navigator.vibrate(20);
         onSendInput(input);
-    };
+    }, [isCtrl, isAlt, onSendInput, handlePaste]);
 
     const buttonTheme = [
         {
@@ -102,10 +96,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         {
             class: "hg-space-medium",
             buttons: "{enter} {backspace}",
-        },
-        {
-            class: "hg-space-small",
-            buttons: "{hide} {less} {more}",
         }
     ];
 
@@ -116,67 +106,71 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         buttonTheme.push({class: "key-active", buttons: "{alt}"});
     }
 
+    const layout = {
+        default: [
+            "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}",
+            "{symbols} {ctrl} {alt} {space} {enter}",
+        ],
+        shift: [
+            "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}",
+            "{symbols} {ctrl} {alt} {space} {enter}",
+        ],
+        symbols: [
+            "1 2 3 4 5 6 7 8 9 0",
+            "! @ # $ % ^ & * ( )",
+            "- _ = + [ ] { } \\ |",
+            "~ ` ' \" ; : , . / < > ?",
+            "{abc} {fn} {space} {backspace}",
+        ],
+        fn: [
+            "F1 F2 F3 F4 F5 F6",
+            "F7 F8 F9 F10 F11 F12",
+            "{esc} {tab} {home} {end}",
+            "{pgUp} {pgDn} {arrowUp} {arrowDown}",
+            "{abc} {arrowLeft} {arrowRight} {paste} {backspace}",
+        ]
+    };
+
+    const display = {
+        "{shift}": "⇧",
+        "{unshift}": "⇧",
+        "{backspace}": "⌫",
+        "{symbols}": "?123",
+        "{abc}": "abc",
+        "{fn}": "Fn",
+        "{space}": "space",
+        "{enter}": "enter",
+        "{arrowLeft}": "←",
+        "{arrowRight}": "→",
+        "{arrowUp}": "↑",
+        "{arrowDown}": "↓",
+        "{esc}": "esc",
+        "{tab}": "tab",
+        "{ctrl}": "ctrl",
+        "{alt}": "alt",
+        "{paste}": "paste",
+        "{end}": "end",
+        "{home}": "home",
+        "{pgUp}": "pgUp",
+        "{pgDn}": "pgDn",
+    };
+
     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: [
-                        "{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: [
-                        "{unhide}"
-                    ]
-                }}
+                layout={layout}
                 layoutName={layoutName}
                 onKeyPress={onKeyPress}
-                display={{
-                    "{shift}": "up",
-                    "{unshift}": "dn",
-                    "{backspace}": "back",
-                    "{more}": "more",
-                    "{less}": "less",
-                    "{space}": "space",
-                    "{enter}": "enter",
-                    "{arrowLeft}": "←",
-                    "{arrowRight}": "→",
-                    "{arrowUp}": "↑",
-                    "{arrowDown}": "↓",
-                    "{hide}": "hide",
-                    "{unhide}": "unhide",
-                    "{esc}": "esc",
-                    "{tab}": "tab",
-                    "{ctrl}": "ctrl",
-                    "{alt}": "alt",
-                    "{paste}": "paste",
-                    "{end}": "end",
-                    "{home}": "home",
-                    "{pgUp}": "pgUp",
-                    "{pgDn}": "pgDn",
-                }}
+                display={display}
                 theme={"hg-theme-default dark-theme"}
                 useTouchEvents={true}
+                disableButtonHold={true}
                 buttonTheme={buttonTheme}
             />
         </div>
     );
-}
+}
\ No newline at end of file
-- 
2.49.1


From 53a319244351fd33dd8158e113eb835d36a2dce4 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 00:31:36 -0500
Subject: [PATCH 03/10] Fix keyboard keys

---
 .../Mobile/Apps/Terminal/TerminalKeyboard.tsx | 164 ++++++++++--------
 1 file changed, 91 insertions(+), 73 deletions(-)

diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 24a95178..40f19ddf 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -20,27 +20,34 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                     onSendInput(text);
                 }
             } catch (err) {
-                console.error("Failed to read clipboard:", err);
+                console.error("Paste failed:", err);
             }
         }
     }, [onSendInput]);
 
     const onKeyPress = useCallback((button: string) => {
-        const layoutMap: { [key: string]: string } = {
-            "{shift}": "shift",
-            "{unshift}": "default",
-            "{symbols}": "symbols",
-            "{fn}": "fn",
-            "{abc}": "default",
-        };
-
-        if (layoutMap[button]) {
-            setLayoutName(layoutMap[button]);
+        if (button === "{shift}") {
+            setLayoutName("shift");
             return;
         }
-
-        if (button === "{paste}") {
-            handlePaste();
+        if (button === "{unshift}") {
+            setLayoutName("default");
+            return;
+        }
+        if (button === "{more}") {
+            setLayoutName("more");
+            return;
+        }
+        if (button === "{less}") {
+            setLayoutName("default");
+            return;
+        }
+        if (button === "{hide}") {
+            setLayoutName("hide");
+            return;
+        }
+        if (button === "{unhide}") {
+            setLayoutName("default");
             return;
         }
 
@@ -48,12 +55,16 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
             setIsCtrl(prev => !prev);
             return;
         }
-
         if (button === "{alt}") {
             setIsAlt(prev => !prev);
             return;
         }
 
+        if (button === "{paste}") {
+            handlePaste();
+            return;
+        }
+
         let input = button;
 
         const specialKeyMap: { [key: string]: string } = {
@@ -73,7 +84,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         if (isCtrl) {
             if (input.length === 1) {
                 const charCode = input.toUpperCase().charCodeAt(0);
-                // @, A-Z, [, \, ], ^, _
                 if (charCode >= 64 && charCode <= 95) {
                     input = String.fromCharCode(charCode - 64);
                 }
@@ -84,9 +94,16 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
             input = `\x1b${input}`;
         }
 
-        navigator.vibrate(20);
+        try {
+            if (navigator.vibrate) {
+                navigator.vibrate(20);
+            }
+        } catch (e) {
+            console.error("Vibration failed:", e);
+        }
+
         onSendInput(input);
-    }, [isCtrl, isAlt, onSendInput, handlePaste]);
+    }, [onSendInput, handlePaste, isCtrl, isAlt]);
 
     const buttonTheme = [
         {
@@ -96,6 +113,10 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         {
             class: "hg-space-medium",
             buttons: "{enter} {backspace}",
+        },
+        {
+            class: "hg-space-small",
+            buttons: "{hide} {less} {more}",
         }
     ];
 
@@ -106,66 +127,63 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         buttonTheme.push({class: "key-active", buttons: "{alt}"});
     }
 
-    const layout = {
-        default: [
-            "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}",
-            "{symbols} {ctrl} {alt} {space} {enter}",
-        ],
-        shift: [
-            "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}",
-            "{symbols} {ctrl} {alt} {space} {enter}",
-        ],
-        symbols: [
-            "1 2 3 4 5 6 7 8 9 0",
-            "! @ # $ % ^ & * ( )",
-            "- _ = + [ ] { } \\ |",
-            "~ ` ' \" ; : , . / < > ?",
-            "{abc} {fn} {space} {backspace}",
-        ],
-        fn: [
-            "F1 F2 F3 F4 F5 F6",
-            "F7 F8 F9 F10 F11 F12",
-            "{esc} {tab} {home} {end}",
-            "{pgUp} {pgDn} {arrowUp} {arrowDown}",
-            "{abc} {arrowLeft} {arrowRight} {paste} {backspace}",
-        ]
-    };
-
-    const display = {
-        "{shift}": "⇧",
-        "{unshift}": "⇧",
-        "{backspace}": "⌫",
-        "{symbols}": "?123",
-        "{abc}": "abc",
-        "{fn}": "Fn",
-        "{space}": "space",
-        "{enter}": "enter",
-        "{arrowLeft}": "←",
-        "{arrowRight}": "→",
-        "{arrowUp}": "↑",
-        "{arrowDown}": "↓",
-        "{esc}": "esc",
-        "{tab}": "tab",
-        "{ctrl}": "ctrl",
-        "{alt}": "alt",
-        "{paste}": "paste",
-        "{end}": "end",
-        "{home}": "home",
-        "{pgUp}": "pgUp",
-        "{pgDn}": "pgDn",
-    };
-
     return (
         <div className="">
             <Keyboard
-                layout={layout}
+                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: [
+                        "{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: [
+                        "{unhide}"
+                    ]
+                }}
                 layoutName={layoutName}
                 onKeyPress={onKeyPress}
-                display={display}
+                display={{
+                    "{shift}": "up",
+                    "{unshift}": "dn",
+                    "{backspace}": "back",
+                    "{more}": "more",
+                    "{less}": "less",
+                    "{space}": "space",
+                    "{enter}": "enter",
+                    "{arrowLeft}": "←",
+                    "{arrowRight}": "→",
+                    "{arrowUp}": "↑",
+                    "{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}
                 disableButtonHold={true}
-- 
2.49.1


From bd8bd941f377e70bd273b47d6d2b02c1836cc98b Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 13:51:18 -0500
Subject: [PATCH 04/10] Fix keyboard keys

---
 .../Mobile/Apps/Navigation/BottomNavbar.tsx   | 58 ++++++++++---------
 .../Mobile/Apps/Terminal/TerminalKeyboard.tsx |  2 +-
 src/ui/Mobile/MobileApp.tsx                   |  1 +
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx b/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
index 82c9b7aa..414dd2a2 100644
--- a/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
+++ b/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
@@ -11,34 +11,36 @@ export function BottomNavbar({onSidebarOpenClick}: MenuProps) {
     const {tabs, currentTab, setCurrentTab, removeTab} = useTabs();
 
     return (
-        <div className="w-full h-[80px] bg-[#18181B] flex items-center p-2 gap-2">
-            <Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
-                <Menu/>
-            </Button>
-            <div className="flex-1 overflow-x-auto whitespace-nowrap thin-scrollbar">
-                <div className="inline-flex gap-2">
-                    {tabs.map(tab => (
-                        <div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
-                            <Button
-                                variant="outline"
-                                className={cn(
-                                    "h-10 rounded-r-none !px-3 border-1 border-[#303032]",
-                                    tab.id === currentTab && '!bg-[#09090b] !text-white'
-                                )}
-                                onClick={() => setCurrentTab(tab.id)}
-                            >
-                                <TerminalIcon className="mr-1 h-4 w-4"/>
-                                {tab.title}
-                            </Button>
-                            <Button
-                                variant="outline"
-                                className="h-10 rounded-l-none !px-2 border-1 border-[#303032]"
-                                onClick={() => removeTab(tab.id)}
-                            >
-                                <X className="h-4 w-4"/>
-                            </Button>
-                        </div>
-                    ))}
+        <div className="w-full h-[60px] bg-[#18181B] items-center p-2">
+            <div className="flex gap-2 mb-1">
+                <Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
+                    <Menu/>
+                </Button>
+                <div className="flex-1 overflow-x-auto whitespace-nowrap thin-scrollbar">
+                    <div className="inline-flex gap-2">
+                        {tabs.map(tab => (
+                            <div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
+                                <Button
+                                    variant="outline"
+                                    className={cn(
+                                        "h-10 rounded-r-none !px-3 border-1 border-[#303032]",
+                                        tab.id === currentTab && '!bg-[#09090b] !text-white'
+                                    )}
+                                    onClick={() => setCurrentTab(tab.id)}
+                                >
+                                    <TerminalIcon className="mr-1 h-4 w-4"/>
+                                    {tab.title}
+                                </Button>
+                                <Button
+                                    variant="outline"
+                                    className="h-10 rounded-l-none !px-2 border-1 border-[#303032]"
+                                    onClick={() => removeTab(tab.id)}
+                                >
+                                    <X className="h-4 w-4"/>
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 40f19ddf..788fe916 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -128,7 +128,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
     }
 
     return (
-        <div className="">
+        <div className="z-10">
             <Keyboard
                 layout={{
                     default: [
diff --git a/src/ui/Mobile/MobileApp.tsx b/src/ui/Mobile/MobileApp.tsx
index 0074f4e4..de5b8de1 100644
--- a/src/ui/Mobile/MobileApp.tsx
+++ b/src/ui/Mobile/MobileApp.tsx
@@ -146,6 +146,7 @@ const AppContent: FC = () => {
                 )}
             </div>
             {currentTab && <TerminalKeyboard onSendInput={handleKeyboardInput}/>}
+
             <BottomNavbar
                 onSidebarOpenClick={() => setIsSidebarOpen(true)}
             />
-- 
2.49.1


From ba3c60d00c81335be2a488537c561a78cafc25e4 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 15:06:20 -0500
Subject: [PATCH 05/10] Rename files, improve keyboard usability

---
 package-lock.json                             |  8 +++
 package.json                                  |  1 +
 src/ui/Mobile/Apps/Terminal/Terminal.tsx      | 52 ++++++++++++++++---
 .../Mobile/Apps/Terminal/TerminalKeyboard.tsx |  4 +-
 src/ui/Mobile/Apps/Terminal/kb-dark-theme.css |  2 +-
 src/ui/Mobile/MobileApp.tsx                   | 21 ++++++--
 .../{Apps => }/Navigation/BottomNavbar.tsx    |  8 +--
 .../Navigation/Hosts/FolderCard.tsx           |  2 +-
 .../{Apps => }/Navigation/Hosts/Host.tsx      |  2 +-
 .../{Apps => }/Navigation/LeftSidebar.tsx     |  2 +-
 .../{Apps => }/Navigation/Tabs/TabContext.tsx |  0
 11 files changed, 81 insertions(+), 21 deletions(-)
 rename src/ui/Mobile/{Apps => }/Navigation/BottomNavbar.tsx (89%)
 rename src/ui/Mobile/{Apps => }/Navigation/Hosts/FolderCard.tsx (97%)
 rename src/ui/Mobile/{Apps => }/Navigation/Hosts/Host.tsx (97%)
 rename src/ui/Mobile/{Apps => }/Navigation/LeftSidebar.tsx (99%)
 rename src/ui/Mobile/{Apps => }/Navigation/Tabs/TabContext.tsx (100%)

diff --git a/package-lock.json b/package-lock.json
index 44db4c5b..67eeab74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,7 @@
         "tailwind-merge": "^3.3.1",
         "validator": "^13.15.15",
         "ws": "^8.18.3",
+        "xterm": "^5.3.0",
         "zod": "^4.0.5"
       },
       "devDependencies": {
@@ -10830,6 +10831,13 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/xterm": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+      "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+      "deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
+      "license": "MIT"
+    },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
diff --git a/package.json b/package.json
index f25526da..74f44274 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "tailwind-merge": "^3.3.1",
     "validator": "^13.15.15",
     "ws": "^8.18.3",
+    "xterm": "^5.3.0",
     "zod": "^4.0.5"
   },
   "devDependencies": {
diff --git a/src/ui/Mobile/Apps/Terminal/Terminal.tsx b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
index 1739b9f2..3440dad6 100644
--- a/src/ui/Mobile/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
@@ -29,6 +29,7 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
     const lastSentSizeRef = useRef<{ cols: number; rows: number } | null>(null);
     const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
     const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const overlayTextareaRef = useRef<HTMLTextAreaElement | null>(null);
     const DEBOUNCE_MS = 140;
 
     useEffect(() => {
@@ -111,7 +112,7 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
             };
 
             textarea.addEventListener('focus', preventKeyboard);
-            textarea.blur(); // Initial blur
+            textarea.blur();
 
             return () => {
                 textarea.removeEventListener('focus', preventKeyboard);
@@ -119,6 +120,27 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
         }
     }, [terminal]);
 
+    function syncOverlay() {
+        if (!terminal || !overlayTextareaRef.current) return;
+        const buffer = terminal.buffer.active;
+        let text = "";
+        for (let i = 0; i < buffer.length; i++) {
+            text += buffer.getLine(i)?.translateToString() + "\n";
+        }
+        overlayTextareaRef.current.value = text;
+    }
+
+    useEffect(() => {
+        if (!terminal) return;
+        syncOverlay();
+
+        const disposeRender = terminal.onRender(() => syncOverlay());
+
+        return () => {
+            disposeRender.dispose();
+        };
+    }, [terminal]);
+
     function handleWindowResize() {
         if (!isVisibleRef.current) return;
         fitAddonRef.current?.fit();
@@ -169,7 +191,7 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
         if (!terminal || !xtermRef.current || !hostConfig) return;
 
         terminal.options = {
-            cursorBlink: true,
+            cursorBlink: false,
             cursorStyle: 'bar',
             scrollback: 10000,
             fontSize: 14,
@@ -184,6 +206,8 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
             fastScrollModifier: 'alt',
             fastScrollSensitivity: 5,
             allowProposedApi: true,
+            disableStdin: true,
+            cursorInactiveStyle: "bar",
         };
 
         const fitAddon = new FitAddon();
@@ -276,10 +300,26 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
 
     return (
         <div
-            ref={xtermRef}
-            className="h-full w-full m-1"
-            style={{opacity: visible && isVisible ? 1 : 0, overflow: 'hidden'}}
-        />
+            className="h-full w-full m-1 relative"
+            style={{ opacity: visible && isVisible ? 1 : 0 }}
+        >
+            <div ref={xtermRef} className="h-full w-full" />
+
+            <textarea
+                ref={overlayTextareaRef}
+                readOnly
+                className="absolute top-0 left-0 w-full h-full"
+                style={{
+                    opacity: 0.01,
+                    cursor: "text",
+                    background: "none",
+                    border: "none",
+                    resize: "none",
+                    userSelect: "text",
+                    WebkitUserSelect: "text",
+                }}
+            />
+        </div>
     );
 });
 
diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 788fe916..2eb0baf8 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -116,7 +116,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         },
         {
             class: "hg-space-small",
-            buttons: "{hide} {less} {more}",
+            buttons: "{hide} {unhide} {less} {more}",
         }
     ];
 
@@ -149,7 +149,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                         "{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}",
diff --git a/src/ui/Mobile/Apps/Terminal/kb-dark-theme.css b/src/ui/Mobile/Apps/Terminal/kb-dark-theme.css
index 9e8a4908..213d48ca 100644
--- a/src/ui/Mobile/Apps/Terminal/kb-dark-theme.css
+++ b/src/ui/Mobile/Apps/Terminal/kb-dark-theme.css
@@ -32,7 +32,7 @@
 }
 
 .hg-space-medium {
-    width: 60px;
+    width: 70px;
 }
 
 .hg-space-small {
diff --git a/src/ui/Mobile/MobileApp.tsx b/src/ui/Mobile/MobileApp.tsx
index de5b8de1..ed90a6cc 100644
--- a/src/ui/Mobile/MobileApp.tsx
+++ b/src/ui/Mobile/MobileApp.tsx
@@ -1,9 +1,9 @@
 import React, {useRef, FC, useState, useEffect} from "react";
 import {Terminal} from "@/ui/Mobile/Apps/Terminal/Terminal.tsx";
 import {TerminalKeyboard} from "@/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx";
-import {BottomNavbar} from "@/ui/Mobile/Apps/Navigation/BottomNavbar.tsx";
-import {LeftSidebar} from "@/ui/Mobile/Apps/Navigation/LeftSidebar.tsx";
-import {TabProvider, useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
+import {BottomNavbar} from "@/ui/Mobile/Navigation/BottomNavbar.tsx";
+import {LeftSidebar} from "@/ui/Mobile/Navigation/LeftSidebar.tsx";
+import {TabProvider, useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";
 import {getUserInfo} from "@/ui/main-axios.ts";
 import {HomepageAuth} from "@/ui/Mobile/Homepage/HomepageAuth.tsx";
 
@@ -58,6 +58,14 @@ const AppContent: FC = () => {
         return () => window.removeEventListener('storage', handleStorageChange)
     }, [])
 
+    useEffect(() => {
+        const interval = setInterval(() => {
+            fitCurrentTerminal()
+        }, 2000);
+
+        return () => clearInterval(interval);
+    }, []);
+
     const handleAuthSuccess = (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => {
         setIsAuthenticated(true)
         setIsAdmin(authData.isAdmin)
@@ -145,8 +153,11 @@ const AppContent: FC = () => {
                     </div>
                 )}
             </div>
-            {currentTab && <TerminalKeyboard onSendInput={handleKeyboardInput}/>}
-
+            {currentTab &&
+                <div className="mb-1">
+                    <TerminalKeyboard onSendInput={handleKeyboardInput}/>
+                </div>
+            }
             <BottomNavbar
                 onSidebarOpenClick={() => setIsSidebarOpen(true)}
             />
diff --git a/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx b/src/ui/Mobile/Navigation/BottomNavbar.tsx
similarity index 89%
rename from src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
rename to src/ui/Mobile/Navigation/BottomNavbar.tsx
index 414dd2a2..b2fea2d9 100644
--- a/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
+++ b/src/ui/Mobile/Navigation/BottomNavbar.tsx
@@ -1,6 +1,6 @@
-import {Button} from "@/components/ui/button";
+import {Button} from "@/components/ui/button.tsx";
 import {Menu, X, Terminal as TerminalIcon} from "lucide-react";
-import {useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
+import {useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";
 import {cn} from "@/lib/utils.ts";
 
 interface MenuProps {
@@ -11,8 +11,8 @@ export function BottomNavbar({onSidebarOpenClick}: MenuProps) {
     const {tabs, currentTab, setCurrentTab, removeTab} = useTabs();
 
     return (
-        <div className="w-full h-[60px] bg-[#18181B] items-center p-2">
-            <div className="flex gap-2 mb-1">
+        <div className="w-full h-[50px] bg-[#18181B] items-center p-1">
+            <div className="flex gap-2 !mb-0.5">
                 <Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
                     <Menu/>
                 </Button>
diff --git a/src/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx b/src/ui/Mobile/Navigation/Hosts/FolderCard.tsx
similarity index 97%
rename from src/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx
rename to src/ui/Mobile/Navigation/Hosts/FolderCard.tsx
index 9e63ddbc..85c9e214 100644
--- a/src/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx
+++ b/src/ui/Mobile/Navigation/Hosts/FolderCard.tsx
@@ -3,7 +3,7 @@ import {CardTitle} from "@/components/ui/card.tsx";
 import {ChevronDown, Folder} from "lucide-react";
 import {Button} from "@/components/ui/button.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
-import {Host} from "@/ui/Mobile/Apps/Navigation/Hosts/Host.tsx";
+import {Host} from "@/ui/Mobile/Navigation/Hosts/Host.tsx";
 
 interface SSHHost {
     id: number;
diff --git a/src/ui/Mobile/Apps/Navigation/Hosts/Host.tsx b/src/ui/Mobile/Navigation/Hosts/Host.tsx
similarity index 97%
rename from src/ui/Mobile/Apps/Navigation/Hosts/Host.tsx
rename to src/ui/Mobile/Navigation/Hosts/Host.tsx
index 8145c7d8..bcbd2467 100644
--- a/src/ui/Mobile/Apps/Navigation/Hosts/Host.tsx
+++ b/src/ui/Mobile/Navigation/Hosts/Host.tsx
@@ -4,7 +4,7 @@ import {Button} from "@/components/ui/button.tsx";
 import {ButtonGroup} from "@/components/ui/button-group.tsx";
 import {Server, Terminal} from "lucide-react";
 import {getServerStatusById} from "@/ui/main-axios.ts";
-import {useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
+import {useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";
 
 interface SSHHost {
     id: number;
diff --git a/src/ui/Mobile/Apps/Navigation/LeftSidebar.tsx b/src/ui/Mobile/Navigation/LeftSidebar.tsx
similarity index 99%
rename from src/ui/Mobile/Apps/Navigation/LeftSidebar.tsx
rename to src/ui/Mobile/Navigation/LeftSidebar.tsx
index d98b968a..040d4711 100644
--- a/src/ui/Mobile/Apps/Navigation/LeftSidebar.tsx
+++ b/src/ui/Mobile/Navigation/LeftSidebar.tsx
@@ -10,7 +10,7 @@ import {Button} from "@/components/ui/button.tsx";
 import {ChevronUp, Menu, User2} from "lucide-react";
 import React, {useState, useEffect, useMemo, useCallback} from "react";
 import {Separator} from "@/components/ui/separator.tsx";
-import {FolderCard} from "@/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx";
+import {FolderCard} from "@/ui/Mobile/Navigation/Hosts/FolderCard.tsx";
 import {getSSHHosts} from "@/ui/main-axios.ts";
 import {useTranslation} from "react-i18next";
 import {Input} from "@/components/ui/input.tsx";
diff --git a/src/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx b/src/ui/Mobile/Navigation/Tabs/TabContext.tsx
similarity index 100%
rename from src/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx
rename to src/ui/Mobile/Navigation/Tabs/TabContext.tsx
-- 
2.49.1


From 420d57c6f108bb8ddbc0e19d81b9602d2e9f337a Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 16:20:49 -0500
Subject: [PATCH 06/10] Improve keyboard view and fix various issues with it

---
 src/index.css                                 |  4 ++
 src/ui/Mobile/Apps/Terminal/Terminal.tsx      | 67 ++-----------------
 .../Mobile/Apps/Terminal/TerminalKeyboard.tsx | 23 +------
 src/ui/Mobile/MobileApp.tsx                   | 13 ++--
 src/ui/Mobile/Navigation/LeftSidebar.tsx      |  2 +-
 5 files changed, 20 insertions(+), 89 deletions(-)

diff --git a/src/index.css b/src/index.css
index 89185ec7..60f4db93 100644
--- a/src/index.css
+++ b/src/index.css
@@ -123,6 +123,10 @@
 }
 
 @layer base {
+    html, body {
+        height: 100%;
+    }
+
     * {
         @apply border-border outline-ring/50;
     }
diff --git a/src/ui/Mobile/Apps/Terminal/Terminal.tsx b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
index 3440dad6..11c78568 100644
--- a/src/ui/Mobile/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
@@ -98,49 +98,6 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
         return () => window.removeEventListener('resize', handleWindowResize);
     }, []);
 
-    useEffect(() => {
-        if (!terminal) return;
-
-        const textarea = (terminal as any)._core?._textarea as HTMLTextAreaElement | undefined;
-        if (textarea) {
-            textarea.setAttribute("readonly", "true");
-            textarea.setAttribute("inputmode", "none");
-            textarea.style.caretColor = "transparent";
-
-            const preventKeyboard = () => {
-                textarea.blur();
-            };
-
-            textarea.addEventListener('focus', preventKeyboard);
-            textarea.blur();
-
-            return () => {
-                textarea.removeEventListener('focus', preventKeyboard);
-            };
-        }
-    }, [terminal]);
-
-    function syncOverlay() {
-        if (!terminal || !overlayTextareaRef.current) return;
-        const buffer = terminal.buffer.active;
-        let text = "";
-        for (let i = 0; i < buffer.length; i++) {
-            text += buffer.getLine(i)?.translateToString() + "\n";
-        }
-        overlayTextareaRef.current.value = text;
-    }
-
-    useEffect(() => {
-        if (!terminal) return;
-        syncOverlay();
-
-        const disposeRender = terminal.onRender(() => syncOverlay());
-
-        return () => {
-            disposeRender.dispose();
-        };
-    }, [terminal]);
-
     function handleWindowResize() {
         if (!isVisibleRef.current) return;
         fitAddonRef.current?.fit();
@@ -300,26 +257,10 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
 
     return (
         <div
-            className="h-full w-full m-1 relative"
-            style={{ opacity: visible && isVisible ? 1 : 0 }}
-        >
-            <div ref={xtermRef} className="h-full w-full" />
-
-            <textarea
-                ref={overlayTextareaRef}
-                readOnly
-                className="absolute top-0 left-0 w-full h-full"
-                style={{
-                    opacity: 0.01,
-                    cursor: "text",
-                    background: "none",
-                    border: "none",
-                    resize: "none",
-                    userSelect: "text",
-                    WebkitUserSelect: "text",
-                }}
-            />
-        </div>
+            ref={xtermRef}
+            className="h-full w-full m-1"
+            style={{opacity: visible && isVisible ? 1 : 0, overflow: 'hidden'}}
+        />
     );
 });
 
diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 2eb0baf8..12f14e43 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -12,19 +12,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
     const [isCtrl, setIsCtrl] = useState(false);
     const [isAlt, setIsAlt] = useState(false);
 
-    const handlePaste = useCallback(async () => {
-        if (navigator.clipboard?.readText) {
-            try {
-                const text = await navigator.clipboard.readText();
-                if (text) {
-                    onSendInput(text);
-                }
-            } catch (err) {
-                console.error("Paste failed:", err);
-            }
-        }
-    }, [onSendInput]);
-
     const onKeyPress = useCallback((button: string) => {
         if (button === "{shift}") {
             setLayoutName("shift");
@@ -60,11 +47,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
             return;
         }
 
-        if (button === "{paste}") {
-            handlePaste();
-            return;
-        }
-
         let input = button;
 
         const specialKeyMap: { [key: string]: string } = {
@@ -103,7 +85,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
         }
 
         onSendInput(input);
-    }, [onSendInput, handlePaste, isCtrl, isAlt]);
+    }, [onSendInput, isCtrl, isAlt]);
 
     const buttonTheme = [
         {
@@ -151,7 +133,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                         "! @ # $ % ^ & * ( ) _ +",
                         "[ ] { } | \\ ; : ' \" , . / < >",
                         "F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
-                        "{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {paste} {backspace}",
+                        "{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {backspace}",
                         "{hide} {less} {space} {enter}",
                     ],
                     hide: [
@@ -178,7 +160,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                     "{tab}": "tab",
                     "{ctrl}": "ctrl",
                     "{alt}": "alt",
-                    "{paste}": "paste",
                     "{end}": "end",
                     "{home}": "home",
                     "{pgUp}": "pgUp",
diff --git a/src/ui/Mobile/MobileApp.tsx b/src/ui/Mobile/MobileApp.tsx
index ed90a6cc..ea622e97 100644
--- a/src/ui/Mobile/MobileApp.tsx
+++ b/src/ui/Mobile/MobileApp.tsx
@@ -134,7 +134,7 @@ const AppContent: FC = () => {
                 {tabs.map(tab => (
                     <div
                         key={tab.id}
-                        className="absolute inset-0"
+                        className="absolute inset-0 mb-2"
                         style={{
                             visibility: tab.id === currentTab ? 'visible' : 'hidden',
                             opacity: ready ? 1 : 0,
@@ -148,13 +148,18 @@ const AppContent: FC = () => {
                     </div>
                 ))}
                 {tabs.length === 0 && (
-                    <div className="flex items-center justify-center h-full text-white">
-                        Select a host to start a terminal session.
+                    <div className="flex flex-col items-center justify-center h-full text-white gap-3 px-4 text-center">
+                        <h1 className="text-lg font-semibold">
+                            Select a host to start your terminal session
+                        </h1>
+                        <p className="text-sm text-gray-300 max-w-xs">
+                            Mobile support is currently limited. A dedicated mobile app is coming soon to enhance your experience.
+                        </p>
                     </div>
                 )}
             </div>
             {currentTab &&
-                <div className="mb-1">
+                <div className="mb-1 z-10">
                     <TerminalKeyboard onSendInput={handleKeyboardInput}/>
                 </div>
             }
diff --git a/src/ui/Mobile/Navigation/LeftSidebar.tsx b/src/ui/Mobile/Navigation/LeftSidebar.tsx
index 040d4711..0da6c3d2 100644
--- a/src/ui/Mobile/Navigation/LeftSidebar.tsx
+++ b/src/ui/Mobile/Navigation/LeftSidebar.tsx
@@ -153,7 +153,7 @@ export function LeftSidebar({isSidebarOpen, setIsSidebarOpen, onHostConnect, dis
                     </SidebarHeader>
                     <Separator/>
                     <SidebarContent className="px-2 py-2">
-                        <div className="!bg-[#222225] rounded-lg mb-2">
+                        <div className="!bg-[#222225] rounded-lg">
                             <Input
                                 value={search}
                                 onChange={e => setSearch(e.target.value)}
-- 
2.49.1


From bf879926871f807c87fb715bb6c6dacac25ed00b Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 16:48:54 -0500
Subject: [PATCH 07/10] Add mobile chinese translation

---
 public/locales/en/translation.json | 6 +++++-
 public/locales/zh/translation.json | 6 +++++-
 src/ui/Mobile/MobileApp.tsx        | 8 +++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index d1d55c02..0003cbc5 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -208,7 +208,7 @@
     "downloadSample": "Download Sample",
     "formatGuide": "Format Guide",
     "uncategorized": "Uncategorized",
-    "confirmDelete": "Are you sure you want to delete \"{{name}}\"?",
+    "confirmDelete": "Are you sure you want to delete \"{{name}}\" ?",
     "failedToDeleteHost": "Failed to delete host",
     "jsonMustContainHosts": "JSON must contain a \"hosts\" array or be an array of hosts",
     "noHostsInJson": "No hosts found in JSON file",
@@ -810,5 +810,9 @@
     "invalidVerificationCode": "Invalid verification code",
     "failedToDisableTotp": "Failed to disable TOTP",
     "failedToGenerateBackupCodes": "Failed to generate backup codes"
+  },
+  "mobile": {
+    "selectHostToStart": "Select a host to start your terminal session",
+    "limitedSupportMessage": "Mobile support is currently limited. A dedicated mobile app is coming soon to enhance your experience."
   }
 }
\ No newline at end of file
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
index ed52f6fa..d5d6edab 100644
--- a/public/locales/zh/translation.json
+++ b/public/locales/zh/translation.json
@@ -614,7 +614,7 @@
     "firstUserMessage": "您是第一个用户，将被设为管理员。您可以在侧边栏用户下拉菜单中查看管理员设置。如果您认为这是错误，请检查 docker 日志，或创建",
     "external": "外部",
     "loginWithExternal": "使用外部提供商登录",
-    "loginWithExternalDesc": "使用您配置的外部身份提供商登录",
+    "loginWithExternalDesc": "使用您配置的外部身份提供者登录",
     "resetPasswordButton": "重置密码",
     "sendResetCode": "发送重置代码",
     "resetCodeDesc": "输入您的用户名以接收密码重置代码。代码将记录在 docker 容器日志中。",
@@ -852,5 +852,9 @@
     "invalidVerificationCode": "无效的验证码",
     "failedToDisableTotp": "禁用 TOTP 失败",
     "failedToGenerateBackupCodes": "生成备用码失败"
+  },
+  "mobile": {
+    "selectHostToStart": "选择一个主机以开始您的终端会话",
+    "limitedSupportMessage": "移动端支持目前有限。我们即将推出专门的移动应用以提升您的体验。"
   }
 }
\ No newline at end of file
diff --git a/src/ui/Mobile/MobileApp.tsx b/src/ui/Mobile/MobileApp.tsx
index ea622e97..6ea27af8 100644
--- a/src/ui/Mobile/MobileApp.tsx
+++ b/src/ui/Mobile/MobileApp.tsx
@@ -6,6 +6,7 @@ import {LeftSidebar} from "@/ui/Mobile/Navigation/LeftSidebar.tsx";
 import {TabProvider, useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";
 import {getUserInfo} from "@/ui/main-axios.ts";
 import {HomepageAuth} from "@/ui/Mobile/Homepage/HomepageAuth.tsx";
+import {useTranslation} from "react-i18next";
 
 function getCookie(name: string) {
     return document.cookie.split('; ').reduce((r, v) => {
@@ -15,6 +16,7 @@ function getCookie(name: string) {
 }
 
 const AppContent: FC = () => {
+    const {t} = useTranslation();
     const {tabs, currentTab, getTab} = useTabs();
     const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
     const [ready, setReady] = React.useState(true);
@@ -103,7 +105,7 @@ const AppContent: FC = () => {
     if (authLoading) {
         return (
             <div className="h-screen w-screen flex items-center justify-center bg-[#09090b]">
-                <p className="text-white">Loading...</p>
+                <p className="text-white">{t('common.loading')}</p>
             </div>
         )
     }
@@ -150,10 +152,10 @@ const AppContent: FC = () => {
                 {tabs.length === 0 && (
                     <div className="flex flex-col items-center justify-center h-full text-white gap-3 px-4 text-center">
                         <h1 className="text-lg font-semibold">
-                            Select a host to start your terminal session
+                            {t('mobile.selectHostToStart')}
                         </h1>
                         <p className="text-sm text-gray-300 max-w-xs">
-                            Mobile support is currently limited. A dedicated mobile app is coming soon to enhance your experience.
+                            {t('mobile.limitedSupportMessage')}
                         </p>
                     </div>
                 )}
-- 
2.49.1


From a39539b89cd5e538ba2fc38720ab8d11898ea9e3 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 16:53:42 -0500
Subject: [PATCH 08/10] Disable OS keyboard from appearing

---
 src/ui/Mobile/Apps/Terminal/Terminal.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ui/Mobile/Apps/Terminal/Terminal.tsx b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
index 11c78568..e6f75cd9 100644
--- a/src/ui/Mobile/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
@@ -29,7 +29,6 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
     const lastSentSizeRef = useRef<{ cols: number; rows: number } | null>(null);
     const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
     const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
-    const overlayTextareaRef = useRef<HTMLTextAreaElement | null>(null);
     const DEBOUNCE_MS = 140;
 
     useEffect(() => {
@@ -179,6 +178,11 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
         terminal.loadAddon(webLinksAddon);
         terminal.open(xtermRef.current);
 
+        const textarea = xtermRef.current.querySelector('.xterm-helper-textarea');
+        if (textarea) {
+            textarea.setAttribute('readonly', 'true');
+        }
+
         const resizeObserver = new ResizeObserver(() => {
             if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
             resizeTimeout.current = setTimeout(() => {
-- 
2.49.1


From b04f6b3b60fa193af62be7a75c7a6ba75ac51406 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 17:03:50 -0500
Subject: [PATCH 09/10] Fix fit addon not resizing with "more" on keyboard

---
 src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx | 12 ++++++++++--
 src/ui/Mobile/MobileApp.tsx                      |  6 +++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
index 12f14e43..d93465ef 100644
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -1,17 +1,25 @@
-import React, {useState, useCallback} from "react";
+import React, {useState, useCallback, useEffect} from "react";
 import Keyboard from "react-simple-keyboard";
 import "react-simple-keyboard/build/css/index.css";
 import "./kb-dark-theme.css";
 
 interface TerminalKeyboardProps {
     onSendInput: (input: string) => void;
+    onLayoutChange: () => void;
 }
 
-export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
+export function TerminalKeyboard({onSendInput, onLayoutChange}: TerminalKeyboardProps) {
     const [layoutName, setLayoutName] = useState("default");
     const [isCtrl, setIsCtrl] = useState(false);
     const [isAlt, setIsAlt] = useState(false);
 
+    useEffect(() => {
+        if (onLayoutChange) {
+            const timeoutId = setTimeout(() => onLayoutChange(), 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [layoutName, onLayoutChange]);
+
     const onKeyPress = useCallback((button: string) => {
         if (button === "{shift}") {
             setLayoutName("shift");
diff --git a/src/ui/Mobile/MobileApp.tsx b/src/ui/Mobile/MobileApp.tsx
index 6ea27af8..9e417c5a 100644
--- a/src/ui/Mobile/MobileApp.tsx
+++ b/src/ui/Mobile/MobileApp.tsx
@@ -95,6 +95,10 @@ const AppContent: FC = () => {
 
     const closeSidebar = () => setIsSidebarOpen(false);
 
+    const handleKeyboardLayoutChange = () => {
+        fitCurrentTerminal();
+    }
+
     function handleKeyboardInput(input: string) {
         const currentTerminalTab = getTab(currentTab as number);
         if (currentTerminalTab && currentTerminalTab.terminalRef?.current?.sendInput) {
@@ -162,7 +166,7 @@ const AppContent: FC = () => {
             </div>
             {currentTab &&
                 <div className="mb-1 z-10">
-                    <TerminalKeyboard onSendInput={handleKeyboardInput}/>
+                    <TerminalKeyboard onSendInput={handleKeyboardInput} onLayoutChange={handleKeyboardLayoutChange}/>
                 </div>
             }
             <BottomNavbar
-- 
2.49.1


From 7421a695ee2fe6b2f102c2d8b1741d05200ecf53 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Sat, 6 Sep 2025 18:28:00 -0500
Subject: [PATCH 10/10] Disable OS keyboard on terminal load

---
 src/ui/Mobile/Apps/Terminal/Terminal.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/Mobile/Apps/Terminal/Terminal.tsx b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
index e6f75cd9..82944e52 100644
--- a/src/ui/Mobile/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
@@ -178,11 +178,14 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
         terminal.loadAddon(webLinksAddon);
         terminal.open(xtermRef.current);
 
-        const textarea = xtermRef.current.querySelector('.xterm-helper-textarea');
+        const textarea = xtermRef.current.querySelector('.xterm-helper-textarea') as HTMLTextAreaElement | null;
         if (textarea) {
-            textarea.setAttribute('readonly', 'true');
+            textarea.readOnly = true;
+            textarea.blur();
         }
 
+        terminal.focus = () => {};
+
         const resizeObserver = new ResizeObserver(() => {
             if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
             resizeTimeout.current = setTimeout(() => {
-- 
2.49.1