diff --git a/src/SidebarUI.jsx b/src/SidebarUI.jsx
index c1d1c54..2e4b1e9 100644
--- a/src/SidebarUI.jsx
+++ b/src/SidebarUI.jsx
@@ -61,6 +61,16 @@ const NAV_ITEMS = [
icon: ,
label: 'Contribute', sub: 'Help build CubeIt', href: 'https://github.com', comingSoon: true
},
+ {
+ icon: (
+
+ ),
+ label: 'Keyboard Shortcuts',
+ sub: 'View available shortcuts'
+},
{
icon: ,
label: 'Settings', sub: 'Customize your experience', comingSoon: true
@@ -68,7 +78,7 @@ const NAV_ITEMS = [
];
// History panel content (shared between desktop sidebar and mobile drawer)
-function HistoryPanel({ data, onSessionChange, onAddSession, onClearSession, onPenalty, onDeleteSolve, solves, best }) {
+function HistoryPanel({ data, onSessionChange, onAddSession, onClearSession, onPenalty, onDeleteSolve, solves, best, setShowHelp }) {
return (
{/* Session selector */}
@@ -83,7 +93,20 @@ function HistoryPanel({ data, onSessionChange, onAddSession, onClearSession, onP
+ >+ New
+
{/* History header */}
@@ -128,6 +151,7 @@ export default function SidebarUI({
const [menuOpen, setMenuOpen] = useState(false);
const [historyOpen, setHistoryOpen] = useState(false);
const [isMobile, setIsMobile] = useState(false);
+ const [showHelp, setShowHelp] = useState(false);
useEffect(() => {
const check = () => setIsMobile(window.innerWidth <= 768);
@@ -143,6 +167,19 @@ export default function SidebarUI({
setHistoryOpen(false);
}
}, [isFocusMode]);
+ useEffect(() => {
+ const handleEsc = (e) => {
+ if (e.key === 'Escape') {
+ setShowHelp(false);
+ }
+ };
+
+ window.addEventListener('keydown', handleEsc);
+
+ return () => {
+ window.removeEventListener('keydown', handleEsc);
+ };
+}, []);
const activeSession = data.sessions.find(s => s.id === data.activeSessionId) || data.sessions[0];
const solves = activeSession.solves;
@@ -404,6 +441,11 @@ export default function SidebarUI({
className={`nav-item ${isDisabled ? 'disabled' : ''}`}
{...extra}
onClick={(e) => {
+ if (item.label === 'Keyboard Shortcuts') {
+ e.preventDefault();
+ setShowHelp(true);
+ return;
+ }
if (isDisabled) e.preventDefault();
}}
title={item.comingSoon ? 'Coming Soon' : ''}
@@ -455,6 +497,7 @@ export default function SidebarUI({
onDeleteSolve={onDeleteSolve}
solves={solves}
best={best}
+ setShowHelp={setShowHelp}
/>
@@ -479,6 +522,62 @@ export default function SidebarUI({
))}
+ {showHelp && (
+ setShowHelp(false)}
+ >
+
e.stopPropagation()}
+ style={{
+ background: '#111827',
+ color: 'white',
+ padding: '24px',
+ borderRadius: '12px',
+ width: '500px',
+ maxWidth: '90vw'
+ }}
+ >
+
⌨ Keyboard Shortcuts
+
+
Timer
+
+ - Space → Start / Stop Timer
+ - R → Reset Current Solve
+
+
+
Sessions
+
+ - N → Create New Session
+ - F2 → Rename Session
+
+
+
Navigation
+
+ - Esc → Close Help Modal
+
+
+
+
+
+)}
>
);
}