AnRil/laude
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 29 Wiki Activity

Compare commits

base: AnRil:v0.7.0
Branches Tags
AnRil:main AnRil:fix/meals-toggle-anim AnRil:feat/meals AnRil:feat/professional-polish AnRil:redesign/apple-ios
AnRil:v0.8.0 AnRil:v0.7.1 AnRil:v0.7.0 AnRil:последнее-удачное AnRil:v0.6.6 AnRil:v0.6.5 AnRil:v0.6.4 AnRil:v0.6.3 AnRil:v0.6.2 AnRil:v0.6.1 AnRil:v0.6.0 AnRil:v0.5.8 AnRil:v0.5.7 AnRil:v0.5.6 AnRil:v0.5.5 AnRil:v0.5.4 AnRil:v0.5.3 AnRil:v0.5.2 AnRil:v0.5.1 AnRil:update-channel AnRil:v0.5.0 AnRil:v0.4.0 AnRil:v0.3.7 AnRil:v0.3.6 AnRil:v0.3.5 AnRil:v0.3.4 AnRil:v0.3.3 AnRil:v0.3.2 AnRil:v0.3.1 AnRil:v0.3.0
..
compare: AnRil:v0.7.1
Branches Tags
AnRil:main AnRil:fix/meals-toggle-anim AnRil:feat/meals AnRil:feat/professional-polish AnRil:redesign/apple-ios
AnRil:v0.8.0 AnRil:v0.7.1 AnRil:v0.7.0 AnRil:последнее-удачное AnRil:v0.6.6 AnRil:v0.6.5 AnRil:v0.6.4 AnRil:v0.6.3 AnRil:v0.6.2 AnRil:v0.6.1 AnRil:v0.6.0 AnRil:v0.5.8 AnRil:v0.5.7 AnRil:v0.5.6 AnRil:v0.5.5 AnRil:v0.5.4 AnRil:v0.5.3 AnRil:v0.5.2 AnRil:v0.5.1 AnRil:update-channel AnRil:v0.5.0 AnRil:v0.4.0 AnRil:v0.3.7 AnRil:v0.3.6 AnRil:v0.3.5 AnRil:v0.3.4 AnRil:v0.3.3 AnRil:v0.3.2 AnRil:v0.3.1 AnRil:v0.3.0

3 Commits
v0.7.0 ... v0.7.1

Author SHA1 Message Date
Codex
a92f642a3e chore(release): v0.7.1 2026-06-09 01:00:35 +07:00
Codex
8176df3ca2 docs(release): note rollback to last good design 2026-06-09 00:58:59 +07:00
Codex
20a260d0cc Revert "feat(ui): redesign desktop experience" 
This reverts commit f61e076e46.
 2026-06-09 00:56:40 +07:00
28 changed files with 461 additions and 468 deletions
Expand all files Collapse all files

34
CHANGELOG.md
View File

@@ -6,23 +6,15 @@
## [Unreleased]
## [0.7.0] — 2026-06-08
### Added
- Текущая версия `v0.6.6` сохранена отдельным тегом `последнее-удачное`
как точка отката перед большим редизайном.
## [0.7.1] — 2026-06-09
### Changed
- Интерфейс приложения пересобран в новом desktop-направлении: темный сайдбар,
плотный рабочий контент, нейтральная палитра, чёткие панели и радиусы 8–10px.
- Главный экран стал операционным overview: верхняя панель состояния, компактные
status tiles, план ближайшего шага, цели, питание, режим и игровые долги.
- Страницы упражнений, питания, игр, челленджей и настроек получили единый
desktop-контейнер, более плотные списки и менее декоративные summary-блоки.
- Редакторы, модальные окна, кнопки, переключатели, heatmap, достижения и окно
напоминания приведены к новой desktop-системе.
- Полный редизайн `v0.7.0` откачен: интерфейс возвращен к сохраненной
версии `последнее-удачное` / `v0.6.6`, потому что новое направление не
подошло.
- `v0.7.1` публикуется как обычное обновление, чтобы пользователи на `v0.7.0`
автоматически получили возврат к последнему удачному внешнему виду.
## [0.6.6] — 2026-06-08
@@ -188,7 +180,7 @@ clearHistory/import`, Dashboard на него подписан.
### Fixed (P1 — UX просадки)
- **Удаление упражнения теперь спрашивает подтверждение.** Раньше
один клик в menu «Удалить» сразу удалял. Сейчас ConfirmModal
один клик в menu «Удалить» сразу удалял. Сейчас iOS-style ConfirmModal
с destructive-кнопкой.
- **Daily goal закрыт — больше не «25 часов 13 минут».** Когда дневная
цель достигнута, ExerciseCard показывает «Цель закрыта · 100/100»
@@ -197,7 +189,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 +215,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 +542,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 +560,8 @@ 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.7.1...HEAD
[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

4
README.md
View File

@@ -2,7 +2,7 @@
Windows desktop приложение, которое помогает делать короткие перерывы без потери фокуса: держит план дня, напоминает размяться, ведёт недельные челленджи и превращает Dota 2 статистику после матча в игровые долги.
[![release](https://img.shields.io/badge/release-v0.7.0-orange)](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
[![release](https://img.shields.io/badge/release-v0.7.1-orange)](https://git.xn--90adajar8af4h.xn--p1ai/AnRil/laude/releases/latest)
[![tests](https://img.shields.io/badge/tests-245%20passing-green)]()
[![platform](https://img.shields.io/badge/platform-Windows%2010%2F11-blue)]()
@@ -15,7 +15,7 @@ Windows desktop приложение, которое помогает делат
- **Тихие часы** — окно времени когда напоминания подавляются (например `22:00 → 08:00`), с выбором дней недели.
- **Сделал частично** — степпер `−/+` в окне напоминания: если ты сделал 5 из 10, в историю запишется честное число.
- **Игровая интеграция (Dota 2)** — Game State Integration читает статистику матча, после Победа/Поражение показывает экран с «причитающимися» повторениями (например `10 смертей × 3 = 30 приседаний`).
- **Desktop-интерфейс** — темный сайдбар, плотные рабочие панели, чёткие строки списков, светлая/тёмная/системная тема.
- **Фирменный desktop-интерфейс** — Plus Jakarta Sans + Bricolage Grotesque, мягкая палитра, sidebar, spring-анимации, светлая/тёмная/системная тема.
- **Два языка** — русский и английский, переключение мгновенное.
- **Auto-update** — приложение само скачивает новые версии из фиксированного `update-channel` (проверка каждый час, силент-ретрай при сетевых сбоях).

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "laude",
"version": "0.7.0",
"version": "0.7.1",
"description": "Разомнись — Windows desktop break and exercise reminder",
"main": "out/main/index.js",
"author": "AnRil",

4
src/renderer/src/App.tsx
View File

@@ -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)} />

49
src/renderer/src/ReminderApp.tsx
View File

@@ -226,7 +226,8 @@ export default function ReminderApp(): JSX.Element {
void window.api.markChallengeDone(id, result.reps)
}
// 2) Functional update: rapid-click race-safe.
setMode((m) => {
setMode((m) =>
{
if (m.kind !== 'match') return m
const nextMode: Mode = {
kind: 'match',
@@ -235,7 +236,8 @@ export default function ReminderApp(): JSX.Element {
}
modeRef.current = nextMode
return nextMode
})
}
)
}}
onClose={close}
/>
@@ -328,7 +330,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 +338,7 @@ function ExerciseReminder({
<div className="text-[13px] uppercase tracking-[0.18em] text-accent font-bold">
{t(`category.${exercise.category ?? 'exercise'}.cta`)}
</div>
<h1 className="font-display text-[30px] leading-tight mt-2 mb-3 font-bold">
<h1 className="font-serif text-[30px] leading-tight tracking-tight mt-2 mb-3 font-bold">
{exercise.name}
</h1>
@@ -344,7 +346,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 +354,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 +366,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 +392,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>
@@ -450,10 +452,7 @@ function MealReminder({
} else if (e.key === 'Escape') {
e.preventDefault()
onClose()
} else if (
(e.key === ' ' || e.code === 'Space') &&
targetTag !== 'BUTTON'
) {
} else if ((e.key === ' ' || e.code === 'Space') && targetTag !== 'BUTTON') {
e.preventDefault()
void snooze()
}
@@ -482,7 +481,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 +489,7 @@ 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">
<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 +500,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 })}
@@ -568,7 +567,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 +579,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
@@ -627,7 +626,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 +661,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 +691,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 +701,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'

21
src/renderer/src/components/AchievementsCard.tsx
View File

@@ -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(' ')}
>

49
src/renderer/src/components/ExerciseCard.tsx
View File

@@ -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>

24
src/renderer/src/components/ExerciseEditor.tsx
View File

@@ -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;

2
src/renderer/src/components/HistoryHeatmap.tsx
View File

@@ -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')}

18
src/renderer/src/components/MealEditor.tsx
View File

@@ -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
src/renderer/src/components/PageScaffold.tsx
View File

@@ -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 && (

76
src/renderer/src/components/Sidebar.tsx
View File

@@ -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>
</>

14
src/renderer/src/components/Titlebar.tsx
View File

@@ -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}

8
src/renderer/src/components/WhatsNewModal.tsx
View File

@@ -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">

26
src/renderer/src/components/ui/Button.tsx
View File

@@ -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

28
src/renderer/src/components/ui/Card.tsx
View File

@@ -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

8
src/renderer/src/components/ui/ConfirmModal.tsx
View File

@@ -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,

32
src/renderer/src/components/ui/Modal.tsx
View File

@@ -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>
)}

14
src/renderer/src/components/ui/Switch.tsx
View File

@@ -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 }}

20
src/renderer/src/pages/Challenges.tsx
View File

@@ -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">

84
src/renderer/src/pages/Dashboard.tsx
View File

@@ -197,28 +197,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 +238,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 +313,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 +336,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} />
@@ -378,7 +376,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 +399,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">
@@ -546,17 +544,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 +582,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 +606,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 +662,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 +706,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 +784,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 +801,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 +858,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 +923,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 +973,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 +1004,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 +1131,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>
)}

6
src/renderer/src/pages/Exercises.tsx
View File

@@ -27,8 +27,8 @@ export default function Exercises(): JSX.Element {
const totalReps = enabled.reduce((sum, e) => sum + e.reps, 0)
return (
<div className="h-full overflow-y-auto 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')}
@@ -122,7 +122,7 @@ export default function Exercises(): JSX.Element {
{exercises.length === 0 && (
<Card>
<div className="px-5 py-12 flex flex-col items-center text-center">
<div className="inline-flex w-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">

22
src/renderer/src/pages/Games.tsx
View File

@@ -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>

8
src/renderer/src/pages/Meals.tsx
View File

@@ -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">

20
src/renderer/src/pages/Settings.tsx
View File

@@ -36,7 +36,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 +52,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>
@@ -260,27 +260,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 +352,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>

172
src/renderer/src/styles/globals.css
View File

@@ -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%;
}

50
src/shared/release-notes.ts
View File

@@ -21,57 +21,33 @@ export type ReleaseNoteItem = {
export type ReleaseNotes = Record<Language, ReleaseNoteItem[]>
export const RELEASE_NOTES: Record<string, ReleaseNotes> = {
'0.7.0': {
'0.7.1': {
ru: [
{
title: 'Новый desktop-дизайн',
title: 'Вернули последний удачный дизайн',
detail:
'Приложение стало рабочей панелью: темный сайдбар, четкие панели, меньше декоративности и больше полезной плотности.',
tag: 'new'
'Редизайн 0.7.0 откатан: интерфейс снова выглядит как сохраненная версия “последнее-удачное”.',
tag: 'fix'
},
{
title: 'Обзор стал операционным экраном',
title: 'Откат придет через автообновление',
detail:
'Главный экран теперь быстрее показывает ближайший шаг, статус, цели, питание, режим и игровые долги.',
tag: 'new'
},
{
title: 'Настройки и списки стали спокойнее',
detail:
'Упражнения, питание, игры, челленджи и настройки получили единый desktop-контейнер и компактные строки.',
tag: 'new'
},
{
title: 'Модалки и напоминания обновлены',
detail:
'Редакторы, переключатели, кнопки и окно напоминания приведены к новой desktop-системе.',
tag: 'new'
'Версия 0.7.1 опубликована как обычный релиз, чтобы установленная 0.7.0 сама вернулась к старому виду.',
tag: 'fix'
}
],
en: [
{
title: 'New desktop design',
title: 'Restored the last good design',
detail:
'The app now feels like a focused workstation: dark sidebar, crisp panels, less decoration and better density.',
tag: 'new'
'The 0.7.0 redesign was rolled back: the UI is back to the saved last-good version.',
tag: 'fix'
},
{
title: 'Overview is more operational',
title: 'Rollback ships through auto-update',
detail:
'The main screen surfaces the next action, status, goals, meals, mode and game debt faster.',
tag: 'new'
},
{
title: 'Settings and lists are calmer',
detail:
'Exercises, meals, games, challenges and settings now share a tighter desktop container and compact rows.',
tag: 'new'
},
{
title: 'Dialogs and reminders were refreshed',
detail:
'Editors, switches, buttons and the reminder window now follow the new desktop system.',
tag: 'new'
'Version 0.7.1 is a normal release so installed 0.7.0 copies can return to the old look automatically.',
tag: 'fix'
}
]
},

16
tailwind.config.mjs
View File

@@ -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)'
}
}
},