- Add --color-warning-translucent and --color-soon tokens to tokens.css
- Replace hardcoded font-size 1.4rem with var(--text-xl) in dashboard.css
- Replace hardcoded rgba color with var(--color-warning-translucent)
- Remove duplicate .task-item__meta--overdue rule
- Fix hardcoded 'de-DE' locale: use formatTime() from i18n.js
- Fix formatDueDate: don't show time (23:59) when no due_time is set
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
After navigating to tasks/calendar/shopping/notes via FAB, the page's
primary add-button is programmatically clicked so the new-item modal
opens without a second tap. FAB container right-margin doubled to avoid
overlap with the browser's edge-swipe gesture zone.
Header shows current date and time instead of user name + separate date line.
urgentCount replaced by overdueCount (overdue tasks) and dueSoonCount (due today/soon),
each with a distinct chip color. formatDueDate updated to accept due_time and return
accurate overdue/soon states against the current moment.
dashboard grid expands to 4 columns at 1280px instead of 1440px.
widgetHeader replaces <a href> with <button type="button"> so iOS Safari
does not intercept the touch event before the JS click handler fires.
widget__header gets position: relative; z-index: 2 to appear above the
backdrop-filter ::after pseudo-element stacking context.
Imports fmtLocation; renderUpcomingEvents adds event-item__cal span for
cal_name and shows location with normalized ICS escapes via fmtLocation().
Event color dot gets filter: saturate(0.4) to match calendar view style.
Page-in animations drop 'forwards' fill mode — a .page-transition base class
(opacity:0) serves as the initial state, and .page-transition--in-{left,right}
force opacity:1 after the animation ends, preventing a flash-back-to-invisible
on some WebKit versions. Sidebar expands at 1440px instead of 1280px.
Glass desktop toolbar loses the rounded card border in favour of a flat
accent-top-border + bottom border consistent with other module headers.
pwa.css safe-area padding-bottom rule and body::after fill-overlay commented out.
glass.css nav-bottom uses margin-bottom: 0 instead; --hidden state uses
translateY(100%) + negative margin so the bar disappears without leaving a gap.
layout.css removes redundant padding-bottom from .nav-bottom rule.
group-mode toggle moved before view toggle in markup order.
Filter panel, task list, and FAB wrapped in .tasks-body for scroll containment.
tasks-toolbar flex-wrap removed — actions stay on one line on narrow screens.
allday-cell gets min-width: 0; overflow: hidden so long event titles
no longer stretch week-view column widths beyond their grid allocation.
Agenda event color dot replaced by a 3px full-height left bar matching
the dashboard upcoming-events style (align-items: stretch on parent).
- Implemented new recipes page with UI for managing recipes.
- Added REST API routes for recipes including create, read, update, and delete operations.
- Introduced database schema for recipes and recipe ingredients.
- Updated meals to link with recipes, allowing meals to reference specific recipes.
- Enhanced validation for recipe-related fields in meals.
- Added styles for the recipes page and components.
Root cause: when auth.me() failed during initial navigation, the catch block
called navigate('/login') without clearing _pendingLoginRedirect. The outer
finally then fired a second concurrent navigate('/login'), which held
isNavigating=true while running. If the user submitted the login form (or
iCloud Keychain autofilled credentials) before the second navigation
completed, navigate('/', user) was silently blocked by the isNavigating guard —
login appeared to succeed but the app never advanced to the dashboard.
Fix: clear _pendingLoginRedirect in the catch block so the finally handler
does not spawn the duplicate navigation.
Also adds a GET /api/v1/version endpoint (no auth required) and shows the
version on the login page, so users can verify their PWA has received the
latest cached JS.
Resolves#68
Co-authored-by: Ulas Kalayci <ulas.kalayci@googlemail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
All tokens with dark-mode overrides gain a private --_name counterpart in :root.
Public tokens (--color-*, --module-*, --glass-* etc.) become stable var(--_name)
references. Both dark blocks now only override compact private tokens — no more
manual two-block sync for every future colour change.
Also removes the redundant --color-surface-2 dark override (already auto-derived
via var(--neutral-50)). No visual change.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Bundles the Indigo accent migration, module-colour decoupling, WCAG
contrast improvements and nav-badge base-style relocation into one
release. See CHANGELOG.md [0.20.15] for full details.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The .nav-badge base styles (background, size, color) were defined in tasks.css,
which is dynamically unloaded when navigating away from /tasks. This caused the
overdue badge in the nav to become invisible on every other page, even though
the badge element remained in the DOM.
Also refactors subtask checkbox icon to use a CSS class instead of inline styles.
Resolves#56
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Root cause: the badge was `position: absolute` relative to the entire
`.nav-item`, which stretches to `flex: 1` on mobile (up to ~75 px wide).
With `right: 4px` the badge sat far from the icon on the bottom bar and
overlapped label text in the expanded desktop sidebar.
Fix: `updateOverdueBadge()` now wraps the nav icon in a
`.nav-item__icon-wrap` span (created once, reused on subsequent calls).
The badge is appended there instead of to the nav item root.
CSS changes:
- Remove `.nav-item .nav-badge` positional override
- Add `.nav-item__icon-wrap { position: relative; display: inline-flex }`
- Add `.nav-item__icon-wrap .nav-badge { position: absolute; top: -4px; right: -4px }`
The badge now consistently overlays the top-right corner of the icon
across all nav layouts (mobile column, collapsed sidebar row, expanded
sidebar row with label).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The nav-badge was appended as an in-flow flex child, breaking nav-item
layout: on mobile (column flex) it appeared below the label, on desktop
sidebar (row flex + justify-content:center) it was pushed far right via
margin-left:auto. Fix positions it absolutely within the nav-item and
uses DOM API instead of insertAdjacentHTML per project convention.
Co-authored-by: Ulas Kalayci <ulas.kalayci@googlemail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
position: sticky on .modal-panel__header failed on iOS WebKit when the
scroll container had padding-top applied (drag-handle spacing). Restructured
modal layout: .modal-panel is now a flex-column with overflow:hidden and
.modal-panel__body handles scrolling (overflow-y:auto, flex:1). The header
is a non-scrolled flex sibling, so it stays visible without sticky. Updated
swipe-to-close to read .modal-panel__body scroll position.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- pwa.css: body::after now uses var(--glass-bg) matching the nav's glass
background exactly; z-index lowered to z-nav-1 so the nav renders
on top in the overlap area (safe-area padding), removing the visible
color mismatch that appeared as empty space
- router.js: add iOS focusin/focusout handlers that temporarily set
maximum-scale=1 on input focus to prevent WKWebView auto-zoom;
restores original viewport content 150ms after blur so manual
zoom remains available for accessibility
Two causes of ~1s navigation delay fixed:
1. glass.css Section 19 was extending the page-in animation from 0.20s
to 0.30s using spring easing. Reverted to 0.20s in / 0.12s out.
2. During transitions, dozens of backdrop-filter layers (widgets, cards,
inputs, toolbars) were composited simultaneously for both the outgoing
and incoming page, overloading mid-range Android GPUs.
Added html.navigating class: router.js sets it at transition start,
glass.css overrides all app-content backdrop-filters to none while
active, animationend removes it once the in-animation completes.
will-change: transform on a position:relative flex child causes iOS WebKit
to composite the element at an incorrect position - creating a visible gap
below the nav bar. Remove it; CSS transform transitions use hardware
acceleration automatically on modern iOS without this hint.
Add -webkit-fill-available before 100dvh on .app-shell as a fallback for
iOS WebKit versions where 100dvh is computed slightly smaller than the
actual WKWebView height.
Switch .nav-bottom from position: fixed to a flex child of .app-shell.
With position: fixed and will-change: transform (used for the hide/show
animation), iOS compositor layers can misplace the element. As a flex
child (position: relative; flex-shrink: 0) at the end of a height: 100dvh
container the nav is guaranteed to sit flush at the physical screen bottom.
Remove padding-bottom clearance from .app-content, .tasks-page and
.dashboard - no longer needed since the nav no longer overlaps the
content area.
When adding ingredients in the meal editor, each ingredient now has a
category dropdown. Categories are stored on the ingredient and applied
automatically when transferring to the shopping list, so items appear
pre-grouped by category without manual re-sorting.
iOS reserves the home indicator area outside the CSS viewport, leaving
a black strip below the bottom navigation. A fixed body::after pseudo-
element now fills this zone with the surface color. Also added explicit
background-color on body for consistent rendering.
- FAB focus ring: double-ring pattern replacing invisible #fff outline
- forced-colors media query for Windows High Contrast Mode
- New tokens: --color-accent-secondary, --content-max-width-narrow, --cal-hour-height
- Apple sync logo uses semantic tokens for correct dark mode inversion
- Sidebar logo gradient references token instead of hardcoded #7C5CFC
Users can now show/hide widgets and reorder them via a settings button
in the greeting header. Configuration is persisted server-side in
sync_config (dashboard_widgets key) and shared across all family members.
- Greeting widget gets a settings icon button opening a customize modal
- Modal lists all widgets (tasks, calendar, shopping, meals, notes,
weather) with toggle switches and up/down reorder buttons
- Reset to default layout available in the modal
- GET /preferences now returns dashboard_widgets; PUT accepts it
- All 10 locales updated with new i18n keys
Dashboard widgets, task cards, note items, meal slots, form inputs,
toolbars, and FAB actions now use semi-transparent glass backgrounds
with backdrop-filter blur. Each surface gets a subtle module accent
color tint via color-mix gradient overlay. App background uses a
radial accent gradient for ambient vibrancy.
New tokens: --glass-bg-card, --glass-bg-input, --glass-bg-toolbar,
--glass-tint-strength with full dark mode and accessibility overrides.
In iOS WebKit standalone (home screen) mode, position:fixed elements
move with the page when the body itself becomes scrollable - unlike
regular Safari where fixed elements stay pinned. The root cause was
body having min-height: 100dvh without overflow: hidden, which allowed
body scroll to occur when content overflowed.
Fix: html and body are now overflow: hidden with fixed height (100% / 100dvh)
so all scrolling is confined to .app-content. Service worker bumped to
shell-v30 to force re-download of reset.css on installed PWAs.
- All @supports checks extended to include or (-webkit-backdrop-filter: blur(1px))
so Safari < 18 (which only recognizes the -webkit- prefix) no longer skips
the entire @supports block and receives no glass styles at all
- Non-blur glass styles (background-color, border, box-shadow) moved outside
@supports blocks - always active on all browsers regardless of blur support
- Capsule buttons, specular highlights, glass borders and shadows now visible
on all devices, blur effects added on top where supported
- dashboard.css: move .widget glass styles (shadow, border, ::before highlight)
directly here since module CSS loads after glass.css and would override it
- tasks.css: move .filter-chip--active glass state and fix .priority-badge
border-radius to use --radius-glass-chip (capsule) instead of --radius-xs
- glass.css: remove dead .sticky-header rule (class not used in HTML) and
remove duplicate .widget rules now handled by dashboard.css
Ulas Kalayci