mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-09 10:21:03 +00:00
Anso
6f132b7ffe
* feat(fleet): reorganize overview page for clarity and density Scope Grid/Topology to the Overview tab (moved from above the tab bar so it no longer implies it applies to Snapshots). Move Check Updates and Refresh onto the tab bar row, right-aligned. Compact the overview toolbar: constrain the sort combobox to a fixed width so it no longer stretches full-page, and collapse the Status, Type, Severity, and Tags pill groups into a single Filters popover with an active-count badge and an inline Clear all filters action. Render the local node card in the same responsive grid as remote nodes instead of a dedicated full-width row. Visual distinction is preserved through the existing brand gradient, cyan rail, ring, and "Local" badge. * fix(fleet): stop local card from stretching when remote expands Merging the local and remote node cards into a single responsive grid meant CSS grid's default align-items: stretch made every cell in a row match the tallest one. Expanding stack details on a remote card pulled the local card up with it. Add items-start on the merged grid so each cell sizes to its own content.
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...
},
},
])