use dynamic DLL matching for SmokeAPI installation

.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,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

@@ -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:
@@ -33,11 +35,13 @@ 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
    ```
@@ -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.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "creamlinux",
-      "version": "1.0.0",
+      "version": "1.0.2",
       "license": "MIT",
       "dependencies": {
         "@tauri-apps/api": "^2.5.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "creamlinux",
   "private": true,
-  "version": "1.0.1",
+  "version": "1.0.5",
   "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.0.5"
 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/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.contains(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

@@ -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/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.1",
+  "version": "1.0.5",
   "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/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);
+  }
+}