redesign conflict dialog #92

src/components/dialogs/ConflictDialog.tsx

@@ -7,66 +7,95 @@ import {
   DialogActions,
 } from '@/components/dialogs'
 import { Button } from '@/components/buttons'
-import { Icon, warning } from '@/components/icons'
+import { Icon, warning, info } from '@/components/icons'
+
+export interface Conflict {
+  gameId: string
+  gameTitle: string
+  type: 'cream-to-proton' | 'smoke-to-native'
+}
 
 export interface ConflictDialogProps {
   visible: boolean
-  gameTitle: string
-  conflictType: 'cream-to-proton' | 'smoke-to-native'
-  onConfirm: () => void
+  conflicts: Conflict[]
+  onResolve: (gameId: string, conflictType: 'cream-to-proton' | 'smoke-to-native') => void
+  onClose: () => void
 }
 
 /**
  * Conflict Dialog component
- * Shows when incompatible unlocker files are detected after platform switch
+ * Shows all conflicts at once with individual resolve buttons
  */
 const ConflictDialog: React.FC<ConflictDialogProps> = ({
   visible,
-  gameTitle,
-  conflictType,
-  onConfirm,
+  conflicts,
+  onResolve,
+  onClose,
 }) => {
-  const getConflictMessage = () => {
-    if (conflictType === 'cream-to-proton') {
-      return {
-        title: 'CreamLinux unlocker detected, but game is set to Proton',
-        bodyPrefix: 'It looks like you previously installed CreamLinux while ',
-        bodySuffix: ' was running natively. Steam is now configured to run it with Proton, so CreamLinux files will be removed automatically.',
-      }
+  // Check if any CreamLinux conflicts exist
+  const hasCreamConflicts = conflicts.some((c) => c.type === 'cream-to-proton')
+
+  const getConflictDescription = (type: 'cream-to-proton' | 'smoke-to-native') => {
+    if (type === 'cream-to-proton') {
+      return 'Will remove existing unlocker files and restore the game to a clean state.'
     } else {
-      return {
-        title: 'SmokeAPI unlocker detected, but game is set to Native',
-        bodyPrefix: 'It looks like you previously installed SmokeAPI while ',
-        bodySuffix: ' was running with Proton. Steam is now configured to run it natively, so SmokeAPI files will be removed automatically.',
-      }
+      return 'Will remove existing unlocker files and restore the game to a clean state.'
     }
   }
 
-  const message = getConflictMessage()
-
   return (
     <Dialog visible={visible} size="large" preventBackdropClose={true}>
       <DialogHeader hideCloseButton={true}>
         <div className="conflict-dialog-header">
           <Icon name={warning} variant="solid" size="lg" />
-          <h3>{message.title}</h3>
+          <h3>Unlocker conflicts detected</h3>
         </div>
       </DialogHeader>
 
       <DialogBody>
         <div className="conflict-dialog-body">
-          <p>
-            {message.bodyPrefix}
-            <strong>{gameTitle}</strong>
-            {message.bodySuffix}
+          <p className="conflict-intro">
+            Some games have conflicting unlocker states that need attention.
           </p>
+
+          <div className="conflict-list">
+            {conflicts.map((conflict) => (
+              <div key={conflict.gameId} className="conflict-item">
+                <div className="conflict-info">
+                  <div className="conflict-icon">
+                    <Icon name={warning} variant="solid" size="md" />
+                  </div>
+                  <div className="conflict-details">
+                    <h4>{conflict.gameTitle}</h4>
+                    <p>{getConflictDescription(conflict.type)}</p>
+                  </div>
+                </div>
+                <Button
+                  variant="primary"
+                  onClick={() => onResolve(conflict.gameId, conflict.type)}
+                  className="conflict-resolve-btn"
+                >
+                  Resolve
+                </Button>
+              </div>
+            ))}
+          </div>
         </div>
       </DialogBody>
 
       <DialogFooter>
+        {hasCreamConflicts && (
+          <div className="conflict-reminder">
+            <Icon name={info} variant="solid" size="md" />
+            <span>
+              Remember to remove <code>sh ./cream.sh %command%</code> from Steam launch options
+              after resolving CreamLinux conflicts.
+            </span>
+          </div>
+        )}
         <DialogActions>
-          <Button variant="primary" onClick={onConfirm}>
-            OK
+          <Button variant="secondary" onClick={onClose}>
+            Close
           </Button>
         </DialogActions>
       </DialogFooter>

src/components/dialogs/index.ts

@@ -9,7 +9,6 @@ export { default as DlcSelectionDialog } from './DlcSelectionDialog'
 export { default as SettingsDialog } from './SettingsDialog'
 export { default as SmokeAPISettingsDialog } from './SmokeAPISettingsDialog'
 export { default as ConflictDialog } from './ConflictDialog'
-export { default as ReminderDialog } from './ReminderDialog'
 export { default as DisclaimerDialog } from './DisclaimerDialog'
 
 // Export types
@@ -20,5 +19,4 @@ export type { DialogFooterProps } from './DialogFooter'
 export type { DialogActionsProps } from './DialogActions'
 export type { ProgressDialogProps, InstallationInstructions } from './ProgressDialog'
 export type { DlcSelectionDialogProps } from './DlcSelectionDialog'
-export type { ConflictDialogProps } from './ConflictDialog'
-export type { ReminderDialogProps } from './ReminderDialog'
+export type { ConflictDialogProps, Conflict } from './ConflictDialog'