fix: make each flatpak step focusable for controller scroll

1 files changed, 79 insertions, 68 deletions

diff --git a/src/components/FlatpaksModal.tsx b/src/components/FlatpaksModal.tsx
index ca15a25..ca69ec6 100644
--- a/src/components/FlatpaksModal.tsx
+++ b/src/components/FlatpaksModal.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect, CSSProperties } from 'react';
 import {
   ModalRoot,
   DialogBody,
@@ -126,6 +126,40 @@ export const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => {
     );
   }
 
+  const instructionSteps = [
+    {
+      id: 'try-first',
+      title: 'Try first:',
+      command: '~/lsfg'
+    },
+    {
+      id: 'try-full-path',
+      title: "If that doesn't work, try full path:",
+      command: '/home/(username)/lsfg'
+    },
+    {
+      id: 'final-result',
+      title: 'Final result should look like:',
+      command: '~/lsfg "usr/bin/flatpak"'
+    }
+  ];
+
+  const focusableInstructionStyle: CSSProperties = {
+    padding: '10px',
+    background: 'rgba(0, 0, 0, 0.3)',
+    borderRadius: '6px',
+    marginBottom: '12px'
+  };
+
+  const commandStyle: CSSProperties = {
+    fontFamily: 'monospace',
+    fontSize: '0.85em',
+    background: 'rgba(0, 0, 0, 0.45)',
+    padding: '8px',
+    borderRadius: '4px',
+    marginTop: '6px'
+  };
+
   return (
     <ModalRoot closeModal={closeModal}>
       <DialogHeader>Flatpak Extensions</DialogHeader>
@@ -327,80 +361,57 @@ export const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => {
           {/* Steam Configuration Instructions */}
           <DialogControlsSection>
             <DialogControlsSectionHeader>Steam Configuration</DialogControlsSectionHeader>
-            
-            <Focusable>
-              <div style={{ 
-                padding: '12px', 
-                background: 'rgba(255, 255, 255, 0.1)', 
-                borderRadius: '8px', 
-                margin: '8px 0'
-              }}>
-                <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#fff' }}>
-                  Configure Steam Flatpak Shortcuts
-                </div>
-                <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '8px' }}>
-                  In Steam, open your flatpak game and click the cog wheel."
-                </div>
-                <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '12px', color: '#ffa500' }}>
-                  <strong>IMPORTANT:</strong> Set this in TARGET (NOT LAUNCH OPTIONS)
-                </div>
-                
-                <div style={{ fontWeight: 'bold', marginBottom: '6px' }}>
-                  Try first:
-                </div>
-                <div style={{ 
-                  fontFamily: 'monospace', 
-                  fontSize: '0.85em', 
-                  background: 'rgba(0, 0, 0, 0.3)',
-                  padding: '8px',
-                  borderRadius: '4px',
-                  marginBottom: '12px'
-                }}>
-                  ~/lsfg
-                </div>
-                
-                <div style={{ fontWeight: 'bold', marginBottom: '6px' }}>
-                  If that doesn't work, try full path:
-                </div>
-                <div style={{ 
-                  fontFamily: 'monospace', 
-                  fontSize: '0.85em', 
-                  background: 'rgba(0, 0, 0, 0.3)',
-                  padding: '8px',
-                  borderRadius: '4px',
-                  marginBottom: '12px'
-                }}>
-                  /home/(username)/lsfg
-                </div>
-                
-                <div style={{ fontWeight: 'bold', marginBottom: '6px' }}>
-                  Final result should look like:
-                </div>
-                <div style={{ 
-                  fontFamily: 'monospace', 
-                  fontSize: '0.85em', 
-                  background: 'rgba(0, 0, 0, 0.3)',
-                  padding: '8px',
-                  borderRadius: '4px'
-                }}>
-                  ~/lsfg "usr/bin/flatpak"
-                </div>
-                
-                {/* Visual example image */}
-                <div style={{ marginTop: '16px', textAlign: 'center' }}>
-                  <img 
-                    src={flatpakTargetImage} 
+            <div
+              style={{
+                padding: '12px',
+                background: 'rgba(255, 255, 255, 0.1)',
+                borderRadius: '8px',
+                margin: '8px 0',
+                display: 'flex',
+                flexDirection: 'column'
+              }}
+            >
+              <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#fff' }}>
+                Configure Steam Flatpak Shortcuts
+              </div>
+              <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '8px' }}>
+                In Steam, open your flatpak game and click the cog wheel.
+              </div>
+              <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '12px', color: '#ffa500' }}>
+                <strong>IMPORTANT:</strong> Set this in TARGET (NOT LAUNCH OPTIONS)
+              </div>
+
+              {instructionSteps.map((step) => (
+                <Focusable
+                  key={step.id}
+                  focusWithinClassName="gpfocuswithin"
+                  onActivate={() => {}}
+                  style={focusableInstructionStyle}
+                >
+                  <div style={{ fontWeight: 'bold' }}>{step.title}</div>
+                  <div style={commandStyle}>{step.command}</div>
+                </Focusable>
+              ))}
+
+              <Focusable
+                focusWithinClassName="gpfocuswithin"
+                onActivate={() => {}}
+                style={{ marginTop: '4px' }}
+              >
+                <div style={{ textAlign: 'center' }}>
+                  <img
+                    src={flatpakTargetImage}
                     alt="Steam Properties Target Field Example"
-                    style={{ 
-                      maxWidth: '100%', 
+                    style={{
+                      maxWidth: '100%',
                       height: 'auto',
                       border: '1px solid rgba(255, 255, 255, 0.2)',
                       borderRadius: '4px'
                     }}
                   />
                 </div>
-              </div>
-            </Focusable>
+              </Focusable>
+            </div>
           </DialogControlsSection>
 
           {/* Close Button */}