bits and bob

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 (