Один инструмент вместо девяти dev-зависимостей. Замеры на этом репо
(483 файла, медиана из 3 прогонов, один и тот же компьютер):
- eslint . ~20.4s -> biome lint . ~2s
- prettier --check . ~8.8s -> biome format . ~0.2s
- суммарно линт+формат ~29s -> biome check . ~2-3s (~10x)
Паритет с прежними правилами:
- форматирование бинарно совместимо с Prettier-конфигом (biome format
--write тронул 9 файлов из ~480 — микроразличия);
- запрет window.confirm/alert/open/prompt и navigator.clipboard
(Telegram WebView) перенесён GritQL-плагином
biome-plugins/telegram-webview-guards.grit c теми же сообщениями
и исключениями для src/platform/** и clipboard.ts; плагин сразу
нашёл window.open в Wheel.tsx под старым eslint-disable —
переведён на biome-ignore;
- react-hooks-правила: useExhaustiveDependencies/useHookAtTopLevel;
- новые для проекта правила (a11y и пр.) не включались или понижены
до warning, чтобы миграция не смешивалась с чисткой кода — включать
можно отдельными PR.
Ограничения (задокументированы): сортировка tailwind-классов
(prettier-plugin-tailwindcss) в Biome пока nursery — не включена;
CSS исключён из Biome (парсер спотыкается о Tailwind-синтаксис
globals.css) — файл один и правится редко.
CI не меняется: имена npm-скриптов lint/format:check сохранены.
lint-staged переведён на biome check --write.
Remove translateZ(0) from base states of .bento-card, .card, .glass
and their light theme variants. Remove transform-gpu from Card.tsx.
Change bentoFadeIn animation to end with transform:none instead of
translateY(0). GPU promotion now only occurs during hover/active
interactions, preventing Chrome from creating excessive compositing
layers that cause flickering with animated backgrounds.
Root cause: backdrop-filter on header/nav resamples the animated
background 60fps, causing GPU compositing flicker (Chromium bug).
- Add isolation: isolate wrapper in AppShell to prevent backdrop-filter
from seeing through to the animated background layer
- Add will-change: transform + translateZ(0) to BackgroundRenderer
for stable GPU layer
- Replace contain: layout style with contain: content on main
- Replace transition-all with specific properties in Card component
- Set --bento-radius to 16px (was 24px) for more modern look
- Unified .card, .bento-card and Card component to use same:
- border-radius: var(--bento-radius)
- border: border-dark-700/40
- background: bg-dark-900/70
- inset shadow for glass effect
- Reduced padding from 24px to 20px
Major changes:
- Redesign cabinet with Linear-style components and top navigation
- Replace detail modals with dedicated pages (users, broadcasts, email templates)
- Add email channel support for broadcasts
- Remove pull-to-refresh, improve drag-and-drop on touch devices
- Fix Telegram Mini App: fullscreen, back button, scroll restoration
- Unify admin pages color scheme to design system
- Mobile-first improvements: horizontal tabs for settings, better touch targets
