alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement one-shot modifier keys for mobile terminal

Browse Source 
- Redesign useSpecialKeys hook with modifier state tracking
- Add one-shot activation for Ctrl and Alt keys
- Visual feedback: active modifiers shown with yellow highlight
- Fix focusInput to use term.focus() instead of hidden input
- Always refocus terminal after sending any special key
- Add requestAnimationFrame for reliable focus restoration
This commit is contained in:
Fusion
2026-05-24 12:28:36 +02:00
parent 4f9aa7e3c2
commit 12378def4d
5 changed files with 121 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/special-keys-panel.tsx
+19 -6
View File
@@ -39,7 +39,7 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
onClose,
onKeepFocus,
}) => {
const { sendKey } = useSpecialKeys({ onSend });
const { sendKey, clearModifier } = useSpecialKeys({ onSend });
if (!isOpen) return null;
@@ -47,14 +47,29 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
e.preventDefault();
sendKey(key);
onClose();
onKeepFocus?.();
// Always refocus terminal after sending
requestAnimationFrame(() => {
onKeepFocus?.();
});
};
const handleOverlayPointerDown = (e: React.PointerEvent) => {
e.preventDefault();
clearModifier();
onClose();
requestAnimationFrame(() => {
onKeepFocus?.();
});
};
return (
<div className="special-keys-panel-overlay" onClick={onClose}>
<div
className="special-keys-panel-overlay"
onPointerDown={handleOverlayPointerDown}
>
<div
className="special-keys-panel"
onClick={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
<div className="special-keys-panel-section">
{EXPANDED_KEYS.map(({ key, label }) => (
@@ -62,7 +77,6 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
key={key}
className="special-key-button"
onPointerDown={(e) => handlePointerDown(e, key)}
onFocus={(e) => e.target.blur()}
type="button"
tabIndex={-1}
>
@@ -77,7 +91,6 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
key={key}
className="special-key-button"
onPointerDown={(e) => handlePointerDown(e, key)}
onFocus={(e) => e.target.blur()}
type="button"
tabIndex={-1}
>
apps/web/src/components/special-keys-strip.tsx
+17 -11
View File
@@ -1,5 +1,5 @@
import React from "react";
import { useSpecialKeys, type SpecialKey } from "../hooks/use-special-keys";
import { useSpecialKeys, type SpecialKey, type ModifierKey } from "../hooks/use-special-keys";
interface SpecialKeysStripProps {
onSend: (data: string) => void;
@@ -8,11 +8,11 @@ interface SpecialKeysStripProps {
onKeepFocus?: () => void;
}
const PRIMARY_KEYS: { key: SpecialKey; label: string }[] = [
const PRIMARY_KEYS: { key: SpecialKey; label: string; isModifier?: boolean }[] = [
{ key: "escape", label: "Esc" },
{ key: "tab", label: "Tab" },
{ key: "ctrl", label: "Ctrl" },
{ key: "alt", label: "Alt" },
{ key: "ctrl", label: "Ctrl", isModifier: true },
{ key: "alt", label: "Alt", isModifier: true },
{ key: "up", label: "↑" },
{ key: "down", label: "↓" },
{ key: "left", label: "←" },
@@ -25,31 +25,38 @@ export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
onMoreClick,
onKeepFocus,
}) => {
const { sendKey } = useSpecialKeys({ onSend });
const { sendKey, activeModifier } = useSpecialKeys({ onSend });
const handlePointerDown = (e: React.PointerEvent, key: SpecialKey) => {
e.preventDefault();
sendKey(key);
onKeepFocus?.();
// Always refocus terminal after sending
requestAnimationFrame(() => {
onKeepFocus?.();
});
};
const handleMorePointerDown = (e: React.PointerEvent) => {
e.preventDefault();
onMoreClick?.();
onKeepFocus?.();
requestAnimationFrame(() => {
onKeepFocus?.();
});
};
return (
<div className={`special-keys-strip ${isVisible ? "visible" : "hidden"}`}>
{PRIMARY_KEYS.map(({ key, label }) => (
{PRIMARY_KEYS.map(({ key, label, isModifier }) => (
<button
key={key}
className="special-key-button"
className={`special-key-button ${
isModifier && activeModifier === key ? "active-modifier" : ""
}`}
onPointerDown={(e) => handlePointerDown(e, key)}
onFocus={(e) => e.target.blur()}
type="button"
tabIndex={-1}
aria-label={`Send ${label}`}
aria-pressed={isModifier && activeModifier === key}
>
{label}
</button>
@@ -58,7 +65,6 @@ export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
<button
className="special-key-button special-key-more"
onPointerDown={handleMorePointerDown}
onFocus={(e) => e.target.blur()}
type="button"
tabIndex={-1}
aria-label="More special keys"
apps/web/src/components/terminal.tsx
+2 -2
View File
@@ -198,7 +198,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
}
};
const focusInput = () => {
hiddenInputRef.current?.focus();
termRef.current?.focus();
};
onTerminalReadyRef.current(sendData, status, focusInput);
}
@@ -230,7 +230,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
}
};
const focusInput = () => {
hiddenInputRef.current?.focus();
termRef.current?.focus();
};
onTerminalReady(sendData, status, focusInput);
}
apps/web/src/hooks/use-special-keys.ts
+75 -6
View File
@@ -1,4 +1,4 @@
import { useCallback } from "react";
import { useState, useCallback } from "react";
export type SpecialKey =
| "escape"
@@ -29,6 +29,8 @@ export type SpecialKey =
| "f11"
| "f12";
export type ModifierKey = "ctrl" | "alt";
const KEY_SEQUENCES: Record<SpecialKey, string> = {
escape: "\x1B",
tab: "\t",
@@ -59,22 +61,89 @@ const KEY_SEQUENCES: Record<SpecialKey, string> = {
f12: "\x1B[24~",
};
// Single character sequences with modifier prefixes
const MODIFIER_PREFIXES: Record<string, { ctrl: string; alt: string; ctrlAlt: string }> = {
// Letters
a: { ctrl: "\x01", alt: "\x1Ba", ctrlAlt: "\x1B\x01" },
b: { ctrl: "\x02", alt: "\x1Bb", ctrlAlt: "\x1B\x02" },
c: { ctrl: "\x03", alt: "\x1Bc", ctrlAlt: "\x1B\x03" },
d: { ctrl: "\x04", alt: "\x1Bd", ctrlAlt: "\x1B\x04" },
e: { ctrl: "\x05", alt: "\x1Be", ctrlAlt: "\x1B\x05" },
f: { ctrl: "\x06", alt: "\x1Bf", ctrlAlt: "\x1B\x06" },
g: { ctrl: "\x07", alt: "\x1Bg", ctrlAlt: "\x1B\x07" },
h: { ctrl: "\x08", alt: "\x1Bh", ctrlAlt: "\x1B\x08" },
i: { ctrl: "\x09", alt: "\x1Bi", ctrlAlt: "\x1B\x09" },
j: { ctrl: "\x0A", alt: "\x1Bj", ctrlAlt: "\x1B\x0A" },
k: { ctrl: "\x0B", alt: "\x1Bk", ctrlAlt: "\x1B\x0B" },
l: { ctrl: "\x0C", alt: "\x1Bl", ctrlAlt: "\x1B\x0C" },
m: { ctrl: "\x0D", alt: "\x1Bm", ctrlAlt: "\x1B\x0D" },
n: { ctrl: "\x0E", alt: "\x1Bn", ctrlAlt: "\x1B\x0E" },
o: { ctrl: "\x0F", alt: "\x1Bo", ctrlAlt: "\x1B\x0F" },
p: { ctrl: "\x10", alt: "\x1Bp", ctrlAlt: "\x1B\x10" },
q: { ctrl: "\x11", alt: "\x1Bq", ctrlAlt: "\x1B\x11" },
r: { ctrl: "\x12", alt: "\x1Br", ctrlAlt: "\x1B\x12" },
s: { ctrl: "\x13", alt: "\x1Bs", ctrlAlt: "\x1B\x13" },
t: { ctrl: "\x14", alt: "\x1Bt", ctrlAlt: "\x1B\x14" },
u: { ctrl: "\x15", alt: "\x1Bu", ctrlAlt: "\x1B\x15" },
v: { ctrl: "\x16", alt: "\x1Bv", ctrlAlt: "\x1B\x16" },
w: { ctrl: "\x17", alt: "\x1Bw", ctrlAlt: "\x1B\x17" },
x: { ctrl: "\x18", alt: "\x1Bx", ctrlAlt: "\x1B\x18" },
y: { ctrl: "\x19", alt: "\x1By", ctrlAlt: "\x1B\x19" },
z: { ctrl: "\x1A", alt: "\x1Bz", ctrlAlt: "\x1B\x1A" },
// Numbers
"0": { ctrl: "0", alt: "\x1B0", ctrlAlt: "\x1B0" },
"1": { ctrl: "1", alt: "\x1B1", ctrlAlt: "\x1B1" },
"2": { ctrl: "\x00", alt: "\x1B2", ctrlAlt: "\x1B\x00" },
"3": { ctrl: "\x1B", alt: "\x1B3", ctrlAlt: "\x1B\x1B" },
"4": { ctrl: "\x1C", alt: "\x1B4", ctrlAlt: "\x1B\x1C" },
"5": { ctrl: "\x1D", alt: "\x1B5", ctrlAlt: "\x1B\x1D" },
"6": { ctrl: "\x1E", alt: "\x1B6", ctrlAlt: "\x1B\x1E" },
"7": { ctrl: "\x1F", alt: "\x1B7", ctrlAlt: "\x1B\x1F" },
"8": { ctrl: "\x7F", alt: "\x1B8", ctrlAlt: "\x1B\x7F" },
"9": { ctrl: "9", alt: "\x1B9", ctrlAlt: "\x1B9" },
};
interface UseSpecialKeysOptions {
onSend: (data: string) => void;
}
export function useSpecialKeys({ onSend }: UseSpecialKeysOptions) {
const [activeModifier, setActiveModifier] = useState<ModifierKey | null>(null);
const sendKey = useCallback(
(key: SpecialKey) => {
const sequence = KEY_SEQUENCES[key];
if (sequence) {
onSend(sequence);
// Handle modifier keys (one-shot)
if (key === "ctrl" || key === "alt") {
// Toggle modifier
setActiveModifier((current) => (current === key ? null : key));
return;
}
const sequence = KEY_SEQUENCES[key];
if (!sequence) return;
// Check if we have an active modifier and the key is a single character
if (activeModifier && sequence.length === 1) {
const char = sequence;
const mapping = MODIFIER_PREFIXES[char.toLowerCase()];
if (mapping) {
onSend(mapping[activeModifier]);
setActiveModifier(null);
return;
}
}
onSend(sequence);
setActiveModifier(null);
},
[onSend]
[onSend, activeModifier]
);
return { sendKey };
const clearModifier = useCallback(() => {
setActiveModifier(null);
}, []);
return { sendKey, activeModifier, clearModifier };
}
export { KEY_SEQUENCES };
apps/web/src/styles.css
+8
View File
@@ -3119,6 +3119,14 @@ a.nav-item,
background: #1e5fa8;
}
.special-key-button.active-modifier {
background: #f5f543;
color: #1e1e1e;
border-color: #f5f543;
font-weight: 700;
box-shadow: 0 0 8px rgba(245, 245, 67, 0.5);
}
/* Special Keys Panel */
.special-keys-panel-overlay {
position: fixed;