Commit Graph

41 Commits

Author SHA1 Message Date
Ulas Kalayci 1c0725cc57 fix: generate unique SVG gradient IDs to prevent DOM ID collisions on re-render 2026-04-25 22:24:40 +02:00
Ulas Kalayci b07a254d0a fix: add focus trap to search overlay — prevents keyboard focus leaking to hidden page 2026-04-25 22:23:59 +02:00
Ulas Kalayci df9256ebff chore: release v0.23.7 2026-04-22 08:53:36 +02:00
Ulas Kalayci 372a51bdb1 chore: release v0.23.6 2026-04-22 08:50:43 +02:00
Konrad M. 25d2b42ba3 fix(router): auto-reload page 8 s after SW update toast is shown 2026-04-21 22:18:14 +02:00
Ulas Kalayci 40252ee0dc fix(sw): bump cache versions, add recipes to pre-cache, guard init IIFE
Resolves #72

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 15:41:46 +02:00
Ulas Kalayci a253f0a7fa chore: release v0.22.0
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 14:23:53 +02:00
Serhiy Bobrov 0b54fe255b feat: add recipes module with CRUD functionality and integrate with meals
- 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.
2026-04-21 14:15:39 +02:00
ulsklyc d1ec7367a0 fix(auth): resolve post-login navigate race condition and add version display (#68) (#70)
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>
2026-04-21 08:19:53 +02:00
Ulas Kalayci e48d249fbe chore: release v0.20.24
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-20 10:05:12 +02:00
Ulas Kalayci b867917995 feat: kanban touch drag, swipe undo, dashboard task deep-link
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-20 09:44:50 +02:00
Ulas 66816a4f88 fix: resolve iOS PWA bottom space and keyboard zoom issues
- 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
2026-04-16 15:35:03 +02:00
Ulas 5bd80b1333 fix: reduce page transition lag on Android (closes #48)
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.
2026-04-16 13:50:38 +02:00
Ulas fc6e4fb9f2 fix: resolve auth:expired race condition and force SW cache refresh
- Add _pendingLoginRedirect flag in router.js to handle auth:expired
  events that fire during active navigation (isNavigating=true).
  Previously the navigate('/login') call was silently dropped, leaving
  the user stuck on the dashboard with an error toast.
- Bump SHELL_CACHE v33→v34 and PAGES_CACHE v28→v29 to force cache
  invalidation on iOS devices still running the pre-CSRF-fix code.
- Add err.status to dashboard error log for easier diagnostics.
2026-04-16 08:15:04 +02:00
Ulas e384ae1037 feat: add reminders for tasks and calendar events (closes #13)
- DB migration #8: reminders table (entity_type, entity_id, remind_at, dismissed, created_by)
- REST API: GET /pending, GET /?entity, POST /, PATCH /:id/dismiss, DELETE
- Client polling module (reminders.js): 60s interval, toast + Browser Notification API
- Tasks: enable reminder with custom date/time in edit modal
- Calendar: reminder offset selector (at time / 15min / 1h / 1d before)
- Bell badge shows pending count; reminders auto-dismiss after 30s or on user action
- SW shell cache updated to include reminders.js + reminders.css
- 11 new DB tests covering CRUD, pending query, dismiss, upsert, cascade delete, constraints
2026-04-15 11:40:24 +02:00
Ulas 2a2249182e feat: Phase 3 - Micro-Interactions + Polish
glass.css - Phase 3 Ergänzungen:

Nav Auto-Hide (Section 18):
- .nav-bottom: will-change: transform + transition für smooth slide
- .nav-bottom--hidden: translateY(100% + safe-area) + pointer-events: none

Modal Spring-Entrance (Section 19):
- Desktop: glass-modal-scale-in mit --ease-glass (spring overshoot)
  0.32s, scale(0.90) → scale(1) + translateY(8px) → 0
- Mobile: glass-sheet-in, sanfterer Slide (40% statt 100%) + opacity ramp
- Beide Animationen ersetzen die linearen layout.css-Varianten

Seitentransitionen (Section 20):
- In-Animationen: 0.30s mit --ease-glass statt 0.20s ease
- Out-Animationen: 0.14s mit --ease-out (schnell raus, langsam rein)

List-Stagger (Section 21):
- 0.28s + --ease-glass für physikalisch plausibleren Erscheinungseffekt

Focus-Ring (Section 22):
- transition auf outline-offset + box-shadow für sanften Focus-Pop

Skeleton Shimmer (Section 23):
- 105° Gradient mit glass-highlight-Tint statt flat-grey
- Hellerer Mittelpunkt simuliert Lichtreflexion

FAB Attention Pulse (Section 24):
- Einmaliger Ring-Expand 0.6s nach Erscheinen (fab-ring-pulse)
- Kombinierte animation-Deklaration mit fab-in

Accessibility (Section 25):
- prefers-reduced-motion deaktiviert alle Phase-3-Animationen

router.js:
- initNavHideOnScroll(): scroll-Listener auf #main-content
  versteckt .nav-bottom beim Runterscrollen (+ 4px Hysterese)
  zeigt wieder beim Hochscrollen (- 4px) oder bei < 10px
  nur aktiv bei < 1024px (Mobile/Tablet, kein Desktop)
- wird in renderAppShell() nach initBottomNavSwipe() aufgerufen
2026-04-13 17:11:38 +02:00
Ulas 44e5a879b9 fix(ux): replace native confirm() dialogs, add undo-toast, fix prefers-reduced-motion
- Replace all 13 native confirm() calls with confirmModal() across 7 page modules
- Add confirmModal() to modal.js (Promise-based, danger variant, focus management)
- Fix double-confirm bug in contacts.js and budget.js (modal + deleteContact/deleteEntry)
- Extend showToast() with onUndo callback and max-3-toast limit
- Implement optimistic undo-toast (4s window) for shopping item and bulk-checked delete
- Add prefers-reduced-motion guard to btnSuccess() and btnError() in modal.js
- Add btn--error-static CSS class as motion-reduced fallback for btnError()
- Add toast__undo button styles to layout.css
- Add common.confirm and common.undo i18n keys (de, en, it, sv)
- Add shopping.itemDeletedToast i18n key (de, en, it, sv)
2026-04-05 12:31:16 +02:00
Ulas 38c5852c78 fix(ux): improve microinteractions across the app
1. Nav-item tap: smooth scale transition instead of abrupt snap
2. Custom toggle switch: iOS-style toggle replaces native checkboxes
3. Focus-visible: outline on cards, buttons, FABs for keyboard users
4. Empty-state: gentle fade-in animation
5. Toast icons: SVG icons for success/danger/warning types
6. Swipe haptic: vibrate(15) fires at threshold during touchmove
2026-04-04 07:25:54 +02:00
Ulas dd10974997 fix(ux): defer old stylesheet removal until after page content is gone
Previous fix removed the old CSS when new CSS loaded, but that happened
BEFORE the out-animation completed - causing a flash of unstyled content.
Now the old stylesheet stays until replaceChildren removes the old DOM.
2026-04-04 07:04:52 +02:00
Ulas a9d2a802ab fix(ux): prevent flash of unstyled content during page transitions
- Keep old page stylesheet until new one is fully loaded
- Hide new page wrapper until render() completes before starting animation
2026-04-04 06:58:12 +02:00
Ulas 364d029950 fix(ux): prevent iOS auto-zoom on inputs + lazy-load page CSS
Increase font-size to 16px on mobile for shopping quick-add inputs,
notes search, and contacts search. Desktop breakpoint restores compact
sizes. Move 9 page-specific stylesheets from index.html to on-demand
loading in router.js, reducing initial CSS payload.
2026-04-04 06:39:45 +02:00
Ulas 70c1291ae7 fix(a11y): skip-link target, priority labels, greeting tokens
- Rename #page-content to #main-content so skip-to-content link
  targets the semantic <main> landmark
- Add sr-only priority labels to dashboard task items for screen
  readers (WCAG 1.4.1 color-not-only)
- Replace hardcoded hex in greeting gradient with accent tokens
  so dark mode themes the banner correctly
- Replace hardcoded gap: 2px with --space-0h token
- Bump version to 0.7.2
2026-04-04 06:31:21 +02:00
Ulas 1122bd269b style: replace em dashes with hyphens throughout codebase
Replace all — with - in all source files (JS, CSS, HTML, JSON,
Markdown) for consistency and readability.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-03 17:04:39 +02:00
Ulas 3aefca0a44 feat: i18n navigation labels
Replace all hardcoded German strings in router.js (navItems labels,
aria-labels, skip-link, error/toast messages) with t() calls. Add a
locale-changed event listener that re-renders sidebar and bottom-nav
items on language switch.
2026-03-31 23:19:05 +02:00
Ulas af8f9ccb56 feat: initialize i18n before first route render 2026-03-31 21:53:14 +02:00
Ulas 7f41ee380a refactor: move --active-module-accent update into navigate() to avoid duplicate ROUTES.find
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-31 13:31:57 +02:00
Ulas 6a018867e0 feat: active nav tab uses module accent colour 2026-03-31 13:22:16 +02:00
Ulas fd94c58fea fix: hide FAB when virtual keyboard is open on mobile
Uses visualViewport resize event to detect keyboard state (viewport height
< 75% of window height). Sets body.keyboard-visible class; CSS hides
.fab and .page-fab via visibility:hidden on screens < 1024px.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-31 12:26:59 +02:00
Ulas 20792e9894 fix: sync ROUTE_ORDER with nav order, guard against navigation race condition
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 17:11:53 +02:00
Ulas bc3f855fa9 feat: directional slide-x page transitions in router
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 17:08:49 +02:00
Ulas 41e88e0acf Add PWA native feel: manifest, meta tags, install prompt, SW optimization, dynamic theme-color
Configure manifest.json with scope, maskable icons, and categories. Add iOS/Android
meta tags for standalone behavior. Create pwa.css for native touch/scroll handling
and safe area insets. Add oikos-install-prompt Web Component with Chrome install
flow and iOS guidance. Optimize service worker with network-first navigation and
expanded precache (v19). Add dynamic theme-color per route and modal overlay dimming
in standalone mode. Generate placeholder icons via sharp script.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-29 15:35:01 +02:00
Ulas a7214f81e6 fix: 4 Bugs behoben — Dark-Mode Inputs, Essensplan, Dashboard-Refresh, Mengenfeld
1. Dark Mode: .form-input hatte kein Styling, Browser-Default führte zu
   weißem Text auf weißem Hintergrund. Jetzt mit .input zusammengefasst.
2. Essensplan: DATE_RE fehlte im Import (ReferenceError), db.transaction()
   wurde doppelt aufgerufen (3 Stellen).
3. Dashboard: Router-Guard verhinderte Re-Render bei Rücknavigation,
   Widgets zeigten veraltete Daten.
4. Einkaufsliste: Mengenfeld hatte abweichende Hintergrundfarbe und
   überdimensionierte min-height.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-26 23:13:15 +01:00
ulsklyc 73cd322a71 a11y: Skip-Link für Keyboard-Navigation (Redesign Phase D)
- Skip-Link "Zum Inhalt springen" als erstes Element im App-Shell
- .sr-only:focus-visible CSS: sichtbar bei Tab-Focus, fixed top-left

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-26 13:37:07 +01:00
ulsklyc a2adb2b94c feat: Mobile Bottom-Navigation mit Swipe und Dot-Indikator
- Alle 9 Menüpunkte jetzt auf Mobile erreichbar (2 Seiten)
- Horizontaler Scroll-Snap für seitenweises Swipen
- Dezente Dot-Indikatoren zeigen aktive Seite an
- Automatischer Scroll zur richtigen Seite bei Navigation zu Seite-2-Items
- Service Worker Cache v12

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-26 07:02:17 +01:00
ulsklyc 76165da592 design: Frontend-Redesign v2 — Design-System, kompaktere UI, Mikrointeraktionen
Umfassendes Redesign des gesamten Frontends in 9 Schritten:

1. Design-Tokens: Neutral-Farbskala (50–950), Modul-Akzentfarben,
   --text-2xs Token, Easing-Kurven, Z-Index-System, Dark-Mode-Overrides
2. Reset: Reduced-motion Query (prefers-reduced-motion)
3. Sidebar/Navigation: Flaches Design, Glassmorphismus Bottom-Nav,
   Akzentstreifen-Indikator, collapsed/expanded States
4. Layout-Grid: Master-Detail, Content-Aside, Sticky-Header-Primitives
5. Cards/Container: Einheitliches Card-Pattern, Modal-System (Bottom-Sheet
   mobil, zentriert Desktop), Skeleton-Loading, Empty-States
6. Dashboard: Kompaktere Widgets, Token-basierte Farben/Schatten,
   4-Spalten-Grid ab 1440px
7. Module: Mobile-first Kanban/Day-Slots/Budget-Summary, border-subtle
   für sekundäre Trennlinien, responsive Quick-Add, Token-Migration
   aller hardcoded px/rgba-Werte
8. Mikrointeraktionen: Page-out Fade, Checkbox-Pop-Animation,
   Hover-States für Filter/Tabs/Toggles, Toast-Ausblendung,
   done-State Opacity-Transition
9. Feinschliff: Print-Styles, --text-2xs Token für Micro-Labels,
   Konsistenz-Audit (alle 9/10/11px → Token)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 20:46:45 +01:00
ulsklyc 55a0371505 design: Desktop-UI modernisieren (Sidebar, Typografie, Shadows, Buttons)
- Sidebar: Logo mit Gradient, kompaktere Nav-Items (40px statt 44px),
  kleinere Icons (18px), 2px Gap, bessere Hover/Active-Zustände
- tokens.css: feinere Schatten, Inter im Font-Stack, Sidebar-Breite 256px
- layout.css: Desktop-Content mehr Luft (40px padding), Headings mit
  letter-spacing, Primary-Buttons mit subtiler Elevation
- router.js: Logo-Span für CSS-Gradient-Clip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-25 13:12:29 +01:00
ulsklyc 7244fc95f1 fix: Session-Store, DOM-Timing und API-Pfad-Fehler beheben
- connect-sqlite3 durch eigenen BetterSQLiteStore ersetzt (sessions-Tabelle
  in der bestehenden DB, keine native Kompilierung nötig)
- db.init() vor require('./auth') gezogen damit BetterSQLiteStore-Konstruktor
  db.get() erfolgreich aufrufen kann
- router.js: App-Shell und pageWrapper vor module.render() in DOM einfügen
  damit document.getElementById() in Seiten-Modulen funktioniert
- Seiten-Module (meals, notes, contacts, calendar, budget): _container-Referenz
  eingeführt, alle document.getElementById() auf _container.querySelector() bzw.
  document.querySelector() für body-Elemente umgestellt
- login.js: User-Objekt nach erfolgreichem Login an navigate() übergeben
  damit auth.me()-Roundtrip entfällt
- calendar.js: /users → /auth/users korrigiert (404-Fix)
- SW-Cache v8 (erzwingt Reload aller gecachten Seiten-Module)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-25 11:49:10 +01:00
ulsklyc ac6a4cd0ea fix: navigateTo undefined + CSRF-Cookie Secure-Flag
- router.js: navigateTo() existierte nicht → ReferenceError nach fehlgeschlagenem
  auth.me(). Ersetzt durch navigate() + currentPath-Reset damit die Weiterleitung
  nicht durch den currentPath-Guard geblockt wird.
- csrf.js: SESSION_SECURE=false wurde nicht berücksichtigt → CSRF-Cookie war über
  HTTP nicht für JS lesbar → alle schreibenden API-Calls nach Login scheiterten mit 403.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-25 09:22:00 +01:00
ulsklyc 81d4000ee1 perf: Schritt 32 — Lazy Loading & Caching-Strategie
Cache-Control (server/index.js):
- Bilder/Fonts: public, max-age=2592000, immutable (30 Tage)
- HTML/JS/CSS/JSON: no-cache, must-revalidate (ETag-Revalidierung)
  → Deployment-Updates greifen sofort, unveränderte Dateien = 304 ohne Transfer
- API: no-store (kein Browser-Caching von Nutzerdaten)

Service Worker (public/sw.js → v3):
- Drei getrennte Caches: shell-v3, pages-v3, assets-v3
- App-Shell + alle Seiten-Module beim Install vorab gecacht
- Stale-While-Revalidate für App-Shell + Seiten-JS:
  sofortiger Render aus Cache, Hintergrund-Update ohne Blockierung
- Cache-First für Bilder/Fonts (seltene Änderungen)
- postMessage({ type: 'SW_UPDATED' }) bei Aktivierung neuer Version

Modul-Cache + Update-Toast (public/router.js):
- moduleCache Map: dynamische imports werden einmalig gespeichert,
  wiederholte Navigation braucht keinen Import-Lookup mehr
- SW_UPDATED-Handler: leert moduleCache + zeigt Update-Toast (8s)

Preconnect + Preload (public/index.html):
- <link rel="preconnect" href="https://unpkg.com">
- <link rel="dns-prefetch" href="https://openweathermap.org">
- <link rel="preload" href="/api.js" as="script">
- <link rel="preload" href="/router.js" as="script">

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 22:06:17 +01:00
ulsklyc dd8ad80eb4 feat: Phase 5 — Härtung (CSRF, Rate-Limit, Validation, Error Boundary, README)
Schritt 28 — CSRF-Schutz (Double Submit Cookie Pattern):
- server/middleware/csrf.js: generiert 32-Byte-Token, speichert in Session + Cookie;
  validiert X-CSRF-Token-Header auf POST/PUT/PATCH/DELETE via timingSafeEqual
- server/auth.js: CSRF-Token beim Login erzeugen und als Cookie setzen
- public/api.js: getCsrfToken() liest Cookie; apiFetch() sendet Header auf
  state-ändernden Requests automatisch

Schritt 29 — Globaler Rate-Limiter:
- server/index.js: apiLimiter (300 req/min/IP) auf allen /api/-Routen;
  ergänzt den bestehenden loginLimiter (5 req/min)

Schritt 27 — Zentralisierte Eingabe-Validierung:
- server/middleware/validate.js: str(), oneOf(), date(), time(), num(), color(),
  collectErrors() mit einheitlichen Längengrenzen (MAX_TITLE=200, MAX_TEXT=5000)
- server/routes/tasks.js: validateTaskInput() nutzt nun validate.js

Schritt 31 — Frontend Error Boundary:
- public/router.js: window.onerror + unhandledrejection-Handler zeigen Toast

Schritt 33 — README.md:
- Setup-Anleitung (Docker + Node.js), Nginx-Config, User-Verwaltung,
  Umgebungsvariablen-Referenz, Backup, Sicherheitsübersicht

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 22:00:47 +01:00
ulsklyc d49cbe33b3 feat: Phase 1 — Projektstruktur, DB-Schema, Auth-System
- Vollständige Verzeichnisstruktur gemäß CLAUDE.md
- Express-Server mit Helmet, Sessions, Rate Limiting, SPA-Fallback
- SQLite-Schema (Migration v1): 10 Tabellen, updated_at-Triggers, Indizes
- Versioniertes Migrations-System (schema_migrations)
- Auth-Routen: Login, Logout, /me, Admin-User-CRUD
- Frontend App-Shell: SPA-Router, API-Client, Design-System (CSS Tokens)
- PWA: Service Worker, Web App Manifest
- Setup-Script für ersten Admin-User (node setup.js)
- DB-Tests mit node:sqlite built-in: 29/29 bestanden
- Docker Compose + Dockerfile + Nginx-Beispielkonfiguration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 14:32:36 +01:00