mirror of
https://github.com/Novattz/creamlinux-installer.git
synced 2026-08-01 19:18:25 -04:00
pages
This commit is contained in:
Tickbase
@@ -0,0 +1,176 @@
|
||||
import { useState, useEffect, ReactNode } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { useAppContext } from '@/contexts/useAppContext'
|
||||
import { Icon, IconName } from '@/components/icons'
|
||||
|
||||
interface LocalReport {
|
||||
game_id: string
|
||||
unlocker: string
|
||||
worked: boolean
|
||||
}
|
||||
|
||||
interface SystemInfo {
|
||||
os_name: string
|
||||
cpu_model: string
|
||||
cpu_cores: number
|
||||
gpu_name: string
|
||||
}
|
||||
|
||||
interface StatChipProps {
|
||||
label: string
|
||||
value: ReactNode
|
||||
icon: IconName | string
|
||||
variant?: string
|
||||
}
|
||||
|
||||
const StatChip = ({ label, value, icon, variant }: StatChipProps) => (
|
||||
<div className="stat-chip">
|
||||
<Icon name={icon} variant={variant} size="md" className="stat-chip-icon" />
|
||||
<span className="stat-chip-value">{value}</span>
|
||||
<span className="stat-chip-label">{label}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
/**
|
||||
* Overview page - the default landing view. Leads with the two library
|
||||
* totals as hero numbers, then a Native/Proton composition bar for the
|
||||
* Steam library, then secondary stats as compact chips, plus app info.
|
||||
*/
|
||||
const OverviewPage = () => {
|
||||
const { games, epicGames, epicLoading, loadEpicGames, activityFeed } = useAppContext()
|
||||
const [localReports, setLocalReports] = useState<LocalReport[]>([])
|
||||
const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
invoke<LocalReport[]>('get_local_reports')
|
||||
.then(setLocalReports)
|
||||
.catch(() => setLocalReports([]))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
invoke<SystemInfo>('get_system_info')
|
||||
.then(setSystemInfo)
|
||||
.catch(() => setSystemInfo(null))
|
||||
}, [])
|
||||
|
||||
// Overview is the default landing page, so kick off the Epic scan here too
|
||||
// otherwise the Epic count would show 0 until the user visits that tab.
|
||||
useEffect(() => {
|
||||
if (epicGames.length === 0 && !epicLoading) {
|
||||
loadEpicGames()
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
const nativeCount = games.filter((g) => g.native).length
|
||||
const protonCount = games.length - nativeCount
|
||||
const creamCount = games.filter((g) => g.cream_installed).length
|
||||
const smokeCount = games.filter((g) => g.smoke_installed).length
|
||||
const nativePct = games.length ? (nativeCount / games.length) * 100 : 0
|
||||
const protonPct = games.length ? (protonCount / games.length) * 100 : 0
|
||||
|
||||
return (
|
||||
<div className="overview-page">
|
||||
<h2>Overview</h2>
|
||||
|
||||
<div className="stat-hero">
|
||||
<div className="stat-hero-item">
|
||||
<span className="stat-hero-value">{games.length}</span>
|
||||
<span className="stat-hero-label">Steam Games</span>
|
||||
</div>
|
||||
<div className="stat-hero-divider" />
|
||||
<div className="stat-hero-item">
|
||||
<span className="stat-hero-value">{epicLoading ? '—' : epicGames.length}</span>
|
||||
<span className="stat-hero-label">Epic Games</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{games.length > 0 && (
|
||||
<div className="library-composition">
|
||||
<span className="overview-section-label">Steam Library Composition</span>
|
||||
<div className="composition-bar">
|
||||
<div className="composition-segment native" style={{ width: `${nativePct}%` }} />
|
||||
<div className="composition-segment proton" style={{ width: `${protonPct}%` }} />
|
||||
</div>
|
||||
<div className="composition-legend">
|
||||
<div className="legend-item">
|
||||
<span className="legend-dot native" />
|
||||
<span className="legend-label">Native</span>
|
||||
<span className="legend-value">{nativeCount}</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-dot proton" />
|
||||
<span className="legend-label">Proton</span>
|
||||
<span className="legend-value">{protonCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="stat-chips">
|
||||
<StatChip label="CreamLinux Installed" value={creamCount} icon="Linux" />
|
||||
<StatChip label="SmokeAPI Installed" value={smokeCount} icon="Windows" />
|
||||
<StatChip label="Compatibility Reports" value={localReports.length} icon="Star" />
|
||||
</div>
|
||||
|
||||
<div className="overview-columns">
|
||||
<div className="page-section">
|
||||
<h4>Recent Activity</h4>
|
||||
|
||||
{activityFeed.length === 0 ? (
|
||||
<p className="page-section-description">
|
||||
Nothing yet this session - install or uninstall something and it'll show up here.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="activity-feed">
|
||||
{activityFeed.map((item) => (
|
||||
<li key={item.id} className="activity-item">
|
||||
<span className={`activity-item-dot activity-item-dot--${item.type}`} />
|
||||
<span className="activity-item-message">{item.message}</span>
|
||||
<span className="activity-item-time">
|
||||
{new Date(item.timestamp).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="page-section">
|
||||
<h4>System</h4>
|
||||
|
||||
{systemInfo ? (
|
||||
<div className="system-specs">
|
||||
<div className="system-spec system-spec--os">
|
||||
<span className="system-spec-label">Operating System</span>
|
||||
<span className="system-spec-value" title={systemInfo.os_name}>
|
||||
{systemInfo.os_name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="system-spec system-spec--cpu">
|
||||
<span className="system-spec-label">Processor</span>
|
||||
<span className="system-spec-value" title={systemInfo.cpu_model}>
|
||||
{systemInfo.cpu_model}
|
||||
</span>
|
||||
<span className="system-spec-sub">{systemInfo.cpu_cores} threads</span>
|
||||
</div>
|
||||
<div className="system-spec system-spec--gpu">
|
||||
<span className="system-spec-label">Graphics</span>
|
||||
<span className="system-spec-value" title={systemInfo.gpu_name}>
|
||||
{systemInfo.gpu_name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="page-section-description">Reading system info...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OverviewPage
|
||||
@@ -0,0 +1,236 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { open } from '@tauri-apps/plugin-dialog'
|
||||
import { EntryList } from '@/components/common'
|
||||
import { AnimatedCheckbox, Button } from '@/components/buttons'
|
||||
import { useAppContext } from '@/contexts/useAppContext'
|
||||
import { Config } from '@/types/Config'
|
||||
|
||||
/**
|
||||
* Settings page - Steam library paths, the compatibility reporting toggle, and a danger
|
||||
* zone for resetting app data on disk.
|
||||
*/
|
||||
const SettingsPage = () => {
|
||||
const [libraryPaths, setLibraryPaths] = useState<string[]>([])
|
||||
const [reportingOptedIn, setReportingOptedIn] = useState(false)
|
||||
const [isBusy, setIsBusy] = useState(false)
|
||||
const [pathError, setPathError] = useState<string | null>(null)
|
||||
const [isResetting, setIsResetting] = useState(false)
|
||||
const [isClearingCache, setIsClearingCache] = useState(false)
|
||||
|
||||
const { loadGames, showToast } = useAppContext()
|
||||
|
||||
const loadSettingsConfig = useCallback(async () => {
|
||||
try {
|
||||
const config = await invoke<Config>('load_config')
|
||||
setLibraryPaths(config.custom_steam_paths)
|
||||
setReportingOptedIn(config.reporting_opted_in)
|
||||
} catch (error) {
|
||||
console.error('Failed to load config:', error)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadSettingsConfig()
|
||||
}, [loadSettingsConfig])
|
||||
|
||||
const addPath = async (path: string) => {
|
||||
setPathError(null)
|
||||
setIsBusy(true)
|
||||
try {
|
||||
const config = await invoke<Config>('add_custom_steam_path', { path })
|
||||
setLibraryPaths(config.custom_steam_paths)
|
||||
loadGames()
|
||||
showToast('Library path added - rescanning for games...', 'info')
|
||||
} catch (error) {
|
||||
setPathError(`${error}`)
|
||||
} finally {
|
||||
setIsBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBrowse = async () => {
|
||||
setPathError(null)
|
||||
|
||||
let selected: string | null
|
||||
try {
|
||||
selected = await open({ directory: true, multiple: false, title: 'Select Steam Library Folder' })
|
||||
} catch (error) {
|
||||
console.error('Failed to open folder picker:', error)
|
||||
return
|
||||
}
|
||||
if (!selected) return
|
||||
|
||||
addPath(selected)
|
||||
}
|
||||
|
||||
const handleRemovePath = async (path: string) => {
|
||||
setIsBusy(true)
|
||||
setPathError(null)
|
||||
try {
|
||||
const config = await invoke<Config>('remove_custom_steam_path', { path })
|
||||
setLibraryPaths(config.custom_steam_paths)
|
||||
loadGames()
|
||||
showToast('Library path removed - rescanning for games...', 'info')
|
||||
} catch (error) {
|
||||
setPathError(`${error}`)
|
||||
} finally {
|
||||
setIsBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleReporting = async () => {
|
||||
const next = !reportingOptedIn
|
||||
setReportingOptedIn(next)
|
||||
try {
|
||||
await invoke('set_reporting_opt_in', { optedIn: next })
|
||||
showToast(
|
||||
next ? 'Compatibility reporting enabled' : 'Compatibility reporting disabled',
|
||||
'info'
|
||||
)
|
||||
} catch (error) {
|
||||
setReportingOptedIn(!next)
|
||||
showToast(`Failed to update reporting preference: ${error}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const handleResetConfig = async () => {
|
||||
if (
|
||||
!window.confirm(
|
||||
'Reset all settings to their defaults? This clears your custom Steam library paths and reporting preference, and brings back the startup disclaimer.'
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsResetting(true)
|
||||
try {
|
||||
const config = await invoke<Config>('reset_config')
|
||||
setLibraryPaths(config.custom_steam_paths)
|
||||
setReportingOptedIn(config.reporting_opted_in)
|
||||
loadGames()
|
||||
showToast('Settings reset to defaults', 'success')
|
||||
} catch (error) {
|
||||
showToast(`Failed to reset settings: ${error}`, 'error')
|
||||
} finally {
|
||||
setIsResetting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearCache = async () => {
|
||||
if (
|
||||
!window.confirm(
|
||||
"Clear cached unlocker downloads? They'll be re-downloaded automatically the next time they're needed."
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsClearingCache(true)
|
||||
try {
|
||||
await invoke('clear_caches')
|
||||
showToast('Unlocker cache cleared', 'success')
|
||||
} catch (error) {
|
||||
showToast(`Failed to clear cache: ${error}`, 'error')
|
||||
} finally {
|
||||
setIsClearingCache(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenConfigFolder = async () => {
|
||||
try {
|
||||
await invoke('open_config_folder')
|
||||
} catch (error) {
|
||||
showToast(`Failed to open config folder: ${error}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-page">
|
||||
<h2>Settings</h2>
|
||||
|
||||
<div className="page-section">
|
||||
<h4>Steam Library Paths</h4>
|
||||
<p className="page-section-description">
|
||||
Add extra folders to scan for Steam games - useful if a library isn't auto-detected.
|
||||
</p>
|
||||
|
||||
{pathError && <p className="entry-list-error">{pathError}</p>}
|
||||
|
||||
<EntryList
|
||||
items={libraryPaths}
|
||||
onAddManual={addPath}
|
||||
onBrowse={handleBrowse}
|
||||
onRemove={handleRemovePath}
|
||||
placeholder="Type an absolute path and press Enter, or browse..."
|
||||
emptyLabel="No custom library paths added yet."
|
||||
disabled={isBusy}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="page-section">
|
||||
<h4>Compatibility Reporting</h4>
|
||||
<p className="page-section-description">
|
||||
Anonymously report whether an unlocker worked for a game, and see how it's worked for
|
||||
others before you install.
|
||||
</p>
|
||||
|
||||
<AnimatedCheckbox
|
||||
checked={reportingOptedIn}
|
||||
onChange={handleToggleReporting}
|
||||
label="Enable compatibility reporting"
|
||||
sublabel="You can change this at any time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="page-section danger-zone">
|
||||
<h4>Danger Zone</h4>
|
||||
<p className="page-section-description">
|
||||
These affect app data on disk - not your games or any unlockers already installed on
|
||||
them.
|
||||
</p>
|
||||
|
||||
<div className="danger-zone-row">
|
||||
<div className="danger-zone-row-text">
|
||||
<span className="danger-zone-row-label">Reset all settings</span>
|
||||
<span className="danger-zone-row-description">
|
||||
Restores defaults, including custom library paths and the startup disclaimer.
|
||||
</span>
|
||||
</div>
|
||||
<Button variant="danger" size="small" onClick={handleResetConfig} disabled={isResetting}>
|
||||
{isResetting ? 'Resetting...' : 'Reset'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="danger-zone-row">
|
||||
<div className="danger-zone-row-text">
|
||||
<span className="danger-zone-row-label">Clear unlocker cache</span>
|
||||
<span className="danger-zone-row-description">
|
||||
Deletes downloaded CreamLinux/SmokeAPI/ScreamAPI/Koaloader files.
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
onClick={handleClearCache}
|
||||
disabled={isClearingCache}
|
||||
>
|
||||
{isClearingCache ? 'Clearing...' : 'Clear'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="danger-zone-row">
|
||||
<div className="danger-zone-row-text">
|
||||
<span className="danger-zone-row-label">Open config folder</span>
|
||||
<span className="danger-zone-row-description">~/.config/creamlinux</span>
|
||||
</div>
|
||||
<Button variant="secondary" size="small" onClick={handleOpenConfigFolder}>
|
||||
Open
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SettingsPage
|
||||
Reference in New Issue
Block a user