feat: implement mobile terminal UX
- Add mobile viewport detection hook - Add virtual keyboard detection with fallback - Add auto-hide hook for header/keys strip - Add special keys mapping hook - Create MobileTerminalHeader, SpecialKeysStrip, SpecialKeysPanel components - Create MobileTerminalWrapper component - Update TerminalComponent with mobile support, font scaling, copy/paste, reconnection - Update AppShell to hide chrome on mobile terminal pages - Update TerminalPage to use MobileTerminalWrapper - Add comprehensive mobile terminal styles - TypeScript check passes - Build succeeds
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
import { useCallback } from "react";
|
||||
|
||||
export type SpecialKey =
|
||||
| "escape"
|
||||
| "tab"
|
||||
| "ctrl"
|
||||
| "alt"
|
||||
| "up"
|
||||
| "down"
|
||||
| "left"
|
||||
| "right"
|
||||
| "home"
|
||||
| "end"
|
||||
| "pageup"
|
||||
| "pagedown"
|
||||
| "ctrlc"
|
||||
| "ctrld"
|
||||
| "ctrlz"
|
||||
| "f1"
|
||||
| "f2"
|
||||
| "f3"
|
||||
| "f4"
|
||||
| "f5"
|
||||
| "f6"
|
||||
| "f7"
|
||||
| "f8"
|
||||
| "f9"
|
||||
| "f10"
|
||||
| "f11"
|
||||
| "f12";
|
||||
|
||||
const KEY_SEQUENCES: Record<SpecialKey, string> = {
|
||||
escape: "\x1B",
|
||||
tab: "\t",
|
||||
ctrl: "",
|
||||
alt: "",
|
||||
up: "\x1B[A",
|
||||
down: "\x1B[B",
|
||||
right: "\x1B[C",
|
||||
left: "\x1B[D",
|
||||
home: "\x1B[H",
|
||||
end: "\x1B[F",
|
||||
pageup: "\x1B[5~",
|
||||
pagedown: "\x1B[6~",
|
||||
ctrlc: "\x03",
|
||||
ctrld: "\x04",
|
||||
ctrlz: "\x1A",
|
||||
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~",
|
||||
};
|
||||
|
||||
interface UseSpecialKeysOptions {
|
||||
onSend: (data: string) => void;
|
||||
}
|
||||
|
||||
export function useSpecialKeys({ onSend }: UseSpecialKeysOptions) {
|
||||
const sendKey = useCallback(
|
||||
(key: SpecialKey) => {
|
||||
const sequence = KEY_SEQUENCES[key];
|
||||
if (sequence) {
|
||||
onSend(sequence);
|
||||
}
|
||||
},
|
||||
[onSend]
|
||||
);
|
||||
|
||||
return { sendKey };
|
||||
}
|
||||
|
||||
export { KEY_SEQUENCES };
|
||||
Reference in New Issue
Block a user