blob: 19c50a7c72c3d3d9d4eddf8a1b1142db4bf6e2cd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
# Components Structure
This directory contains the organized component structure for the Decky Framegen plugin.
## Component Hierarchy
### Main Orchestrator
- **`OptiScalerControls.tsx`** - Main component that orchestrates all OptiScaler functionality and state management
### Sub-components (Logical Sections)
- **`InstallationStatus.tsx`** - Shows installation status and setup button when mod is not installed
- **`OptiScalerHeader.tsx`** - Displays the OptiScaler logo/image when installed
- **`ClipboardCommands.tsx`** - Contains the patch/unpatch command copy buttons
- **`InstructionCard.tsx`** - Shows usage instructions and help text
- **`OptiScalerWiki.tsx`** - Wiki documentation button
- **`UninstallButton.tsx`** - Red remove/uninstall button
### Utility Components
- **`SmartClipboardButton.tsx`** - Reusable clipboard copy button component
- **`ResultDisplay.tsx`** - Display component for operation results
### Other Components
- **`InstalledGamesSection.tsx`** - Games section component (currently commented out)
## State Management
All state is managed in the main `OptiScalerControls` component:
- `pathExists` - Whether the mod is installed
- `installing` - Installation progress state
- `uninstalling` - Uninstallation progress state
- `installResult` - Result of installation operation
- `uninstallResult` - Result of uninstallation operation
## Component Flow
1. **Not Installed State**: Shows `InstallationStatus` with setup button
2. **Installed State**: Shows all components in order:
- OptiScaler header image
- Clipboard command buttons
- Instruction card
- Wiki button
- Uninstall button (red)
## Benefits of This Structure
- **Separation of Concerns**: Each component has a single responsibility
- **Reusability**: Components can be easily reused or rearranged
- **Maintainability**: Easier to find and modify specific functionality
- **Testability**: Smaller components are easier to test
- **State Management**: Centralized state in the orchestrator component
- **Clean Imports**: Barrel exports through `index.ts` for cleaner imports
## Clean Architecture
All legacy components have been removed and replaced with this organized structure. The codebase is now clean and follows modern React patterns.
|
