implement unlocker selection #61

src/App.tsx

@@ -21,6 +21,7 @@ import {
   SettingsDialog,
   ConflictDialog,
   DisclaimerDialog,
+  UnlockerSelectionDialog,
 } from '@/components/dialogs'
 
 // Game components
@@ -64,6 +65,10 @@ function App() {
     handleSettingsClose,
     handleSmokeAPISettingsOpen,
     showToast,
+    unlockerSelectionDialog,
+    handleSelectCreamLinux,
+    handleSelectSmokeAPI,
+    closeUnlockerDialog,
   } = useAppContext()
 
   // Conflict detection
@@ -182,6 +187,15 @@ function App() {
           onClose={closeDialog}
         />
 
+        {/* Unlocker Selection Dialog */}
+        <UnlockerSelectionDialog
+          visible={unlockerSelectionDialog.visible}
+          gameTitle={unlockerSelectionDialog.gameTitle || ''}
+          onClose={closeUnlockerDialog}
+          onSelectCreamLinux={handleSelectCreamLinux}
+          onSelectSmokeAPI={handleSelectSmokeAPI}
+        />
+
         {/* Disclaimer Dialog - Shows AFTER everything is loaded */}
         <DisclaimerDialog visible={showDisclaimer} onClose={handleDisclaimerClose} />
       </div>

src/components/games/GameItem.tsx

@@ -51,11 +51,14 @@ const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps)
   }, [game.id, imageUrl])
 
   // Determine if we should show CreamLinux buttons (only for native games)
-  const shouldShowCream = game.native === true
+  const shouldShowCream = game.native && game.cream_installed // Only show if installed (for uninstall)
 
   // Determine if we should show SmokeAPI buttons (only for non-native games with API files)
   const shouldShowSmoke = !game.native && game.api_files && game.api_files.length > 0
 
+  // Show generic button if nothing installed
+  const shouldShowUnlocker = game.native && !game.cream_installed && !game.smoke_installed
+
   // Check if this is a Proton game without API files
   const isProtonNoApi = !game.native && (!game.api_files || game.api_files.length === 0)
 
@@ -71,6 +74,11 @@ const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps)
     onAction(game.id, action)
   }
 
+  const handleUnlockerAction = () => {
+    if (game.installing) return
+    onAction(game.id, 'install_unlocker')
+  }
+
   // Handle edit button click
   const handleEdit = () => {
     if (onEdit && game.cream_installed) {
@@ -116,17 +124,27 @@ const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps)
         </div>
 
         <div className="game-actions">
-          {/* Show CreamLinux button only for native games */}
+          {/* Show generic "Install" button for native games with nothing installed */}
+          {shouldShowUnlocker && (
+            <ActionButton
+              action="install_unlocker"
+              isInstalled={false}
+              isWorking={!!game.installing}
+              onClick={handleUnlockerAction}
+            />
+          )}
+
+          {/* Show CreamLinux uninstall button if CreamLinux is installed */}
           {shouldShowCream && (
             <ActionButton
-              action={game.cream_installed ? 'uninstall_cream' : 'install_cream'}
-              isInstalled={!!game.cream_installed}
+              action="uninstall_cream"
+              isInstalled={true}
               isWorking={!!game.installing}
               onClick={handleCreamAction}
             />
           )}
 
-          {/* Show SmokeAPI button only for Proton/Windows games with API files */}
+          {/* Show SmokeAPI button for Proton games OR native games with SmokeAPI installed */}
           {shouldShowSmoke && (
             <ActionButton
               action={game.smoke_installed ? 'uninstall_smoke' : 'install_smoke'}
@@ -136,6 +154,16 @@ const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps)
             />
           )}
 
+          {/* Show SmokeAPI uninstall for native games if installed */}
+          {game.native && game.smoke_installed && (
+            <ActionButton
+              action="uninstall_smoke"
+              isInstalled={true}
+              isWorking={!!game.installing}
+              onClick={handleSmokeAction}
+            />
+          )}
+
           {/* Show message for Proton games without API files */}
           {isProtonNoApi && (
             <div className="api-not-found-message">

src/contexts/AppContext.tsx

@@ -62,6 +62,16 @@ export interface AppContextType {
     type: 'success' | 'error' | 'warning' | 'info',
     options?: Record<string, unknown>
   ) => void
+
+  // Unlocker selection
+  unlockerSelectionDialog: {
+    visible: boolean
+    gameId: string | null
+    gameTitle: string | null
+  }
+  handleSelectCreamLinux: () => void
+  handleSelectSmokeAPI: () => void
+  closeUnlockerDialog: () => void
 }
 
 // Create the context with a default value

src/contexts/AppProvider.tsx

@@ -33,6 +33,10 @@ export const AppProvider = ({ children }: AppProviderProps) => {
     handleCloseProgressDialog,
     handleGameAction: executeGameAction,
     handleDlcConfirm: executeDlcConfirm,
+    unlockerSelectionDialog,
+    handleSelectCreamLinux,
+    handleSelectSmokeAPI,
+    closeUnlockerDialog,
   } = useGameActions()
 
   const { toasts, removeToast, success, error: showError, warning, info } = useToasts()
@@ -241,6 +245,12 @@ export const AppProvider = ({ children }: AppProviderProps) => {
 
     // Toast notifications
     showToast,
+
+    // Unlocker selection
+    unlockerSelectionDialog,
+    handleSelectCreamLinux,
+    handleSelectSmokeAPI,
+    closeUnlockerDialog,
   }
 
   return (