Update README.md

Bump vite from 6.3.1 to 6.3.5

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,7 +3,7 @@ name: Bug Report
 about: Create a report to help improve CreamLinux
 title: '[BUG] '
 labels: bug
-assignees: ''
+assignees: 'Novattz'
 ---
 
 ## Bug Description
@@ -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/ISSUE_TEMPLATE/feature_request.md

@@ -3,7 +3,7 @@ name: Feature Request
 about: Suggest an idea for CreamLinux
 title: '[FEATURE] '
 labels: enhancement
-assignees: ''
+assignees: 'Novattz'
 ---
 
 ## Feature Description

.github/workflows/build.yml

@@ -0,0 +1,104 @@
+name: 'Build CreamLinux'
+
+on:
+  push:
+    branches: [main, master, develop]
+  pull_request:
+    branches: [main, master, develop]
+  workflow_dispatch: # Allows manual triggering
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: 'ubuntu-22.04' # Stable Debian-based release
+            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-dev \
+            libayatana-appindicator3-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
+        uses: tauri-apps/tauri-action@v0
+        # env:
+        # No GITHUB_TOKEN since we're not creating releases
+        # TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+        # TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+        with:
+          # Build configuration
+          projectPath: '.'
+          includeDebug: false
+          includeRelease: true
+          includeUpdaterJson: false
+          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

.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

@@ -2,7 +2,9 @@
 
 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).
 
-![Screenshot](./src/assets/screenshot.png)
+## Watch the demo here:
+
+[![Watch the demo](./src/assets/screenshot.png)](https://www.youtube.com/watch?v=ZunhZnKFLlg)
 
 ## Beta Status
 
@@ -33,16 +35,24 @@ While the core functionality is working, please be aware that this is an early r
    chmod +x CreamLinux.AppImage
    ```
 3. Run it:
+
    ```bash
    ./CreamLinux.AppImage
    ```
 
+   For Nvidia users use this command:
+
+   ```
+   WEBKIT_DISABLE_DMABUF_RENDERER=1 ./creamlinux.appimage
+   ```
+
 ### Building from Source
 
 #### Prerequisites
 
 - Rust 1.77.2 or later
 - Node.js 18 or later
+- webkit2gtk-4.1 (libwebkit2gtk-4.1 for debian)
 - npm or yarn
 
 #### Steps
@@ -102,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,13 @@
 {
   "name": "creamlinux",
-  "version": "0.1.3",
+  "version": "1.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "creamlinux",
-      "version": "0.1.3",
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
         "@tauri-apps/api": "^2.5.0",
         "@tauri-apps/plugin-process": "^2.2.1",
@@ -39,7 +40,7 @@
         "semantic-release": "^24.2.4",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.26.1",
-        "vite": "^6.3.1",
+        "vite": "^6.3.5",
         "vite-plugin-svgr": "^4.3.0"
       }
     },
@@ -12858,13 +12859,13 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.12",
+      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2"
       },
       "engines": {
@@ -12875,9 +12876,9 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.3",
+      "version": "6.4.4",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -13222,18 +13223,18 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "6.3.1",
+      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-kkzzkqtMESYklo96HKKPE5KKLkC1amlsqt+RjFMlX2AvbRB/0wghap19NdBxxwGZ+h/C6DLCrcEphPIItlGrRQ==",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
         "rollup": "^4.34.9",
-        "tinyglobby": "^0.2.12"
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -13312,9 +13313,9 @@
       }
     },
     "node_modules/vite/node_modules/fdir": {
-      "version": "6.4.3",
+      "version": "6.4.4",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "creamlinux",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "author": "Tickbase",
   "repository": "https://github.com/Novattz/creamlinux-installer",
@@ -47,7 +47,7 @@
     "semantic-release": "^24.2.4",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.1",
+    "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.3.0"
   }
 }

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.0"
+version = "1.0.1"
 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/desktop.json

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

src-tauri/src/main.rs

@@ -513,7 +513,7 @@ fn main() {
 
     tauri::Builder::default()
         .plugin(tauri_plugin_process::init())
-        .plugin(tauri_plugin_updater::Builder::new().build())
+        // .plugin(tauri_plugin_updater::Builder::new().build())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())

src-tauri/src/searcher.rs

@@ -284,8 +284,15 @@ fn check_smokeapi_installed(game_path: &Path, api_files: &[String]) -> bool {
 fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
     let mut found_exe = false;
     let mut found_linux_binary = false;
+    let mut found_main_executable = false;
     let mut steam_api_files = Vec::new();
 
+    // Strong indicators for native Linux games
+    let mut has_libsteam_api = false;
+    let mut has_linux_steam_libs = false;
+    let mut linux_binary_count = 0;
+    let mut windows_exe_count = 0;
+
     // Directories to skip for better performance
     let skip_dirs = [
         "videos",
@@ -312,6 +319,11 @@ fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
     let exe_extensions = ["exe", "bat", "cmd", "msi"];
     let binary_extensions = ["so", "bin", "sh", "x86", "x86_64"];
 
+    // Files that indicate this is likely a launcher/installer
+    let installer_patterns = [
+      "setup", "install", "launcher", "uninstall", "redist", "vcredist", "directx", "_commonredist", "dotnet", "PhysX"
+    ];
+
     // Recursively walk through the game directory
     for entry in WalkDir::new(game_path)
         .max_depth(MAX_DEPTH) // Limit depth to avoid traversing too deep
@@ -335,22 +347,46 @@ fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
             continue;
         }
 
+        let filename = path.file_name()
+            .unwrap_or_default()
+            .to_string_lossy()
+            .to_lowercase();
+        
+        // Check for strong Linux indicators first
+        if filename == "libsteam_api.so" {
+            has_libsteam_api = true;
+            debug!("Found strong Linux indicator: {}", path.display());
+        }
+
+        // Check for other Linux Steam libraries
+        if filename.starts_with("lib") && filename.contains("steam") && filename.ends_with(".so") {
+            has_linux_steam_libs = true;
+            debug!("Found Linux Steam library: {}", path.display());
+        }
+
         // Check file extension
         if let Some(ext) = path.extension() {
             let ext_str = ext.to_string_lossy().to_lowercase();
 
             // Check for Windows executables
             if exe_extensions.iter().any(|&e| ext_str == e) {
-                found_exe = true;
+                // Check if this looks like an installer/utility rather than main game
+                let is_likely_installer = installer_patterns.iter()
+                    .any(|&pattern| filename.contains(pattern));
+                
+                if !is_likely_installer {
+                    found_exe = true;
+                    windows_exe_count += 1;
+
+                    // If its in the root directory and not an installer, its likely the main executable
+                    if path.parent() == Some(game_path) {
+                        found_main_executable = true;
+                    }
+                }
             }
 
             // Check for Steam API DLLs
             if ext_str == "dll" {
-                let filename = path
-                    .file_name()
-                    .unwrap_or_default()
-                    .to_string_lossy()
-                    .to_lowercase();
                 if filename == "steam_api.dll" || filename == "steam_api64.dll" {
                     if let Ok(rel_path) = path.strip_prefix(game_path) {
                         let rel_path_str = rel_path.to_string_lossy().to_string();
@@ -363,6 +399,7 @@ fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
             // Check for Linux binary files
             if binary_extensions.iter().any(|&e| ext_str == e) {
                 found_linux_binary = true;
+                linux_binary_count += 1;
 
                 // Check if it's actually an ELF binary for more certainty
                 if ext_str == "so" && is_elf_binary(path) {
@@ -382,29 +419,85 @@ fn scan_game_directory(game_path: &Path) -> (bool, Vec<String>) {
                 // Check executable permission and ELF format
                 if is_executable && is_elf_binary(path) {
                     found_linux_binary = true;
+                    linux_binary_count += 1;
                 }
             }
         }
-
-        // If we've found enough evidence for both platforms and Steam API DLLs, we can stop
-        if found_exe && found_linux_binary && !steam_api_files.is_empty() {
-            debug!("Found sufficient evidence, breaking scan early");
-            break;
-        }
     }
 
-    // A game is considered native if it has Linux binaries but no Windows executables
+    // Detection logic with priority system
-    let is_native = found_linux_binary && !found_exe;
+    let is_native = determine_platform(
+      has_libsteam_api,
+      has_linux_steam_libs,
+      found_linux_binary,
+      found_exe,
+      found_main_executable,
+      linux_binary_count,
+      windows_exe_count,
+    );
 
     debug!(
-        "Game scan results: native={}, exe={}, api_dlls={}",
+        "Game scan results: native={}, libsteam_api={}, linux_libs={}, linux_binaries={}, exe_files={}, api_dlls={}",
         is_native,
-        found_exe,
+        has_libsteam_api,
+        has_linux_steam_libs,
+        linux_binary_count,
+        windows_exe_count,
         steam_api_files.len()
     );
+
     (is_native, steam_api_files)
 }
 
+// Priority-based platform detection
+fn determine_platform(
+  has_libsteam_api: bool,
+  has_linux_steam_libs: bool,
+  found_linux_binary: bool,
+  found_exe: bool,
+  found_main_executable: bool,
+  linux_binary_count: usize,
+  windows_exe_count: usize,
+) -> bool {
+  // Priority 1: Strong Linux indicators
+  if has_libsteam_api {
+      debug!("Detected as native: libsteam_api.so found");
+      return true;
+  }
+
+  if has_linux_steam_libs {
+      debug!("Detected as native: Linux steam libraries found");
+      return true;
+  }
+
+  // Priority 2: 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
+  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
+  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
+  if found_linux_binary {
+      debug!("Detected as native: Linux binaries found (default fallback)");
+      return true;
+  }
+
+  debug!("Detected as Windows/Proton: No strong indicators found");
+  false
+}
+
 // Find all installed Steam games from library folders
 pub async fn find_installed_games(steamapps_paths: &[PathBuf]) -> Vec<GameInfo> {
     let mut games = Vec::new();

src-tauri/tauri.conf.json

@@ -10,24 +10,12 @@
     "active": true,
     "targets": "all",
     "category": "Utility",
-    "createUpdaterArtifacts": true,
     "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"]
   },
   "productName": "Creamlinux",
   "mainBinaryName": "creamlinux",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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": [

src/App.tsx

@@ -8,7 +8,7 @@ import { Header, Sidebar, InitialLoadingScreen, ErrorBoundary } from '@/componen
 import AnimatedBackground from '@/components/layout/AnimatedBackground'
 
 // Dialog components
-import { ProgressDialog, DlcSelectionDialog } from '@/components/dialogs'
+import { ProgressDialog, DlcSelectionDialog, SettingsDialog } from '@/components/dialogs'
 
 // Game components
 import { GameList } from '@/components/games'
@@ -40,6 +40,9 @@ function App() {
     handleGameAction,
     handleDlcConfirm,
     handleGameEdit,
+    settingsDialog,
+    handleSettingsOpen,
+    handleSettingsClose,
   } = useAppContext()
 
   // Show loading screen during initial load
@@ -63,7 +66,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,6 +108,12 @@ function App() {
           onClose={handleDlcDialogClose}
           onConfirm={handleDlcConfirm}
         />
+
+        {/* Settings Dialog */}
+        <SettingsDialog 
+          visible ={settingsDialog.visible}
+          onClose={handleSettingsClose}
+        />
         
         {/* Simple update notifier that uses toast - no UI component */}
         <UpdateNotifier />

src/components/dialogs/SettingsDialog.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+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 }) => {
+  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">1.0.2</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/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/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/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/main.tsx

@@ -1,12 +1,9 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import { AppProvider } from '@/contexts/index.ts'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
+  <AppProvider>
-    <AppProvider>
+    <App />
-      <App />
+  </AppProvider>
-    </AppProvider>
-  </StrictMode>
 )

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