Skip to content

Latest commit

 

History

History
143 lines (104 loc) · 4.51 KB

CONTRIBUTING.md

File metadata and controls

143 lines (104 loc) · 4.51 KB

Contributing

Prerequisites

  • Node.js 18+
  • Rust 1.85+
  • Windows 10/11 with WebView2

Setup

git clone https://github.com/TMHSDigital/system-cleaner.git
cd system-cleaner
npm install

Development modes

Browser preview

npm run dev

Use this for fast frontend iteration.

  • Starts Vite on http://localhost:5174
  • Uses src/lib/mockApi.ts when Tauri runtime is unavailable
  • Good for UI layout work, browser automation, and non-destructive interaction testing

Real desktop app

npm run tauri:dev

Use this before shipping anything that depends on real system behavior.

  • Starts Vite on http://localhost:5174
  • Builds and launches the Tauri desktop shell
  • Uses the real Rust backend through invoke()

Production build

npm run tauri:build

Output locations:

  • src-tauri/target/release/system-cleaner.exe
  • src-tauri/target/release/bundle/nsis/
  • src-tauri/target/release/bundle/msi/

Project layout

src/
├── components/
│   ├── ErrorBoundary.tsx  # Top-level render crash recovery
│   ├── layout/            # Shell-level layout components
│   └── ui/                # Shared UI primitives
├── hooks/                 # Screen data + action hooks
├── lib/                   # API layer, mock API, shared helpers, types
└── styles/                # Theme tokens

src-tauri/src/commands/
├── cleanup.rs
├── disk.rs
├── memory.rs
├── recommendations.rs
└── startup.rs

Frontend workflow rules

  • Keep imports at the top of the file.
  • Prefer shared primitives over screen-specific one-off styling.
  • Put screen data fetching and derived state in hooks, not directly in screen components.
  • Preserve the api.ts contract. New UI work should not bypass the API layer.
  • If you change browser preview behavior, keep mockApi.ts aligned with the real backend shape, including edge cases like empty results and error responses.
  • Every screen must handle four states: loading, error, empty/healthy, and populated.
  • Interactive elements must have focus-visible ring styles for keyboard accessibility.
  • Use the shared <Tooltip> component instead of native title attributes for truncated text.

Error boundary

ErrorBoundary.tsx wraps the entire app. If a React render crash occurs, the user sees a styled recovery screen instead of a blank page. The boundary logs the error to the console for debugging.

Validation

Before merging frontend work:

npm exec tsc -- --noEmit

Also verify:

  • npm run dev for browser preview and non-destructive UI checks
  • npm run tauri:dev for real Tauri behavior
  • Disk Cleanup selection and filter behavior
  • Memory kill-button protections for system processes
  • Startup toggle reversibility
  • Recommendation CTA navigation

Adding a new cleanup target

  1. Add scan logic in src-tauri/src/commands/disk.rs.
  2. Add cleanup handling in src-tauri/src/commands/cleanup.rs if the target needs special deletion logic.
  3. Keep risk, path, category, and id accurate so the frontend workflow stays readable.
  4. If browser preview should demonstrate the new target, update src/lib/mockApi.ts too.

Adding a new recommendation

  1. Add the recommendation logic in src-tauri/src/commands/recommendations.rs.
  2. Use one of the existing action_type values when possible:
Value Navigates to
navigate_disk Disk Cleanup
navigate_memory Memory
navigate_startup Startup
info No navigation (informational)
  1. If you need a new action type, add it to the RecommendationAction union in src/lib/types.ts and add a case in the getAction() switch in Recommendations.tsx.
  2. If the browser preview should surface the same recommendation pattern, update src/lib/mockApi.ts.

Adding a new screen

  1. Create the screen component in src/components/.
  2. Create a hook in src/hooks/ that fetches data and exposes an error field.
  3. Handle all four states in the screen: loading, error, empty, and populated.
  4. Add focus-visible styles to all interactive elements.
  5. Use shared primitives (PageHeader, MetricCard, SectionCard, DataRow, etc.) instead of one-off styling.
  6. Add the tab to the Tab union in src/lib/types.ts and the tabs array and renderActiveScreen switch in App.tsx.

Code style

  • Rust: cargo fmt
  • TypeScript: Prettier-style formatting and shared-component reuse
  • Comments: only when the logic is not obvious
  • User-facing copy: short, direct, operational