b6bda3d692
- 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
69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
|
|
|
interface AutoHideOptions {
|
|
timeout?: number;
|
|
enabled?: boolean;
|
|
}
|
|
|
|
export function useAutoHide(options: AutoHideOptions = {}) {
|
|
const { timeout = 3000, enabled = true } = options;
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const lastInteractionRef = useRef(Date.now());
|
|
|
|
const show = useCallback(() => {
|
|
if (!enabled) return;
|
|
setIsVisible(true);
|
|
lastInteractionRef.current = Date.now();
|
|
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current);
|
|
}
|
|
|
|
timerRef.current = setTimeout(() => {
|
|
setIsVisible(false);
|
|
}, timeout);
|
|
}, [enabled, timeout]);
|
|
|
|
const hide = useCallback(() => {
|
|
if (!enabled) return;
|
|
setIsVisible(false);
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
}, [enabled]);
|
|
|
|
const toggle = useCallback(() => {
|
|
if (!enabled) return;
|
|
if (isVisible) {
|
|
hide();
|
|
} else {
|
|
show();
|
|
}
|
|
}, [enabled, isVisible, show, hide]);
|
|
|
|
useEffect(() => {
|
|
if (!enabled) {
|
|
setIsVisible(true);
|
|
return;
|
|
}
|
|
|
|
// Start the timer initially
|
|
show();
|
|
|
|
return () => {
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current);
|
|
}
|
|
};
|
|
}, [enabled, show]);
|
|
|
|
return {
|
|
isVisible,
|
|
show,
|
|
hide,
|
|
toggle,
|
|
};
|
|
}
|