freeze v0.2.0

src/components/Layout.tsx

@@ -3,9 +3,10 @@ import { APP_VERSION } from '../version';
 
 interface LayoutProps {
   children: React.ReactNode;
+  onOpenHelp?: () => void;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({ children, onOpenHelp }) => {
   return (
     <div className="app-root">
       <header className="app-header">
@@ -18,8 +19,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             </div>
           </div>
 
-          <div className="app-version" title={`Version ${APP_VERSION}`}>
-            v{APP_VERSION}
+          <div className="app-header-actions">
+            {onOpenHelp && (
+              <button
+                type="button"
+                className="app-help-button"
+                onClick={onOpenHelp}
+                aria-haspopup="dialog"
+                title="Open help and keyboard shortcuts (F1 or ?)"
+              >
+                Help <span aria-hidden="true">?</span>
+              </button>
+            )}
+
+            <div className="app-version" title={`Version ${APP_VERSION}`}>
+              v{APP_VERSION}
+            </div>
           </div>
         </div>
       </header>