Work on the desktop interface
The injector uses React and Tauri. Its frontend displays discovered targets, process/backup state, and reviewed operations; native commands delegate file work to injector-core.
Develop the interface
Section titled “Develop the interface”Run pnpm –filter @fluxplugs/injector-ui tauri dev after installing prerequisites. For browser-only component work use the frontend’s dev script, remembering that native window and file operations require Tauri.
Keep business decisions and transactional file mutations out of the React layer. Preserve stale-response protection when selection or asynchronous status requests change.
Design conventions
Section titled “Design conventions”The desktop uses a dark purple palette defined in App.css: background #121016, panel #1c1922, text #f1edf6, action #8b2fe8, and highlight #b980ff.
Use existing controls, visible focus, readable semantic states, and reduced-motion behavior. Disabled actions should retain an explanation. Window controls must preserve drag, resize, and keyboard behavior on supported platforms.
Run the injector UI’s typecheck and tests, including interaction, design contrast, and window-chrome tests. Use a controlled fixture for native preview/commit behavior.
Review narrow windows, long installation paths, empty results, loading/errors, and confirmation dialogs. When changing design tokens, update the website’s matching dark theme and verify its complementary light theme.