settings icon

.gitignore

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

README.md

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "creamlinux",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "creamlinux",
-      "version": "1.0.0",
+      "version": "1.0.2",
       "license": "MIT",
       "dependencies": {
         "@tauri-apps/api": "^2.5.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "creamlinux",
   "private": true,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "author": "Tickbase",
   "repository": "https://github.com/Novattz/creamlinux-installer",

src-tauri/.gitignore

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

src-tauri/tauri.conf.json

@@ -11,11 +11,12 @@
     "targets": "all",
     "category": "Utility",
     "createUpdaterArtifacts": true,
-    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"]
+    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"],
+    "resources": ["resources/libs/*"]
   },
   "productName": "Creamlinux",
   "mainBinaryName": "creamlinux",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "identifier": "com.creamlinux.dev",
   "plugins": {
     "updater": {

src/App.tsx

@@ -8,7 +8,7 @@ import { Header, Sidebar, InitialLoadingScreen, ErrorBoundary } from '@/componen
 import AnimatedBackground from '@/components/layout/AnimatedBackground'
 
 // Dialog components
-import { ProgressDialog, DlcSelectionDialog } from '@/components/dialogs'
+import { ProgressDialog, DlcSelectionDialog, SettingsDialog } from '@/components/dialogs'
 
 // Game components
 import { GameList } from '@/components/games'
@@ -40,6 +40,9 @@ function App() {
     handleGameAction,
     handleDlcConfirm,
     handleGameEdit,
+    settingsDialog,
+    handleSettingsOpen,
+    handleSettingsClose,
   } = useAppContext()
 
   // Show loading screen during initial load
@@ -63,7 +66,7 @@ function App() {
 
         <div className="main-content">
           {/* Sidebar for filtering */}
-          <Sidebar setFilter={setFilter} currentFilter={filter} />
+          <Sidebar setFilter={setFilter} currentFilter={filter} onSettingsClick={handleSettingsOpen} />
 
           {/* Show error or game list */}
           {error ? (
@@ -105,6 +108,12 @@ function App() {
           onClose={handleDlcDialogClose}
           onConfirm={handleDlcConfirm}
         />
+
+        {/* Settings Dialog */}
+        <SettingsDialog 
+          visible ={settingsDialog.visible}
+          onClose={handleSettingsClose}
+        />
         
         {/* Simple update notifier that uses toast - no UI component */}
         <UpdateNotifier />

src/components/dialogs/SettingsDialog.tsx

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

src/components/dialogs/index.ts

@@ -6,6 +6,7 @@ export { default as DialogFooter } from './DialogFooter'
 export { default as DialogActions } from './DialogActions'
 export { default as ProgressDialog } from './ProgressDialog'
 export { default as DlcSelectionDialog } from './DlcSelectionDialog'
+export { default as SettingsDialog } from './SettingsDialog'
 
 // Export types
 export type { DialogProps } from './Dialog'

src/components/icons/index.ts

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

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

@@ -16,3 +16,4 @@ export { ReactComponent as Trash } from './trash.svg'
 export { ReactComponent as Warning } from './warning.svg'
 export { ReactComponent as Wine } from './wine.svg'
 export { ReactComponent as Diamond } from './diamond.svg'
+export { ReactComponent as Settings } from './settings.svg'

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5"/></svg>

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

@@ -16,3 +16,4 @@ export { ReactComponent as Trash } from './trash.svg'
 export { ReactComponent as Warning } from './warning.svg'
 export { ReactComponent as Wine } from './wine.svg'
 export { ReactComponent as Diamond } from './diamond.svg'
+export { ReactComponent as Settings } from './settings.svg'

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

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

src/components/layout/Sidebar.tsx

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

src/contexts/AppContext.tsx

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

src/contexts/AppProvider.tsx

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

src/styles/components/dialogs/_index.scss

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

src/styles/components/dialogs/_settings_dialog.scss

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