mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 08:58:05 +00:00
Anso
0b046bfa52
* feat: add whats-new entries data model * feat: add useWhatsNewPreference hook * feat: add whats-new breathing animation * feat: add WhatsNewTrigger sparkle icon * feat: add whatsNew slot to TopBar * feat: add WhatsNewModal * feat: wire whats-new sparkle icon and modal into EditorLayout * feat: add What's New opt-out toggle to Settings * fix: seed What's New watermark for zero-entry releases A release that ships with entries.json still empty must stamp a watermark on first run, or an existing install can never distinguish itself from a genuinely fresh install once a later release adds its first real entry, silently swallowing that entry's unseen signal. * fix: constrain WhatsNewModal height and clarify settings copy Bound the dialog to 85vh as a flex column so ModalBody's fill can constrain the entry list to scroll while the header and footer stay pinned, matching ConfirmModal's pattern. Also clarifies the "Show What's New" helper text in Settings. * fix: drop What's New screenshots that fail to load Screenshots are authored by hand alongside the entry, so a typo'd or not-yet-added filename is a realistic mistake. Previously that left the browser's broken-image placeholder and alt text inside the card; now the image is dropped and the title, blurb, and doc link still render. * style: replace em dash in watermark comment with a comma * fix: make "Never show again" actually hide What's New Turning the feature off previously only stopped the breathing animation and left the sparkle icon in the top bar, which is not what that label means anywhere else. Opting out now removes the trigger entirely and closes the modal, and Settings > About is the single way back. Also brings the trigger in line with its top bar siblings: it now uses the search trigger's hover treatment and gains a visible keyboard focus ring, and the modal bounds itself with dvh rather than vh so the footer cannot sit under a mobile URL bar. The modal is rendered in the desktop branch only, since the bespoke mobile screens drop the top bar that carries its trigger. * test: cover the empty-entries and loader paths of What's New The shipped state has an empty entries.json, so the branch where there is no newest entry is the one actually running, yet nothing exercised it. Adds a sibling hook test mocking that state to pin the empty-string watermark write, and a loader test for the newest-is-last contract the watermark depends on plus the malformed-entry filter. Drops the unreachable array check in the loader and the assertion that mirrored it: TypeScript types the JSON import, so a non-array file fails the build rather than reaching that branch. * refactor: fold the What's New storage writers into one helper writeEnabled and writeLastSeenId were identical apart from the key and the value encoding, duplicating the comment explaining why a failed write is non-fatal. The boolean encoding now sits at its single call site. Also hoists the reversed entry list to module scope, since the source array is a module constant, and factors the repeated preference mock in the trigger test behind a helper. * chore: keep the What's New icon hidden until an entry exists With entries.json empty there is nothing to announce, so a permanent sparkle in the top bar would only ever open a modal reading "Nothing new to show yet". The trigger now renders nothing in that state, leaving the modal's empty state as a runtime fallback for entries that fail validation rather than the shipping experience. This keeps the scaffolding invisible until the first entry is authored, which is the change that actually surfaces the feature to users.
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...
},
},
])