Formatting

src/components/dialogs/Dialog.tsx

@@ -1,13 +1,13 @@
 import { ReactNode, useEffect, useState } from 'react'
 
 export interface DialogProps {
-  visible: boolean;
-  onClose?: () => void;
-  className?: string;
-  preventBackdropClose?: boolean;
-  children: ReactNode;
-  size?: 'small' | 'medium' | 'large';
-  showAnimationOnUnmount?: boolean;
+  visible: boolean
+  onClose?: () => void
+  className?: string
+  preventBackdropClose?: boolean
+  children: ReactNode
+  size?: 'small' | 'medium' | 'large'
+  showAnimationOnUnmount?: boolean
 }
 
 /**
@@ -66,17 +66,12 @@ const Dialog = ({
   }[size]
 
   return (
-    <div
-      className={`dialog-overlay ${showContent ? 'visible' : ''}`}
-      onClick={handleBackdropClick}
-    >
-      <div
-        className={`dialog ${sizeClass} ${className} ${showContent ? 'dialog-visible' : ''}`}
-      >
+    <div className={`dialog-overlay ${showContent ? 'visible' : ''}`} onClick={handleBackdropClick}>
+      <div className={`dialog ${sizeClass} ${className} ${showContent ? 'dialog-visible' : ''}`}>
         {children}
       </div>
     </div>
   )
 }
 
-export default Dialog
+export default Dialog

src/components/dialogs/DialogActions.tsx

@@ -1,31 +1,23 @@
 import { ReactNode } from 'react'
 
 export interface DialogActionsProps {
-  children: ReactNode;
-  className?: string;
-  align?: 'start' | 'center' | 'end';
+  children: ReactNode
+  className?: string
+  align?: 'start' | 'center' | 'end'
 }
 
 /**
  * Actions container for dialog footers
  * Provides consistent spacing and alignment for action buttons
  */
-const DialogActions = ({ 
-  children, 
-  className = '',
-  align = 'end' 
-}: DialogActionsProps) => {
+const DialogActions = ({ children, className = '', align = 'end' }: DialogActionsProps) => {
   const alignClass = {
     start: 'justify-start',
     center: 'justify-center',
-    end: 'justify-end'
-  }[align];
+    end: 'justify-end',
+  }[align]
 
-  return (
-    <div className={`dialog-actions ${alignClass} ${className}`}>
-      {children}
-    </div>
-  )
+  return <div className={`dialog-actions ${alignClass} ${className}`}>{children}</div>
 }
 
-export default DialogActions
+export default DialogActions

src/components/dialogs/DialogBody.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react'
 
 export interface DialogBodyProps {
-  children: ReactNode;
-  className?: string;
+  children: ReactNode
+  className?: string
 }
 
 /**
@@ -10,11 +10,7 @@ export interface DialogBodyProps {
  * Contains the main content with scrolling capability
  */
 const DialogBody = ({ children, className = '' }: DialogBodyProps) => {
-  return (
-    <div className={`dialog-body ${className}`}>
-      {children}
-    </div>
-  )
+  return <div className={`dialog-body ${className}`}>{children}</div>
 }
 
-export default DialogBody
+export default DialogBody

src/components/dialogs/DialogFooter.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react'
 
 export interface DialogFooterProps {
-  children: ReactNode;
-  className?: string;
+  children: ReactNode
+  className?: string
 }
 
 /**
@@ -10,11 +10,7 @@ export interface DialogFooterProps {
  * Contains action buttons and optional status information
  */
 const DialogFooter = ({ children, className = '' }: DialogFooterProps) => {
-  return (
-    <div className={`dialog-footer ${className}`}>
-      {children}
-    </div>
-  )
+  return <div className={`dialog-footer ${className}`}>{children}</div>
 }
 
-export default DialogFooter
+export default DialogFooter

src/components/dialogs/DialogHeader.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react'
 
 export interface DialogHeaderProps {
-  children: ReactNode;
-  className?: string;
-  onClose?: () => void;
+  children: ReactNode
+  className?: string
+  onClose?: () => void
 }
 
 /**
@@ -15,11 +15,7 @@ const DialogHeader = ({ children, className = '', onClose }: DialogHeaderProps)
     <div className={`dialog-header ${className}`}>
       {children}
       {onClose && (
-        <button 
-          className="dialog-close-button" 
-          onClick={onClose} 
-          aria-label="Close dialog"
-        >
+        <button className="dialog-close-button" onClick={onClose} aria-label="Close dialog">
           ×
         </button>
       )}
@@ -27,4 +23,4 @@ const DialogHeader = ({ children, className = '', onClose }: DialogHeaderProps)
   )
 }
 
-export default DialogHeader
+export default DialogHeader

src/components/dialogs/DlcSelectionDialog.tsx

@@ -8,15 +8,15 @@ import { Button, AnimatedCheckbox } from '@/components/buttons'
 import { DlcInfo } from '@/types'
 
 export interface DlcSelectionDialogProps {
-  visible: boolean;
-  gameTitle: string;
-  dlcs: DlcInfo[];
-  onClose: () => void;
-  onConfirm: (selectedDlcs: DlcInfo[]) => void;
-  isLoading: boolean;
-  isEditMode?: boolean;
-  loadingProgress?: number;
-  estimatedTimeLeft?: string;
+  visible: boolean
+  gameTitle: string
+  dlcs: DlcInfo[]
+  onClose: () => void
+  onConfirm: (selectedDlcs: DlcInfo[]) => void
+  isLoading: boolean
+  isEditMode?: boolean
+  loadingProgress?: number
+  estimatedTimeLeft?: string
 }
 
 /**
@@ -56,18 +56,18 @@ const DlcSelectionDialog = ({
       if (!initialized) {
         // Create a new array to ensure we don't share references
         setSelectedDlcs([...dlcs])
-        
+
         // Determine initial selectAll state based on if all DLCs are enabled
         const allSelected = dlcs.every((dlc) => dlc.enabled)
         setSelectAll(allSelected)
-        
+
         // Mark as initialized to avoid resetting selections on subsequent updates
         setInitialized(true)
       } else {
-        // Find new DLCs that aren't in our current selection 
+        // Find new DLCs that aren't in our current selection
         const currentAppIds = new Set(selectedDlcs.map((dlc) => dlc.appid))
         const newDlcs = dlcs.filter((dlc) => !currentAppIds.has(dlc.appid))
-        
+
         // If we found new DLCs, add them to our selection
         if (newDlcs.length > 0) {
           setSelectedDlcs((prev) => [...prev, ...newDlcs])
@@ -118,9 +118,9 @@ const DlcSelectionDialog = ({
   // Submit selected DLCs to parent component
   const handleConfirm = useCallback(() => {
     // Create a deep copy to prevent reference issues
-    const dlcsCopy = JSON.parse(JSON.stringify(selectedDlcs));
-    onConfirm(dlcsCopy);
-  }, [onConfirm, selectedDlcs]);
+    const dlcsCopy = JSON.parse(JSON.stringify(selectedDlcs))
+    onConfirm(dlcsCopy)
+  }, [onConfirm, selectedDlcs])
 
   // Count selected DLCs
   const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length
@@ -128,7 +128,7 @@ const DlcSelectionDialog = ({
   // Format dialog title and messages based on mode
   const dialogTitle = isEditMode ? 'Edit DLCs' : 'Select DLCs to Enable'
   const actionButtonText = isEditMode ? 'Save Changes' : 'Install with Selected DLCs'
-  
+
   // Format loading message to show total number of DLCs found
   const getLoadingInfoText = () => {
     if (isLoading && loadingProgress < 100) {
@@ -140,12 +140,7 @@ const DlcSelectionDialog = ({
   }
 
   return (
-    <Dialog
-      visible={visible}
-      onClose={onClose}
-      size="large"
-      preventBackdropClose={isLoading}
-    >
+    <Dialog visible={visible} onClose={onClose} size="large" preventBackdropClose={isLoading}>
       <DialogHeader onClose={onClose}>
         <h3>{dialogTitle}</h3>
         <div className="dlc-game-info">
@@ -224,11 +219,7 @@ const DlcSelectionDialog = ({
           >
             Cancel
           </Button>
-          <Button 
-            variant="primary" 
-            onClick={handleConfirm} 
-            disabled={isLoading}
-          >
+          <Button variant="primary" onClick={handleConfirm} disabled={isLoading}>
             {actionButtonText}
           </Button>
         </DialogActions>
@@ -237,4 +228,4 @@ const DlcSelectionDialog = ({
   )
 }
 
-export default DlcSelectionDialog
+export default DlcSelectionDialog

src/components/dialogs/ProgressDialog.tsx

@@ -7,20 +7,20 @@ import DialogActions from './DialogActions'
 import { Button } from '@/components/buttons'
 
 export interface InstallationInstructions {
-  type: string;
-  command: string;
-  game_title: string;
-  dlc_count?: number;
+  type: string
+  command: string
+  game_title: string
+  dlc_count?: number
 }
 
 export interface ProgressDialogProps {
-  visible: boolean;
-  title: string;
-  message: string;
-  progress: number;
-  showInstructions?: boolean;
-  instructions?: InstallationInstructions;
-  onClose?: () => void;
+  visible: boolean
+  title: string
+  message: string
+  progress: number
+  showInstructions?: boolean
+  instructions?: InstallationInstructions
+  onClose?: () => void
 }
 
 /**
@@ -126,7 +126,7 @@ const ProgressDialog = ({
       <DialogHeader>
         <h3>{title}</h3>
       </DialogHeader>
-      
+
       <DialogBody>
         <p>{message}</p>
 
@@ -150,24 +150,17 @@ const ProgressDialog = ({
           </div>
         )}
       </DialogBody>
-      
+
       <DialogFooter>
         <DialogActions>
           {showInstructions && showCopyButton && (
-            <Button 
-              variant="primary"
-              onClick={handleCopyCommand}
-            >
+            <Button variant="primary" onClick={handleCopyCommand}>
               {copySuccess ? 'Copied!' : 'Copy to Clipboard'}
             </Button>
           )}
 
           {isCloseButtonEnabled && (
-            <Button
-              variant="secondary"
-              onClick={onClose}
-              disabled={!isCloseButtonEnabled}
-            >
+            <Button variant="secondary" onClick={onClose} disabled={!isCloseButtonEnabled}>
               Close
             </Button>
           )}
@@ -177,4 +170,4 @@ const ProgressDialog = ({
   )
 }
 
-export default ProgressDialog
+export default ProgressDialog

src/components/dialogs/index.ts

@@ -1,17 +1,17 @@
-// Export all dialog components 
-export { default as Dialog } from './Dialog';
-export { default as DialogHeader } from './DialogHeader';
-export { default as DialogBody } from './DialogBody';
-export { default as DialogFooter } from './DialogFooter';
-export { default as DialogActions } from './DialogActions';
-export { default as ProgressDialog } from './ProgressDialog';
-export { default as DlcSelectionDialog } from './DlcSelectionDialog';
+// Export all dialog components
+export { default as Dialog } from './Dialog'
+export { default as DialogHeader } from './DialogHeader'
+export { default as DialogBody } from './DialogBody'
+export { default as DialogFooter } from './DialogFooter'
+export { default as DialogActions } from './DialogActions'
+export { default as ProgressDialog } from './ProgressDialog'
+export { default as DlcSelectionDialog } from './DlcSelectionDialog'
 
 // Export types
-export type { DialogProps } from './Dialog';
-export type { DialogHeaderProps } from './DialogHeader';
-export type { DialogBodyProps } from './DialogBody';
-export type { DialogFooterProps } from './DialogFooter';
-export type { DialogActionsProps } from './DialogActions';
-export type { ProgressDialogProps, InstallationInstructions } from './ProgressDialog';
-export type { DlcSelectionDialogProps } from './DlcSelectionDialog';
+export type { DialogProps } from './Dialog'
+export type { DialogHeaderProps } from './DialogHeader'
+export type { DialogBodyProps } from './DialogBody'
+export type { DialogFooterProps } from './DialogFooter'
+export type { DialogActionsProps } from './DialogActions'
+export type { ProgressDialogProps, InstallationInstructions } from './ProgressDialog'
+export type { DlcSelectionDialogProps } from './DlcSelectionDialog'