Mobile-PWA + Beta-Stack: 8 Commits aus development - #1
Merged
Conversation
MobileApp komplett neu nach claude.ai/design-Bundle aufgebaut. Aktiviert wenn Viewport < 768px (oder ?mobile=1 Override). Screens: 1. Heute — Greeting, Live-Hero, Ueberfaellig, Heute-Liste 2. Neue Aufgabe — FAB-Sheet mit Titel/Desc/Projekt/Faellig/Aufwand/Prio 3. Aufgaben-Detail — Bottom-Sheet mit Meta/Subtasks/Checklist 4. Fokus-Timer — Pomodoro-Ring, Block-Dots, Stop/Toggle 5. Foto/KI — Text-Extraktion via /api/ai/extract + Pick-Liste 6. Wochenboard — Spalten-Tabs + Touch-Swipe + Fortschrittsbalken 7. Profil — Stats, Push-Toggle, Pomodoro/Tagesziel-Links, Logout 8. Lockscreen-Preview — Push-Notification-Mockup iOS-Chrome: StatusBar (Uhr/Signal/WLAN/Akku), HomeBar. Bottom-Tab-Bar: Heute / Board / [+FAB] / KI / Profil. Dark-Mode komplett, Glass-Themes inkludiert. CSS aus prototype/btm.css portiert (1133 Zeilen) als styles/mobile-shell.css. Sheet-Layer-Overlay fuer Modals. ?mobile=1 Override im useIsMobile-Hook (sessionStorage). i18n: ~70 neue mobile.*-Keys in de.ts + en.ts. Deploy: btm-beta.bethesna.org (DB-Migrationen 0023+0024 auf btm_beta angewendet).
5 Feedbacks aus Beta-Test: 1. Fake StatusBar (Uhr/Akku) + HomeBar entfernt — MobileChrome no-op, Safe-Area-Padding regelt das in CSS via env(safe-area-inset-*) 2. Skalierung auf iOS-Standard hochgezogen — Touch-Targets min 44pt, Body 15-16px, Bottom-Tab-Icons 24px statt 18px, FAB 56x56 3. Bottom-Bar + Sheet-Footer haben jetzt max(env(safe-area-inset-bottom), 12px) damit sie nicht mit iPhone-Home-Indicator kollidieren 4. Slide-In-Animation fuer Sheets (cubic-bezier 320ms) + Backdrop-Fade 5. iOS-Zoom-on-Focus verhindert: Inputs auf font-size: 16px gezwungen, viewport-meta auf maximum-scale=1, user-scalable=no, viewport-fit=cover
4 konkrete Issues aus Beta-Test gefixt:
1. Scrolling auf Heute-Seite tot:
- .mob-scroll: overflow:hidden -> overflow-y:auto
- min-height: 0 auf .mob-screen + .mob-scroll fuer flex shrink
- -webkit-overflow-scrolling: touch fuer iOS-Momentum
- overscroll-behavior: contain (kein Page-Bounce)
2. Buttons abgeschnitten in Sheets:
- Inline overflowY:auto + maxHeight aus MobScreenDetail entfernt
- Neue Drei-Zonen-Struktur: head (fix) / scroll (flex) / foot (fix)
- Footer-Buttons immer sichtbar mit safe-area-bottom Padding
3. Sheet-Backdrop deckend weiss:
- Alte .mob-sheet-layer + .mob-screen-sheet entfernt
- Neue MobBottomSheet-Komponente: semi-transparenter Backdrop
(rgba + blur 8px saturate 140%) + separate weisse Card mit Detents
- Backdrop-Click schliesst, Heute-Liste blurred sichtbar
4. PowerPoint-Feeling -> App-Feeling:
- Apple-Style Detents: medium (52vh) <-> large (88vh) mit Drag
- Swipe-Down ueber 120px ODER Flick (velocity > 0.6 px/ms) schliesst
- Spring-Snap mit iOS-Easing cubic-bezier(0.32, 0.72, 0, 1)
- Velocity-Tracking via 6-Sample-Buffer (~100ms)
- Tab-Wechsel: 240ms Fade+Slide-In ueber key-change-Remount
- Touch-Feedback (:active scale 0.88-0.97) auf allen Buttons,
Cards, Chips, Tabs - mit -webkit-tap-highlight-color: transparent
- Timer/Lockscreen jetzt als .mob-fullscreen-overlay (kein
Sheet-Backdrop noetig, slidet rein)
Neue Komponente: src/components/mobile/MobBottomSheet.tsx
Restruktur: MobScreenDetail, MobScreenCreate, MobScreenTimer,
MobScreenLock, MobileApp - StatusBar/HomeBar/sheet-backdrop-Mockups raus
Status-Wechsel-Buttons im Detail-Footer je nach Spalte + Rolle: - col=todo/planned/doing + assignee=me: "Zur Review" + "Timer starten" - col=review + Projektleiter (proj.ownerId): "Zurück" + "Erledigt" - col=review + nicht Projektleiter: nur "Schließen" - col=done: "Wieder öffnen" UI-Spacing nach iOS-HIG: - Tab-Bar: 49pt height (vorher 56pt) + 6pt min padding-bottom (vorher 12pt) Total nun ~83pt mit safe-area-inset statt 90+pt - Task-Cards margin: 0 (war 16px) + Scroll-Container padding-horizontal: 20px damit Karten gleichbreit mit Header (.mob-h-greeting padding 20px) abschliessen - Section-Heads + Live-Card-Margins entsprechend auf 20px ausgerichtet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Bringt 8 Commits aus
developmentnachmain. Schwerpunkt: komplettes Mobile-PWA-Set mit iOS-Anmutung sowie zwei Backend-Fixes.Was drin ist
Mobile-PWA (komplett neu)
?mobile=1(sessionStorage-Override):activeScale 0.88–0.97) auf Buttons, Cards, Chips, Tabsuser-scalable=no, viewport-fit=coverBackend-Fixes
dev-pinauth: signiertes__Secure--Cookie auf HTTPS (vorher kam getSession() nicht durch)MAIL_DISABLED=trueENV blockiert Versand global (für Staging/Beta)Test plan
npm run buildohne TypeScript-Errorsesref@bemany.de+ 123456)POST /me/digest/send-nowloggt aber sendet nicht)<768pxoder?mobile=1— Desktop-User sehen keine Änderung.envbraucht keinen Eintrag fürMAIL_DISABLED(Defaultfalse)Risiken
dev-pin-Route bleibt durchDEV_PIN_AUTH=truegated, auf Prod nicht aktiv🤖 Generated with Claude Code