Skip to content

Extra keys UI #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pranav-n29 wants to merge 3 commits into from
Closed

Extra keys UI #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84cbe52
chore: remove default TanStack logo asset
pranav-n29 Feb 2, 2026
1b78fc5
Replace default TanStack icons with Rein logo
pranav-n29 Feb 2, 2026
74e3fb7
Fix ExtraKeys UI layout order
pranav-n29 Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified public/logo192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/logo512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/tanstack-circle-logo.png
View file
Open in desktop
Binary file not shown.
1 change: 0 additions & 1 deletion public/tanstack-word-logo-white.svg
View file
Open in desktop

This file was deleted.

52 changes: 31 additions & 21 deletions src/components/Trackpad/ExtraKeys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,40 @@
import React from 'react';
import React from "react";

interface ExtraKeysProps {
sendKey: (key: string) => void;
onInputFocus: () => void;
sendKey: (key: string) => void;
onInputFocus: () => void;
}

const KEYS = ['Esc', 'Tab', 'Ctrl', 'Alt', 'Shift', 'Meta', 'Home', 'End', 'PgUp', 'PgDn', 'Del'];
const ROWS = [
["Esc", "Tab", "Backspace", "Delete"],
["Ctrl", "Alt", "Shift", "Meta", "Fn"],
["↑", "←", "↓", "→"],
["Play", "Prev", "Next", "Vol-", "Vol+"],
];

export const ExtraKeys: React.FC<ExtraKeysProps> = ({ sendKey, onInputFocus }) => {
const handleInteract = (e: React.PointerEvent, key: string) => {
e.preventDefault();
sendKey(key.toLowerCase());
onInputFocus();
};
const press = (e: React.PointerEvent, k: string) => {
e.preventDefault();
sendKey(k.toLowerCase());
onInputFocus();
};

return (
<div className="bg-base-300 p-2 overflow-x-auto whitespace-nowrap shrink-0 flex gap-2 hide-scrollbar">
{KEYS.map(k => (
<button
key={k}
className="btn btn-sm btn-neutral min-w-[3rem]"
onPointerDown={(e) => handleInteract(e, k)}
>
{k}
</button>
))}
return (
<div className="bg-base-300 p-2 flex flex-col gap-2 shrink-0">
{ROWS.map((row, i) => (
<div key={i} className="flex gap-2 justify-center">
{row.map(k => (
Comment on lines +24 to +26
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use a stable key for rows (avoid array index).
Line 25 uses the array index as a key, which can cause state glitches if rows ever reorder.

✅ Suggested fix 
-      {ROWS.map((row, i) => (
-        <div key={i} className="flex gap-2 justify-center">
+      {ROWS.map(row => (
+        <div key={row.join("|")} className="flex gap-2 justify-center">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{ROWS.map((row, i) => (
<div key={i} className="flex gap-2 justify-center">
{row.map(k => (
{ROWS.map(row => (
<div key={row.join("|")} className="flex gap-2 justify-center">
{row.map(k => (
🧰 Tools
🪛 Biome (2.3.13)

[error] 25-25: Avoid using the index of an array as key property in an element.

This is the source of the key value.

The order of the items may change, and this also affects performances and component state.
Check the React documentation.

(lint/suspicious/noArrayIndexKey)

🤖 Prompt for AI Agents 
In `@src/components/Trackpad/ExtraKeys.tsx` around lines 24 - 26, The row mapping
uses the array index as a React key which can cause state/order glitches; update
the JSX mapping over ROWS in ExtraKeys.tsx to use a stable unique identifier
instead of the index (e.g., a precomputed id on each row object or a
deterministic string from the row contents) so replace key={i} with something
like key={row.id} or key={row.map(k=>k.label).join('-')} while preserving the
existing ROWS constant and the inner row.map(k => ...) rendering.

<button
key={k}
className="btn btn-sm btn-neutral min-w-14
"
onPointerDown={e => press(e, k)}
>
{k}
Comment on lines +27 to +33
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add explicit button type to avoid accidental form submits.
Line 27-33 should set type="button" to prevent default submit behavior.

✅ Suggested fix 
             <button
               key={k}
+              type="button"
               className="btn btn-sm btn-neutral min-w-14
 "
               onPointerDown={e => press(e, k)}
             >
🧰 Tools
🪛 Biome (2.3.13)

[error] 27-33: Provide an explicit type prop for the button element.

The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset

(lint/a11y/useButtonType)

🤖 Prompt for AI Agents 
In `@src/components/Trackpad/ExtraKeys.tsx` around lines 27 - 33, The button in
the ExtraKeys component is missing an explicit type which can cause accidental
form submissions; update the JSX button element inside the ExtraKeys render (the
<button ... onPointerDown={e => press(e, k)}>) to include type="button" so each
key button does not act as a submit button; locate the button that uses the key
variable k and the press handler and add the type attribute.

</button>
))}
</div>
);
))}
</div>
);
};