Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
288a96d04b | ||
|
|
f61e076e46 | ||
|
|
3a93961738 | ||
|
|
349ce51c67 | ||
|
|
544db9cb04 | ||
|
|
84b2bbf0a6 |
84
CHANGELOG.md
84
CHANGELOG.md
@@ -6,6 +6,69 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [0.7.0] — 2026-06-08
|
||||
|
||||
### Added
|
||||
|
||||
- Текущая версия `v0.6.6` сохранена отдельным тегом `последнее-удачное`
|
||||
как точка отката перед большим редизайном.
|
||||
|
||||
### Changed
|
||||
|
||||
- Интерфейс приложения пересобран в новом desktop-направлении: темный сайдбар,
|
||||
плотный рабочий контент, нейтральная палитра, чёткие панели и радиусы 8–10px.
|
||||
- Главный экран стал операционным overview: верхняя панель состояния, компактные
|
||||
status tiles, план ближайшего шага, цели, питание, режим и игровые долги.
|
||||
- Страницы упражнений, питания, игр, челленджей и настроек получили единый
|
||||
desktop-контейнер, более плотные списки и менее декоративные summary-блоки.
|
||||
- Редакторы, модальные окна, кнопки, переключатели, heatmap, достижения и окно
|
||||
напоминания приведены к новой desktop-системе.
|
||||
|
||||
## [0.6.6] — 2026-06-08
|
||||
|
||||
### Added
|
||||
|
||||
- Settings получили верхнюю панель состояния: сразу видно, работают ли напоминания,
|
||||
включены ли тихие часы, авто-пауза встреч и запуск вместе с Windows.
|
||||
- Добавлен renderer-стенд `npm run dev:renderer` с демо-данными для безопасной
|
||||
визуальной проверки UI без доступа к реальным пользовательским настройкам.
|
||||
|
||||
### Changed
|
||||
|
||||
- Settings перегруппированы: язык и тема теперь находятся в одном блоке “Интерфейс”,
|
||||
а главный переключатель напоминаний вынесен в раздел “Напоминания”.
|
||||
- Сводные карточки на вторичных страницах больше не обрезают длинные значения и
|
||||
используют более спокойную сетку для десктопных ширин.
|
||||
- Sidebar теперь показывает “Напоминания на паузе”, если глобальный режим остановлен.
|
||||
|
||||
### Fixed
|
||||
|
||||
- На главном экране дата больше не получает искусственную капитализацию.
|
||||
- Цели и ближайшие действия показывают единицы измерения: например “осталось 30 раз”.
|
||||
- Русский статус трекинга матчей больше не показывает английское `Setup`.
|
||||
|
||||
## [0.6.5] — 2026-06-07
|
||||
|
||||
### Added
|
||||
|
||||
- Главный экран переосмыслен как обзор действий: верхний заголовок теперь
|
||||
показывает текущее состояние (`пора сделать`, `следующее`, `встреча`,
|
||||
`пауза`, `план под контролем`) вместо абстрактного “Сегодня”.
|
||||
- Добавлены тесты для Windows autostart и для того, что Discord не считается
|
||||
активной встречей.
|
||||
|
||||
### Changed
|
||||
|
||||
- Пункт главной навигации переименован с “Сегодня” на “Обзор”.
|
||||
- Тексты meeting auto-pause стали нейтральнее: “Встреча активна”, без
|
||||
формулировки “Не дёргаем — ты на встрече”.
|
||||
- Discord убран из списка приложений, которые ставят напоминания на паузу.
|
||||
|
||||
### Fixed
|
||||
|
||||
- Исправлена проверка `Запускать с Windows`: чтение login item теперь использует
|
||||
тот же `path` и `--hidden`, что и запись через `setLoginItemSettings`.
|
||||
|
||||
## [0.6.4] — 2026-06-07
|
||||
|
||||
### Added
|
||||
@@ -125,16 +188,16 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
### Fixed (P1 — UX просадки)
|
||||
|
||||
- **Удаление упражнения теперь спрашивает подтверждение.** Раньше
|
||||
один клик в menu «Удалить» сразу удалял. Сейчас iOS-style ConfirmModal
|
||||
один клик в menu «Удалить» сразу удалял. Сейчас ConfirmModal
|
||||
с destructive-кнопкой.
|
||||
- **Daily goal закрыт — больше не «25 часов 13 минут».** Когда дневная
|
||||
цель достигнута, ExerciseCard показывает «Цель закрыта · 100/100»
|
||||
с success-зелёным цветом, а не запутанный обратный отсчёт до завтра.
|
||||
- **Авто-пауза на ВКС видна в Dashboard.** Раньше fires пропускались
|
||||
молча — пользователь не понимал почему через 12 мин ничего не пришло.
|
||||
Сейчас info-баннер «Не дёргаем — ты на встрече» с указанием закрыть
|
||||
Сейчас info-баннер активной встречи с указанием закрыть
|
||||
Zoom/Teams/etc.
|
||||
- **Native `window.confirm()` → iOS-style ConfirmModal** в restore-операции.
|
||||
- **Native `window.confirm()` → ConfirmModal** в restore-операции.
|
||||
Раньше всплывал серый системный диалог.
|
||||
|
||||
### Fixed (P2 — полировка)
|
||||
@@ -160,7 +223,7 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
### Added
|
||||
|
||||
- `src/renderer/src/components/ui/ConfirmModal.tsx` — переиспользуемый
|
||||
iOS-style confirm с focus-trap'ом через Modal.
|
||||
confirm с focus-trap'ом через Modal.
|
||||
- IPC `markChallengeDone(challengeId, reps)` — handler в main, метод в
|
||||
preload (раньше канал был в IPC enum, handler не зарегистрирован).
|
||||
- IPC `getMeetingActive` + event `evtMeetingChanged` — meeting-detect
|
||||
@@ -189,7 +252,7 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
Когда total reps за сегодня (с actualReps) ≥ dailyGoal → scheduler
|
||||
переносит fire на завтра. История = source of truth.
|
||||
- **Авто-пауза на ВКС** (#5) — сканирует процессы tasklist'ом раз в
|
||||
30с: Zoom/Teams (старый+new)/Discord/Webex/Slack/Skype/Meet/Whereby/
|
||||
30с: Zoom/Teams (старый+new)/Webex/Slack/Skype/Meet/Whereby/
|
||||
GoToMeeting. Если запущен — fires не выполняются.
|
||||
- **Адаптивный шедулер** (#2) — opt-in флаг в exercise editor.
|
||||
Heuristic-модель строит hour-of-day success rate по 30 дням истории
|
||||
@@ -365,7 +428,7 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
- **Modal focus trap + focus restore + aria-labelledby.** Tab/Shift-Tab
|
||||
больше не вываливаются на нижний слой; на закрытии фокус
|
||||
возвращается на триггер.
|
||||
- **Sidebar mobile drawer:** Esc закрывает, focus trap внутри, focus
|
||||
- **Sidebar compact drawer:** Esc закрывает, focus trap внутри, focus
|
||||
restore на гамбургер, `role="dialog"` + `aria-modal`.
|
||||
- **Tray menu i18n** — пункты меню следуют `settings.language`.
|
||||
- **Bilingual heatmap.** Title, легенда, weekday-лейблы и tooltip
|
||||
@@ -487,9 +550,9 @@ days=[Mon..Fri]` теперь правильно проверяется день
|
||||
|
||||
## [0.3.x] — 2026-05-17
|
||||
|
||||
Серия мелких релизов с дизайн-итерациями (Apple iOS / macOS aesthetic):
|
||||
Серия мелких релизов с ранними дизайн-итерациями:
|
||||
шрифты Plus Jakarta Sans + Bricolage Grotesque, светлая/тёмная/системная
|
||||
тема, vibrancy sidebar, iOS-grouped lists, spring-анимации.
|
||||
тема, полупрозрачный сайдбар, grouped lists, spring-анимации.
|
||||
|
||||
## [0.2.0] — 2026-05-16
|
||||
|
||||
@@ -505,7 +568,10 @@ days=[Mon..Fri]` теперь правильно проверяется день
|
||||
иконки), системный трей, автозапуск с Windows, native-уведомления,
|
||||
NSIS-инсталлятор, auto-update через electron-updater.
|
||||
|
||||
[Unreleased]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.4...HEAD
|
||||
[Unreleased]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.7.0...HEAD
|
||||
[0.7.0]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.6...v0.7.0
|
||||
[0.6.6]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.5...v0.6.6
|
||||
[0.6.5]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.4...v0.6.5
|
||||
[0.6.4]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.3...v0.6.4
|
||||
[0.6.3]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.6.2...v0.6.3
|
||||
[0.6.2]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.5.8...v0.6.2
|
||||
|
||||
14
README.md
14
README.md
@@ -2,8 +2,8 @@
|
||||
|
||||
Windows desktop приложение, которое помогает делать короткие перерывы без потери фокуса: держит план дня, напоминает размяться, ведёт недельные челленджи и превращает Dota 2 статистику после матча в игровые долги.
|
||||
|
||||
[](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
|
||||
[]()
|
||||
[](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
|
||||
[]()
|
||||
[]()
|
||||
|
||||
## Что внутри
|
||||
@@ -11,11 +11,11 @@ Windows desktop приложение, которое помогает делат
|
||||
- **Гибкие напоминания** — любое количество упражнений, интервал от минуты до часов, разные иконки.
|
||||
- **Питание** — отдельная вкладка с приёмами пищи по времени суток (завтрак/обед/ужин/перекусы), выбор дней недели, пресеты быстрого добавления. Напоминания по настенным часам, а не по интервалу.
|
||||
- **История и стрики** — heatmap-календарь активности, ежедневный счётчик, серия дней подряд.
|
||||
- **Сегодня** — главный экран с планом дня, уровнем, недельными мини-челленджами и игровым долгом.
|
||||
- **Обзор** — главный экран с ближайшим действием, планом дня, уровнем, недельными мини-челленджами и игровым долгом.
|
||||
- **Тихие часы** — окно времени когда напоминания подавляются (например `22:00 → 08:00`), с выбором дней недели.
|
||||
- **Сделал частично** — степпер `−/+` в окне напоминания: если ты сделал 5 из 10, в историю запишется честное число.
|
||||
- **Игровая интеграция (Dota 2)** — Game State Integration читает статистику матча, после Победа/Поражение показывает экран с «причитающимися» повторениями (например `10 смертей × 3 = 30 приседаний`).
|
||||
- **Apple-style интерфейс** — Plus Jakarta Sans + Bricolage Grotesque, iOS-палитра, vibrancy sidebar, spring-анимации, светлая/тёмная/системная тема.
|
||||
- **Desktop-интерфейс** — темный сайдбар, плотные рабочие панели, чёткие строки списков, светлая/тёмная/системная тема.
|
||||
- **Два языка** — русский и английский, переключение мгновенное.
|
||||
- **Auto-update** — приложение само скачивает новые версии из фиксированного `update-channel` (проверка каждый час, силент-ретрай при сетевых сбоях).
|
||||
|
||||
@@ -49,6 +49,7 @@ npm run typecheck # tsc по main + renderer
|
||||
npm run verify # typecheck + tests + lint + build + audit summary
|
||||
npm run test # vitest в watch-режиме
|
||||
npm run test:run # vitest один раз (для CI)
|
||||
npm run dev:renderer # renderer-стенд с демо-данными для UI-проверки
|
||||
npm run build # сборка без NSIS
|
||||
npm run dist # сборка + NSIS-инсталлятор → release/
|
||||
npm run release -- -Bump patch # bump версии + tag + push + upload в Gitea
|
||||
@@ -79,15 +80,16 @@ src/main/store.test.ts (12)
|
||||
src/renderer/src/lib/achievements.test.ts (10)
|
||||
src/shared/release-notes.test.ts (9)
|
||||
src/shared/meals.test.ts (8)
|
||||
src/main/meeting-detect.test.ts (7)
|
||||
src/main/meeting-detect.test.ts (8)
|
||||
src/shared/quiet-hours.test.ts (7)
|
||||
src/main/adaptive.test.ts (6)
|
||||
src/renderer/src/lib/day-plan.test.ts (6)
|
||||
src/shared/types.test.ts (4)
|
||||
src/renderer/src/lib/icon-choices.test.ts (4)
|
||||
src/renderer/src/lib/momentum.test.ts (3)
|
||||
src/main/autostart.test.ts (3)
|
||||
──────────────────────────────────────────
|
||||
241 ✓
|
||||
245 ✓
|
||||
```
|
||||
|
||||
Покрытие: IPC-валидация (упражнения/челленджи/приёмы пищи), persistence (миграции, карантин битого JSON, history cap), scheduler-гейтинг (тихие часы, ВКС-пауза, daily-goal), планирование приёмов пищи по времени суток (DST-safe), детект ВКС, история/стрики (DST), тихие часы (wrap), парсер VDF для Steam-конфигов, достижения, i18n с плюрализацией RU/EN, дефолты shared-типов.
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
{
|
||||
"name": "laude",
|
||||
"version": "0.6.4",
|
||||
"version": "0.7.0",
|
||||
"description": "Разомнись — Windows desktop break and exercise reminder",
|
||||
"main": "out/main/index.js",
|
||||
"author": "AnRil",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "electron-vite dev",
|
||||
"dev:renderer": "vite --config vite.renderer.config.mjs",
|
||||
"build": "electron-vite build",
|
||||
"preview": "electron-vite preview",
|
||||
"typecheck:node": "tsc --noEmit -p tsconfig.node.json",
|
||||
|
||||
73
src/main/autostart.test.ts
Normal file
73
src/main/autostart.test.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
const h = vi.hoisted(() => ({
|
||||
app: {
|
||||
setLoginItemSettings: vi.fn(),
|
||||
getLoginItemSettings: vi.fn(() => ({ openAtLogin: false })),
|
||||
wasOpenedAsHidden: false
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('electron', () => ({ app: h.app }))
|
||||
|
||||
const originalPlatform = process.platform
|
||||
|
||||
function setPlatform(platform: NodeJS.Platform): void {
|
||||
Object.defineProperty(process, 'platform', {
|
||||
value: platform,
|
||||
configurable: true
|
||||
})
|
||||
}
|
||||
|
||||
async function load(): Promise<typeof import('./autostart')> {
|
||||
vi.resetModules()
|
||||
return import('./autostart')
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setPlatform('win32')
|
||||
h.app.setLoginItemSettings.mockClear()
|
||||
h.app.getLoginItemSettings.mockReset()
|
||||
h.app.getLoginItemSettings.mockReturnValue({ openAtLogin: false })
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
setPlatform(originalPlatform)
|
||||
})
|
||||
|
||||
describe('autostart', () => {
|
||||
it('writes Windows login item with the hidden startup argument', async () => {
|
||||
const { setAutostart } = await load()
|
||||
|
||||
setAutostart(true)
|
||||
|
||||
expect(h.app.setLoginItemSettings).toHaveBeenCalledWith({
|
||||
openAtLogin: true,
|
||||
openAsHidden: true,
|
||||
path: process.execPath,
|
||||
args: ['--hidden']
|
||||
})
|
||||
})
|
||||
|
||||
it('reads Windows login item using the same path and args', async () => {
|
||||
h.app.getLoginItemSettings.mockReturnValue({ openAtLogin: true })
|
||||
const { isAutostartEnabled } = await load()
|
||||
|
||||
expect(isAutostartEnabled()).toBe(true)
|
||||
expect(h.app.getLoginItemSettings).toHaveBeenCalledWith({
|
||||
path: process.execPath,
|
||||
args: ['--hidden']
|
||||
})
|
||||
})
|
||||
|
||||
it('does nothing on non-Windows platforms', async () => {
|
||||
setPlatform('linux')
|
||||
const { setAutostart, isAutostartEnabled } = await load()
|
||||
|
||||
setAutostart(true)
|
||||
|
||||
expect(isAutostartEnabled()).toBe(false)
|
||||
expect(h.app.setLoginItemSettings).not.toHaveBeenCalled()
|
||||
expect(h.app.getLoginItemSettings).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
@@ -1,19 +1,29 @@
|
||||
import { app } from 'electron'
|
||||
|
||||
const HIDDEN_FLAG = '--hidden'
|
||||
type LoginItemOptions = NonNullable<
|
||||
Parameters<typeof app.getLoginItemSettings>[0]
|
||||
>
|
||||
|
||||
function loginItemOptions(): LoginItemOptions {
|
||||
return {
|
||||
path: process.execPath,
|
||||
args: [HIDDEN_FLAG]
|
||||
}
|
||||
}
|
||||
|
||||
export function setAutostart(enabled: boolean): void {
|
||||
if (process.platform !== 'win32') return
|
||||
app.setLoginItemSettings({
|
||||
...loginItemOptions(),
|
||||
openAtLogin: enabled,
|
||||
path: process.execPath,
|
||||
args: [HIDDEN_FLAG]
|
||||
openAsHidden: true
|
||||
})
|
||||
}
|
||||
|
||||
export function isAutostartEnabled(): boolean {
|
||||
if (process.platform !== 'win32') return false
|
||||
return app.getLoginItemSettings().openAtLogin
|
||||
return app.getLoginItemSettings(loginItemOptions()).openAtLogin
|
||||
}
|
||||
|
||||
export function wasStartedHidden(): boolean {
|
||||
|
||||
@@ -84,13 +84,19 @@ describe('isMeetingActive', () => {
|
||||
})
|
||||
|
||||
it('кэширует результат в пределах CACHE_MS (exec вызывается один раз)', async () => {
|
||||
h.execImpl = (_c, _o, cb) => cb(null, { stdout: csv('discord.exe') })
|
||||
h.execImpl = (_c, _o, cb) => cb(null, { stdout: csv('zoom.exe') })
|
||||
const { isMeetingActive } = await load()
|
||||
await isMeetingActive()
|
||||
await isMeetingActive()
|
||||
expect(h.calls).toBe(1)
|
||||
})
|
||||
|
||||
it('не считает Discord встречей', async () => {
|
||||
h.execImpl = (_c, _o, cb) => cb(null, { stdout: csv('discord.exe') })
|
||||
const { isMeetingActive } = await load()
|
||||
expect(await isMeetingActive()).toBe(false)
|
||||
})
|
||||
|
||||
it('при падении tasklist возвращает false и логирует warn', async () => {
|
||||
h.execImpl = (_c, _o, cb) => cb(new Error('ETIMEDOUT'))
|
||||
const { isMeetingActive } = await load()
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Эвристическое обнаружение «человек на ВКС» по списку запущенных процессов.
|
||||
*
|
||||
* Идея: если запущен Zoom/Teams/Discord/Meet/Webex — пользователь скорее
|
||||
* Идея: если запущен Zoom/Teams/Meet/Webex — пользователь скорее
|
||||
* всего на встрече или собирается зайти. Останавливаем напоминания, чтобы
|
||||
* не прерывать. После «снятия» процессов возобновляем.
|
||||
*
|
||||
@@ -36,7 +36,6 @@ const MEETING_PROCESSES = new Set([
|
||||
'zoom.exe',
|
||||
'teams.exe',
|
||||
'ms-teams.exe', // новые Teams 2.0
|
||||
'discord.exe',
|
||||
'webex.exe',
|
||||
'webexmta.exe',
|
||||
'meet.exe', // Google Meet desktop (редкость)
|
||||
|
||||
@@ -22,7 +22,7 @@ let backendSubscribed = false
|
||||
export default function App(): JSX.Element {
|
||||
const hydrated = useAppStore((s) => s.hydrated)
|
||||
const settings = useAppStore((s) => s.state?.settings)
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState(false)
|
||||
const [compactNavOpen, setCompactNavOpen] = useState(false)
|
||||
const [whatsNew, setWhatsNew] = useState<{
|
||||
open: boolean
|
||||
versions: string[]
|
||||
@@ -89,17 +89,17 @@ export default function App(): JSX.Element {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<HashRouter>
|
||||
<div className="h-screen w-screen flex flex-col bg-bg">
|
||||
<Titlebar onMenuClick={() => setMobileNavOpen(true)} />
|
||||
<div className="h-screen w-screen flex flex-col app-shell bg-bg">
|
||||
<Titlebar onMenuClick={() => setCompactNavOpen(true)} />
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<Sidebar
|
||||
mobileOpen={mobileNavOpen}
|
||||
onMobileClose={() => setMobileNavOpen(false)}
|
||||
compactOpen={compactNavOpen}
|
||||
onCompactClose={() => setCompactNavOpen(false)}
|
||||
/>
|
||||
<main className="flex-1 overflow-hidden min-w-0">
|
||||
<main className="flex-1 overflow-hidden min-w-0 app-main-surface">
|
||||
{hydrated ? (
|
||||
<ErrorBoundary>
|
||||
<RoutedPages onNav={() => setMobileNavOpen(false)} />
|
||||
<RoutedPages onNav={() => setCompactNavOpen(false)} />
|
||||
</ErrorBoundary>
|
||||
) : (
|
||||
// Skeleton на время гидрации — settings (и язык) ещё не
|
||||
|
||||
@@ -226,8 +226,7 @@ export default function ReminderApp(): JSX.Element {
|
||||
void window.api.markChallengeDone(id, result.reps)
|
||||
}
|
||||
// 2) Functional update: rapid-click race-safe.
|
||||
setMode((m) =>
|
||||
{
|
||||
setMode((m) => {
|
||||
if (m.kind !== 'match') return m
|
||||
const nextMode: Mode = {
|
||||
kind: 'match',
|
||||
@@ -236,8 +235,7 @@ export default function ReminderApp(): JSX.Element {
|
||||
}
|
||||
modeRef.current = nextMode
|
||||
return nextMode
|
||||
}
|
||||
)
|
||||
})
|
||||
}}
|
||||
onClose={close}
|
||||
/>
|
||||
@@ -330,7 +328,7 @@ function ExerciseReminder({
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
||||
className="relative mb-6"
|
||||
>
|
||||
<div className="w-24 h-24 rounded-full bg-accent text-white grid place-items-center shadow-[0_8px_30px_-8px_rgb(var(--accent)/0.5)]">
|
||||
<div className="w-20 h-20 rounded-xl bg-accent text-white grid place-items-center shadow-[0_12px_36px_-24px_rgb(var(--accent)/0.75)]">
|
||||
<Icon name={exercise.icon} size={44} strokeWidth={2} />
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -338,7 +336,7 @@ function ExerciseReminder({
|
||||
<div className="text-[13px] uppercase tracking-[0.18em] text-accent font-bold">
|
||||
{t(`category.${exercise.category ?? 'exercise'}.cta`)}
|
||||
</div>
|
||||
<h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
|
||||
<h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
|
||||
{exercise.name}
|
||||
</h1>
|
||||
|
||||
@@ -346,7 +344,7 @@ function ExerciseReminder({
|
||||
<div className="inline-flex items-center gap-3 select-none">
|
||||
<button
|
||||
onClick={dec}
|
||||
className="w-9 h-9 grid place-items-center rounded-full bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-90 transition-all"
|
||||
className="w-9 h-9 grid place-items-center rounded-lg bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-95 transition-all"
|
||||
aria-label={t('reminder.aria.decrement')}
|
||||
>
|
||||
<Minus size={16} strokeWidth={2.5} />
|
||||
@@ -354,7 +352,7 @@ function ExerciseReminder({
|
||||
<div className="inline-flex items-baseline gap-2 font-mono-num min-w-[120px] justify-center">
|
||||
<span
|
||||
className={[
|
||||
'text-[56px] font-semibold tracking-tight leading-none',
|
||||
'text-[54px] font-semibold leading-none',
|
||||
adjusted ? 'text-accent' : 'text-text'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -366,7 +364,7 @@ function ExerciseReminder({
|
||||
</div>
|
||||
<button
|
||||
onClick={inc}
|
||||
className="w-9 h-9 grid place-items-center rounded-full bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-90 transition-all"
|
||||
className="w-9 h-9 grid place-items-center rounded-lg bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-95 transition-all"
|
||||
aria-label={t('reminder.aria.increment')}
|
||||
>
|
||||
<Plus size={16} strokeWidth={2.5} />
|
||||
@@ -392,21 +390,21 @@ function ExerciseReminder({
|
||||
<div className="px-4 pb-4 space-y-2">
|
||||
<button
|
||||
onClick={done}
|
||||
className="w-full h-12 rounded-2xl bg-accent text-white text-[16px] font-bold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
|
||||
className="w-full h-11 rounded-lg bg-accent text-white text-[15px] font-bold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
|
||||
>
|
||||
<Check size={17} strokeWidth={2.5} /> {t('reminder.btn.done')}
|
||||
</button>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={snooze}
|
||||
className="h-11 rounded-2xl bg-surface-2 text-text text-[15px] font-semibold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
|
||||
className="h-10 rounded-lg bg-surface-2 text-text text-[14px] font-semibold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
|
||||
>
|
||||
<Clock size={15} strokeWidth={2.5} />{' '}
|
||||
{t('btn.snooze_min', { n: snoozeMinutes })}
|
||||
</button>
|
||||
<button
|
||||
onClick={skip}
|
||||
className="h-11 rounded-2xl bg-surface-2 text-text/65 text-[15px] font-semibold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
|
||||
className="h-10 rounded-lg bg-surface-2 text-text/65 text-[14px] font-semibold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
|
||||
>
|
||||
{t('btn.skip')}
|
||||
</button>
|
||||
@@ -452,7 +450,10 @@ function MealReminder({
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
onClose()
|
||||
} else if ((e.key === ' ' || e.code === 'Space') && targetTag !== 'BUTTON') {
|
||||
} else if (
|
||||
(e.key === ' ' || e.code === 'Space') &&
|
||||
targetTag !== 'BUTTON'
|
||||
) {
|
||||
e.preventDefault()
|
||||
void snooze()
|
||||
}
|
||||
@@ -481,7 +482,7 @@ function MealReminder({
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
||||
className="relative mb-6"
|
||||
>
|
||||
<div className="w-24 h-24 rounded-full bg-success text-white grid place-items-center shadow-[0_8px_30px_-8px_rgb(var(--success)/0.5)]">
|
||||
<div className="w-20 h-20 rounded-xl bg-success text-white grid place-items-center shadow-[0_12px_36px_-24px_rgb(var(--success)/0.75)]">
|
||||
<Icon name={meal.icon} size={44} strokeWidth={2} />
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -489,7 +490,7 @@ function MealReminder({
|
||||
<div className="text-[13px] uppercase tracking-[0.18em] text-success font-bold">
|
||||
{t('meal.cta')}
|
||||
</div>
|
||||
<h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
|
||||
<h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
|
||||
{meal.name}
|
||||
</h1>
|
||||
<div className="text-[13px] text-text/65 mt-1 inline-flex items-center gap-1.5 font-medium font-mono-num">
|
||||
@@ -500,13 +501,13 @@ function MealReminder({
|
||||
<div className="px-4 pb-4 space-y-2">
|
||||
<button
|
||||
onClick={done}
|
||||
className="w-full h-12 rounded-2xl bg-success text-white text-[16px] font-bold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
|
||||
className="w-full h-11 rounded-lg bg-success text-white text-[15px] font-bold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
|
||||
>
|
||||
<Check size={17} strokeWidth={2.5} /> {t('meal.btn.ate')}
|
||||
</button>
|
||||
<button
|
||||
onClick={snooze}
|
||||
className="w-full h-11 rounded-2xl bg-surface-2 text-text text-[15px] font-semibold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
|
||||
className="w-full h-10 rounded-lg bg-surface-2 text-text text-[14px] font-semibold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
|
||||
>
|
||||
<Clock size={15} strokeWidth={2.5} />{' '}
|
||||
{t('btn.snooze_min', { n: snoozeMinutes })}
|
||||
@@ -567,7 +568,7 @@ function MatchSummaryView({
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 280, damping: 22 }}
|
||||
className={[
|
||||
'inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-3 text-white',
|
||||
'inline-flex items-center justify-center w-12 h-12 rounded-xl mb-3 text-white',
|
||||
won ? 'bg-success' : lost ? 'bg-destructive' : 'bg-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -579,7 +580,7 @@ function MatchSummaryView({
|
||||
<Gamepad2 size={26} strokeWidth={2} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h1 className="font-serif text-[26px] tracking-tight font-bold">
|
||||
<h1 className="font-display text-[25px] font-bold">
|
||||
{won
|
||||
? t('match.title.won')
|
||||
: lost
|
||||
@@ -626,7 +627,7 @@ function MatchSummaryView({
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={[
|
||||
'h-11 px-5 rounded-2xl text-white text-[14px] font-semibold inline-flex items-center gap-1.5 active:scale-[0.98] transition-all',
|
||||
'h-10 px-4 rounded-lg text-white text-[14px] font-semibold inline-flex items-center gap-1.5 active:translate-y-px transition-all',
|
||||
allDone ? 'bg-success' : 'bg-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -661,13 +662,13 @@ function ChallengeRow({
|
||||
initial={{ opacity: 0, x: -8 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className={[
|
||||
'flex items-center gap-3 rounded-2xl p-3 transition-colors',
|
||||
'flex items-center gap-3 rounded-lg p-3 transition-colors',
|
||||
done ? 'bg-success/10' : 'bg-surface-2'
|
||||
].join(' ')}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
'w-10 h-10 rounded-xl grid place-items-center shrink-0',
|
||||
'w-9 h-9 rounded-lg grid place-items-center shrink-0',
|
||||
done ? 'bg-success text-white' : 'bg-accent text-white'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -691,7 +692,7 @@ function ChallengeRow({
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'font-mono-num text-[20px] font-semibold tracking-tight',
|
||||
'font-mono-num text-[20px] font-semibold',
|
||||
done ? 'text-success' : 'text-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -701,7 +702,7 @@ function ChallengeRow({
|
||||
onClick={onMarkDone}
|
||||
disabled={done}
|
||||
className={[
|
||||
'h-9 w-9 grid place-items-center rounded-full transition-all',
|
||||
'h-9 w-9 grid place-items-center rounded-lg transition-all',
|
||||
done
|
||||
? 'bg-success text-white cursor-default'
|
||||
: 'bg-accent text-white active:scale-90'
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Award, Activity, Flame, Sparkles, TrendingUp, Lock } from 'lucide-react'
|
||||
import {
|
||||
Award,
|
||||
Activity,
|
||||
Flame,
|
||||
Sparkles,
|
||||
TrendingUp,
|
||||
Lock
|
||||
} from 'lucide-react'
|
||||
import type { Exercise, HistoryEntry } from '@shared/types'
|
||||
import {
|
||||
computeAchievements,
|
||||
@@ -106,7 +113,7 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
|
||||
if (visible.length === 0) return <></>
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-lg bg-accent text-white grid place-items-center">
|
||||
@@ -125,11 +132,7 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
||||
{visible.map((a) => (
|
||||
<Badge
|
||||
key={a.def.id}
|
||||
a={a}
|
||||
fresh={freshlyUnlocked.has(a.def.id)}
|
||||
/>
|
||||
<Badge key={a.def.id} a={a} fresh={freshlyUnlocked.has(a.def.id)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,7 +180,7 @@ function Badge({
|
||||
: {}
|
||||
}
|
||||
className={[
|
||||
'rounded-xl p-2.5 transition-opacity',
|
||||
'rounded-lg p-2.5 transition-opacity',
|
||||
a.unlocked ? 'bg-surface-2' : 'bg-surface-2 opacity-55'
|
||||
].join(' ')}
|
||||
title={t(a.def.descKey, { target: a.target })}
|
||||
@@ -185,7 +188,7 @@ function Badge({
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<div
|
||||
className={[
|
||||
'w-7 h-7 rounded-lg grid place-items-center text-white shrink-0',
|
||||
'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
|
||||
a.unlocked ? toneBg : 'bg-text/30'
|
||||
].join(' ')}
|
||||
>
|
||||
|
||||
@@ -19,11 +19,6 @@ type Props = {
|
||||
onMarkDone: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS-flavoured exercise card. White surface, soft shadow, big readable
|
||||
* countdown. A subtle ring around the icon shows interval progress —
|
||||
* Apple Fitness ring spirit but minimalist.
|
||||
*/
|
||||
export function ExerciseCard({
|
||||
exercise,
|
||||
tick,
|
||||
@@ -115,32 +110,31 @@ export function ExerciseCard({
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.97 }}
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
||||
className="relative bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30"
|
||||
className="relative bg-surface rounded-xl p-4 shadow-card border border-hairline/30"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Icon + progress ring */}
|
||||
<div className="relative w-14 h-14 shrink-0">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="relative w-12 h-12 shrink-0">
|
||||
<svg
|
||||
className="absolute inset-0 -rotate-90"
|
||||
viewBox="0 0 56 56"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 48 48"
|
||||
width="48"
|
||||
height="48"
|
||||
>
|
||||
<circle
|
||||
cx="28"
|
||||
cy="28"
|
||||
cx="24"
|
||||
cy="24"
|
||||
r={R}
|
||||
fill="none"
|
||||
strokeWidth="2.5"
|
||||
strokeWidth="2"
|
||||
className="stroke-hairline/15 dark:stroke-hairline/30"
|
||||
/>
|
||||
{exercise.enabled && (
|
||||
<circle
|
||||
cx="28"
|
||||
cy="28"
|
||||
cx="24"
|
||||
cy="24"
|
||||
r={R}
|
||||
fill="none"
|
||||
strokeWidth="2.5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={C}
|
||||
strokeDashoffset={dashOffset}
|
||||
@@ -151,7 +145,7 @@ export function ExerciseCard({
|
||||
</svg>
|
||||
<div
|
||||
className={[
|
||||
'absolute inset-[8px] rounded-full grid place-items-center',
|
||||
'absolute inset-[7px] rounded-lg grid place-items-center',
|
||||
exercise.enabled
|
||||
? 'bg-accent/10 text-accent'
|
||||
: 'bg-surface-2 text-text/40'
|
||||
@@ -163,14 +157,14 @@ export function ExerciseCard({
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="font-display text-[18px] font-bold leading-tight truncate">
|
||||
<h3 className="font-display text-[17px] font-bold leading-tight truncate">
|
||||
{exercise.name}
|
||||
</h3>
|
||||
<div className="relative">
|
||||
<button
|
||||
ref={triggerRef}
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
className="w-7 h-7 grid place-items-center rounded-full text-text/45 hover:bg-surface-2 active:scale-90 transition-all"
|
||||
className="w-7 h-7 grid place-items-center rounded-md text-text/45 hover:bg-surface-2 active:scale-95 transition-all"
|
||||
aria-label={t('titlebar.menu_aria')}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpen}
|
||||
@@ -188,7 +182,7 @@ export function ExerciseCard({
|
||||
role="menu"
|
||||
aria-label={exercise.name}
|
||||
onKeyDown={onMenuKeyDown}
|
||||
className="absolute right-0 top-8 z-20 min-w-[140px] bg-surface rounded-xl shadow-sheet ring-0.5 ring-hairline/30 py-1 overflow-hidden"
|
||||
className="absolute right-0 top-8 z-20 min-w-[140px] bg-surface rounded-lg shadow-sheet ring-1 ring-hairline/30 py-1 overflow-hidden"
|
||||
>
|
||||
<button
|
||||
role="menuitem"
|
||||
@@ -215,17 +209,16 @@ export function ExerciseCard({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[14px] text-text/65 mt-1 font-medium">
|
||||
<div className="text-[13px] text-text/60 mt-1 font-medium">
|
||||
{t('editor.exercise.preview.meta', {
|
||||
reps: exercise.reps,
|
||||
min: exercise.intervalMinutes
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Countdown + switch */}
|
||||
<div className="flex items-end justify-between mt-3.5">
|
||||
<div className="flex items-end justify-between mt-3">
|
||||
<div>
|
||||
<div className="text-[12px] text-text/60 uppercase tracking-wider font-semibold inline-flex items-center gap-1">
|
||||
<div className="text-[12px] text-text/60 font-semibold inline-flex items-center gap-1">
|
||||
{goalReached ? (
|
||||
<>
|
||||
<CheckCircle2
|
||||
@@ -251,7 +244,7 @@ export function ExerciseCard({
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'font-mono-num text-[24px] font-bold leading-none mt-1 tracking-tight',
|
||||
'font-mono-num text-[22px] font-bold leading-none mt-1',
|
||||
goalReached
|
||||
? 'text-success'
|
||||
: isDue
|
||||
@@ -283,7 +276,7 @@ export function ExerciseCard({
|
||||
initial={{ opacity: 0, y: 4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onClick={handleMarkDone}
|
||||
className="mt-4 w-full h-11 rounded-xl bg-accent text-white text-[15px] font-bold inline-flex items-center justify-center gap-1.5 active:scale-[0.98] transition-transform"
|
||||
className="mt-3 w-full h-10 rounded-lg bg-accent text-white text-[14px] font-bold inline-flex items-center justify-center gap-1.5 active:translate-y-px transition-transform"
|
||||
>
|
||||
<Check size={15} strokeWidth={2.5} /> {t('btn.done')}
|
||||
</motion.button>
|
||||
|
||||
@@ -85,12 +85,12 @@ export function ExerciseEditor({
|
||||
}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<div className="rounded-2xl bg-surface-2 p-4 flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent text-white grid place-items-center shrink-0">
|
||||
<div className="rounded-lg bg-surface-2 p-4 flex items-center gap-4 border border-hairline/25">
|
||||
<div className="w-12 h-12 rounded-lg bg-accent text-white grid place-items-center shrink-0">
|
||||
<Icon name={draft.icon} size={26} strokeWidth={2.2} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-display text-[18px] font-semibold tracking-tight truncate">
|
||||
<div className="font-display text-[18px] font-semibold truncate">
|
||||
{draft.name || t('editor.exercise.preview.placeholder')}
|
||||
</div>
|
||||
<div className="text-[13px] text-text/55 mt-0.5 font-mono-num">
|
||||
@@ -120,7 +120,7 @@ export function ExerciseEditor({
|
||||
type="button"
|
||||
onClick={() => setDraft({ ...draft, category: c })}
|
||||
className={[
|
||||
'h-10 px-2 rounded-xl text-[13px] font-semibold transition-all active:scale-95 truncate',
|
||||
'h-9 px-2 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px truncate',
|
||||
draft.category === c
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface-2 text-text/65 hover:text-text'
|
||||
@@ -185,7 +185,7 @@ export function ExerciseEditor({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDraft({ ...draft, dailyGoal: undefined })}
|
||||
className="h-9 px-3 rounded-xl bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
|
||||
className="h-9 px-3 rounded-lg bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
|
||||
>
|
||||
{t('editor.field.daily_goal.clear')}
|
||||
</button>
|
||||
@@ -200,9 +200,7 @@ export function ExerciseEditor({
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft.adaptive ?? false}
|
||||
onChange={(e) =>
|
||||
setDraft({ ...draft, adaptive: e.target.checked })
|
||||
}
|
||||
onChange={(e) => setDraft({ ...draft, adaptive: e.target.checked })}
|
||||
className="mt-0.5 w-4 h-4 accent-accent"
|
||||
/>
|
||||
<div>
|
||||
@@ -216,14 +214,14 @@ export function ExerciseEditor({
|
||||
</label>
|
||||
|
||||
<Field label={t('editor.field.icon')}>
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
|
||||
{ICON_CHOICES.map((name) => (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => setDraft({ ...draft, icon: name })}
|
||||
className={[
|
||||
'h-10 w-10 grid place-items-center rounded-xl transition-all active:scale-90',
|
||||
'h-10 w-10 grid place-items-center rounded-lg transition-colors active:translate-y-px',
|
||||
draft.icon === name
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface text-text/65 hover:text-text'
|
||||
@@ -241,9 +239,9 @@ export function ExerciseEditor({
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: rgb(var(--surface-2));
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(var(--hairline) / 0.35);
|
||||
background: rgb(var(--surface));
|
||||
color: rgb(var(--text));
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
|
||||
@@ -109,7 +109,7 @@ export function HistoryHeatmap({
|
||||
translateN(lang, 'heatmap.tooltip.reps', n)
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="text-[14px] text-text/75 font-semibold">
|
||||
{t('heatmap.title')}
|
||||
|
||||
@@ -84,12 +84,12 @@ export function MealEditor({
|
||||
}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<div className="rounded-2xl bg-surface-2 p-4 flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent text-white grid place-items-center shrink-0">
|
||||
<div className="rounded-lg bg-surface-2 p-4 flex items-center gap-4 border border-hairline/25">
|
||||
<div className="w-12 h-12 rounded-lg bg-accent text-white grid place-items-center shrink-0">
|
||||
<Icon name={draft.icon} size={26} strokeWidth={2.2} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-display text-[18px] font-semibold tracking-tight truncate">
|
||||
<div className="font-display text-[18px] font-semibold truncate">
|
||||
{draft.name || t('editor.meal.preview.placeholder')}
|
||||
</div>
|
||||
<div className="text-[13px] text-text/55 mt-0.5 font-mono-num">
|
||||
@@ -128,7 +128,7 @@ export function MealEditor({
|
||||
aria-pressed={active}
|
||||
onClick={() => toggleDay(dow)}
|
||||
className={[
|
||||
'h-10 rounded-xl text-[13px] font-semibold transition-all active:scale-95',
|
||||
'h-9 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px',
|
||||
active
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface-2 text-text/65 hover:text-text'
|
||||
@@ -145,14 +145,14 @@ export function MealEditor({
|
||||
</Field>
|
||||
|
||||
<Field label={t('editor.field.icon')}>
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
|
||||
{ICON_CHOICES.map((name) => (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => setDraft({ ...draft, icon: name })}
|
||||
className={[
|
||||
'h-10 w-10 grid place-items-center rounded-xl transition-all active:scale-90',
|
||||
'h-10 w-10 grid place-items-center rounded-lg transition-colors active:translate-y-px',
|
||||
draft.icon === name
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface text-text/65 hover:text-text'
|
||||
@@ -170,9 +170,9 @@ export function MealEditor({
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: rgb(var(--surface-2));
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(var(--hairline) / 0.35);
|
||||
background: rgb(var(--surface));
|
||||
color: rgb(var(--text));
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
|
||||
@@ -16,12 +16,12 @@ export function PageHeader({
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[14px] text-text/65 font-semibold">{kicker}</div>
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
|
||||
<div className="text-[13px] text-text/60 font-bold">{kicker}</div>
|
||||
<h1 className="font-display text-[28px] sm:text-[32px] leading-tight mt-1 font-bold">
|
||||
{title}
|
||||
</h1>
|
||||
{subtitle && (
|
||||
<p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
|
||||
<p className="text-[14px] text-text/60 mt-1.5 font-medium leading-relaxed max-w-2xl">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
@@ -40,9 +40,10 @@ export function InsightGrid({
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={['grid grid-cols-1 sm:grid-cols-3 gap-3 mb-8', className].join(
|
||||
' '
|
||||
)}
|
||||
className={[
|
||||
'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 mb-6',
|
||||
className
|
||||
].join(' ')}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
@@ -74,21 +75,21 @@ export function InsightCard({
|
||||
: 'bg-text/12 text-text/55'
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-2xl p-4 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={[
|
||||
'w-9 h-9 rounded-xl grid place-items-center shrink-0',
|
||||
'w-8 h-8 rounded-lg grid place-items-center shrink-0',
|
||||
iconClass
|
||||
].join(' ')}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[12px] uppercase tracking-[0.06em] text-text/50 font-bold truncate">
|
||||
<div className="text-[12px] text-text/50 font-bold leading-tight">
|
||||
{label}
|
||||
</div>
|
||||
<div className="font-display text-[22px] font-bold leading-none mt-1 truncate">
|
||||
<div className="font-display text-[20px] font-bold leading-tight mt-1 break-words">
|
||||
{value}
|
||||
</div>
|
||||
{hint && (
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
X
|
||||
} from 'lucide-react'
|
||||
import { useT } from '../i18n'
|
||||
import { useAppStore } from '../store/appStore'
|
||||
|
||||
type Item = {
|
||||
to: string
|
||||
@@ -45,33 +46,31 @@ const items: Item[] = [
|
||||
to: '/settings',
|
||||
labelKey: 'nav.settings',
|
||||
icon: Settings2,
|
||||
tint: 'bg-text/70'
|
||||
tint: 'bg-sidebar-muted'
|
||||
}
|
||||
]
|
||||
|
||||
type Props = {
|
||||
mobileOpen?: boolean
|
||||
onMobileClose?: () => void
|
||||
compactOpen?: boolean
|
||||
onCompactClose?: () => void
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
mobileOpen = false,
|
||||
onMobileClose
|
||||
compactOpen = false,
|
||||
onCompactClose
|
||||
}: Props): JSX.Element {
|
||||
const { t } = useT()
|
||||
const drawerRef = useRef<HTMLElement | null>(null)
|
||||
const lastFocusedRef = useRef<HTMLElement | null>(null)
|
||||
|
||||
// Esc closes + focus trap while the mobile drawer is open. Mirrors the
|
||||
// pattern used in Modal.tsx.
|
||||
useEffect(() => {
|
||||
if (!mobileOpen) return undefined
|
||||
if (!compactOpen) return undefined
|
||||
lastFocusedRef.current = document.activeElement as HTMLElement | null
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent): void => {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
onMobileClose?.()
|
||||
onCompactClose?.()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Tab') return
|
||||
@@ -89,31 +88,27 @@ export function Sidebar({
|
||||
e.preventDefault()
|
||||
last.focus()
|
||||
}
|
||||
} else {
|
||||
if (active === last || !root.contains(active)) {
|
||||
} else if (active === last || !root.contains(active)) {
|
||||
e.preventDefault()
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', onKeyDown, true)
|
||||
return () => {
|
||||
document.removeEventListener('keydown', onKeyDown, true)
|
||||
// Return focus to the trigger (Titlebar's hamburger) so keyboard users
|
||||
// pick up where they left off.
|
||||
const target = lastFocusedRef.current
|
||||
if (target && document.body.contains(target)) target.focus()
|
||||
}
|
||||
}, [mobileOpen, onMobileClose])
|
||||
}, [compactOpen, onCompactClose])
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside className="hidden md:flex w-64 shrink-0 vibrancy hairline-b border-r-0 flex-col">
|
||||
<aside className="hidden md:flex w-[276px] shrink-0 bg-sidebar text-sidebar-text flex-col border-r border-black/25">
|
||||
<SidebarContent />
|
||||
</aside>
|
||||
|
||||
<AnimatePresence>
|
||||
{mobileOpen && (
|
||||
{compactOpen && (
|
||||
<motion.div
|
||||
className="md:hidden fixed inset-0 z-50 flex"
|
||||
initial={{ opacity: 0 }}
|
||||
@@ -122,8 +117,8 @@ export function Sidebar({
|
||||
transition={{ duration: 0.18 }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/30 backdrop-blur-md"
|
||||
onClick={onMobileClose}
|
||||
className="absolute inset-0 bg-black/35"
|
||||
onClick={onCompactClose}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -134,20 +129,20 @@ export function Sidebar({
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t('sidebar.aria.nav')}
|
||||
className="relative w-72 max-w-[85vw] h-full vibrancy flex flex-col"
|
||||
className="relative w-72 max-w-[85vw] h-full bg-sidebar text-sidebar-text flex flex-col"
|
||||
initial={{ x: '-100%' }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: '-100%' }}
|
||||
transition={{ type: 'spring', stiffness: 420, damping: 38 }}
|
||||
>
|
||||
<button
|
||||
onClick={onMobileClose}
|
||||
className="absolute top-3 right-3 w-8 h-8 grid place-items-center rounded-full bg-surface-2 hover:bg-hairline/25 text-text/60 transition-colors active:scale-90"
|
||||
onClick={onCompactClose}
|
||||
className="absolute top-3 right-3 w-8 h-8 grid place-items-center rounded-md bg-white/[0.08] hover:bg-white/[0.14] text-sidebar-muted hover:text-sidebar-text transition-colors active:scale-95"
|
||||
aria-label={t('btn.close')}
|
||||
>
|
||||
<X size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
<SidebarContent onNav={onMobileClose} />
|
||||
<SidebarContent onNav={onCompactClose} />
|
||||
</motion.aside>
|
||||
</motion.div>
|
||||
)}
|
||||
@@ -158,18 +153,26 @@ export function Sidebar({
|
||||
|
||||
function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
const { t } = useT()
|
||||
const running = useAppStore((s) => s.state?.settings.globalEnabled ?? true)
|
||||
return (
|
||||
<>
|
||||
<div className="px-5 pt-7 pb-6">
|
||||
<div className="font-serif text-[36px] leading-none tracking-tight font-bold">
|
||||
<div className="px-4 pt-5 pb-4">
|
||||
<div className="h-10 flex items-center gap-3">
|
||||
<div className="h-9 w-9 rounded-lg bg-accent text-white grid place-items-center font-display text-[18px] font-bold">
|
||||
Р
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-display text-[20px] leading-tight font-bold">
|
||||
Разомнись
|
||||
</div>
|
||||
<div className="text-[13px] text-text/55 mt-2 font-medium">
|
||||
<div className="text-[12px] text-sidebar-muted font-medium">
|
||||
{t('sidebar.slogan')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="px-2.5 flex flex-col gap-1">
|
||||
<nav className="px-3 flex flex-col gap-1">
|
||||
{items.map(({ to, labelKey, icon: Icon, end, tint }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
@@ -178,31 +181,32 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
onClick={onNav}
|
||||
className={({ isActive }) =>
|
||||
[
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-xl transition-colors duration-150',
|
||||
'group relative flex items-center gap-3 px-3 py-2 rounded-lg transition-colors duration-150',
|
||||
isActive
|
||||
? 'bg-text/[0.06] dark:bg-white/[0.08]'
|
||||
: 'hover:bg-text/[0.04] dark:hover:bg-white/[0.04]'
|
||||
? 'bg-white/10 text-sidebar-text'
|
||||
: 'text-sidebar-muted hover:bg-white/[0.06] hover:text-sidebar-text'
|
||||
].join(' ')
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<span
|
||||
className={[
|
||||
'absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full',
|
||||
isActive ? 'bg-accent' : 'bg-transparent'
|
||||
].join(' ')}
|
||||
/>
|
||||
<div
|
||||
className={[
|
||||
'w-8 h-8 rounded-[9px] grid place-items-center text-white shrink-0',
|
||||
tint ?? 'bg-text/70'
|
||||
'w-8 h-8 rounded-md grid place-items-center shrink-0',
|
||||
isActive
|
||||
? `${tint ?? 'bg-accent'} text-white`
|
||||
: 'bg-white/[0.06] text-sidebar-muted group-hover:text-sidebar-text'
|
||||
].join(' ')}
|
||||
>
|
||||
<Icon size={17} strokeWidth={2.2} />
|
||||
</div>
|
||||
<span
|
||||
className={[
|
||||
'text-[15px] truncate',
|
||||
isActive
|
||||
? 'text-text font-semibold'
|
||||
: 'text-text/85 font-medium'
|
||||
].join(' ')}
|
||||
>
|
||||
<span className="text-[14px] truncate font-semibold">
|
||||
{t(labelKey)}
|
||||
</span>
|
||||
</>
|
||||
@@ -211,13 +215,26 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto px-5 pb-5">
|
||||
<div className="flex items-center gap-2 text-[11px] text-text/45">
|
||||
<span className="relative flex h-1.5 w-1.5">
|
||||
<div className="mt-auto px-4 pb-4">
|
||||
<div className="rounded-lg bg-white/[0.06] px-3 py-2.5">
|
||||
<div className="flex items-center gap-2 text-[12px] text-sidebar-muted">
|
||||
<span className="relative flex h-2 w-2">
|
||||
{running && (
|
||||
<span className="absolute inline-flex h-full w-full rounded-full bg-success opacity-60 animate-ping" />
|
||||
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-success" />
|
||||
)}
|
||||
<span
|
||||
className={[
|
||||
'relative inline-flex rounded-full h-2 w-2',
|
||||
running ? 'bg-success' : 'bg-warning'
|
||||
].join(' ')}
|
||||
/>
|
||||
</span>
|
||||
{t('sidebar.status_tracking')}
|
||||
<span className="font-semibold">
|
||||
{running
|
||||
? t('sidebar.status_tracking')
|
||||
: t('sidebar.status_paused')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -32,13 +32,13 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
onDoubleClick={onDoubleClick}
|
||||
className="titlebar-drag relative h-10 px-2 sm:px-3 flex items-center justify-between vibrancy hairline-b"
|
||||
className="titlebar-drag relative h-9 px-2 sm:px-3 flex items-center justify-between bg-sidebar text-sidebar-text hairline-b"
|
||||
>
|
||||
<div className="flex items-center gap-1 min-w-0 flex-1 basis-0">
|
||||
{onMenuClick && (
|
||||
<button
|
||||
onClick={onMenuClick}
|
||||
className="titlebar-nodrag md:hidden w-8 h-7 grid place-items-center rounded-md hover:bg-text/[0.08] text-text/65 hover:text-text transition-colors"
|
||||
className="titlebar-nodrag md:hidden w-8 h-7 grid place-items-center rounded-md hover:bg-white/10 text-sidebar-muted hover:text-sidebar-text transition-colors"
|
||||
aria-label={t('titlebar.menu_aria')}
|
||||
>
|
||||
<Menu size={15} strokeWidth={2} />
|
||||
@@ -46,7 +46,7 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-[12px] font-medium text-text/55 truncate px-2">
|
||||
<div className="text-[12px] font-semibold text-sidebar-muted truncate px-2">
|
||||
{effectiveTitle}
|
||||
</div>
|
||||
|
||||
@@ -63,9 +63,7 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
|
||||
<WinBtn
|
||||
onClick={() => window.api.toggleMaximizeMain()}
|
||||
label={
|
||||
maximized
|
||||
? t('titlebar.restore_aria')
|
||||
: t('titlebar.maximize_aria')
|
||||
maximized ? t('titlebar.restore_aria') : t('titlebar.maximize_aria')
|
||||
}
|
||||
>
|
||||
{maximized ? (
|
||||
@@ -102,10 +100,10 @@ function WinBtn({
|
||||
onClick={onClick}
|
||||
aria-label={label}
|
||||
className={[
|
||||
'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-text/55',
|
||||
'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-sidebar-muted',
|
||||
danger
|
||||
? 'hover:bg-destructive hover:text-white'
|
||||
: 'hover:bg-text/[0.08] hover:text-text'
|
||||
: 'hover:bg-white/10 hover:text-sidebar-text'
|
||||
].join(' ')}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -25,11 +25,7 @@ const TAG_META = {
|
||||
* (a) автоматически после апдейта (когда `lastSeenVersion` != `currentVersion`)
|
||||
* и (b) вручную из Settings.
|
||||
*/
|
||||
export function WhatsNewModal({
|
||||
open,
|
||||
versions,
|
||||
onClose
|
||||
}: Props): JSX.Element {
|
||||
export function WhatsNewModal({ open, versions, onClose }: Props): JSX.Element {
|
||||
const { t, lang } = useT()
|
||||
return (
|
||||
<Modal
|
||||
@@ -68,7 +64,7 @@ function VersionSection({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-[12px] uppercase tracking-wider text-text/55 font-bold mb-3 font-mono-num">
|
||||
<div className="text-[12px] text-text/55 font-bold mb-3 font-mono-num">
|
||||
v{version}
|
||||
</div>
|
||||
<div className="space-y-2.5">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ButtonHTMLAttributes, forwardRef } from 'react'
|
||||
|
||||
/**
|
||||
* iOS-style button. Three primary flavours mirror iOS's filled / tinted / plain.
|
||||
* Press feedback is a subtle scale, mirroring UIKit's button highlight.
|
||||
* Desktop button. Three primary flavours cover filled, bordered, and plain actions.
|
||||
* Press feedback stays subtle so dense tool surfaces do not jump around.
|
||||
*/
|
||||
type Variant = 'filled' | 'tinted' | 'plain' | 'destructive' | 'success'
|
||||
type Size = 'sm' | 'md' | 'lg'
|
||||
@@ -24,19 +24,21 @@ const legacyMap: Record<LegacyVariant, Variant> = {
|
||||
}
|
||||
|
||||
const variantClasses: Record<Variant, string> = {
|
||||
filled: 'bg-accent text-white hover:brightness-105 active:brightness-95',
|
||||
filled:
|
||||
'bg-accent text-white hover:bg-accent/90 active:bg-accent/85 shadow-[0_1px_0_rgb(255_255_255_/_0.18)_inset]',
|
||||
tinted:
|
||||
'bg-accent/12 text-accent hover:bg-accent/18 active:bg-accent/22 dark:bg-accent/20 dark:hover:bg-accent/25',
|
||||
plain: 'text-accent hover:bg-accent/10 active:bg-accent/15',
|
||||
'bg-surface border border-hairline/45 text-text hover:border-accent/45 hover:text-accent active:bg-surface-2',
|
||||
plain:
|
||||
'text-text/70 hover:bg-surface-2 hover:text-text active:bg-hairline/20',
|
||||
destructive:
|
||||
'bg-destructive/12 text-destructive hover:bg-destructive/18 active:bg-destructive/22 dark:bg-destructive/20',
|
||||
success: 'bg-success text-white hover:brightness-105 active:brightness-95'
|
||||
'bg-destructive/10 border border-destructive/20 text-destructive hover:bg-destructive/14 active:bg-destructive/18',
|
||||
success: 'bg-success text-white hover:bg-success/90 active:bg-success/80'
|
||||
}
|
||||
|
||||
const sizeClasses: Record<Size, string> = {
|
||||
sm: 'h-8 px-3.5 text-[13px] rounded-xl',
|
||||
md: 'h-10 px-4 text-[14px] rounded-2xl',
|
||||
lg: 'h-12 px-6 text-[16px] rounded-2xl'
|
||||
sm: 'h-8 px-3 text-[13px] rounded-lg',
|
||||
md: 'h-9 px-3.5 text-[14px] rounded-lg',
|
||||
lg: 'h-10 px-4 text-[15px] rounded-lg'
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
|
||||
@@ -49,9 +51,9 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
|
||||
<button
|
||||
ref={ref}
|
||||
className={[
|
||||
'inline-flex items-center justify-center gap-1.5 font-semibold transition-all duration-150 ease-out',
|
||||
'inline-flex items-center justify-center gap-1.5 font-semibold transition-colors duration-150 ease-out',
|
||||
'disabled:opacity-40 disabled:cursor-not-allowed',
|
||||
'active:scale-[0.97]',
|
||||
'active:translate-y-px',
|
||||
variantClasses[v],
|
||||
sizeClasses[size],
|
||||
className
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
/**
|
||||
* iOS grouped-list card. Wraps rows; first/last row hairline rules handled
|
||||
* by `Row` itself (only top/middle hairline shown).
|
||||
*/
|
||||
export function Card({
|
||||
children,
|
||||
className = ''
|
||||
@@ -14,9 +10,7 @@ export function Card({
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'bg-surface rounded-2xl overflow-hidden',
|
||||
'shadow-[0_0.5px_0_rgb(0_0_0_/_0.04),_0_1px_2px_rgb(0_0_0_/_0.04)]',
|
||||
'dark:shadow-none dark:ring-0.5 dark:ring-hairline/30',
|
||||
'bg-surface rounded-xl overflow-hidden border border-hairline/35 shadow-card',
|
||||
className
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -25,10 +19,6 @@ export function Card({
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Section heading above a Card group — iOS Settings style: tiny uppercase
|
||||
* label, generous spacing.
|
||||
*/
|
||||
export function SectionHeader({
|
||||
title,
|
||||
hint,
|
||||
@@ -39,13 +29,11 @@ export function SectionHeader({
|
||||
action?: ReactNode
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="flex items-end justify-between px-4 mb-2.5">
|
||||
<div className="flex items-end justify-between mb-2.5">
|
||||
<div>
|
||||
<div className="text-[13px] font-semibold uppercase tracking-[0.06em] text-text/60">
|
||||
{title}
|
||||
</div>
|
||||
<div className="text-[13px] font-bold text-text/70">{title}</div>
|
||||
{hint && (
|
||||
<div className="text-[13px] text-text/55 mt-0.5 font-medium">
|
||||
<div className="text-[12px] text-text/55 mt-0.5 font-medium">
|
||||
{hint}
|
||||
</div>
|
||||
)}
|
||||
@@ -55,10 +43,6 @@ export function SectionHeader({
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A single row inside Card — left icon (optional), title + subtitle, right
|
||||
* accessory (switch / chevron / button). Adds bottom hairline unless `last`.
|
||||
*/
|
||||
export function Row({
|
||||
children,
|
||||
className = '',
|
||||
@@ -75,9 +59,9 @@ export function Row({
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={[
|
||||
'flex items-center gap-3 px-4 py-3 relative',
|
||||
'flex items-center gap-3 px-4 py-3 relative min-h-[58px]',
|
||||
interactive
|
||||
? 'cursor-pointer active:bg-surface-2 dark:active:bg-white/5 transition-colors'
|
||||
? 'cursor-pointer hover:bg-surface-2/65 active:bg-surface-2 transition-colors'
|
||||
: '',
|
||||
!last ? 'hairline-b' : '',
|
||||
className
|
||||
|
||||
@@ -18,10 +18,10 @@ type Props = {
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS-style confirm-диалог. Заменяет `window.confirm()` — нативный prompt
|
||||
* выглядит инородно в дизайне приложения, без вибрации accent-цвета и без
|
||||
* focus-trap'a. Использует наш Modal под капотом, поэтому получаем
|
||||
* focus-trap и Esc-to-cancel бесплатно.
|
||||
* Desktop confirm-диалог. Заменяет `window.confirm()` — нативный prompt
|
||||
* выглядит инородно в дизайне приложения и не поддерживает focus-trap.
|
||||
* Использует наш Modal под капотом, поэтому получаем focus-trap и
|
||||
* Esc-to-cancel бесплатно.
|
||||
*/
|
||||
export function ConfirmModal({
|
||||
open,
|
||||
|
||||
@@ -27,17 +27,6 @@ function getFocusable(root: HTMLElement): HTMLElement[] {
|
||||
).filter((el) => el.offsetParent !== null || el === document.activeElement)
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS-style centred sheet. Spring-snap on enter, soft fade-out.
|
||||
*
|
||||
* Accessibility:
|
||||
* - role="dialog" + aria-modal="true" + aria-labelledby on the title <h2>
|
||||
* - Focus is trapped inside the dialog while open; Tab/Shift-Tab cycle
|
||||
* through focusable children and never escape to the underlying page.
|
||||
* - On open the first focusable element is focused.
|
||||
* - On close, focus returns to whatever was focused when the modal opened.
|
||||
* - Esc closes (parent handles confirm-on-dirty if it wants).
|
||||
*/
|
||||
export function Modal({
|
||||
open,
|
||||
onClose,
|
||||
@@ -119,7 +108,7 @@ export function Modal({
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40 backdrop-blur-md"
|
||||
className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -132,39 +121,36 @@ export function Modal({
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
className={[
|
||||
'relative w-full bg-surface rounded-3xl shadow-sheet flex flex-col overflow-hidden',
|
||||
'relative w-full bg-surface rounded-xl shadow-sheet flex flex-col overflow-hidden border border-hairline/45',
|
||||
sizeClass[size]
|
||||
].join(' ')}
|
||||
initial={{ scale: 0.94, y: 24, opacity: 0 }}
|
||||
initial={{ scale: 0.98, y: 10, opacity: 0 }}
|
||||
animate={{ scale: 1, y: 0, opacity: 1 }}
|
||||
exit={{ scale: 0.96, y: 12, opacity: 0 }}
|
||||
exit={{ scale: 0.98, y: 6, opacity: 0 }}
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 32 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header — iOS large modal title */}
|
||||
<div className="flex items-center justify-between px-5 pt-5 pb-3">
|
||||
<div className="flex items-center justify-between px-5 py-3 hairline-b bg-surface-elevated">
|
||||
<h2
|
||||
id={titleId}
|
||||
className="font-display text-[20px] font-semibold tracking-tight"
|
||||
className="font-display text-[18px] font-semibold"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
data-modal-close=""
|
||||
className="w-7 h-7 grid place-items-center rounded-full bg-surface-2 hover:bg-hairline/25 text-text/60 hover:text-text transition-colors active:scale-90"
|
||||
className="w-7 h-7 grid place-items-center rounded-md bg-surface-2 hover:bg-hairline/25 text-text/60 hover:text-text transition-colors active:scale-95"
|
||||
aria-label={t('btn.close')}
|
||||
>
|
||||
<X size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-5 pb-5 overflow-y-auto max-h-[70vh]">
|
||||
{children}
|
||||
</div>
|
||||
<div className="p-5 overflow-y-auto max-h-[72vh]">{children}</div>
|
||||
|
||||
{footer && (
|
||||
<div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface">
|
||||
<div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface-elevated">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -7,9 +7,6 @@ type Props = {
|
||||
'aria-label'?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS UISwitch — 51×31 spec, green when on, smooth spring knob.
|
||||
*/
|
||||
export function Switch({
|
||||
checked,
|
||||
onChange,
|
||||
@@ -25,17 +22,18 @@ export function Switch({
|
||||
onClick={() => !disabled && onChange(!checked)}
|
||||
disabled={disabled}
|
||||
className={[
|
||||
'relative inline-flex h-[31px] w-[51px] shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-out',
|
||||
checked ? 'bg-success' : 'bg-hairline/25 dark:bg-hairline/50',
|
||||
'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors duration-150 ease-out border',
|
||||
checked
|
||||
? 'bg-success border-success'
|
||||
: 'bg-surface-2 border-hairline/55',
|
||||
disabled ? 'opacity-40 cursor-not-allowed' : ''
|
||||
].join(' ')}
|
||||
style={{ padding: 2 }}
|
||||
>
|
||||
<motion.span
|
||||
className="block h-[27px] w-[27px] rounded-full bg-white"
|
||||
className="block h-[18px] w-[18px] rounded-full bg-white"
|
||||
style={{
|
||||
boxShadow:
|
||||
'0 3px 8px rgba(0,0,0,0.15), 0 3px 1px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04)'
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08)'
|
||||
}}
|
||||
animate={{ x: checked ? 20 : 0 }}
|
||||
transition={{ type: 'spring', stiffness: 700, damping: 35 }}
|
||||
|
||||
@@ -12,7 +12,7 @@ export type Dict = Record<string, string>
|
||||
|
||||
export const ru: Dict = {
|
||||
// Sidebar / nav
|
||||
'nav.today': 'Сегодня',
|
||||
'nav.today': 'Обзор',
|
||||
'nav.exercises': 'Упражнения',
|
||||
'nav.meals': 'Питание',
|
||||
'nav.games': 'Игры',
|
||||
@@ -20,6 +20,7 @@ export const ru: Dict = {
|
||||
'nav.settings': 'Настройки',
|
||||
'sidebar.slogan': 'Лёгкий перерыв без потери фокуса',
|
||||
'sidebar.status_tracking': 'Активность отслеживается',
|
||||
'sidebar.status_paused': 'Напоминания на паузе',
|
||||
'titlebar.menu_aria': 'Меню',
|
||||
'titlebar.minimize_aria': 'Свернуть',
|
||||
'titlebar.maximize_aria': 'Развернуть',
|
||||
@@ -60,11 +61,34 @@ export const ru: Dict = {
|
||||
'btn.retry': 'Повторить',
|
||||
|
||||
// Dashboard
|
||||
'dashboard.kicker': 'Тренировка дня',
|
||||
'dashboard.title': 'Сегодня',
|
||||
'dashboard.kicker': 'План перерывов',
|
||||
'dashboard.title': 'Что важно сейчас',
|
||||
'dashboard.header.date': 'План на {date}',
|
||||
'dashboard.header.status.paused': 'пауза',
|
||||
'dashboard.header.status.meeting': 'встреча',
|
||||
'dashboard.header.status.due': 'ждёт действия',
|
||||
'dashboard.header.status.running': 'в работе',
|
||||
'dashboard.header.status.clear': 'спокойно',
|
||||
'dashboard.header.title.paused': 'Напоминания на паузе',
|
||||
'dashboard.header.subtitle.paused':
|
||||
'Запусти их снова, когда будешь готов вернуться к коротким перерывам.',
|
||||
'dashboard.header.title.meeting': 'Встреча активна',
|
||||
'dashboard.header.subtitle.meeting':
|
||||
'Пауза на встречах включена. Напоминания продолжатся, когда звонок закончится.',
|
||||
'dashboard.header.title.due': 'Пора сделать: {name}',
|
||||
'dashboard.header.subtitle.due':
|
||||
'{kind} · {meta}. Это ближайшее действие по плану.',
|
||||
'dashboard.header.title.next': 'Следующее: {name}',
|
||||
'dashboard.header.subtitle.next': '{kind} · {meta} · {time}',
|
||||
'dashboard.header.title.empty': 'Настрой первый перерыв',
|
||||
'dashboard.header.subtitle.empty':
|
||||
'Добавь упражнение или питание, чтобы приложение собрало понятный план дня.',
|
||||
'dashboard.header.title.clear': 'План под контролем',
|
||||
'dashboard.header.subtitle.clear':
|
||||
'Срочных действий нет. Ниже видно цели, ритм недели и игровые долги.',
|
||||
'dashboard.stat.active': 'Активных',
|
||||
'dashboard.stat.active.of': 'из {total}',
|
||||
'dashboard.stat.today_done': 'Сегодня',
|
||||
'dashboard.stat.today_done': 'Сделано',
|
||||
'dashboard.stat.today_done.subtitle': 'повторов за день',
|
||||
'dashboard.stat.streak': 'Стрик',
|
||||
'dashboard.stat.streak.subtitle': '{n} дн. подряд',
|
||||
@@ -75,19 +99,19 @@ export const ru: Dict = {
|
||||
'dashboard.stat.tracking': 'Трекинг матчей',
|
||||
'dashboard.stat.tracking.on': 'On',
|
||||
'dashboard.stat.tracking.off': 'Off',
|
||||
'dashboard.stat.tracking.pending': 'Setup',
|
||||
'dashboard.stat.tracking.pending': 'Настройка',
|
||||
'dashboard.stat.tracking.subtitle_on': 'в реальном времени',
|
||||
'dashboard.stat.tracking.subtitle_off': 'выключен',
|
||||
'dashboard.stat.tracking.subtitle_pending':
|
||||
'нужно закрыть Steam и снова открыть',
|
||||
'dashboard.paused.title': 'Напоминания на паузе',
|
||||
'dashboard.paused.hint': 'Возобнови, чтобы продолжить отсчёт',
|
||||
'dashboard.meeting.title': 'Не дёргаем — ты на встрече',
|
||||
'dashboard.meeting.title': 'Встреча активна',
|
||||
'dashboard.meeting.hint':
|
||||
'Запущен Zoom / Teams / Discord / Webex / Slack-huddle. Напоминания возобновятся когда закроешь.',
|
||||
'dashboard.plan.title': 'План дня',
|
||||
'dashboard.plan.subtitle': 'Следующее действие и дневные цели',
|
||||
'dashboard.plan.due_count': '{n} ждёт',
|
||||
'Запущен Zoom / Teams / Webex / Slack-huddle. Напоминания возобновятся, когда встреча закончится.',
|
||||
'dashboard.plan.title': 'Ближайший шаг',
|
||||
'dashboard.plan.subtitle': 'Что сделать сейчас, дневные цели и питание',
|
||||
'dashboard.plan.due_count': '{n} к выполнению',
|
||||
'dashboard.plan.all_caught_up': 'всё спокойно',
|
||||
'dashboard.plan.next_action': 'Следующее действие',
|
||||
'dashboard.plan.kind.exercise': 'упражнение',
|
||||
@@ -102,7 +126,7 @@ export const ru: Dict = {
|
||||
'dashboard.plan.clear.hint': 'Можно отдохнуть или добавить новое действие',
|
||||
'dashboard.plan.goals': 'Дневные цели',
|
||||
'dashboard.plan.goals.progress': '{done}/{goal}',
|
||||
'dashboard.plan.goals.remaining': 'осталось {n}',
|
||||
'dashboard.plan.goals.remaining': 'осталось {n} раз',
|
||||
'dashboard.plan.goals.hint': 'прогресс по упражнениям с дневной целью',
|
||||
'dashboard.plan.goals.empty':
|
||||
'Добавь дневную цель в упражнении, чтобы видеть прогресс',
|
||||
@@ -120,6 +144,7 @@ export const ru: Dict = {
|
||||
'dashboard.plan.recovery.steady.none': 'держим спокойный темп',
|
||||
'dashboard.plan.up_next': 'Дальше',
|
||||
'dashboard.plan.item.remaining': 'осталось {n}',
|
||||
'dashboard.plan.item.remaining_reps': 'осталось {n} раз',
|
||||
'dashboard.plan.item.reps': '{n} раз',
|
||||
'dashboard.empty.title': 'Программа пуста',
|
||||
'dashboard.empty.hint': 'Добавь первое упражнение, чтобы начать',
|
||||
@@ -145,7 +170,7 @@ export const ru: Dict = {
|
||||
'momentum.quest.week_reps.desc': 'набери тысячу повторов за неделю',
|
||||
'momentum.quest.match_debt.title': 'Закрыть катки',
|
||||
'momentum.quest.match_debt.desc': 'закрой 3 игровых долга за неделю',
|
||||
'momentum.quest.today_anchor.title': 'Сегодня не ноль',
|
||||
'momentum.quest.today_anchor.title': 'День не ноль',
|
||||
'momentum.quest.today_anchor.desc': 'сделай хотя бы одно действие сегодня',
|
||||
'momentum.game.kicker': 'После катки',
|
||||
'momentum.game.title': 'Игровой долг',
|
||||
@@ -291,11 +316,29 @@ export const ru: Dict = {
|
||||
'settings.insight.theme.hint': 'Визуальный режим интерфейса',
|
||||
'settings.insight.language': 'Язык',
|
||||
'settings.insight.language.hint': 'Применяется без перезапуска',
|
||||
'settings.status.kicker': 'Состояние',
|
||||
'settings.status.title.on': 'Напоминания работают',
|
||||
'settings.status.title.off': 'Напоминания остановлены',
|
||||
'settings.status.hint.paused':
|
||||
'Перерывы не будут появляться, пока ты снова не запустишь напоминания.',
|
||||
'settings.status.hint.quiet':
|
||||
'Напоминания работают, но тихие часы {from}-{to} могут временно их скрывать.',
|
||||
'settings.status.hint.autostart':
|
||||
'После перезагрузки приложение не запустится само.',
|
||||
'settings.status.hint.ready':
|
||||
'Приложение запустится с Windows и будет мягко вести расписание перерывов.',
|
||||
'settings.status.reminders': 'Напоминания',
|
||||
'settings.status.quiet': 'Тихие часы',
|
||||
'settings.status.meetings': 'Встречи',
|
||||
'settings.status.autostart': 'Windows',
|
||||
'settings.status.on': 'Вкл',
|
||||
'settings.status.off': 'Выкл',
|
||||
'settings.section.reminders': 'Напоминания',
|
||||
'settings.section.quiet': 'Тихие часы',
|
||||
'settings.section.window': 'Окно и трей',
|
||||
'settings.section.appearance': 'Внешний вид',
|
||||
'settings.section.language': 'Язык',
|
||||
'settings.section.interface': 'Интерфейс',
|
||||
'settings.section.updates': 'Обновления',
|
||||
'settings.section.data': 'Данные',
|
||||
'settings.section.diagnostics': 'Диагностика',
|
||||
@@ -341,6 +384,8 @@ export const ru: Dict = {
|
||||
'settings.notification_mode.modal': 'Окно поверх всех',
|
||||
'settings.notification_mode.toast': 'Системное уведомление',
|
||||
'settings.notification_mode.both': 'Окно и уведомление',
|
||||
'settings.global.label': 'Напоминания включены',
|
||||
'settings.global.hint': 'Главный режим работы приложения',
|
||||
'settings.sound.label': 'Звук уведомления',
|
||||
'settings.sound.hint': 'Короткий сигнал при срабатывании',
|
||||
'settings.voice.label': 'Голосовая подсказка',
|
||||
@@ -348,7 +393,7 @@ export const ru: Dict = {
|
||||
'Диктор произносит название упражнения и количество — полезно когда фокус на коде.',
|
||||
'settings.meeting_pause.label': 'Пауза на встречах',
|
||||
'settings.meeting_pause.hint':
|
||||
'Не дёргать, если запущен Zoom / Teams / Discord / Webex / Slack-huddle.',
|
||||
'Ставить напоминания на паузу, если запущен Zoom / Teams / Webex / Slack-huddle.',
|
||||
'settings.snooze.label': '«Отложить» на',
|
||||
'settings.snooze.hint': 'Сколько минут добавлять при отложении',
|
||||
'settings.snooze.1': '1 минута',
|
||||
@@ -501,7 +546,7 @@ export const ru: Dict = {
|
||||
|
||||
export const en: Dict = {
|
||||
// Sidebar / nav
|
||||
'nav.today': 'Today',
|
||||
'nav.today': 'Overview',
|
||||
'nav.exercises': 'Exercises',
|
||||
'nav.meals': 'Meals',
|
||||
'nav.games': 'Games',
|
||||
@@ -509,6 +554,7 @@ export const en: Dict = {
|
||||
'nav.settings': 'Settings',
|
||||
'sidebar.slogan': 'A small break without losing focus',
|
||||
'sidebar.status_tracking': 'Activity tracking is on',
|
||||
'sidebar.status_paused': 'Reminders paused',
|
||||
'titlebar.menu_aria': 'Menu',
|
||||
'titlebar.minimize_aria': 'Minimize',
|
||||
'titlebar.maximize_aria': 'Maximize',
|
||||
@@ -549,11 +595,34 @@ export const en: Dict = {
|
||||
'btn.retry': 'Retry',
|
||||
|
||||
// Dashboard
|
||||
'dashboard.kicker': 'Daily training',
|
||||
'dashboard.title': 'Today',
|
||||
'dashboard.kicker': 'Break plan',
|
||||
'dashboard.title': 'What matters now',
|
||||
'dashboard.header.date': 'Plan for {date}',
|
||||
'dashboard.header.status.paused': 'paused',
|
||||
'dashboard.header.status.meeting': 'meeting',
|
||||
'dashboard.header.status.due': 'action due',
|
||||
'dashboard.header.status.running': 'running',
|
||||
'dashboard.header.status.clear': 'clear',
|
||||
'dashboard.header.title.paused': 'Reminders are paused',
|
||||
'dashboard.header.subtitle.paused':
|
||||
'Start them again when you are ready to return to short breaks.',
|
||||
'dashboard.header.title.meeting': 'Meeting active',
|
||||
'dashboard.header.subtitle.meeting':
|
||||
'Meeting pause is enabled. Reminders will continue when the call ends.',
|
||||
'dashboard.header.title.due': 'Time to do: {name}',
|
||||
'dashboard.header.subtitle.due':
|
||||
'{kind} · {meta}. This is the closest action in the plan.',
|
||||
'dashboard.header.title.next': 'Next: {name}',
|
||||
'dashboard.header.subtitle.next': '{kind} · {meta} · {time}',
|
||||
'dashboard.header.title.empty': 'Set up your first break',
|
||||
'dashboard.header.subtitle.empty':
|
||||
'Add an exercise or meal so the app can build a clear day plan.',
|
||||
'dashboard.header.title.clear': 'Plan under control',
|
||||
'dashboard.header.subtitle.clear':
|
||||
'No urgent actions. Goals, weekly rhythm and game debts are below.',
|
||||
'dashboard.stat.active': 'Active',
|
||||
'dashboard.stat.active.of': 'of {total}',
|
||||
'dashboard.stat.today_done': 'Today',
|
||||
'dashboard.stat.today_done': 'Done',
|
||||
'dashboard.stat.today_done.subtitle': 'reps logged',
|
||||
'dashboard.stat.streak': 'Streak',
|
||||
'dashboard.stat.streak.subtitle': '{n} days in a row',
|
||||
@@ -569,12 +638,12 @@ export const en: Dict = {
|
||||
'dashboard.stat.tracking.subtitle_off': 'disabled',
|
||||
'dashboard.stat.tracking.subtitle_pending': 'close & reopen Steam',
|
||||
'dashboard.paused.title': 'Reminders paused',
|
||||
'dashboard.meeting.title': "You're in a meeting — won't interrupt",
|
||||
'dashboard.meeting.title': 'Meeting active',
|
||||
'dashboard.meeting.hint':
|
||||
'Zoom / Teams / Discord / Webex / Slack-huddle is running. Reminders resume when you close it.',
|
||||
'Zoom / Teams / Webex / Slack-huddle is running. Reminders resume when the meeting ends.',
|
||||
'dashboard.paused.hint': 'Resume to continue countdown',
|
||||
'dashboard.plan.title': 'Day plan',
|
||||
'dashboard.plan.subtitle': 'Next action and daily goals',
|
||||
'dashboard.plan.title': 'Closest step',
|
||||
'dashboard.plan.subtitle': 'What to do now, daily goals and meals',
|
||||
'dashboard.plan.due_count': '{n} due',
|
||||
'dashboard.plan.all_caught_up': 'all clear',
|
||||
'dashboard.plan.next_action': 'Next action',
|
||||
@@ -608,6 +677,7 @@ export const en: Dict = {
|
||||
'dashboard.plan.recovery.steady.none': 'keep a calm pace',
|
||||
'dashboard.plan.up_next': 'Up next',
|
||||
'dashboard.plan.item.remaining': '{n} left',
|
||||
'dashboard.plan.item.remaining_reps': '{n} reps left',
|
||||
'dashboard.plan.item.reps': '{n} reps',
|
||||
'dashboard.empty.title': 'Program is empty',
|
||||
'dashboard.empty.hint': 'Add your first exercise to start',
|
||||
@@ -633,7 +703,7 @@ export const en: Dict = {
|
||||
'momentum.quest.week_reps.desc': 'reach one thousand reps this week',
|
||||
'momentum.quest.match_debt.title': 'Close matches',
|
||||
'momentum.quest.match_debt.desc': 'close 3 game debts this week',
|
||||
'momentum.quest.today_anchor.title': 'Today is not zero',
|
||||
'momentum.quest.today_anchor.title': 'Non-zero day',
|
||||
'momentum.quest.today_anchor.desc': 'complete at least one action today',
|
||||
'momentum.game.kicker': 'After match',
|
||||
'momentum.game.title': 'Game debt',
|
||||
@@ -779,11 +849,29 @@ export const en: Dict = {
|
||||
'settings.insight.theme.hint': 'Visual interface mode',
|
||||
'settings.insight.language': 'Language',
|
||||
'settings.insight.language.hint': 'Applied without restart',
|
||||
'settings.status.kicker': 'Status',
|
||||
'settings.status.title.on': 'Reminders are running',
|
||||
'settings.status.title.off': 'Reminders are paused',
|
||||
'settings.status.hint.paused':
|
||||
'Breaks will not appear until reminders are started again.',
|
||||
'settings.status.hint.quiet':
|
||||
'Reminders are running, but quiet hours {from}-{to} can hide them temporarily.',
|
||||
'settings.status.hint.autostart':
|
||||
'The app will not start automatically after reboot.',
|
||||
'settings.status.hint.ready':
|
||||
'The app will start with Windows and keep the break schedule moving.',
|
||||
'settings.status.reminders': 'Reminders',
|
||||
'settings.status.quiet': 'Quiet hours',
|
||||
'settings.status.meetings': 'Meetings',
|
||||
'settings.status.autostart': 'Windows',
|
||||
'settings.status.on': 'On',
|
||||
'settings.status.off': 'Off',
|
||||
'settings.section.reminders': 'Reminders',
|
||||
'settings.section.quiet': 'Quiet hours',
|
||||
'settings.section.window': 'Window & tray',
|
||||
'settings.section.appearance': 'Appearance',
|
||||
'settings.section.language': 'Language',
|
||||
'settings.section.interface': 'Interface',
|
||||
'settings.section.updates': 'Updates',
|
||||
'settings.section.data': 'Data',
|
||||
'settings.section.diagnostics': 'Diagnostics',
|
||||
@@ -829,6 +917,8 @@ export const en: Dict = {
|
||||
'settings.notification_mode.modal': 'Window on top',
|
||||
'settings.notification_mode.toast': 'System notification',
|
||||
'settings.notification_mode.both': 'Window and notification',
|
||||
'settings.global.label': 'Reminders enabled',
|
||||
'settings.global.hint': 'Main operating mode for the app',
|
||||
'settings.sound.label': 'Notification sound',
|
||||
'settings.sound.hint': 'Short beep on trigger',
|
||||
'settings.voice.label': 'Voice prompt',
|
||||
@@ -836,7 +926,7 @@ export const en: Dict = {
|
||||
'Speaks the exercise name and count — useful when your eyes are on the code.',
|
||||
'settings.meeting_pause.label': 'Pause during meetings',
|
||||
'settings.meeting_pause.hint':
|
||||
'Skip reminders when Zoom / Teams / Discord / Webex / Slack-huddle is running.',
|
||||
'Pause reminders when Zoom / Teams / Webex / Slack-huddle is running.',
|
||||
'settings.snooze.label': '“Snooze” for',
|
||||
'settings.snooze.hint': 'How many minutes to postpone',
|
||||
'settings.snooze.1': '1 minute',
|
||||
|
||||
597
src/renderer/src/lib/dev-api.ts
Normal file
597
src/renderer/src/lib/dev-api.ts
Normal file
@@ -0,0 +1,597 @@
|
||||
import {
|
||||
DEFAULT_SETTINGS,
|
||||
nextMealOccurrence,
|
||||
type AppState,
|
||||
type Challenge,
|
||||
type DiagnosticsInfo,
|
||||
type Exercise,
|
||||
type GameId,
|
||||
type GameStatus,
|
||||
type HistoryEntry,
|
||||
type Meal,
|
||||
type RendererErrorReport,
|
||||
type Settings,
|
||||
type Tick,
|
||||
type UpdaterStatus
|
||||
} from '@shared/types'
|
||||
|
||||
type Api = Window['api']
|
||||
type Handler<T> = (payload: T) => void
|
||||
|
||||
const now = Date.now()
|
||||
|
||||
let state: AppState = {
|
||||
exercises: [
|
||||
{
|
||||
id: 'dev-ex-squats',
|
||||
name: 'Приседания',
|
||||
reps: 10,
|
||||
icon: 'Activity',
|
||||
intervalMinutes: 30,
|
||||
enabled: true,
|
||||
nextFireAt: now - 90_000,
|
||||
lastDoneAt: now - 2 * 60 * 60 * 1000,
|
||||
category: 'exercise',
|
||||
dailyGoal: 40,
|
||||
adaptive: true
|
||||
},
|
||||
{
|
||||
id: 'dev-ex-eyes',
|
||||
name: 'Отдых глазам 20-20-20',
|
||||
reps: 1,
|
||||
icon: 'Eye',
|
||||
intervalMinutes: 20,
|
||||
enabled: true,
|
||||
nextFireAt: now + 9 * 60_000,
|
||||
category: 'eyes'
|
||||
},
|
||||
{
|
||||
id: 'dev-ex-water',
|
||||
name: 'Стакан воды',
|
||||
reps: 1,
|
||||
icon: 'GlassWater',
|
||||
intervalMinutes: 60,
|
||||
enabled: true,
|
||||
nextFireAt: now + 26 * 60_000,
|
||||
category: 'hydration',
|
||||
dailyGoal: 6
|
||||
},
|
||||
{
|
||||
id: 'dev-ex-posture',
|
||||
name: 'Проверь осанку',
|
||||
reps: 1,
|
||||
icon: 'PersonStanding',
|
||||
intervalMinutes: 25,
|
||||
enabled: false,
|
||||
nextFireAt: now + 25 * 60_000,
|
||||
category: 'posture'
|
||||
}
|
||||
],
|
||||
meals: [
|
||||
{
|
||||
id: 'dev-meal-breakfast',
|
||||
name: 'Завтрак',
|
||||
time: '08:00',
|
||||
icon: 'Coffee',
|
||||
enabled: true,
|
||||
days: [],
|
||||
nextFireAt: nextMealOccurrence('08:00', [], now),
|
||||
lastDoneAt: now - 5 * 60 * 60 * 1000
|
||||
},
|
||||
{
|
||||
id: 'dev-meal-lunch',
|
||||
name: 'Обед',
|
||||
time: '13:00',
|
||||
icon: 'UtensilsCrossed',
|
||||
enabled: true,
|
||||
days: [],
|
||||
nextFireAt: nextMealOccurrence('13:00', [], now)
|
||||
},
|
||||
{
|
||||
id: 'dev-meal-dinner',
|
||||
name: 'Ужин',
|
||||
time: '19:00',
|
||||
icon: 'Soup',
|
||||
enabled: false,
|
||||
days: [],
|
||||
nextFireAt: nextMealOccurrence('19:00', [], now)
|
||||
}
|
||||
],
|
||||
settings: {
|
||||
...DEFAULT_SETTINGS,
|
||||
lastSeenVersion: '0.6.5'
|
||||
},
|
||||
challenges: [
|
||||
{
|
||||
id: 'dev-ch-deaths',
|
||||
name: 'За смерти в Dota',
|
||||
gameId: 'dota2',
|
||||
stat: 'deaths',
|
||||
multiplier: 3,
|
||||
exerciseName: 'Приседания',
|
||||
icon: 'Activity',
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
id: 'dev-ch-kills',
|
||||
name: 'За убийства',
|
||||
gameId: 'dota2',
|
||||
stat: 'kills',
|
||||
multiplier: 1,
|
||||
exerciseName: 'Отжимания',
|
||||
icon: 'Dumbbell',
|
||||
enabled: false
|
||||
}
|
||||
],
|
||||
gamesEnabled: { dota2: true }
|
||||
}
|
||||
|
||||
let history: HistoryEntry[] = [
|
||||
{
|
||||
ts: now - 2 * 60 * 60 * 1000,
|
||||
exerciseId: 'dev-ex-squats',
|
||||
action: 'done',
|
||||
reps: 10,
|
||||
name: 'Приседания',
|
||||
source: 'reminder'
|
||||
},
|
||||
{
|
||||
ts: now - 5 * 60 * 60 * 1000,
|
||||
exerciseId: 'meal:dev-meal-breakfast',
|
||||
action: 'done',
|
||||
reps: 1,
|
||||
name: 'Завтрак',
|
||||
source: 'meal'
|
||||
},
|
||||
{
|
||||
ts: now - 26 * 60 * 60 * 1000,
|
||||
exerciseId: 'dev-ex-eyes',
|
||||
action: 'done',
|
||||
reps: 1,
|
||||
name: 'Отдых глазам 20-20-20',
|
||||
source: 'reminder'
|
||||
},
|
||||
{
|
||||
ts: now - 48 * 60 * 60 * 1000,
|
||||
exerciseId: 'dev-ex-squats',
|
||||
action: 'done',
|
||||
reps: 10,
|
||||
name: 'Приседания',
|
||||
source: 'reminder'
|
||||
}
|
||||
]
|
||||
|
||||
let games: GameStatus[] = [
|
||||
{
|
||||
id: 'dota2',
|
||||
name: 'Dota 2',
|
||||
installed: true,
|
||||
installPath:
|
||||
'C:\\Program Files (x86)\\Steam\\steamapps\\common\\dota 2 beta',
|
||||
integrationActive: false,
|
||||
launchOption: '-gamestateintegration',
|
||||
launchOptionStatus: 'queued',
|
||||
steamRunning: true,
|
||||
enabled: true
|
||||
}
|
||||
]
|
||||
|
||||
let updaterStatus: UpdaterStatus = {
|
||||
kind: 'not-available',
|
||||
currentVersion: '0.6.5',
|
||||
lastCheckedAt: now - 12 * 60_000
|
||||
}
|
||||
|
||||
const stateHandlers = new Set<Handler<AppState>>()
|
||||
const tickHandlers = new Set<Handler<Tick[]>>()
|
||||
const historyHandlers = new Set<Handler<void>>()
|
||||
const gamesHandlers = new Set<Handler<GameStatus[]>>()
|
||||
const updaterHandlers = new Set<Handler<UpdaterStatus>>()
|
||||
const themeHandlers = new Set<Handler<'light' | 'dark'>>()
|
||||
const emptyUnsub = (): void => undefined
|
||||
let tickTimer: number | undefined
|
||||
|
||||
function cloneState(): AppState {
|
||||
return structuredClone(state)
|
||||
}
|
||||
|
||||
function emitState(): void {
|
||||
const snapshot = cloneState()
|
||||
stateHandlers.forEach((handler) => handler(snapshot))
|
||||
}
|
||||
|
||||
function emitHistory(): void {
|
||||
historyHandlers.forEach((handler) => handler())
|
||||
}
|
||||
|
||||
function emitGames(): void {
|
||||
const snapshot = structuredClone(games)
|
||||
gamesHandlers.forEach((handler) => handler(snapshot))
|
||||
}
|
||||
|
||||
function emitUpdater(): void {
|
||||
updaterHandlers.forEach((handler) => handler(updaterStatus))
|
||||
}
|
||||
|
||||
function pushHistory(entry: HistoryEntry): void {
|
||||
history = [entry, ...history]
|
||||
emitHistory()
|
||||
}
|
||||
|
||||
function findExercise(id: string): Exercise {
|
||||
const exercise = state.exercises.find((item) => item.id === id)
|
||||
if (!exercise) throw new Error(`Unknown exercise ${id}`)
|
||||
return exercise
|
||||
}
|
||||
|
||||
function findMeal(id: string): Meal {
|
||||
const meal = state.meals.find((item) => item.id === id)
|
||||
if (!meal) throw new Error(`Unknown meal ${id}`)
|
||||
return meal
|
||||
}
|
||||
|
||||
function nextId(prefix: string): string {
|
||||
return `${prefix}-${Math.random().toString(36).slice(2, 9)}`
|
||||
}
|
||||
|
||||
function subscribe<T>(set: Set<Handler<T>>, handler: Handler<T>): () => void {
|
||||
set.add(handler)
|
||||
return () => set.delete(handler)
|
||||
}
|
||||
|
||||
function buildTicks(): Tick[] {
|
||||
return state.exercises.map((exercise) => ({
|
||||
exerciseId: exercise.id,
|
||||
enabled: exercise.enabled,
|
||||
msUntilFire: exercise.nextFireAt - Date.now()
|
||||
}))
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.dispose(() => {
|
||||
if (tickTimer !== undefined) window.clearInterval(tickTimer)
|
||||
})
|
||||
}
|
||||
|
||||
export function installDevApi(): void {
|
||||
if (window.api || !import.meta.env.DEV) return
|
||||
|
||||
const api: Api = {
|
||||
getState: async () => cloneState(),
|
||||
addExercise: async (input) => {
|
||||
const exercise: Exercise = {
|
||||
...input,
|
||||
id: nextId('dev-ex'),
|
||||
nextFireAt: Date.now() + input.intervalMinutes * 60_000
|
||||
}
|
||||
state = { ...state, exercises: [...state.exercises, exercise] }
|
||||
emitState()
|
||||
return structuredClone(exercise)
|
||||
},
|
||||
updateExercise: async (id, patch) => {
|
||||
let updated = findExercise(id)
|
||||
state = {
|
||||
...state,
|
||||
exercises: state.exercises.map((exercise) => {
|
||||
if (exercise.id !== id) return exercise
|
||||
updated = { ...exercise, ...patch, id }
|
||||
return updated
|
||||
})
|
||||
}
|
||||
emitState()
|
||||
return structuredClone(updated)
|
||||
},
|
||||
deleteExercise: async (id) => {
|
||||
const before = state.exercises.length
|
||||
state = {
|
||||
...state,
|
||||
exercises: state.exercises.filter((exercise) => exercise.id !== id)
|
||||
}
|
||||
emitState()
|
||||
return state.exercises.length !== before
|
||||
},
|
||||
toggleExercise: async (id, enabled) => {
|
||||
return api.updateExercise(id, { enabled })
|
||||
},
|
||||
markDone: async (id, actualReps) => {
|
||||
const exercise = findExercise(id)
|
||||
const updated = await api.updateExercise(id, {
|
||||
lastDoneAt: Date.now(),
|
||||
nextFireAt: Date.now() + exercise.intervalMinutes * 60_000
|
||||
})
|
||||
pushHistory({
|
||||
ts: Date.now(),
|
||||
exerciseId: id,
|
||||
action: 'done',
|
||||
actualReps,
|
||||
reps: exercise.reps,
|
||||
name: exercise.name,
|
||||
source: 'reminder'
|
||||
})
|
||||
return updated
|
||||
},
|
||||
snooze: async (id, minutes) => {
|
||||
return api.updateExercise(id, {
|
||||
nextFireAt: Date.now() + minutes * 60_000
|
||||
})
|
||||
},
|
||||
skip: async (id) => {
|
||||
const exercise = findExercise(id)
|
||||
const updated = await api.updateExercise(id, {
|
||||
nextFireAt: Date.now() + exercise.intervalMinutes * 60_000
|
||||
})
|
||||
pushHistory({
|
||||
ts: Date.now(),
|
||||
exerciseId: id,
|
||||
action: 'skip',
|
||||
reps: exercise.reps,
|
||||
name: exercise.name,
|
||||
source: 'reminder'
|
||||
})
|
||||
return updated
|
||||
},
|
||||
addMeal: async (input) => {
|
||||
const meal: Meal = {
|
||||
...input,
|
||||
id: nextId('dev-meal'),
|
||||
nextFireAt: nextMealOccurrence(input.time, input.days, Date.now())
|
||||
}
|
||||
state = { ...state, meals: [...state.meals, meal] }
|
||||
emitState()
|
||||
return structuredClone(meal)
|
||||
},
|
||||
updateMeal: async (id, patch) => {
|
||||
let updated = findMeal(id)
|
||||
state = {
|
||||
...state,
|
||||
meals: state.meals.map((meal) => {
|
||||
if (meal.id !== id) return meal
|
||||
updated = { ...meal, ...patch, id }
|
||||
if (
|
||||
(patch.time !== undefined ||
|
||||
patch.days !== undefined ||
|
||||
patch.enabled !== undefined) &&
|
||||
patch.nextFireAt === undefined
|
||||
) {
|
||||
updated.nextFireAt = nextMealOccurrence(
|
||||
updated.time,
|
||||
updated.days,
|
||||
Date.now()
|
||||
)
|
||||
}
|
||||
return updated
|
||||
})
|
||||
}
|
||||
emitState()
|
||||
return structuredClone(updated)
|
||||
},
|
||||
deleteMeal: async (id) => {
|
||||
const before = state.meals.length
|
||||
state = { ...state, meals: state.meals.filter((meal) => meal.id !== id) }
|
||||
emitState()
|
||||
return state.meals.length !== before
|
||||
},
|
||||
toggleMeal: async (id, enabled) => api.updateMeal(id, { enabled }),
|
||||
markMealDone: async (id) => {
|
||||
const meal = findMeal(id)
|
||||
const updated = await api.updateMeal(id, {
|
||||
lastDoneAt: Date.now(),
|
||||
nextFireAt: nextMealOccurrence(meal.time, meal.days, Date.now())
|
||||
})
|
||||
pushHistory({
|
||||
ts: Date.now(),
|
||||
exerciseId: `meal:${id}`,
|
||||
action: 'done',
|
||||
reps: 1,
|
||||
name: meal.name,
|
||||
source: 'meal'
|
||||
})
|
||||
return updated
|
||||
},
|
||||
updateSettings: async (patch: Partial<Settings>) => {
|
||||
state = { ...state, settings: { ...state.settings, ...patch } }
|
||||
if (patch.theme === 'light' || patch.theme === 'dark') {
|
||||
themeHandlers.forEach((handler) =>
|
||||
handler(patch.theme as 'light' | 'dark')
|
||||
)
|
||||
}
|
||||
emitState()
|
||||
return structuredClone(state.settings)
|
||||
},
|
||||
getAccentColor: async () => '#ff6b35',
|
||||
getOsTheme: async () => 'light',
|
||||
getAppVersion: async () => '0.6.5',
|
||||
getMeetingActive: async () => false,
|
||||
getDiagnostics: async () => diagnostics(),
|
||||
openLogsFolder: async () => ({ ok: true }),
|
||||
copyDiagnostics: async () => diagnostics(),
|
||||
reportRendererError: async (report: RendererErrorReport) => {
|
||||
console.warn('[dev-api] renderer error', report)
|
||||
return true
|
||||
},
|
||||
pauseAll: async () => {
|
||||
await api.updateSettings({ globalEnabled: false })
|
||||
},
|
||||
resumeAll: async () => {
|
||||
await api.updateSettings({ globalEnabled: true })
|
||||
},
|
||||
quit: async () => undefined,
|
||||
reminderClose: async () => undefined,
|
||||
minimizeMain: () => undefined,
|
||||
toggleMaximizeMain: () => undefined,
|
||||
isMaximizedMain: async () => false,
|
||||
closeMain: () => undefined,
|
||||
hideMain: () => undefined,
|
||||
listGames: async () => structuredClone(games),
|
||||
installGame: async (id: GameId) => {
|
||||
games = games.map((game) =>
|
||||
game.id === id
|
||||
? {
|
||||
...game,
|
||||
enabled: true,
|
||||
integrationActive: true,
|
||||
launchOptionStatus: 'applied'
|
||||
}
|
||||
: game
|
||||
)
|
||||
emitGames()
|
||||
return structuredClone(games.find((game) => game.id === id)!)
|
||||
},
|
||||
uninstallGame: async (id: GameId) => {
|
||||
games = games.map((game) =>
|
||||
game.id === id
|
||||
? { ...game, enabled: false, integrationActive: false }
|
||||
: game
|
||||
)
|
||||
emitGames()
|
||||
return structuredClone(games.find((game) => game.id === id)!)
|
||||
},
|
||||
toggleGame: async (id, enabled) => {
|
||||
games = games.map((game) =>
|
||||
game.id === id ? { ...game, enabled } : game
|
||||
)
|
||||
state = {
|
||||
...state,
|
||||
gamesEnabled: { ...state.gamesEnabled, [id]: enabled }
|
||||
}
|
||||
emitGames()
|
||||
emitState()
|
||||
},
|
||||
openGameLaunchOptions: async () => undefined,
|
||||
addChallenge: async (input) => {
|
||||
const challenge: Challenge = { ...input, id: nextId('dev-ch') }
|
||||
state = { ...state, challenges: [...state.challenges, challenge] }
|
||||
emitState()
|
||||
return structuredClone(challenge)
|
||||
},
|
||||
updateChallenge: async (id, patch) => {
|
||||
let updated = state.challenges.find((challenge) => challenge.id === id)
|
||||
if (!updated) throw new Error(`Unknown challenge ${id}`)
|
||||
state = {
|
||||
...state,
|
||||
challenges: state.challenges.map((challenge) => {
|
||||
if (challenge.id !== id) return challenge
|
||||
updated = { ...challenge, ...patch, id }
|
||||
return updated
|
||||
})
|
||||
}
|
||||
emitState()
|
||||
return structuredClone(updated)
|
||||
},
|
||||
deleteChallenge: async (id) => {
|
||||
const before = state.challenges.length
|
||||
state = {
|
||||
...state,
|
||||
challenges: state.challenges.filter((challenge) => challenge.id !== id)
|
||||
}
|
||||
emitState()
|
||||
return state.challenges.length !== before
|
||||
},
|
||||
toggleChallenge: async (id, enabled) => {
|
||||
return api.updateChallenge(id, { enabled })
|
||||
},
|
||||
markChallengeDone: async (id, reps) => {
|
||||
const challenge = state.challenges.find((item) => item.id === id)
|
||||
pushHistory({
|
||||
ts: Date.now(),
|
||||
exerciseId: `challenge:${id}`,
|
||||
action: 'done',
|
||||
actualReps: reps,
|
||||
reps,
|
||||
name: challenge?.exerciseName ?? challenge?.name,
|
||||
source: 'match'
|
||||
})
|
||||
return true
|
||||
},
|
||||
closeMatchSummary: async () => undefined,
|
||||
simulateMatchEnd: async () => undefined,
|
||||
updaterStatus: async () => updaterStatus,
|
||||
updaterCheck: async () => {
|
||||
updaterStatus = {
|
||||
kind: 'not-available',
|
||||
currentVersion: '0.6.5',
|
||||
lastCheckedAt: Date.now()
|
||||
}
|
||||
emitUpdater()
|
||||
return updaterStatus
|
||||
},
|
||||
updaterDownload: () => undefined,
|
||||
updaterInstall: () => undefined,
|
||||
getHistory: async (sinceMs) =>
|
||||
structuredClone(
|
||||
sinceMs === undefined
|
||||
? history
|
||||
: history.filter((entry) => entry.ts >= sinceMs)
|
||||
),
|
||||
clearHistory: async (beforeTs) => {
|
||||
const before = history.length
|
||||
history =
|
||||
beforeTs === undefined
|
||||
? history
|
||||
: history.filter((entry) => entry.ts >= beforeTs)
|
||||
emitHistory()
|
||||
return before - history.length
|
||||
},
|
||||
exportState: async () => ({
|
||||
ok: true,
|
||||
canceled: false,
|
||||
path: 'C:\\Users\\Demo\\Desktop\\razomnis-backup.json'
|
||||
}),
|
||||
importState: async () => ({ ok: true, canceled: false }),
|
||||
onTick: (handler) => subscribe(tickHandlers, handler),
|
||||
onFire: () => emptyUnsub,
|
||||
onFireMeal: () => emptyUnsub,
|
||||
onMatchEnd: () => emptyUnsub,
|
||||
onStateChanged: (handler) => subscribe(stateHandlers, handler),
|
||||
onThemeChanged: (handler) => subscribe(themeHandlers, handler),
|
||||
onAccentChanged: () => emptyUnsub,
|
||||
onGamesChanged: (handler) => subscribe(gamesHandlers, handler),
|
||||
onUpdaterStatus: (handler) => subscribe(updaterHandlers, handler),
|
||||
onMaximizeChanged: () => emptyUnsub,
|
||||
onMeetingChanged: () => emptyUnsub,
|
||||
onHistoryChanged: (handler) => subscribe(historyHandlers, handler)
|
||||
}
|
||||
|
||||
window.api = api
|
||||
tickTimer = window.setInterval(() => {
|
||||
const ticks = buildTicks()
|
||||
tickHandlers.forEach((handler) => handler(ticks))
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function diagnostics(): DiagnosticsInfo {
|
||||
return {
|
||||
generatedAt: Date.now(),
|
||||
app: {
|
||||
version: '0.6.5',
|
||||
isPackaged: false,
|
||||
platform: 'win32',
|
||||
arch: 'x64'
|
||||
},
|
||||
runtime: {
|
||||
electron: 'dev',
|
||||
chrome: 'dev',
|
||||
node: 'dev'
|
||||
},
|
||||
paths: {
|
||||
userData: 'dev-renderer',
|
||||
store: 'dev-renderer',
|
||||
logs: 'dev-renderer'
|
||||
},
|
||||
store: {
|
||||
bytes: null,
|
||||
exercises: state.exercises.length,
|
||||
meals: state.meals.length,
|
||||
challenges: state.challenges.length,
|
||||
history: history.length
|
||||
},
|
||||
updater: updaterStatus,
|
||||
games,
|
||||
gsi: {
|
||||
running: games.some((game) => game.integrationActive),
|
||||
port: 38087,
|
||||
baseUrl: 'http://127.0.0.1:38087'
|
||||
},
|
||||
meetingActive: false
|
||||
}
|
||||
}
|
||||
@@ -7,14 +7,18 @@ import ReminderApp from './ReminderApp'
|
||||
import { ThemeProvider } from './providers/ThemeProvider'
|
||||
import { installRendererErrorReporting } from './lib/reporting'
|
||||
|
||||
installRendererErrorReporting()
|
||||
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const which = params.get('window') ?? 'main'
|
||||
|
||||
// reducedMotion="user" — framer-motion сам читает системную настройку
|
||||
// «уменьшить движение» и глушит transform/layout-анимации (оставляя opacity).
|
||||
// Один источник истины для обоих окон и всех motion-компонентов.
|
||||
async function bootstrap(): Promise<void> {
|
||||
if (import.meta.env.DEV && !window.api) {
|
||||
const { installDevApi } = await import('./lib/dev-api')
|
||||
installDevApi()
|
||||
}
|
||||
installRendererErrorReporting()
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<MotionConfig reducedMotion="user">
|
||||
@@ -24,3 +28,6 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
</MotionConfig>
|
||||
</React.StrictMode>
|
||||
)
|
||||
}
|
||||
|
||||
void bootstrap()
|
||||
|
||||
@@ -65,14 +65,14 @@ export default function ChallengesPage(): JSX.Element {
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
|
||||
<div className="h-full overflow-y-auto desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('challenges.kicker')}
|
||||
</div>
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
|
||||
{t('challenges.title')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-text/65 mt-2 font-medium">
|
||||
@@ -92,7 +92,7 @@ export default function ChallengesPage(): JSX.Element {
|
||||
</div>
|
||||
|
||||
{noGamesActive && (
|
||||
<div className="mb-6 rounded-2xl bg-warning/12 p-4 flex items-start gap-3">
|
||||
<div className="mb-5 rounded-xl border border-warning/25 bg-warning/10 p-4 flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-warning/18 text-warning grid place-items-center shrink-0">
|
||||
<AlertTriangle size={18} strokeWidth={2.5} />
|
||||
</div>
|
||||
@@ -178,7 +178,7 @@ export default function ChallengesPage(): JSX.Element {
|
||||
) : (
|
||||
<Card>
|
||||
<div className="px-5 py-12 flex flex-col items-center text-center">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<Gamepad2 size={24} strokeWidth={2.4} />
|
||||
</div>
|
||||
<div className="text-text/65 text-[15px] font-medium max-w-xs leading-snug">
|
||||
@@ -342,7 +342,7 @@ function ChallengeEditor({
|
||||
</Field>
|
||||
|
||||
<Field label={t('editor.field.icon')}>
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-lg bg-surface-2">
|
||||
{ICON_CHOICES.map((name) => (
|
||||
<button
|
||||
key={name}
|
||||
@@ -361,8 +361,8 @@ function ChallengeEditor({
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div className="rounded-2xl bg-accent/8 p-4">
|
||||
<div className="text-[11px] uppercase tracking-wider text-accent font-semibold mb-2">
|
||||
<div className="rounded-lg bg-accent/[0.08] p-4">
|
||||
<div className="text-[11px] text-accent font-semibold mb-2">
|
||||
{t('editor.challenge.preview.kicker')}
|
||||
</div>
|
||||
<div className="font-mono-num text-[14px] text-text/75 flex items-baseline gap-1.5 flex-wrap">
|
||||
@@ -370,7 +370,7 @@ function ChallengeEditor({
|
||||
<span className="text-text/40">×</span>
|
||||
<span>{draft.multiplier}</span>
|
||||
<span className="text-text/40">=</span>
|
||||
<span className="text-[32px] font-display font-semibold text-accent leading-none ml-1 tracking-tight">
|
||||
<span className="text-[32px] font-display font-semibold text-accent leading-none ml-1">
|
||||
{previewReps}
|
||||
</span>
|
||||
<span className="text-text/55">
|
||||
|
||||
@@ -187,18 +187,40 @@ export default function Dashboard(): JSX.Element {
|
||||
lang === 'en' ? 'en-US' : 'ru-RU',
|
||||
{ weekday: 'long', day: 'numeric', month: 'long' }
|
||||
)
|
||||
const header = dashboardHeaderCopy({
|
||||
plan,
|
||||
paused,
|
||||
meetingPaused,
|
||||
hasSetup: exercises.length > 0 || meals.length > 0,
|
||||
lang,
|
||||
t
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
|
||||
<div className="h-full overflow-y-auto desktop-scroll">
|
||||
<div className="max-w-[1180px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<section className="mb-4 rounded-xl border border-hairline/35 bg-surface p-5 shadow-card">
|
||||
<div className="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[14px] text-text/65 font-semibold capitalize">
|
||||
{today}
|
||||
<div className="text-[13px] text-text/60 font-bold">
|
||||
{t('dashboard.header.date', { date: today })}
|
||||
</div>
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
|
||||
{t('dashboard.title')}
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-3">
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight font-bold">
|
||||
{header.title}
|
||||
</h1>
|
||||
<span
|
||||
className={[
|
||||
'h-7 px-2.5 rounded-md inline-flex items-center text-[12px] font-bold',
|
||||
dashboardStatusClass(header.tone)
|
||||
].join(' ')}
|
||||
>
|
||||
{header.status}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[14px] text-text/60 mt-2 font-medium leading-relaxed max-w-3xl">
|
||||
{header.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="tinted" onClick={togglePause}>
|
||||
@@ -217,8 +239,9 @@ export default function Dashboard(): JSX.Element {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
|
||||
<div className="grid grid-cols-2 xl:grid-cols-4 gap-3 mb-5">
|
||||
<HeroStat
|
||||
tone="accent"
|
||||
label={t('dashboard.stat.today_done')}
|
||||
@@ -292,7 +315,7 @@ export default function Dashboard(): JSX.Element {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6 rounded-2xl bg-warning/12 p-4 flex items-center gap-3"
|
||||
className="mb-4 rounded-xl border border-warning/25 bg-warning/10 p-4 flex items-center gap-3"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-warning/18 text-warning grid place-items-center shrink-0">
|
||||
<Pause size={18} strokeWidth={2.5} />
|
||||
@@ -315,7 +338,7 @@ export default function Dashboard(): JSX.Element {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6 rounded-2xl bg-info/12 p-4 flex items-center gap-3"
|
||||
className="mb-4 rounded-xl border border-info/25 bg-info/10 p-4 flex items-center gap-3"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-info/18 text-info grid place-items-center shrink-0">
|
||||
<Video size={18} strokeWidth={2.5} />
|
||||
@@ -355,7 +378,7 @@ export default function Dashboard(): JSX.Element {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
|
||||
<AnimatePresence>
|
||||
{exercises.map((ex) => (
|
||||
<ExerciseCard
|
||||
@@ -378,7 +401,7 @@ export default function Dashboard(): JSX.Element {
|
||||
|
||||
{exercises.length === 0 && (
|
||||
<div className="mt-12 text-center">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<Plus size={24} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="font-display text-[20px] font-semibold">
|
||||
@@ -414,6 +437,95 @@ export default function Dashboard(): JSX.Element {
|
||||
)
|
||||
}
|
||||
|
||||
type DashboardHeaderTone = 'accent' | 'success' | 'warning' | 'info' | 'muted'
|
||||
|
||||
function dashboardHeaderCopy({
|
||||
plan,
|
||||
paused,
|
||||
meetingPaused,
|
||||
hasSetup,
|
||||
lang,
|
||||
t
|
||||
}: {
|
||||
plan: TodayPlan
|
||||
paused: boolean
|
||||
meetingPaused: boolean
|
||||
hasSetup: boolean
|
||||
lang: Language
|
||||
t: TFn
|
||||
}): {
|
||||
title: string
|
||||
subtitle: string
|
||||
status: string
|
||||
tone: DashboardHeaderTone
|
||||
} {
|
||||
if (paused) {
|
||||
return {
|
||||
title: t('dashboard.header.title.paused'),
|
||||
subtitle: t('dashboard.header.subtitle.paused'),
|
||||
status: t('dashboard.header.status.paused'),
|
||||
tone: 'muted'
|
||||
}
|
||||
}
|
||||
|
||||
if (meetingPaused) {
|
||||
return {
|
||||
title: t('dashboard.header.title.meeting'),
|
||||
subtitle: t('dashboard.header.subtitle.meeting'),
|
||||
status: t('dashboard.header.status.meeting'),
|
||||
tone: 'info'
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasSetup) {
|
||||
return {
|
||||
title: t('dashboard.header.title.empty'),
|
||||
subtitle: t('dashboard.header.subtitle.empty'),
|
||||
status: t('dashboard.header.status.clear'),
|
||||
tone: 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
const nextItem = plan.nextItem
|
||||
if (nextItem) {
|
||||
const payload = {
|
||||
name: nextItem.name,
|
||||
kind: t(`dashboard.plan.kind.${nextItem.kind}`),
|
||||
meta: planItemMeta(nextItem, t),
|
||||
time: planItemTiming(nextItem, false, lang, t)
|
||||
}
|
||||
if (nextItem.due) {
|
||||
return {
|
||||
title: t('dashboard.header.title.due', payload),
|
||||
subtitle: t('dashboard.header.subtitle.due', payload),
|
||||
status: t('dashboard.header.status.due'),
|
||||
tone: 'accent'
|
||||
}
|
||||
}
|
||||
return {
|
||||
title: t('dashboard.header.title.next', payload),
|
||||
subtitle: t('dashboard.header.subtitle.next', payload),
|
||||
status: t('dashboard.header.status.running'),
|
||||
tone: 'success'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: t('dashboard.header.title.clear'),
|
||||
subtitle: t('dashboard.header.subtitle.clear'),
|
||||
status: t('dashboard.header.status.clear'),
|
||||
tone: 'success'
|
||||
}
|
||||
}
|
||||
|
||||
function dashboardStatusClass(tone: DashboardHeaderTone): string {
|
||||
if (tone === 'accent') return 'bg-accent/12 text-accent'
|
||||
if (tone === 'success') return 'bg-success/12 text-success'
|
||||
if (tone === 'warning') return 'bg-warning/12 text-warning'
|
||||
if (tone === 'info') return 'bg-info/12 text-info'
|
||||
return 'bg-text/10 text-text/55'
|
||||
}
|
||||
|
||||
function MomentumPanel({
|
||||
momentum,
|
||||
gamesLive,
|
||||
@@ -434,17 +546,17 @@ function MomentumPanel({
|
||||
: t('momentum.game.off')
|
||||
|
||||
return (
|
||||
<section className="mb-8 grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr_0.95fr] gap-4">
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<section className="mb-6 grid grid-cols-1 xl:grid-cols-[0.9fr_1.15fr_0.95fr] gap-3">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-warning text-white grid place-items-center shrink-0">
|
||||
<div className="w-9 h-9 rounded-lg bg-warning text-white grid place-items-center shrink-0">
|
||||
<Trophy size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('momentum.level.title')}
|
||||
</div>
|
||||
<div className="font-display text-[22px] font-bold leading-tight truncate">
|
||||
<div className="font-display text-[20px] font-bold leading-tight truncate">
|
||||
{t(momentum.level.key)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -472,13 +584,13 @@ function MomentumPanel({
|
||||
<ProgressBar pct={momentum.level.progressPct} tone="warning" />
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('momentum.week.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
<h2 className="font-display text-[20px] font-bold leading-tight">
|
||||
{t('momentum.week.title')}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -496,29 +608,29 @@ function MomentumPanel({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-accent-2 text-white grid place-items-center shrink-0">
|
||||
<div className="w-9 h-9 rounded-lg bg-accent-2 text-white grid place-items-center shrink-0">
|
||||
<Swords size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('momentum.game.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
<h2 className="font-display text-[20px] font-bold leading-tight">
|
||||
{t('momentum.game.title')}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-2xl bg-surface-2 p-4">
|
||||
<div className="mt-4 rounded-lg bg-surface-2 p-3.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="text-[13px] text-text/60 font-semibold">
|
||||
{t('momentum.game.status')}
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'text-[12px] px-2.5 py-1 rounded-full font-semibold',
|
||||
'text-[12px] px-2 py-1 rounded-md font-semibold',
|
||||
gamesLive
|
||||
? 'bg-success/12 text-success'
|
||||
: gamesEnabledButNotLive
|
||||
@@ -552,7 +664,7 @@ function MomentumPanel({
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 text-[13px] text-text/62 leading-relaxed">
|
||||
<div className="mt-4 text-[13px] text-text/60 leading-relaxed">
|
||||
{momentum.gameDebt.lastMatchAt
|
||||
? t('momentum.game.last', {
|
||||
date: new Date(
|
||||
@@ -596,7 +708,7 @@ function WeeklyQuestRow({
|
||||
<div className="py-3 flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={[
|
||||
'w-9 h-9 rounded-xl grid place-items-center text-white shrink-0',
|
||||
'w-8 h-8 rounded-lg grid place-items-center text-white shrink-0',
|
||||
quest.complete
|
||||
? 'bg-success'
|
||||
: quest.tone === 'warning'
|
||||
@@ -674,14 +786,14 @@ function TodayPlanPanel({
|
||||
const recovery = recoveryCopy(plan, t)
|
||||
|
||||
return (
|
||||
<section className="mb-8 bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
|
||||
<section className="mb-6 bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-10 h-10 rounded-2xl bg-accent/12 text-accent grid place-items-center shrink-0">
|
||||
<div className="w-9 h-9 rounded-lg bg-accent/12 text-accent grid place-items-center shrink-0">
|
||||
<CalendarCheck size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
<h2 className="font-display text-[20px] font-bold leading-tight">
|
||||
{t('dashboard.plan.title')}
|
||||
</h2>
|
||||
<div className="text-[14px] text-text/60 mt-0.5">
|
||||
@@ -691,7 +803,7 @@ function TodayPlanPanel({
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'self-start sm:self-auto h-8 px-3 rounded-full inline-flex items-center text-[13px] font-semibold',
|
||||
'self-start sm:self-auto h-8 px-2.5 rounded-md inline-flex items-center text-[13px] font-semibold',
|
||||
plan.dueCount > 0
|
||||
? 'bg-accent/12 text-accent'
|
||||
: 'bg-success/12 text-success'
|
||||
@@ -748,7 +860,7 @@ function TodayPlanPanel({
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-3 min-w-0">
|
||||
<div className="font-display text-[20px] leading-tight font-bold">
|
||||
<div className="font-display text-[19px] leading-tight font-bold">
|
||||
{t('dashboard.plan.clear.title')}
|
||||
</div>
|
||||
<div className="text-[14px] text-text/60 mt-1">
|
||||
@@ -813,7 +925,7 @@ function TodayPlanPanel({
|
||||
<div className="mt-3 flex items-start gap-3">
|
||||
<div
|
||||
className={[
|
||||
'w-9 h-9 rounded-xl grid place-items-center shrink-0',
|
||||
'w-8 h-8 rounded-lg grid place-items-center shrink-0',
|
||||
recovery.tone
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -863,7 +975,7 @@ function PlanItemGlyph({ item }: { item: PlanItem }): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'w-11 h-11 rounded-2xl grid place-items-center shrink-0',
|
||||
'w-9 h-9 rounded-lg grid place-items-center shrink-0',
|
||||
dueClass
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -894,7 +1006,7 @@ function PlanListRow({
|
||||
{planItemMeta(item, t)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[13px] text-text/62 shrink-0 max-w-[42%] truncate">
|
||||
<div className="text-[13px] text-text/60 shrink-0 max-w-[42%] truncate">
|
||||
{planItemTiming(item, paused, lang, t)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -944,7 +1056,7 @@ function planItemMeta(item: PlanItem, t: TFn): string {
|
||||
: t('dashboard.plan.kind.meal')
|
||||
}
|
||||
if (item.goal !== undefined) {
|
||||
return t('dashboard.plan.item.remaining', {
|
||||
return t('dashboard.plan.item.remaining_reps', {
|
||||
n: item.remainingReps ?? 0
|
||||
})
|
||||
}
|
||||
@@ -1021,23 +1133,25 @@ function HeroStat({
|
||||
: 'bg-text/40'
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div
|
||||
className={[
|
||||
'w-7 h-7 rounded-lg grid place-items-center text-white',
|
||||
'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
|
||||
toneBg
|
||||
].join(' ')}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-[14px] text-text/75 font-semibold">{label}</div>
|
||||
<div className="text-[13px] text-text/70 font-bold truncate">
|
||||
{label}
|
||||
</div>
|
||||
<div className="font-display text-[28px] font-bold tracking-tight leading-none">
|
||||
</div>
|
||||
<div className="font-display text-[24px] font-bold leading-tight truncate">
|
||||
{value}
|
||||
</div>
|
||||
{subvalue && (
|
||||
<div className="text-[13px] text-text/60 mt-2 font-medium">
|
||||
<div className="text-[12px] text-text/58 mt-1 font-medium truncate">
|
||||
{subvalue}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -27,8 +27,8 @@ export default function Exercises(): JSX.Element {
|
||||
const totalReps = enabled.reduce((sum, e) => sum + e.reps, 0)
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
|
||||
<div className="h-full overflow-y-auto desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<PageHeader
|
||||
kicker={t('exercises.kicker')}
|
||||
title={t('exercises.title')}
|
||||
@@ -122,7 +122,7 @@ export default function Exercises(): JSX.Element {
|
||||
{exercises.length === 0 && (
|
||||
<Card>
|
||||
<div className="px-5 py-12 flex flex-col items-center text-center">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<Plus size={24} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="text-text/65 text-[15px] font-medium max-w-xs leading-snug">
|
||||
|
||||
@@ -66,14 +66,14 @@ export default function GamesPage(): JSX.Element {
|
||||
).length
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
|
||||
<div className="h-full overflow-y-auto desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('games.kicker')}
|
||||
</div>
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
|
||||
{t('games.title')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed">
|
||||
@@ -124,7 +124,7 @@ export default function GamesPage(): JSX.Element {
|
||||
</InsightGrid>
|
||||
|
||||
<SectionHeader title={t('games.section.supported')} />
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{games.map((g, i) => (
|
||||
<motion.div
|
||||
key={g.id}
|
||||
@@ -185,12 +185,12 @@ function GameCard({
|
||||
game.enabled
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30">
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4 min-w-0 flex-1">
|
||||
<div
|
||||
className={[
|
||||
'w-12 h-12 rounded-2xl grid place-items-center shrink-0 text-white',
|
||||
'w-10 h-10 rounded-lg grid place-items-center shrink-0 text-white',
|
||||
isLive
|
||||
? 'bg-success'
|
||||
: game.integrationActive
|
||||
@@ -202,7 +202,7 @@ function GameCard({
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="font-display text-[18px] font-bold tracking-tight">
|
||||
<h3 className="font-display text-[18px] font-bold">
|
||||
{game.name}
|
||||
</h3>
|
||||
<StatusBadge game={game} isLive={isLive} />
|
||||
@@ -220,7 +220,7 @@ function GameCard({
|
||||
</div>
|
||||
|
||||
{game.integrationActive && game.launchOptionStatus === 'queued' && (
|
||||
<div className="mt-4 rounded-2xl bg-warning/12 p-4 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
|
||||
<div className="mt-4 rounded-lg bg-warning/12 p-3.5 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
|
||||
<Hourglass
|
||||
size={17}
|
||||
className="text-warning shrink-0 mt-0.5"
|
||||
@@ -235,7 +235,7 @@ function GameCard({
|
||||
)}
|
||||
|
||||
{game.integrationActive && game.launchOptionStatus === 'no_user' && (
|
||||
<div className="mt-4 rounded-2xl bg-destructive/10 p-4 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
|
||||
<div className="mt-4 rounded-lg bg-destructive/10 p-3.5 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
|
||||
<AlertTriangle
|
||||
size={17}
|
||||
className="text-destructive shrink-0 mt-0.5"
|
||||
@@ -345,7 +345,7 @@ function DevPanel({ games }: { games: GameStatus[] }): JSX.Element | null {
|
||||
<div className="mt-10">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="text-[12px] uppercase tracking-wider text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
|
||||
className="text-[12px] text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
|
||||
>
|
||||
{open ? '▾' : '▸'} {t('games.dev.toggle')}
|
||||
</button>
|
||||
|
||||
@@ -64,8 +64,8 @@ export default function Meals(): JSX.Element {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
|
||||
<div className="h-full overflow-y-auto desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<PageHeader
|
||||
kicker={t('meals.kicker')}
|
||||
title={t('meals.title')}
|
||||
@@ -113,7 +113,7 @@ export default function Meals(): JSX.Element {
|
||||
<button
|
||||
key={p.nameKey}
|
||||
onClick={() => addPreset(p)}
|
||||
className="inline-flex items-center gap-2 h-10 px-3.5 rounded-2xl bg-surface-2 hover:bg-accent/15 hover:text-accent text-text/80 text-[14px] font-semibold transition-colors active:scale-95"
|
||||
className="inline-flex items-center gap-2 h-9 px-3 rounded-lg bg-surface border border-hairline/35 hover:border-accent/45 hover:text-accent text-text/80 text-[14px] font-semibold transition-colors active:translate-y-px"
|
||||
>
|
||||
<Icon name={p.icon} size={16} strokeWidth={2.3} />
|
||||
{t(p.nameKey)}
|
||||
@@ -157,7 +157,7 @@ export default function Meals(): JSX.Element {
|
||||
{meals.length === 0 && (
|
||||
<Card>
|
||||
<div className="px-5 py-12 flex flex-col items-center text-center">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<UtensilsCrossed size={24} strokeWidth={2.3} />
|
||||
</div>
|
||||
<div className="text-text/65 text-[15px] font-medium max-w-xs leading-snug">
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
FolderOpen,
|
||||
Languages,
|
||||
Palette,
|
||||
Power,
|
||||
RefreshCw
|
||||
} from 'lucide-react'
|
||||
import { useAppStore } from '../store/appStore'
|
||||
@@ -18,7 +19,7 @@ import { ConfirmModal } from '../components/ui/ConfirmModal'
|
||||
import { Skeleton } from '../components/ui/Skeleton'
|
||||
import { Spinner } from '../components/ui/Spinner'
|
||||
import { RELEASE_NOTES } from '@shared/release-notes'
|
||||
import { translate, useT } from '../i18n'
|
||||
import { translate, useT, type TFn } from '../i18n'
|
||||
import type {
|
||||
DiagnosticsInfo,
|
||||
Language,
|
||||
@@ -35,7 +36,7 @@ export default function SettingsPage(): JSX.Element {
|
||||
if (!settings)
|
||||
return (
|
||||
<div
|
||||
className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12 space-y-5"
|
||||
className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10 space-y-5"
|
||||
role="status"
|
||||
aria-label={t('settings.loading')}
|
||||
>
|
||||
@@ -51,17 +52,24 @@ export default function SettingsPage(): JSX.Element {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12">
|
||||
<div className="mb-8">
|
||||
<div className="h-full overflow-y-auto desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<div className="mb-6">
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('settings.kicker')}
|
||||
</div>
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
|
||||
{t('settings.title')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<SettingsStatusPanel
|
||||
settings={settings}
|
||||
onToggleGlobal={() =>
|
||||
patch({ globalEnabled: !settings.globalEnabled })
|
||||
}
|
||||
/>
|
||||
|
||||
<InsightGrid>
|
||||
<InsightCard
|
||||
icon={<Bell size={17} strokeWidth={2.5} />}
|
||||
@@ -86,7 +94,7 @@ export default function SettingsPage(): JSX.Element {
|
||||
/>
|
||||
</InsightGrid>
|
||||
|
||||
<SectionHeader title={t('settings.section.language')} />
|
||||
<SectionHeader title={t('settings.section.interface')} />
|
||||
<Card className="mb-6">
|
||||
<SelectRow
|
||||
label={t('settings.language.label')}
|
||||
@@ -97,12 +105,29 @@ export default function SettingsPage(): JSX.Element {
|
||||
{ value: 'ru', label: t('settings.language.ru') },
|
||||
{ value: 'en', label: t('settings.language.en') }
|
||||
]}
|
||||
/>
|
||||
<SelectRow
|
||||
label={t('settings.theme.label')}
|
||||
hint={t('settings.theme.hint')}
|
||||
value={settings.theme}
|
||||
onChange={(v) => patch({ theme: v as Theme })}
|
||||
options={[
|
||||
{ value: 'system', label: t('settings.theme.system') },
|
||||
{ value: 'light', label: t('settings.theme.light') },
|
||||
{ value: 'dark', label: t('settings.theme.dark') }
|
||||
]}
|
||||
last
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<SectionHeader title={t('settings.section.reminders')} />
|
||||
<Card className="mb-6">
|
||||
<ToggleRow
|
||||
label={t('settings.global.label')}
|
||||
hint={t('settings.global.hint')}
|
||||
checked={settings.globalEnabled}
|
||||
onChange={(v) => patch({ globalEnabled: v })}
|
||||
/>
|
||||
<SelectRow
|
||||
label={t('settings.notification_mode.label')}
|
||||
hint={t('settings.notification_mode.hint')}
|
||||
@@ -204,22 +229,6 @@ export default function SettingsPage(): JSX.Element {
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<SectionHeader title={t('settings.section.appearance')} />
|
||||
<Card className="mb-6">
|
||||
<SelectRow
|
||||
label={t('settings.theme.label')}
|
||||
hint={t('settings.theme.hint')}
|
||||
value={settings.theme}
|
||||
onChange={(v) => patch({ theme: v as Theme })}
|
||||
options={[
|
||||
{ value: 'system', label: t('settings.theme.system') },
|
||||
{ value: 'light', label: t('settings.theme.light') },
|
||||
{ value: 'dark', label: t('settings.theme.dark') }
|
||||
]}
|
||||
last
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<SectionHeader title={t('settings.section.updates')} />
|
||||
<UpdaterCard />
|
||||
|
||||
@@ -242,6 +251,135 @@ export default function SettingsPage(): JSX.Element {
|
||||
)
|
||||
}
|
||||
|
||||
function SettingsStatusPanel({
|
||||
settings,
|
||||
onToggleGlobal
|
||||
}: {
|
||||
settings: SettingsType
|
||||
onToggleGlobal: () => void
|
||||
}): JSX.Element {
|
||||
const { t } = useT()
|
||||
return (
|
||||
<section className="mb-5 rounded-xl bg-surface p-4 shadow-card border border-hairline/30">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div
|
||||
className={[
|
||||
'w-10 h-10 rounded-lg grid place-items-center text-white shrink-0',
|
||||
settings.globalEnabled ? 'bg-success' : 'bg-warning'
|
||||
].join(' ')}
|
||||
>
|
||||
<Power size={20} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[13px] text-text/50 font-bold">
|
||||
{t('settings.status.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[20px] font-bold leading-tight mt-1">
|
||||
{settings.globalEnabled
|
||||
? t('settings.status.title.on')
|
||||
: t('settings.status.title.off')}
|
||||
</h2>
|
||||
<p className="text-[14px] text-text/60 mt-1 leading-relaxed max-w-xl break-words">
|
||||
{settingsStatusHint(settings, t)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant={settings.globalEnabled ? 'tinted' : 'filled'}
|
||||
onClick={onToggleGlobal}
|
||||
className="self-start sm:self-auto"
|
||||
>
|
||||
{settings.globalEnabled ? t('btn.pause') : t('btn.start')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<StatusPill
|
||||
label={t('settings.status.reminders')}
|
||||
value={
|
||||
settings.globalEnabled
|
||||
? t('settings.status.on')
|
||||
: t('settings.status.off')
|
||||
}
|
||||
active={settings.globalEnabled}
|
||||
/>
|
||||
<StatusPill
|
||||
label={t('settings.status.quiet')}
|
||||
value={
|
||||
settings.quietHours.enabled
|
||||
? `${settings.quietHours.from}-${settings.quietHours.to}`
|
||||
: t('settings.status.off')
|
||||
}
|
||||
active={settings.quietHours.enabled}
|
||||
tone="info"
|
||||
/>
|
||||
<StatusPill
|
||||
label={t('settings.status.meetings')}
|
||||
value={
|
||||
settings.meetingAutoPause
|
||||
? t('settings.status.on')
|
||||
: t('settings.status.off')
|
||||
}
|
||||
active={settings.meetingAutoPause}
|
||||
tone="info"
|
||||
/>
|
||||
<StatusPill
|
||||
label={t('settings.status.autostart')}
|
||||
value={
|
||||
settings.startWithWindows
|
||||
? t('settings.status.on')
|
||||
: t('settings.status.off')
|
||||
}
|
||||
active={settings.startWithWindows}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusPill({
|
||||
label,
|
||||
value,
|
||||
active,
|
||||
tone = 'success'
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
active: boolean
|
||||
tone?: 'success' | 'info'
|
||||
}): JSX.Element {
|
||||
const activeClass = tone === 'info' ? 'text-info' : 'text-success'
|
||||
return (
|
||||
<div className="rounded-lg bg-surface-2 px-3.5 py-3 min-w-0">
|
||||
<div className="text-[12px] text-text/50 font-semibold leading-tight">
|
||||
{label}
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'mt-1 text-[14px] font-bold leading-tight break-words',
|
||||
active ? activeClass : 'text-text/55'
|
||||
].join(' ')}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function settingsStatusHint(settings: SettingsType, t: TFn): string {
|
||||
if (!settings.globalEnabled) return t('settings.status.hint.paused')
|
||||
if (settings.quietHours.enabled) {
|
||||
return t('settings.status.hint.quiet', {
|
||||
from: settings.quietHours.from,
|
||||
to: settings.quietHours.to
|
||||
})
|
||||
}
|
||||
if (!settings.startWithWindows) return t('settings.status.hint.autostart')
|
||||
return t('settings.status.hint.ready')
|
||||
}
|
||||
|
||||
function DiagnosticsCard(): JSX.Element {
|
||||
const { t, lang } = useT()
|
||||
const [info, setInfo] = useState<DiagnosticsInfo | null>(null)
|
||||
|
||||
@@ -20,56 +20,59 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ===== Design tokens — Apple HIG with Manrope/Fraunces ===== */
|
||||
/* ===== Design tokens: desktop workstation ===== */
|
||||
|
||||
:root {
|
||||
/* Brand & semantic colors (iOS system palette) */
|
||||
--accent: 255 107 53; /* Apple Fitness Move orange */
|
||||
--accent-2: 255 45 85; /* systemPink */
|
||||
--success: 52 199 89; /* systemGreen */
|
||||
--warning: 255 159 10; /* systemOrange dark */
|
||||
--destructive: 255 59 48; /* systemRed */
|
||||
--info: 0 122 255; /* systemBlue */
|
||||
--accent: 16 118 110;
|
||||
--accent-2: 225 29 72;
|
||||
--success: 22 163 74;
|
||||
--warning: 217 119 6;
|
||||
--destructive: 220 38 38;
|
||||
--info: 37 99 235;
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
/* Light — polished iOS groupedBackground with warm undertone */
|
||||
:root {
|
||||
--bg: 245 245 249; /* slightly warmer than 242,242,247 */
|
||||
--bg: 244 246 247;
|
||||
--surface: 255 255 255;
|
||||
--surface-2: 240 240 245; /* subtle separation for inputs/sections */
|
||||
--text: 17 17 19; /* not pure black — softer */
|
||||
--text-secondary: 60 60 67;
|
||||
--text-tertiary: 60 60 67;
|
||||
--hairline: 60 60 67;
|
||||
--surface-2: 236 240 242;
|
||||
--text: 22 27 29;
|
||||
--text-secondary: 72 82 87;
|
||||
--text-tertiary: 103 113 118;
|
||||
--hairline: 174 185 190;
|
||||
--vibrancy: 255 255 255;
|
||||
--sidebar: 26 31 33;
|
||||
--sidebar-text: 245 247 248;
|
||||
--sidebar-muted: 156 170 176;
|
||||
|
||||
--accent-soft: 255 107 53;
|
||||
--bg-deep: 232 232 238;
|
||||
--accent-soft: 16 118 110;
|
||||
--bg-deep: 226 231 233;
|
||||
--surface-elevated: 255 255 255;
|
||||
--border: 60 60 67;
|
||||
--muted: 60 60 67;
|
||||
--victory: 52 199 89;
|
||||
--defeat: 255 59 48;
|
||||
--xp: 255 159 10;
|
||||
--border: 174 185 190;
|
||||
--muted: 72 82 87;
|
||||
--victory: 22 163 74;
|
||||
--defeat: 220 38 38;
|
||||
--xp: 217 119 6;
|
||||
}
|
||||
|
||||
/* Dark — true black with grey elevation */
|
||||
.dark {
|
||||
--bg: 0 0 0;
|
||||
--surface: 28 28 30;
|
||||
--surface-2: 44 44 46;
|
||||
--text: 255 255 255;
|
||||
--text-secondary: 235 235 245;
|
||||
--text-tertiary: 235 235 245;
|
||||
--hairline: 84 84 88;
|
||||
--vibrancy: 28 28 30;
|
||||
--bg: 16 18 19;
|
||||
--surface: 28 32 34;
|
||||
--surface-2: 40 46 49;
|
||||
--text: 245 247 248;
|
||||
--text-secondary: 203 211 215;
|
||||
--text-tertiary: 152 164 170;
|
||||
--hairline: 84 96 101;
|
||||
--vibrancy: 28 32 34;
|
||||
--sidebar: 17 22 24;
|
||||
--sidebar-text: 248 250 250;
|
||||
--sidebar-muted: 146 161 168;
|
||||
|
||||
--bg-deep: 0 0 0;
|
||||
--surface-elevated: 44 44 46;
|
||||
--border: 84 84 88;
|
||||
--muted: 235 235 245;
|
||||
--bg-deep: 12 14 15;
|
||||
--surface-elevated: 36 42 45;
|
||||
--border: 84 96 101;
|
||||
--muted: 203 211 215;
|
||||
}
|
||||
|
||||
/* ===== Base ===== */
|
||||
@@ -85,50 +88,31 @@ body,
|
||||
|
||||
body {
|
||||
font-family:
|
||||
'Plus Jakarta Sans',
|
||||
-apple-system,
|
||||
'SF Pro Text',
|
||||
'Segoe UI Variable Text',
|
||||
'Segoe UI',
|
||||
system-ui,
|
||||
sans-serif;
|
||||
-apple-system, 'Segoe UI Variable Text', 'Segoe UI', 'Plus Jakarta Sans',
|
||||
system-ui, sans-serif;
|
||||
background-color: rgb(var(--bg));
|
||||
color: rgb(var(--text));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.005em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Display — Bricolage Grotesque for headings and brand. Variable opsz axis
|
||||
gives bigger glyphs slightly more character. */
|
||||
.font-display {
|
||||
font-family:
|
||||
'Bricolage Grotesque',
|
||||
'Plus Jakarta Sans',
|
||||
-apple-system,
|
||||
'SF Pro Display',
|
||||
system-ui,
|
||||
sans-serif;
|
||||
-apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
|
||||
system-ui, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-variation-settings: 'opsz' 24;
|
||||
letter-spacing: -0.02em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Serif → repurposed for the "hero" big titles. Same Bricolage but with the
|
||||
opsz axis pushed to 96 for distinctive display feel. */
|
||||
.font-serif {
|
||||
font-family:
|
||||
'Bricolage Grotesque',
|
||||
'Plus Jakarta Sans',
|
||||
-apple-system,
|
||||
'SF Pro Display',
|
||||
system-ui,
|
||||
sans-serif;
|
||||
-apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
|
||||
system-ui, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-variation-settings: 'opsz' 96;
|
||||
letter-spacing: -0.035em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.font-mono-num {
|
||||
@@ -136,7 +120,14 @@ body {
|
||||
'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: 'ss02', 'ss19', 'zero';
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.tracking-tight,
|
||||
.tracking-wider,
|
||||
.tracking-\[0\.06em\],
|
||||
.tracking-\[0\.18em\] {
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
/* Custom titlebar drag region */
|
||||
@@ -149,36 +140,47 @@ body {
|
||||
app-region: no-drag;
|
||||
}
|
||||
|
||||
/* iOS 0.5px-style hairlines */
|
||||
/* Crisp panel separators for dense desktop surfaces */
|
||||
.hairline-b {
|
||||
box-shadow: inset 0 -0.5px 0 rgb(var(--hairline) / 0.18);
|
||||
box-shadow: inset 0 -1px 0 rgb(var(--hairline) / 0.34);
|
||||
}
|
||||
.hairline-t {
|
||||
box-shadow: inset 0 0.5px 0 rgb(var(--hairline) / 0.18);
|
||||
}
|
||||
.dark .hairline-b,
|
||||
.dark .hairline-t {
|
||||
box-shadow: inset 0 -0.5px 0 rgb(var(--hairline) / 0.4);
|
||||
box-shadow: inset 0 1px 0 rgb(var(--hairline) / 0.34);
|
||||
}
|
||||
|
||||
/* macOS vibrancy */
|
||||
.vibrancy {
|
||||
background-color: rgb(var(--vibrancy) / 0.72);
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(30px);
|
||||
background-color: rgb(var(--vibrancy) / 0.96);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* Soft iOS card shadow with subtle warmth */
|
||||
.shadow-card {
|
||||
box-shadow:
|
||||
0 0.5px 0 rgb(0 0 0 / 0.03),
|
||||
0 1px 2px rgb(15 23 42 / 0.04),
|
||||
0 6px 14px -4px rgb(15 23 42 / 0.05);
|
||||
0 0 0 1px rgb(var(--hairline) / 0.24),
|
||||
0 10px 28px -24px rgb(15 23 42 / 0.45);
|
||||
}
|
||||
.dark .shadow-card {
|
||||
box-shadow:
|
||||
0 0.5px 0 rgb(255 255 255 / 0.04) inset,
|
||||
0 1px 2px rgb(0 0 0 / 0.4);
|
||||
0 0 0 1px rgb(var(--hairline) / 0.38),
|
||||
0 16px 40px -30px rgb(0 0 0 / 0.9);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(var(--bg)) 0%,
|
||||
rgb(var(--bg-deep)) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.app-main-surface {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--surface) / 0.78), transparent 220px),
|
||||
rgb(var(--bg));
|
||||
}
|
||||
|
||||
.desktop-scroll {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
@@ -208,12 +210,12 @@ body {
|
||||
|
||||
.reminder-shell {
|
||||
position: relative;
|
||||
border: 0.5px solid rgb(var(--hairline) / 0.25);
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgb(var(--hairline) / 0.35);
|
||||
border-radius: 12px;
|
||||
background: rgb(var(--surface));
|
||||
box-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 0.06),
|
||||
0 20px 50px -16px rgb(0 0 0 / 0.4);
|
||||
0 1px 2px rgb(0 0 0 / 0.08),
|
||||
0 24px 70px -28px rgb(0 0 0 / 0.55);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,156 @@ export type ReleaseNoteItem = {
|
||||
export type ReleaseNotes = Record<Language, ReleaseNoteItem[]>
|
||||
|
||||
export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
|
||||
'0.7.0': {
|
||||
ru: [
|
||||
{
|
||||
title: 'Новый desktop-дизайн',
|
||||
detail:
|
||||
'Приложение стало рабочей панелью: темный сайдбар, четкие панели, меньше декоративности и больше полезной плотности.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Обзор стал операционным экраном',
|
||||
detail:
|
||||
'Главный экран теперь быстрее показывает ближайший шаг, статус, цели, питание, режим и игровые долги.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Настройки и списки стали спокойнее',
|
||||
detail:
|
||||
'Упражнения, питание, игры, челленджи и настройки получили единый desktop-контейнер и компактные строки.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Модалки и напоминания обновлены',
|
||||
detail:
|
||||
'Редакторы, переключатели, кнопки и окно напоминания приведены к новой desktop-системе.',
|
||||
tag: 'new'
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
title: 'New desktop design',
|
||||
detail:
|
||||
'The app now feels like a focused workstation: dark sidebar, crisp panels, less decoration and better density.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Overview is more operational',
|
||||
detail:
|
||||
'The main screen surfaces the next action, status, goals, meals, mode and game debt faster.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Settings and lists are calmer',
|
||||
detail:
|
||||
'Exercises, meals, games, challenges and settings now share a tighter desktop container and compact rows.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Dialogs and reminders were refreshed',
|
||||
detail:
|
||||
'Editors, switches, buttons and the reminder window now follow the new desktop system.',
|
||||
tag: 'new'
|
||||
}
|
||||
]
|
||||
},
|
||||
'0.6.6': {
|
||||
ru: [
|
||||
{
|
||||
title: 'Настройки стали панелью состояния',
|
||||
detail:
|
||||
'Сверху видно, работают ли напоминания, включены ли тихие часы, встречи и запуск вместе с Windows.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Главный экран стал точнее по текстам',
|
||||
detail:
|
||||
'Дата больше не кричит заглавными буквами, а цели показывают понятные единицы: “осталось 30 раз”.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Сводные карточки читаются лучше',
|
||||
detail:
|
||||
'Длинные значения в карточках больше не обрезаются, а сетка спокойнее держит десктопные ширины.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Безопасный стенд для проверки интерфейса',
|
||||
detail:
|
||||
'Добавлен dev:renderer: можно открыть UI в браузере с демо-данными и не трогать реальные настройки.',
|
||||
tag: 'new'
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
title: 'Settings now show app status first',
|
||||
detail:
|
||||
'The top panel shows whether reminders, quiet hours, meeting pause and Windows autostart are active.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Overview copy is clearer',
|
||||
detail:
|
||||
'The date no longer gets artificial capitalization, and goals show units like “30 reps left”.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Summary cards are easier to read',
|
||||
detail:
|
||||
'Long values no longer get clipped, and the card grid behaves better on desktop widths.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Safe renderer preview for UI checks',
|
||||
detail:
|
||||
'Added dev:renderer so the UI can be opened with demo data without touching real settings.',
|
||||
tag: 'new'
|
||||
}
|
||||
]
|
||||
},
|
||||
'0.6.5': {
|
||||
ru: [
|
||||
{
|
||||
title: 'Главный экран стал обзором действий',
|
||||
detail:
|
||||
'Верхний заголовок теперь показывает состояние: что сделать сейчас, что ждёт, пауза или встреча.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Исправлен запуск с Windows',
|
||||
detail:
|
||||
'Проверка автозапуска теперь использует тот же путь и аргументы, что и запись в Windows.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Discord больше не ставит перерывы на паузу',
|
||||
detail:
|
||||
'Авто-пауза встреч реагирует на Zoom, Teams, Webex и Slack-huddle, но не на обычный Discord.',
|
||||
tag: 'fix'
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
title: 'The main screen is now an action overview',
|
||||
detail:
|
||||
'The header shows the current state: what to do now, what is due, pause or meeting.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Fixed Start with Windows',
|
||||
detail:
|
||||
'Autostart now reads Windows login items with the same path and arguments it writes.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Discord no longer pauses breaks',
|
||||
detail:
|
||||
'Meeting auto-pause still handles Zoom, Teams, Webex and Slack-huddle, but ignores Discord.',
|
||||
tag: 'fix'
|
||||
}
|
||||
]
|
||||
},
|
||||
'0.6.4': {
|
||||
ru: [
|
||||
{
|
||||
@@ -193,7 +343,7 @@ export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
|
||||
{
|
||||
title: 'Видно когда мы молчим из-за ВКС',
|
||||
detail:
|
||||
'Запущен Zoom/Teams — на Dashboard баннер «Не дёргаем — ты на встрече».',
|
||||
'Запущен Zoom/Teams — на Dashboard появляется баннер активной встречи.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
@@ -276,7 +426,7 @@ export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
|
||||
{
|
||||
title: 'Авто-пауза на ВКС',
|
||||
detail:
|
||||
'Не дёргает напоминаниями, если запущен Zoom/Teams/Discord/Webex/Slack-huddle.',
|
||||
'Ставит напоминания на паузу, если запущен Zoom/Teams/Webex/Slack-huddle.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
@@ -323,7 +473,7 @@ export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
|
||||
{
|
||||
title: 'Meeting auto-pause',
|
||||
detail:
|
||||
'No reminders while Zoom/Teams/Discord/Webex/Slack-huddle is running.',
|
||||
'Pauses reminders while Zoom/Teams/Webex/Slack-huddle is running.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -105,7 +105,7 @@ export type Settings = {
|
||||
voicePromptsEnabled: boolean
|
||||
/**
|
||||
* Авто-пауза напоминаний во время ВКС-звонков. Сканирует список процессов
|
||||
* (Zoom/Teams/Discord/Webex/Slack-huddle/etc) раз в 30 сек, если хоть один
|
||||
* (Zoom/Teams/Webex/Slack-huddle/etc) раз в 30 сек, если хоть один
|
||||
* запущен — fires не происходят. Чисто Windows (через tasklist).
|
||||
*/
|
||||
meetingAutoPause: boolean
|
||||
|
||||
@@ -5,7 +5,7 @@ export default {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// iOS semantic palette
|
||||
// Desktop semantic palette
|
||||
accent: 'rgb(var(--accent) / <alpha-value>)',
|
||||
'accent-soft': 'rgb(var(--accent-soft) / <alpha-value>)',
|
||||
'accent-2': 'rgb(var(--accent-2) / <alpha-value>)',
|
||||
@@ -20,6 +20,9 @@ export default {
|
||||
surface: 'rgb(var(--surface) / <alpha-value>)',
|
||||
'surface-2': 'rgb(var(--surface-2) / <alpha-value>)',
|
||||
'surface-elevated': 'rgb(var(--surface-elevated) / <alpha-value>)',
|
||||
sidebar: 'rgb(var(--sidebar) / <alpha-value>)',
|
||||
'sidebar-text': 'rgb(var(--sidebar-text) / <alpha-value>)',
|
||||
'sidebar-muted': 'rgb(var(--sidebar-muted) / <alpha-value>)',
|
||||
|
||||
// Text & lines
|
||||
text: 'rgb(var(--text) / <alpha-value>)',
|
||||
@@ -68,15 +71,14 @@ export default {
|
||||
]
|
||||
},
|
||||
borderRadius: {
|
||||
// iOS-specific radii
|
||||
xl: '14px',
|
||||
'2xl': '18px',
|
||||
'3xl': '22px'
|
||||
xl: '8px',
|
||||
'2xl': '10px',
|
||||
'3xl': '12px'
|
||||
},
|
||||
boxShadow: {
|
||||
ios: '0 0.5px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04)',
|
||||
ios: '0 1px 2px rgb(15 23 42 / 0.06), 0 10px 28px -24px rgb(15 23 42 / 0.35)',
|
||||
sheet:
|
||||
'0 1px 2px rgb(0 0 0 / 0.06), 0 20px 50px -16px rgb(0 0 0 / 0.4)'
|
||||
'0 1px 2px rgb(15 23 42 / 0.08), 0 24px 60px -28px rgb(15 23 42 / 0.45)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
19
vite.renderer.config.mjs
Normal file
19
vite.renderer.config.mjs
Normal file
@@ -0,0 +1,19 @@
|
||||
import { resolve } from 'node:path'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
root: resolve('src/renderer'),
|
||||
resolve: {
|
||||
alias: {
|
||||
'@renderer': resolve('src/renderer/src'),
|
||||
'@shared': resolve('src/shared')
|
||||
}
|
||||
},
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '127.0.0.1',
|
||||
port: 5173,
|
||||
strictPort: true
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user