bits and bob

src/components/dialogs/DlcSelectionDialog.tsx

@@ -117,8 +117,10 @@ const DlcSelectionDialog = ({
 
   // Submit selected DLCs to parent component
   const handleConfirm = useCallback(() => {
-    onConfirm(selectedDlcs)
-  }, [onConfirm, selectedDlcs])
+    // Create a deep copy to prevent reference issues
+    const dlcsCopy = JSON.parse(JSON.stringify(selectedDlcs));
+    onConfirm(dlcsCopy);
+  }, [onConfirm, selectedDlcs]);
 
   // Count selected DLCs
   const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length

src/components/icons/Icon.tsx

@@ -102,7 +102,7 @@ const Icon: React.FC<IconProps> = ({
     if (BRAND_ICON_NAMES.has(name)) {
       defaultVariant = 'brand'
     } else {
-      defaultVariant = 'bold' // Default to outline for non-brand icons
+      defaultVariant = 'bold' // Default to bold for non-brand icons
     }
   }
   

src/components/icons/brands/index.ts

@@ -1,6 +1,7 @@
 // Bold variant icons
 export { ReactComponent as Linux } from './linux.svg'
-export { ReactComponent as steam } from './steam.svg'
-export { ReactComponent as windows } from './windows.svg'
-export { ReactComponent as github } from './github.svg'
-export { ReactComponent as discord } from './discord.svg'
+export { ReactComponent as Steam } from './steam.svg'
+export { ReactComponent as Windows } from './windows.svg'
+export { ReactComponent as Github } from './github.svg'
+export { ReactComponent as Discord } from './discord.svg'
+export { ReactComponent as Proton } from './proton.svg'

src/components/icons/index.ts

@@ -27,11 +27,13 @@ export const search = 'Search'
 export const trash = 'Trash'
 export const warning = 'Warning'
 export const wine = 'Wine'
+export const diamond = 'Diamond'
 
 // Brand icons
 export const discord = 'Discord'
 export const github = 'GitHub'
 export const linux = 'Linux'
+export const proton = 'Proton'
 export const steam = 'Steam'
 export const windows = 'Windows'
 
@@ -54,11 +56,13 @@ export const IconNames = {
   Trash: trash,
   Warning: warning,
   Wine: wine,
+  Diamond: diamond,
   
   // Brand icons
   Discord: discord,
   GitHub: github,
   Linux: linux,
+  Proton: proton,
   Steam: steam,
   Windows: windows,
 } as const

src/components/icons/ui/bold/diamond.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.2 8.25h5.6L12.15 3h-.3zm2.05 11.85V9.75H2.625zm1.5 0l8.625-10.35H12.75zm3.7-11.85h5.175L19.55 4.1q-.275-.5-.737-.8T17.775 3H13.85zm-14.075 0H7.55L10.15 3H6.225q-.575 0-1.037.3t-.738.8z"/></svg>

src/components/icons/ui/bold/index.ts

@@ -14,4 +14,5 @@ export { ReactComponent as Refresh } from './refresh.svg'
 export { ReactComponent as Search } from './search.svg'
 export { ReactComponent as Trash } from './trash.svg'
 export { ReactComponent as Warning } from './warning.svg'
-export { ReactComponent as Wine } from './wine.svg'
+export { ReactComponent as Wine } from './wine.svg'
+export { ReactComponent as Diamond } from './diamond.svg'

src/components/icons/ui/outline/diamond.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19.875q-.425 0-.825-.187t-.7-.538L2.825 10q-.225-.275-.337-.6t-.113-.675q0-.225.038-.462t.162-.438L4.45 4.1q.275-.5.738-.8T6.225 3h11.55q.575 0 1.038.3t.737.8l1.875 3.725q.125.2.163.437t.037.463q0 .35-.112.675t-.338.6l-7.65 9.15q-.3.35-.7.538t-.825.187M9.625 8h4.75l-1.5-3h-1.75zM11 16.675V10H5.45zm2 0L18.55 10H13zM16.6 8h2.65l-1.5-3H15.1zM4.75 8H7.4l1.5-3H6.25z"/></svg>

src/components/icons/ui/outline/index.ts

@@ -15,3 +15,4 @@ export { ReactComponent as Search } from './search.svg'
 export { ReactComponent as Trash } from './trash.svg'
 export { ReactComponent as Warning } from './warning.svg'
 export { ReactComponent as Wine } from './wine.svg'
+export { ReactComponent as Diamond } from './diamond.svg'

src/components/layout/Header.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/buttons'
-import { Icon, info, refresh, search } from '@/components/icons'
+import { Icon, diamond, refresh, search } from '@/components/icons'
 
 interface HeaderProps {
   onRefresh: () => void
@@ -21,7 +21,7 @@ const Header = ({
   return (
     <header className="app-header">
       <div className="app-title">
-        <Icon name={info} variant="bold" size="md" className="app-logo-icon" />
+        <Icon name={diamond} variant="bold" size="lg" className="app-logo-icon" />
         <h1>CreamLinux</h1>
       </div>
       <div className="header-controls">

src/components/layout/InitialLoadingScreen.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 interface InitialLoadingScreenProps {
   message: string;
@@ -9,28 +9,40 @@ interface InitialLoadingScreenProps {
 /**
  * Initial loading screen displayed when the app first loads
  */
-const InitialLoadingScreen = ({ 
-  message, 
-  progress,
-  onComplete
-}: InitialLoadingScreenProps) => {
-  // Call onComplete when progress reaches 100%
-  useEffect(() => {
-    if (progress >= 100 && onComplete) {
-      const timer = setTimeout(() => {
-        onComplete();
-      }, 500); // Small delay to show completion
-      
-      return () => clearTimeout(timer);
-    }
-  }, [progress, onComplete]);
+const InitialLoadingScreen = ({ message, progress, onComplete }: InitialLoadingScreenProps) => {
+  const [detailedStatus, setDetailedStatus] = useState<string[]>([
+    "Initializing application...",
+    "Setting up Steam integration...",
+    "Preparing DLC management..."
+  ]);
   
+  // Use a sequence of messages based on progress
+  useEffect(() => {
+    const messages = [
+      { threshold: 10, message: "Checking system requirements..." },
+      { threshold: 30, message: "Scanning Steam libraries..." },
+      { threshold: 50, message: "Discovering games..." },
+      { threshold: 70, message: "Analyzing game configurations..." },
+      { threshold: 90, message: "Preparing user interface..." },
+      { threshold: 100, message: "Ready to launch!" }
+    ];
+    
+    // Find current status message based on progress
+    const currentMessage = messages.find(m => progress <= m.threshold)?.message || "Loading...";
+    
+    // Add new messages to the log as progress increases
+    if (currentMessage && !detailedStatus.includes(currentMessage)) {
+      setDetailedStatus(prev => [...prev, currentMessage]);
+    }
+  }, [progress, detailedStatus]);
+
   return (
     <div className="initial-loading-screen">
       <div className="loading-content">
         <h1>CreamLinux</h1>
         
         <div className="loading-animation">
+          {/* Enhanced animation with SVG or more elaborate CSS animation */}
           <div className="loading-circles">
             <div className="circle circle-1"></div>
             <div className="circle circle-2"></div>
@@ -40,6 +52,16 @@ const InitialLoadingScreen = ({
         
         <p className="loading-message">{message}</p>
         
+        {/* Add a detailed status log that shows progress steps */}
+        <div className="loading-status-log">
+          {detailedStatus.slice(-4).map((status, index) => (
+            <div key={index} className="status-line">
+              <span className="status-indicator">○</span>
+              <span className="status-text">{status}</span>
+            </div>
+          ))}
+        </div>
+        
         <div className="progress-bar-container">
           <div className="progress-bar" style={{ width: `${progress}%` }} />
         </div>
@@ -47,7 +69,7 @@ const InitialLoadingScreen = ({
         <div className="progress-percentage">{Math.round(progress)}%</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default InitialLoadingScreen

src/components/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { Icon, layers, linux, wine } from '@/components/icons'
+import { Icon, layers, linux, proton } from '@/components/icons'
 
 interface SidebarProps {
   setFilter: (filter: string) => void
@@ -22,7 +22,7 @@ const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
   const filters: FilterItem[] = [
     { id: 'all', label: 'All Games', icon: layers, variant: 'bold' },
     { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
-    { id: 'proton', label: 'Proton Required', icon: wine, variant: 'bold' }
+    { id: 'proton', label: 'Proton Required', icon: proton, variant: 'brand' }
   ]
   
   return (

src/components/notifications/Toast.tsx

@@ -23,13 +23,17 @@ const Toast = ({
   onDismiss 
 }: ToastProps) => {
   const [visible, setVisible] = useState(false)
+  const [isClosing, setIsClosing] = useState(false);
 
   // Use useCallback to memoize the handleDismiss function
   const handleDismiss = useCallback(() => {
-    setVisible(false)
+    setIsClosing(true);
     // Give time for exit animation
-    setTimeout(() => onDismiss(id), 300)
-  }, [id, onDismiss])
+    setTimeout(() => {
+      setVisible(false);
+      setTimeout(() => onDismiss(id), 50);
+    }, 300);
+  }, [id, onDismiss]);
 
   // Handle animation on mount/unmount
   useEffect(() => {
@@ -69,7 +73,7 @@ const Toast = ({
   }
 
   return (
-    <div className={`toast toast-${type} ${visible ? 'visible' : ''}`}>
+    <div className={`toast toast-${type} ${visible ? 'visible' : ''} ${isClosing ? 'closing' : ''}`}>
       <div className="toast-icon">{getIcon()}</div>
       <div className="toast-content">
         {title && <h4 className="toast-title">{title}</h4>}