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

src/styles/components/dialogs/_conflict_dialog.scss

@@ -0,0 +1,88 @@
+@use '../../themes/index' as *;
+@use '../../abstracts/index' as *;
+
+/* 
+  Conflict Dialog Styles
+  Used for platform conflict detection dialogs
+*/
+
+.conflict-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  h3 {
+    margin: 0;
+    flex: 1;
+    font-size: 1.1rem;
+    color: var(--text-primary);
+  }
+
+  svg {
+    color: var(--warning);
+    flex-shrink: 0;
+  }
+}
+
+.conflict-dialog-body {
+  p {
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    strong {
+      color: var(--text-primary);
+      font-weight: var(--bold);
+    }
+  }
+}
+
+/* 
+  Reminder Dialog Styles
+  Used for Steam launch option reminders
+*/
+
+.reminder-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  h3 {
+    margin: 0;
+    flex: 1;
+    font-size: 1.1rem;
+    color: var(--text-primary);
+  }
+
+  svg {
+    color: var(--info);
+    flex-shrink: 0;
+  }
+}
+
+.reminder-dialog-body {
+  p {
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+
+  .reminder-steps {
+    margin: 1rem 0 0 1.5rem;
+    padding: 0;
+    color: var(--text-secondary);
+    line-height: 1.6;
+
+    li {
+      margin-bottom: 0.5rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

src/styles/components/dialogs/_index.scss

@@ -3,3 +3,4 @@
 @forward './progress_dialog';
 @forward './settings_dialog';
 @forward './smokeapi_settings_dialog';
+@forward './conflict_dialog';