mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 08:58:05 +00:00
SaelixCode
1f302337c5
The Empty branch of the Create Stack dialog left no visual confirmation on a successful POST: no success toast, no busy state on the Create button, and no double-click guard. The first thing a new operator does is create a stack, so a click that looks like a no-op is the day-one impression killer. What changed - Empty handler now mirrors the Git and docker-run patterns: a creatingEmpty busy guard, Loader2 spinner on the Create button, disabled Cancel mid-flight, and a "Stack <name> created." success toast fired synchronously before the editor-load handoff. - The Empty panel is wrapped in a form so the Enter key submits the same path as clicking Create. - Mapped 403 to a clearer permission message; fall back to the backend's error string for other non-OK statuses. - Capture the active node id at handler entry and pass it through onStackCreated. The parent compares against the live node ref and skips the editor load if the user switched nodes mid-create, with an info toast pointing at the prior node. - Tightened the create-a-new-stack E2E (no more silent .catch on the dialog-close assertion, asserts the toast, no longer relies on a page reload to see the sidebar entry) and added a regression spec that the busy guard collapses double-clicks into a single POST.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])