release title adjustment

Update creamlinux executable name in README.md

.github/ISSUE_TEMPLATE/bug_report.md

@@ -31,6 +31,7 @@ If applicable, add screenshots to help explain your problem.
 - Desktop Environment: [e.g. GNOME, KDE, etc.]
 - CreamLinux Version: [e.g. 0.1.0]
 - Steam Version: [e.g. latest]
+- Graphics card: [e.g. 2060 rtx]
 
 ## Game Information
 

.github/workflows/build.yml

@@ -0,0 +1,118 @@
+name: 'Build and Release'
+
+on:
+  workflow_dispatch: # Allows manual triggering
+
+jobs:
+  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-24.04'
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: './src-tauri -> target'
+
+      - name: Install system dependencies (Ubuntu)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libwebkit2gtk-4.1-0=2.44.0-2 \
+            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 \
+            curl \
+            wget \
+            file \
+            libssl-dev \
+            libgtk-3-dev
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Build Tauri app with updater
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+        with:
+          releaseId: ${{ needs.create-release.outputs.release_id }}
+          projectPath: '.'
+          includeDebug: false
+          includeRelease: true
+          includeUpdaterJson: true
+          tauriScript: 'npm run tauri'
+          args: ${{ matrix.args }}

.gitignore

@@ -15,8 +15,6 @@ docs
 *.lock
 .env
 CHANGELOG.md
-scripts/prepare-release.js
-scripts/update-server.js
 
 # Editor directories and files
 .vscode/*

README.md

@@ -1,9 +1,11 @@
 # CreamLinux
 
-CreamLinux is a GUI application for Linux that simplifies the management of DLC in Steam games. It provides a user-friendly interface to install and configure CreamAPI (for native Linux games) and SmokeAPI (for Windows games running through Proton). 
+CreamLinux is a GUI application for Linux that simplifies the management of DLC in Steam games. It provides a user-friendly interface to install and configure CreamAPI (for native Linux games) and SmokeAPI (for Windows games running through Proton).
 
 ## Watch the demo here:
+
 [![Watch the demo](./src/assets/screenshot.png)](https://www.youtube.com/watch?v=ZunhZnKFLlg)
+
 ## Beta Status
 
 ⚠️ **IMPORTANT**: CreamLinux is currently in BETA. This means:
@@ -27,19 +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
@@ -48,6 +52,7 @@ While the core functionality is working, please be aware that this is an early r
 
 - Rust 1.77.2 or later
 - Node.js 18 or later
+- webkit2gtk-4.1 (libwebkit2gtk-4.1 for debian)
 - npm or yarn
 
 #### Steps
@@ -107,7 +112,7 @@ update-desktop-database ~/.local/share/applications
 
 - **Game doesn't load**: Make sure the launch options are correctly set in Steam
 - **DLCs not showing up**: Try refreshing the game list and reinstalling
-- **Cannot find Steam**: Ensure Steam is installed and you've launched it at least once (Flatpak is not supported yet)
+- **Cannot find Steam**: Ensure Steam is installed and you've launched it at least once
 
 ### Debug Logs
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "creamlinux",
-  "version": "1.0.0",
+  "version": "1.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "creamlinux",
-      "version": "1.0.0",
+      "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.1",
+  "version": "1.2.0",
   "type": "module",
   "author": "Tickbase",
   "repository": "https://github.com/Novattz/creamlinux-installer",

src-tauri/.gitignore

@@ -2,3 +2,4 @@
 # will have compiled files and executables
 /target/
 /gen/schemas
+/resources/

src-tauri/Cargo.toml

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

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/capabilities/desktop.json

@@ -9,6 +9,5 @@
     "main"
   ],
   "permissions": [
-    "updater:default"
   ]
 }

src-tauri/src/installer.rs

@@ -1001,15 +1001,48 @@ where
             info!("Created backup: {}", backup_path.display());
         }
 
-        // Extract the appropriate DLL directly to the game directory
-        if let Ok(mut file) = archive.by_name(&api_name.to_string_lossy()) {
-            let mut outfile = fs::File::create(&original_path)?;
-            io::copy(&mut file, &mut outfile)?;
-            info!("Installed SmokeAPI as: {}", original_path.display());
-        } else {
+        // Determine if we need 32-bit or 64-bit SmokeAPI DLL based on the original Steam API DLL
+        let is_64bit = api_name.to_string_lossy().contains("64");
+        let target_arch = if is_64bit { "64" } else { "32" };
+
+        // Search through all files in the archive to find the matching SmokeAPI DLL
+        let mut found_dll = false;
+        let mut tried_files = Vec::new();
+        let mut matching_dll_name: Option<String> = None;
+
+        // 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",
-                api_name.to_string_lossy()
+                "Could not find {}-bit SmokeAPI DLL for {} in the zip file. Archive contains: {}",
+                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,8 +537,18 @@ 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!())
         .expect("error while running tauri application");
-}
+}

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;
@@ -695,4 +704,4 @@ pub async fn find_installed_games(steamapps_paths: &[PathBuf]) -> Vec<GameInfo>
 
     info!("Found {} installed games", games.len());
     games
-}
+}

src-tauri/tauri.conf.json

@@ -10,24 +10,13 @@
     "active": true,
     "targets": "all",
     "category": "Utility",
-    "createUpdaterArtifacts": true,
-    "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.1",
+  "version": "1.2.0",
   "identifier": "com.creamlinux.dev",
-  "plugins": {
-    "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDJDNEI1NzBBRDUxODQ3RjEKUldUeFJ4alZDbGRMTE5Vc241NG5yL080UklnaW1iUGdUWElPRXloRGtKZ3M2SWkzK0RGSDh3Q2kK",
-      "endpoints": [
-        "https://github.com/Novattz/creamlinux-installer/releases/latest/download/latest.json"
-      ],
-      "windows": {
-        "installMode": "passive"
-      }
-    }
-  },
   "app": {
     "withGlobalTauri": false,
     "windows": [
@@ -44,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,14 +1,13 @@
+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 AnimatedBackground from '@/components/layout/AnimatedBackground'
+import { Header, Sidebar, InitialLoadingScreen, ErrorBoundary, UpdateScreen, AnimatedBackground } from '@/components/layout'
 
 // Dialog components
-import { ProgressDialog, DlcSelectionDialog } from '@/components/dialogs'
+import { ProgressDialog, DlcSelectionDialog, SettingsDialog } from '@/components/dialogs'
 
 // Game components
 import { GameList } from '@/components/games'
@@ -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 {
@@ -40,9 +40,17 @@ function App() {
     handleGameAction,
     handleDlcConfirm,
     handleGameEdit,
+    settingsDialog,
+    handleSettingsOpen,
+    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} />
   }
@@ -63,7 +71,7 @@ function App() {
 
         <div className="main-content">
           {/* Sidebar for filtering */}
-          <Sidebar setFilter={setFilter} currentFilter={filter} />
+          <Sidebar setFilter={setFilter} currentFilter={filter} onSettingsClick={handleSettingsOpen} />
 
           {/* Show error or game list */}
           {error ? (
@@ -105,9 +113,12 @@ function App() {
           onClose={handleDlcDialogClose}
           onConfirm={handleDlcConfirm}
         />
-        
-        {/* Simple update notifier that uses toast - no UI component */}
-        <UpdateNotifier />
+
+        {/* Settings Dialog */}
+        <SettingsDialog 
+          visible ={settingsDialog.visible}
+          onClose={handleSettingsClose}
+        />
       </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

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react'
+import { getVersion } from '@tauri-apps/api/app'
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogActions,
+} from '@/components/dialogs'
+import { Button } from '@/components/buttons'
+import { Icon, settings } from '@/components/icons'
+
+interface SettingsDialogProps {
+  visible: boolean
+  onClose: () => void
+}
+
+/**
+ * Settings Dialog component
+ * 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}>
+        <div className="settings-header">
+          <Icon name={settings} variant="bold" size="md" />
+          <h3>Settings</h3>
+        </div>
+      </DialogHeader>
+
+      <DialogBody>
+        <div className="settings-content">
+          <div className="settings-section">
+            <h4>General Settings</h4>
+            <p className="settings-description">
+              Configure your CreamLinux preferences and application behavior.
+            </p>
+            
+            <div className="settings-placeholder">
+              <div className="placeholder-icon"> <Icon name={settings} variant="bold" size="xl" /> </div>
+              <div className="placeholder-text">
+                <h5>Settings Coming Soon</h5>
+                <p>
+                  Working on adding customizable settings to improve your experience.
+                  Future options may include:
+                </p>
+                <ul>
+                  <li>Custom Steam library paths</li>
+                  <li>Automatic update settings</li>
+                  <li>Scan frequency options</li>
+                  <li>DLC catalog</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div className="settings-section">
+            <h4>About CreamLinux</h4>
+            <div className="app-info">
+              <div className="info-row">
+                <span className="info-label">Version:</span>
+                <span className="info-value">{appVersion}</span>
+              </div>
+              <div className="info-row">
+                <span className="info-label">Build:</span>
+                <span className="info-value">Beta</span>
+              </div>
+              <div className="info-row">
+                <span className="info-label">Repository:</span>
+                <a 
+                  href="https://github.com/Novattz/creamlinux-installer" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="info-link"
+                >
+                  GitHub
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogBody>
+
+      <DialogFooter>
+        <DialogActions>
+          <Button variant="secondary" onClick={onClose}>
+            Close
+          </Button>
+        </DialogActions>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export default SettingsDialog

src/components/dialogs/index.ts

@@ -6,6 +6,7 @@ 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 { default as SettingsDialog } from './SettingsDialog'
 
 // Export types
 export type { DialogProps } from './Dialog'

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/icons/index.ts

@@ -28,6 +28,7 @@ export const trash = 'Trash'
 export const warning = 'Warning'
 export const wine = 'Wine'
 export const diamond = 'Diamond'
+export const settings = 'Settings'
 
 // Brand icons
 export const discord = 'Discord'
@@ -57,6 +58,7 @@ export const IconNames = {
   Warning: warning,
   Wine: wine,
   Diamond: diamond,
+  Settings: settings,
 
   // Brand icons
   Discord: discord,

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

@@ -16,3 +16,4 @@ 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'
+export { ReactComponent as Settings } from './settings.svg'

src/components/icons/ui/bold/settings.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="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5"/></svg>

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

@@ -16,3 +16,4 @@ 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'
+export { ReactComponent as Settings } from './settings.svg'

src/components/icons/ui/outline/settings.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="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zM11 20h1.975l.35-2.65q.775-.2 1.438-.587t1.212-.938l2.475 1.025l.975-1.7l-2.15-1.625q.125-.35.175-.737T17.5 12t-.05-.787t-.175-.738l2.15-1.625l-.975-1.7l-2.475 1.05q-.55-.575-1.212-.962t-1.438-.588L13 4h-1.975l-.35 2.65q-.775.2-1.437.588t-1.213.937L5.55 7.15l-.975 1.7l2.15 1.6q-.125.375-.175.75t-.05.8q0 .4.05.775t.175.75l-2.15 1.625l.975 1.7l2.475-1.05q.55.575 1.213.963t1.437.587zm1.05-4.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.487 1.025T8.55 12t1.013 2.475T12.05 15.5M12 12"/></svg>

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[]>([
-    'Initializing application...',
-    'Setting up Steam integration...',
-    'Preparing DLC management...',
-  ])
+  const [currentStep, setCurrentStep] = useState(0)
 
-  // 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 = [
-      { 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])
+    const stepThresholds = [25, 50, 75, 100]
+    const newStep = stepThresholds.findIndex(threshold => progress < threshold)
+    
+    if (newStep !== -1 && newStep !== currentStep) {
+      setCurrentStep(newStep)
+    } else if (newStep === -1 && currentStep !== steps.length - 1) {
+      setCurrentStep(steps.length - 1)
     }
-  }, [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 */}
-          <div className="loading-circles">
-            <div className="circle circle-1"></div>
-            <div className="circle circle-2"></div>
-            <div className="circle circle-3"></div>
-          </div>
+          {/* Spinner animation */}
+          <div className="loading-spinner"></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 key={index} className="status-line">
-              <span className="status-indicator">○</span>
-              <span className="status-text">{status}</span>
-            </div>
-          ))}
+          <div className="status-line active">
+            <span className="status-step">[{currentStep + 1}/{steps.length}]</span>
+            <span className="status-text">{steps[currentStep]}</span>
+          </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/components/layout/Sidebar.tsx

@@ -1,8 +1,9 @@
-import { Icon, layers, linux, proton } from '@/components/icons'
+import { Icon, layers, linux, proton, settings } from '@/components/icons'
 
 interface SidebarProps {
   setFilter: (filter: string) => void
   currentFilter: string
+  onSettingsClick: () => void
 }
 
 // Define a type for filter items that makes variant optional
@@ -17,7 +18,7 @@ type FilterItem = {
  * Application sidebar component
  * Contains filters for game types
  */
-const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
+const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) => {
   // Available filter options with icons
   const filters: FilterItem[] = [
     { id: 'all', label: 'All Games', icon: layers, variant: 'bold' },
@@ -45,6 +46,12 @@ const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
           </li>
         ))}
       </ul>
+
+      <div className="settings-button" onClick={onSettingsClick}>
+        <Icon name={settings} variant="bold" size="md" className="settings-icon" />
+        <span>Settings</span>
+      </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/contexts/AppContext.tsx

@@ -49,6 +49,11 @@ export interface AppContextType {
   handleGameAction: (gameId: string, action: ActionType) => Promise<void>
   handleDlcConfirm: (selectedDlcs: DlcInfo[]) => void
 
+  // Settings
+  settingsDialog: { visible: boolean }
+  handleSettingsOpen: () => void
+  handleSettingsClose: () => void
+
   // Toast notifications
   showToast: (
     message: string,

src/contexts/AppProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { AppContext, AppContextType } from './AppContext'
 import { useGames, useDlcManager, useGameActions, useToasts } from '@/hooks'
 import { DlcInfo } from '@/types'
@@ -35,6 +35,18 @@ export const AppProvider = ({ children }: AppProviderProps) => {
 
   const { toasts, removeToast, success, error: showError, warning, info } = useToasts()
 
+  // Settings dialog state
+  const [settingsDialog, setSettingsDialog] = useState({ visible: false })
+
+  // Settings handlers
+  const handleSettingsOpen = () => {
+    setSettingsDialog({ visible: true })
+  }
+
+  const handleSettingsClose = () => {
+    setSettingsDialog({ visible: false })
+  }
+
   // Game action handler with proper error reporting
   const handleGameAction = async (gameId: string, action: ActionType) => {
     const game = games.find((g) => g.id === gameId)
@@ -180,6 +192,11 @@ export const AppProvider = ({ children }: AppProviderProps) => {
     handleDlcConfirm,
     handleProgressDialogClose: handleCloseProgressDialog,
 
+    // Settings
+    settingsDialog,
+    handleSettingsOpen,
+    handleSettingsClose,
+
     // Toast notifications
     showToast,
   }

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/dialogs/_index.scss

@@ -1,3 +1,4 @@
 @forward './dialog';
 @forward './dlc_dialog';
 @forward './progress_dialog';
+@forward './settings_dialog';

src/styles/components/dialogs/_settings_dialog.scss

@@ -0,0 +1,162 @@
+@use '../../themes/index' as *;
+@use '../../abstracts/index' as *;
+
+/* 
+  Settings dialog styles
+*/
+
+.settings-header {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.settings-section {
+  h4 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-soft);
+  }
+
+  .settings-description {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.4;
+  }
+}
+
+.settings-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+  background-color: var(--border-dark);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-soft);
+
+  .placeholder-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.7;
+  }
+
+  .placeholder-text {
+    h5 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 0.75rem;
+    }
+
+    p {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+      line-height: 1.4;
+      margin-bottom: 1rem;
+    }
+
+    ul {
+      text-align: left;
+      color: var(--text-soft);
+      font-size: 0.85rem;
+      line-height: 1.6;
+      max-width: 300px;
+
+      li {
+        margin-bottom: 0.25rem;
+
+        &::before {
+          content: '•';
+          color: var(--primary-color);
+          margin-right: 0.5rem;
+        }
+      }
+    }
+  }
+}
+
+.app-info {
+  background-color: var(--border-dark);
+  border-radius: var(--radius-sm);
+  padding: 1rem;
+  border: 1px solid var(--border-soft);
+
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--border-soft);
+    }
+
+    .info-label {
+      font-weight: 500;
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+
+    .info-value {
+      color: var(--text-primary);
+      font-size: 0.9rem;
+      font-family: monospace;
+    }
+
+    .info-link {
+      color: var(--primary-color);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--secondary-color);
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// Settings button in sidebar
+.settings-button {
+  margin-top: auto;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-sm);
+  transition: all var(--duration-normal) var(--easing-ease-out);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+    border-color: var(--border-soft);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  .settings-icon {
+    flex-shrink: 0;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover .settings-icon {
+    transform: rotate(45deg);
+  }
+}

src/styles/components/layout/_loading_screen.scss

@@ -8,19 +8,21 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--primary-bg);
+  width: 100%;
+  height: 100%;
+  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;
-    width: 90%;
+    display: flex;
+    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 {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      margin-bottom: 1rem;
-
-      .circle {
-        width: 20px;
-        height: 20px;
+      // Spinner styles - thicker border
+      .loading-spinner {
+        width: 50px;
+        height: 50px;
         border-radius: 50%;
-        animation: bounce 1.4s infinite ease-in-out both;
-
-        &.circle-1 {
-          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);
-        }
+        border: 6px solid rgba(255, 255, 255, 0.1);
+        border-top-color: var(--primary-color);
+        animation: spin 1s linear infinite;
       }
     }
 
     .loading-message {
-      font-size: 1.1rem;
+      font-size: 1rem;
       color: var(--text-secondary);
-      margin-bottom: 1.5rem;
-      min-height: 3rem;
+      margin: 0;
     }
 
     .loading-status-log {
-      margin: 1rem 0;
-      text-align: left;
-      max-height: 100px;
-      overflow-y: auto;
-      background-color: rgba(0, 0, 0, 0.2);
-      border-radius: var(--radius-sm);
-      padding: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+      max-width: 400px;
 
       .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 {
-          color: var(--primary-color);
-          margin-right: 0.5rem;
-          font-size: 1.2rem;
-        }
+        &.active {
+          background-color: rgba(var(--primary-color-rgb), 0.1);
 
-        .status-text {
-          color: var(--text-secondary);
-          font-size: 0.9rem;
-        }
-
-        &:last-child {
-          .status-indicator {
-            color: var(--success);
+          .status-step {
+            color: var(--primary-color);
+            font-weight: 600;
           }
 
           .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);
   }
 }