Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e44617189a | ||
|
|
dfa1898332 | ||
|
|
a92f642a3e | ||
|
|
8176df3ca2 | ||
|
|
20a260d0cc |
51
CHANGELOG.md
51
CHANGELOG.md
@@ -6,23 +6,37 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [0.7.0] — 2026-06-08
|
||||
## [0.8.0] — 2026-06-09
|
||||
|
||||
### Added
|
||||
|
||||
- Текущая версия `v0.6.6` сохранена отдельным тегом `последнее-удачное`
|
||||
как точка отката перед большим редизайном.
|
||||
- На `Обзор` добавлен помощник дня: рекомендации по пропускам, питанию,
|
||||
вечерним провалам, первому запуску и хорошему ритму.
|
||||
- Добавлены разминка-сессии на 3/5/10 минут: приложение собирает короткий
|
||||
набор действий из включённых упражнений и записывает выполнение в историю.
|
||||
- Добавлена компактная недельная аналитика: активные дни, повторы, процент
|
||||
закрытия, пропуски и лучший день.
|
||||
- На странице `Упражнения` появились пресеты: офисная разминка, спина и шея,
|
||||
минимум на день и набор после катки.
|
||||
- В `Настройки` добавлен тон напоминаний: спокойный, краткий, настойчивый или
|
||||
с юмором.
|
||||
- Dota-долг после матча теперь предлагает разбивать большой объём на подходы:
|
||||
сколько сделать сейчас и сколько можно оставить на потом.
|
||||
|
||||
### Changed
|
||||
|
||||
- Интерфейс приложения пересобран в новом desktop-направлении: темный сайдбар,
|
||||
плотный рабочий контент, нейтральная палитра, чёткие панели и радиусы 8–10px.
|
||||
- Главный экран стал операционным overview: верхняя панель состояния, компактные
|
||||
status tiles, план ближайшего шага, цели, питание, режим и игровые долги.
|
||||
- Страницы упражнений, питания, игр, челленджей и настроек получили единый
|
||||
desktop-контейнер, более плотные списки и менее декоративные summary-блоки.
|
||||
- Редакторы, модальные окна, кнопки, переключатели, heatmap, достижения и окно
|
||||
напоминания приведены к новой desktop-системе.
|
||||
- Новый набор фич встроен в существующий `v0.6.6` / `последнее-удачное`
|
||||
интерфейс без возврата к отклонённому редизайну `v0.7.0`.
|
||||
|
||||
## [0.7.1] — 2026-06-09
|
||||
|
||||
### Changed
|
||||
|
||||
- Полный редизайн `v0.7.0` откачен: интерфейс возвращен к сохраненной
|
||||
версии `последнее-удачное` / `v0.6.6`, потому что новое направление не
|
||||
подошло.
|
||||
- `v0.7.1` публикуется как обычное обновление, чтобы пользователи на `v0.7.0`
|
||||
автоматически получили возврат к последнему удачному внешнему виду.
|
||||
|
||||
## [0.6.6] — 2026-06-08
|
||||
|
||||
@@ -188,7 +202,7 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
### Fixed (P1 — UX просадки)
|
||||
|
||||
- **Удаление упражнения теперь спрашивает подтверждение.** Раньше
|
||||
один клик в menu «Удалить» сразу удалял. Сейчас ConfirmModal
|
||||
один клик в menu «Удалить» сразу удалял. Сейчас iOS-style ConfirmModal
|
||||
с destructive-кнопкой.
|
||||
- **Daily goal закрыт — больше не «25 часов 13 минут».** Когда дневная
|
||||
цель достигнута, ExerciseCard показывает «Цель закрыта · 100/100»
|
||||
@@ -197,7 +211,7 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
молча — пользователь не понимал почему через 12 мин ничего не пришло.
|
||||
Сейчас info-баннер активной встречи с указанием закрыть
|
||||
Zoom/Teams/etc.
|
||||
- **Native `window.confirm()` → ConfirmModal** в restore-операции.
|
||||
- **Native `window.confirm()` → iOS-style ConfirmModal** в restore-операции.
|
||||
Раньше всплывал серый системный диалог.
|
||||
|
||||
### Fixed (P2 — полировка)
|
||||
@@ -223,7 +237,7 @@ clearHistory/import`, Dashboard на него подписан.
|
||||
### Added
|
||||
|
||||
- `src/renderer/src/components/ui/ConfirmModal.tsx` — переиспользуемый
|
||||
confirm с focus-trap'ом через Modal.
|
||||
iOS-style confirm с focus-trap'ом через Modal.
|
||||
- IPC `markChallengeDone(challengeId, reps)` — handler в main, метод в
|
||||
preload (раньше канал был в IPC enum, handler не зарегистрирован).
|
||||
- IPC `getMeetingActive` + event `evtMeetingChanged` — meeting-detect
|
||||
@@ -550,9 +564,9 @@ days=[Mon..Fri]` теперь правильно проверяется день
|
||||
|
||||
## [0.3.x] — 2026-05-17
|
||||
|
||||
Серия мелких релизов с ранними дизайн-итерациями:
|
||||
Серия мелких релизов с дизайн-итерациями (Apple iOS / macOS aesthetic):
|
||||
шрифты Plus Jakarta Sans + Bricolage Grotesque, светлая/тёмная/системная
|
||||
тема, полупрозрачный сайдбар, grouped lists, spring-анимации.
|
||||
тема, vibrancy sidebar, iOS-grouped lists, spring-анимации.
|
||||
|
||||
## [0.2.0] — 2026-05-16
|
||||
|
||||
@@ -568,8 +582,9 @@ days=[Mon..Fri]` теперь правильно проверяется день
|
||||
иконки), системный трей, автозапуск с Windows, native-уведомления,
|
||||
NSIS-инсталлятор, auto-update через electron-updater.
|
||||
|
||||
[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
|
||||
[Unreleased]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.8.0...HEAD
|
||||
[0.8.0]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.7.1...v0.8.0
|
||||
[0.7.1]: https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/compare/v0.7.0...v0.7.1
|
||||
[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
|
||||
|
||||
10
README.md
10
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)
|
||||
[]()
|
||||
[]()
|
||||
|
||||
## Что внутри
|
||||
@@ -12,10 +12,12 @@ Windows desktop приложение, которое помогает делат
|
||||
- **Питание** — отдельная вкладка с приёмами пищи по времени суток (завтрак/обед/ужин/перекусы), выбор дней недели, пресеты быстрого добавления. Напоминания по настенным часам, а не по интервалу.
|
||||
- **История и стрики** — heatmap-календарь активности, ежедневный счётчик, серия дней подряд.
|
||||
- **Обзор** — главный экран с ближайшим действием, планом дня, уровнем, недельными мини-челленджами и игровым долгом.
|
||||
- **Помощник дня** — советы по пропускам, питанию, вечерним провалам, короткие разминка-сессии и недельная аналитика.
|
||||
- **Пресеты** — готовые наборы упражнений для офиса, спины/шеи, минимального дня и нагрузки после катки.
|
||||
- **Тихие часы** — окно времени когда напоминания подавляются (например `22:00 → 08:00`), с выбором дней недели.
|
||||
- **Сделал частично** — степпер `−/+` в окне напоминания: если ты сделал 5 из 10, в историю запишется честное число.
|
||||
- **Игровая интеграция (Dota 2)** — Game State Integration читает статистику матча, после Победа/Поражение показывает экран с «причитающимися» повторениями (например `10 смертей × 3 = 30 приседаний`).
|
||||
- **Desktop-интерфейс** — темный сайдбар, плотные рабочие панели, чёткие строки списков, светлая/тёмная/системная тема.
|
||||
- **Игровая интеграция (Dota 2)** — Game State Integration читает статистику матча, после Победа/Поражение показывает экран с «причитающимися» повторениями и помогает разбить большой долг на подходы.
|
||||
- **Фирменный desktop-интерфейс** — Plus Jakarta Sans + Bricolage Grotesque, мягкая палитра, sidebar, spring-анимации, светлая/тёмная/системная тема.
|
||||
- **Два языка** — русский и английский, переключение мгновенное.
|
||||
- **Auto-update** — приложение само скачивает новые версии из фиксированного `update-channel` (проверка каждый час, силент-ретрай при сетевых сбоях).
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "laude",
|
||||
"version": "0.7.0",
|
||||
"version": "0.8.0",
|
||||
"description": "Разомнись — Windows desktop break and exercise reminder",
|
||||
"main": "out/main/index.js",
|
||||
"author": "AnRil",
|
||||
|
||||
@@ -142,6 +142,7 @@ function safeStr(v: unknown, max = 200): string | undefined {
|
||||
const SETTINGS_KEYS: (keyof Settings)[] = [
|
||||
'globalEnabled',
|
||||
'notificationMode',
|
||||
'notificationTone',
|
||||
'soundEnabled',
|
||||
'voicePromptsEnabled',
|
||||
'meetingAutoPause',
|
||||
|
||||
@@ -21,6 +21,7 @@ import type {
|
||||
Theme,
|
||||
Language,
|
||||
NotificationMode,
|
||||
NotificationTone,
|
||||
ReminderCategory
|
||||
} from '@shared/types'
|
||||
|
||||
@@ -28,6 +29,7 @@ const MAX_STR_LEN = 200
|
||||
const VALID_THEMES: Theme[] = ['system', 'light', 'dark']
|
||||
const VALID_LANGS: Language[] = ['ru', 'en']
|
||||
const VALID_NOTIFY: NotificationMode[] = ['toast', 'modal', 'both']
|
||||
const VALID_TONES: NotificationTone[] = ['calm', 'brief', 'firm', 'playful']
|
||||
const VALID_GAME_IDS: GameId[] = ['dota2']
|
||||
const VALID_STATS: GameStat[] = [
|
||||
'deaths',
|
||||
@@ -416,6 +418,11 @@ export function validateSettingsPatch(raw: unknown): Partial<Settings> | null {
|
||||
if (v === undefined) return null
|
||||
out.notificationMode = v
|
||||
}
|
||||
if ('notificationTone' in raw) {
|
||||
const v = oneOf(raw.notificationTone, VALID_TONES)
|
||||
if (v === undefined) return null
|
||||
out.notificationTone = v
|
||||
}
|
||||
if ('theme' in raw) {
|
||||
const v = oneOf(raw.theme, VALID_THEMES)
|
||||
if (v === undefined) return null
|
||||
|
||||
@@ -89,14 +89,14 @@ export default function App(): JSX.Element {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<HashRouter>
|
||||
<div className="h-screen w-screen flex flex-col app-shell bg-bg">
|
||||
<div className="h-screen w-screen flex flex-col bg-bg">
|
||||
<Titlebar onMenuClick={() => setCompactNavOpen(true)} />
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<Sidebar
|
||||
compactOpen={compactNavOpen}
|
||||
onCompactClose={() => setCompactNavOpen(false)}
|
||||
/>
|
||||
<main className="flex-1 overflow-hidden min-w-0 app-main-surface">
|
||||
<main className="flex-1 overflow-hidden min-w-0">
|
||||
{hydrated ? (
|
||||
<ErrorBoundary>
|
||||
<RoutedPages onNav={() => setCompactNavOpen(false)} />
|
||||
|
||||
@@ -16,13 +16,15 @@ import type {
|
||||
Meal,
|
||||
Settings,
|
||||
ChallengeResult,
|
||||
Language
|
||||
Language,
|
||||
NotificationTone
|
||||
} from '@shared/types'
|
||||
import { statLabel } from '@shared/types'
|
||||
import { Icon } from './lib/icon'
|
||||
import { formatInterval } from './lib/format'
|
||||
import { speak } from './lib/tts'
|
||||
import { translate, translateN } from './i18n'
|
||||
import { planGameDebt } from './lib/wellness'
|
||||
|
||||
type Mode =
|
||||
| { kind: 'idle' }
|
||||
@@ -193,6 +195,7 @@ export default function ReminderApp(): JSX.Element {
|
||||
exercise={mode.exercise}
|
||||
snoozeMinutes={settings?.snoozeMinutes ?? 5}
|
||||
lang={lang}
|
||||
tone={settings?.notificationTone ?? 'calm'}
|
||||
onClose={close}
|
||||
/>
|
||||
)
|
||||
@@ -204,6 +207,7 @@ export default function ReminderApp(): JSX.Element {
|
||||
meal={mode.meal}
|
||||
snoozeMinutes={settings?.snoozeMinutes ?? 5}
|
||||
lang={lang}
|
||||
tone={settings?.notificationTone ?? 'calm'}
|
||||
onClose={close}
|
||||
/>
|
||||
)
|
||||
@@ -213,6 +217,7 @@ export default function ReminderApp(): JSX.Element {
|
||||
summary={mode.summary}
|
||||
done={mode.done}
|
||||
lang={lang}
|
||||
tone={settings?.notificationTone ?? 'calm'}
|
||||
onMarkDone={(id) => {
|
||||
// Дедупликация: rapid double-click может два раза вызвать
|
||||
// onMarkDone до того как `disabled={done}` доедет до DOM.
|
||||
@@ -246,11 +251,13 @@ function ExerciseReminder({
|
||||
exercise,
|
||||
snoozeMinutes,
|
||||
lang,
|
||||
tone,
|
||||
onClose
|
||||
}: {
|
||||
exercise: Exercise
|
||||
snoozeMinutes: number
|
||||
lang: Language
|
||||
tone: NotificationTone
|
||||
onClose: () => void
|
||||
}): JSX.Element {
|
||||
const t = (key: string, vars?: Record<string, string | number>): string =>
|
||||
@@ -328,7 +335,7 @@ function ExerciseReminder({
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
||||
className="relative mb-6"
|
||||
>
|
||||
<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)]">
|
||||
<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)]">
|
||||
<Icon name={exercise.icon} size={44} strokeWidth={2} />
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -336,7 +343,15 @@ function ExerciseReminder({
|
||||
<div className="text-[13px] uppercase tracking-[0.18em] text-accent font-bold">
|
||||
{t(`category.${exercise.category ?? 'exercise'}.cta`)}
|
||||
</div>
|
||||
<h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
|
||||
<div className="mt-3 text-[13px] text-text/65 font-medium leading-snug max-w-[260px]">
|
||||
{reminderToneLine({
|
||||
tone,
|
||||
lang,
|
||||
kind: 'exercise',
|
||||
name: exercise.name
|
||||
})}
|
||||
</div>
|
||||
<h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
|
||||
{exercise.name}
|
||||
</h1>
|
||||
|
||||
@@ -344,7 +359,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-lg bg-surface-2 text-text/65 hover:text-text hover:bg-hairline/25 active:scale-95 transition-all"
|
||||
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"
|
||||
aria-label={t('reminder.aria.decrement')}
|
||||
>
|
||||
<Minus size={16} strokeWidth={2.5} />
|
||||
@@ -352,7 +367,7 @@ function ExerciseReminder({
|
||||
<div className="inline-flex items-baseline gap-2 font-mono-num min-w-[120px] justify-center">
|
||||
<span
|
||||
className={[
|
||||
'text-[54px] font-semibold leading-none',
|
||||
'text-[56px] font-semibold tracking-tight leading-none',
|
||||
adjusted ? 'text-accent' : 'text-text'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -364,7 +379,7 @@ function ExerciseReminder({
|
||||
</div>
|
||||
<button
|
||||
onClick={inc}
|
||||
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"
|
||||
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"
|
||||
aria-label={t('reminder.aria.increment')}
|
||||
>
|
||||
<Plus size={16} strokeWidth={2.5} />
|
||||
@@ -390,21 +405,21 @@ function ExerciseReminder({
|
||||
<div className="px-4 pb-4 space-y-2">
|
||||
<button
|
||||
onClick={done}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Check size={17} strokeWidth={2.5} /> {t('reminder.btn.done')}
|
||||
</button>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={snooze}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Clock size={15} strokeWidth={2.5} />{' '}
|
||||
{t('btn.snooze_min', { n: snoozeMinutes })}
|
||||
</button>
|
||||
<button
|
||||
onClick={skip}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
{t('btn.skip')}
|
||||
</button>
|
||||
@@ -418,11 +433,13 @@ function MealReminder({
|
||||
meal,
|
||||
snoozeMinutes,
|
||||
lang,
|
||||
tone,
|
||||
onClose
|
||||
}: {
|
||||
meal: Meal
|
||||
snoozeMinutes: number
|
||||
lang: Language
|
||||
tone: NotificationTone
|
||||
onClose: () => void
|
||||
}): JSX.Element {
|
||||
const t = (key: string, vars?: Record<string, string | number>): string =>
|
||||
@@ -482,7 +499,7 @@ function MealReminder({
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
||||
className="relative mb-6"
|
||||
>
|
||||
<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)]">
|
||||
<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)]">
|
||||
<Icon name={meal.icon} size={44} strokeWidth={2} />
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -490,7 +507,10 @@ function MealReminder({
|
||||
<div className="text-[13px] uppercase tracking-[0.18em] text-success font-bold">
|
||||
{t('meal.cta')}
|
||||
</div>
|
||||
<h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
|
||||
<div className="mt-3 text-[13px] text-text/65 font-medium leading-snug max-w-[260px]">
|
||||
{reminderToneLine({ tone, lang, kind: 'meal', name: meal.name })}
|
||||
</div>
|
||||
<h1 className="font-serif text-[30px] leading-tight tracking-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">
|
||||
@@ -501,13 +521,13 @@ function MealReminder({
|
||||
<div className="px-4 pb-4 space-y-2">
|
||||
<button
|
||||
onClick={done}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Check size={17} strokeWidth={2.5} /> {t('meal.btn.ate')}
|
||||
</button>
|
||||
<button
|
||||
onClick={snooze}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Clock size={15} strokeWidth={2.5} />{' '}
|
||||
{t('btn.snooze_min', { n: snoozeMinutes })}
|
||||
@@ -521,12 +541,14 @@ function MatchSummaryView({
|
||||
summary,
|
||||
done,
|
||||
lang,
|
||||
tone,
|
||||
onMarkDone,
|
||||
onClose
|
||||
}: {
|
||||
summary: MatchSummary
|
||||
done: Set<string>
|
||||
lang: Language
|
||||
tone: NotificationTone
|
||||
onMarkDone: (id: string) => void
|
||||
onClose: () => void
|
||||
}): JSX.Element {
|
||||
@@ -540,6 +562,7 @@ function MatchSummaryView({
|
||||
|
||||
const allDone = summary.results.every((r) => done.has(r.challengeId))
|
||||
const totalReps = summary.results.reduce((s, r) => s + r.reps, 0)
|
||||
const debtPlan = planGameDebt(totalReps)
|
||||
const remainingReps = summary.results
|
||||
.filter((r) => !done.has(r.challengeId))
|
||||
.reduce((s, r) => s + r.reps, 0)
|
||||
@@ -568,7 +591,7 @@ function MatchSummaryView({
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 280, damping: 22 }}
|
||||
className={[
|
||||
'inline-flex items-center justify-center w-12 h-12 rounded-xl mb-3 text-white',
|
||||
'inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-3 text-white',
|
||||
won ? 'bg-success' : lost ? 'bg-destructive' : 'bg-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -580,7 +603,7 @@ function MatchSummaryView({
|
||||
<Gamepad2 size={26} strokeWidth={2} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h1 className="font-display text-[25px] font-bold">
|
||||
<h1 className="font-serif text-[26px] tracking-tight font-bold">
|
||||
{won
|
||||
? t('match.title.won')
|
||||
: lost
|
||||
@@ -602,6 +625,17 @@ function MatchSummaryView({
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{totalReps > 0 && (
|
||||
<div className="mt-3 rounded-2xl bg-surface-2 px-3 py-2 text-[12px] text-text/68 font-medium leading-snug">
|
||||
{matchToneLine({ tone, lang, total: totalReps })}
|
||||
<span className="block mt-1 font-mono-num text-text">
|
||||
{t('match.debt_plan', {
|
||||
now: debtPlan.now,
|
||||
later: debtPlan.later
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-3 space-y-1.5 pb-2">
|
||||
@@ -627,7 +661,7 @@ function MatchSummaryView({
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={[
|
||||
'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',
|
||||
'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',
|
||||
allDone ? 'bg-success' : 'bg-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -662,13 +696,13 @@ function ChallengeRow({
|
||||
initial={{ opacity: 0, x: -8 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className={[
|
||||
'flex items-center gap-3 rounded-lg p-3 transition-colors',
|
||||
'flex items-center gap-3 rounded-2xl p-3 transition-colors',
|
||||
done ? 'bg-success/10' : 'bg-surface-2'
|
||||
].join(' ')}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
'w-9 h-9 rounded-lg grid place-items-center shrink-0',
|
||||
'w-10 h-10 rounded-xl grid place-items-center shrink-0',
|
||||
done ? 'bg-success text-white' : 'bg-accent text-white'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -692,7 +726,7 @@ function ChallengeRow({
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'font-mono-num text-[20px] font-semibold',
|
||||
'font-mono-num text-[20px] font-semibold tracking-tight',
|
||||
done ? 'text-success' : 'text-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -702,7 +736,7 @@ function ChallengeRow({
|
||||
onClick={onMarkDone}
|
||||
disabled={done}
|
||||
className={[
|
||||
'h-9 w-9 grid place-items-center rounded-lg transition-all',
|
||||
'h-9 w-9 grid place-items-center rounded-full transition-all',
|
||||
done
|
||||
? 'bg-success text-white cursor-default'
|
||||
: 'bg-accent text-white active:scale-90'
|
||||
@@ -714,6 +748,60 @@ function ChallengeRow({
|
||||
)
|
||||
}
|
||||
|
||||
function reminderToneLine({
|
||||
tone,
|
||||
lang,
|
||||
kind,
|
||||
name
|
||||
}: {
|
||||
tone: NotificationTone
|
||||
lang: Language
|
||||
kind: 'exercise' | 'meal'
|
||||
name: string
|
||||
}): string {
|
||||
if (lang === 'en') {
|
||||
if (tone === 'brief') return kind === 'meal' ? 'Eat now.' : 'Do it now.'
|
||||
if (tone === 'firm') return `No delay: ${name}.`
|
||||
if (tone === 'playful')
|
||||
return kind === 'meal' ? 'Fuel break.' : 'Tiny win time.'
|
||||
return kind === 'meal'
|
||||
? 'A calm food break fits here.'
|
||||
: 'A short reset fits here.'
|
||||
}
|
||||
|
||||
if (tone === 'brief')
|
||||
return kind === 'meal' ? 'Поесть сейчас.' : 'Сделай сейчас.'
|
||||
if (tone === 'firm') return `Не откладываем: ${name}.`
|
||||
if (tone === 'playful')
|
||||
return kind === 'meal' ? 'Дозаправка.' : 'Маленькая победа.'
|
||||
return kind === 'meal'
|
||||
? 'Спокойный перерыв на еду здесь к месту.'
|
||||
: 'Короткая перезагрузка здесь к месту.'
|
||||
}
|
||||
|
||||
function matchToneLine({
|
||||
tone,
|
||||
lang,
|
||||
total
|
||||
}: {
|
||||
tone: NotificationTone
|
||||
lang: Language
|
||||
total: number
|
||||
}): string {
|
||||
if (lang === 'en') {
|
||||
if (tone === 'brief') return `${total} reps. Split it.`
|
||||
if (tone === 'firm')
|
||||
return `Close the match debt in small sets: ${total} reps.`
|
||||
if (tone === 'playful') return `The match left a receipt: ${total} reps.`
|
||||
return `No need to do everything at once. Split ${total} reps into sets.`
|
||||
}
|
||||
|
||||
if (tone === 'brief') return `${total} повторов. Разбиваем.`
|
||||
if (tone === 'firm') return `Закрываем долг подходами: ${total} повторов.`
|
||||
if (tone === 'playful') return `Катка оставила чек: ${total} повторов.`
|
||||
return `Не нужно делать всё одним куском. Разбей ${total} повторов на подходы.`
|
||||
}
|
||||
|
||||
/**
|
||||
* CLDR-минимум для русского склонения «раз». 1 раз / 2 раза / 5 раз.
|
||||
* Не тащим сюда полную плюрализацию из i18n — это TTS-only фраза.
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
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,
|
||||
@@ -113,7 +106,7 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
|
||||
if (visible.length === 0) return <></>
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<div className="bg-surface rounded-2xl p-5 shadow-card dark:ring-0.5 dark:ring-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">
|
||||
@@ -132,7 +125,11 @@ 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>
|
||||
@@ -180,7 +177,7 @@ function Badge({
|
||||
: {}
|
||||
}
|
||||
className={[
|
||||
'rounded-lg p-2.5 transition-opacity',
|
||||
'rounded-xl p-2.5 transition-opacity',
|
||||
a.unlocked ? 'bg-surface-2' : 'bg-surface-2 opacity-55'
|
||||
].join(' ')}
|
||||
title={t(a.def.descKey, { target: a.target })}
|
||||
@@ -188,7 +185,7 @@ function Badge({
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<div
|
||||
className={[
|
||||
'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
|
||||
'w-7 h-7 rounded-lg grid place-items-center text-white shrink-0',
|
||||
a.unlocked ? toneBg : 'bg-text/30'
|
||||
].join(' ')}
|
||||
>
|
||||
|
||||
@@ -19,6 +19,11 @@ 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,
|
||||
@@ -110,31 +115,32 @@ 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-xl p-4 shadow-card border border-hairline/30"
|
||||
className="relative bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="relative w-12 h-12 shrink-0">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Icon + progress ring */}
|
||||
<div className="relative w-14 h-14 shrink-0">
|
||||
<svg
|
||||
className="absolute inset-0 -rotate-90"
|
||||
viewBox="0 0 48 48"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 56 56"
|
||||
width="56"
|
||||
height="56"
|
||||
>
|
||||
<circle
|
||||
cx="24"
|
||||
cy="24"
|
||||
cx="28"
|
||||
cy="28"
|
||||
r={R}
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
strokeWidth="2.5"
|
||||
className="stroke-hairline/15 dark:stroke-hairline/30"
|
||||
/>
|
||||
{exercise.enabled && (
|
||||
<circle
|
||||
cx="24"
|
||||
cy="24"
|
||||
cx="28"
|
||||
cy="28"
|
||||
r={R}
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={C}
|
||||
strokeDashoffset={dashOffset}
|
||||
@@ -145,7 +151,7 @@ export function ExerciseCard({
|
||||
</svg>
|
||||
<div
|
||||
className={[
|
||||
'absolute inset-[7px] rounded-lg grid place-items-center',
|
||||
'absolute inset-[8px] rounded-full grid place-items-center',
|
||||
exercise.enabled
|
||||
? 'bg-accent/10 text-accent'
|
||||
: 'bg-surface-2 text-text/40'
|
||||
@@ -157,14 +163,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-[17px] font-bold leading-tight truncate">
|
||||
<h3 className="font-display text-[18px] 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-md text-text/45 hover:bg-surface-2 active:scale-95 transition-all"
|
||||
className="w-7 h-7 grid place-items-center rounded-full text-text/45 hover:bg-surface-2 active:scale-90 transition-all"
|
||||
aria-label={t('titlebar.menu_aria')}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpen}
|
||||
@@ -182,7 +188,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-lg shadow-sheet ring-1 ring-hairline/30 py-1 overflow-hidden"
|
||||
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"
|
||||
>
|
||||
<button
|
||||
role="menuitem"
|
||||
@@ -209,16 +215,17 @@ export function ExerciseCard({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[13px] text-text/60 mt-1 font-medium">
|
||||
<div className="text-[14px] text-text/65 mt-1 font-medium">
|
||||
{t('editor.exercise.preview.meta', {
|
||||
reps: exercise.reps,
|
||||
min: exercise.intervalMinutes
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-end justify-between mt-3">
|
||||
{/* Countdown + switch */}
|
||||
<div className="flex items-end justify-between mt-3.5">
|
||||
<div>
|
||||
<div className="text-[12px] text-text/60 font-semibold inline-flex items-center gap-1">
|
||||
<div className="text-[12px] text-text/60 uppercase tracking-wider font-semibold inline-flex items-center gap-1">
|
||||
{goalReached ? (
|
||||
<>
|
||||
<CheckCircle2
|
||||
@@ -244,7 +251,7 @@ export function ExerciseCard({
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'font-mono-num text-[22px] font-bold leading-none mt-1',
|
||||
'font-mono-num text-[24px] font-bold leading-none mt-1 tracking-tight',
|
||||
goalReached
|
||||
? 'text-success'
|
||||
: isDue
|
||||
@@ -276,7 +283,7 @@ export function ExerciseCard({
|
||||
initial={{ opacity: 0, y: 4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onClick={handleMarkDone}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<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-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">
|
||||
<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">
|
||||
<Icon name={draft.icon} size={26} strokeWidth={2.2} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-display text-[18px] font-semibold truncate">
|
||||
<div className="font-display text-[18px] font-semibold tracking-tight 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-9 px-2 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px truncate',
|
||||
'h-10 px-2 rounded-xl text-[13px] font-semibold transition-all active:scale-95 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-lg bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
|
||||
className="h-9 px-3 rounded-xl bg-surface-2 text-text/65 text-[13px] font-semibold hover:text-text"
|
||||
>
|
||||
{t('editor.field.daily_goal.clear')}
|
||||
</button>
|
||||
@@ -200,7 +200,9 @@ 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>
|
||||
@@ -214,14 +216,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-lg bg-surface-2">
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl 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-lg transition-colors active:translate-y-px',
|
||||
'h-10 w-10 grid place-items-center rounded-xl transition-all active:scale-90',
|
||||
draft.icon === name
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface text-text/65 hover:text-text'
|
||||
@@ -239,9 +241,9 @@ export function ExerciseEditor({
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(var(--hairline) / 0.35);
|
||||
background: rgb(var(--surface));
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: rgb(var(--surface-2));
|
||||
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-xl p-4 shadow-card border border-hairline/30">
|
||||
<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="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-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">
|
||||
<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">
|
||||
<Icon name={draft.icon} size={26} strokeWidth={2.2} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-display text-[18px] font-semibold truncate">
|
||||
<div className="font-display text-[18px] font-semibold tracking-tight 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-9 rounded-lg text-[13px] font-semibold transition-colors active:translate-y-px',
|
||||
'h-10 rounded-xl text-[13px] font-semibold transition-all active:scale-95',
|
||||
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-lg bg-surface-2">
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl 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-lg transition-colors active:translate-y-px',
|
||||
'h-10 w-10 grid place-items-center rounded-xl transition-all active:scale-90',
|
||||
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: 8px;
|
||||
border: 1px solid rgb(var(--hairline) / 0.35);
|
||||
background: rgb(var(--surface));
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: rgb(var(--surface-2));
|
||||
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-[13px] text-text/60 font-bold">{kicker}</div>
|
||||
<h1 className="font-display text-[28px] sm:text-[32px] leading-tight mt-1 font-bold">
|
||||
<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">
|
||||
{title}
|
||||
</h1>
|
||||
{subtitle && (
|
||||
<p className="text-[14px] text-text/60 mt-1.5 font-medium leading-relaxed max-w-2xl">
|
||||
<p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
@@ -41,7 +41,7 @@ export function InsightGrid({
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 mb-6',
|
||||
'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-8',
|
||||
className
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -75,21 +75,21 @@ export function InsightCard({
|
||||
: 'bg-text/12 text-text/55'
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="bg-surface rounded-2xl p-4 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={[
|
||||
'w-8 h-8 rounded-lg grid place-items-center shrink-0',
|
||||
'w-9 h-9 rounded-xl grid place-items-center shrink-0',
|
||||
iconClass
|
||||
].join(' ')}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[12px] text-text/50 font-bold leading-tight">
|
||||
<div className="text-[12px] uppercase tracking-[0.06em] text-text/50 font-bold leading-tight">
|
||||
{label}
|
||||
</div>
|
||||
<div className="font-display text-[20px] font-bold leading-tight mt-1 break-words">
|
||||
<div className="font-display text-[22px] font-bold leading-tight mt-1 break-words">
|
||||
{value}
|
||||
</div>
|
||||
{hint && (
|
||||
|
||||
@@ -46,7 +46,7 @@ const items: Item[] = [
|
||||
to: '/settings',
|
||||
labelKey: 'nav.settings',
|
||||
icon: Settings2,
|
||||
tint: 'bg-sidebar-muted'
|
||||
tint: 'bg-text/70'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -63,6 +63,8 @@ export function Sidebar({
|
||||
const drawerRef = useRef<HTMLElement | null>(null)
|
||||
const lastFocusedRef = useRef<HTMLElement | null>(null)
|
||||
|
||||
// Esc closes + focus trap while the compact drawer is open. Mirrors the
|
||||
// pattern used in Modal.tsx for keyboard users.
|
||||
useEffect(() => {
|
||||
if (!compactOpen) return undefined
|
||||
lastFocusedRef.current = document.activeElement as HTMLElement | null
|
||||
@@ -88,14 +90,18 @@ 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()
|
||||
}
|
||||
@@ -103,7 +109,7 @@ export function Sidebar({
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside className="hidden md:flex w-[276px] shrink-0 bg-sidebar text-sidebar-text flex-col border-r border-black/25">
|
||||
<aside className="hidden md:flex w-64 shrink-0 vibrancy hairline-b border-r-0 flex-col">
|
||||
<SidebarContent />
|
||||
</aside>
|
||||
|
||||
@@ -117,7 +123,7 @@ export function Sidebar({
|
||||
transition={{ duration: 0.18 }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/35"
|
||||
className="absolute inset-0 bg-black/30 backdrop-blur-md"
|
||||
onClick={onCompactClose}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
@@ -129,7 +135,7 @@ export function Sidebar({
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t('sidebar.aria.nav')}
|
||||
className="relative w-72 max-w-[85vw] h-full bg-sidebar text-sidebar-text flex flex-col"
|
||||
className="relative w-72 max-w-[85vw] h-full vibrancy flex flex-col"
|
||||
initial={{ x: '-100%' }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: '-100%' }}
|
||||
@@ -137,7 +143,7 @@ export function Sidebar({
|
||||
>
|
||||
<button
|
||||
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"
|
||||
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"
|
||||
aria-label={t('btn.close')}
|
||||
>
|
||||
<X size={14} strokeWidth={2.5} />
|
||||
@@ -156,23 +162,16 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
const running = useAppStore((s) => s.state?.settings.globalEnabled ?? true)
|
||||
return (
|
||||
<>
|
||||
<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 className="px-5 pt-7 pb-6">
|
||||
<div className="font-serif text-[36px] leading-none tracking-tight font-bold">
|
||||
Разомнись
|
||||
</div>
|
||||
<div className="text-[12px] text-sidebar-muted font-medium">
|
||||
<div className="text-[13px] text-text/55 mt-2 font-medium">
|
||||
{t('sidebar.slogan')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="px-3 flex flex-col gap-1">
|
||||
<nav className="px-2.5 flex flex-col gap-1">
|
||||
{items.map(({ to, labelKey, icon: Icon, end, tint }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
@@ -181,32 +180,31 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
onClick={onNav}
|
||||
className={({ isActive }) =>
|
||||
[
|
||||
'group relative flex items-center gap-3 px-3 py-2 rounded-lg transition-colors duration-150',
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-xl transition-colors duration-150',
|
||||
isActive
|
||||
? 'bg-white/10 text-sidebar-text'
|
||||
: 'text-sidebar-muted hover:bg-white/[0.06] hover:text-sidebar-text'
|
||||
? 'bg-text/[0.06] dark:bg-white/[0.08]'
|
||||
: 'hover:bg-text/[0.04] dark:hover:bg-white/[0.04]'
|
||||
].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-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'
|
||||
'w-8 h-8 rounded-[9px] grid place-items-center text-white shrink-0',
|
||||
tint ?? 'bg-text/70'
|
||||
].join(' ')}
|
||||
>
|
||||
<Icon size={17} strokeWidth={2.2} />
|
||||
</div>
|
||||
<span className="text-[14px] truncate font-semibold">
|
||||
<span
|
||||
className={[
|
||||
'text-[15px] truncate',
|
||||
isActive
|
||||
? 'text-text font-semibold'
|
||||
: 'text-text/85 font-medium'
|
||||
].join(' ')}
|
||||
>
|
||||
{t(labelKey)}
|
||||
</span>
|
||||
</>
|
||||
@@ -215,26 +213,20 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
{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-2 w-2',
|
||||
'relative inline-flex rounded-full h-1.5 w-1.5',
|
||||
running ? 'bg-success' : 'bg-warning'
|
||||
].join(' ')}
|
||||
/>
|
||||
</span>
|
||||
<span className="font-semibold">
|
||||
{running
|
||||
? t('sidebar.status_tracking')
|
||||
: t('sidebar.status_paused')}
|
||||
</span>
|
||||
</div>
|
||||
{running ? t('sidebar.status_tracking') : t('sidebar.status_paused')}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -32,13 +32,13 @@ export function Titlebar({ title, onMenuClick }: Props): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
onDoubleClick={onDoubleClick}
|
||||
className="titlebar-drag relative h-9 px-2 sm:px-3 flex items-center justify-between bg-sidebar text-sidebar-text hairline-b"
|
||||
className="titlebar-drag relative h-10 px-2 sm:px-3 flex items-center justify-between vibrancy 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-white/10 text-sidebar-muted hover:text-sidebar-text transition-colors"
|
||||
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"
|
||||
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-semibold text-sidebar-muted truncate px-2">
|
||||
<div className="text-[12px] font-medium text-text/55 truncate px-2">
|
||||
{effectiveTitle}
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,9 @@ 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 ? (
|
||||
@@ -100,10 +102,10 @@ function WinBtn({
|
||||
onClick={onClick}
|
||||
aria-label={label}
|
||||
className={[
|
||||
'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-sidebar-muted',
|
||||
'titlebar-nodrag w-9 h-7 grid place-items-center rounded-md transition-colors text-text/55',
|
||||
danger
|
||||
? 'hover:bg-destructive hover:text-white'
|
||||
: 'hover:bg-white/10 hover:text-sidebar-text'
|
||||
: 'hover:bg-text/[0.08] hover:text-text'
|
||||
].join(' ')}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -25,7 +25,11 @@ 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
|
||||
@@ -64,7 +68,7 @@ function VersionSection({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-[12px] text-text/55 font-bold mb-3 font-mono-num">
|
||||
<div className="text-[12px] uppercase tracking-wider 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'
|
||||
|
||||
/**
|
||||
* Desktop button. Three primary flavours cover filled, bordered, and plain actions.
|
||||
* Press feedback stays subtle so dense tool surfaces do not jump around.
|
||||
* iOS-style button. Three primary flavours mirror iOS's filled / tinted / plain.
|
||||
* Press feedback is a subtle scale, mirroring UIKit's button highlight.
|
||||
*/
|
||||
type Variant = 'filled' | 'tinted' | 'plain' | 'destructive' | 'success'
|
||||
type Size = 'sm' | 'md' | 'lg'
|
||||
@@ -24,21 +24,19 @@ const legacyMap: Record<LegacyVariant, Variant> = {
|
||||
}
|
||||
|
||||
const variantClasses: Record<Variant, string> = {
|
||||
filled:
|
||||
'bg-accent text-white hover:bg-accent/90 active:bg-accent/85 shadow-[0_1px_0_rgb(255_255_255_/_0.18)_inset]',
|
||||
filled: 'bg-accent text-white hover:brightness-105 active:brightness-95',
|
||||
tinted:
|
||||
'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',
|
||||
'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',
|
||||
destructive:
|
||||
'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'
|
||||
'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'
|
||||
}
|
||||
|
||||
const sizeClasses: Record<Size, string> = {
|
||||
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'
|
||||
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'
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
|
||||
@@ -51,9 +49,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-colors duration-150 ease-out',
|
||||
'inline-flex items-center justify-center gap-1.5 font-semibold transition-all duration-150 ease-out',
|
||||
'disabled:opacity-40 disabled:cursor-not-allowed',
|
||||
'active:translate-y-px',
|
||||
'active:scale-[0.97]',
|
||||
variantClasses[v],
|
||||
sizeClasses[size],
|
||||
className
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
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 = ''
|
||||
@@ -10,7 +14,9 @@ export function Card({
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'bg-surface rounded-xl overflow-hidden border border-hairline/35 shadow-card',
|
||||
'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',
|
||||
className
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -19,6 +25,10 @@ export function Card({
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Section heading above a Card group — iOS Settings style: tiny uppercase
|
||||
* label, generous spacing.
|
||||
*/
|
||||
export function SectionHeader({
|
||||
title,
|
||||
hint,
|
||||
@@ -29,11 +39,13 @@ export function SectionHeader({
|
||||
action?: ReactNode
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="flex items-end justify-between mb-2.5">
|
||||
<div className="flex items-end justify-between px-4 mb-2.5">
|
||||
<div>
|
||||
<div className="text-[13px] font-bold text-text/70">{title}</div>
|
||||
<div className="text-[13px] font-semibold uppercase tracking-[0.06em] text-text/60">
|
||||
{title}
|
||||
</div>
|
||||
{hint && (
|
||||
<div className="text-[12px] text-text/55 mt-0.5 font-medium">
|
||||
<div className="text-[13px] text-text/55 mt-0.5 font-medium">
|
||||
{hint}
|
||||
</div>
|
||||
)}
|
||||
@@ -43,6 +55,10 @@ 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 = '',
|
||||
@@ -59,9 +75,9 @@ export function Row({
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={[
|
||||
'flex items-center gap-3 px-4 py-3 relative min-h-[58px]',
|
||||
'flex items-center gap-3 px-4 py-3 relative',
|
||||
interactive
|
||||
? 'cursor-pointer hover:bg-surface-2/65 active:bg-surface-2 transition-colors'
|
||||
? 'cursor-pointer active:bg-surface-2 dark:active:bg-white/5 transition-colors'
|
||||
: '',
|
||||
!last ? 'hairline-b' : '',
|
||||
className
|
||||
|
||||
@@ -18,10 +18,10 @@ type Props = {
|
||||
}
|
||||
|
||||
/**
|
||||
* Desktop confirm-диалог. Заменяет `window.confirm()` — нативный prompt
|
||||
* выглядит инородно в дизайне приложения и не поддерживает focus-trap.
|
||||
* Использует наш Modal под капотом, поэтому получаем focus-trap и
|
||||
* Esc-to-cancel бесплатно.
|
||||
* iOS-style confirm-диалог. Заменяет `window.confirm()` — нативный prompt
|
||||
* выглядит инородно в дизайне приложения, без вибрации accent-цвета и без
|
||||
* focus-trap'a. Использует наш Modal под капотом, поэтому получаем
|
||||
* focus-trap и Esc-to-cancel бесплатно.
|
||||
*/
|
||||
export function ConfirmModal({
|
||||
open,
|
||||
|
||||
@@ -27,6 +27,17 @@ 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,
|
||||
@@ -108,7 +119,7 @@ export function Modal({
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40"
|
||||
className="fixed inset-0 z-50 grid place-items-center p-4 bg-black/40 backdrop-blur-md"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -121,36 +132,39 @@ export function Modal({
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
className={[
|
||||
'relative w-full bg-surface rounded-xl shadow-sheet flex flex-col overflow-hidden border border-hairline/45',
|
||||
'relative w-full bg-surface rounded-3xl shadow-sheet flex flex-col overflow-hidden',
|
||||
sizeClass[size]
|
||||
].join(' ')}
|
||||
initial={{ scale: 0.98, y: 10, opacity: 0 }}
|
||||
initial={{ scale: 0.94, y: 24, opacity: 0 }}
|
||||
animate={{ scale: 1, y: 0, opacity: 1 }}
|
||||
exit={{ scale: 0.98, y: 6, opacity: 0 }}
|
||||
exit={{ scale: 0.96, y: 12, opacity: 0 }}
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 32 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-3 hairline-b bg-surface-elevated">
|
||||
{/* Header — iOS large modal title */}
|
||||
<div className="flex items-center justify-between px-5 pt-5 pb-3">
|
||||
<h2
|
||||
id={titleId}
|
||||
className="font-display text-[18px] font-semibold"
|
||||
className="font-display text-[20px] font-semibold tracking-tight"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
data-modal-close=""
|
||||
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"
|
||||
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"
|
||||
aria-label={t('btn.close')}
|
||||
>
|
||||
<X size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-5 overflow-y-auto max-h-[72vh]">{children}</div>
|
||||
<div className="px-5 pb-5 overflow-y-auto max-h-[70vh]">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface-elevated">
|
||||
<div className="hairline-t px-5 py-3 flex justify-end gap-2 bg-surface">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -7,6 +7,9 @@ type Props = {
|
||||
'aria-label'?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS UISwitch — 51×31 spec, green when on, smooth spring knob.
|
||||
*/
|
||||
export function Switch({
|
||||
checked,
|
||||
onChange,
|
||||
@@ -22,18 +25,17 @@ export function Switch({
|
||||
onClick={() => !disabled && onChange(!checked)}
|
||||
disabled={disabled}
|
||||
className={[
|
||||
'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',
|
||||
'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',
|
||||
disabled ? 'opacity-40 cursor-not-allowed' : ''
|
||||
].join(' ')}
|
||||
style={{ padding: 2 }}
|
||||
>
|
||||
<motion.span
|
||||
className="block h-[18px] w-[18px] rounded-full bg-white"
|
||||
className="block h-[27px] w-[27px] rounded-full bg-white"
|
||||
style={{
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08)'
|
||||
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)'
|
||||
}}
|
||||
animate={{ x: checked ? 20 : 0 }}
|
||||
transition={{ type: 'spring', stiffness: 700, damping: 35 }}
|
||||
|
||||
@@ -149,6 +149,47 @@ export const ru: Dict = {
|
||||
'dashboard.empty.title': 'Программа пуста',
|
||||
'dashboard.empty.hint': 'Добавь первое упражнение, чтобы начать',
|
||||
|
||||
// Smart work / sessions / analytics
|
||||
'smart.kicker': 'Помощник дня',
|
||||
'smart.title': 'Что улучшить сейчас',
|
||||
'insight.default.title': 'День идёт ровно',
|
||||
'insight.default.desc':
|
||||
'Срочных корректировок нет. Держи короткие перерывы и не копи всё на вечер.',
|
||||
'insight.first_run.title': 'Начни с пресета',
|
||||
'insight.first_run.desc':
|
||||
'Выбери готовую программу на странице упражнений — так быстрее, чем собирать всё вручную.',
|
||||
'insight.too_many_skips.title': 'Много пропусков',
|
||||
'insight.too_many_skips.desc':
|
||||
'{n} пропусков за неделю. Снизь нагрузку или запускай короткую сессию вместо полного плана.',
|
||||
'insight.late_slump.title': 'Вечером сложнее',
|
||||
'insight.late_slump.desc':
|
||||
'{n} вечерних пропусков. Лучше закрыть базу до 18:00 или разбить долг на подходы.',
|
||||
'insight.empty_meals.title': 'Питание не настроено',
|
||||
'insight.empty_meals.desc':
|
||||
'Добавь завтрак, обед или перекус, чтобы день был стабильнее.',
|
||||
'insight.good_rhythm.title': 'Ритм хороший',
|
||||
'insight.good_rhythm.desc':
|
||||
'Закрываемость {pct}%. Можно слегка поднять цель или оставить темп как есть.',
|
||||
'session.kicker': 'Разминка-сессия',
|
||||
'session.title': 'Запустить коротко',
|
||||
'session.3.title': 'Быстрый сброс',
|
||||
'session.5.title': 'Нормальная пауза',
|
||||
'session.10.title': 'Полная разминка',
|
||||
'session.empty': 'Добавь упражнения или пресет, чтобы запускать сессии.',
|
||||
'analytics.kicker': 'Аналитика',
|
||||
'analytics.title': 'Неделя в цифрах',
|
||||
'analytics.active_days': 'Дни',
|
||||
'analytics.active_days.hint': 'с активностью',
|
||||
'analytics.done_reps': 'Повторы',
|
||||
'analytics.done_reps.hint': 'сделано',
|
||||
'analytics.completion': 'Закрытие',
|
||||
'analytics.completion.hint': 'done / skip',
|
||||
'analytics.skips': 'Пропуски',
|
||||
'analytics.skips.hint': 'за неделю',
|
||||
'analytics.best_day': 'Лучший день',
|
||||
'analytics.best_day.hint': '{day}',
|
||||
'analytics.best_day.empty': 'пока нет',
|
||||
|
||||
// Momentum / today redesign
|
||||
'momentum.level.title': 'Уровень',
|
||||
'momentum.level.number': 'уровень {n}',
|
||||
@@ -203,6 +244,17 @@ export const ru: Dict = {
|
||||
'exercises.section.disabled': 'Выключенные · {n}',
|
||||
'exercises.row.meta': '{reps} раз · {interval}',
|
||||
'exercises.empty': 'Программа пуста — добавь первое упражнение',
|
||||
'exercises.presets.title': 'Пресеты',
|
||||
'exercises.presets.add': 'Добавить',
|
||||
'preset.office.title': 'Офисная разминка',
|
||||
'preset.office.desc': 'Шея, глаза и приседания для обычного рабочего дня.',
|
||||
'preset.back.title': 'Спина и шея',
|
||||
'preset.back.desc':
|
||||
'Осанка, лопатки и лёгкие наклоны без спортивного режима.',
|
||||
'preset.minimum.title': 'Минимум на день',
|
||||
'preset.minimum.desc': 'Самый мягкий старт: вода и короткая мини-разминка.',
|
||||
'preset.after_match.title': 'После катки',
|
||||
'preset.after_match.desc': 'База под игровые долги: приседания и отжимания.',
|
||||
|
||||
// Meals (приёмы пищи)
|
||||
'meals.kicker': 'Режим питания',
|
||||
@@ -384,6 +436,13 @@ export const ru: Dict = {
|
||||
'settings.notification_mode.modal': 'Окно поверх всех',
|
||||
'settings.notification_mode.toast': 'Системное уведомление',
|
||||
'settings.notification_mode.both': 'Окно и уведомление',
|
||||
'settings.notification_tone.label': 'Тон напоминаний',
|
||||
'settings.notification_tone.hint':
|
||||
'Как формулировать подсказки в окне напоминания',
|
||||
'settings.notification_tone.calm': 'Спокойно',
|
||||
'settings.notification_tone.brief': 'Кратко',
|
||||
'settings.notification_tone.firm': 'Настойчиво',
|
||||
'settings.notification_tone.playful': 'С юмором',
|
||||
'settings.global.label': 'Напоминания включены',
|
||||
'settings.global.hint': 'Главный режим работы приложения',
|
||||
'settings.sound.label': 'Звук уведомления',
|
||||
@@ -532,6 +591,7 @@ export const ru: Dict = {
|
||||
'match.summary.remaining': '{n} осталось',
|
||||
'match.total': 'Всего',
|
||||
'match.total_reps_suffix': 'повторов',
|
||||
'match.debt_plan': 'Сейчас {now}, позже {later}',
|
||||
|
||||
// Format helpers
|
||||
'fmt.now': 'сейчас',
|
||||
@@ -682,6 +742,47 @@ export const en: Dict = {
|
||||
'dashboard.empty.title': 'Program is empty',
|
||||
'dashboard.empty.hint': 'Add your first exercise to start',
|
||||
|
||||
// Smart work / sessions / analytics
|
||||
'smart.kicker': 'Day assistant',
|
||||
'smart.title': 'What to improve now',
|
||||
'insight.default.title': 'The day is steady',
|
||||
'insight.default.desc':
|
||||
'No urgent adjustments. Keep breaks short and avoid leaving everything for the evening.',
|
||||
'insight.first_run.title': 'Start with a preset',
|
||||
'insight.first_run.desc':
|
||||
'Pick a ready-made program on the Exercises page; it is faster than building one manually.',
|
||||
'insight.too_many_skips.title': 'Many skips',
|
||||
'insight.too_many_skips.desc':
|
||||
'{n} skips this week. Lower the load or run a short session instead of the full plan.',
|
||||
'insight.late_slump.title': 'Evenings are harder',
|
||||
'insight.late_slump.desc':
|
||||
'{n} evening skips. Close the basics before 18:00 or split debt into sets.',
|
||||
'insight.empty_meals.title': 'Meals are not configured',
|
||||
'insight.empty_meals.desc':
|
||||
'Add breakfast, lunch or a snack to keep the day steadier.',
|
||||
'insight.good_rhythm.title': 'Good rhythm',
|
||||
'insight.good_rhythm.desc':
|
||||
'{pct}% completion. You can slightly raise a target or keep the pace.',
|
||||
'session.kicker': 'Warm-up session',
|
||||
'session.title': 'Run a short one',
|
||||
'session.3.title': 'Quick reset',
|
||||
'session.5.title': 'Normal pause',
|
||||
'session.10.title': 'Full warm-up',
|
||||
'session.empty': 'Add exercises or a preset to run sessions.',
|
||||
'analytics.kicker': 'Analytics',
|
||||
'analytics.title': 'Week in numbers',
|
||||
'analytics.active_days': 'Days',
|
||||
'analytics.active_days.hint': 'with activity',
|
||||
'analytics.done_reps': 'Reps',
|
||||
'analytics.done_reps.hint': 'done',
|
||||
'analytics.completion': 'Completion',
|
||||
'analytics.completion.hint': 'done / skip',
|
||||
'analytics.skips': 'Skips',
|
||||
'analytics.skips.hint': 'this week',
|
||||
'analytics.best_day': 'Best day',
|
||||
'analytics.best_day.hint': '{day}',
|
||||
'analytics.best_day.empty': 'none yet',
|
||||
|
||||
// Momentum / today redesign
|
||||
'momentum.level.title': 'Level',
|
||||
'momentum.level.number': 'level {n}',
|
||||
@@ -736,6 +837,17 @@ export const en: Dict = {
|
||||
'exercises.section.disabled': 'Disabled · {n}',
|
||||
'exercises.row.meta': '{reps} reps · {interval}',
|
||||
'exercises.empty': 'Program is empty — add your first exercise',
|
||||
'exercises.presets.title': 'Presets',
|
||||
'exercises.presets.add': 'Add',
|
||||
'preset.office.title': 'Office warm-up',
|
||||
'preset.office.desc': 'Neck, eyes and squats for a normal workday.',
|
||||
'preset.back.title': 'Back and neck',
|
||||
'preset.back.desc':
|
||||
'Posture, shoulder blades and easy bends without gym mode.',
|
||||
'preset.minimum.title': 'Daily minimum',
|
||||
'preset.minimum.desc': 'The softest start: water and one mini warm-up.',
|
||||
'preset.after_match.title': 'After match',
|
||||
'preset.after_match.desc': 'A base for game debt: squats and push-ups.',
|
||||
|
||||
// Meals
|
||||
'meals.kicker': 'Eating schedule',
|
||||
@@ -917,6 +1029,12 @@ 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.notification_tone.label': 'Reminder tone',
|
||||
'settings.notification_tone.hint': 'How reminder-window hints are phrased',
|
||||
'settings.notification_tone.calm': 'Calm',
|
||||
'settings.notification_tone.brief': 'Brief',
|
||||
'settings.notification_tone.firm': 'Firm',
|
||||
'settings.notification_tone.playful': 'Playful',
|
||||
'settings.global.label': 'Reminders enabled',
|
||||
'settings.global.hint': 'Main operating mode for the app',
|
||||
'settings.sound.label': 'Notification sound',
|
||||
@@ -1061,6 +1179,7 @@ export const en: Dict = {
|
||||
'match.summary.remaining': '{n} left',
|
||||
'match.total': 'Total',
|
||||
'match.total_reps_suffix': 'reps',
|
||||
'match.debt_plan': 'Now {now}, later {later}',
|
||||
|
||||
// Format helpers
|
||||
'fmt.now': 'now',
|
||||
|
||||
111
src/renderer/src/lib/wellness.test.ts
Normal file
111
src/renderer/src/lib/wellness.test.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { Exercise, HistoryEntry, Meal } from '@shared/types'
|
||||
import {
|
||||
buildSessionPlan,
|
||||
computeWeeklyAnalytics,
|
||||
computeWellnessInsights,
|
||||
planGameDebt
|
||||
} from './wellness'
|
||||
|
||||
const mondayNoon = new Date(2026, 5, 8, 12, 0, 0, 0).getTime()
|
||||
|
||||
const exercise: Exercise = {
|
||||
id: 'ex-1',
|
||||
name: 'Приседания',
|
||||
reps: 10,
|
||||
icon: 'Activity',
|
||||
intervalMinutes: 60,
|
||||
enabled: true,
|
||||
nextFireAt: mondayNoon + 60_000,
|
||||
category: 'exercise'
|
||||
}
|
||||
|
||||
const meal: Meal = {
|
||||
id: 'meal-1',
|
||||
name: 'Обед',
|
||||
time: '13:00',
|
||||
icon: 'UtensilsCrossed',
|
||||
enabled: false,
|
||||
days: [],
|
||||
nextFireAt: mondayNoon + 60_000
|
||||
}
|
||||
|
||||
describe('wellness analytics', () => {
|
||||
it('computes weekly completion and late skips', () => {
|
||||
const history: HistoryEntry[] = [
|
||||
{
|
||||
ts: mondayNoon,
|
||||
exerciseId: exercise.id,
|
||||
action: 'done',
|
||||
reps: 10
|
||||
},
|
||||
{
|
||||
ts: mondayNoon + 7 * 60 * 60 * 1000,
|
||||
exerciseId: exercise.id,
|
||||
action: 'skip'
|
||||
}
|
||||
]
|
||||
|
||||
const analytics = computeWeeklyAnalytics({
|
||||
history,
|
||||
exercises: [exercise],
|
||||
now: mondayNoon + 8 * 60 * 60 * 1000
|
||||
})
|
||||
|
||||
expect(analytics.activeDays).toBe(1)
|
||||
expect(analytics.doneReps).toBe(10)
|
||||
expect(analytics.skippedActions).toBe(1)
|
||||
expect(analytics.lateSkips).toBe(1)
|
||||
expect(analytics.completionPct).toBe(50)
|
||||
})
|
||||
|
||||
it('surfaces useful insights from state', () => {
|
||||
const analytics = {
|
||||
activeDays: 1,
|
||||
doneReps: 10,
|
||||
doneActions: 1,
|
||||
skippedActions: 4,
|
||||
snoozedActions: 0,
|
||||
bestDayReps: 10,
|
||||
lateSkips: 2,
|
||||
completionPct: 20
|
||||
}
|
||||
|
||||
const insights = computeWellnessInsights({
|
||||
exercises: [exercise],
|
||||
meals: [meal],
|
||||
analytics
|
||||
})
|
||||
|
||||
expect(insights.map((i) => i.id)).toContain('too_many_skips')
|
||||
expect(insights.map((i) => i.id)).toContain('late_slump')
|
||||
expect(insights.map((i) => i.id)).toContain('empty_meals')
|
||||
})
|
||||
})
|
||||
|
||||
describe('wellness sessions', () => {
|
||||
it('builds a compact session from enabled exercises', () => {
|
||||
const session = buildSessionPlan({ exercises: [exercise], minutes: 5 })
|
||||
|
||||
expect(session.steps).toHaveLength(3)
|
||||
expect(session.steps[0]).toMatchObject({
|
||||
exerciseId: exercise.id,
|
||||
reps: 10
|
||||
})
|
||||
})
|
||||
|
||||
it('splits game debt into realistic sets', () => {
|
||||
expect(planGameDebt(12)).toEqual({
|
||||
total: 12,
|
||||
now: 12,
|
||||
later: 0,
|
||||
sets: [12]
|
||||
})
|
||||
expect(planGameDebt(55)).toEqual({
|
||||
total: 55,
|
||||
now: 20,
|
||||
later: 35,
|
||||
sets: [20, 20, 15]
|
||||
})
|
||||
})
|
||||
})
|
||||
399
src/renderer/src/lib/wellness.ts
Normal file
399
src/renderer/src/lib/wellness.ts
Normal file
@@ -0,0 +1,399 @@
|
||||
import type { Exercise, HistoryEntry, Meal } from '@shared/types'
|
||||
import { dayKey } from './history'
|
||||
|
||||
export type ExercisePreset = {
|
||||
id: string
|
||||
titleKey: string
|
||||
descKey: string
|
||||
exercises: Omit<Exercise, 'id' | 'nextFireAt' | 'lastDoneAt'>[]
|
||||
meals?: Omit<Meal, 'id' | 'nextFireAt' | 'lastDoneAt'>[]
|
||||
}
|
||||
|
||||
export type WellnessInsight = {
|
||||
id:
|
||||
| 'first_run'
|
||||
| 'too_many_skips'
|
||||
| 'good_rhythm'
|
||||
| 'late_slump'
|
||||
| 'empty_meals'
|
||||
titleKey: string
|
||||
descKey: string
|
||||
tone: 'accent' | 'success' | 'warning' | 'info'
|
||||
vars?: Record<string, string | number>
|
||||
}
|
||||
|
||||
export type WeeklyAnalytics = {
|
||||
activeDays: number
|
||||
doneReps: number
|
||||
doneActions: number
|
||||
skippedActions: number
|
||||
snoozedActions: number
|
||||
bestDayKey?: string
|
||||
bestDayReps: number
|
||||
lateSkips: number
|
||||
completionPct: number
|
||||
}
|
||||
|
||||
export type SessionStep = {
|
||||
exerciseId?: string
|
||||
name: string
|
||||
icon: string
|
||||
reps: number
|
||||
}
|
||||
|
||||
export type SessionPlan = {
|
||||
minutes: 3 | 5 | 10
|
||||
titleKey: string
|
||||
steps: SessionStep[]
|
||||
}
|
||||
|
||||
export type GameDebtPlan = {
|
||||
total: number
|
||||
now: number
|
||||
later: number
|
||||
sets: number[]
|
||||
}
|
||||
|
||||
const DAY_MS = 24 * 60 * 60 * 1000
|
||||
|
||||
export const EXERCISE_PRESETS: ExercisePreset[] = [
|
||||
{
|
||||
id: 'office',
|
||||
titleKey: 'preset.office.title',
|
||||
descKey: 'preset.office.desc',
|
||||
exercises: [
|
||||
{
|
||||
name: 'Плечи и шея',
|
||||
reps: 8,
|
||||
icon: 'StretchHorizontal',
|
||||
intervalMinutes: 45,
|
||||
enabled: true,
|
||||
category: 'posture',
|
||||
dailyGoal: 32,
|
||||
adaptive: true
|
||||
},
|
||||
{
|
||||
name: 'Приседания',
|
||||
reps: 10,
|
||||
icon: 'Activity',
|
||||
intervalMinutes: 60,
|
||||
enabled: true,
|
||||
category: 'exercise',
|
||||
dailyGoal: 40,
|
||||
adaptive: true
|
||||
},
|
||||
{
|
||||
name: 'Отдых глазам',
|
||||
reps: 1,
|
||||
icon: 'Eye',
|
||||
intervalMinutes: 30,
|
||||
enabled: true,
|
||||
category: 'eyes',
|
||||
dailyGoal: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'back',
|
||||
titleKey: 'preset.back.title',
|
||||
descKey: 'preset.back.desc',
|
||||
exercises: [
|
||||
{
|
||||
name: 'Проверь осанку',
|
||||
reps: 1,
|
||||
icon: 'PersonStanding',
|
||||
intervalMinutes: 25,
|
||||
enabled: true,
|
||||
category: 'posture',
|
||||
dailyGoal: 8
|
||||
},
|
||||
{
|
||||
name: 'Лопатки назад',
|
||||
reps: 12,
|
||||
icon: 'StretchHorizontal',
|
||||
intervalMinutes: 50,
|
||||
enabled: true,
|
||||
category: 'posture',
|
||||
dailyGoal: 48,
|
||||
adaptive: true
|
||||
},
|
||||
{
|
||||
name: 'Наклоны',
|
||||
reps: 8,
|
||||
icon: 'Activity',
|
||||
intervalMinutes: 70,
|
||||
enabled: true,
|
||||
category: 'exercise',
|
||||
dailyGoal: 32
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'minimum',
|
||||
titleKey: 'preset.minimum.title',
|
||||
descKey: 'preset.minimum.desc',
|
||||
exercises: [
|
||||
{
|
||||
name: 'Мини-разминка',
|
||||
reps: 5,
|
||||
icon: 'Dumbbell',
|
||||
intervalMinutes: 90,
|
||||
enabled: true,
|
||||
category: 'exercise',
|
||||
dailyGoal: 20
|
||||
},
|
||||
{
|
||||
name: 'Стакан воды',
|
||||
reps: 1,
|
||||
icon: 'GlassWater',
|
||||
intervalMinutes: 120,
|
||||
enabled: true,
|
||||
category: 'hydration',
|
||||
dailyGoal: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'after_match',
|
||||
titleKey: 'preset.after_match.title',
|
||||
descKey: 'preset.after_match.desc',
|
||||
exercises: [
|
||||
{
|
||||
name: 'Приседания после катки',
|
||||
reps: 12,
|
||||
icon: 'Activity',
|
||||
intervalMinutes: 75,
|
||||
enabled: true,
|
||||
category: 'exercise',
|
||||
dailyGoal: 48
|
||||
},
|
||||
{
|
||||
name: 'Отжимания после катки',
|
||||
reps: 8,
|
||||
icon: 'Dumbbell',
|
||||
intervalMinutes: 90,
|
||||
enabled: true,
|
||||
category: 'exercise',
|
||||
dailyGoal: 32
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
function startOfWeek(ts: number): number {
|
||||
const d = new Date(ts)
|
||||
d.setHours(0, 0, 0, 0)
|
||||
const day = d.getDay()
|
||||
d.setDate(d.getDate() + (day === 0 ? -6 : 1 - day))
|
||||
return d.getTime()
|
||||
}
|
||||
|
||||
function entryReps(
|
||||
entry: HistoryEntry,
|
||||
exercisesById: Map<string, Exercise>
|
||||
): number {
|
||||
return (
|
||||
entry.actualReps ??
|
||||
entry.reps ??
|
||||
exercisesById.get(entry.exerciseId)?.reps ??
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
export function computeWeeklyAnalytics({
|
||||
history,
|
||||
exercises,
|
||||
now = Date.now()
|
||||
}: {
|
||||
history: HistoryEntry[]
|
||||
exercises: Exercise[]
|
||||
now?: number
|
||||
}): WeeklyAnalytics {
|
||||
const weekStart = startOfWeek(now)
|
||||
const exercisesById = new Map(exercises.map((e) => [e.id, e]))
|
||||
const days = new Map<string, number>()
|
||||
let doneReps = 0
|
||||
let doneActions = 0
|
||||
let skippedActions = 0
|
||||
let snoozedActions = 0
|
||||
let lateSkips = 0
|
||||
|
||||
for (const entry of history) {
|
||||
if (entry.ts < weekStart || entry.ts > now) continue
|
||||
const key = dayKey(entry.ts)
|
||||
if (entry.action === 'done') {
|
||||
const reps = entryReps(entry, exercisesById)
|
||||
doneReps += reps
|
||||
doneActions++
|
||||
days.set(key, (days.get(key) ?? 0) + reps)
|
||||
} else if (entry.action === 'skip') {
|
||||
skippedActions++
|
||||
if (new Date(entry.ts).getHours() >= 18) lateSkips++
|
||||
} else if (entry.action === 'snooze') {
|
||||
snoozedActions++
|
||||
}
|
||||
}
|
||||
|
||||
let bestDayKey: string | undefined
|
||||
let bestDayReps = 0
|
||||
for (const [key, reps] of days) {
|
||||
if (reps > bestDayReps) {
|
||||
bestDayKey = key
|
||||
bestDayReps = reps
|
||||
}
|
||||
}
|
||||
|
||||
const attempts = doneActions + skippedActions
|
||||
const completionPct =
|
||||
attempts > 0 ? Math.round((doneActions / attempts) * 100) : 0
|
||||
|
||||
return {
|
||||
activeDays: days.size,
|
||||
doneReps,
|
||||
doneActions,
|
||||
skippedActions,
|
||||
snoozedActions,
|
||||
bestDayKey,
|
||||
bestDayReps,
|
||||
lateSkips,
|
||||
completionPct
|
||||
}
|
||||
}
|
||||
|
||||
export function computeWellnessInsights({
|
||||
exercises,
|
||||
meals,
|
||||
analytics
|
||||
}: {
|
||||
exercises: Exercise[]
|
||||
meals: Meal[]
|
||||
analytics: WeeklyAnalytics
|
||||
}): WellnessInsight[] {
|
||||
const insights: WellnessInsight[] = []
|
||||
const activeExercises = exercises.filter((e) => e.enabled).length
|
||||
const activeMeals = meals.filter((m) => m.enabled).length
|
||||
|
||||
if (activeExercises === 0) {
|
||||
insights.push({
|
||||
id: 'first_run',
|
||||
titleKey: 'insight.first_run.title',
|
||||
descKey: 'insight.first_run.desc',
|
||||
tone: 'accent'
|
||||
})
|
||||
}
|
||||
|
||||
if (analytics.skippedActions >= 3 && analytics.completionPct < 60) {
|
||||
insights.push({
|
||||
id: 'too_many_skips',
|
||||
titleKey: 'insight.too_many_skips.title',
|
||||
descKey: 'insight.too_many_skips.desc',
|
||||
tone: 'warning',
|
||||
vars: { n: analytics.skippedActions }
|
||||
})
|
||||
}
|
||||
|
||||
if (analytics.lateSkips >= 2) {
|
||||
insights.push({
|
||||
id: 'late_slump',
|
||||
titleKey: 'insight.late_slump.title',
|
||||
descKey: 'insight.late_slump.desc',
|
||||
tone: 'info',
|
||||
vars: { n: analytics.lateSkips }
|
||||
})
|
||||
}
|
||||
|
||||
if (activeMeals === 0) {
|
||||
insights.push({
|
||||
id: 'empty_meals',
|
||||
titleKey: 'insight.empty_meals.title',
|
||||
descKey: 'insight.empty_meals.desc',
|
||||
tone: 'info'
|
||||
})
|
||||
}
|
||||
|
||||
if (analytics.activeDays >= 4 && analytics.completionPct >= 70) {
|
||||
insights.push({
|
||||
id: 'good_rhythm',
|
||||
titleKey: 'insight.good_rhythm.title',
|
||||
descKey: 'insight.good_rhythm.desc',
|
||||
tone: 'success',
|
||||
vars: { pct: analytics.completionPct }
|
||||
})
|
||||
}
|
||||
|
||||
return insights.slice(0, 3)
|
||||
}
|
||||
|
||||
export function buildSessionPlan({
|
||||
exercises,
|
||||
minutes
|
||||
}: {
|
||||
exercises: Exercise[]
|
||||
minutes: 3 | 5 | 10
|
||||
}): SessionPlan {
|
||||
const enabled = exercises.filter((e) => e.enabled)
|
||||
const pool = enabled.length > 0 ? enabled : exercises
|
||||
const count = minutes === 3 ? 2 : minutes === 5 ? 3 : 5
|
||||
const steps = pool.slice(0, count).map<SessionStep>((e) => ({
|
||||
exerciseId: e.enabled ? e.id : undefined,
|
||||
name: e.name,
|
||||
icon: e.icon,
|
||||
reps:
|
||||
e.category === 'hydration' ||
|
||||
e.category === 'eyes' ||
|
||||
e.category === 'posture'
|
||||
? 1
|
||||
: Math.max(
|
||||
3,
|
||||
Math.min(e.reps, minutes === 3 ? 8 : minutes === 5 ? 12 : 16)
|
||||
)
|
||||
}))
|
||||
|
||||
while (steps.length < count) {
|
||||
const fallback =
|
||||
fallbackSessionSteps[steps.length % fallbackSessionSteps.length]
|
||||
steps.push(fallback)
|
||||
}
|
||||
|
||||
return {
|
||||
minutes,
|
||||
titleKey: `session.${minutes}.title`,
|
||||
steps
|
||||
}
|
||||
}
|
||||
|
||||
const fallbackSessionSteps: SessionStep[] = [
|
||||
{ name: 'Плечи назад', icon: 'StretchHorizontal', reps: 8 },
|
||||
{ name: 'Приседания', icon: 'Activity', reps: 8 },
|
||||
{ name: 'Отдых глазам', icon: 'Eye', reps: 1 },
|
||||
{ name: 'Проверь осанку', icon: 'PersonStanding', reps: 1 },
|
||||
{ name: 'Стакан воды', icon: 'GlassWater', reps: 1 }
|
||||
]
|
||||
|
||||
export function planGameDebt(total: number): GameDebtPlan {
|
||||
const safeTotal = Math.max(0, Math.trunc(total))
|
||||
if (safeTotal === 0) return { total: 0, now: 0, later: 0, sets: [] }
|
||||
|
||||
const now = Math.min(safeTotal, safeTotal <= 20 ? safeTotal : 20)
|
||||
const later = safeTotal - now
|
||||
const sets: number[] = []
|
||||
let left = safeTotal
|
||||
while (left > 0) {
|
||||
const next = Math.min(left, 20)
|
||||
sets.push(next)
|
||||
left -= next
|
||||
}
|
||||
return { total: safeTotal, now, later, sets }
|
||||
}
|
||||
|
||||
export function weekWindowLabel(now = Date.now()): {
|
||||
from: string
|
||||
to: string
|
||||
} {
|
||||
const from = new Date(startOfWeek(now))
|
||||
const to = new Date(from.getTime() + 6 * DAY_MS)
|
||||
return {
|
||||
from: from.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' }),
|
||||
to: to.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
}
|
||||
@@ -65,14 +65,14 @@ export default function ChallengesPage(): JSX.Element {
|
||||
)
|
||||
|
||||
return (
|
||||
<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 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>
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('challenges.kicker')}
|
||||
</div>
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-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-5 rounded-xl border border-warning/25 bg-warning/10 p-4 flex items-start gap-3">
|
||||
<div className="mb-6 rounded-2xl bg-warning/12 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-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl 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-lg bg-surface-2">
|
||||
<div className="grid grid-cols-8 gap-2 max-h-44 overflow-y-auto p-2 rounded-2xl bg-surface-2">
|
||||
{ICON_CHOICES.map((name) => (
|
||||
<button
|
||||
key={name}
|
||||
@@ -361,8 +361,8 @@ function ChallengeEditor({
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div className="rounded-lg bg-accent/[0.08] p-4">
|
||||
<div className="text-[11px] text-accent font-semibold mb-2">
|
||||
<div className="rounded-2xl bg-accent/8 p-4">
|
||||
<div className="text-[11px] uppercase tracking-wider 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">
|
||||
<span className="text-[32px] font-display font-semibold text-accent leading-none ml-1 tracking-tight">
|
||||
{previewReps}
|
||||
</span>
|
||||
<span className="text-text/55">
|
||||
|
||||
@@ -14,7 +14,10 @@ import {
|
||||
Check,
|
||||
Trophy,
|
||||
Swords,
|
||||
BadgeCheck
|
||||
BadgeCheck,
|
||||
Lightbulb,
|
||||
BarChart3,
|
||||
Timer
|
||||
} from 'lucide-react'
|
||||
import { useAppStore } from '../store/appStore'
|
||||
import { ExerciseCard } from '../components/ExerciseCard'
|
||||
@@ -48,6 +51,15 @@ import {
|
||||
type MomentumSummary,
|
||||
type WeeklyQuest
|
||||
} from '../lib/momentum'
|
||||
import {
|
||||
buildSessionPlan,
|
||||
computeWeeklyAnalytics,
|
||||
computeWellnessInsights,
|
||||
weekWindowLabel,
|
||||
type SessionPlan,
|
||||
type WellnessInsight,
|
||||
type WeeklyAnalytics
|
||||
} from '../lib/wellness'
|
||||
|
||||
export default function Dashboard(): JSX.Element {
|
||||
const state = useAppStore((s) => s.state)
|
||||
@@ -142,6 +154,26 @@ export default function Dashboard(): JSX.Element {
|
||||
() => computeMomentumSummary({ history, exercises, challenges }),
|
||||
[history, exercises, challenges]
|
||||
)
|
||||
const weeklyAnalytics = useMemo(
|
||||
() => computeWeeklyAnalytics({ history, exercises }),
|
||||
[history, exercises]
|
||||
)
|
||||
const wellnessInsights = useMemo(
|
||||
() =>
|
||||
computeWellnessInsights({
|
||||
exercises,
|
||||
meals,
|
||||
analytics: weeklyAnalytics
|
||||
}),
|
||||
[exercises, meals, weeklyAnalytics]
|
||||
)
|
||||
const sessions = useMemo(
|
||||
() =>
|
||||
([3, 5, 10] as const).map((minutes) =>
|
||||
buildSessionPlan({ exercises, minutes })
|
||||
),
|
||||
[exercises]
|
||||
)
|
||||
|
||||
const paused = !settings?.globalEnabled
|
||||
|
||||
@@ -197,28 +229,27 @@ export default function Dashboard(): JSX.Element {
|
||||
})
|
||||
|
||||
return (
|
||||
<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="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-6">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/60 font-bold">
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('dashboard.header.date', { date: today })}
|
||||
</div>
|
||||
<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">
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3">
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight font-bold">
|
||||
{header.title}
|
||||
</h1>
|
||||
<span
|
||||
className={[
|
||||
'h-7 px-2.5 rounded-md inline-flex items-center text-[12px] font-bold',
|
||||
'h-7 px-3 rounded-full inline-flex items-center text-[12px] font-bold uppercase tracking-[0.06em]',
|
||||
dashboardStatusClass(header.tone)
|
||||
].join(' ')}
|
||||
>
|
||||
{header.status}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[14px] text-text/60 mt-2 font-medium leading-relaxed max-w-3xl">
|
||||
<p className="text-[15px] text-text/65 mt-2 font-medium leading-relaxed max-w-2xl">
|
||||
{header.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
@@ -239,9 +270,8 @@ export default function Dashboard(): JSX.Element {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-2 xl:grid-cols-4 gap-3 mb-5">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
|
||||
<HeroStat
|
||||
tone="accent"
|
||||
label={t('dashboard.stat.today_done')}
|
||||
@@ -315,7 +345,7 @@ export default function Dashboard(): JSX.Element {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-4 rounded-xl border border-warning/25 bg-warning/10 p-4 flex items-center gap-3"
|
||||
className="mb-6 rounded-2xl bg-warning/12 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} />
|
||||
@@ -338,7 +368,7 @@ export default function Dashboard(): JSX.Element {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-4 rounded-xl border border-info/25 bg-info/10 p-4 flex items-center gap-3"
|
||||
className="mb-6 rounded-2xl bg-info/12 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} />
|
||||
@@ -363,6 +393,24 @@ export default function Dashboard(): JSX.Element {
|
||||
onItemDone={(item) => void handlePlanItemDone(item)}
|
||||
/>
|
||||
|
||||
<SmartWorkPanel
|
||||
insights={wellnessInsights}
|
||||
analytics={weeklyAnalytics}
|
||||
sessions={sessions}
|
||||
exercises={exercises}
|
||||
t={t}
|
||||
onRunSession={async (session) => {
|
||||
for (const step of session.steps) {
|
||||
if (!step.exerciseId) continue
|
||||
const ex = exercises.find((item) => item.id === step.exerciseId)
|
||||
await window.api.markDone(
|
||||
step.exerciseId,
|
||||
ex && step.reps !== ex.reps ? step.reps : undefined
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<MomentumPanel
|
||||
momentum={momentum}
|
||||
gamesLive={gamesLive}
|
||||
@@ -378,7 +426,7 @@ export default function Dashboard(): JSX.Element {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-4">
|
||||
<AnimatePresence>
|
||||
{exercises.map((ex) => (
|
||||
<ExerciseCard
|
||||
@@ -401,7 +449,7 @@ export default function Dashboard(): JSX.Element {
|
||||
|
||||
{exercises.length === 0 && (
|
||||
<div className="mt-12 text-center">
|
||||
<div className="inline-flex w-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl 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">
|
||||
@@ -526,6 +574,228 @@ function dashboardStatusClass(tone: DashboardHeaderTone): string {
|
||||
return 'bg-text/10 text-text/55'
|
||||
}
|
||||
|
||||
function SmartWorkPanel({
|
||||
insights,
|
||||
analytics,
|
||||
sessions,
|
||||
exercises,
|
||||
t,
|
||||
onRunSession
|
||||
}: {
|
||||
insights: WellnessInsight[]
|
||||
analytics: WeeklyAnalytics
|
||||
sessions: SessionPlan[]
|
||||
exercises: Exercise[]
|
||||
t: TFn
|
||||
onRunSession: (session: SessionPlan) => Promise<void>
|
||||
}): JSX.Element {
|
||||
const [busySession, setBusySession] = useState<number | null>(null)
|
||||
const week = weekWindowLabel()
|
||||
const shownInsights =
|
||||
insights.length > 0
|
||||
? insights
|
||||
: [
|
||||
{
|
||||
id: 'good_rhythm' as const,
|
||||
titleKey: 'insight.default.title',
|
||||
descKey: 'insight.default.desc',
|
||||
tone: 'success' as const
|
||||
}
|
||||
]
|
||||
|
||||
async function run(session: SessionPlan): Promise<void> {
|
||||
if (busySession !== null) return
|
||||
setBusySession(session.minutes)
|
||||
try {
|
||||
await onRunSession(session)
|
||||
} finally {
|
||||
setBusySession(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mb-8 grid grid-cols-1 lg:grid-cols-[1fr_1fr] gap-4">
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-2xl bg-info/12 text-info grid place-items-center shrink-0">
|
||||
<Lightbulb size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('smart.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('smart.title')}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{shownInsights.map((insight) => (
|
||||
<InsightLine key={insight.id} insight={insight} t={t} />
|
||||
))}
|
||||
</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="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-2xl bg-accent/12 text-accent grid place-items-center shrink-0">
|
||||
<Timer size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('session.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('session.title')}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
{sessions.map((session) => (
|
||||
<button
|
||||
key={session.minutes}
|
||||
type="button"
|
||||
onClick={() => void run(session)}
|
||||
disabled={busySession !== null || exercises.length === 0}
|
||||
className="rounded-2xl bg-surface-2 hover:bg-hairline/25 disabled:opacity-55 text-left p-3 transition-colors active:scale-[0.99]"
|
||||
>
|
||||
<div className="font-mono-num text-[22px] font-bold leading-none">
|
||||
{session.minutes}
|
||||
<span className="ml-1 text-[12px] text-text/55 font-sans">
|
||||
{t('fmt.m')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[13px] font-semibold mt-2 leading-tight">
|
||||
{t(session.titleKey)}
|
||||
</div>
|
||||
<div className="text-[12px] text-text/55 mt-1 truncate">
|
||||
{session.steps.map((s) => s.name).join(' · ')}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{exercises.length === 0 && (
|
||||
<div className="text-[13px] text-text/55 mt-3">
|
||||
{t('session.empty')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-10 h-10 rounded-2xl bg-success/12 text-success grid place-items-center shrink-0">
|
||||
<BarChart3 size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('analytics.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('analytics.title')}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[12px] text-text/50 font-semibold">
|
||||
{week.from} — {week.to}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-5 gap-2">
|
||||
<AnalyticsTile
|
||||
label={t('analytics.active_days')}
|
||||
value={`${analytics.activeDays}`}
|
||||
hint={t('analytics.active_days.hint')}
|
||||
/>
|
||||
<AnalyticsTile
|
||||
label={t('analytics.done_reps')}
|
||||
value={`${analytics.doneReps}`}
|
||||
hint={t('analytics.done_reps.hint')}
|
||||
/>
|
||||
<AnalyticsTile
|
||||
label={t('analytics.completion')}
|
||||
value={`${analytics.completionPct}%`}
|
||||
hint={t('analytics.completion.hint')}
|
||||
/>
|
||||
<AnalyticsTile
|
||||
label={t('analytics.skips')}
|
||||
value={`${analytics.skippedActions}`}
|
||||
hint={t('analytics.skips.hint')}
|
||||
/>
|
||||
<AnalyticsTile
|
||||
label={t('analytics.best_day')}
|
||||
value={analytics.bestDayReps > 0 ? `${analytics.bestDayReps}` : '—'}
|
||||
hint={
|
||||
analytics.bestDayKey
|
||||
? t('analytics.best_day.hint', { day: analytics.bestDayKey })
|
||||
: t('analytics.best_day.empty')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function InsightLine({
|
||||
insight,
|
||||
t
|
||||
}: {
|
||||
insight: WellnessInsight
|
||||
t: TFn
|
||||
}): JSX.Element {
|
||||
const toneClass =
|
||||
insight.tone === 'success'
|
||||
? 'bg-success/12 text-success'
|
||||
: insight.tone === 'warning'
|
||||
? 'bg-warning/12 text-warning'
|
||||
: insight.tone === 'info'
|
||||
? 'bg-info/12 text-info'
|
||||
: 'bg-accent/12 text-accent'
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl bg-surface-2 p-3 flex items-start gap-3 min-w-0">
|
||||
<div
|
||||
className={[
|
||||
'w-8 h-8 rounded-xl grid place-items-center shrink-0',
|
||||
toneClass
|
||||
].join(' ')}
|
||||
>
|
||||
<Lightbulb size={15} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[14px] font-bold leading-tight">
|
||||
{t(insight.titleKey, insight.vars)}
|
||||
</div>
|
||||
<div className="text-[13px] text-text/62 mt-1 leading-snug">
|
||||
{t(insight.descKey, insight.vars)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AnalyticsTile({
|
||||
label,
|
||||
value,
|
||||
hint
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
hint: string
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="rounded-2xl bg-surface-2 p-3 min-w-0">
|
||||
<div className="text-[12px] text-text/50 font-semibold leading-tight">
|
||||
{label}
|
||||
</div>
|
||||
<div className="font-mono-num text-[22px] font-bold leading-tight mt-1 truncate">
|
||||
{value}
|
||||
</div>
|
||||
<div className="text-[12px] text-text/52 mt-1 truncate">{hint}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MomentumPanel({
|
||||
momentum,
|
||||
gamesLive,
|
||||
@@ -546,17 +816,17 @@ function MomentumPanel({
|
||||
: t('momentum.game.off')
|
||||
|
||||
return (
|
||||
<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">
|
||||
<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">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-lg bg-warning text-white grid place-items-center shrink-0">
|
||||
<div className="w-10 h-10 rounded-2xl 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-[20px] font-bold leading-tight truncate">
|
||||
<div className="font-display text-[22px] font-bold leading-tight truncate">
|
||||
{t(momentum.level.key)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -584,13 +854,13 @@ function MomentumPanel({
|
||||
<ProgressBar pct={momentum.level.progressPct} tone="warning" />
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-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-[20px] font-bold leading-tight">
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('momentum.week.title')}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -608,29 +878,29 @@ function MomentumPanel({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30 min-w-0">
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-lg bg-accent-2 text-white grid place-items-center shrink-0">
|
||||
<div className="w-10 h-10 rounded-2xl 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-[20px] font-bold leading-tight">
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('momentum.game.title')}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-lg bg-surface-2 p-3.5">
|
||||
<div className="mt-4 rounded-2xl bg-surface-2 p-4">
|
||||
<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 py-1 rounded-md font-semibold',
|
||||
'text-[12px] px-2.5 py-1 rounded-full font-semibold',
|
||||
gamesLive
|
||||
? 'bg-success/12 text-success'
|
||||
: gamesEnabledButNotLive
|
||||
@@ -664,7 +934,7 @@ function MomentumPanel({
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 text-[13px] text-text/60 leading-relaxed">
|
||||
<div className="mt-4 text-[13px] text-text/62 leading-relaxed">
|
||||
{momentum.gameDebt.lastMatchAt
|
||||
? t('momentum.game.last', {
|
||||
date: new Date(
|
||||
@@ -708,7 +978,7 @@ function WeeklyQuestRow({
|
||||
<div className="py-3 flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={[
|
||||
'w-8 h-8 rounded-lg grid place-items-center text-white shrink-0',
|
||||
'w-9 h-9 rounded-xl grid place-items-center text-white shrink-0',
|
||||
quest.complete
|
||||
? 'bg-success'
|
||||
: quest.tone === 'warning'
|
||||
@@ -786,14 +1056,14 @@ function TodayPlanPanel({
|
||||
const recovery = recoveryCopy(plan, t)
|
||||
|
||||
return (
|
||||
<section className="mb-6 bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<section className="mb-8 bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-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-9 h-9 rounded-lg bg-accent/12 text-accent grid place-items-center shrink-0">
|
||||
<div className="w-10 h-10 rounded-2xl 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-[20px] font-bold leading-tight">
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('dashboard.plan.title')}
|
||||
</h2>
|
||||
<div className="text-[14px] text-text/60 mt-0.5">
|
||||
@@ -803,7 +1073,7 @@ function TodayPlanPanel({
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'self-start sm:self-auto h-8 px-2.5 rounded-md inline-flex items-center text-[13px] font-semibold',
|
||||
'self-start sm:self-auto h-8 px-3 rounded-full inline-flex items-center text-[13px] font-semibold',
|
||||
plan.dueCount > 0
|
||||
? 'bg-accent/12 text-accent'
|
||||
: 'bg-success/12 text-success'
|
||||
@@ -860,7 +1130,7 @@ function TodayPlanPanel({
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-3 min-w-0">
|
||||
<div className="font-display text-[19px] leading-tight font-bold">
|
||||
<div className="font-display text-[20px] leading-tight font-bold">
|
||||
{t('dashboard.plan.clear.title')}
|
||||
</div>
|
||||
<div className="text-[14px] text-text/60 mt-1">
|
||||
@@ -925,7 +1195,7 @@ function TodayPlanPanel({
|
||||
<div className="mt-3 flex items-start gap-3">
|
||||
<div
|
||||
className={[
|
||||
'w-8 h-8 rounded-lg grid place-items-center shrink-0',
|
||||
'w-9 h-9 rounded-xl grid place-items-center shrink-0',
|
||||
recovery.tone
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -975,7 +1245,7 @@ function PlanItemGlyph({ item }: { item: PlanItem }): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'w-9 h-9 rounded-lg grid place-items-center shrink-0',
|
||||
'w-11 h-11 rounded-2xl grid place-items-center shrink-0',
|
||||
dueClass
|
||||
].join(' ')}
|
||||
>
|
||||
@@ -1006,7 +1276,7 @@ function PlanListRow({
|
||||
{planItemMeta(item, t)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[13px] text-text/60 shrink-0 max-w-[42%] truncate">
|
||||
<div className="text-[13px] text-text/62 shrink-0 max-w-[42%] truncate">
|
||||
{planItemTiming(item, paused, lang, t)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1133,25 +1403,23 @@ function HeroStat({
|
||||
: 'bg-text/40'
|
||||
|
||||
return (
|
||||
<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="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={[
|
||||
'w-7 h-7 rounded-md grid place-items-center text-white shrink-0',
|
||||
'w-7 h-7 rounded-lg grid place-items-center text-white',
|
||||
toneBg
|
||||
].join(' ')}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-[13px] text-text/70 font-bold truncate">
|
||||
{label}
|
||||
<div className="text-[14px] text-text/75 font-semibold">{label}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-display text-[24px] font-bold leading-tight truncate">
|
||||
<div className="font-display text-[28px] font-bold tracking-tight leading-none">
|
||||
{value}
|
||||
</div>
|
||||
{subvalue && (
|
||||
<div className="text-[12px] text-text/58 mt-1 font-medium truncate">
|
||||
<div className="text-[13px] text-text/60 mt-2 font-medium">
|
||||
{subvalue}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import { useState } from 'react'
|
||||
import { Activity, ChevronRight, Dumbbell, Plus, Target } from 'lucide-react'
|
||||
import {
|
||||
Activity,
|
||||
ChevronRight,
|
||||
Dumbbell,
|
||||
Plus,
|
||||
Sparkles,
|
||||
Target
|
||||
} from 'lucide-react'
|
||||
import { useAppStore } from '../store/appStore'
|
||||
import { ExerciseEditor } from '../components/ExerciseEditor'
|
||||
import {
|
||||
@@ -14,6 +21,7 @@ import { Icon } from '../lib/icon'
|
||||
import { formatInterval } from '../lib/format'
|
||||
import { useT } from '../i18n'
|
||||
import type { Exercise } from '@shared/types'
|
||||
import { EXERCISE_PRESETS, type ExercisePreset } from '../lib/wellness'
|
||||
|
||||
export default function Exercises(): JSX.Element {
|
||||
const exercises = useAppStore((s) => s.state?.exercises ?? [])
|
||||
@@ -27,8 +35,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 desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<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">
|
||||
<PageHeader
|
||||
kicker={t('exercises.kicker')}
|
||||
title={t('exercises.title')}
|
||||
@@ -69,6 +77,17 @@ export default function Exercises(): JSX.Element {
|
||||
/>
|
||||
</InsightGrid>
|
||||
|
||||
<SectionHeader title={t('exercises.presets.title')} />
|
||||
<Card className="mb-6">
|
||||
{EXERCISE_PRESETS.map((preset, index) => (
|
||||
<PresetRow
|
||||
key={preset.id}
|
||||
preset={preset}
|
||||
last={index === EXERCISE_PRESETS.length - 1}
|
||||
/>
|
||||
))}
|
||||
</Card>
|
||||
|
||||
{enabled.length > 0 && (
|
||||
<>
|
||||
<SectionHeader
|
||||
@@ -122,7 +141,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-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl 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">
|
||||
@@ -147,6 +166,58 @@ export default function Exercises(): JSX.Element {
|
||||
)
|
||||
}
|
||||
|
||||
function PresetRow({
|
||||
preset,
|
||||
last
|
||||
}: {
|
||||
preset: ExercisePreset
|
||||
last: boolean
|
||||
}): JSX.Element {
|
||||
const { t } = useT()
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function addPreset(): Promise<void> {
|
||||
if (busy) return
|
||||
setBusy(true)
|
||||
try {
|
||||
for (const exercise of preset.exercises) {
|
||||
await window.api.addExercise(exercise)
|
||||
}
|
||||
for (const meal of preset.meals ?? []) {
|
||||
await window.api.addMeal(meal)
|
||||
}
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Row last={last}>
|
||||
<div className="w-9 h-9 rounded-lg bg-accent/12 text-accent grid place-items-center shrink-0">
|
||||
<Sparkles size={18} strokeWidth={2.3} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[16px] font-semibold truncate leading-tight">
|
||||
{t(preset.titleKey)}
|
||||
</div>
|
||||
<div className="text-[14px] text-text/65 mt-1 font-medium leading-snug">
|
||||
{t(preset.descKey)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="tinted"
|
||||
onClick={addPreset}
|
||||
disabled={busy}
|
||||
>
|
||||
<Plus size={14} strokeWidth={2.5} />
|
||||
{t('exercises.presets.add')}
|
||||
</Button>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
function ExerciseRow({
|
||||
exercise,
|
||||
last,
|
||||
|
||||
@@ -66,14 +66,14 @@ export default function GamesPage(): JSX.Element {
|
||||
).length
|
||||
|
||||
return (
|
||||
<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 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>
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('games.kicker')}
|
||||
</div>
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-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-3">
|
||||
<div className="space-y-4">
|
||||
{games.map((g, i) => (
|
||||
<motion.div
|
||||
key={g.id}
|
||||
@@ -185,12 +185,12 @@ function GameCard({
|
||||
game.enabled
|
||||
|
||||
return (
|
||||
<div className="bg-surface rounded-xl p-4 shadow-card border border-hairline/30">
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-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-10 h-10 rounded-lg grid place-items-center shrink-0 text-white',
|
||||
'w-12 h-12 rounded-2xl 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">
|
||||
<h3 className="font-display text-[18px] font-bold tracking-tight">
|
||||
{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-lg bg-warning/12 p-3.5 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
|
||||
<div className="mt-4 rounded-2xl bg-warning/12 p-4 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-lg bg-destructive/10 p-3.5 text-[14px] leading-relaxed flex items-start gap-2.5 font-medium">
|
||||
<div className="mt-4 rounded-2xl bg-destructive/10 p-4 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] text-text/40 hover:text-text/70 font-mono-num font-medium transition-colors"
|
||||
className="text-[12px] uppercase tracking-wider 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 desktop-scroll">
|
||||
<div className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10">
|
||||
<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">
|
||||
<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-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"
|
||||
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"
|
||||
>
|
||||
<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-12 h-12 rounded-xl bg-accent text-white items-center justify-center mb-4">
|
||||
<div className="inline-flex w-14 h-14 rounded-2xl 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">
|
||||
|
||||
@@ -24,6 +24,7 @@ import type {
|
||||
DiagnosticsInfo,
|
||||
Language,
|
||||
NotificationMode,
|
||||
NotificationTone,
|
||||
QuietHours,
|
||||
Settings as SettingsType,
|
||||
Theme
|
||||
@@ -36,7 +37,7 @@ export default function SettingsPage(): JSX.Element {
|
||||
if (!settings)
|
||||
return (
|
||||
<div
|
||||
className="max-w-[980px] mx-auto px-5 lg:px-8 pt-6 pb-10 space-y-5"
|
||||
className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 pt-8 pb-12 space-y-5"
|
||||
role="status"
|
||||
aria-label={t('settings.loading')}
|
||||
>
|
||||
@@ -52,13 +53,13 @@ export default function SettingsPage(): JSX.Element {
|
||||
}
|
||||
|
||||
return (
|
||||
<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="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="mb-6">
|
||||
<div className="text-[14px] text-text/65 font-semibold">
|
||||
{t('settings.kicker')}
|
||||
</div>
|
||||
<h1 className="font-display text-[30px] sm:text-[34px] leading-tight mt-1 font-bold">
|
||||
<h1 className="font-serif text-[34px] sm:text-[40px] leading-[1.02] tracking-tight mt-1 font-bold">
|
||||
{t('settings.title')}
|
||||
</h1>
|
||||
</div>
|
||||
@@ -148,6 +149,30 @@ export default function SettingsPage(): JSX.Element {
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<SelectRow
|
||||
label={t('settings.notification_tone.label')}
|
||||
hint={t('settings.notification_tone.hint')}
|
||||
value={settings.notificationTone}
|
||||
onChange={(v) => patch({ notificationTone: v as NotificationTone })}
|
||||
options={[
|
||||
{
|
||||
value: 'calm',
|
||||
label: t('settings.notification_tone.calm')
|
||||
},
|
||||
{
|
||||
value: 'brief',
|
||||
label: t('settings.notification_tone.brief')
|
||||
},
|
||||
{
|
||||
value: 'firm',
|
||||
label: t('settings.notification_tone.firm')
|
||||
},
|
||||
{
|
||||
value: 'playful',
|
||||
label: t('settings.notification_tone.playful')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<ToggleRow
|
||||
label={t('settings.sound.label')}
|
||||
hint={t('settings.sound.hint')}
|
||||
@@ -260,27 +285,27 @@ function SettingsStatusPanel({
|
||||
}): JSX.Element {
|
||||
const { t } = useT()
|
||||
return (
|
||||
<section className="mb-5 rounded-xl bg-surface p-4 shadow-card border border-hairline/30">
|
||||
<section className="mb-6 rounded-3xl bg-surface p-5 shadow-card dark:ring-0.5 dark:ring-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',
|
||||
'w-11 h-11 rounded-2xl 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">
|
||||
<div className="text-[13px] uppercase tracking-[0.06em] text-text/50 font-bold">
|
||||
{t('settings.status.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[20px] font-bold leading-tight mt-1">
|
||||
<h2 className="font-display text-[22px] 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">
|
||||
<p className="text-[14px] text-text/62 mt-1 leading-relaxed max-w-xl break-words">
|
||||
{settingsStatusHint(settings, t)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -352,7 +377,7 @@ function StatusPill({
|
||||
}): 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="rounded-2xl bg-surface-2 px-3.5 py-3 min-w-0">
|
||||
<div className="text-[12px] text-text/50 font-semibold leading-tight">
|
||||
{label}
|
||||
</div>
|
||||
|
||||
@@ -20,59 +20,56 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ===== Design tokens: desktop workstation ===== */
|
||||
/* ===== Design tokens — Apple HIG with Manrope/Fraunces ===== */
|
||||
|
||||
:root {
|
||||
--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;
|
||||
/* 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 */
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
/* Light — polished iOS groupedBackground with warm undertone */
|
||||
:root {
|
||||
--bg: 244 246 247;
|
||||
--bg: 245 245 249; /* slightly warmer than 242,242,247 */
|
||||
--surface: 255 255 255;
|
||||
--surface-2: 236 240 242;
|
||||
--text: 22 27 29;
|
||||
--text-secondary: 72 82 87;
|
||||
--text-tertiary: 103 113 118;
|
||||
--hairline: 174 185 190;
|
||||
--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;
|
||||
--vibrancy: 255 255 255;
|
||||
--sidebar: 26 31 33;
|
||||
--sidebar-text: 245 247 248;
|
||||
--sidebar-muted: 156 170 176;
|
||||
|
||||
--accent-soft: 16 118 110;
|
||||
--bg-deep: 226 231 233;
|
||||
--accent-soft: 255 107 53;
|
||||
--bg-deep: 232 232 238;
|
||||
--surface-elevated: 255 255 255;
|
||||
--border: 174 185 190;
|
||||
--muted: 72 82 87;
|
||||
--victory: 22 163 74;
|
||||
--defeat: 220 38 38;
|
||||
--xp: 217 119 6;
|
||||
--border: 60 60 67;
|
||||
--muted: 60 60 67;
|
||||
--victory: 52 199 89;
|
||||
--defeat: 255 59 48;
|
||||
--xp: 255 159 10;
|
||||
}
|
||||
|
||||
/* Dark — true black with grey elevation */
|
||||
.dark {
|
||||
--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: 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-deep: 12 14 15;
|
||||
--surface-elevated: 36 42 45;
|
||||
--border: 84 96 101;
|
||||
--muted: 203 211 215;
|
||||
--bg-deep: 0 0 0;
|
||||
--surface-elevated: 44 44 46;
|
||||
--border: 84 84 88;
|
||||
--muted: 235 235 245;
|
||||
}
|
||||
|
||||
/* ===== Base ===== */
|
||||
@@ -88,31 +85,50 @@ body,
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, 'Segoe UI Variable Text', 'Segoe UI', 'Plus Jakarta Sans',
|
||||
system-ui, sans-serif;
|
||||
'Plus Jakarta Sans',
|
||||
-apple-system,
|
||||
'SF Pro Text',
|
||||
'Segoe UI Variable Text',
|
||||
'Segoe UI',
|
||||
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;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
/* Display — Bricolage Grotesque for headings and brand. Variable opsz axis
|
||||
gives bigger glyphs slightly more character. */
|
||||
.font-display {
|
||||
font-family:
|
||||
-apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
|
||||
system-ui, sans-serif;
|
||||
'Bricolage Grotesque',
|
||||
'Plus Jakarta Sans',
|
||||
-apple-system,
|
||||
'SF Pro Display',
|
||||
system-ui,
|
||||
sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
letter-spacing: 0;
|
||||
font-variation-settings: 'opsz' 24;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* 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:
|
||||
-apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans',
|
||||
system-ui, sans-serif;
|
||||
'Bricolage Grotesque',
|
||||
'Plus Jakarta Sans',
|
||||
-apple-system,
|
||||
'SF Pro Display',
|
||||
system-ui,
|
||||
sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
letter-spacing: 0;
|
||||
font-variation-settings: 'opsz' 96;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.font-mono-num {
|
||||
@@ -120,14 +136,7 @@ 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;
|
||||
}
|
||||
|
||||
.tracking-tight,
|
||||
.tracking-wider,
|
||||
.tracking-\[0\.06em\],
|
||||
.tracking-\[0\.18em\] {
|
||||
letter-spacing: 0 !important;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Custom titlebar drag region */
|
||||
@@ -140,47 +149,36 @@ body {
|
||||
app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Crisp panel separators for dense desktop surfaces */
|
||||
/* iOS 0.5px-style hairlines */
|
||||
.hairline-b {
|
||||
box-shadow: inset 0 -1px 0 rgb(var(--hairline) / 0.34);
|
||||
box-shadow: inset 0 -0.5px 0 rgb(var(--hairline) / 0.18);
|
||||
}
|
||||
.hairline-t {
|
||||
box-shadow: inset 0 1px 0 rgb(var(--hairline) / 0.34);
|
||||
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);
|
||||
}
|
||||
|
||||
/* macOS vibrancy */
|
||||
.vibrancy {
|
||||
background-color: rgb(var(--vibrancy) / 0.96);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
background-color: rgb(var(--vibrancy) / 0.72);
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(30px);
|
||||
}
|
||||
|
||||
/* Soft iOS card shadow with subtle warmth */
|
||||
.shadow-card {
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(var(--hairline) / 0.24),
|
||||
0 10px 28px -24px rgb(15 23 42 / 0.45);
|
||||
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);
|
||||
}
|
||||
.dark .shadow-card {
|
||||
box-shadow:
|
||||
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;
|
||||
0 0.5px 0 rgb(255 255 255 / 0.04) inset,
|
||||
0 1px 2px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
@@ -210,12 +208,12 @@ body {
|
||||
|
||||
.reminder-shell {
|
||||
position: relative;
|
||||
border: 1px solid rgb(var(--hairline) / 0.35);
|
||||
border-radius: 12px;
|
||||
border: 0.5px solid rgb(var(--hairline) / 0.25);
|
||||
border-radius: 22px;
|
||||
background: rgb(var(--surface));
|
||||
box-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 0.08),
|
||||
0 24px 70px -28px rgb(0 0 0 / 0.55);
|
||||
0 1px 2px rgb(0 0 0 / 0.06),
|
||||
0 20px 50px -16px rgb(0 0 0 / 0.4);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -21,57 +21,111 @@ export type ReleaseNoteItem = {
|
||||
export type ReleaseNotes = Record<Language, ReleaseNoteItem[]>
|
||||
|
||||
export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
|
||||
'0.7.0': {
|
||||
'0.8.0': {
|
||||
ru: [
|
||||
{
|
||||
title: 'Новый desktop-дизайн',
|
||||
title: 'Добавлен помощник дня',
|
||||
detail:
|
||||
'Приложение стало рабочей панелью: темный сайдбар, четкие панели, меньше декоративности и больше полезной плотности.',
|
||||
'Обзор теперь показывает советы по пропускам, питанию, вечерним провалам и текущему ритму.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Обзор стал операционным экраном',
|
||||
title: 'Появились быстрые пресеты',
|
||||
detail:
|
||||
'Главный экран теперь быстрее показывает ближайший шаг, статус, цели, питание, режим и игровые долги.',
|
||||
'Офисная разминка, спина и шея, минимум на день и набор после катки добавляются одним кликом.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Настройки и списки стали спокойнее',
|
||||
title: 'Короткие разминка-сессии',
|
||||
detail:
|
||||
'Упражнения, питание, игры, челленджи и настройки получили единый desktop-контейнер и компактные строки.',
|
||||
'На главном экране можно запустить 3, 5 или 10 минут и записать подходы в историю.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Модалки и напоминания обновлены',
|
||||
title: 'Неделя в цифрах',
|
||||
detail:
|
||||
'Редакторы, переключатели, кнопки и окно напоминания приведены к новой desktop-системе.',
|
||||
'Добавлена компактная аналитика: дни активности, повторы, закрываемость, пропуски и лучший день.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Dota-долг стал мягче',
|
||||
detail:
|
||||
'Большой долг после матча теперь предлагается разбивать на подходы: сколько сейчас и сколько позже.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Тон напоминаний',
|
||||
detail:
|
||||
'В настройках можно выбрать спокойные, краткие, настойчивые или более игровые формулировки.',
|
||||
tag: 'new'
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
title: 'New desktop design',
|
||||
title: 'Added a day assistant',
|
||||
detail:
|
||||
'The app now feels like a focused workstation: dark sidebar, crisp panels, less decoration and better density.',
|
||||
'Overview now shows suggestions for skips, meals, evening slumps and current rhythm.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Overview is more operational',
|
||||
title: 'Fast presets are here',
|
||||
detail:
|
||||
'The main screen surfaces the next action, status, goals, meals, mode and game debt faster.',
|
||||
'Office warm-up, back and neck, daily minimum and after-match sets can be added in one click.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Settings and lists are calmer',
|
||||
title: 'Short warm-up sessions',
|
||||
detail:
|
||||
'Exercises, meals, games, challenges and settings now share a tighter desktop container and compact rows.',
|
||||
'Run 3, 5 or 10 minutes from Overview and log the selected actions into history.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Dialogs and reminders were refreshed',
|
||||
title: 'Week in numbers',
|
||||
detail:
|
||||
'Editors, switches, buttons and the reminder window now follow the new desktop system.',
|
||||
'Compact analytics now show active days, reps, completion, skips and best day.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Game debt is easier to close',
|
||||
detail:
|
||||
'Large Dota match debt now suggests sets: how much to do now and how much can wait.',
|
||||
tag: 'new'
|
||||
},
|
||||
{
|
||||
title: 'Reminder tone',
|
||||
detail:
|
||||
'Settings can switch reminder wording between calm, brief, firm and playful.',
|
||||
tag: 'new'
|
||||
}
|
||||
]
|
||||
},
|
||||
'0.7.1': {
|
||||
ru: [
|
||||
{
|
||||
title: 'Вернули последний удачный дизайн',
|
||||
detail:
|
||||
'Редизайн 0.7.0 откатан: интерфейс снова выглядит как сохраненная версия “последнее-удачное”.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Откат придет через автообновление',
|
||||
detail:
|
||||
'Версия 0.7.1 опубликована как обычный релиз, чтобы установленная 0.7.0 сама вернулась к старому виду.',
|
||||
tag: 'fix'
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
title: 'Restored the last good design',
|
||||
detail:
|
||||
'The 0.7.0 redesign was rolled back: the UI is back to the saved last-good version.',
|
||||
tag: 'fix'
|
||||
},
|
||||
{
|
||||
title: 'Rollback ships through auto-update',
|
||||
detail:
|
||||
'Version 0.7.1 is a normal release so installed 0.7.0 copies can return to the old look automatically.',
|
||||
tag: 'fix'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -77,6 +77,7 @@ export const MEAL_PRESETS: MealPreset[] = [
|
||||
]
|
||||
|
||||
export type NotificationMode = 'toast' | 'modal' | 'both'
|
||||
export type NotificationTone = 'calm' | 'brief' | 'firm' | 'playful'
|
||||
export type Theme = 'light' | 'dark' | 'system'
|
||||
export type Language = 'ru' | 'en'
|
||||
|
||||
@@ -96,6 +97,7 @@ export type QuietHours = {
|
||||
export type Settings = {
|
||||
globalEnabled: boolean
|
||||
notificationMode: NotificationMode
|
||||
notificationTone: NotificationTone
|
||||
soundEnabled: boolean
|
||||
/**
|
||||
* TTS голос диктора в окне напоминания: «Время приседать. Десять раз».
|
||||
@@ -280,6 +282,7 @@ export type MatchSummary = {
|
||||
export const DEFAULT_SETTINGS: Settings = {
|
||||
globalEnabled: true,
|
||||
notificationMode: 'modal',
|
||||
notificationTone: 'calm',
|
||||
soundEnabled: true,
|
||||
voicePromptsEnabled: false, // opt-in — на работе с коллегами может смущать
|
||||
meetingAutoPause: true,
|
||||
|
||||
@@ -5,7 +5,7 @@ export default {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Desktop semantic palette
|
||||
// iOS 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,9 +20,6 @@ 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>)',
|
||||
@@ -71,14 +68,15 @@ export default {
|
||||
]
|
||||
},
|
||||
borderRadius: {
|
||||
xl: '8px',
|
||||
'2xl': '10px',
|
||||
'3xl': '12px'
|
||||
// iOS-specific radii
|
||||
xl: '14px',
|
||||
'2xl': '18px',
|
||||
'3xl': '22px'
|
||||
},
|
||||
boxShadow: {
|
||||
ios: '0 1px 2px rgb(15 23 42 / 0.06), 0 10px 28px -24px rgb(15 23 42 / 0.35)',
|
||||
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)',
|
||||
sheet:
|
||||
'0 1px 2px rgb(15 23 42 / 0.08), 0 24px 60px -28px rgb(15 23 42 / 0.45)'
|
||||
'0 1px 2px rgb(0 0 0 / 0.06), 0 20px 50px -16px rgb(0 0 0 / 0.4)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user