improve SmokeAPI detection and redesign loading screen

package.json

@@ -1,7 +1,7 @@
 {
   "name": "creamlinux",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "author": "Tickbase",
   "repository": "https://github.com/Novattz/creamlinux-installer",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "1.0.5"
+version = "1.0.6"
 description = "DLC Manager for Steam games on Linux"
 authors = ["tickbase"]
 license = "MIT"

src-tauri/src/installer.rs

@@ -1019,7 +1019,7 @@ where
                 // Check if this is SmokeAPI DLL file with the correct architecture
                 if file_name.to_lowercase().ends_with(".dll")
                     && file_name.to_lowercase().contains("smoke")
-                    && file_name.contains(target_arch) {
+                    && file_name.to_lowercase().contains(&format!("{}.dll", target_arch)) {
 
                       matching_dll_name = Some(file_name.to_string());
                       break;

src-tauri/tauri.conf.json

@@ -14,7 +14,7 @@
   },
   "productName": "Creamlinux",
   "mainBinaryName": "creamlinux",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "identifier": "com.creamlinux.dev",
   "app": {
     "withGlobalTauri": false,

src/components/dialogs/SettingsDialog.tsx

@@ -59,7 +59,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({ visible, onClose }) =>
             <div className="app-info">
               <div className="info-row">
                 <span className="info-label">Version:</span>
-                <span className="info-value">1.0.2</span>
+                <span className="info-value">1.0.6</span>
               </div>
               <div className="info-row">
                 <span className="info-label">Build:</span>

src/components/layout/InitialLoadingScreen.tsx

@@ -10,31 +10,27 @@ interface InitialLoadingScreenProps {
  * Initial loading screen displayed when the app first loads
  */
 const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps) => {
-  const [detailedStatus, setDetailedStatus] = useState<string[]>([
+  const [currentStep, setCurrentStep] = useState(0)
-    'Initializing application...',
-    'Setting up Steam integration...',
-    'Preparing DLC management...',
-  ])
 
-  // Use a sequence of messages based on progress
+  // Define the loading steps
+  const steps = [
+    'Checking system requirements...',
+    'Scanning Steam libraries...',
+    'Discovering games...',
+    'Preparing user interface...',
+  ]
+
+  // Update current step based on progress
   useEffect(() => {
-    const messages = [
+    const stepThresholds = [25, 50, 75, 100]
-      { threshold: 10, message: 'Checking system requirements...' },
+    const newStep = stepThresholds.findIndex(threshold => progress < threshold)
-      { threshold: 30, message: 'Scanning Steam libraries...' },
+    
-      { threshold: 50, message: 'Discovering games...' },
+    if (newStep !== -1 && newStep !== currentStep) {
-      { threshold: 70, message: 'Analyzing game configurations...' },
+      setCurrentStep(newStep)
-      { threshold: 90, message: 'Preparing user interface...' },
+    } else if (newStep === -1 && currentStep !== steps.length - 1) {
-      { threshold: 100, message: 'Ready to launch!' },
+      setCurrentStep(steps.length - 1)
-    ]
-
-    // 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])
+  }, [progress, currentStep, steps.length])
 
   return (
     <div className="initial-loading-screen">
@@ -42,34 +38,22 @@ const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps)
         <h1>CreamLinux</h1>
 
         <div className="loading-animation">
-          {/* Enhanced animation with SVG or more elaborate CSS animation */}
+          {/* Spinner animation */}
-          <div className="loading-circles">
+          <div className="loading-spinner"></div>
-            <div className="circle circle-1"></div>
-            <div className="circle circle-2"></div>
-            <div className="circle circle-3"></div>
-          </div>
         </div>
 
         <p className="loading-message">{message}</p>
 
-        {/* Add a detailed status log that shows progress steps */}
+        {/* Single step display that changes */}
         <div className="loading-status-log">
-          {detailedStatus.slice(-4).map((status, index) => (
+          <div className="status-line active">
-            <div key={index} className="status-line">
+            <span className="status-step">[{currentStep + 1}/{steps.length}]</span>
-              <span className="status-indicator">○</span>
+            <span className="status-text">{steps[currentStep]}</span>
-              <span className="status-text">{status}</span>
+          </div>
-            </div>
-          ))}
         </div>
-
-        <div className="progress-bar-container">
-          <div className="progress-bar" style={{ width: `${progress}%` }} />
-        </div>
-
-        <div className="progress-percentage">{Math.round(progress)}%</div>
       </div>
     </div>
   )
 }
 
-export default InitialLoadingScreen
+export default InitialLoadingScreen

src/styles/components/layout/_loading_screen.scss

@@ -8,19 +8,21 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
-  height: 100vh;
+  height: 100%;
-  background-color: var(--primary-bg);
+  background: var(--primary-bg);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: var(--z-modal) + 1;
+  z-index: 9999;
 
   .loading-content {
     text-align: center;
     padding: 2rem;
-    max-width: 500px;
+    display: flex;
-    width: 90%;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
 
     h1 {
       font-size: 2.5rem;
@@ -31,72 +33,46 @@
     }
 
     .loading-animation {
-      margin-bottom: 2rem;
+      margin: 1rem 0;
-    }
 
-    .loading-circles {
+      // Spinner styles - thicker border
-      display: flex;
+      .loading-spinner {
-      justify-content: center;
+        width: 50px;
-      gap: 1rem;
+        height: 50px;
-      margin-bottom: 1rem;
-
-      .circle {
-        width: 20px;
-        height: 20px;
         border-radius: 50%;
-        animation: bounce 1.4s infinite ease-in-out both;
+        border: 6px solid rgba(255, 255, 255, 0.1);
-
+        border-top-color: var(--primary-color);
-        &.circle-1 {
+        animation: spin 1s linear infinite;
-          background-color: var(--primary-color);
-          animation-delay: -0.32s;
-        }
-
-        &.circle-2 {
-          background-color: var(--cream-color);
-          animation-delay: -0.16s;
-        }
-
-        &.circle-3 {
-          background-color: var(--smoke-color);
-        }
       }
     }
 
     .loading-message {
-      font-size: 1.1rem;
+      font-size: 1rem;
       color: var(--text-secondary);
-      margin-bottom: 1.5rem;
+      margin: 0;
-      min-height: 3rem;
     }
 
     .loading-status-log {
-      margin: 1rem 0;
+      display: flex;
-      text-align: left;
+      flex-direction: column;
-      max-height: 100px;
+      gap: 0.5rem;
-      overflow-y: auto;
+      width: 100%;
-      background-color: rgba(0, 0, 0, 0.2);
+      max-width: 400px;
-      border-radius: var(--radius-sm);
-      padding: 0.5rem;
 
       .status-line {
-        margin: 0.5rem 0;
         display: flex;
         align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem;
+        border-radius: 4px;
+        transition: all 0.3s ease;
 
-        .status-indicator {
+        &.active {
-          color: var(--primary-color);
+          background-color: rgba(var(--primary-color-rgb), 0.1);
-          margin-right: 0.5rem;
-          font-size: 1.2rem;
-        }
 
-        .status-text {
+          .status-step {
-          color: var(--text-secondary);
+            color: var(--primary-color);
-          font-size: 0.9rem;
+            font-weight: 600;
-        }
-
-        &:last-child {
-          .status-indicator {
-            color: var(--success);
           }
 
           .status-text {
@@ -104,48 +80,21 @@
             font-weight: 600;
           }
         }
+
+        .status-step {
+          color: var(--text-secondary);
+          font-family: 'Courier New', monospace;
+          font-weight: 500;
+          min-width: 3rem;
+          text-align: left;
+        }
+
+        .status-text {
+          color: var(--text-secondary);
+          text-align: left;
+          flex: 1;
+        }
       }
     }
-
-    .progress-bar-container {
-      height: 8px;
-      background-color: var(--border-soft);
-      border-radius: 4px;
-      overflow: hidden;
-      margin-bottom: 0.5rem;
-    }
-
-    .progress-bar {
-      height: 100%;
-      background-color: var(--primary-color);
-      border-radius: 4px;
-      transition: width 0.5s ease;
-      background: linear-gradient(
-        to right,
-        var(--cream-color),
-        var(--primary-color),
-        var(--smoke-color)
-      );
-      box-shadow: 0px 0px 10px rgba(255, 200, 150, 0.4);
-    }
-
-    .progress-percentage {
-      text-align: right;
-      font-size: 0.875rem;
-      color: var(--text-secondary);
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-// Animation for the bouncing circles
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
   }
 }