Formatting

src/components/layout/AnimatedBackground.tsx

@@ -109,13 +109,7 @@ const AnimatedBackground = () => {
     }
   }, [])
 
-  return (
-    <canvas
-      ref={canvasRef}
-      className="animated-background"
-      aria-hidden="true"
-    />
-  )
+  return <canvas ref={canvasRef} className="animated-background" aria-hidden="true" />
 }
 
-export default AnimatedBackground
+export default AnimatedBackground

src/components/layout/ErrorBoundary.tsx

@@ -2,14 +2,14 @@ import { Component, ErrorInfo, ReactNode } from 'react'
 import { Button } from '@/components/buttons'
 
 interface ErrorBoundaryProps {
-  children: ReactNode;
-  fallback?: ReactNode;
-  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  children: ReactNode
+  fallback?: ReactNode
+  onError?: (error: Error, errorInfo: ErrorInfo) => void
 }
 
 interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
+  hasError: boolean
+  error: Error | null
 }
 
 /**
@@ -35,7 +35,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   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)
@@ -52,22 +52,18 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
       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"
-          >
+
+          <Button variant="primary" onClick={this.handleReset} className="error-retry-button">
             Try again
           </Button>
         </div>
@@ -78,4 +74,4 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   }
 }
 
-export default ErrorBoundary
+export default ErrorBoundary

src/components/layout/Header.tsx

@@ -12,12 +12,7 @@ interface HeaderProps {
  * Application header component
  * Contains the app title, search input, and refresh button
  */
-const Header = ({
-  onRefresh,
-  refreshDisabled = false,
-  onSearch,
-  searchQuery,
-}: HeaderProps) => {
+const Header = ({ onRefresh, refreshDisabled = false, onSearch, searchQuery }: HeaderProps) => {
   return (
     <header className="app-header">
       <div className="app-title">
@@ -25,9 +20,9 @@ const Header = ({
         <h1>CreamLinux</h1>
       </div>
       <div className="header-controls">
-        <Button 
+        <Button
           variant="primary"
-          onClick={onRefresh} 
+          onClick={onRefresh}
           disabled={refreshDisabled}
           className="refresh-button"
           leftIcon={<Icon name={refresh} variant="bold" size="md" />}
@@ -49,4 +44,4 @@ const Header = ({
   )
 }
 
-export default Header
+export default Header

src/components/layout/InitialLoadingScreen.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 
 interface InitialLoadingScreenProps {
-  message: string;
-  progress: number;
-  onComplete?: () => void;
+  message: string
+  progress: number
+  onComplete?: () => void
 }
 
 /**
@@ -11,36 +11,36 @@ interface InitialLoadingScreenProps {
  */
 const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps) => {
   const [detailedStatus, setDetailedStatus] = useState<string[]>([
-    "Initializing application...",
-    "Setting up Steam integration...",
-    "Preparing DLC management..."
-  ]);
-  
+    '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!" }
-    ];
-    
+      { 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...";
-    
+    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]);
+      setDetailedStatus((prev) => [...prev, currentMessage])
     }
-  }, [progress, detailedStatus]);
+  }, [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">
@@ -49,9 +49,9 @@ const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps)
             <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) => (
@@ -61,15 +61,15 @@ const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps)
             </div>
           ))}
         </div>
-        
+
         <div className="progress-bar-container">
           <div className="progress-bar" style={{ width: `${progress}%` }} />
         </div>
-        
+
         <div className="progress-percentage">{Math.round(progress)}%</div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default InitialLoadingScreen
+export default InitialLoadingScreen

src/components/layout/Sidebar.tsx

@@ -22,29 +22,24 @@ const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
   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' }
+    { 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 
+        {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"
-              />
+              <Icon name={filter.icon} variant={filter.variant} size="md" className="filter-icon" />
               <span>{filter.label}</span>
             </div>
           </li>
@@ -54,4 +49,4 @@ const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
   )
 }
 
-export default Sidebar
+export default Sidebar

src/components/layout/index.ts

@@ -1,6 +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';
+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'