add settings button to game cards with smokeapi installed #67

src/components/games/GameItem.tsx

@@ -8,13 +8,14 @@ interface GameItemProps {
   game: Game
   onAction: (gameId: string, action: ActionType) => Promise<void>
   onEdit?: (gameId: string) => void
+  onSmokeAPISettings?: (gameId: string) => void
 }
 
 /**
  * Individual game card component
  * Displays game information and action buttons
  */
-const GameItem = ({ game, onAction, onEdit }: GameItemProps) => {
+const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps) => {
   const [imageUrl, setImageUrl] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
@@ -77,6 +78,13 @@ const GameItem = ({ game, onAction, onEdit }: GameItemProps) => {
     }
   }
 
+  // SmokeAPI settings handler
+  const handleSmokeAPISettings = () => {
+    if (onSmokeAPISettings && game.smoke_installed) {
+      onSmokeAPISettings(game.id)
+    }
+  }
+
   // Determine background image
   const backgroundImage =
     !isLoading && imageUrl
@@ -156,6 +164,20 @@ const GameItem = ({ game, onAction, onEdit }: GameItemProps) => {
               iconOnly
             />
           )}
+
+          {/* Edit button - only enabled if SmokeAPI is installed */}
+          {game.smoke_installed && (
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={handleSmokeAPISettings}
+              disabled={!game.smoke_installed || !!game.installing}
+              title="Configure SmokeAPI"
+              className="edit-button settings-icon-button"
+              leftIcon={<Icon name="Settings" variant="solid" size="md" />}
+              iconOnly
+            />
+          )}
         </div>
       </div>
     </div>

src/components/games/GameList.tsx

@@ -9,13 +9,14 @@ interface GameListProps {
   isLoading: boolean
   onAction: (gameId: string, action: ActionType) => Promise<void>
   onEdit?: (gameId: string) => void
+  onSmokeAPISettings?: (gameId: string) => void
 }
 
 /**
  * Main game list component
  * Displays games in a grid with search and filtering applied
  */
-const GameList = ({ games, isLoading, onAction, onEdit }: GameListProps) => {
+const GameList = ({ games, isLoading, onAction, onEdit, onSmokeAPISettings }: GameListProps) => {
   const [imagesPreloaded, setImagesPreloaded] = useState(false)
 
   // Sort games alphabetically by title
@@ -56,7 +57,7 @@ const GameList = ({ games, isLoading, onAction, onEdit }: GameListProps) => {
       ) : (
         <div className="game-grid">
           {sortedGames.map((game) => (
-            <GameItem key={game.id} game={game} onAction={onAction} onEdit={onEdit} />
+            <GameItem key={game.id} game={game} onAction={onAction} onEdit={onEdit} onSmokeAPISettings={onSmokeAPISettings} />
           ))}
         </div>
       )}