Add copy and paste shortcuts to trackpad toolbar

Author: Nakshatra Sharma

src/components/Trackpad/ControlBar.tsx

@@ -10,6 +10,8 @@ interface ControlBarProps {
 	onRightClick: () => void;
 	onKeyboardToggle: () => void;
 	onModifierToggle: () => void;
+	onCopy: () => void;
+	onPaste: () => void;
 }
 
 export const ControlBar: React.FC<ControlBarProps> = ({
@@ -21,6 +23,8 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 	onRightClick,
 	onKeyboardToggle,
 	onModifierToggle,
+	onCopy,
+	onPaste,
 }) => {
 	const handleInteraction = (e: React.PointerEvent, action: () => void) => {
 		e.preventDefault();
@@ -62,11 +66,13 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 			</button>
 			<button
 				className="btn btn-sm btn-outline"
+				onPointerDown={(e) => handleInteraction(e, onCopy)}
 			>
 				Copy
 			</button>
 			<button
 				className="btn btn-sm btn-outline"
+				onPointerDown={(e) => handleInteraction(e, onPaste)}
 			>
 				Paste
 			</button>
@@ -98,4 +104,4 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 			</button>
 		</div>
 	);
-};
+};

src/hooks/useRemoteConnection.ts

@@ -70,7 +70,7 @@ export const useRemoteConnection = () => {
         }
     }, []);
 
-    const sendCombo = useCallback((msg: string[]) => {
+    const sendCombo = useCallback((msg: readonly string[]) => {
         if (wsRef.current?.readyState === WebSocket.OPEN) {
             wsRef.current.send(JSON.stringify({
                 type: "combo",

src/routes/trackpad.tsx

@@ -12,21 +12,24 @@ export const Route = createFileRoute('/trackpad')({
     component: TrackpadPage,
 })
 
+const COPY_COMBO = ["control", "c"] as const;
+const PASTE_COMBO = ["control", "v"] as const;
+
 function TrackpadPage() {
     const [scrollMode, setScrollMode] = useState(false);
     const [modifier, setModifier] = useState<ModifierState>("Release");
     const [buffer, setBuffer] = useState<string[]>([]);
     const bufferText = buffer.join(" + ");
     const hiddenInputRef = useRef<HTMLInputElement>(null);
     const isComposingRef = useRef(false);
-    
+
     // Load Client Settings
     const [sensitivity] = useState(() => {
         if (typeof window === 'undefined') return 1.0;
         const s = localStorage.getItem('rein_sensitivity');
         return s ? parseFloat(s) : 1.0;
     });
-    
+
     const [invertScroll] = useState(() => {
         if (typeof window === 'undefined') return false;
         const s = localStorage.getItem('rein_invert');
@@ -49,7 +52,7 @@ function TrackpadPage() {
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const key = e.key.toLowerCase();
-        
+
         if (modifier !== "Release") {
             if (key === 'backspace') {
                 e.preventDefault();
@@ -76,7 +79,7 @@ function TrackpadPage() {
     };
 
     const handleModifierState = () => {
-        switch(modifier){
+        switch (modifier) {
             case "Active":
                 if (buffer.length > 0) {
                     setModifier("Hold");
@@ -97,7 +100,7 @@ function TrackpadPage() {
 
     const handleModifier = (key: string) => {
         console.log(`handleModifier called with key: ${key}, current modifier: ${modifier}, buffer:`, buffer);
-        
+
         if (modifier === "Hold") {
             const comboKeys = [...buffer, key];
             console.log(`Sending combo:`, comboKeys);
@@ -139,7 +142,7 @@ function TrackpadPage() {
             // Don't send text during modifier mode
             if (modifier !== "Release") {
                 handleModifier(val);
-            }else{
+            } else {
                 sendText(val);
             }
             (e.target as HTMLInputElement).value = '';
@@ -177,6 +180,8 @@ function TrackpadPage() {
                 onRightClick={() => handleClick('right')}
                 onKeyboardToggle={focusInput}
                 onModifierToggle={handleModifierState}
+                onCopy={() => sendCombo(COPY_COMBO)}
+                onPaste={() => sendCombo(PASTE_COMBO)}
             />
 
             {/* Extra Keys */}