mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-03 23:47:46 +00:00
Anso
6f45a3b788
* fix(frontend): align sidebar brand box with top nav chrome Match the TopBar's 56px height so the bottom border of the brand box meets the bottom border under the nav, removing the 7px seam. Drop the duplicate uppercase "SENCHO" label and place the version number baseline-aligned next to the italic wordmark. Center the brand row, enlarge the logo (28→36px) and wordmark (22→28px), and mark the logo as decorative since the wordmark already names it. * test(e2e): key dashboard sentinel off logo src instead of alt text The brand box change made the sidebar logo decorative (alt=""), since the adjacent wordmark already names the brand. The Playwright helper keyed loginAs() off img[alt="Sencho Logo"], so every login wait timed out and 11 specs failed (with 25 cascading skips via suite teardown). Switch DASHBOARD_INDICATOR to img[src*="sencho-logo"]: same DOM target, unaffected by accessibility wording. The selector is unique to the authenticated sidebar — login/setup screens do not render it.
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...
},
},
])