Salastil/creamlinux-installer
1
0
Fork 0
mirror of https://github.com/Novattz/creamlinux-installer.git synced 2026-05-01 20:42:04 -04:00
Code Issues Packages Projects Releases Wiki Activity

Manually add DLC dialog #99

Browse Source
This commit is contained in:
Novattz
2026-03-13 14:51:33 +00:00
parent b9beb0d704
commit b42086ca27
4 changed files with 270 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/dialogs/AddDlcDialog.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { useState, useEffect } 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'
import { DlcInfo } from '@/types'
export interface AddDlcDialogProps {
visible: boolean
onClose: () => void
onAdd: (dlc: DlcInfo) => void
existingIds: Set<string>
}
/**
* Add DLC Manually dialog
* Allows users to manually enter a DLC ID and name when it is
* missing from the Steam API and cannot be fetched automatically
*/
const AddDlcDialog = ({ visible, onClose, onAdd, existingIds }: AddDlcDialogProps) => {
const [id, setId] = useState('')
const [name, setName] = useState('')
const [error, setError] = useState('')
// Reset form state when dialog closes
useEffect(() => {
if (!visible) {
setId('')
setName('')
setError('')
}
}, [visible])
// Validate inputs and add the DLC to the list
const handleSubmit = () => {
const trimmedId = id.trim()
const trimmedName = name.trim()
if (!trimmedId) return setError('DLC ID is required.')
if (!/^\d+$/.test(trimmedId)) return setError('DLC ID must be a number.')
if (existingIds.has(trimmedId)) return setError('A DLC with this ID already exists.')
if (!trimmedName) return setError('DLC name is required.')
onAdd({ appid: trimmedId, name: trimmedName, enabled: true })
onClose()
}
return (
<Dialog visible={visible} onClose={onClose} size="small">
<DialogHeader onClose={onClose}>
<h3>Add DLC Manually</h3>
</DialogHeader>
<DialogBody>
<div className="add-dlc-form">
<div className="add-dlc-field">
<label className="add-dlc-label">DLC ID</label>
<input
type="text"
className="add-dlc-input"
placeholder="e.g. 1234560"
value={id}
onChange={(e) => { setId(e.target.value); setError('') }}
onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
autoFocus
/>
</div>
<div className="add-dlc-field">
<label className="add-dlc-label">DLC Name</label>
<input
type="text"
className="add-dlc-input"
placeholder="e.g. Expansion - My DLC"
value={name}
onChange={(e) => { setName(e.target.value); setError('') }}
onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
/>
</div>
{error && <p className="add-dlc-error">{error}</p>}
</div>
</DialogBody>
<DialogFooter>
<DialogActions>
<Button variant="secondary" onClick={onClose}>Cancel</Button>
<Button variant="primary" onClick={handleSubmit}>Add DLC</Button>
</DialogActions>
</DialogFooter>
</Dialog>
)
}
export default AddDlcDialog

236
src/components/dialogs/DlcSelectionDialog.tsx
View File

@@ -4,6 +4,7 @@ import DialogHeader from './DialogHeader'
import DialogBody from './DialogBody' import DialogBody from './DialogBody'
import DialogFooter from './DialogFooter' import DialogFooter from './DialogFooter'
import DialogActions from './DialogActions' import DialogActions from './DialogActions'
import AddDlcDialog from './AddDlcDialog'
import { Button, AnimatedCheckbox } from '@/components/buttons' import { Button, AnimatedCheckbox } from '@/components/buttons'
import { DlcInfo } from '@/types' import { DlcInfo } from '@/types'
import { Icon, check, info } from '@/components/icons' import { Icon, check, info } from '@/components/icons'
@@ -51,6 +52,7 @@ const DlcSelectionDialog = ({
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const [selectAll, setSelectAll] = useState(true) const [selectAll, setSelectAll] = useState(true)
const [initialized, setInitialized] = useState(false) const [initialized, setInitialized] = useState(false)
const [showAddDlc, setShowAddDlc] = useState(false)
// Reset dialog state when it opens or closes // Reset dialog state when it opens or closes
useEffect(() => { useEffect(() => {
@@ -126,6 +128,11 @@ const DlcSelectionDialog = ({
) )
}, [selectAll]) }, [selectAll])
// Add a manually-entered DLC to the list
const handleAddDlc = useCallback((dlc: DlcInfo) => {
setSelectedDlcs((prev) => [...prev, dlc])
}, [])
// Submit selected DLCs to parent component // Submit selected DLCs to parent component
const handleConfirm = useCallback(() => { const handleConfirm = useCallback(() => {
// Create a deep copy to prevent reference issues // Create a deep copy to prevent reference issues
@@ -151,123 +158,140 @@ const DlcSelectionDialog = ({
} }
return ( return (
<Dialog visible={visible} onClose={onClose} size="large" preventBackdropClose={isLoading}> <>
<DialogHeader onClose={onClose} hideCloseButton={true}> <Dialog visible={visible} onClose={onClose} size="large" preventBackdropClose={isLoading}>
<h3>{dialogTitle}</h3> <DialogHeader onClose={onClose} hideCloseButton={true}>
<div className="dlc-game-info"> <h3>{dialogTitle}</h3>
<span className="game-title">{gameTitle}</span> <div className="dlc-game-info">
<span className="dlc-count"> <span className="game-title">{gameTitle}</span>
{selectedCount} of {selectedDlcs.length} DLCs selected <span className="dlc-count">
{getLoadingInfoText()} {selectedCount} of {selectedDlcs.length} DLCs selected
</span> {getLoadingInfoText()}
</div> </span>
</DialogHeader> </div>
</DialogHeader>
<div className="dlc-dialog-search"> <div className="dlc-dialog-search">
<input <input
type="text" type="text"
placeholder="Search DLCs..." placeholder="Search DLCs..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="dlc-search-input" className="dlc-search-input"
/>
<div className="select-all-container">
<AnimatedCheckbox
checked={selectAll}
onChange={handleToggleSelectAll}
label="Select All"
/> />
</div> <div className="select-all-container">
</div> <AnimatedCheckbox
checked={selectAll}
{(isLoading || isUpdating) && loadingProgress > 0 && ( onChange={handleToggleSelectAll}
<div className="dlc-loading-progress"> label="Select All"
<div className="progress-bar-container"> />
<div className="progress-bar" style={{ width: `${loadingProgress}%` }} />
</div>
<div className="loading-details">
<span>{isUpdating ? 'Updating DLC list' : 'Loading DLCs'}: {loadingProgress}%</span>
{estimatedTimeLeft && (
<span className="time-left">Est. time left: {estimatedTimeLeft}</span>
)}
</div> </div>
</div> </div>
)}
<DialogBody className="dlc-list-container"> {(isLoading || isUpdating) && loadingProgress > 0 && (
{selectedDlcs.length > 0 ? ( <div className="dlc-loading-progress">
<ul className="dlc-list"> <div className="progress-bar-container">
{filteredDlcs.map((dlc) => ( <div className="progress-bar" style={{ width: `${loadingProgress}%` }} />
<li key={dlc.appid} className="dlc-item"> </div>
<AnimatedCheckbox <div className="loading-details">
checked={dlc.enabled} <span>{isUpdating ? 'Updating DLC list' : 'Loading DLCs'}: {loadingProgress}%</span>
onChange={() => handleToggleDlc(dlc.appid)} {estimatedTimeLeft && (
label={dlc.name} <span className="time-left">Est. time left: {estimatedTimeLeft}</span>
sublabel={`ID: ${dlc.appid}`} )}
/> </div>
</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>
)} )}
</DialogBody>
<DialogFooter> <DialogBody className="dlc-list-container">
{/* Show update results */} {selectedDlcs.length > 0 ? (
{!isUpdating && !isLoading && isEditMode && updateAttempted && ( <ul className="dlc-list">
<> {filteredDlcs.map((dlc) => (
{newDlcsCount > 0 && ( <li key={dlc.appid} className="dlc-item">
<div className="dlc-update-results dlc-update-success"> <AnimatedCheckbox
<span className="update-message"> checked={dlc.enabled}
<Icon name={check} size="md" variant="solid" className="dlc-update-icon-success"/> Found {newDlcsCount} new DLC{newDlcsCount > 1 ? 's' : ''}! onChange={() => handleToggleDlc(dlc.appid)}
</span> label={dlc.name}
</div> sublabel={`ID: ${dlc.appid}`}
)} />
{newDlcsCount === 0 && ( </li>
<div className="dlc-update-results dlc-update-info"> ))}
<span className="update-message"> {isLoading && (
<Icon name={info} size="md" variant="solid" className="dlc-update-icon-info"/> No new DLCs found. Your list is up to date! <li className="dlc-item dlc-item-loading">
</span> <div className="loading-pulse"></div>
</div> </li>
)} )}
</> </ul>
)} ) : (
<div className="dlc-loading">
<div className="loading-spinner"></div>
<p>Loading DLC information...</p>
</div>
)}
</DialogBody>
<DialogActions> <DialogFooter>
<Button {/* Show update results */}
variant="secondary" {!isUpdating && !isLoading && isEditMode && updateAttempted && (
onClick={onClose} <>
disabled={(isLoading || isUpdating) && loadingProgress < 10} {newDlcsCount > 0 && (
> <div className="dlc-update-results dlc-update-success">
Cancel <span className="update-message">
</Button> <Icon name={check} size="md" variant="solid" className="dlc-update-icon-success"/> Found {newDlcsCount} new DLC{newDlcsCount > 1 ? 's' : ''}!
</span>
{/* Update button - only show in edit mode */} </div>
{isEditMode && onUpdate && ( )}
<Button {newDlcsCount === 0 && (
variant="warning" <div className="dlc-update-results dlc-update-info">
onClick={() => onUpdate(gameId)} <span className="update-message">
disabled={isLoading || isUpdating} <Icon name={info} size="md" variant="solid" className="dlc-update-icon-info"/> No new DLCs found. Your list is up to date!
> </span>
{isUpdating ? 'Updating...' : 'Update DLC List'} </div>
</Button> )}
</>
)} )}
<Button variant="primary" onClick={handleConfirm} disabled={isLoading || isUpdating}> <DialogActions>
{actionButtonText} <Button
</Button> variant="secondary"
</DialogActions> onClick={onClose}
</DialogFooter> disabled={(isLoading || isUpdating) && loadingProgress < 10}
</Dialog> >
Cancel
</Button>
<Button
variant="secondary"
onClick={() => setShowAddDlc(true)}
disabled={isLoading || isUpdating}
>
Add DLC Manually
</Button>
{/* Update button - only show in edit mode */}
{isEditMode && onUpdate && (
<Button
variant="warning"
onClick={() => onUpdate(gameId)}
disabled={isLoading || isUpdating}
>
{isUpdating ? 'Updating...' : 'Update DLC List'}
</Button>
)}
<Button variant="primary" onClick={handleConfirm} disabled={isLoading || isUpdating}>
{actionButtonText}
</Button>
</DialogActions>
</DialogFooter>
</Dialog>
<AddDlcDialog
visible={showAddDlc}
onClose={() => setShowAddDlc(false)}
onAdd={handleAddDlc}
existingIds={new Set(selectedDlcs.map((d) => d.appid))}
/>
</>
) )
} }

2
src/components/dialogs/index.ts
View File

@@ -6,6 +6,7 @@ export { default as DialogFooter } from './DialogFooter'
export { default as DialogActions } from './DialogActions' export { default as DialogActions } from './DialogActions'
export { default as ProgressDialog } from './ProgressDialog' export { default as ProgressDialog } from './ProgressDialog'
export { default as DlcSelectionDialog } from './DlcSelectionDialog' export { default as DlcSelectionDialog } from './DlcSelectionDialog'
export { default as AddDlcDialog } from './AddDlcDialog'
export { default as SettingsDialog } from './SettingsDialog' export { default as SettingsDialog } from './SettingsDialog'
export { default as SmokeAPISettingsDialog } from './SmokeAPISettingsDialog' export { default as SmokeAPISettingsDialog } from './SmokeAPISettingsDialog'
export { default as ConflictDialog } from './ConflictDialog' export { default as ConflictDialog } from './ConflictDialog'
@@ -20,5 +21,6 @@ export type { DialogFooterProps } from './DialogFooter'
export type { DialogActionsProps } from './DialogActions' export type { DialogActionsProps } from './DialogActions'
export type { ProgressDialogProps, InstallationInstructions } from './ProgressDialog' export type { ProgressDialogProps, InstallationInstructions } from './ProgressDialog'
export type { DlcSelectionDialogProps } from './DlcSelectionDialog' export type { DlcSelectionDialogProps } from './DlcSelectionDialog'
export type { AddDlcDialogProps } from './AddDlcDialog'
export type { ConflictDialogProps, Conflict } from './ConflictDialog' export type { ConflictDialogProps, Conflict } from './ConflictDialog'
export type { UnlockerSelectionDialogProps } from './UnlockerSelectionDialog' export type { UnlockerSelectionDialogProps } from './UnlockerSelectionDialog'

45
src/styles/components/dialogs/_dlc_dialog.scss
View File

@@ -209,6 +209,51 @@
} }
} }
// Add DLC manually form
.add-dlc-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.add-dlc-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.add-dlc-label {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.add-dlc-input {
background-color: var(--border-dark);
border: 1px solid var(--border-soft);
border-radius: 4px;
color: var(--text-primary);
padding: 0.6rem 1rem;
font-size: 0.9rem;
transition: all var(--duration-normal) var(--easing-ease-out);
&:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0px 0px 6px rgba(245, 150, 130, 0.2);
}
&::placeholder {
color: var(--text-muted);
}
}
.add-dlc-error {
font-size: 0.82rem;
color: var(--error);
margin: 0;
}
// Loading animations // Loading animations
@keyframes spin { @keyframes spin {
0% { 0% {