Rename files, improve keyboard usability

2025-09-06 15:06:20 -05:00
parent bd8bd941f3
commit ba3c60d00c
11 changed files with 81 additions and 21 deletions
--- 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",
--- 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": {
--- 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>
    );
 });

--- 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}",
--- 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 {
--- 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)}
            />
--- a/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
+++ b/src/ui/Mobile/Apps/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>
--- a/src/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx
+++ b/src/ui/Mobile/Apps/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;
--- a/src/ui/Mobile/Apps/Navigation/Hosts/Host.tsx
+++ b/src/ui/Mobile/Apps/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;
--- a/src/ui/Mobile/Apps/Navigation/LeftSidebar.tsx
+++ b/src/ui/Mobile/Apps/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";
--- a/src/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx
+++ b/src/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx