release title adjustment

Update creamlinux executable name in README.md

.github/workflows/build.yml

@@ -1,19 +1,60 @@
-name: 'Build CreamLinux'
+name: 'Build and Release'
 
 on:
-  push:
-    branches: [main, master, develop]
-  pull_request:
-    branches: [main, master, develop]
   workflow_dispatch: # Allows manual triggering
 
 jobs:
-  build:
+  create-release:
+    permissions:
+      contents: write
+    runs-on: 'ubuntu-24.04'
+    outputs:
+      release_id: ${{ steps.create-release.outputs.result }}
+      version: ${{ steps.get-version.outputs.version }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: get version
+        id: get-version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Package version: $VERSION"
+
+      - name: create draft release
+        id: create-release
+        uses: actions/github-script@v6
+        env:
+          VERSION: ${{ steps.get-version.outputs.version }}
+        with:
+          script: |
+            const { data } = await github.rest.repos.createRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: `v${process.env.VERSION}`,
+              name: `v${process.env.VERSION}`,
+              body: 'Release.',
+              draft: true,
+              prerelease: false
+            })
+            return data.id
+
+  build-tauri:
+    needs: create-release
+    permissions:
+      contents: write
     strategy:
       fail-fast: false
       matrix:
         include:
-          - platform: 'ubuntu-22.04' # Stable Debian-based release
+          - platform: 'ubuntu-24.04'
             args: ''
 
     runs-on: ${{ matrix.platform }}
@@ -42,8 +83,13 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install -y \
-            libwebkit2gtk-4.1-dev \
+            libwebkit2gtk-4.1-0=2.44.0-2 \
-            libayatana-appindicator3-dev \
+            libwebkit2gtk-4.1-dev=2.44.0-2 \
+            libjavascriptcoregtk-4.1-0=2.44.0-2 \
+            libjavascriptcoregtk-4.1-dev=2.44.0-2 \
+            gir1.2-javascriptcoregtk-4.1=2.44.0-2 \
+            gir1.2-webkit2-4.1=2.44.0-2 \
+            libappindicator3-dev \
             librsvg2-dev \
             patchelf \
             build-essential \
@@ -56,49 +102,17 @@ jobs:
       - name: Install frontend dependencies
         run: npm ci
 
-      - name: Build Tauri app
+      - name: Build Tauri app with updater
         uses: tauri-apps/tauri-action@v0
-        # env:
+        env:
-        # No GITHUB_TOKEN since we're not creating releases
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        # TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-        # TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
         with:
-          # Build configuration
+          releaseId: ${{ needs.create-release.outputs.release_id }}
           projectPath: '.'
           includeDebug: false
           includeRelease: true
-          includeUpdaterJson: false
+          includeUpdaterJson: true
           tauriScript: 'npm run tauri'
           args: ${{ matrix.args }}
-
-          # No release configuration - just build artifacts
-          # Omitting tagName, releaseName, and releaseId means no release creation
-
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: creamlinux-ubuntu-20.04-artifacts
-          path: |
-            src-tauri/target/release/bundle/
-            src-tauri/target/release/creamlinux
-            src-tauri/target/release/creamlinux.exe
-          retention-days: 30
-          if-no-files-found: warn
-
-      - name: Upload AppImage (if exists)
-        uses: actions/upload-artifact@v4
-        with:
-          name: creamlinux-appimage
-          path: |
-            src-tauri/target/release/bundle/appimage/*.AppImage
-          retention-days: 30
-          if-no-files-found: ignore
-
-      - name: Upload DEB package (if exists)
-        uses: actions/upload-artifact@v4
-        with:
-          name: creamlinux-deb
-          path: |
-            src-tauri/target/release/bundle/deb/*.deb
-          retention-days: 30
-          if-no-files-found: ignore

README.md

@@ -29,21 +29,21 @@ While the core functionality is working, please be aware that this is an early r
 
 ### AppImage (Recommended)
 
-1. Download the latest `CreamLinux.AppImage` from the [Releases](https://github.com/Novattz/creamlinux-installer/releases) page
+1. Download the latest `creamlinux.AppImage` from the [Releases](https://github.com/Novattz/creamlinux-installer/releases) page
 2. Make it executable:
    ```bash
-   chmod +x CreamLinux.AppImage
+   chmod +x creamlinux.AppImage
    ```
 3. Run it:
 
    ```bash
-   ./CreamLinux.AppImage
+   ./creamlinux.AppImage
    ```
 
    For Nvidia users use this command:
 
    ```
-   WEBKIT_DISABLE_DMABUF_RENDERER=1 ./creamlinux.appimage
+   WEBKIT_DISABLE_DMABUF_RENDERER=1 ./creamlinux.AppImage
    ```
 
 ### Building from Source

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "creamlinux",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "creamlinux",
-      "version": "1.0.2",
+      "version": "1.0.6",
       "license": "MIT",
       "dependencies": {
         "@tauri-apps/api": "^2.5.0",
@@ -89,6 +89,7 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -2642,6 +2643,7 @@
       "integrity": "sha512-vvmsN0r7rguA+FySiCsbaTTobSftpIDIpPW81trAmsv9TGxg3YCujAxRYp/Uy8xmDgYCzzgulG62H7KYUFmeIg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^5.0.0",
         "@octokit/graphql": "^8.2.2",
@@ -4100,6 +4102,7 @@
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -4522,6 +4525,7 @@
       "integrity": "sha512-7zf4YyHA+jvBNfVrk2Gtvs6x7E8V+YDW05bNfG2XkWDJfYRXrTiP/DsB2zSYTaHX0bGIujTBQdMVAhb+j7mwpg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -4539,6 +4543,7 @@
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -4589,6 +4594,7 @@
       "integrity": "sha512-H+vqmWwT5xoNrXqWs/fesmssOW70gxFlgcMlYcBaWNPIEWDgLa4W9nkSPmhuOgLnXq9QYgkZ31fhDyLhleCsAg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.30.1",
         "@typescript-eslint/types": "8.30.1",
@@ -4798,6 +4804,7 @@
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5043,6 +5050,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -6078,6 +6086,7 @@
       "integrity": "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7462,6 +7471,7 @@
       "integrity": "sha512-1BEXAU2euRCG3xwgLVT1y0xbJEld1XOrmRJpUwRCcy7rxhSCwMrmEu9LXoPhHSCJG41V7YcQ2mjKRr5BA3ITIA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -11128,6 +11138,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11474,6 +11485,7 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.89.0.tgz",
       "integrity": "sha512-ld+kQU8YTdGNjOLfRWBzewJpU5cwEv/h5yyqlSeJcj6Yh8U4TDA9UA5FPicqDz/xgRPWRSYIQNiFks21TbA9KQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -11902,6 +11914,7 @@
       "integrity": "sha512-WnzIiRUzEUSHWuCH1S9ifa7eA3g4b5fpCzFQoTA5yZcyTra5P2gaYoCV5iX3VR5xB2h/laQfz3NXTCN4qdK/AQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@semantic-release/commit-analyzer": "^13.0.0-beta.1",
         "@semantic-release/error": "^4.0.0",
@@ -12896,6 +12909,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12981,6 +12995,7 @@
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13228,6 +13243,7 @@
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -13333,6 +13349,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "creamlinux",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.2.0",
   "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.4"
+version = "1.2.0"
 description = "DLC Manager for Steam games on Linux"
 authors = ["tickbase"]
 license = "MIT"
@@ -36,4 +36,4 @@ tauri-plugin-process = "2"
 custom-protocol = ["tauri/custom-protocol"]
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
-# tauri-plugin-updater = "2"
+tauri-plugin-updater = "2"

src-tauri/capabilities/default.json

@@ -3,5 +3,5 @@
   "identifier": "default",
   "description": "enables the default permissions",
   "windows": ["main"],
-  "permissions": ["core:default"]
+  "permissions": ["core:default", "updater:default", "process:default"]
 }

src-tauri/src/installer.rs

@@ -1001,27 +1001,48 @@ where
             info!("Created backup: {}", backup_path.display());
         }
 
-        // Map the Steam API DLL name to the corresponding SmokeAPI DLL name
+        // Determine if we need 32-bit or 64-bit SmokeAPI DLL based on the original Steam API DLL
-        let smoke_dll_name = match api_name.to_string_lossy().as_ref() {
+        let is_64bit = api_name.to_string_lossy().contains("64");
-            "steam_api.dll" => "SmokeAPI32.dll",
+        let target_arch = if is_64bit { "64" } else { "32" };
-            "steam_api64.dll" => "SmokeAPI64.dll",
-            _ => {
-                return Err(InstallerError::InstallationError(format!(
-                    "Unknown Steam API DLL: {}",
-                    api_name.to_string_lossy()
-                )));
-            }
-        };
 
-        // Extract the appropriate SmokeAPI DLL and rename it to the original Steam API DLL name
+        // Search through all files in the archive to find the matching SmokeAPI DLL
-        if let Ok(mut file) = archive.by_name(smoke_dll_name) {
+        let mut found_dll = false;
-            let mut outfile = fs::File::create(&original_path)?;
+        let mut tried_files = Vec::new();
-            io::copy(&mut file, &mut outfile)?;
+        let mut matching_dll_name: Option<String> = None;
-            info!("Installed {} as: {}", smoke_dll_name, original_path.display());
+
-        } else {
+        // First pass: find the matching DLL name
+        for i in 0..archive.len() {
+            if let Ok(file) = archive.by_index(i) {
+                let file_name = file.name();
+                tried_files.push(file_name.to_string());
+
+                // 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.to_lowercase().contains(&format!("{}.dll", target_arch)) {
+
+                      matching_dll_name = Some(file_name.to_string());
+                      break;
+                }
+            }
+        }
+
+        // Second pass: extract the matching DLL if found
+        if let Some(dll_name) = matching_dll_name {
+            if let Ok(mut smoke_file) = archive.by_name(&dll_name) {
+                let mut outfile = fs::File::create(&original_path)?;
+                io::copy(&mut smoke_file, &mut outfile)?;
+                info!("Installed {} as: {}", dll_name, original_path.display());
+                found_dll = true;
+            }
+        }
+
+        if !found_dll {
             return Err(InstallerError::InstallationError(format!(
-                "Could not find {} in the SmokeAPI zip file",
+                "Could not find {}-bit SmokeAPI DLL for {} in the zip file. Archive contains: {}",
-                smoke_dll_name
+                target_arch,
+                api_name.to_string_lossy(),
+                tried_files.join(", ")
             )));
         }
     }

src-tauri/src/main.rs

@@ -8,6 +8,7 @@ mod installer;
 mod searcher;
 
 use dlc_manager::DlcInfoWithState;
+use tauri_plugin_updater::Builder as UpdaterBuilder;
 use installer::{Game, InstallerAction, InstallerType};
 use log::{debug, error, info, warn};
 use parking_lot::Mutex;
@@ -505,19 +506,12 @@ fn main() {
 
     info!("Initializing CreamLinux application");
 
-    let app_state = AppState {
-        games: Mutex::new(HashMap::new()),
-        dlc_cache: Mutex::new(HashMap::new()),
-        fetch_cancellation: Arc::new(AtomicBool::new(false)),
-    };
-
     tauri::Builder::default()
+        .plugin(UpdaterBuilder::new().build())
         .plugin(tauri_plugin_process::init())
-        // .plugin(tauri_plugin_updater::Builder::new().build())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())
-        .manage(app_state)
         .invoke_handler(tauri::generate_handler![
             scan_steam_games,
             get_game_info,
@@ -543,6 +537,16 @@ fn main() {
                     }
                 }
             }
+            
+            // Initialize and manage AppState
+            let app_handle = app.handle().clone();
+            let state = AppState {
+                games: Mutex::new(HashMap::new()),
+                dlc_cache: Mutex::new(HashMap::new()),
+                fetch_cancellation: Arc::new(AtomicBool::new(false)),
+            };
+            app.manage(state);
+            
             Ok(())
         })
         .run(tauri::generate_context!())

src-tauri/src/searcher.rs

@@ -426,6 +426,7 @@ fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
     }
 
     // Detection logic with priority system
+    let has_steam_api_dll = !steam_api_files.is_empty();
     let is_native = determine_platform(
       has_libsteam_api,
       has_linux_steam_libs,
@@ -434,6 +435,7 @@ fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
       found_main_executable,
       linux_binary_count,
       windows_exe_count,
+      has_steam_api_dll,
     );
 
     debug!(
@@ -458,6 +460,7 @@ fn determine_platform(
   found_main_executable: bool,
   linux_binary_count: usize,
   windows_exe_count: usize,
+  has_steam_api_dll: bool,
 ) -> bool {
   // Priority 1: Strong Linux indicators
   if has_libsteam_api {
@@ -470,25 +473,31 @@ fn determine_platform(
       return true;
   }
 
-  // Priority 2: High confidence Linux indicators
+  // Priority 2: Strong Windows indicators - DLL files are Windows-only
+  if has_steam_api_dll {
+      debug!("Detected as Windows/Proton: steam_api.dll or steam_api64.dll found");
+      return false;
+  }
+
+  // Priority 3: High confidence Linux indicators
   if found_linux_binary && linux_binary_count >= 3 && !found_main_executable {
       debug!("Detected as native: Multiple Linux binaries, no main Windows executable");
       return true;
   }
 
-  // Priority 3: Balanced assessment
+  // Priority 4: Balanced assessment
   if found_linux_binary && !found_main_executable && windows_exe_count <= 2 {
       debug!("Detected as native: Linux binaries present, only installer/utility Windows files");
       return true;
   }
 
-  // Priority 4: Windows indicators
+  // Priority 5: Windows indicators
   if found_main_executable || (found_exe && !found_linux_binary) {
       debug!("Detected as Windows/Proton: Main executable or only Windows files found");
       return false;
   }
 
-  // Priority 5: Default fallback
+  // Priority 6: Default fallback
   if found_linux_binary {
       debug!("Detected as native: Linux binaries found (default fallback)");
       return true;

src-tauri/tauri.conf.json

@@ -10,11 +10,12 @@
     "active": true,
     "targets": "all",
     "category": "Utility",
-    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"]
+    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"],
+    "createUpdaterArtifacts": true
   },
   "productName": "Creamlinux",
   "mainBinaryName": "creamlinux",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "identifier": "com.creamlinux.dev",
   "app": {
     "withGlobalTauri": false,
@@ -32,5 +33,13 @@
     "security": {
       "csp": null
     }
+  },
+  "plugins": {
+    "updater": {
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IERENzBFNjU0RTBBMUMyNzgKUldSNHdxSGdWT1p3M1liUE0vOGFCRkc2cEQwdWdRR2UyY2VmN3kzckNONCtsaGF0Y1d2WjdOWVEK",
+      "endpoints": [
+        "https://github.com/Novattz/creamlinux-installer/releases/latest/download/latest.json"
+      ]
+    }
   }
 }

src/App.tsx

@@ -1,11 +1,10 @@
+import { useState } from 'react'
 import { useAppContext } from '@/contexts/useAppContext'
-import { UpdateNotifier } from '@/components/updater'
 import { useAppLogic } from '@/hooks'
 import './styles/main.scss'
 
 // Layout components
-import { Header, Sidebar, InitialLoadingScreen, ErrorBoundary } from '@/components/layout'
+import { Header, Sidebar, InitialLoadingScreen, ErrorBoundary, UpdateScreen, AnimatedBackground } from '@/components/layout'
-import AnimatedBackground from '@/components/layout/AnimatedBackground'
 
 // Dialog components
 import { ProgressDialog, DlcSelectionDialog, SettingsDialog } from '@/components/dialogs'
@@ -17,6 +16,7 @@ import { GameList } from '@/components/games'
  * Main application component
  */
 function App() {
+  const [updateComplete, setUpdateComplete] = useState(false)
   // Get application logic from hook
   const {
     filter,
@@ -29,7 +29,7 @@ function App() {
     handleRefresh,
     isLoading,
     error,
-  } = useAppLogic({ autoLoad: true })
+  } = useAppLogic({ autoLoad: updateComplete })
 
   // Get action handlers from context
   const {
@@ -45,7 +45,12 @@ function App() {
     handleSettingsClose,
   } = useAppContext()
 
-  // Show loading screen during initial load
+  // Show update screen first
+  if (!updateComplete) {
+    return <UpdateScreen onComplete={() => setUpdateComplete(true)} />
+  }
+
+  // Then show initial loading screen
   if (isInitialLoad) {
     return <InitialLoadingScreen message={scanProgress.message} progress={scanProgress.progress} />
   }
@@ -114,9 +119,6 @@ function App() {
           visible ={settingsDialog.visible}
           onClose={handleSettingsClose}
         />
-        
-        {/* Simple update notifier that uses toast - no UI component */}
-        <UpdateNotifier />
       </div>
     </ErrorBoundary>
   )

src/components/common/ProgressBar.tsx

@@ -0,0 +1,22 @@
+interface ProgressBarProps {
+  progress: number
+}
+
+/**
+ * Simple progress bar component
+ */
+const ProgressBar = ({ progress }: ProgressBarProps) => {
+  return (
+    <div className="progress-container">
+      <div className="progress-bar">
+        <div 
+          className="progress-fill" 
+          style={{ width: `${Math.min(progress, 100)}%` }}
+        />
+      </div>
+      <span className="progress-text">{Math.round(progress)}%</span>
+    </div>
+  )
+}
+
+export default ProgressBar

src/components/common/index.ts

@@ -1,3 +1,4 @@
 export { default as LoadingIndicator } from './LoadingIndicator'
+export { default as ProgressBar } from './ProgressBar'
 
 export type { LoadingSize, LoadingType } from './LoadingIndicator'

src/components/dialogs/SettingsDialog.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { getVersion } from '@tauri-apps/api/app'
 import {
   Dialog,
   DialogHeader,
@@ -19,6 +20,23 @@ interface SettingsDialogProps {
  * Contains application settings and configuration options
  */
 const SettingsDialog: React.FC<SettingsDialogProps> = ({ visible, onClose }) => {
+  const [appVersion, setAppVersion] = useState<string>('Loading...')
+
+  useEffect(() => {
+    // Fetch app version when component mounts
+    const fetchVersion = async () => {
+      try {
+        const version = await getVersion()
+        setAppVersion(version)
+      } catch (error) {
+        console.error('Failed to fetch app version:', error)
+        setAppVersion('Unknown')
+      }
+    }
+
+    fetchVersion()
+  }, [])
+
   return (
     <Dialog visible={visible} onClose={onClose} size="medium">
       <DialogHeader onClose={onClose} hideCloseButton={true}>
@@ -59,7 +77,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">{appVersion}</span>
               </div>
               <div className="info-row">
                 <span className="info-label">Build:</span>

src/components/games/GameItem.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { findBestGameImage } from '@/services/ImageService'
 import { Game } from '@/types'
 import { ActionButton, ActionType, Button } from '@/components/buttons'
+import { Icon } from '@/components/icons'
 
 interface GameItemProps {
   game: Game
@@ -150,9 +151,9 @@ const GameItem = ({ game, onAction, onEdit }: GameItemProps) => {
               onClick={handleEdit}
               disabled={!game.cream_installed || !!game.installing}
               title="Manage DLCs"
-              className="edit-button"
+              className="edit-button settings-icon-button"
             >
-              Manage DLCs
+              <Icon name="Settings" size="md" />
             </Button>
           )}
         </div>

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...' },
-      { 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
+    if (newStep !== -1 && newStep !== currentStep) {
-    const currentMessage = messages.find((m) => progress <= m.threshold)?.message || 'Loading...'
+      setCurrentStep(newStep)
-
+    } else if (newStep === -1 && currentStep !== steps.length - 1) {
-    // Add new messages to the log as progress increases
+      setCurrentStep(steps.length - 1)
-    if (currentMessage && !detailedStatus.includes(currentMessage)) {
-      setDetailedStatus((prev) => [...prev, currentMessage])
     }
-  }, [progress, detailedStatus])
+  }, [progress, currentStep, steps.length])
 
   return (
     <div className="initial-loading-screen">
@@ -42,31 +38,19 @@ 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>
   )

src/components/layout/UpdateScreen.tsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useCallback } from 'react'
+import { check } from '@tauri-apps/plugin-updater'
+import { relaunch } from '@tauri-apps/plugin-process'
+import { ProgressBar } from '@/components/common'
+
+interface UpdateScreenProps {
+  onComplete: () => void
+}
+
+/**
+ * Update screen displayed before the initial loading screen
+ * Checks for updates and installs them automatically
+ */
+const UpdateScreen = ({ onComplete }: UpdateScreenProps) => {
+  const [checking, setChecking] = useState(true)
+  const [downloading, setDownloading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [version, setVersion] = useState('')
+
+  const checkForUpdates = useCallback(async () => {
+    try {
+      setChecking(true)
+      const update = await check()
+
+      // Check if update exists (null means no update available)
+      if (update) {
+        setChecking(false)
+        setDownloading(true)
+        setVersion(update.version)
+
+        // Download and install the update
+        await update.downloadAndInstall((event) => {
+          switch (event.event) {
+            case 'Started': {
+              const contentLength = event.data.contentLength
+              console.log(`Started downloading ${contentLength} bytes`)
+              break
+            }
+            case 'Progress': {
+              const { chunkLength } = event.data
+              // Calculate cumulative progress
+              setProgress((prev) => {
+                const newProgress = prev + chunkLength
+                return Math.min(newProgress, 100)
+              })
+              break
+            }
+            case 'Finished':
+              console.log('Download finished, installing...')
+              setProgress(100)
+              break
+          }
+        })
+
+        // Relaunch the app
+        await relaunch()
+      } else {
+        // No update available (update is null), proceed to normal loading
+        setChecking(false)
+        onComplete()
+      }
+    } catch (error) {
+      console.error('Update check failed:', error)
+      // On error, just continue to the app
+      setChecking(false)
+      onComplete()
+    }
+  }, [onComplete])
+
+  useEffect(() => {
+    checkForUpdates()
+  }, [checkForUpdates])
+
+  return (
+    <div className="initial-loading-screen">
+      <div className="loading-content">
+        <h1>CreamLinux</h1>
+
+        <div className="loading-animation">
+          {checking && <div className="loading-spinner"></div>}
+        </div>
+
+        <p className="loading-message">
+          {checking && 'Checking for updates...'}
+          {downloading && `Downloading update v${version}...`}
+        </p>
+
+        {downloading && <ProgressBar progress={progress} />}
+      </div>
+    </div>
+  )
+}
+
+export default UpdateScreen

src/components/layout/index.ts

@@ -4,3 +4,4 @@ export { default as Sidebar } from './Sidebar'
 export { default as AnimatedBackground } from './AnimatedBackground'
 export { default as InitialLoadingScreen } from './InitialLoadingScreen'
 export { default as ErrorBoundary } from './ErrorBoundary'
+export { default as UpdateScreen } from './UpdateScreen'

src/components/updater/UpdateNotifier.tsx

@@ -1,14 +0,0 @@
-import { useUpdateChecker } from '@/hooks/useUpdateChecker'
-
-/**
- * Simple component that uses the update checker hook
- * Can be dropped in anywhere in the app
- */
-const UpdateNotifier = () => {
-  useUpdateChecker()
-  
-  // This component doesn't render anything
-  return null
-}
-
-export default UpdateNotifier

src/components/updater/index.ts

@@ -1,5 +0,0 @@
-// Update checker implementation
-export { default as useUpdateChecker } from '@/hooks/useUpdateChecker'
-
-// Simple component for using the checker
-export { default as UpdateNotifier } from './UpdateNotifier'

src/hooks/useUpdateChecker.ts

@@ -1,43 +0,0 @@
-import { useEffect } from 'react'
-import { check } from '@tauri-apps/plugin-updater'
-import { useToasts } from '@/hooks'
-
-/**
- * Hook that silently checks for updates and shows a toast notification if an update is available
- */
-export function useUpdateChecker() {
-  const { success, error } = useToasts()
-
-  useEffect(() => {
-    // Check for updates on component mount
-    const checkForUpdates = async () => {
-      try {
-        // Check for updates
-        const update = await check()
-        
-        // If update is available, show a toast notification
-        if (update) {
-          console.log(`Update available: ${update.version}`)
-          success(`Update v${update.version} available! Check GitHub for details.`, {
-            duration: 8000 // Show for 8 seconds
-          })
-        }
-      } catch (err) {
-        // Log error but don't show to user
-        console.error('Update check failed:', err)
-      }
-    }
-
-    // Small delay to avoid interfering with app startup
-    const timer = setTimeout(() => {
-      checkForUpdates()
-    }, 3000)
-
-    return () => clearTimeout(timer)
-  }, [success, error])
-
-  // This hook doesn't return anything
-  return null
-}
-
-export default useUpdateChecker

src/styles/components/buttons/_action_button.scss

@@ -96,6 +96,17 @@
     transform: none;
     box-shadow: none;
   }
+
+  // Settings icon button variant
+  &.settings-icon-button {
+    svg {
+      transition: transform var(--duration-normal) var(--easing-ease-out);
+    }
+
+    &:hover svg {
+      transform: rotate(90deg);
+    }
+  }
 }
 
 // Animation for loading state

src/styles/components/common/_index.scss

@@ -1,2 +1,2 @@
 @forward './loading';
-@forward './updater';
+@forward './progress_bar';

src/styles/components/common/_progress_bar.scss

@@ -0,0 +1,39 @@
+@use '../../themes/index' as *;
+@use '../../abstracts/index' as *;
+
+/* 
+  Progress bar component styles
+*/
+
+.progress-container {
+  width: 100%;
+  max-width: 400px;
+  margin: 1.5rem auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--border-dark);
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary-color);
+  transition: width 0.3s ease;
+  border-radius: 4px;
+  position: relative;
+}
+
+.progress-text {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-weight: var(--medium);
+}

src/styles/components/common/_updater.scss

@@ -1,85 +0,0 @@
-@use '../../themes/index' as *;
-@use '../../abstracts/index' as *;
-
-/* 
-  Update checker component styles
-*/
-.update-checker {
-  border-radius: var(--radius-md);
-  background-color: var(--elevated-bg);
-  padding: 1.25rem;
-  margin: 1rem 0;
-  border: 1px solid var(--border-soft);
-  box-shadow: var(--shadow-standard);
-  max-width: 500px;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: var(--z-modal) - 1;
-
-  &.error {
-    border-color: var(--danger);
-    background-color: var(--danger-soft);
-  }
-
-  .update-info {
-    margin-bottom: 1rem;
-
-    h3 {
-      font-size: 1.2rem;
-      color: var(--primary-color);
-      margin-bottom: 0.5rem;
-      font-weight: var(--bold);
-    }
-
-    p {
-      color: var(--text-secondary);
-      margin-bottom: 0.5rem;
-      font-size: 0.9rem;
-    }
-
-    .update-notes {
-      font-size: 0.85rem;
-      color: var(--text-soft);
-      max-height: 120px;
-      overflow-y: auto;
-      padding: 0.5rem;
-      background-color: rgba(0, 0, 0, 0.1);
-      border-radius: var(--radius-sm);
-      white-space: pre-line;
-      margin-top: 0.5rem;
-      @include custom-scrollbar;
-    }
-  }
-
-  .update-progress {
-    margin-top: 1rem;
-
-    .progress-bar-container {
-      height: 6px;
-      background-color: var(--border-soft);
-      border-radius: 3px;
-      margin-bottom: 0.5rem;
-      overflow: hidden;
-    }
-
-    .progress-bar {
-      height: 100%;
-      background-color: var(--primary-color);
-      border-radius: 3px;
-      transition: width 0.3s ease;
-    }
-
-    p {
-      font-size: 0.8rem;
-      color: var(--text-secondary);
-      text-align: right;
-    }
-  }
-
-  .update-actions {
-    display: flex;
-    gap: 0.75rem;
-    margin-top: 1rem;
-  }
-}

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);
   }
 }