Merge pull request #1 from Novattz/testing

Testing

docs/adding-icons.md

@@ -0,0 +1,128 @@
+# Adding New Icons to Creamlinux
+
+This guide explains how to add new icons to the Creamlinux project.
+
+## Prerequisites
+
+- Basic knowledge of SVG files
+- Node.js and npm installed
+- Creamlinux project set up
+
+## Step 1: Find or Create SVG Icons
+
+You can:
+
+- Create your own SVG icons using tools like Figma, Sketch, or Illustrator
+- Download icons from libraries like Heroicons, Material Icons, or Feather Icons
+- Use existing SVG files
+
+Ideally, icons should:
+
+- Be 24x24px or have a viewBox of "0 0 24 24"
+- Have a consistent style with existing icons
+- Use stroke-width of 2 for outline variants
+- Use solid fills for bold variants
+
+## Step 2: Optimize SVG Files
+
+We have a script to optimize SVG files for the icon system:
+
+```bash
+# Install dependencies
+npm install
+
+# Optimize a single SVG
+npm run optimize-svg path/to/icon.svg
+
+# Optimize all SVGs in a directory
+npm run optimize-svg src/components/icons/ui/outline
+```
+
+The optimizer will:
+
+- Remove unnecessary attributes
+- Set the viewBox to "0 0 24 24"
+- Add currentColor for fills/strokes for proper color inheritance
+- Remove width and height attributes for flexible sizing
+
+## Step 3: Add SVG Files to the Project
+
+1. Decide if your icon is a "bold" (filled) or "outline" (stroked) variant
+2. Place the file in the appropriate directory:
+   - For outline variants: `src/components/icons/ui/outline/`
+   - For bold variants: `src/components/icons/ui/bold/`
+3. Use a descriptive name like `download.svg` or `settings.svg`
+
+## Step 4: Export the Icons
+
+1. Open the index.ts file in the respective directory:
+
+   - `src/components/icons/ui/outline/index.ts` for outline variants
+   - `src/components/icons/ui/bold/index.ts` for bold variants
+
+2. Add an export statement for your new icon:
+
+```typescript
+// For outline variant
+export { ReactComponent as NewIconOutlineIcon } from './new-icon.svg'
+
+// For bold variant
+export { ReactComponent as NewIconBoldIcon } from './new-icon.svg'
+```
+
+Use a consistent naming pattern:
+
+- CamelCase
+- Descriptive name
+- Suffix with BoldIcon or OutlineIcon based on variant
+
+## Step 5: Use the Icon in Your Components
+
+Now you can use your new icon in any component:
+
+```tsx
+import { Icon } from '@/components/icons'
+import { NewIconOutlineIcon, NewIconBoldIcon } from '@/components/icons'
+
+// In your component:
+<Icon icon={NewIconOutlineIcon} size="md" />
+<Icon icon={NewIconBoldIcon} size="lg" fillColor="var(--primary-color)" />
+```
+
+## Best Practices
+
+1. **Create both variants**: When possible, create both bold and outline variants for consistency.
+
+2. **Use semantic names**: Name icons based on their meaning, not appearance (e.g., "success" instead of "checkmark").
+
+3. **Be consistent**: Follow the existing icon style for visual harmony.
+
+4. **Test different sizes**: Ensure icons look good at all standard sizes: xs, sm, md, lg, xl.
+
+5. **Optimize manually if needed**: Sometimes automatic optimization may not work perfectly. You might need to manually edit SVG files.
+
+6. **Add accessibility**: When using icons, provide proper accessibility:
+
+```tsx
+<Icon icon={InfoOutlineIcon} title="Additional information" size="md" />
+```
+
+## Troubleshooting
+
+**Problem**: Icon doesn't change color with CSS
+**Solution**: Make sure your SVG uses `currentColor` for fill or stroke
+
+**Problem**: Icon looks pixelated
+**Solution**: Ensure your SVG has a proper viewBox attribute
+
+**Problem**: Icon sizing is inconsistent
+**Solution**: Use the standard size props (xs, sm, md, lg, xl) instead of custom sizes
+
+**Problem**: SVG has complex gradients or effects that don't render correctly
+**Solution**: Simplify the SVG design; complex effects aren't ideal for UI icons
+
+## Additional Resources
+
+- [SVGR documentation](https://react-svgr.com/docs/what-is-svgr/)
+- [SVGO documentation](https://github.com/svg/svgo)
+- [SVG MDN documentation](https://developer.mozilla.org/en-US/docs/Web/SVG)

docs/icons.md

@@ -0,0 +1,160 @@
+# Icon Usage Methods
+
+There are two ways to use icons in Creamlinux, both fully supported and completely interchangeable.
+
+## Method 1: Using Icon component with name prop
+
+This approach uses the `Icon` component with a `name` prop:
+
+```tsx
+import { Icon, refresh, check, info, steam } from '@/components/icons'
+
+<Icon name={refresh} />
+<Icon name={check} variant="bold" />
+<Icon name={info} size="lg" fillColor="var(--info)" />
+<Icon name={steam} /> {/* Brand icons auto-detect the variant */}
+```
+
+## Method 2: Using direct icon components
+
+This approach imports pre-configured icon components directly:
+
+```tsx
+import { RefreshIcon, CheckBoldIcon, InfoIcon, SteamIcon } from '@/components/icons'
+
+<RefreshIcon />               {/* Outline variant */}
+<CheckBoldIcon />             {/* Bold variant */}
+<InfoIcon size="lg" fillColor="var(--info)" />
+<SteamIcon />                 {/* Brand icon */}
+```
+
+## When to use each method
+
+### Use Method 1 (Icon + name) when:
+
+- You have dynamic icon selection based on data or state
+- You want to keep your imports list shorter
+- You're working with icons in loops or maps
+- You want to change variants dynamically
+
+Example of dynamic icon selection:
+
+```tsx
+import { Icon } from '@/components/icons'
+
+function StatusIndicator({ status }) {
+  const iconName =
+    status === 'success'
+      ? 'Check'
+      : status === 'warning'
+      ? 'Warning'
+      : status === 'error'
+      ? 'Close'
+      : 'Info'
+
+  return <Icon name={iconName} variant="bold" />
+}
+```
+
+### Use Method 2 (direct components) when:
+
+- You want the most concise syntax
+- You're using a fixed set of icons that won't change
+- You want specific variants (like InfoBoldIcon vs InfoIcon)
+- You prefer more explicit component names in your JSX
+
+Example of fixed icon usage:
+
+```tsx
+import { InfoIcon, CloseIcon } from '@/components/icons'
+
+function ModalHeader({ title, onClose }) {
+  return (
+    <div className="modal-header">
+      <div className="title">
+        <InfoIcon size="sm" />
+        <h3>{title}</h3>
+      </div>
+      <button onClick={onClose}>
+        <CloseIcon size="md" />
+      </button>
+    </div>
+  )
+}
+```
+
+## Available Icon Component Exports
+
+### UI Icons (Outline variant by default)
+
+```tsx
+import {
+  ArrowUpIcon,
+  CheckIcon,
+  CloseIcon,
+  ControllerIcon,
+  CopyIcon,
+  DownloadIcon,
+  EditIcon,
+  InfoIcon,
+  LayersIcon,
+  RefreshIcon,
+  SearchIcon,
+  TrashIcon,
+  WarningIcon,
+  WineIcon,
+} from '@/components/icons'
+```
+
+### Bold Variants
+
+```tsx
+import { CheckBoldIcon, InfoBoldIcon, WarningBoldIcon } from '@/components/icons'
+```
+
+### Brand Icons
+
+```tsx
+import { DiscordIcon, GitHubIcon, LinuxIcon, SteamIcon, WindowsIcon } from '@/components/icons'
+```
+
+## Combining Methods
+
+Both methods work perfectly together and can be mixed in the same component:
+
+```tsx
+import {
+  Icon,
+  refresh, // Method 1
+  CheckBoldIcon, // Method 2
+} from '@/components/icons'
+
+function MyComponent() {
+  return (
+    <div>
+      <Icon name={refresh} />
+      <CheckBoldIcon />
+    </div>
+  )
+}
+```
+
+## Props are Identical
+
+Both methods accept the same props:
+
+```tsx
+// These are equivalent:
+<InfoIcon size="lg" fillColor="blue" className="my-icon" />
+<Icon name={info} size="lg" fillColor="blue" className="my-icon" />
+```
+
+Available props in both cases:
+
+- `size`: "xs" | "sm" | "md" | "lg" | "xl" | number
+- `variant`: "outline" | "bold" | "brand" (only for Icon + name method)
+- `fillColor`: CSS color string
+- `strokeColor`: CSS color string
+- `className`: CSS class string
+- `title`: Accessibility title
+- ...plus all standard SVG attributes

package.json

@@ -8,16 +8,20 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "optimize-svg": "node scripts/optimize-svg.js"
   },
   "dependencies": {
     "@tauri-apps/api": "^2.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.89.0"
+    "sass": "^1.89.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
     "@tauri-apps/cli": "^2.5.0",
     "@types/node": "^20.10.0",
     "@types/react": "^19.0.10",
@@ -30,6 +34,7 @@
     "sass-embedded": "^1.86.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.1"
+    "vite": "^6.3.1",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

scripts/optimize-svg.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+/**
+ * SVG Optimizer for Creamlinux
+ *
+ * This script optimizes SVG files for use in the icon system.
+ * Run it with `node optimize-svg.js path/to/svg`
+ */
+
+import fs from 'fs'
+import path from 'path'
+import optimize from 'svgo'
+
+// Check if a file path is provided
+if (process.argv.length < 3) {
+  console.error('Please provide a path to an SVG file or directory')
+  process.exit(1)
+}
+
+const inputPath = process.argv[2]
+
+// SVGO configuration
+const svgoConfig = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          // Keep viewBox attribute
+          removeViewBox: false,
+          // Don't remove IDs
+          cleanupIDs: false,
+          // Don't minify colors
+          convertColors: false,
+        },
+      },
+    },
+    // Add currentColor for path fill if not specified
+    {
+      name: 'addAttributesToSVGElement',
+      params: {
+        attributes: [
+          {
+            fill: 'currentColor',
+          },
+        ],
+      },
+    },
+    // Remove width and height
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: ['width', 'height'],
+      },
+    },
+    // Make sure viewBox is 0 0 24 24 for consistent sizing
+    {
+      name: 'addAttributesToSVGElement',
+      params: {
+        attributes: [
+          {
+            viewBox: '0 0 24 24',
+          },
+        ],
+      },
+    },
+  ],
+}
+
+// Function to optimize a single SVG file
+function optimizeSVG(filePath) {
+  try {
+    const svg = fs.readFileSync(filePath, 'utf8')
+    const result = optimize(svg, svgoConfig)
+
+    // Write the optimized SVG back to the file
+    fs.writeFileSync(filePath, result.data)
+    console.log(`✅ Optimized: ${filePath}`)
+
+    return true
+  } catch (error) {
+    console.error(`❌ Error optimizing ${filePath}:`, error)
+    return false
+  }
+}
+
+// Function to process a directory of SVG files
+function processDirectory(dirPath) {
+  try {
+    const files = fs.readdirSync(dirPath)
+    let optimizedCount = 0
+
+    for (const file of files) {
+      const filePath = path.join(dirPath, file)
+      const stat = fs.statSync(filePath)
+
+      if (stat.isDirectory()) {
+        // Recursively process subdirectories
+        optimizedCount += processDirectory(filePath)
+      } else if (path.extname(file).toLowerCase() === '.svg') {
+        // Process SVG files
+        if (optimizeSVG(filePath)) {
+          optimizedCount++
+        }
+      }
+    }
+
+    return optimizedCount
+  } catch (error) {
+    console.error(`Error processing directory ${dirPath}:`, error)
+    return 0
+  }
+}
+
+// Main execution
+try {
+  const stat = fs.statSync(inputPath)
+
+  if (stat.isDirectory()) {
+    const count = processDirectory(inputPath)
+    console.log(`\nOptimized ${count} SVG files in ${inputPath}`)
+  } else if (path.extname(inputPath).toLowerCase() === '.svg') {
+    optimizeSVG(inputPath)
+  } else {
+    console.error('The provided path is not an SVG file or directory')
+    process.exit(1)
+  }
+} catch (error) {
+  console.error('Error:', error)
+  process.exit(1)
+}

src-tauri/src/cache.rs

@@ -1,178 +1,21 @@
-use crate::dlc_manager::DlcInfoWithState;
+// This is a placeholder file - cache functionality has been removed
-use log::{info, warn};
+// and now only exists in memory within the App state
-use serde::{Deserialize, Serialize};
-use serde_json::json;
-use std::fs;
-use std::io;
-use std::path::PathBuf;
-use std::time::SystemTime;
-
-// Cache entry with timestamp for expiration
-#[derive(Serialize, Deserialize)]
-struct CacheEntry<T> {
-    data: T,
-    timestamp: u64, // Unix timestamp in seconds
-}
-
-// Get the cache directory
-fn get_cache_dir() -> io::Result<PathBuf> {
-    let xdg_dirs = xdg::BaseDirectories::with_prefix("creamlinux")
-        .map_err(|e| io::Error::new(io::ErrorKind::Other, e))?;
-
-    let cache_dir = xdg_dirs.get_cache_home();
-
-    // Make sure the cache directory exists
-    if !cache_dir.exists() {
-        fs::create_dir_all(&cache_dir)?;
-    }
-
-    Ok(cache_dir)
-}
-
-// Save data to cache file
-pub fn save_to_cache<T>(key: &str, data: &T, _ttl_hours: u64) -> io::Result<()>
-where
-    T: Serialize + ?Sized,
-{
-    let cache_dir = get_cache_dir()?;
-    let cache_file = cache_dir.join(format!("{}.cache", key));
-
-    // Get current timestamp
-    let now = SystemTime::now()
-        .duration_since(SystemTime::UNIX_EPOCH)
-        .unwrap_or_default()
-        .as_secs();
-
-    // Create a JSON object with timestamp and data directly
-    let json_data = json!({
-        "timestamp": now,
-        "data": data  // No clone needed here
-    });
-
-    // Serialize and write to file
-    let serialized =
-        serde_json::to_string(&json_data).map_err(|e| io::Error::new(io::ErrorKind::Other, e))?;
-
-    fs::write(cache_file, serialized)?;
-    info!("Saved cache for key: {}", key);
 
+pub fn cache_dlcs(_game_id: &str, _dlcs: &[crate::dlc_manager::DlcInfoWithState]) -> std::io::Result<()> {
+  // This function is kept only for compatibility, but now does nothing
+  // The DLCs are only cached in memory
+  log::info!("Cache functionality has been removed - DLCs are only stored in memory");
   Ok(())
 }
 
-// Load data from cache file if it exists and is not expired
+pub fn load_cached_dlcs(_game_id: &str) -> Option<Vec<crate::dlc_manager::DlcInfoWithState>> {
-pub fn load_from_cache<T>(key: &str, ttl_hours: u64) -> Option<T>
+  // This function is kept only for compatibility, but now always returns None
-where
+  log::info!("Cache functionality has been removed - DLCs are only stored in memory");
-    T: for<'de> Deserialize<'de>,
+  None
-{
-    let cache_dir = match get_cache_dir() {
-        Ok(dir) => dir,
-        Err(e) => {
-            warn!("Failed to get cache directory: {}", e);
-            return None;
-        }
-    };
-
-    let cache_file = cache_dir.join(format!("{}.cache", key));
-
-    // Check if cache file exists
-    if !cache_file.exists() {
-        return None;
 }
 
-    // Read and deserialize
+pub fn clear_all_caches() -> std::io::Result<()> {
-    let cached_data = match fs::read_to_string(&cache_file) {
+  // This function is kept only for compatibility, but now does nothing
-        Ok(data) => data,
+  log::info!("Cache functionality has been removed - DLCs are only stored in memory");
-        Err(e) => {
-            warn!("Failed to read cache file {}: {}", cache_file.display(), e);
-            return None;
-        }
-    };
-
-    // Parse the JSON
-    let json_value: serde_json::Value = match serde_json::from_str(&cached_data) {
-        Ok(v) => v,
-        Err(e) => {
-            warn!("Failed to parse cache file {}: {}", cache_file.display(), e);
-            return None;
-        }
-    };
-
-    // Extract timestamp
-    let timestamp = match json_value.get("timestamp").and_then(|v| v.as_u64()) {
-        Some(ts) => ts,
-        None => {
-            warn!("Invalid timestamp in cache file {}", cache_file.display());
-            return None;
-        }
-    };
-
-    // Check expiration
-    let now = SystemTime::now()
-        .duration_since(SystemTime::UNIX_EPOCH)
-        .unwrap_or_default()
-        .as_secs();
-
-    let age_hours = (now - timestamp) / 3600;
-
-    if age_hours > ttl_hours {
-        info!("Cache for key {} is expired ({} hours old)", key, age_hours);
-        return None;
-    }
-
-    // Extract data
-    let data: T = match serde_json::from_value(json_value["data"].clone()) {
-        Ok(d) => d,
-        Err(e) => {
-            warn!(
-                "Failed to parse data in cache file {}: {}",
-                cache_file.display(),
-                e
-            );
-            return None;
-        }
-    };
-
-    info!("Using cache for key {} ({} hours old)", key, age_hours);
-    Some(data)
-}
-
-// Cache game scanning results
-pub fn cache_games(games: &[crate::installer::Game]) -> io::Result<()> {
-    save_to_cache("games", games, 24) // Cache games for 24 hours
-}
-
-// Load cached game scanning results
-pub fn load_cached_games() -> Option<Vec<crate::installer::Game>> {
-    load_from_cache("games", 24)
-}
-
-// Cache DLC list for a game
-pub fn cache_dlcs(game_id: &str, dlcs: &[DlcInfoWithState]) -> io::Result<()> {
-    save_to_cache(&format!("dlc_{}", game_id), dlcs, 168) // Cache DLCs for 7 days (168 hours)
-}
-
-// Load cached DLC list
-pub fn load_cached_dlcs(game_id: &str) -> Option<Vec<DlcInfoWithState>> {
-    load_from_cache(&format!("dlc_{}", game_id), 168)
-}
-
-// Clear all caches
-pub fn clear_all_caches() -> io::Result<()> {
-    let cache_dir = get_cache_dir()?;
-
-    for entry in fs::read_dir(cache_dir)? {
-        let entry = entry?;
-        let path = entry.path();
-
-        if path.is_file() && path.extension().map_or(false, |ext| ext == "cache") {
-            if let Err(e) = fs::remove_file(&path) {
-                warn!("Failed to remove cache file {}: {}", path.display(), e);
-            } else {
-                info!("Removed cache file: {}", path.display());
-            }
-        }
-    }
-
-    info!("All caches cleared");
   Ok(())
 }

src-tauri/src/main.rs

@@ -3,10 +3,9 @@
   windows_subsystem = "windows"
 )]
 
-mod cache;
 mod dlc_manager;
 mod installer;
-mod searcher; // Keep the module for now
+mod searcher;
 
 use dlc_manager::DlcInfoWithState;
 use installer::{Game, InstallerAction, InstallerType};
@@ -19,7 +18,6 @@ use std::sync::atomic::Ordering;
 use std::sync::Arc;
 use tauri::State;
 use tauri::{Emitter, Manager};
-use tokio::time::Duration;
 use tokio::time::Instant;
 
 #[derive(Serialize, Deserialize, Debug, Clone)]
@@ -28,9 +26,12 @@ pub struct GameAction {
   action: String,
 }
 
+// Mark fields with # to allow unused fields
 #[derive(Debug, Clone)]
 struct DlcCache {
+  #[allow(dead_code)]
   data: Vec<DlcInfoWithState>,
+  #[allow(dead_code)]
   timestamp: Instant,
 }
 

src/App.tsx

@@ -1,818 +1,78 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useAppContext } from '@/contexts/useAppContext'
-import { invoke } from '@tauri-apps/api/core'
+import { useAppLogic } from '@/hooks'
-import { listen } from '@tauri-apps/api/event'
 import './styles/main.scss'
-import GameList from './components/GameList'
-import Header from './components/Header'
-import Sidebar from './components/Sidebar'
-import ProgressDialog from './components/ProgressDialog'
-import DlcSelectionDialog from './components/DlcSelectionDialog'
-import AnimatedBackground from './components/AnimatedBackground'
-import InitialLoadingScreen from './components/InitialLoadingScreen'
-import { ActionType } from './components/ActionButton'
 
-// Game interface
+// Layout components
-interface Game {
+import { Header, Sidebar, InitialLoadingScreen, ErrorBoundary } from '@/components/layout'
-  id: string
+import AnimatedBackground from '@/components/layout/AnimatedBackground'
-  title: string
-  path: string
-  native: boolean
-  platform?: string
-  api_files: string[]
-  cream_installed?: boolean
-  smoke_installed?: boolean
-  installing?: boolean
-}
 
-// Interface for installation instructions
+// Dialog components
-interface InstructionInfo {
+import { ProgressDialog, DlcSelectionDialog } from '@/components/dialogs'
-  type: string
-  command: string
-  game_title: string
-  dlc_count?: number
-}
 
-// Interface for DLC information
+// Game components
-interface DlcInfo {
+import { GameList } from '@/components/games'
-  appid: string
-  name: string
-  enabled: boolean
-}
 
+/**
+ * Main application component
+ */
 function App() {
-  const [games, setGames] = useState<Game[]>([])
+  // Get application logic from hook
-  const [filter, setFilter] = useState('all')
+  const {
-  const [searchQuery, setSearchQuery] = useState('')
+    filter,
-  const [isLoading, setIsLoading] = useState(true)
+    setFilter,
-  const [isInitialLoad, setIsInitialLoad] = useState(true)
+    searchQuery,
-  const [scanProgress, setScanProgress] = useState({
+    handleSearchChange,
-    message: 'Initializing...',
+    isInitialLoad,
-    progress: 0,
+    scanProgress,
-  })
+    filteredGames,
-  const [error, setError] = useState<string | null>(null)
+    handleRefresh,
-  const refreshInProgress = useRef(false)
+    isLoading,
-  const [isFetchingDlcs, setIsFetchingDlcs] = useState(false)
+    error
-  const dlcFetchController = useRef<AbortController | null>(null)
+  } = useAppLogic({ autoLoad: true })
-  const activeDlcFetchId = useRef<string | null>(null)
+  
-
+  // Get action handlers from context
-  // Progress dialog state
+  const {
-  const [progressDialog, setProgressDialog] = useState({
+    dlcDialog,
-    visible: false,
+    handleDlcDialogClose,
-    title: '',
+    handleProgressDialogClose,
-    message: '',
+    progressDialog,
-    progress: 0,
+    handleGameAction,
-    showInstructions: false,
+    handleDlcConfirm,
-    instructions: undefined as InstructionInfo | undefined,
+    handleGameEdit
-  })
+  } = useAppContext()
-
+
-  // DLC selection dialog state
+  // Show loading screen during initial load
-  const [dlcDialog, setDlcDialog] = useState({
-    visible: false,
-    gameId: '',
-    gameTitle: '',
-    dlcs: [] as DlcInfo[],
-    enabledDlcs: [] as string[],
-    isLoading: false,
-    isEditMode: false,
-    progress: 0,
-    progressMessage: '',
-    timeLeft: '',
-    error: null as string | null,
-  })
-
-  // Handle search query changes
-  const handleSearchChange = (query: string) => {
-    setSearchQuery(query)
-  }
-
-  // LoadGames function outside of the useEffect to make it reusable
-  const loadGames = useCallback(async () => {
-    try {
-      setIsLoading(true)
-      setError(null)
-
-      console.log('Invoking scan_steam_games')
-      const steamGames = await invoke<Game[]>('scan_steam_games').catch((err) => {
-        console.error('Error from scan_steam_games:', err)
-        throw err
-      })
-
-      // Platform property to match the GameList component's expectation
-      const gamesWithPlatform = steamGames.map((game) => ({
-        ...game,
-        platform: 'Steam',
-      }))
-
-      console.log(`Loaded ${gamesWithPlatform.length} games`)
-      setGames(gamesWithPlatform)
-      setIsInitialLoad(false) // Mark initial load as complete
-      return true
-    } catch (error) {
-      console.error('Error loading games:', error)
-      setError(`Failed to load games: ${error}`)
-      setIsInitialLoad(false) // Mark initial load as complete even on error
-      return false
-    } finally {
-      setIsLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    // Set up event listeners first
-    const setupEventListeners = async () => {
-      try {
-        console.log('Setting up event listeners')
-
-        // Listen for progress updates from the backend
-        const unlistenProgress = await listen('installation-progress', (event) => {
-          console.log('Received installation-progress event:', event)
-
-          const { title, message, progress, complete, show_instructions, instructions } =
-            event.payload as {
-              title: string
-              message: string
-              progress: number
-              complete: boolean
-              show_instructions?: boolean
-              instructions?: InstructionInfo
-            }
-
-          if (complete && !show_instructions) {
-            // Hide dialog when complete if no instructions
-            setTimeout(() => {
-              setProgressDialog((prev) => ({ ...prev, visible: false }))
-
-              // Only refresh games list if dialog is closing without instructions
-              if (!refreshInProgress.current) {
-                refreshInProgress.current = true
-                setTimeout(() => {
-                  loadGames().then(() => {
-                    refreshInProgress.current = false
-                  })
-                }, 100)
-              }
-            }, 1000)
-          } else {
-            // Update progress dialog
-            setProgressDialog({
-              visible: true,
-              title,
-              message,
-              progress,
-              showInstructions: show_instructions || false,
-              instructions,
-            })
-          }
-        })
-
-        // Listen for scan progress events
-        const unlistenScanProgress = await listen('scan-progress', (event) => {
-          const { message, progress } = event.payload as {
-            message: string
-            progress: number
-          }
-
-          console.log('Received scan-progress event:', message, progress)
-
-          // Update scan progress state
-          setScanProgress({
-            message,
-            progress,
-          })
-        })
-
-        // Listen for individual game updates
-        const unlistenGameUpdated = await listen('game-updated', (event) => {
-          console.log('Received game-updated event:', event)
-
-          const updatedGame = event.payload as Game
-
-          // Update only the specific game in the state
-          setGames((prevGames) =>
-            prevGames.map((game) =>
-              game.id === updatedGame.id ? { ...updatedGame, platform: 'Steam' } : game
-            )
-          )
-        })
-
-        return () => {
-          unlistenProgress()
-          unlistenScanProgress()
-          unlistenGameUpdated()
-        }
-      } catch (error) {
-        console.error('Error setting up event listeners:', error)
-        return () => {}
-      }
-    }
-
-    // First set up event listeners, then load games
-    let unlisten: (() => void) | null = null
-
-    setupEventListeners()
-      .then((unlistenFn) => {
-        unlisten = unlistenFn
-        return loadGames()
-      })
-      .catch((error) => {
-        console.error('Failed to initialize:', error)
-      })
-
-    return () => {
-      if (unlisten) {
-        unlisten()
-      }
-    }
-  }, [loadGames])
-
-  // Debugging for state changes
-  useEffect(() => {
-    // Debug state changes
-    if (games.length > 0) {
-      // Count native and installed games
-      const nativeCount = games.filter((g) => g.native).length
-      const creamInstalledCount = games.filter((g) => g.cream_installed).length
-      const smokeInstalledCount = games.filter((g) => g.smoke_installed).length
-
-      console.log(
-        `Game state updated: ${games.length} total games, ${nativeCount} native, ${creamInstalledCount} with CreamLinux, ${smokeInstalledCount} with SmokeAPI`
-      )
-
-      // Log any games with unexpected states
-      const problematicGames = games.filter((g) => {
-        // Native games that have SmokeAPI installed (shouldn't happen)
-        if (g.native && g.smoke_installed) return true
-
-        // Non-native games with CreamLinux installed (shouldn't happen)
-        if (!g.native && g.cream_installed) return true
-
-        // Non-native games without API files but with SmokeAPI installed (shouldn't happen)
-        if (!g.native && (!g.api_files || g.api_files.length === 0) && g.smoke_installed)
-          return true
-
-        return false
-      })
-
-      if (problematicGames.length > 0) {
-        console.warn('Found games with unexpected states:', problematicGames)
-      }
-    }
-  }, [games])
-
-  // Set up event listeners for DLC streaming
-  useEffect(() => {
-    // Listen for individual DLC found events
-    const setupDlcEventListeners = async () => {
-      try {
-        // This event is emitted for each DLC as it's found
-        const unlistenDlcFound = await listen('dlc-found', (event) => {
-          const dlc = JSON.parse(event.payload as string) as { appid: string; name: string }
-
-          // Add the DLC to the current list with enabled=true
-          setDlcDialog((prev) => ({
-            ...prev,
-            dlcs: [...prev.dlcs, { ...dlc, enabled: true }],
-          }))
-        })
-
-        // When progress is 100%, mark loading as complete and reset fetch state
-        const unlistenDlcProgress = await listen('dlc-progress', (event) => {
-          const { message, progress, timeLeft } = event.payload as {
-            message: string
-            progress: number
-            timeLeft?: string
-          }
-
-          // Update the progress indicator
-          setDlcDialog((prev) => ({
-            ...prev,
-            progress,
-            progressMessage: message,
-            timeLeft: timeLeft || '',
-          }))
-
-          // If progress is 100%, mark loading as complete
-          if (progress === 100) {
-            setTimeout(() => {
-              setDlcDialog((prev) => ({
-                ...prev,
-                isLoading: false,
-              }))
-
-              // Reset fetch state
-              setIsFetchingDlcs(false)
-              activeDlcFetchId.current = null
-            }, 500)
-          }
-        })
-
-        // This event is emitted if there's an error
-        const unlistenDlcError = await listen('dlc-error', (event) => {
-          const { error } = event.payload as { error: string }
-          console.error('DLC streaming error:', error)
-
-          // Show error in dialog
-          setDlcDialog((prev) => ({
-            ...prev,
-            error,
-            isLoading: false,
-          }))
-        })
-
-        return () => {
-          unlistenDlcFound()
-          unlistenDlcProgress()
-          unlistenDlcError()
-        }
-      } catch (error) {
-        console.error('Error setting up DLC event listeners:', error)
-        return () => {}
-      }
-    }
-
-    const unlisten = setupDlcEventListeners()
-    return () => {
-      unlisten.then((fn) => fn())
-    }
-  }, [])
-
-  // Listen for scan progress events
-  useEffect(() => {
-    const listenToScanProgress = async () => {
-      try {
-        const unlistenScanProgress = await listen('scan-progress', (event) => {
-          const { message, progress } = event.payload as {
-            message: string
-            progress: number
-          }
-
-          // Update loading message
-          setProgressDialog((prev) => ({
-            ...prev,
-            visible: true,
-            title: 'Scanning for Games',
-            message,
-            progress,
-            showInstructions: false,
-            instructions: undefined,
-          }))
-
-          // Auto-close when complete
-          if (progress >= 100) {
-            setTimeout(() => {
-              setProgressDialog((prev) => ({ ...prev, visible: false }))
-            }, 1500)
-          }
-        })
-
-        return unlistenScanProgress
-      } catch (error) {
-        console.error('Error setting up scan progress listener:', error)
-        return () => {}
-      }
-    }
-
-    const unlistenPromise = listenToScanProgress()
-    return () => {
-      unlistenPromise.then((unlisten) => unlisten())
-    }
-  }, [])
-
-  const handleCloseProgressDialog = () => {
-    // Just hide the dialog without refreshing game list
-    setProgressDialog((prev) => ({ ...prev, visible: false }))
-
-    // Only refresh if we need to (instructions didn't trigger update)
-    if (progressDialog.showInstructions === false && !refreshInProgress.current) {
-      refreshInProgress.current = true
-      setTimeout(() => {
-        loadGames().then(() => {
-          refreshInProgress.current = false
-        })
-      }, 100)
-    }
-  }
-
-  // Function to fetch DLCs for a game with streaming updates
-  const streamGameDlcs = async (gameId: string): Promise<void> => {
-    try {
-      // Set up flag to indicate we're fetching DLCs
-      setIsFetchingDlcs(true)
-      activeDlcFetchId.current = gameId
-
-      // Start streaming DLCs - this won't return DLCs directly
-      // Instead, it triggers events that we'll listen for
-      await invoke('stream_game_dlcs', { gameId })
-
-      return
-    } catch (error) {
-      if (error instanceof DOMException && error.name === 'AbortError') {
-        console.log('DLC fetching was aborted')
-      } else {
-        console.error('Error starting DLC stream:', error)
-        throw error
-      }
-    } finally {
-      // Reset state when done or on error
-      setIsFetchingDlcs(false)
-      activeDlcFetchId.current = null
-    }
-  }
-
-  // Clean up if component unmounts during a fetch
-  useEffect(() => {
-    return () => {
-      // Clean up any ongoing fetch operations
-      if (dlcFetchController.current) {
-        dlcFetchController.current.abort()
-        dlcFetchController.current = null
-      }
-    }
-  }, [])
-
-  // Handle game edit (show DLC management dialog)
-  const handleGameEdit = async (gameId: string) => {
-    const game = games.find((g) => g.id === gameId)
-    if (!game || !game.cream_installed) return
-
-    // Check if we're already fetching DLCs for this game
-    if (isFetchingDlcs && activeDlcFetchId.current === gameId) {
-      console.log(`Already fetching DLCs for ${gameId}, ignoring duplicate request`)
-      return
-    }
-
-    try {
-      // Show dialog immediately with empty DLC list
-      setDlcDialog({
-        visible: true,
-        gameId,
-        gameTitle: game.title,
-        dlcs: [],
-        enabledDlcs: [] as string[],
-        isLoading: true,
-        isEditMode: true,
-        progress: 0,
-        progressMessage: 'Reading DLC configuration...',
-        timeLeft: '',
-        error: null,
-      })
-
-      // Try to read all DLCs from the configuration file first (including disabled ones)
-      try {
-        const allDlcs = await invoke<DlcInfo[]>('get_all_dlcs_command', {
-          gamePath: game.path,
-        }).catch(() => [] as DlcInfo[])
-
-        if (allDlcs.length > 0) {
-          // If we have DLCs from the config file, use them
-          console.log('Loaded existing DLC configuration:', allDlcs)
-
-          setDlcDialog((prev) => ({
-            ...prev,
-            dlcs: allDlcs,
-            isLoading: false,
-            progress: 100,
-            progressMessage: 'Loaded existing DLC configuration',
-          }))
-          return
-        }
-      } catch (error) {
-        console.warn('Could not read existing DLC configuration, falling back to API:', error)
-        // Continue with API loading if config reading fails
-      }
-
-      // Mark that we're fetching DLCs for this game
-      setIsFetchingDlcs(true)
-      activeDlcFetchId.current = gameId
-
-      // Create abort controller for fetch operation
-      dlcFetchController.current = new AbortController()
-
-      // Start streaming DLCs
-      await streamGameDlcs(gameId).catch((error) => {
-        if (error.name !== 'AbortError') {
-          console.error('Error streaming DLCs:', error)
-          setDlcDialog((prev) => ({
-            ...prev,
-            error: `Failed to load DLCs: ${error}`,
-            isLoading: false,
-          }))
-        }
-      })
-
-      // Try to get the enabled DLCs
-      const enabledDlcs = await invoke<string[]>('get_enabled_dlcs_command', {
-        gamePath: game.path,
-      }).catch(() => [] as string[])
-
-      // We'll update the enabled state of DLCs as they come in
-      setDlcDialog((prev) => ({
-        ...prev,
-        enabledDlcs,
-      }))
-    } catch (error) {
-      console.error('Error preparing DLC edit:', error)
-      setDlcDialog((prev) => ({
-        ...prev,
-        error: `Failed to prepare DLC editor: ${error}`,
-        isLoading: false,
-      }))
-    }
-  }
-
-  // Unified handler for all game actions (install/uninstall cream/smoke)
-  const handleGameAction = async (gameId: string, action: ActionType) => {
-    try {
-      // Find game to get title
-      const game = games.find((g) => g.id === gameId)
-      if (!game) return
-
-      // If we're installing CreamLinux, show DLC selection first
-      if (action === 'install_cream') {
-        try {
-          // Show dialog immediately with empty DLC list and loading state
-          setDlcDialog({
-            visible: true,
-            gameId,
-            gameTitle: game.title,
-            dlcs: [], // Start with an empty array
-            enabledDlcs: [] as string[],
-            isLoading: true,
-            isEditMode: false,
-            progress: 0,
-            progressMessage: 'Fetching DLC list...',
-            timeLeft: '',
-            error: null,
-          })
-
-          // Start streaming DLCs - only once
-          await streamGameDlcs(gameId).catch((error) => {
-            console.error('Error streaming DLCs:', error)
-            setDlcDialog((prev) => ({
-              ...prev,
-              error: `Failed to load DLCs: ${error}`,
-              isLoading: false,
-            }))
-          })
-        } catch (error) {
-          console.error('Error fetching DLCs:', error)
-
-          // If DLC fetching fails, close dialog and show error
-          setDlcDialog((prev) => ({
-            ...prev,
-            visible: false,
-            isLoading: false,
-          }))
-
-          setProgressDialog({
-            visible: true,
-            title: `Error fetching DLCs for ${game.title}`,
-            message: `Failed to fetch DLCs: ${error}`,
-            progress: 100,
-            showInstructions: false,
-            instructions: undefined,
-          })
-
-          setTimeout(() => {
-            setProgressDialog((prev) => ({ ...prev, visible: false }))
-          }, 3000)
-        }
-        return
-      }
-
-      // For other actions, proceed directly
-      // Update local state to show installation in progress
-      setGames((prevGames) =>
-        prevGames.map((g) => (g.id === gameId ? { ...g, installing: true } : g))
-      )
-
-      // Get title based on action
-      const isCream = action.includes('cream')
-      const isInstall = action.includes('install')
-      const product = isCream ? 'CreamLinux' : 'SmokeAPI'
-      const operation = isInstall ? 'Installing' : 'Uninstalling'
-
-      // Show progress dialog
-      setProgressDialog({
-        visible: true,
-        title: `${operation} ${product} for ${game.title}`,
-        message: isInstall ? 'Downloading required files...' : 'Removing files...',
-        progress: isInstall ? 0 : 30,
-        showInstructions: false,
-        instructions: undefined,
-      })
-
-      console.log(`Invoking process_game_action for game ${gameId} with action ${action}`)
-
-      // Call the backend with the unified action
-      const updatedGame = await invoke('process_game_action', {
-        gameAction: {
-          game_id: gameId,
-          action,
-        },
-      }).catch((err) => {
-        console.error(`Error from process_game_action:`, err)
-        throw err
-      })
-
-      console.log('Game action completed, updated game:', updatedGame)
-
-      // Update our local state with the result from the backend
-      if (updatedGame) {
-        setGames((prevGames) =>
-          prevGames.map((g) => (g.id === gameId ? { ...g, installing: false } : g))
-        )
-      }
-    } catch (error) {
-      console.error(`Error processing action ${action} for game ${gameId}:`, error)
-
-      // Show error in progress dialog
-      setProgressDialog((prev) => ({
-        ...prev,
-        message: `Error: ${error}`,
-        progress: 100,
-      }))
-
-      // Reset installing state
-      setGames((prevGames) =>
-        prevGames.map((game) => (game.id === gameId ? { ...game, installing: false } : game))
-      )
-
-      // Hide dialog after a delay
-      setTimeout(() => {
-        setProgressDialog((prev) => ({ ...prev, visible: false }))
-      }, 3000)
-    }
-  }
-
-  // Handle DLC selection dialog close
-  const handleDlcDialogClose = () => {
-    // Cancel any in-progress DLC fetching
-    if (isFetchingDlcs && activeDlcFetchId.current) {
-      console.log(`Aborting DLC fetch for game ${activeDlcFetchId.current}`)
-
-      // This will signal to the Rust backend that we want to stop the process
-      invoke('abort_dlc_fetch', { gameId: activeDlcFetchId.current }).catch((err) =>
-        console.error('Error aborting DLC fetch:', err)
-      )
-
-      // Reset state
-      activeDlcFetchId.current = null
-      setIsFetchingDlcs(false)
-    }
-
-    // Clear controller
-    if (dlcFetchController.current) {
-      dlcFetchController.current.abort()
-      dlcFetchController.current = null
-    }
-
-    // Close dialog
-    setDlcDialog((prev) => ({ ...prev, visible: false }))
-  }
-
-  // Handle DLC selection confirmation
-  const handleDlcConfirm = async (selectedDlcs: DlcInfo[]) => {
-    // Close the dialog first
-    setDlcDialog((prev) => ({ ...prev, visible: false }))
-
-    const gameId = dlcDialog.gameId
-    const game = games.find((g) => g.id === gameId)
-    if (!game) return
-
-    // Update local state to show installation in progress
-    setGames((prevGames) =>
-      prevGames.map((g) => (g.id === gameId ? { ...g, installing: true } : g))
-    )
-
-    try {
-      if (dlcDialog.isEditMode) {
-        // If in edit mode, we're updating existing cream_api.ini
-        // Show progress dialog for editing
-        setProgressDialog({
-          visible: true,
-          title: `Updating DLCs for ${game.title}`,
-          message: 'Updating DLC configuration...',
-          progress: 30,
-          showInstructions: false,
-          instructions: undefined,
-        })
-
-        // Call the backend to update the DLC configuration
-        await invoke('update_dlc_configuration_command', {
-          gamePath: game.path,
-          dlcs: selectedDlcs,
-        })
-
-        // Update progress dialog for completion
-        setProgressDialog((prev) => ({
-          ...prev,
-          title: `Update Complete: ${game.title}`,
-          message: 'DLC configuration updated successfully!',
-          progress: 100,
-        }))
-
-        // Hide dialog after a delay
-        setTimeout(() => {
-          setProgressDialog((prev) => ({ ...prev, visible: false }))
-          // Reset installing state
-          setGames((prevGames) =>
-            prevGames.map((g) => (g.id === gameId ? { ...g, installing: false } : g))
-          )
-        }, 2000)
-      } else {
-        // We're doing a fresh install with selected DLCs
-        // Show progress dialog for installation right away
-        setProgressDialog({
-          visible: true,
-          title: `Installing CreamLinux for ${game.title}`,
-          message: 'Processing...',
-          progress: 0,
-          showInstructions: false,
-          instructions: undefined,
-        })
-
-        // Invoke the installation with the selected DLCs
-        await invoke('install_cream_with_dlcs_command', {
-          gameId,
-          selectedDlcs,
-        }).catch((err) => {
-          console.error(`Error installing CreamLinux with selected DLCs:`, err)
-          throw err
-        })
-
-        // We don't need to manually close the dialog or update the game state
-        // because the backend will emit progress events that handle this
-      }
-    } catch (error) {
-      console.error('Error processing DLC selection:', error)
-
-      // Show error in progress dialog
-      setProgressDialog((prev) => ({
-        ...prev,
-        message: `Error: ${error}`,
-        progress: 100,
-      }))
-
-      // Reset installing state
-      setGames((prevGames) =>
-        prevGames.map((g) => (g.id === gameId ? { ...g, installing: false } : g))
-      )
-
-      // Hide dialog after a delay
-      setTimeout(() => {
-        setProgressDialog((prev) => ({ ...prev, visible: false }))
-      }, 3000)
-    }
-  }
-
-  // Update DLCs being streamed with enabled state
-  useEffect(() => {
-    if (dlcDialog.enabledDlcs.length > 0) {
-      setDlcDialog((prev) => ({
-        ...prev,
-        dlcs: prev.dlcs.map((dlc) => ({
-          ...dlc,
-          enabled: prev.enabledDlcs.length === 0 || prev.enabledDlcs.includes(dlc.appid),
-        })),
-      }))
-    }
-  }, [dlcDialog.dlcs, dlcDialog.enabledDlcs])
-
-  // Filter games based on sidebar filter and search query
-  const filteredGames = games.filter((game) => {
-    // First filter by the platform/type
-    const platformMatch =
-      filter === 'all' ||
-      (filter === 'native' && game.native) ||
-      (filter === 'proton' && !game.native)
-
-    // Then filter by search query (if any)
-    const searchMatch =
-      searchQuery.trim() === '' || game.title.toLowerCase().includes(searchQuery.toLowerCase())
-
-    // Both filters must match
-    return platformMatch && searchMatch
-  })
-
-  // Check if we should show the initial loading screen
   if (isInitialLoad) {
-    return <InitialLoadingScreen message={scanProgress.message} progress={scanProgress.progress} />
+    return <InitialLoadingScreen 
+      message={scanProgress.message} 
+      progress={scanProgress.progress}
+    />
   }
 
   return (
+    <ErrorBoundary>
       <div className="app-container">
         {/* Animated background */}
         <AnimatedBackground />
 
-      <Header onRefresh={loadGames} onSearch={handleSearchChange} searchQuery={searchQuery} />
+        {/* Header with search */}
+        <Header 
+          onRefresh={handleRefresh} 
+          onSearch={handleSearchChange} 
+          searchQuery={searchQuery} 
+          refreshDisabled={isLoading}
+        />
+
         <div className="main-content">
+          {/* Sidebar for filtering */}
           <Sidebar setFilter={setFilter} currentFilter={filter} />
+          
+          {/* Show error or game list */}
           {error ? (
             <div className="error-message">
               <h3>Error Loading Games</h3>
               <p>{error}</p>
-            <button onClick={loadGames}>Retry</button>
+              <button onClick={handleRefresh}>Retry</button>
             </div>
           ) : (
             <GameList
@@ -832,7 +92,7 @@ function App() {
           progress={progressDialog.progress}
           showInstructions={progressDialog.showInstructions}
           instructions={progressDialog.instructions}
-        onClose={handleCloseProgressDialog}
+          onClose={handleProgressDialogClose}
         />
 
         {/* DLC Selection Dialog */}
@@ -848,6 +108,7 @@ function App() {
           onConfirm={handleDlcConfirm}
         />
       </div>
+    </ErrorBoundary>
   )
 }
 

src/components/ActionButton.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-
-export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke'
-
-interface ActionButtonProps {
-  action: ActionType
-  isInstalled: boolean
-  isWorking: boolean
-  onClick: () => void
-  disabled?: boolean
-}
-
-const ActionButton: React.FC<ActionButtonProps> = ({
-  action,
-  isInstalled,
-  isWorking,
-  onClick,
-  disabled = false,
-}) => {
-  const getButtonText = () => {
-    if (isWorking) return 'Working...'
-
-    const isCream = action.includes('cream')
-    const product = isCream ? 'CreamLinux' : 'SmokeAPI'
-
-    return isInstalled ? `Uninstall ${product}` : `Install ${product}`
-  }
-
-  const getButtonClass = () => {
-    const baseClass = 'action-button'
-    return `${baseClass} ${isInstalled ? 'uninstall' : 'install'}`
-  }
-
-  return (
-    <button className={getButtonClass()} onClick={onClick} disabled={disabled || isWorking}>
-      {getButtonText()}
-    </button>
-  )
-}
-
-export default ActionButton

src/components/AnimatedCheckbox.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-
-interface AnimatedCheckboxProps {
-  checked: boolean
-  onChange: () => void
-  label?: string
-  sublabel?: string
-  className?: string
-}
-
-const AnimatedCheckbox: React.FC<AnimatedCheckboxProps> = ({
-  checked,
-  onChange,
-  label,
-  sublabel,
-  className = '',
-}) => {
-  return (
-    <label className={`animated-checkbox ${className}`}>
-      <input type="checkbox" checked={checked} onChange={onChange} className="checkbox-original" />
-      <span className={`checkbox-custom ${checked ? 'checked' : ''}`}>
-        <svg viewBox="0 0 24 24" className="checkmark-icon">
-          <path
-            className={`checkmark ${checked ? 'checked' : ''}`}
-            d="M5 12l5 5L20 7"
-            stroke="#fff"
-            strokeWidth="2.5"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </span>
-      {(label || sublabel) && (
-        <div className="checkbox-content">
-          {label && <span className="checkbox-label">{label}</span>}
-          {sublabel && <span className="checkbox-sublabel">{sublabel}</span>}
-        </div>
-      )}
-    </label>
-  )
-}
-
-export default AnimatedCheckbox

src/components/DlcSelectionDialog.tsx

@@ -1,239 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import AnimatedCheckbox from './AnimatedCheckbox'
-
-interface DlcInfo {
-  appid: string
-  name: string
-  enabled: boolean
-}
-
-interface DlcSelectionDialogProps {
-  visible: boolean
-  gameTitle: string
-  dlcs: DlcInfo[]
-  onClose: () => void
-  onConfirm: (selectedDlcs: DlcInfo[]) => void
-  isLoading: boolean
-  isEditMode?: boolean
-  loadingProgress?: number
-  estimatedTimeLeft?: string
-}
-
-const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
-  visible,
-  gameTitle,
-  dlcs,
-  onClose,
-  onConfirm,
-  isLoading,
-  isEditMode = false,
-  loadingProgress = 0,
-  estimatedTimeLeft = '',
-}) => {
-  const [selectedDlcs, setSelectedDlcs] = useState<DlcInfo[]>([])
-  const [showContent, setShowContent] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [selectAll, setSelectAll] = useState(true)
-  const [initialized, setInitialized] = useState(false)
-
-  // Initialize selected DLCs when DLC list changes
-  useEffect(() => {
-    if (visible && dlcs.length > 0 && !initialized) {
-      setSelectedDlcs(dlcs)
-
-      // Determine initial selectAll state based on if all DLCs are enabled
-      const allSelected = dlcs.every((dlc) => dlc.enabled)
-      setSelectAll(allSelected)
-
-      // Mark as initialized so we don't reset selections on subsequent DLC additions
-      setInitialized(true)
-    }
-  }, [visible, dlcs, initialized])
-
-  // Handle visibility changes
-  useEffect(() => {
-    if (visible) {
-      // Show content immediately for better UX
-      const timer = setTimeout(() => {
-        setShowContent(true)
-      }, 50)
-      return () => clearTimeout(timer)
-    } else {
-      setShowContent(false)
-      setInitialized(false) // Reset initialized state when dialog closes
-    }
-  }, [visible])
-
-  // Memoize filtered DLCs to avoid unnecessary recalculations
-  const filteredDlcs = useMemo(() => {
-    return searchQuery.trim() === ''
-      ? selectedDlcs
-      : selectedDlcs.filter(
-          (dlc) =>
-            dlc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            dlc.appid.includes(searchQuery)
-        )
-  }, [selectedDlcs, searchQuery])
-
-  // Update DLC selection status
-  const handleToggleDlc = (appid: string) => {
-    setSelectedDlcs((prev) =>
-      prev.map((dlc) => (dlc.appid === appid ? { ...dlc, enabled: !dlc.enabled } : dlc))
-    )
-  }
-
-  // Update selectAll state when individual DLC selections change
-  useEffect(() => {
-    const allSelected = selectedDlcs.every((dlc) => dlc.enabled)
-    setSelectAll(allSelected)
-  }, [selectedDlcs])
-
-  // Handle new DLCs being added while dialog is already open
-  useEffect(() => {
-    if (initialized && dlcs.length > selectedDlcs.length) {
-      // Find new DLCs that aren't in our current selection
-      const currentAppIds = new Set(selectedDlcs.map((dlc) => dlc.appid))
-      const newDlcs = dlcs.filter((dlc) => !currentAppIds.has(dlc.appid))
-
-      // Add new DLCs to our selection, maintaining their enabled state
-      if (newDlcs.length > 0) {
-        setSelectedDlcs((prev) => [...prev, ...newDlcs])
-      }
-    }
-  }, [dlcs, selectedDlcs, initialized])
-
-  const handleToggleSelectAll = () => {
-    const newSelectAllState = !selectAll
-    setSelectAll(newSelectAllState)
-
-    setSelectedDlcs((prev) =>
-      prev.map((dlc) => ({
-        ...dlc,
-        enabled: newSelectAllState,
-      }))
-    )
-  }
-
-  const handleConfirm = () => {
-    onConfirm(selectedDlcs)
-  }
-
-  // Modified to prevent closing when loading
-  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Prevent clicks from propagating through the overlay
-    e.stopPropagation()
-
-    // Only allow closing via overlay click if not loading
-    if (e.target === e.currentTarget && !isLoading) {
-      onClose()
-    }
-  }
-
-  // Count selected DLCs
-  const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length
-
-  // Format loading message to show total number of DLCs found
-  const getLoadingInfoText = () => {
-    if (isLoading && loadingProgress < 100) {
-      return ` (Loading more DLCs...)`
-    } else if (dlcs.length > 0) {
-      return ` (Total DLCs: ${dlcs.length})`
-    }
-    return ''
-  }
-
-  if (!visible) return null
-
-  return (
-    <div
-      className={`dlc-dialog-overlay ${showContent ? 'visible' : ''}`}
-      onClick={handleOverlayClick}
-    >
-      <div className={`dlc-selection-dialog ${showContent ? 'dialog-visible' : ''}`}>
-        <div className="dlc-dialog-header">
-          <h3>{isEditMode ? 'Edit DLCs' : 'Select DLCs to Enable'}</h3>
-          <div className="dlc-game-info">
-            <span className="game-title">{gameTitle}</span>
-            <span className="dlc-count">
-              {selectedCount} of {selectedDlcs.length} DLCs selected
-              {getLoadingInfoText()}
-            </span>
-          </div>
-        </div>
-
-        <div className="dlc-dialog-search">
-          <input
-            type="text"
-            placeholder="Search DLCs..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="dlc-search-input"
-          />
-          <div className="select-all-container">
-            <AnimatedCheckbox
-              checked={selectAll}
-              onChange={handleToggleSelectAll}
-              label="Select All"
-            />
-          </div>
-        </div>
-
-        {isLoading && (
-          <div className="dlc-loading-progress">
-            <div className="progress-bar-container">
-              <div className="progress-bar" style={{ width: `${loadingProgress}%` }} />
-            </div>
-            <div className="loading-details">
-              <span>Loading DLCs: {loadingProgress}%</span>
-              {estimatedTimeLeft && (
-                <span className="time-left">Est. time left: {estimatedTimeLeft}</span>
-              )}
-            </div>
-          </div>
-        )}
-
-        <div className="dlc-list-container">
-          {selectedDlcs.length > 0 ? (
-            <ul className="dlc-list">
-              {filteredDlcs.map((dlc) => (
-                <li key={dlc.appid} className="dlc-item">
-                  <AnimatedCheckbox
-                    checked={dlc.enabled}
-                    onChange={() => handleToggleDlc(dlc.appid)}
-                    label={dlc.name}
-                    sublabel={`ID: ${dlc.appid}`}
-                  />
-                </li>
-              ))}
-              {isLoading && (
-                <li className="dlc-item dlc-item-loading">
-                  <div className="loading-pulse"></div>
-                </li>
-              )}
-            </ul>
-          ) : (
-            <div className="dlc-loading">
-              <div className="loading-spinner"></div>
-              <p>Loading DLC information...</p>
-            </div>
-          )}
-        </div>
-
-        <div className="dlc-dialog-actions">
-          <button
-            className="cancel-button"
-            onClick={onClose}
-            disabled={isLoading && loadingProgress < 10} // Briefly disable to prevent accidental closing at start
-          >
-            Cancel
-          </button>
-          <button className="confirm-button" onClick={handleConfirm} disabled={isLoading}>
-            {isEditMode ? 'Save Changes' : 'Install with Selected DLCs'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default DlcSelectionDialog

src/components/Header.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-
-interface HeaderProps {
-  onRefresh: () => void
-  refreshDisabled?: boolean
-  onSearch: (query: string) => void
-  searchQuery: string
-}
-
-const Header: React.FC<HeaderProps> = ({
-  onRefresh,
-  refreshDisabled = false,
-  onSearch,
-  searchQuery,
-}) => {
-  return (
-    <header className="app-header">
-      <h1>CreamLinux</h1>
-      <div className="header-controls">
-        <button className="refresh-button" onClick={onRefresh} disabled={refreshDisabled}>
-          Refresh
-        </button>
-        <input
-          type="text"
-          placeholder="Search games..."
-          className="search-input"
-          value={searchQuery}
-          onChange={(e) => onSearch(e.target.value)}
-        />
-      </div>
-    </header>
-  )
-}
-
-export default Header

src/components/ImagePreloader.tsx

@@ -1,41 +0,0 @@
-import React, { useEffect } from 'react'
-import { findBestGameImage } from '../services/ImageService'
-
-interface ImagePreloaderProps {
-  gameIds: string[]
-  onComplete?: () => void
-}
-
-const ImagePreloader: React.FC<ImagePreloaderProps> = ({ gameIds, onComplete }) => {
-  useEffect(() => {
-    const preloadImages = async () => {
-      try {
-        // Only preload the first batch for performance (10 images max)
-        const batchToPreload = gameIds.slice(0, 10)
-
-        // Load images in parallel
-        await Promise.allSettled(batchToPreload.map((id) => findBestGameImage(id)))
-
-        if (onComplete) {
-          onComplete()
-        }
-      } catch (error) {
-        console.error('Error preloading images:', error)
-        // Continue even if there's an error
-        if (onComplete) {
-          onComplete()
-        }
-      }
-    }
-
-    if (gameIds.length > 0) {
-      preloadImages()
-    } else if (onComplete) {
-      onComplete()
-    }
-  }, [gameIds, onComplete])
-
-  return <div className="image-preloader">{/* Hidden element, just used for preloading */}</div>
-}
-
-export default ImagePreloader

src/components/InitialLoadingScreen.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-interface InitialLoadingScreenProps {
-  message: string
-  progress: number
-}
-
-const InitialLoadingScreen: React.FC<InitialLoadingScreenProps> = ({ message, progress }) => {
-  return (
-    <div className="initial-loading-screen">
-      <div className="loading-content">
-        <h1>CreamLinux</h1>
-        <div className="loading-animation">
-          <div className="loading-circles">
-            <div className="circle circle-1"></div>
-            <div className="circle circle-2"></div>
-            <div className="circle circle-3"></div>
-          </div>
-        </div>
-        <p className="loading-message">{message}</p>
-        <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

src/components/Sidebar.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-interface SidebarProps {
-  setFilter: (filter: string) => void
-  currentFilter: string
-}
-
-const Sidebar: React.FC<SidebarProps> = ({ setFilter, currentFilter }) => {
-  return (
-    <div className="sidebar">
-      <h2>Library</h2>
-      <ul className="filter-list">
-        <li className={currentFilter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>
-          All Games
-        </li>
-        <li
-          className={currentFilter === 'native' ? 'active' : ''}
-          onClick={() => setFilter('native')}
-        >
-          Native
-        </li>
-        <li
-          className={currentFilter === 'proton' ? 'active' : ''}
-          onClick={() => setFilter('proton')}
-        >
-          Proton Required
-        </li>
-      </ul>
-    </div>
-  )
-}
-
-export default Sidebar

src/components/buttons/ActionButton.tsx

@@ -0,0 +1,82 @@
+import { FC } from 'react'
+import Button, { ButtonVariant } from '../buttons/Button'
+import { Icon, layers, download } from '@/components/icons'
+
+// Define available action types
+export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke'
+
+interface ActionButtonProps {
+  action: ActionType
+  isInstalled: boolean
+  isWorking: boolean
+  onClick: () => void
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * Specialized button for game installation actions
+ */
+const ActionButton: FC<ActionButtonProps> = ({
+  action,
+  isInstalled,
+  isWorking,
+  onClick,
+  disabled = false,
+  className = '',
+}) => {
+  // Determine button text based on state
+  const getButtonText = () => {
+    if (isWorking) return 'Working...'
+
+    const isCream = action.includes('cream')
+    const product = isCream ? 'CreamLinux' : 'SmokeAPI'
+
+    return isInstalled ? `Uninstall ${product}` : `Install ${product}`
+  }
+
+  // Map to our button variant
+  const getButtonVariant = (): ButtonVariant => {
+    // For uninstall actions, use danger variant
+    if (isInstalled) return 'danger'
+    // For install actions, use success variant 
+    return 'success'
+  }
+
+  // Select appropriate icon based on action type and state
+  const getIconInfo = () => {
+    const isCream = action.includes('cream')
+    
+    if (isInstalled) {
+      // Uninstall actions
+      return { name: layers, variant: 'bold' }
+    } else {
+      // Install actions
+      return { name: download, variant: isCream ? 'bold' : 'outline' }
+    }
+  }
+
+  const iconInfo = getIconInfo()
+
+  return (
+    <Button
+      variant={getButtonVariant()}
+      isLoading={isWorking}
+      onClick={onClick}
+      disabled={disabled || isWorking}
+      fullWidth
+      className={`action-button ${className}`}
+      leftIcon={isWorking ? undefined : (
+        <Icon
+          name={iconInfo.name}
+          variant={iconInfo.variant}
+          size="md"
+        />
+      )}
+    >
+      {getButtonText()}
+    </Button>
+  )
+}
+
+export default ActionButton

src/components/buttons/AnimatedCheckbox.tsx

@@ -0,0 +1,51 @@
+import { Icon, check } from '@/components/icons'
+
+interface AnimatedCheckboxProps {
+  checked: boolean;
+  onChange: () => void;
+  label?: string;
+  sublabel?: string;
+  className?: string;
+}
+
+/**
+ * Animated checkbox component with optional label and sublabel
+ */
+const AnimatedCheckbox = ({
+  checked,
+  onChange,
+  label,
+  sublabel,
+  className = '',
+}: AnimatedCheckboxProps) => {
+  return (
+    <label className={`animated-checkbox ${className}`}>
+      <input 
+        type="checkbox" 
+        checked={checked} 
+        onChange={onChange} 
+        className="checkbox-original"
+      />
+      
+      <span className={`checkbox-custom ${checked ? 'checked' : ''}`}>
+        {checked && (
+          <Icon
+            name={check}
+            variant="bold"
+            size="sm"
+            className="checkbox-icon"
+          />
+        )}
+      </span>
+      
+      {(label || sublabel) && (
+        <div className="checkbox-content">
+          {label && <span className="checkbox-label">{label}</span>}
+          {sublabel && <span className="checkbox-sublabel">{sublabel}</span>}
+        </div>
+      )}
+    </label>
+  )
+}
+
+export default AnimatedCheckbox

src/components/buttons/Button.tsx

@@ -0,0 +1,67 @@
+import { FC, ButtonHTMLAttributes } from 'react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+/**
+ * Button component with different variants, sizes and states
+ */
+const Button: FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'medium',
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  // Size class mapping
+  const sizeClass = {
+    small: 'btn-sm',
+    medium: 'btn-md',
+    large: 'btn-lg',
+  }[size];
+
+  // Variant class mapping
+  const variantClass = {
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+    danger: 'btn-danger',
+    success: 'btn-success',
+    warning: 'btn-warning',
+  }[variant];
+
+  return (
+    <button
+      className={`btn ${variantClass} ${sizeClass} ${fullWidth ? 'btn-full' : ''} ${
+        isLoading ? 'btn-loading' : ''
+      } ${className}`}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && (
+        <span className="btn-spinner">
+          <span className="spinner"></span>
+        </span>
+      )}
+      
+      {leftIcon && !isLoading && <span className="btn-icon btn-icon-left">{leftIcon}</span>}
+      <span className="btn-text">{children}</span>
+      {rightIcon && !isLoading && <span className="btn-icon btn-icon-right">{rightIcon}</span>}
+    </button>
+  );
+};
+
+export default Button;

src/components/buttons/index.ts

@@ -0,0 +1,8 @@
+// Export all button components
+export { default as Button } from './Button';
+export { default as ActionButton } from './ActionButton';
+export { default as AnimatedCheckbox } from './AnimatedCheckbox';
+
+// Export types
+export type { ButtonVariant, ButtonSize } from './Button';
+export type { ActionType } from './ActionButton';

src/components/common/LoadingIndicator.tsx

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react'
+
+export type LoadingType = 'spinner' | 'dots' | 'progress'
+export type LoadingSize = 'small' | 'medium' | 'large'
+
+interface LoadingIndicatorProps {
+  size?: LoadingSize;
+  type?: LoadingType;
+  message?: string;
+  progress?: number;
+  className?: string;
+}
+
+/**
+ * Versatile loading indicator component
+ * Supports multiple visual styles and sizes
+ */
+const LoadingIndicator = ({
+  size = 'medium',
+  type = 'spinner',
+  message,
+  progress = 0,
+  className = '',
+}: LoadingIndicatorProps) => {
+  // Size class mapping
+  const sizeClass = {
+    small: 'loading-small',
+    medium: 'loading-medium',
+    large: 'loading-large',
+  }[size]
+
+  // Render loading indicator based on type
+  const renderLoadingIndicator = (): ReactNode => {
+    switch (type) {
+      case 'spinner':
+        return <div className="loading-spinner"></div>
+        
+      case 'dots':
+        return (
+          <div className="loading-dots">
+            <div className="dot dot-1"></div>
+            <div className="dot dot-2"></div>
+            <div className="dot dot-3"></div>
+          </div>
+        )
+        
+      case 'progress':
+        return (
+          <div className="loading-progress">
+            <div className="progress-bar-container">
+              <div
+                className="progress-bar"
+                style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }}
+              ></div>
+            </div>
+            {progress > 0 && (
+              <div className="progress-percentage">{Math.round(progress)}%</div>
+            )}
+          </div>
+        )
+        
+      default:
+        return <div className="loading-spinner"></div>
+    }
+  }
+
+  return (
+    <div className={`loading-indicator ${sizeClass} ${className}`}>
+      {renderLoadingIndicator()}
+      {message && <p className="loading-message">{message}</p>}
+    </div>
+  )
+}
+
+export default LoadingIndicator

src/components/common/index.ts

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

src/components/dialogs/Dialog.tsx

@@ -0,0 +1,82 @@
+import { ReactNode, useEffect, useState } from 'react'
+
+export interface DialogProps {
+  visible: boolean;
+  onClose?: () => void;
+  className?: string;
+  preventBackdropClose?: boolean;
+  children: ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  showAnimationOnUnmount?: boolean;
+}
+
+/**
+ * Base Dialog component that serves as a container for dialog content
+ * Used with DialogHeader, DialogBody, and DialogFooter components
+ */
+const Dialog = ({
+  visible,
+  onClose,
+  className = '',
+  preventBackdropClose = false,
+  children,
+  size = 'medium',
+  showAnimationOnUnmount = true,
+}: DialogProps) => {
+  const [showContent, setShowContent] = useState(false)
+  const [shouldRender, setShouldRender] = useState(visible)
+
+  // Handle visibility changes with animations
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true)
+      // Small delay to trigger entrance animation after component is mounted
+      const timer = setTimeout(() => {
+        setShowContent(true)
+      }, 50)
+      return () => clearTimeout(timer)
+    } else if (showAnimationOnUnmount) {
+      // First hide content with animation
+      setShowContent(false)
+      // Then unmount after animation completes
+      const timer = setTimeout(() => {
+        setShouldRender(false)
+      }, 300) // Match this with your CSS transition duration
+      return () => clearTimeout(timer)
+    } else {
+      // Immediately unmount without animation
+      setShowContent(false)
+      setShouldRender(false)
+    }
+  }, [visible, showAnimationOnUnmount])
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget && !preventBackdropClose && onClose) {
+      onClose()
+    }
+  }
+
+  // Don't render anything if dialog shouldn't be shown
+  if (!shouldRender) return null
+
+  const sizeClass = {
+    small: 'dialog-small',
+    medium: 'dialog-medium',
+    large: 'dialog-large',
+  }[size]
+
+  return (
+    <div
+      className={`dialog-overlay ${showContent ? 'visible' : ''}`}
+      onClick={handleBackdropClick}
+    >
+      <div
+        className={`dialog ${sizeClass} ${className} ${showContent ? 'dialog-visible' : ''}`}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Dialog

src/components/dialogs/DialogActions.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+
+export interface DialogActionsProps {
+  children: ReactNode;
+  className?: string;
+  align?: 'start' | 'center' | 'end';
+}
+
+/**
+ * Actions container for dialog footers
+ * Provides consistent spacing and alignment for action buttons
+ */
+const DialogActions = ({ 
+  children, 
+  className = '',
+  align = 'end' 
+}: DialogActionsProps) => {
+  const alignClass = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end'
+  }[align];
+
+  return (
+    <div className={`dialog-actions ${alignClass} ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+export default DialogActions

src/components/dialogs/DialogBody.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface DialogBodyProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Body component for dialogs
+ * Contains the main content with scrolling capability
+ */
+const DialogBody = ({ children, className = '' }: DialogBodyProps) => {
+  return (
+    <div className={`dialog-body ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+export default DialogBody

src/components/dialogs/DialogFooter.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface DialogFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Footer component for dialogs
+ * Contains action buttons and optional status information
+ */
+const DialogFooter = ({ children, className = '' }: DialogFooterProps) => {
+  return (
+    <div className={`dialog-footer ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+export default DialogFooter

src/components/dialogs/DialogHeader.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react'
+
+export interface DialogHeaderProps {
+  children: ReactNode;
+  className?: string;
+  onClose?: () => void;
+}
+
+/**
+ * Header component for dialogs
+ * Contains the title and optional close button
+ */
+const DialogHeader = ({ children, className = '', onClose }: DialogHeaderProps) => {
+  return (
+    <div className={`dialog-header ${className}`}>
+      {children}
+      {onClose && (
+        <button 
+          className="dialog-close-button" 
+          onClick={onClose} 
+          aria-label="Close dialog"
+        >
+          ×
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default DialogHeader

src/components/dialogs/DlcSelectionDialog.tsx

@@ -0,0 +1,240 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import Dialog from './Dialog'
+import DialogHeader from './DialogHeader'
+import DialogBody from './DialogBody'
+import DialogFooter from './DialogFooter'
+import DialogActions from './DialogActions'
+import { Button, AnimatedCheckbox } from '@/components/buttons'
+import { DlcInfo } from '@/types'
+
+export interface DlcSelectionDialogProps {
+  visible: boolean;
+  gameTitle: string;
+  dlcs: DlcInfo[];
+  onClose: () => void;
+  onConfirm: (selectedDlcs: DlcInfo[]) => void;
+  isLoading: boolean;
+  isEditMode?: boolean;
+  loadingProgress?: number;
+  estimatedTimeLeft?: string;
+}
+
+/**
+ * DLC Selection Dialog component
+ * Allows users to select which DLCs they want to enable
+ * Works for both initial installation and editing existing configurations
+ */
+const DlcSelectionDialog = ({
+  visible,
+  gameTitle,
+  dlcs,
+  onClose,
+  onConfirm,
+  isLoading,
+  isEditMode = false,
+  loadingProgress = 0,
+  estimatedTimeLeft = '',
+}: DlcSelectionDialogProps) => {
+  // State for DLC management
+  const [selectedDlcs, setSelectedDlcs] = useState<DlcInfo[]>([])
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectAll, setSelectAll] = useState(true)
+  const [initialized, setInitialized] = useState(false)
+
+  // Reset dialog state when it opens or closes
+  useEffect(() => {
+    if (!visible) {
+      setInitialized(false)
+      setSelectedDlcs([])
+      setSearchQuery('')
+    }
+  }, [visible])
+
+  // Initialize selected DLCs when DLC list changes
+  useEffect(() => {
+    if (dlcs.length > 0) {
+      if (!initialized) {
+        // Create a new array to ensure we don't share references
+        setSelectedDlcs([...dlcs])
+        
+        // Determine initial selectAll state based on if all DLCs are enabled
+        const allSelected = dlcs.every((dlc) => dlc.enabled)
+        setSelectAll(allSelected)
+        
+        // Mark as initialized to avoid resetting selections on subsequent updates
+        setInitialized(true)
+      } else {
+        // Find new DLCs that aren't in our current selection 
+        const currentAppIds = new Set(selectedDlcs.map((dlc) => dlc.appid))
+        const newDlcs = dlcs.filter((dlc) => !currentAppIds.has(dlc.appid))
+        
+        // If we found new DLCs, add them to our selection
+        if (newDlcs.length > 0) {
+          setSelectedDlcs((prev) => [...prev, ...newDlcs])
+        }
+      }
+    }
+  }, [dlcs, selectedDlcs, initialized])
+
+  // Memoize filtered DLCs to avoid unnecessary recalculations
+  const filteredDlcs = React.useMemo(() => {
+    return searchQuery.trim() === ''
+      ? selectedDlcs
+      : selectedDlcs.filter(
+          (dlc) =>
+            dlc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            dlc.appid.includes(searchQuery)
+        )
+  }, [selectedDlcs, searchQuery])
+
+  // Update DLC selection status
+  const handleToggleDlc = useCallback((appid: string) => {
+    setSelectedDlcs((prev) =>
+      prev.map((dlc) => (dlc.appid === appid ? { ...dlc, enabled: !dlc.enabled } : dlc))
+    )
+  }, [])
+
+  // Update selectAll state when individual DLC selections change
+  useEffect(() => {
+    if (selectedDlcs.length > 0) {
+      const allSelected = selectedDlcs.every((dlc) => dlc.enabled)
+      setSelectAll(allSelected)
+    }
+  }, [selectedDlcs])
+
+  // Toggle all DLCs at once
+  const handleToggleSelectAll = useCallback(() => {
+    const newSelectAllState = !selectAll
+    setSelectAll(newSelectAllState)
+
+    setSelectedDlcs((prev) =>
+      prev.map((dlc) => ({
+        ...dlc,
+        enabled: newSelectAllState,
+      }))
+    )
+  }, [selectAll])
+
+  // Submit selected DLCs to parent component
+  const handleConfirm = useCallback(() => {
+    // Create a deep copy to prevent reference issues
+    const dlcsCopy = JSON.parse(JSON.stringify(selectedDlcs));
+    onConfirm(dlcsCopy);
+  }, [onConfirm, selectedDlcs]);
+
+  // Count selected DLCs
+  const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length
+
+  // Format dialog title and messages based on mode
+  const dialogTitle = isEditMode ? 'Edit DLCs' : 'Select DLCs to Enable'
+  const actionButtonText = isEditMode ? 'Save Changes' : 'Install with Selected DLCs'
+  
+  // Format loading message to show total number of DLCs found
+  const getLoadingInfoText = () => {
+    if (isLoading && loadingProgress < 100) {
+      return ` (Loading more DLCs...)`
+    } else if (dlcs.length > 0) {
+      return ` (Total DLCs: ${dlcs.length})`
+    }
+    return ''
+  }
+
+  return (
+    <Dialog
+      visible={visible}
+      onClose={onClose}
+      size="large"
+      preventBackdropClose={isLoading}
+    >
+      <DialogHeader onClose={onClose}>
+        <h3>{dialogTitle}</h3>
+        <div className="dlc-game-info">
+          <span className="game-title">{gameTitle}</span>
+          <span className="dlc-count">
+            {selectedCount} of {selectedDlcs.length} DLCs selected
+            {getLoadingInfoText()}
+          </span>
+        </div>
+      </DialogHeader>
+
+      <div className="dlc-dialog-search">
+        <input
+          type="text"
+          placeholder="Search DLCs..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="dlc-search-input"
+        />
+        <div className="select-all-container">
+          <AnimatedCheckbox
+            checked={selectAll}
+            onChange={handleToggleSelectAll}
+            label="Select All"
+          />
+        </div>
+      </div>
+
+      {isLoading && loadingProgress > 0 && (
+        <div className="dlc-loading-progress">
+          <div className="progress-bar-container">
+            <div className="progress-bar" style={{ width: `${loadingProgress}%` }} />
+          </div>
+          <div className="loading-details">
+            <span>Loading DLCs: {loadingProgress}%</span>
+            {estimatedTimeLeft && (
+              <span className="time-left">Est. time left: {estimatedTimeLeft}</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      <DialogBody className="dlc-list-container">
+        {selectedDlcs.length > 0 ? (
+          <ul className="dlc-list">
+            {filteredDlcs.map((dlc) => (
+              <li key={dlc.appid} className="dlc-item">
+                <AnimatedCheckbox
+                  checked={dlc.enabled}
+                  onChange={() => handleToggleDlc(dlc.appid)}
+                  label={dlc.name}
+                  sublabel={`ID: ${dlc.appid}`}
+                />
+              </li>
+            ))}
+            {isLoading && (
+              <li className="dlc-item dlc-item-loading">
+                <div className="loading-pulse"></div>
+              </li>
+            )}
+          </ul>
+        ) : (
+          <div className="dlc-loading">
+            <div className="loading-spinner"></div>
+            <p>Loading DLC information...</p>
+          </div>
+        )}
+      </DialogBody>
+
+      <DialogFooter>
+        <DialogActions>
+          <Button
+            variant="secondary"
+            onClick={onClose}
+            disabled={isLoading && loadingProgress < 10}
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="primary" 
+            onClick={handleConfirm} 
+            disabled={isLoading}
+          >
+            {actionButtonText}
+          </Button>
+        </DialogActions>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export default DlcSelectionDialog

src/components/dialogs/ProgressDialog.tsx

@@ -1,49 +1,42 @@
-import React, { useState, useEffect } from 'react'
+import { useState } from 'react'
+import Dialog from './Dialog'
+import DialogHeader from './DialogHeader'
+import DialogBody from './DialogBody'
+import DialogFooter from './DialogFooter'
+import DialogActions from './DialogActions'
+import { Button } from '@/components/buttons'
 
-interface InstructionInfo {
+export interface InstallationInstructions {
-  type: string
+  type: string;
-  command: string
+  command: string;
-  game_title: string
+  game_title: string;
-  dlc_count?: number
+  dlc_count?: number;
 }
 
-interface ProgressDialogProps {
+export interface ProgressDialogProps {
-  title: string
+  visible: boolean;
-  message: string
+  title: string;
-  progress: number // 0-100
+  message: string;
-  visible: boolean
+  progress: number;
-  showInstructions?: boolean
+  showInstructions?: boolean;
-  instructions?: InstructionInfo
+  instructions?: InstallationInstructions;
-  onClose?: () => void
+  onClose?: () => void;
 }
 
-const ProgressDialog: React.FC<ProgressDialogProps> = ({
+/**
+ * ProgressDialog component
+ * Shows installation progress with a progress bar and optional instructions
+ */
+const ProgressDialog = ({
+  visible,
   title,
   message,
   progress,
-  visible,
   showInstructions = false,
   instructions,
   onClose,
-}) => {
+}: ProgressDialogProps) => {
   const [copySuccess, setCopySuccess] = useState(false)
-  const [showContent, setShowContent] = useState(false)
-
-  // Reset copy state when dialog visibility changes
-  useEffect(() => {
-    if (!visible) {
-      setCopySuccess(false)
-      setShowContent(false)
-    } else {
-      // Add a small delay to trigger the entrance animation
-      const timer = setTimeout(() => {
-        setShowContent(true)
-      }, 50)
-      return () => clearTimeout(timer)
-    }
-  }, [visible])
-
-  if (!visible) return null
 
   const handleCopyCommand = () => {
     if (instructions?.command) {
@@ -57,29 +50,6 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
     }
   }
 
-  const handleClose = () => {
-    setShowContent(false)
-    // Delay closing to allow exit animation
-    setTimeout(() => {
-      if (onClose) {
-        onClose()
-      }
-    }, 300)
-  }
-
-  // Prevent closing when in progress
-  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Always prevent propagation
-    e.stopPropagation()
-
-    // Only allow clicking outside to close if we're done processing (100%)
-    // and showing instructions or if explicitly allowed via a prop
-    if (e.target === e.currentTarget && progress >= 100 && showInstructions) {
-      handleClose()
-    }
-    // Otherwise, do nothing - require using the close button
-  }
-
   // Determine if we should show the copy button (for CreamLinux but not SmokeAPI)
   const showCopyButton =
     instructions?.type === 'cream_install' || instructions?.type === 'cream_uninstall'
@@ -147,14 +117,17 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   const isCloseButtonEnabled = showInstructions || progress >= 100
 
   return (
-    <div
+    <Dialog
-      className={`progress-dialog-overlay ${showContent ? 'visible' : ''}`}
+      visible={visible}
-      onClick={handleOverlayClick}
+      onClose={isCloseButtonEnabled ? onClose : undefined}
-    >
+      size="medium"
-      <div
+      preventBackdropClose={!isCloseButtonEnabled}
-        className={`progress-dialog ${showInstructions ? 'with-instructions' : ''} ${showContent ? 'dialog-visible' : ''}`}
     >
+      <DialogHeader>
         <h3>{title}</h3>
+      </DialogHeader>
+      
+      <DialogBody>
         <p>{message}</p>
 
         <div className="progress-bar-container">
@@ -174,35 +147,33 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
             <div className={getCommandBoxClass()}>
               <pre className="selectable-text">{instructions.command}</pre>
             </div>
+          </div>
+        )}
+      </DialogBody>
       
-            <div className="action-buttons">
+      <DialogFooter>
-              {showCopyButton && (
+        <DialogActions>
-                <button className="copy-button" onClick={handleCopyCommand}>
+          {showInstructions && showCopyButton && (
+            <Button 
+              variant="primary"
+              onClick={handleCopyCommand}
+            >
               {copySuccess ? 'Copied!' : 'Copy to Clipboard'}
-                </button>
+            </Button>
           )}
 
-              <button
+          {isCloseButtonEnabled && (
-                className="close-button"
+            <Button
-                onClick={handleClose}
+              variant="secondary"
+              onClick={onClose}
               disabled={!isCloseButtonEnabled}
             >
               Close
-              </button>
+            </Button>
-            </div>
-          </div>
           )}
-
+        </DialogActions>
-        {/* Show close button even if no instructions */}
+      </DialogFooter>
-        {!showInstructions && progress >= 100 && (
+    </Dialog>
-          <div className="action-buttons" style={{ marginTop: '1rem' }}>
-            <button className="close-button" onClick={handleClose}>
-              Close
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
   )
 }
 

src/components/dialogs/index.ts

@@ -0,0 +1,17 @@
+// Export all dialog components 
+export { default as Dialog } from './Dialog';
+export { default as DialogHeader } from './DialogHeader';
+export { default as DialogBody } from './DialogBody';
+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 types
+export type { DialogProps } from './Dialog';
+export type { DialogHeaderProps } from './DialogHeader';
+export type { DialogBodyProps } from './DialogBody';
+export type { DialogFooterProps } from './DialogFooter';
+export type { DialogActionsProps } from './DialogActions';
+export type { ProgressDialogProps, InstallationInstructions } from './ProgressDialog';
+export type { DlcSelectionDialogProps } from './DlcSelectionDialog';

src/components/games/GameItem.tsx

@@ -1,18 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
-import { findBestGameImage } from '../services/ImageService'
+import { findBestGameImage } from '@/services/ImageService'
-import { ActionType } from './ActionButton'
+import { Game } from '@/types'
-
+import { ActionButton, ActionType, Button } from '@/components/buttons'
-interface Game {
-  id: string
-  title: string
-  path: string
-  platform?: string
-  native: boolean
-  api_files: string[]
-  cream_installed?: boolean
-  smoke_installed?: boolean
-  installing?: boolean
-}
 
 interface GameItemProps {
   game: Game
@@ -20,7 +9,11 @@ interface GameItemProps {
   onEdit?: (gameId: string) => void
 }
 
-const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
+/**
+ * Individual game card component
+ * Displays game information and action buttons
+ */
+const GameItem = ({ game, onAction, onEdit }: GameItemProps) => {
   const [imageUrl, setImageUrl] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
@@ -116,58 +109,51 @@ const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
         <div className="game-actions">
           {/* Show CreamLinux button only for native games */}
           {shouldShowCream && (
-            <button
+            <ActionButton
-              className={`action-button ${game.cream_installed ? 'uninstall' : 'install'}`}
+              action={game.cream_installed ? 'uninstall_cream' : 'install_cream'}
+              isInstalled={!!game.cream_installed}
+              isWorking={!!game.installing}
               onClick={handleCreamAction}
-              disabled={!!game.installing}
+            />
-            >
-              {game.installing
-                ? 'Working...'
-                : game.cream_installed
-                  ? 'Uninstall CreamLinux'
-                  : 'Install CreamLinux'}
-            </button>
           )}
 
           {/* Show SmokeAPI button only for Proton/Windows games with API files */}
           {shouldShowSmoke && (
-            <button
+            <ActionButton
-              className={`action-button ${game.smoke_installed ? 'uninstall' : 'install'}`}
+              action={game.smoke_installed ? 'uninstall_smoke' : 'install_smoke'}
+              isInstalled={!!game.smoke_installed}
+              isWorking={!!game.installing}
               onClick={handleSmokeAction}
-              disabled={!!game.installing}
+            />
-            >
-              {game.installing
-                ? 'Working...'
-                : game.smoke_installed
-                  ? 'Uninstall SmokeAPI'
-                  : 'Install SmokeAPI'}
-            </button>
           )}
 
           {/* Show message for Proton games without API files */}
           {isProtonNoApi && (
             <div className="api-not-found-message">
               <span>Steam API DLL not found</span>
-              <button
+              <Button
-                className="rescan-button"
+                variant="warning"
+                size="small"
                 onClick={() => onAction(game.id, 'install_smoke')}
                 title="Attempt to scan again"
               >
                 Rescan
-              </button>
+              </Button>
             </div>
           )}
 
           {/* Edit button - only enabled if CreamLinux is installed */}
           {game.cream_installed && (
-            <button
+            <Button
-              className="edit-button"
+              variant="secondary"
+              size="small"
               onClick={handleEdit}
               disabled={!game.cream_installed || !!game.installing}
               title="Manage DLCs"
+              className="edit-button"
             >
               Manage DLCs
-            </button>
+            </Button>
           )}
         </div>
       </div>

src/components/games/GameList.tsx

@@ -1,19 +1,8 @@
-import React, { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo } from 'react'
-import GameItem from './GameItem'
+import {GameItem, ImagePreloader} from '@/components/games'
-import ImagePreloader from './ImagePreloader'
+import { ActionType } from '@/components/buttons'
-import { ActionType } from './ActionButton'
+import { Game } from '@/types'
-
+import LoadingIndicator from '../common/LoadingIndicator'
-interface Game {
-  id: string
-  title: string
-  path: string
-  platform?: string
-  native: boolean
-  api_files: string[]
-  cream_installed?: boolean
-  smoke_installed?: boolean
-  installing?: boolean
-}
 
 interface GameListProps {
   games: Game[]
@@ -22,10 +11,14 @@ interface GameListProps {
   onEdit?: (gameId: string) => void
 }
 
-const GameList: React.FC<GameListProps> = ({ games, isLoading, onAction, onEdit }) => {
+/**
+ * Main game list component
+ * Displays games in a grid with search and filtering applied
+ */
+const GameList = ({ games, isLoading, onAction, onEdit }: GameListProps) => {
   const [imagesPreloaded, setImagesPreloaded] = useState(false)
 
-  // Sort games alphabetically by title using useMemo to avoid re-sorting on each render
+  // Sort games alphabetically by title 
   const sortedGames = useMemo(() => {
     return [...games].sort((a, b) => a.title.localeCompare(b.title))
   }, [games])
@@ -35,25 +28,22 @@ const GameList: React.FC<GameListProps> = ({ games, isLoading, onAction, onEdit
     setImagesPreloaded(false)
   }, [games])
 
-  // Debug log to help diagnose game states
+  const handlePreloadComplete = () => {
-  useEffect(() => {
+    setImagesPreloaded(true)
-    if (games.length > 0) {
-      console.log('Games state in GameList:', games.length, 'games')
   }
-  }, [games])
 
   if (isLoading) {
     return (
       <div className="game-list">
-        <div className="loading-indicator">Scanning for games...</div>
+        <LoadingIndicator
+          type="spinner"
+          size="large"
+          message="Scanning for games..."
+        />
       </div>
     )
   }
 
-  const handlePreloadComplete = () => {
-    setImagesPreloaded(true)
-  }
-
   return (
     <div className="game-list">
       <h2>Games ({games.length})</h2>

src/components/games/ImagePreloader.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react'
+import { findBestGameImage } from '@/services/ImageService'
+
+interface ImagePreloaderProps {
+  gameIds: string[]
+  onComplete?: () => void
+}
+
+/**
+ * Preloads game images to prevent flickering
+ * Only used internally by GameList component
+ */
+const ImagePreloader = ({ gameIds, onComplete }: ImagePreloaderProps) => {
+  useEffect(() => {
+    const preloadImages = async () => {
+      try {
+        // Only preload the first batch for performance (10 images max)
+        const batchToPreload = gameIds.slice(0, 10)
+        
+        // Track loading progress
+        let loadedCount = 0
+        const totalImages = batchToPreload.length
+        
+        // Load images in parallel
+        await Promise.allSettled(
+          batchToPreload.map(async (id) => {
+            await findBestGameImage(id)
+            loadedCount++
+            
+            // If all images are loaded, call onComplete
+            if (loadedCount === totalImages && onComplete) {
+              onComplete()
+            }
+          })
+        )
+        
+        // Fallback if Promise.allSettled doesn't trigger onComplete
+        if (onComplete) {
+          onComplete()
+        }
+      } catch (error) {
+        console.error('Error preloading images:', error)
+        // Continue even if there's an error
+        if (onComplete) {
+          onComplete()
+        }
+      }
+    }
+
+    if (gameIds.length > 0) {
+      preloadImages()
+    } else if (onComplete) {
+      onComplete()
+    }
+  }, [gameIds, onComplete])
+
+  // Invisible component that just handles preloading
+  return null
+}
+
+export default ImagePreloader

src/components/games/index.ts

@@ -0,0 +1,4 @@
+// Export all game components
+export { default as GameList } from './GameList';
+export { default as GameItem } from './GameItem';
+export { default as ImagePreloader } from './ImagePreloader';

src/components/icons/Icon.tsx

@@ -0,0 +1,155 @@
+/**
+ * Icon component for displaying SVG icons with standardized properties
+ */
+import React from 'react'
+
+// Import all icon variants
+import * as OutlineIcons from './ui/outline'
+import * as BoldIcons from './ui/bold'
+import * as BrandIcons from './brands'
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number
+export type IconVariant = 'bold' | 'outline' | 'brand' | undefined
+export type IconName = keyof typeof OutlineIcons | keyof typeof BoldIcons | keyof typeof BrandIcons
+
+// Sets of icon names by type for determining default variants
+const BRAND_ICON_NAMES = new Set(Object.keys(BrandIcons))
+const OUTLINE_ICON_NAMES = new Set(Object.keys(OutlineIcons))
+const BOLD_ICON_NAMES = new Set(Object.keys(BoldIcons))
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Name of the icon to render */
+  name: IconName | string
+  /** Size of the icon */
+  size?: IconSize
+  /** Icon variant - bold, outline, or brand */
+  variant?: IconVariant | string
+  /** Title for accessibility */
+  title?: string
+  /** Fill color (if not specified by the SVG itself) */
+  fillColor?: string
+  /** Stroke color (if not specified by the SVG itself) */
+  strokeColor?: string
+  /** Additional CSS class names */
+  className?: string
+}
+
+/**
+ * Convert size string to pixel value
+ */
+const getSizeValue = (size: IconSize): string => {
+  if (typeof size === 'number') return `${size}px`
+
+  const sizeMap: Record<string, string> = {
+    xs: '12px',
+    sm: '16px',
+    md: '24px',
+    lg: '32px',
+    xl: '48px'
+  }
+
+  return sizeMap[size] || sizeMap.md
+}
+
+/**
+ * Gets the icon component based on name and variant
+ */
+const getIconComponent = (name: string, variant: IconVariant | string): React.ComponentType<React.SVGProps<SVGSVGElement>> | null => {
+  // Normalize variant to ensure it's a valid IconVariant
+  const normalizedVariant = (variant === 'bold' || variant === 'outline' || variant === 'brand') 
+    ? variant as IconVariant 
+    : undefined;
+
+  // Try to get the icon from the specified variant
+  switch (normalizedVariant) {
+    case 'outline':
+      return OutlineIcons[name as keyof typeof OutlineIcons] || null
+    case 'bold':
+      return BoldIcons[name as keyof typeof BoldIcons] || null
+    case 'brand':
+      return BrandIcons[name as keyof typeof BrandIcons] || null
+    default:
+      // If no variant specified, determine best default
+      if (BRAND_ICON_NAMES.has(name)) {
+        return BrandIcons[name as keyof typeof BrandIcons] || null
+      } else if (OUTLINE_ICON_NAMES.has(name)) {
+        return OutlineIcons[name as keyof typeof OutlineIcons] || null
+      } else if (BOLD_ICON_NAMES.has(name)) {
+        return BoldIcons[name as keyof typeof BoldIcons] || null
+      }
+      return null
+  }
+}
+
+/**
+ * Icon component
+ * Renders SVG icons with consistent sizing and styling
+ */
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = 'md',
+  variant,
+  title,
+  fillColor,
+  strokeColor,
+  className = '',
+  ...rest
+}) => {
+  // Determine default variant based on icon type if no variant provided
+  let defaultVariant: IconVariant | string = variant
+  
+  if (defaultVariant === undefined) {
+    if (BRAND_ICON_NAMES.has(name)) {
+      defaultVariant = 'brand'
+    } else {
+      defaultVariant = 'bold' // Default to bold for non-brand icons
+    }
+  }
+  
+  // Get the icon component based on name and variant
+  let finalIconComponent = getIconComponent(name, defaultVariant)
+  let finalVariant = defaultVariant
+  
+  // Try fallbacks if the icon doesn't exist in the requested variant
+  if (!finalIconComponent && defaultVariant !== 'outline') {
+    finalIconComponent = getIconComponent(name, 'outline')
+    finalVariant = 'outline'
+  }
+  
+  if (!finalIconComponent && defaultVariant !== 'bold') {
+    finalIconComponent = getIconComponent(name, 'bold')
+    finalVariant = 'bold'
+  }
+
+  if (!finalIconComponent && defaultVariant !== 'brand') {
+    finalIconComponent = getIconComponent(name, 'brand')
+    finalVariant = 'brand'
+  }
+  
+  // If still no icon found, return null
+  if (!finalIconComponent) {
+    console.warn(`Icon not found: ${name} (${defaultVariant})`)
+    return null
+  }
+
+  const sizeValue = getSizeValue(size)
+  const combinedClassName = `icon icon-${size} icon-${finalVariant} ${className}`.trim()
+  
+  const IconComponentToRender = finalIconComponent
+
+  return (
+    <IconComponentToRender
+      className={combinedClassName}
+      width={sizeValue}
+      height={sizeValue}
+      fill={fillColor || 'currentColor'} 
+      stroke={strokeColor || 'currentColor'}
+      role="img"
+      aria-hidden={!title}
+      aria-label={title}
+      {...rest}
+    />
+  )
+}
+
+export default Icon

src/components/icons/IconFactory.ts

@@ -0,0 +1,24 @@
+// BROKEN
+
+//import React from 'react'
+//import Icon from './Icon'
+//import type { IconProps, IconVariant } from './Icon'
+//
+//export const createIconComponent = (
+//  name: string,
+//  defaultVariant: IconVariant = 'outline'
+//): React.FC<Omit<IconProps, 'name'>> => {
+//  const IconComponent: React.FC<Omit<IconProps, 'name'>> = (props) => {
+//    return (
+//      <Icon
+//        name={name}
+//        variant={(props as any).variant ?? defaultVariant}
+//        {...props}
+//      />
+//    )
+//  }
+//
+//  IconComponent.displayName = `${name}Icon`
+//  return IconComponent
+//}
+//

src/components/icons/brands/discord.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="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/></svg>

src/components/icons/brands/github.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="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>

src/components/icons/brands/index.ts

@@ -0,0 +1,7 @@
+// Bold variant icons
+export { ReactComponent as Linux } from './linux.svg'
+export { ReactComponent as Steam } from './steam.svg'
+export { ReactComponent as Windows } from './windows.svg'
+export { ReactComponent as Github } from './github.svg'
+export { ReactComponent as Discord } from './discord.svg'
+export { ReactComponent as Proton } from './proton.svg'

src/components/icons/brands/linux.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="M19.7 17.6c-.1-.2-.2-.4-.2-.6c0-.4-.2-.7-.5-1c-.1-.1-.3-.2-.4-.2c.6-1.8-.3-3.6-1.3-4.9c-.8-1.2-2-2.1-1.9-3.7c0-1.9.2-5.4-3.3-5.1c-3.6.2-2.6 3.9-2.7 5.2c0 1.1-.5 2.2-1.3 3.1c-.2.2-.4.5-.5.7c-1 1.2-1.5 2.8-1.5 4.3c-.2.2-.4.4-.5.6c-.1.1-.2.2-.2.3c-.1.1-.3.2-.5.3c-.4.1-.7.3-.9.7c-.1.3-.2.7-.1 1.1c.1.2.1.4 0 .7c-.2.4-.2.9 0 1.4c.3.4.8.5 1.5.6c.5 0 1.1.2 1.6.4c.5.3 1.1.5 1.7.5c.3 0 .7-.1 1-.2c.3-.2.5-.4.6-.7c.4 0 1-.2 1.7-.2c.6 0 1.2.2 2 .1c0 .1 0 .2.1.3c.2.5.7.9 1.3 1h.2c.8-.1 1.6-.5 2.1-1.1c.4-.4.9-.7 1.4-.9c.6-.3 1-.5 1.1-1c.1-.7-.1-1.1-.5-1.7M12.8 4.8c.6.1 1.1.6 1 1.2q0 .45-.3.9h-.1c-.2-.1-.3-.1-.4-.2c.1-.1.1-.3.2-.5c0-.4-.2-.7-.4-.7c-.3 0-.5.3-.5.7v.1c-.1-.1-.3-.1-.4-.2V6c-.1-.5.3-1.1.9-1.2m-.3 2c.1.1.3.2.4.2s.3.1.4.2c.2.1.4.2.4.5s-.3.6-.9.8c-.2.1-.3.1-.4.2c-.3.2-.6.3-1 .3c-.3 0-.6-.2-.8-.4c-.1-.1-.2-.2-.4-.3c-.1-.1-.3-.3-.4-.6c0-.1.1-.2.2-.3c.3-.2.4-.3.5-.4l.1-.1c.2-.3.6-.5 1-.5c.3.1.6.2.9.4M10.4 5c.4 0 .7.4.8 1.1v.2c-.1 0-.3.1-.4.2v-.2c0-.3-.2-.6-.4-.5c-.2 0-.3.3-.3.6c0 .2.1.3.2.4c0 0-.1.1-.2.1c-.2-.2-.4-.5-.4-.8c0-.6.3-1.1.7-1.1m-1 16.1c-.7.3-1.6.2-2.2-.2c-.6-.3-1.1-.4-1.8-.4c-.5-.1-1-.1-1.1-.3s-.1-.5.1-1q.15-.45 0-.9c-.1-.3-.1-.5 0-.8s.3-.4.6-.5s.5-.2.7-.4c.1-.1.2-.2.3-.4c.3-.4.5-.6.8-.6c.6.1 1.1 1 1.5 1.9c.2.3.4.7.7 1c.4.5.9 1.2.9 1.6c0 .5-.2.8-.5 1m4.9-2.2c0 .1 0 .1-.1.2c-1.2.9-2.8 1-4.1.3l-.6-.9c.9-.1.7-1.3-1.2-2.5c-2-1.3-.6-3.7.1-4.8c.1-.1.1 0-.3.8c-.3.6-.9 2.1-.1 3.2c0-.8.2-1.6.5-2.4c.7-1.3 1.2-2.8 1.5-4.3c.1.1.1.1.2.1c.1.1.2.2.3.2c.2.3.6.4.9.4h.1c.4 0 .8-.1 1.1-.4c.1-.1.2-.2.4-.2q.45-.15.9-.6c.4 1.3.8 2.5 1.4 3.6c.4.8.7 1.6.9 2.5c.3 0 .7.1 1 .3c.8.4 1.1.7 1 1.2H18c0-.3-.2-.6-.9-.9s-1.3-.3-1.5.4c-.1 0-.2.1-.3.1c-.8.4-.8 1.5-.9 2.6c.1.4 0 .7-.1 1.1m4.6.6c-.6.2-1.1.6-1.5 1.1c-.4.6-1.1 1-1.9.9c-.4 0-.8-.3-.9-.7c-.1-.6-.1-1.2.2-1.8c.1-.4.2-.7.3-1.1c.1-1.2.1-1.9.6-2.2c0 .5.3.8.7 1c.5 0 1-.1 1.4-.5h.2c.3 0 .5 0 .7.2s.3.5.3.7c0 .3.2.6.3.9c.5.5.5.8.5.9c-.1.2-.5.4-.9.6m-9-12c-.1 0-.1 0-.1.1c0 0 0 .1.1.1s.1.1.1.1c.3.4.8.6 1.4.7c.5-.1 1-.2 1.5-.6l.6-.3c.1 0 .1-.1.1-.1c0-.1 0-.1-.1-.1c-.2.1-.5.2-.7.3c-.4.3-.9.5-1.4.5s-.9-.3-1.2-.6c-.1 0-.2-.1-.3-.1"/></svg>

src/components/icons/brands/steam.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="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10c-4.6 0-8.45-3.08-9.64-7.27l3.83 1.58a2.84 2.84 0 0 0 2.78 2.27c1.56 0 2.83-1.27 2.83-2.83v-.13l3.4-2.43h.08c2.08 0 3.77-1.69 3.77-3.77s-1.69-3.77-3.77-3.77s-3.78 1.69-3.78 3.77v.05l-2.37 3.46l-.16-.01c-.59 0-1.14.18-1.59.49L2 11.2C2.43 6.05 6.73 2 12 2M8.28 17.17c.8.33 1.72-.04 2.05-.84s-.05-1.71-.83-2.04l-1.28-.53c.49-.18 1.04-.19 1.56.03c.53.21.94.62 1.15 1.15c.22.52.22 1.1 0 1.62c-.43 1.08-1.7 1.6-2.78 1.15c-.5-.21-.88-.59-1.09-1.04zm9.52-7.75c0 1.39-1.13 2.52-2.52 2.52a2.52 2.52 0 0 1-2.51-2.52a2.5 2.5 0 0 1 2.51-2.51a2.52 2.52 0 0 1 2.52 2.51m-4.4 0c0 1.04.84 1.89 1.89 1.89c1.04 0 1.88-.85 1.88-1.89s-.84-1.89-1.88-1.89c-1.05 0-1.89.85-1.89 1.89"/></svg>

src/components/icons/brands/windows.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="m3.001 5.479l7.377-1.016v7.127H3zm0 13.042l7.377 1.017v-7.04H3zm8.188 1.125L21.001 21v-8.502h-9.812zm0-15.292v7.236h9.812V3z"/></svg>

src/components/icons/index.ts

@@ -0,0 +1,100 @@
+// import { createIconComponent } from './IconFactory' <-- Broken atm
+export { default as Icon } from './Icon'
+export type { IconProps, IconSize, IconVariant, IconName } from './Icon'
+
+// Re-export all icons by category for convenience
+import * as OutlineIcons from './ui/outline'
+import * as BoldIcons from './ui/bold'
+import * as BrandIcons from './brands'
+
+export { OutlineIcons, BoldIcons, BrandIcons }
+
+// Export individual icon names as constants
+// UI icons
+export const arrowUp = 'ArrowUp'
+export const check = 'Check'
+export const close = 'Close'
+export const controller = 'Controller'
+export const copy = 'Copy'
+export const download = 'Download'
+export const download1 = 'Download1'
+export const edit = 'Edit'
+export const error = 'Error'
+export const info = 'Info'
+export const layers = 'Layers'
+export const refresh = 'Refresh'
+export const search = 'Search'
+export const trash = 'Trash'
+export const warning = 'Warning'
+export const wine = 'Wine'
+export const diamond = 'Diamond'
+
+// Brand icons
+export const discord = 'Discord'
+export const github = 'GitHub'
+export const linux = 'Linux'
+export const proton = 'Proton'
+export const steam = 'Steam'
+export const windows = 'Windows'
+
+// Keep the IconNames object for backward compatibility and autocompletion
+export const IconNames = {
+  // UI icons
+  ArrowUp: arrowUp,
+  Check: check,
+  Close: close,
+  Controller: controller,
+  Copy: copy,
+  Download: download,
+  Download1: download1,
+  Edit: edit,
+  Error: error,
+  Info: info,
+  Layers: layers,
+  Refresh: refresh,
+  Search: search,
+  Trash: trash,
+  Warning: warning,
+  Wine: wine,
+  Diamond: diamond,
+  
+  // Brand icons
+  Discord: discord,
+  GitHub: github,
+  Linux: linux,
+  Proton: proton,
+  Steam: steam,
+  Windows: windows,
+} as const
+
+// Export direct icon components using createIconComponent from IconFactory
+// UI icons (outline variant by default)
+//export const ArrowUpIcon = createIconComponent(arrowUp, 'outline')
+//export const CheckIcon = createIconComponent(check, 'outline')
+//export const CloseIcon = createIconComponent(close, 'outline')
+//export const ControllerIcon = createIconComponent(controller, 'outline')
+//export const CopyIcon = createIconComponent(copy, 'outline')
+//export const DownloadIcon = createIconComponent(download, 'outline')
+//export const Download1Icon = createIconComponent(download1, 'outline')
+//export const EditIcon = createIconComponent(edit, 'outline')
+//export const ErrorIcon = createIconComponent(error, 'outline')
+//export const InfoIcon = createIconComponent(info, 'outline')
+//export const LayersIcon = createIconComponent(layers, 'outline')
+//export const RefreshIcon = createIconComponent(refresh, 'outline')
+//export const SearchIcon = createIconComponent(search, 'outline')
+//export const TrashIcon = createIconComponent(trash, 'outline')
+//export const WarningIcon = createIconComponent(warning, 'outline')
+//export const WineIcon = createIconComponent(wine, 'outline')
+
+// Brand icons
+//export const DiscordIcon = createIconComponent(discord, 'brand')
+//export const GitHubIcon = createIconComponent(github, 'brand')
+//export const LinuxIcon = createIconComponent(linux, 'brand')
+//export const SteamIcon = createIconComponent(steam, 'brand')
+//export const WindowsIcon = createIconComponent(windows, 'brand')
+
+// Bold variants for common icons
+//export const CheckBoldIcon = createIconComponent(check, 'bold')
+//export const InfoBoldIcon = createIconComponent(info, 'bold')
+//export const WarningBoldIcon = createIconComponent(warning, 'bold')
+//export const ErrorBoldIcon = createIconComponent(error, 'bold')

src/components/icons/ui/bold/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m6-8l-6-6m-6 6l6-6"/></svg>

src/components/icons/ui/bold/check.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="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"/></svg>

src/components/icons/ui/bold/close.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="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>

src/components/icons/ui/bold/controller.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="M4.725 20q-1.5 0-2.562-1.075t-1.113-2.6q0-.225.025-.45t.075-.45l2.1-8.4q.35-1.35 1.425-2.187T7.125 4h9.75q1.375 0 2.45.838t1.425 2.187l2.1 8.4q.05.225.088.463t.037.462q0 1.525-1.088 2.588T19.276 20q-1.05 0-1.95-.55t-1.35-1.5l-.7-1.45q-.125-.25-.375-.375T14.375 16h-4.75q-.275 0-.525.125t-.375.375l-.7 1.45q-.45.95-1.35 1.5t-1.95.55m8.775-9q.425 0 .713-.288T14.5 10t-.288-.712T13.5 9t-.712.288T12.5 10t.288.713t.712.287m2-2q.425 0 .713-.288T16.5 8t-.288-.712T15.5 7t-.712.288T14.5 8t.288.713T15.5 9m0 4q.425 0 .713-.288T16.5 12t-.288-.712T15.5 11t-.712.288T14.5 12t.288.713t.712.287m2-2q.425 0 .713-.288T18.5 10t-.288-.712T17.5 9t-.712.288T16.5 10t.288.713t.712.287m-9 1.5q.325 0 .538-.213t.212-.537v-1h1q.325 0 .538-.213T11 10t-.213-.537t-.537-.213h-1v-1q0-.325-.213-.537T8.5 7.5t-.537.213t-.213.537v1h-1q-.325 0-.537.213T6 10t.213.538t.537.212h1v1q0 .325.213.538t.537.212"/></svg>

src/components/icons/ui/bold/copy.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="M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593s1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.6 3.6 0 0 0 15.24 2"/><path fill="currentColor" d="M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847S21 8.671 21 11.397v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936z"/></svg>

src/components/icons/ui/bold/diamond.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="M9.2 8.25h5.6L12.15 3h-.3zm2.05 11.85V9.75H2.625zm1.5 0l8.625-10.35H12.75zm3.7-11.85h5.175L19.55 4.1q-.275-.5-.737-.8T17.775 3H13.85zm-14.075 0H7.55L10.15 3H6.225q-.575 0-1.037.3t-.738.8z"/></svg>

src/components/icons/ui/bold/download.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="M21.086 8.804v2.21a.75.75 0 1 1-1.5 0v-2.21a2 2 0 0 0-.13-.76l-7.3 4.38v8.19q.172-.051.33-.14l2.53-1.4a.75.75 0 0 1 1 .29a.75.75 0 0 1-.3 1l-2.52 1.4a3.72 3.72 0 0 1-3.62 0l-6-3.3a3.79 3.79 0 0 1-1.92-3.27v-6.39c0-.669.18-1.325.52-1.9q.086-.155.2-.29l.12-.15a3.45 3.45 0 0 1 1.08-.93l6-3.31a3.81 3.81 0 0 1 3.62 0l6 3.31c.42.231.788.548 1.08.93a1 1 0 0 1 .12.15q.113.135.2.29a3.64 3.64 0 0 1 .49 1.9"/><path fill="currentColor" d="m22.196 17.624l-2 2a1.2 1.2 0 0 1-.39.26a1.1 1.1 0 0 1-.46.1q-.239 0-.46-.09a1.3 1.3 0 0 1-.4-.27l-2-2a.74.74 0 0 1 0-1.06a.75.75 0 0 1 1.06 0l1 1v-3.36a.75.75 0 0 1 1.5 0v3.38l1-1a.75.75 0 0 1 1.079-.02a.75.75 0 0 1-.02 1.08z"/></svg>

src/components/icons/ui/bold/download1.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="M12 15.575q-.2 0-.375-.062T11.3 15.3l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z"/></svg>

src/components/icons/ui/bold/edit.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="M4 21q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z"/></svg>

src/components/icons/ui/bold/error.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="M12 17q.425 0 .713-.288T13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17m0-4q.425 0 .713-.288T13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>

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

@@ -0,0 +1,18 @@
+// Bold variant icons
+export { ReactComponent as ArrowUp } from './arrow-up.svg'
+export { ReactComponent as Check } from './check.svg'
+export { ReactComponent as Close } from './close.svg'
+export { ReactComponent as Controller } from './controller.svg'
+export { ReactComponent as Copy } from './copy.svg'
+export { ReactComponent as Download } from './download.svg'
+export { ReactComponent as Download1 } from './download1.svg'
+export { ReactComponent as Edit } from './edit.svg'
+export { ReactComponent as Error } from './error.svg'
+export { ReactComponent as Info } from './info.svg'
+export { ReactComponent as Layers } from './layers.svg'
+export { ReactComponent as Refresh } from './refresh.svg'
+export { ReactComponent as Search } from './search.svg'
+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'

src/components/icons/ui/bold/info.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="M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17m0-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>

src/components/icons/ui/bold/layers.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="M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425"/></svg>

src/components/icons/ui/bold/refresh.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="M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20"/></svg>

src/components/icons/ui/bold/search.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="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/></svg>

src/components/icons/ui/bold/trash.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="M20 6a1 1 0 0 1 .117 1.993L20 8h-.081L19 19a3 3 0 0 1-2.824 2.995L16 22H8c-1.598 0-2.904-1.249-2.992-2.75l-.005-.167L4.08 8H4a1 1 0 0 1-.117-1.993L4 6zm-6-4a2 2 0 0 1 2 2a1 1 0 0 1-1.993.117L14 4h-4l-.007.117A1 1 0 0 1 8 4a2 2 0 0 1 1.85-1.995L10 2z"/></svg>

src/components/icons/ui/bold/warning.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="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15"/></svg>

src/components/icons/ui/bold/wine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5.847 3.549A2 2 0 0 1 7.794 2h8.412c.93 0 1.738.642 1.947 1.549l1.023 4.431c.988 4.284-1.961 8.388-6.178 8.954L13 17v3h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-3l.002-.066c-4.216-.566-7.166-4.67-6.177-8.954z"/></g></svg>

src/components/icons/ui/outline/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.47 3.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 1 1-1.06 1.06l-4.72-4.72V20a.75.75 0 0 1-1.5 0V5.81l-4.72 4.72a.75.75 0 1 1-1.06-1.06z" clip-rule="evenodd"/></svg>

src/components/icons/ui/outline/check.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="m9.55 15.88l8.802-8.801q.146-.146.344-.156t.363.156t.166.357t-.165.356l-8.944 8.95q-.243.243-.566.243t-.566-.243l-4.05-4.05q-.146-.146-.152-.347t.158-.366t.357-.165t.357.165z"/></svg>

src/components/icons/ui/outline/close.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="m12 12.708l-5.246 5.246q-.14.14-.344.15t-.364-.15t-.16-.354t.16-.354L11.292 12L6.046 6.754q-.14-.14-.15-.344t.15-.364t.354-.16t.354.16L12 11.292l5.246-5.246q.14-.14.345-.15q.203-.01.363.15t.16.354t-.16.354L12.708 12l5.246 5.246q.14.14.15.345q.01.203-.15.363t-.354.16t-.354-.16z"/></svg>

src/components/icons/ui/outline/controller.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="M4.725 20q-1.5 0-2.562-1.075t-1.113-2.6q0-.225.025-.45t.075-.45l2.1-8.4q.35-1.35 1.425-2.187T7.125 4h9.75q1.375 0 2.45.838t1.425 2.187l2.1 8.4q.05.225.088.463t.037.462q0 1.525-1.088 2.588T19.276 20q-1.05 0-1.95-.55t-1.35-1.5l-.7-1.45q-.125-.25-.375-.375T14.375 16h-4.75q-.275 0-.525.125t-.375.375l-.7 1.45q-.45.95-1.35 1.5t-1.95.55m.075-2q.475 0 .863-.25t.587-.675l.7-1.425q.375-.775 1.1-1.213T9.625 14h4.75q.85 0 1.575.45t1.125 1.2l.7 1.425q.2.425.588.675t.862.25q.7 0 1.2-.462t.525-1.163q0 .025-.05-.475l-2.1-8.375q-.175-.675-.7-1.1T16.875 6h-9.75q-.7 0-1.237.425t-.688 1.1L3.1 15.9q-.05.15-.05.45q0 .7.513 1.175T4.8 18m8.7-7q.425 0 .713-.287T14.5 10t-.288-.712T13.5 9t-.712.288T12.5 10t.288.713t.712.287m2-2q.425 0 .713-.288T16.5 8t-.288-.712T15.5 7t-.712.288T14.5 8t.288.713T15.5 9m0 4q.425 0 .713-.288T16.5 12t-.288-.712T15.5 11t-.712.288T14.5 12t.288.713t.712.287m2-2q.425 0 .713-.288T18.5 10t-.288-.712T17.5 9t-.712.288T16.5 10t.288.713t.712.287m-9 1.5q.325 0 .538-.213t.212-.537v-1h1q.325 0 .538-.213T11 10t-.213-.537t-.537-.213h-1v-1q0-.325-.213-.537T8.5 7.5t-.537.213t-.213.537v1h-1q-.325 0-.537.213T6 10t.213.538t.537.212h1v1q0 .325.213.538t.537.212M12 12"/></svg>

src/components/icons/ui/outline/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15 1.25h-4.056c-1.838 0-3.294 0-4.433.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87c-.153 1.14-.153 2.595-.153 4.433V16a3.75 3.75 0 0 0 3.166 3.705c.137.764.402 1.416.932 1.947c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h3.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982s.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337v-5.11c0-1.367 0-2.47-.116-3.337c-.122-.9-.38-1.658-.982-2.26c-.531-.53-1.183-.795-1.947-.932A3.75 3.75 0 0 0 15 1.25m2.13 3.021A2.25 2.25 0 0 0 15 2.75h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S4.025 4.705 3.89 5.71c-.138 1.029-.14 2.383-.14 4.29v6a2.25 2.25 0 0 0 1.521 2.13c-.021-.61-.021-1.3-.021-2.075v-5.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117h3.11c.775 0 1.464 0 2.074.021M7.408 6.41c.277-.277.665-.457 1.4-.556c.754-.101 1.756-.103 3.191-.103h3c1.435 0 2.436.002 3.192.103c.734.099 1.122.28 1.399.556c.277.277.457.665.556 1.4c.101.754.103 1.756.103 3.191v5c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103h-3c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191v-5c0-1.435.002-2.437.103-3.192c.099-.734.28-1.122.556-1.399" clip-rule="evenodd"/></svg>

src/components/icons/ui/outline/diamond.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="M12 19.875q-.425 0-.825-.187t-.7-.538L2.825 10q-.225-.275-.337-.6t-.113-.675q0-.225.038-.462t.162-.438L4.45 4.1q.275-.5.738-.8T6.225 3h11.55q.575 0 1.038.3t.737.8l1.875 3.725q.125.2.163.437t.037.463q0 .35-.112.675t-.338.6l-7.65 9.15q-.3.35-.7.538t-.825.187M9.625 8h4.75l-1.5-3h-1.75zM11 16.675V10H5.45zm2 0L18.55 10H13zM16.6 8h2.65l-1.5-3H15.1zM4.75 8H7.4l1.5-3H6.25z"/></svg>

src/components/icons/ui/outline/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M20.935 11.009V8.793a2.98 2.98 0 0 0-1.529-2.61l-5.957-3.307a2.98 2.98 0 0 0-2.898 0L4.594 6.182a2.98 2.98 0 0 0-1.529 2.611v6.414a2.98 2.98 0 0 0 1.529 2.61l5.957 3.307a2.98 2.98 0 0 0 2.898 0l2.522-1.4"/><path stroke-linejoin="round" d="M20.33 6.996L12 12L3.67 6.996M12 21.49V12"/><path stroke-miterlimit="10" d="M19.97 19.245v-5"/><path stroke-linejoin="round" d="m17.676 17.14l1.968 1.968a.46.46 0 0 0 .65 0l1.968-1.968"/></g></svg>

src/components/icons/ui/outline/download1.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="M12 15.248q-.161 0-.298-.053t-.267-.184l-2.62-2.619q-.146-.146-.152-.344t.152-.363q.166-.166.357-.169q.192-.003.357.163L11.5 13.65V5.5q0-.213.143-.357T12 5t.357.143t.143.357v8.15l1.971-1.971q.146-.146.347-.153t.366.159q.16.165.163.354t-.162.353l-2.62 2.62q-.13.13-.267.183q-.136.053-.298.053M6.616 19q-.691 0-1.153-.462T5 17.384v-1.923q0-.213.143-.356t.357-.144t.357.144t.143.356v1.923q0 .231.192.424t.423.192h10.77q.23 0 .423-.192t.192-.424v-1.923q0-.213.143-.356t.357-.144t.357.144t.143.356v1.923q0 .691-.462 1.153T17.384 19z"/></svg>

src/components/icons/ui/outline/edit.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="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-1 2q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z"/></svg>

src/components/icons/ui/outline/error.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="M12 17q.425 0 .713-.288T13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17m0-4q.425 0 .713-.288T13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>

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

@@ -0,0 +1,18 @@
+// Outline variant icons
+export { ReactComponent as ArrowUp } from './arrow-up.svg'
+export { ReactComponent as Check } from './check.svg'
+export { ReactComponent as Close } from './close.svg'
+export { ReactComponent as Controller } from './controller.svg'
+export { ReactComponent as Copy } from './copy.svg'
+export { ReactComponent as Download } from './download.svg'
+export { ReactComponent as Download1 } from './download1.svg'
+export { ReactComponent as Edit } from './edit.svg'
+export { ReactComponent as Error } from './error.svg'
+export { ReactComponent as Info } from './info.svg'
+export { ReactComponent as Layers } from './layers.svg'
+export { ReactComponent as Refresh } from './refresh.svg'
+export { ReactComponent as Search } from './search.svg'
+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'

src/components/icons/ui/outline/info.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="M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17m0-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>

src/components/icons/ui/outline/layers.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="M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425M12 13.45L17.75 9L12 4.55L6.25 9zM12 9"/></svg>

src/components/icons/ui/outline/refresh.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="M12.077 19q-2.931 0-4.966-2.033q-2.034-2.034-2.034-4.964t2.034-4.966T12.077 5q1.783 0 3.339.847q1.555.847 2.507 2.365V5.5q0-.213.144-.356T18.424 5t.356.144t.143.356v3.923q0 .343-.232.576t-.576.232h-3.923q-.212 0-.356-.144t-.144-.357t.144-.356t.356-.143h3.2q-.78-1.496-2.197-2.364Q13.78 6 12.077 6q-2.5 0-4.25 1.75T6.077 12t1.75 4.25t4.25 1.75q1.787 0 3.271-.968q1.485-.969 2.202-2.573q.085-.196.274-.275q.19-.08.388-.013q.211.067.28.275t-.015.404q-.833 1.885-2.56 3.017T12.077 19"/></svg>

src/components/icons/ui/outline/search.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="M9.539 15.23q-2.398 0-4.065-1.666Q3.808 11.899 3.808 9.5t1.666-4.065T9.539 3.77t4.064 1.666T15.269 9.5q0 1.042-.369 2.017t-.97 1.668l5.909 5.907q.14.14.15.345q.009.203-.15.363q-.16.16-.354.16t-.354-.16l-5.908-5.908q-.75.639-1.725.989t-1.96.35m0-1q1.99 0 3.361-1.37q1.37-1.37 1.37-3.361T12.9 6.14T9.54 4.77q-1.991 0-3.361 1.37T4.808 9.5t1.37 3.36t3.36 1.37"/></svg>

src/components/icons/ui/outline/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>

src/components/icons/ui/outline/warning.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="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm1.725-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15m0-2.5"/></svg>

src/components/icons/ui/outline/wine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5.847 3.549A2 2 0 0 1 7.794 2h8.412c.93 0 1.738.642 1.947 1.549l1.023 4.431c.988 4.284-1.961 8.388-6.178 8.954L13 17v3h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-3l.002-.066c-4.216-.566-7.166-4.67-6.177-8.954zM7.796 4L6.773 8.43C5.998 11.79 8.551 15 12 15s6.003-3.209 5.227-6.57L16.205 4h-8.41Z"/></g></svg>

src/components/layout/AnimatedBackground.tsx

@@ -1,6 +1,9 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
-const AnimatedBackground: React.FC = () => {
+/**
+ * Animated background component that draws an interactive particle effect
+ */
+const AnimatedBackground = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
@@ -33,7 +36,7 @@ const AnimatedBackground: React.FC = () => {
       color: string
     }
 
-    // Color palette
+    // Color palette matching our theme
     const colors = [
       'rgba(74, 118, 196, 0.5)', // primary blue
       'rgba(155, 125, 255, 0.5)', // purple
@@ -77,7 +80,7 @@ const AnimatedBackground: React.FC = () => {
         ctx.fillStyle = particle.color.replace('0.5', `${particle.opacity}`)
         ctx.fill()
 
-        // Connect particles
+        // Connect particles that are close to each other
         particles.forEach((otherParticle) => {
           const dx = particle.x - otherParticle.x
           const dy = particle.y - otherParticle.y
@@ -100,6 +103,7 @@ const AnimatedBackground: React.FC = () => {
     // Start animation
     animate()
 
+    // Cleanup
     return () => {
       window.removeEventListener('resize', setCanvasSize)
     }
@@ -109,16 +113,7 @@ const AnimatedBackground: React.FC = () => {
     <canvas
       ref={canvasRef}
       className="animated-background"
-      style={{
+      aria-hidden="true"
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-        zIndex: 0,
-        opacity: 0.4,
-      }}
     />
   )
 }

src/components/layout/ErrorBoundary.tsx

@@ -0,0 +1,81 @@
+import { Component, ErrorInfo, ReactNode } from 'react'
+import { Button } from '@/components/buttons'
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error boundary component to catch and display runtime errors
+ */
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: null,
+    }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI
+    return {
+      hasError: true,
+      error,
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Log the error
+    console.error('ErrorBoundary caught an error:', error, errorInfo)
+    
+    // Call the onError callback if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo)
+    }
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null })
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+      
+      // Default error UI
+      return (
+        <div className="error-container">
+          <h2>Something went wrong</h2>
+          
+          <details>
+            <summary>Error details</summary>
+            <p>{this.state.error?.toString()}</p>
+          </details>
+          
+          <Button 
+            variant="primary"
+            onClick={this.handleReset}
+            className="error-retry-button"
+          >
+            Try again
+          </Button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/components/layout/Header.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@/components/buttons'
+import { Icon, diamond, refresh, search } from '@/components/icons'
+
+interface HeaderProps {
+  onRefresh: () => void
+  refreshDisabled?: boolean
+  onSearch: (query: string) => void
+  searchQuery: string
+}
+
+/**
+ * Application header component
+ * Contains the app title, search input, and refresh button
+ */
+const Header = ({
+  onRefresh,
+  refreshDisabled = false,
+  onSearch,
+  searchQuery,
+}: HeaderProps) => {
+  return (
+    <header className="app-header">
+      <div className="app-title">
+        <Icon name={diamond} variant="bold" size="lg" className="app-logo-icon" />
+        <h1>CreamLinux</h1>
+      </div>
+      <div className="header-controls">
+        <Button 
+          variant="primary"
+          onClick={onRefresh} 
+          disabled={refreshDisabled}
+          className="refresh-button"
+          leftIcon={<Icon name={refresh} variant="bold" size="md" />}
+        >
+          Refresh
+        </Button>
+        <div className="search-container">
+          <input
+            type="text"
+            placeholder="Search games..."
+            className="search-input"
+            value={searchQuery}
+            onChange={(e) => onSearch(e.target.value)}
+          />
+          <Icon name={search} variant="bold" size="md" className="search-icon" />
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/layout/InitialLoadingScreen.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+
+interface InitialLoadingScreenProps {
+  message: string;
+  progress: number;
+  onComplete?: () => void;
+}
+
+/**
+ * Initial loading screen displayed when the app first loads
+ */
+const InitialLoadingScreen = ({ message, progress, onComplete }: InitialLoadingScreenProps) => {
+  const [detailedStatus, setDetailedStatus] = useState<string[]>([
+    "Initializing application...",
+    "Setting up Steam integration...",
+    "Preparing DLC management..."
+  ]);
+  
+  // Use a sequence of messages 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]);
+    }
+  }, [progress, detailedStatus]);
+
+  return (
+    <div className="initial-loading-screen">
+      <div className="loading-content">
+        <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>
+        </div>
+        
+        <p className="loading-message">{message}</p>
+        
+        {/* Add a detailed status log that shows progress steps */}
+        <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>
+        
+        <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

src/components/layout/Sidebar.tsx

@@ -0,0 +1,57 @@
+import { Icon, layers, linux, proton } from '@/components/icons'
+
+interface SidebarProps {
+  setFilter: (filter: string) => void
+  currentFilter: string
+}
+
+// Define a type for filter items that makes variant optional
+type FilterItem = {
+  id: string
+  label: string
+  icon: string
+  variant?: string
+}
+
+/**
+ * Application sidebar component
+ * Contains filters for game types
+ */
+const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
+  // Available filter options with icons
+  const filters: FilterItem[] = [
+    { id: 'all', label: 'All Games', icon: layers, variant: 'bold' },
+    { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
+    { id: 'proton', label: 'Proton Required', icon: proton, variant: 'brand' }
+  ]
+  
+  return (
+    <div className="sidebar">
+      <div className="sidebar-header">
+        <h2>Library</h2>
+      </div>
+      
+      <ul className="filter-list">
+        {filters.map(filter => (
+          <li 
+            key={filter.id}
+            className={currentFilter === filter.id ? 'active' : ''}
+            onClick={() => setFilter(filter.id)}
+          >
+            <div className="filter-item">
+              <Icon 
+                name={filter.icon}
+                variant={filter.variant}
+                size="md" 
+                className="filter-icon"
+              />
+              <span>{filter.label}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default Sidebar

src/components/layout/index.ts

@@ -0,0 +1,6 @@
+// Export all layout components
+export { default as Header } from './Header';
+export { default as Sidebar } from './Sidebar';
+export { default as AnimatedBackground } from './AnimatedBackground';
+export { default as InitialLoadingScreen } from './InitialLoadingScreen';
+export { default as ErrorBoundary } from './ErrorBoundary';

src/components/notifications/Toast.tsx

@@ -0,0 +1,89 @@
+import { ReactNode, useState, useEffect, useCallback } from 'react'
+import { Icon, check, info, warning, error } from '@/components/icons'
+
+export interface ToastProps {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  title?: string;
+  message: string;
+  duration?: number;
+  onDismiss: (id: string) => void;
+}
+
+/**
+ * Individual Toast component
+ * Displays a notification message with automatic dismissal
+ */
+const Toast = ({ 
+  id, 
+  type, 
+  title, 
+  message, 
+  duration = 5000, // default 5 seconds 
+  onDismiss 
+}: ToastProps) => {
+  const [visible, setVisible] = useState(false)
+  const [isClosing, setIsClosing] = useState(false);
+
+  // Use useCallback to memoize the handleDismiss function
+  const handleDismiss = useCallback(() => {
+    setIsClosing(true);
+    // Give time for exit animation
+    setTimeout(() => {
+      setVisible(false);
+      setTimeout(() => onDismiss(id), 50);
+    }, 300);
+  }, [id, onDismiss]);
+
+  // Handle animation on mount/unmount
+  useEffect(() => {
+    // Start the enter animation
+    const enterTimer = setTimeout(() => {
+      setVisible(true)
+    }, 10)
+
+    // Auto-dismiss after duration, if not Infinity
+    let dismissTimer: NodeJS.Timeout | null = null
+    if (duration !== Infinity) {
+      dismissTimer = setTimeout(() => {
+        handleDismiss()
+      }, duration)
+    }
+
+    return () => {
+      clearTimeout(enterTimer)
+      if (dismissTimer) clearTimeout(dismissTimer)
+    }
+  }, [duration, handleDismiss])
+
+  // Get icon based on toast type
+  const getIcon = (): ReactNode => {
+    switch (type) {
+      case 'success':
+        return <Icon name={check} size="md" variant='bold' />
+      case 'error':
+        return <Icon name={error} size="md" variant='bold' />
+      case 'warning':
+        return <Icon name={warning} size="md" variant='bold' />
+      case 'info':
+        return <Icon name={info} size="md" variant='bold' />
+      default:
+        return <Icon name={info} size="md" variant='bold' />
+    }
+  }
+
+  return (
+    <div className={`toast toast-${type} ${visible ? 'visible' : ''} ${isClosing ? 'closing' : ''}`}>
+      <div className="toast-icon">{getIcon()}</div>
+      <div className="toast-content">
+        {title && <h4 className="toast-title">{title}</h4>}
+        <p className="toast-message">{message}</p>
+      </div>
+      <button className="toast-close" onClick={handleDismiss} aria-label="Dismiss">
+        ×
+      </button>
+    </div>
+  )
+}
+
+export default Toast

src/components/notifications/ToastContainer.tsx

@@ -0,0 +1,47 @@
+import Toast, { ToastProps } from './Toast'
+
+export type ToastPosition = 
+  | 'top-right' 
+  | 'top-left' 
+  | 'bottom-right' 
+  | 'bottom-left' 
+  | 'top-center' 
+  | 'bottom-center'
+
+interface ToastContainerProps {
+  toasts: Omit<ToastProps, 'onDismiss'>[];
+  onDismiss: (id: string) => void;
+  position?: ToastPosition;
+}
+
+/**
+ * Container for toast notifications
+ * Manages positioning and rendering of all toast notifications
+ */
+const ToastContainer = ({
+  toasts,
+  onDismiss,
+  position = 'bottom-right',
+}: ToastContainerProps) => {
+  if (toasts.length === 0) {
+    return null
+  }
+  
+  return (
+    <div className={`toast-container ${position}`}>
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          id={toast.id}
+          type={toast.type}
+          title={toast.title}
+          message={toast.message}
+          duration={toast.duration}
+          onDismiss={onDismiss}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default ToastContainer

src/components/notifications/index.ts

@@ -0,0 +1,5 @@
+export { default as Toast } from './Toast';
+export { default as ToastContainer } from './ToastContainer';
+
+export type { ToastProps } from './Toast';
+export type { ToastPosition } from './ToastContainer';

src/contexts/AppContext.tsx

@@ -0,0 +1,57 @@
+import { createContext } from 'react'
+import { Game, DlcInfo } from '@/types'
+import { ActionType } from '@/components/buttons/ActionButton'
+
+// Types for context sub-components
+export interface InstallationInstructions {
+  type: string;
+  command: string;
+  game_title: string;
+  dlc_count?: number;
+}
+
+export interface DlcDialogState {
+  visible: boolean;
+  gameId: string;
+  gameTitle: string;
+  dlcs: DlcInfo[];
+  isLoading: boolean;
+  isEditMode: boolean;
+  progress: number;
+  timeLeft?: string;
+}
+
+export interface ProgressDialogState {
+  visible: boolean;
+  title: string;
+  message: string;
+  progress: number;
+  showInstructions: boolean;
+  instructions?: InstallationInstructions;
+}
+
+// Define the context type
+export interface AppContextType {
+  // Game state
+  games: Game[];
+  isLoading: boolean;
+  error: string | null;
+  loadGames: () => Promise<boolean>;
+  handleProgressDialogClose: () => void;
+  
+  // DLC management
+  dlcDialog: DlcDialogState;
+  handleGameEdit: (gameId: string) => void;
+  handleDlcDialogClose: () => void;
+  
+  // Game actions
+  progressDialog: ProgressDialogState;
+  handleGameAction: (gameId: string, action: ActionType) => Promise<void>;
+  handleDlcConfirm: (selectedDlcs: DlcInfo[]) => void;
+  
+  // Toast notifications
+  showToast: (message: string, type: 'success' | 'error' | 'warning' | 'info', options?: Record<string, unknown>) => void;
+}
+
+// Create the context with a default value
+export const AppContext = createContext<AppContextType | undefined>(undefined);

src/contexts/AppProvider.tsx

@@ -0,0 +1,186 @@
+import { ReactNode } from 'react'
+import { AppContext, AppContextType } from './AppContext'
+import { useGames, useDlcManager, useGameActions, useToasts } from '@/hooks'
+import { DlcInfo } from '@/types'
+import { ActionType } from '@/components/buttons/ActionButton'
+import { ToastContainer } from '@/components/notifications'
+
+// Context provider component
+interface AppProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Primary application context provider
+ * Manages global state and provides methods for component interaction
+ */
+export const AppProvider = ({ children }: AppProviderProps) => {
+  // Use our custom hooks
+  const {
+    games,
+    isLoading,
+    error,
+    loadGames,
+    setGames,
+  } = useGames()
+
+  const {
+    dlcDialog,
+    setDlcDialog,
+    handleDlcDialogClose: closeDlcDialog,
+    streamGameDlcs,
+    handleGameEdit,
+  } = useDlcManager()
+
+  const {
+    progressDialog,
+    handleCloseProgressDialog,
+    handleGameAction: executeGameAction,
+    handleDlcConfirm: executeDlcConfirm,
+  } = useGameActions()
+  
+  const {
+    toasts,
+    removeToast,
+    success,
+    error: showError,
+    warning,
+    info
+  } = useToasts()
+
+  // Game action handler with proper error reporting
+  const handleGameAction = async (gameId: string, action: ActionType) => {
+    const game = games.find(g => g.id === gameId)
+    if (!game) {
+      showError("Game not found")
+      return
+    }
+    
+    // For DLC installation, we want to show the DLC selection dialog first
+    if (action === 'install_cream') {
+      try {
+        // Show DLC selection dialog
+        setDlcDialog({
+          ...dlcDialog,
+          visible: true,
+          gameId,
+          gameTitle: game.title,
+          dlcs: [], // Start with empty list
+          isLoading: true,
+          isEditMode: false, // This is a new installation
+          progress: 0,
+        })
+        
+        // Start streaming DLCs
+        streamGameDlcs(gameId)
+        return
+      } catch (error) {
+        showError(`Failed to prepare DLC installation: ${error}`)
+        return
+      }
+    }
+    
+    // For other actions (uninstall cream, install/uninstall smoke)
+    // Mark game as installing
+    setGames(prevGames => 
+      prevGames.map(g => g.id === gameId ? {...g, installing: true} : g)
+    )
+    
+    try {
+      await executeGameAction(gameId, action, games)
+      
+      // Show success message
+      if (action.includes('install')) {
+        success(`Successfully installed ${action.includes('cream') ? 'CreamLinux' : 'SmokeAPI'} for ${game.title}`)
+      } else {
+        success(`Successfully uninstalled ${action.includes('cream') ? 'CreamLinux' : 'SmokeAPI'} from ${game.title}`)
+      }
+    } catch (error) {
+      showError(`Action failed: ${error}`)
+    } finally {
+      // Reset installing state
+      setGames(prevGames => 
+        prevGames.map(g => g.id === gameId ? {...g, installing: false} : g)
+      )
+    }
+  }
+  
+  // DLC confirmation wrapper
+  const handleDlcConfirm = (selectedDlcs: DlcInfo[]) => {
+    const { gameId, isEditMode } = dlcDialog
+    
+    // MODIFIED: Create a deep copy to ensure we don't have reference issues
+    const dlcsCopy = selectedDlcs.map(dlc => ({...dlc}))
+    
+    // Log detailed info before closing dialog
+    console.log(`Saving ${dlcsCopy.filter(d => d.enabled).length} enabled and ${
+      dlcsCopy.length - dlcsCopy.filter(d => d.enabled).length
+    } disabled DLCs`)
+    
+    // Close dialog FIRST to avoid UI state issues
+    closeDlcDialog()
+    
+    // Update game state to show it's installing
+    setGames(prevGames =>
+      prevGames.map(g => g.id === gameId ? { ...g, installing: true } : g)
+    )
+    
+    executeDlcConfirm(dlcsCopy, gameId, isEditMode, games)
+      .then(() => {
+        success(isEditMode 
+          ? "DLC configuration updated successfully" 
+          : "CreamLinux installed with selected DLCs")
+      })
+      .catch(error => {
+        showError(`DLC operation failed: ${error}`)
+      })
+      .finally(() => {
+        // Reset installing state
+        setGames(prevGames =>
+          prevGames.map(g => g.id === gameId ? { ...g, installing: false } : g)
+        )
+      })
+  }
+  
+  // Generic toast show function
+  const showToast = (message: string, type: 'success' | 'error' | 'warning' | 'info', options = {}) => {
+    switch (type) {
+      case 'success': success(message, options); break;
+      case 'error': showError(message, options); break;
+      case 'warning': warning(message, options); break;
+      case 'info': info(message, options); break;
+    }
+  }
+
+  // Provide all the values to the context
+  const contextValue: AppContextType = {
+    // Game state
+    games,
+    isLoading,
+    error,
+    loadGames,
+    
+    // DLC management
+    dlcDialog,
+    handleGameEdit: (gameId: string) => {
+      handleGameEdit(gameId, games)
+    },
+    handleDlcDialogClose: closeDlcDialog,
+    
+    // Game actions
+    progressDialog,
+    handleGameAction,
+    handleDlcConfirm,
+    handleProgressDialogClose: handleCloseProgressDialog,
+    
+    // Toast notifications
+    showToast,
+  }
+
+  return (
+    <AppContext.Provider value={contextValue}>
+      {children}
+      <ToastContainer toasts={toasts} onDismiss={removeToast} />
+    </AppContext.Provider>
+  )
+}

src/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from './AppContext';
+export * from './AppProvider';
+export * from './useAppContext';

src/contexts/useAppContext.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react'
+import { AppContext, AppContextType } from './AppContext'
+
+/**
+ * Custom hook to use the application context
+ * Ensures proper error handling if used outside of AppProvider
+ */
+export const useAppContext = (): AppContextType => {
+  const context = useContext(AppContext)
+  
+  if (context === undefined) {
+    throw new Error('useAppContext must be used within an AppProvider')
+  }
+  
+  return context
+}

src/hooks/index.ts

@@ -0,0 +1,10 @@
+// Export all hooks
+export { useGames } from './useGames';
+export { useDlcManager } from './useDlcManager';
+export { useGameActions } from './useGameActions';
+export { useToasts } from './useToasts';
+export { useAppLogic } from './useAppLogic';
+
+// Export types
+export type { ToastType, Toast, ToastOptions } from './useToasts';
+export type { DlcDialogState } from './useDlcManager';

src/hooks/useAppLogic.ts

@@ -0,0 +1,109 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { useAppContext } from '@/contexts/useAppContext'
+
+interface UseAppLogicOptions {
+  autoLoad?: boolean;
+}
+
+/**
+ * Main application logic hook
+ * Combines various aspects of the app's behavior
+ */
+export function useAppLogic(options: UseAppLogicOptions = {}) {
+  const { autoLoad = true } = options
+  
+  // Get values from app context
+  const { 
+    games, 
+    loadGames, 
+    isLoading,
+    error,
+    showToast
+  } = useAppContext()
+  
+  // Local state for filtering and UI
+  const [filter, setFilter] = useState('all')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [isInitialLoad, setIsInitialLoad] = useState(true)
+  const isInitializedRef = useRef(false)
+  const [scanProgress, setScanProgress] = useState({ 
+    message: 'Initializing...', 
+    progress: 0 
+  })
+
+  // Filter games based on current filter and search
+  const filteredGames = useCallback(() => {
+    return games.filter((game) => {
+      // First filter by platform type
+      const platformMatch =
+        filter === 'all' ||
+        (filter === 'native' && game.native) ||
+        (filter === 'proton' && !game.native)
+
+      // Then filter by search query
+      const searchMatch = !searchQuery.trim() || 
+        game.title.toLowerCase().includes(searchQuery.toLowerCase())
+
+      return platformMatch && searchMatch
+    })
+  }, [games, filter, searchQuery])
+
+  // Handle search changes
+  const handleSearchChange = useCallback((query: string) => {
+    setSearchQuery(query)
+  }, [])
+  
+  // Handle initial loading with simulated progress
+  useEffect(() => {
+    if (!autoLoad || !isInitialLoad || isInitializedRef.current) return
+  
+    isInitializedRef.current = true
+    console.log("[APP LOGIC #2] Starting initialization")
+  
+    const initialLoad = async () => {
+      try {
+        setScanProgress({ message: 'Scanning for games...', progress: 20 })
+        await new Promise(resolve => setTimeout(resolve, 800))
+  
+        setScanProgress({ message: 'Loading game information...', progress: 50 })
+        await loadGames()
+  
+        setScanProgress({ message: 'Finishing up...', progress: 90 })
+        await new Promise(resolve => setTimeout(resolve, 500))
+  
+        setScanProgress({ message: 'Ready!', progress: 100 })
+        setTimeout(() => setIsInitialLoad(false), 500)
+      } catch (error) {
+        setScanProgress({ message: `Error: ${error}`, progress: 100 })
+        showToast(`Failed to load: ${error}`, 'error')
+        setTimeout(() => setIsInitialLoad(false), 2000)
+      }
+    }
+  
+    initialLoad()
+  }, [autoLoad, isInitialLoad, loadGames, showToast])
+  
+  // Force a refresh
+  const handleRefresh = useCallback(async () => {
+    try {
+      await loadGames()
+      showToast('Game list refreshed', 'success')
+    } catch (error) {
+      showToast(`Failed to refresh: ${error}`, 'error')
+    }
+  }, [loadGames, showToast])
+
+  return {
+    filter,
+    setFilter,
+    searchQuery,
+    handleSearchChange,
+    isInitialLoad,
+    setIsInitialLoad,
+    scanProgress,
+    filteredGames: filteredGames(),
+    handleRefresh,
+    isLoading,
+    error
+  }
+}

src/hooks/useDlcManager.ts

@@ -0,0 +1,314 @@
+import { useState, useEffect, useRef } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { Game, DlcInfo } from '@/types'
+
+export interface DlcDialogState {
+  visible: boolean;
+  gameId: string;
+  gameTitle: string;
+  dlcs: DlcInfo[];
+  enabledDlcs: string[];
+  isLoading: boolean;
+  isEditMode: boolean;
+  progress: number;
+  progressMessage: string;
+  timeLeft: string;
+  error: string | null;
+}
+
+/**
+ * Hook for managing DLC functionality
+ * Handles fetching, filtering, and updating DLCs
+ */
+export function useDlcManager() {
+  const [isFetchingDlcs, setIsFetchingDlcs] = useState(false)
+  const dlcFetchController = useRef<AbortController | null>(null)
+  const activeDlcFetchId = useRef<string | null>(null)
+  const [forceReload, setForceReload] = useState(false) // Add this state to force reloads
+
+  // DLC selection dialog state
+  const [dlcDialog, setDlcDialog] = useState<DlcDialogState>({
+    visible: false,
+    gameId: '',
+    gameTitle: '',
+    dlcs: [],
+    enabledDlcs: [],
+    isLoading: false,
+    isEditMode: false,
+    progress: 0,
+    progressMessage: '',
+    timeLeft: '',
+    error: null,
+  })
+
+  // Set up event listeners for DLC streaming
+  useEffect(() => {
+    // Listen for individual DLC found events
+    const setupDlcEventListeners = async () => {
+      try {
+        // This event is emitted for each DLC as it's found
+        const unlistenDlcFound = await listen<string>('dlc-found', (event) => {
+          const dlc = JSON.parse(event.payload) as { appid: string; name: string }
+
+          // Add the DLC to the current list with enabled=true by default
+          setDlcDialog((prev) => ({
+            ...prev,
+            dlcs: [...prev.dlcs, { ...dlc, enabled: true }],
+          }))
+        })
+
+        // When progress is 100%, mark loading as complete and reset fetch state
+        const unlistenDlcProgress = await listen<{
+          message: string;
+          progress: number;
+          timeLeft?: string;
+        }>('dlc-progress', (event) => {
+          const { message, progress, timeLeft } = event.payload
+
+          // Update the progress indicator
+          setDlcDialog((prev) => ({
+            ...prev,
+            progress,
+            progressMessage: message,
+            timeLeft: timeLeft || '',
+          }))
+
+          // If progress is 100%, mark loading as complete
+          if (progress === 100) {
+            setTimeout(() => {
+              setDlcDialog((prev) => ({
+                ...prev,
+                isLoading: false,
+              }))
+
+              // Reset fetch state
+              setIsFetchingDlcs(false)
+              activeDlcFetchId.current = null
+            }, 500)
+          }
+        })
+
+        // This event is emitted if there's an error
+        const unlistenDlcError = await listen<{ error: string }>('dlc-error', (event) => {
+          const { error } = event.payload
+          console.error('DLC streaming error:', error)
+
+          // Show error in dialog
+          setDlcDialog((prev) => ({
+            ...prev,
+            error,
+            isLoading: false,
+          }))
+        })
+
+        return () => {
+          unlistenDlcFound()
+          unlistenDlcProgress()
+          unlistenDlcError()
+        }
+      } catch (error) {
+        console.error('Error setting up DLC event listeners:', error)
+        return () => {}
+      }
+    }
+
+    const cleanup = setupDlcEventListeners()
+    return () => {
+      cleanup.then((fn) => fn())
+    }
+  }, [])
+
+  // Clean up if component unmounts during a fetch
+  useEffect(() => {
+    return () => {
+      // Clean up any ongoing fetch operations
+      if (dlcFetchController.current) {
+        dlcFetchController.current.abort()
+        dlcFetchController.current = null
+      }
+    }
+  }, [])
+
+  // Function to fetch DLCs for a game with streaming updates
+  const streamGameDlcs = async (gameId: string): Promise<void> => {
+    try {
+      // Set up flag to indicate we're fetching DLCs
+      setIsFetchingDlcs(true)
+      activeDlcFetchId.current = gameId
+
+      // Start streaming DLCs - this won't return DLCs directly
+      // Instead, it triggers events that we'll listen for
+      await invoke('stream_game_dlcs', { gameId })
+
+      return
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        console.log('DLC fetching was aborted')
+      } else {
+        console.error('Error starting DLC stream:', error)
+        throw error
+      }
+    } finally {
+      // Reset state when done or on error
+      setIsFetchingDlcs(false)
+      activeDlcFetchId.current = null
+    }
+  }
+
+  // MODIFIED: Handle game edit (show DLC management dialog) with proper reloading
+  const handleGameEdit = async (gameId: string, games: Game[]) => {
+    const game = games.find((g) => g.id === gameId)
+    if (!game || !game.cream_installed) return
+
+    // Check if we're already fetching DLCs for this game
+    if (isFetchingDlcs && activeDlcFetchId.current === gameId) {
+      console.log(`Already fetching DLCs for ${gameId}, ignoring duplicate request`)
+      return
+    }
+
+    try {
+      // Show dialog immediately with empty DLC list
+      setDlcDialog({
+        visible: true,
+        gameId,
+        gameTitle: game.title,
+        dlcs: [], // Always start with empty DLCs to force a fresh load
+        enabledDlcs: [],
+        isLoading: true,
+        isEditMode: true, // This is an edit operation
+        progress: 0,
+        progressMessage: 'Reading DLC configuration...',
+        timeLeft: '',
+        error: null,
+      })
+
+      // MODIFIED: Always get a fresh copy from the config file
+      console.log('Loading DLC configuration from disk...')
+      try {
+        const allDlcs = await invoke<DlcInfo[]>('get_all_dlcs_command', {
+          gamePath: game.path,
+        }).catch((e) => {
+          console.error('Error loading DLCs:', e)
+          return [] as DlcInfo[]
+        })
+
+        if (allDlcs.length > 0) {
+          // Log the fresh DLC config
+          console.log('Loaded existing DLC configuration:', allDlcs)
+          
+          // IMPORTANT: Create a completely new array to avoid reference issues
+          const freshDlcs = allDlcs.map(dlc => ({...dlc}))
+
+          setDlcDialog((prev) => ({
+            ...prev,
+            dlcs: freshDlcs,
+            isLoading: false,
+            progress: 100,
+            progressMessage: 'Loaded existing DLC configuration',
+          }))
+          
+          // Reset force reload flag
+          setForceReload(false)
+          return
+        }
+      } catch (error) {
+        console.warn('Could not read existing DLC configuration, falling back to API:', error)
+        // Continue with API loading if config reading fails
+      }
+
+      // Mark that we're fetching DLCs for this game
+      setIsFetchingDlcs(true)
+      activeDlcFetchId.current = gameId
+
+      // Create abort controller for fetch operation
+      dlcFetchController.current = new AbortController()
+
+      // Start streaming DLCs
+      await streamGameDlcs(gameId).catch((error) => {
+        if (error.name !== 'AbortError') {
+          console.error('Error streaming DLCs:', error)
+          setDlcDialog((prev) => ({
+            ...prev,
+            error: `Failed to load DLCs: ${error}`,
+            isLoading: false,
+          }))
+        }
+      })
+
+      // Try to get the enabled DLCs
+      const enabledDlcs = await invoke<string[]>('get_enabled_dlcs_command', {
+        gamePath: game.path,
+      }).catch(() => [] as string[])
+
+      // We'll update the enabled state of DLCs as they come in
+      setDlcDialog((prev) => ({
+        ...prev,
+        enabledDlcs,
+      }))
+    } catch (error) {
+      console.error('Error preparing DLC edit:', error)
+      setDlcDialog((prev) => ({
+        ...prev,
+        error: `Failed to prepare DLC editor: ${error}`,
+        isLoading: false,
+      }))
+    }
+  }
+
+  // MODIFIED: Handle DLC selection dialog close
+  const handleDlcDialogClose = () => {
+    // Cancel any in-progress DLC fetching
+    if (isFetchingDlcs && activeDlcFetchId.current) {
+      console.log(`Aborting DLC fetch for game ${activeDlcFetchId.current}`)
+
+      // This will signal to the Rust backend that we want to stop the process
+      invoke('abort_dlc_fetch', { gameId: activeDlcFetchId.current }).catch((err) =>
+        console.error('Error aborting DLC fetch:', err)
+      )
+
+      // Reset state
+      activeDlcFetchId.current = null
+      setIsFetchingDlcs(false)
+    }
+
+    // Clear controller
+    if (dlcFetchController.current) {
+      dlcFetchController.current.abort()
+      dlcFetchController.current = null
+    }
+
+    // Close dialog and reset state
+    setDlcDialog((prev) => ({ 
+      ...prev, 
+      visible: false,
+      dlcs: [], // Clear DLCs to force a reload next time
+    }))
+    
+    // Set flag to force reload next time
+    setForceReload(true)
+  }
+
+  // Update DLCs being streamed with enabled state
+  useEffect(() => {
+    if (dlcDialog.enabledDlcs.length > 0) {
+      setDlcDialog((prev) => ({
+        ...prev,
+        dlcs: prev.dlcs.map((dlc) => ({
+          ...dlc,
+          enabled: prev.enabledDlcs.length === 0 || prev.enabledDlcs.includes(dlc.appid),
+        })),
+      }))
+    }
+  }, [dlcDialog.dlcs, dlcDialog.enabledDlcs])
+
+  return {
+    dlcDialog,
+    setDlcDialog,
+    isFetchingDlcs,
+    streamGameDlcs,
+    handleGameEdit,
+    handleDlcDialogClose,
+    forceReload,
+  }
+}

src/hooks/useGameActions.ts

@@ -0,0 +1,234 @@
+import { useState, useCallback, useEffect } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { ActionType } from '@/components/buttons/ActionButton'
+import { Game, DlcInfo } from '@/types'
+import { InstallationInstructions } from '@/contexts/AppContext'
+
+/**
+ * Hook for managing game action operations
+ * Handles installation, uninstallation, and progress tracking
+ */
+export function useGameActions() {
+  // Progress dialog state
+  const [progressDialog, setProgressDialog] = useState({
+    visible: false,
+    title: '',
+    message: '',
+    progress: 0,
+    showInstructions: false,
+    instructions: undefined as InstallationInstructions | undefined,
+  })
+
+  // Set up event listeners for progress updates
+  useEffect(() => {
+    const setupEventListeners = async () => {
+      try {
+        // Listen for progress updates from the backend
+        const unlistenProgress = await listen<{
+          title: string;
+          message: string;
+          progress: number;
+          complete: boolean;
+          show_instructions?: boolean;
+          instructions?: InstallationInstructions;
+        }>('installation-progress', (event) => {
+          console.log('Received installation-progress event:', event)
+
+          const { title, message, progress, complete, show_instructions, instructions } = event.payload
+
+          if (complete && !show_instructions) {
+            // Hide dialog when complete if no instructions
+            setTimeout(() => {
+              setProgressDialog((prev) => ({ ...prev, visible: false }))
+            }, 1000)
+          } else {
+            // Update progress dialog
+            setProgressDialog({
+              visible: true,
+              title,
+              message,
+              progress,
+              showInstructions: show_instructions || false,
+              instructions,
+            })
+          }
+        })
+
+        return unlistenProgress
+      } catch (error) {
+        console.error('Error setting up progress event listeners:', error)
+        return () => {}
+      }
+    }
+
+    let cleanup: (() => void) | null = null
+
+    setupEventListeners().then(unlisten => {
+      cleanup = unlisten
+    })
+
+    return () => {
+      if (cleanup) cleanup()
+    }
+  }, [])
+
+  // Handler function to close progress dialog
+  const handleCloseProgressDialog = useCallback(() => {
+    setProgressDialog((prev) => ({ ...prev, visible: false }))
+  }, [])
+
+  // Unified handler for game actions (install/uninstall)
+  const handleGameAction = useCallback(async (gameId: string, action: ActionType, games: Game[]) => {
+    try {
+      // For CreamLinux installation, we should NOT call process_game_action directly
+      // Instead, we show the DLC selection dialog first, which is handled in AppProvider
+      if (action === 'install_cream') {
+        return
+      }
+      
+      // For other actions (uninstall_cream, install_smoke, uninstall_smoke)
+      // Find game to get title
+      const game = games.find((g) => g.id === gameId)
+      if (!game) return
+
+      // Get title based on action
+      const isCream = action.includes('cream')
+      const isInstall = action.includes('install')
+      const product = isCream ? 'CreamLinux' : 'SmokeAPI'
+      const operation = isInstall ? 'Installing' : 'Uninstalling'
+
+      // Show progress dialog
+      setProgressDialog({
+        visible: true,
+        title: `${operation} ${product} for ${game.title}`,
+        message: isInstall ? 'Downloading required files...' : 'Removing files...',
+        progress: isInstall ? 0 : 30,
+        showInstructions: false,
+        instructions: undefined,
+      })
+
+      console.log(`Invoking process_game_action for game ${gameId} with action ${action}`)
+
+      // Call the backend with the unified action
+      await invoke('process_game_action', {
+        gameAction: {
+          game_id: gameId,
+          action,
+        },
+      })
+
+    } catch (error) {
+      console.error(`Error processing action ${action} for game ${gameId}:`, error)
+
+      // Show error in progress dialog
+      setProgressDialog((prev) => ({
+        ...prev,
+        message: `Error: ${error}`,
+        progress: 100,
+      }))
+
+      // Hide dialog after a delay
+      setTimeout(() => {
+        setProgressDialog((prev) => ({ ...prev, visible: false }))
+      }, 3000)
+      
+      // Rethrow to allow upstream handling
+      throw error
+    }
+  }, [])
+
+  // Handle DLC selection confirmation
+  const handleDlcConfirm = useCallback(async (
+    selectedDlcs: DlcInfo[], 
+    gameId: string, 
+    isEditMode: boolean,
+    games: Game[]
+  ) => {
+    // Find the game
+    const game = games.find((g) => g.id === gameId)
+    if (!game) return
+  
+    try {
+      if (isEditMode) {
+        // MODIFIED: Create a deep copy to ensure we don't have reference issues
+        const dlcsCopy = selectedDlcs.map(dlc => ({...dlc}));
+        
+        // Show progress dialog for editing
+        setProgressDialog({
+          visible: true,
+          title: `Updating DLCs for ${game.title}`,
+          message: 'Updating DLC configuration...',
+          progress: 30,
+          showInstructions: false,
+          instructions: undefined,
+        })
+      
+        console.log('Saving DLC configuration:', dlcsCopy)
+        
+        // Call the backend to update the DLC configuration
+        await invoke('update_dlc_configuration_command', {
+          gamePath: game.path,
+          dlcs: dlcsCopy,
+        })
+      
+        // Update progress dialog for completion
+        setProgressDialog((prev) => ({
+          ...prev,
+          title: `Update Complete: ${game.title}`,
+          message: 'DLC configuration updated successfully!',
+          progress: 100,
+        }))
+      
+        // Hide dialog after a delay
+        setTimeout(() => {
+          setProgressDialog((prev) => ({ ...prev, visible: false }))
+        }, 2000)
+      } else {
+        // We're doing a fresh install with selected DLCs
+        // Show progress dialog for installation right away
+        setProgressDialog({
+          visible: true,
+          title: `Installing CreamLinux for ${game.title}`,
+          message: 'Preparing to download CreamLinux...',
+          progress: 0,
+          showInstructions: false,
+          instructions: undefined,
+        })
+      
+        // Invoke the installation with the selected DLCs
+        await invoke('install_cream_with_dlcs_command', {
+          gameId,
+          selectedDlcs,
+        })
+        
+        // Note: The progress dialog will be updated through the installation-progress event listener
+      }
+    } catch (error) {
+      console.error('Error processing DLC selection:', error)
+    
+      // Show error in progress dialog
+      setProgressDialog((prev) => ({
+        ...prev,
+        message: `Error: ${error}`,
+        progress: 100,
+      }))
+    
+      // Hide dialog after a delay
+      setTimeout(() => {
+        setProgressDialog((prev) => ({ ...prev, visible: false }))
+      }, 3000)
+      
+      // Rethrow to allow upstream handling
+      throw error
+    }
+  }, [])
+
+  return {
+    progressDialog,
+    setProgressDialog,
+    handleCloseProgressDialog,
+    handleGameAction,
+    handleDlcConfirm
+  }
+}

src/hooks/useGames.ts

@@ -0,0 +1,126 @@
+import { useState, useCallback, useEffect } from 'react'
+import { Game } from '@/types'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+
+/**
+ * Hook for managing games state and operations
+ * Handles game loading, scanning, and updates
+ */
+export function useGames() {
+  const [games, setGames] = useState<Game[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isInitialLoad, setIsInitialLoad] = useState(true)
+  const [scanProgress, setScanProgress] = useState({
+    message: 'Initializing...',
+    progress: 0,
+  })
+  const [error, setError] = useState<string | null>(null)
+
+  // LoadGames function outside of the useEffect to make it reusable
+  const loadGames = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+
+      console.log('Invoking scan_steam_games')
+      const steamGames = await invoke<Game[]>('scan_steam_games')
+
+      // Add platform property to match GameList component's expectation
+      const gamesWithPlatform = steamGames.map((game) => ({
+        ...game,
+        platform: 'Steam',
+      }))
+
+      console.log(`Loaded ${gamesWithPlatform.length} games`)
+      setGames(gamesWithPlatform)
+      setIsInitialLoad(false) // Mark initial load as complete
+      return true
+    } catch (error) {
+      console.error('Error loading games:', error)
+      setError(`Failed to load games: ${error}`)
+      setIsInitialLoad(false) // Mark initial load as complete even on error
+      return false
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  // Setup event listeners for game updates
+  useEffect(() => {
+    let unlisteners: (() => void)[] = []
+
+    // Set up event listeners
+    const setupEventListeners = async () => {
+      try {
+        console.log('Setting up game event listeners')
+
+        // Listen for individual game updates
+        const unlistenGameUpdated = await listen<Game>('game-updated', (event) => {
+          console.log('Received game-updated event:', event)
+
+          const updatedGame = event.payload
+
+          // Update only the specific game in the state
+          setGames((prevGames) =>
+            prevGames.map((game) =>
+              game.id === updatedGame.id 
+                ? { ...updatedGame, platform: 'Steam' } 
+                : game
+            )
+          )
+        })
+
+        // Listen for scan progress events
+        const unlistenScanProgress = await listen<{
+          message: string;
+          progress: number;
+        }>('scan-progress', (event) => {
+          const { message, progress } = event.payload
+
+          console.log('Received scan-progress event:', message, progress)
+
+          // Update scan progress state
+          setScanProgress({
+            message,
+            progress,
+          })
+        })
+
+        unlisteners = [unlistenGameUpdated, unlistenScanProgress]
+      } catch (error) {
+        console.error('Error setting up event listeners:', error)
+      }
+    }
+
+    // Initialize event listeners and then load games
+    setupEventListeners().then(() => {
+      if (isInitialLoad) {
+        loadGames().catch(console.error)
+      }
+    })
+
+    // Cleanup function
+    return () => {
+      unlisteners.forEach(fn => fn())
+    }
+  }, [loadGames, isInitialLoad])
+
+  // Helper function to update a specific game in state
+  const updateGame = useCallback((updatedGame: Game) => {
+    setGames((prevGames) =>
+      prevGames.map((game) => (game.id === updatedGame.id ? updatedGame : game))
+    )
+  }, [])
+
+  return {
+    games,
+    isLoading,
+    isInitialLoad,
+    scanProgress,
+    error,
+    loadGames,
+    updateGame,
+    setGames,
+  }
+}

src/hooks/useToasts.ts

@@ -0,0 +1,94 @@
+import { useState, useCallback } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+
+/**
+ * Toast type definition
+ */
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+/**
+ * Toast interface
+ */
+export interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+  title?: string;
+}
+
+/**
+ * Toast options interface
+ */
+export interface ToastOptions {
+  title?: string;
+  duration?: number;
+}
+
+/**
+ * Hook for managing toast notifications
+ * Provides methods for adding and removing notifications of different types
+ */
+export function useToasts() {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  /**
+   * Removes a toast by ID
+   */
+  const removeToast = useCallback((id: string) => {
+    setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id))
+  }, [])
+
+  /**
+   * Adds a new toast with the specified type and options
+   */
+  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = uuidv4()
+    const newToast = { ...toast, id }
+    
+    setToasts(currentToasts => [...currentToasts, newToast])
+    
+    // Auto-remove toast after its duration expires
+    if (toast.duration !== Infinity) {
+      setTimeout(() => {
+        removeToast(id)
+      }, toast.duration || 5000) // Default 5 seconds
+    }
+    
+    return id
+  }, [removeToast])
+  
+  /**
+   * Shorthand method for success toasts
+   */
+  const success = useCallback((message: string, options: ToastOptions = {}) => 
+    addToast({ message, type: 'success', ...options }), [addToast])
+  
+  /**
+   * Shorthand method for error toasts
+   */
+  const error = useCallback((message: string, options: ToastOptions = {}) => 
+    addToast({ message, type: 'error', ...options }), [addToast])
+  
+  /**
+   * Shorthand method for warning toasts
+   */
+  const warning = useCallback((message: string, options: ToastOptions = {}) => 
+    addToast({ message, type: 'warning', ...options }), [addToast])
+  
+  /**
+   * Shorthand method for info toasts
+   */
+  const info = useCallback((message: string, options: ToastOptions = {}) => 
+    addToast({ message, type: 'info', ...options }), [addToast])
+
+  return {
+    toasts,
+    addToast,
+    removeToast,
+    success,
+    error,
+    warning,
+    info,
+  }
+}

src/main.tsx

@@ -1,9 +1,12 @@
 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>
       <App />
+    </AppProvider>
   </StrictMode>
 )

src/services/ImageService.ts

@@ -11,7 +11,7 @@ export const SteamImageType = {
 
 export type SteamImageTypeKey = keyof typeof SteamImageType
 
-// Cache for images to prevent flickering
+// Cache for images to prevent flickering during re-renders
 const imageCache: Map<string, string> = new Map()
 
 /**
@@ -23,7 +23,7 @@ const imageCache: Map<string, string> = new Map()
 export const getSteamImageUrl = (
   appId: string,
   type: (typeof SteamImageType)[SteamImageTypeKey]
-) => {
+): string => {
   return `https://cdn.cloudflare.steamstatic.com/steam/apps/${appId}/${type}.jpg`
 }
 
@@ -68,11 +68,16 @@ export const findBestGameImage = async (appId: string): Promise<string | null> =
   }
 
   // Try these image types in order of preference
-  const typesToTry = [SteamImageType.HEADER, SteamImageType.CAPSULE, SteamImageType.LIBRARY_CAPSULE]
+  const typesToTry = [
+    SteamImageType.HEADER, 
+    SteamImageType.CAPSULE, 
+    SteamImageType.LIBRARY_CAPSULE
+  ]
 
   for (const type of typesToTry) {
     const url = getSteamImageUrl(appId, type)
     const exists = await checkImageExists(url)
+    
     if (exists) {
       try {
         // Preload the image to prevent flickering
@@ -88,6 +93,6 @@ export const findBestGameImage = async (appId: string): Promise<string | null> =
     }
   }
 
-  // If we've reached here, no valid image was found
+  // If no valid image was found
   return null
 }