disclaimer dialog & styles #87

src/App.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { invoke } from '@tauri-apps/api/core'
 import { useAppContext } from '@/contexts/useAppContext'
-import { useAppLogic, useConflictDetection } from '@/hooks'
+import { useAppLogic, useConflictDetection, useDisclaimer } from '@/hooks'
 import './styles/main.scss'
 
 // Layout components
@@ -21,6 +21,7 @@ import {
   SettingsDialog,
   ConflictDialog,
   ReminderDialog,
+  DisclaimerDialog,
 } from '@/components/dialogs'
 
 // Game components
@@ -32,6 +33,8 @@ import { GameList } from '@/components/games'
 function App() {
   const [updateComplete, setUpdateComplete] = useState(false)
 
+  const { showDisclaimer, handleDisclaimerClose } = useDisclaimer()
+
   // Get application logic from hook
   const {
     filter,
@@ -179,6 +182,9 @@ function App() {
 
         {/* Steam Launch Options Reminder */}
         <ReminderDialog visible={showReminder} onClose={closeReminder} />
+
+        {/* Disclaimer Dialog - Shows AFTER everything is loaded */}
+        <DisclaimerDialog visible={showDisclaimer} onClose={handleDisclaimerClose} />
       </div>
     </ErrorBoundary>
   )

src/components/dialogs/DisclaimerDialog.tsx

@@ -0,0 +1,69 @@
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogActions,
+} from '@/components/dialogs'
+import { Button, AnimatedCheckbox } from '@/components/buttons'
+import { useState } from 'react'
+
+export interface DisclaimerDialogProps {
+  visible: boolean
+  onClose: (dontShowAgain: boolean) => void
+}
+
+/**
+ * Disclaimer dialog that appears on app startup
+ * Informs users that CreamLinux manages DLC IDs, not actual DLC files
+ */
+const DisclaimerDialog = ({ visible, onClose }: DisclaimerDialogProps) => {
+  const [dontShowAgain, setDontShowAgain] = useState(false)
+
+  const handleOkClick = () => {
+    onClose(dontShowAgain)
+  }
+
+  return (
+    <Dialog visible={visible} onClose={() => onClose(false)} size="medium" preventBackdropClose>
+        <DialogHeader hideCloseButton={true}>
+          <div className="disclaimer-header">
+            <h3>Important Notice</h3>
+          </div>
+      </DialogHeader>
+
+      <DialogBody>
+        <div className="disclaimer-content">
+          <p>
+            <strong>CreamLinux Installer</strong> does not install any DLC content files.
+          </p>
+          <p>
+            This application manages the <strong>DLC IDs</strong> associated with DLCs you want to
+            use. You must obtain the actual DLC files separately.
+          </p>
+          <p>
+            This tool only configures which DLC IDs are recognized by the game unlockers
+            (CreamLinux and SmokeAPI).
+          </p>
+        </div>
+      </DialogBody>
+
+      <DialogFooter>
+        <DialogActions>
+          <div className="disclaimer-footer">
+            <AnimatedCheckbox
+              checked={dontShowAgain}
+              onChange={() => setDontShowAgain(!dontShowAgain)}
+              label="Don't show this disclaimer again"
+            />
+            <Button variant="primary" onClick={handleOkClick}>
+              OK
+            </Button>
+          </div>
+        </DialogActions>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export default DisclaimerDialog

src/styles/components/dialogs/_disclaimer_dialog.scss

@@ -0,0 +1,38 @@
+@use '../../themes/index' as *;
+@use '../../abstracts/index' as *;
+
+/* 
+  Disclaimer Dialog Styles
+  Used for the startup disclaimer dialog
+*/
+
+.disclaimer-header {
+  h3 {
+    margin-bottom: 0;
+  }
+}
+.disclaimer-content {
+  p {
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: 0.95rem;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    strong {
+      color: var(--text-primary);
+      font-weight: var(--bold);
+    }
+  }
+}
+
+.disclaimer-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+}

src/styles/components/dialogs/_index.scss

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