conflict & reminder dialogs & styles #89

src/components/dialogs/ConflictDialog.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogActions,
+} from '@/components/dialogs'
+import { Button } from '@/components/buttons'
+import { Icon, warning } from '@/components/icons'
+
+export interface ConflictDialogProps {
+  visible: boolean
+  gameTitle: string
+  conflictType: 'cream-to-proton' | 'smoke-to-native'
+  onConfirm: () => void
+}
+
+/**
+ * Conflict Dialog component
+ * Shows when incompatible unlocker files are detected after platform switch
+ */
+const ConflictDialog: React.FC<ConflictDialogProps> = ({
+  visible,
+  gameTitle,
+  conflictType,
+  onConfirm,
+}) => {
+  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.',
+      }
+    } 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.',
+      }
+    }
+  }
+
+  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>
+        </div>
+      </DialogHeader>
+
+      <DialogBody>
+        <div className="conflict-dialog-body">
+          <p>
+            {message.bodyPrefix}
+            <strong>{gameTitle}</strong>
+            {message.bodySuffix}
+          </p>
+        </div>
+      </DialogBody>
+
+      <DialogFooter>
+        <DialogActions>
+          <Button variant="primary" onClick={onConfirm}>
+            OK
+          </Button>
+        </DialogActions>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export default ConflictDialog

src/components/dialogs/ReminderDialog.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogActions,
+} from '@/components/dialogs'
+import { Button } from '@/components/buttons'
+import { Icon, info } from '@/components/icons'
+
+export interface ReminderDialogProps {
+  visible: boolean
+  onClose: () => void
+}
+
+/**
+ * Reminder Dialog component
+ * Reminds users to remove Steam launch options after removing CreamLinux
+ */
+const ReminderDialog: React.FC<ReminderDialogProps> = ({ visible, onClose }) => {
+  return (
+    <Dialog visible={visible} onClose={onClose} size="small">
+      <DialogHeader onClose={onClose} hideCloseButton={true}>
+        <div className="reminder-dialog-header">
+          <Icon name={info} variant="solid" size="lg" />
+          <h3>Reminder</h3>
+        </div>
+      </DialogHeader>
+
+      <DialogBody>
+        <div className="reminder-dialog-body">
+          <p>
+            If you added a Steam launch option for CreamLinux, remember to remove it in Steam:
+          </p>
+          <ol className="reminder-steps">
+            <li>Right-click the game in Steam</li>
+            <li>Select "Properties"</li>
+            <li>Go to "Launch Options"</li>
+            <li>Remove the CreamLinux command</li>
+          </ol>
+        </div>
+      </DialogBody>
+
+      <DialogFooter>
+        <DialogActions>
+          <Button variant="primary" onClick={onClose}>
+            Got it
+          </Button>
+        </DialogActions>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export default ReminderDialog