Claude/panel creation perf fz08wa#10
Open
uncleeai wants to merge 123 commits into
Open
Conversation
Add Vercel Cron keepalive and analytics integration
Przycisk udostępniania korzysta z navigator.share (systemowy Share Sheet: iMessage/WhatsApp…) na telefonie, z fallbackiem do schowka na desktopie. Wykrywanie wsparcia po stronie klienta, by uniknąć rozjazdu z SSR. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Chipy „Dziś/Jutro/Piątek/Sobota 19:00" wstawiają termin jednym tapem — mniej dłubania w pickerze daty na telefonie. Wspólny helper slotPresets.ts użyty w formularzu tworzenia (wypełnia wiersze) i przy dodawaniu terminu na stronie wypadu (wstawia od razu). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
UX wypadów: szybsze głosowanie i planowanie (iOS) + setup Supabase MCP
Szybkie naprzemienne klikanie powodowało „mruganie" własnego wyboru: każde zdarzenie realtime przeładowywało całość z bazy, a odpowiedzi wracały w złej kolejności względem niezatwierdzonych zapisów. Trzymamy ostatni zamierzony głos w refie i nakładamy go na każde przeładowanie, aż baza go potwierdzi. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
- Ikony PNG (180/192/512) z SVG przez sharp; apple-touch-icon na PNG, bo iOS słabo renderuje SVG na ekranie głównym. Dodane do manifestu. - color-scheme: dark — natywny picker daty i kontrolki w ciemnym motywie. - statusBarStyle: black-translucent — pasek statusu pasuje do ciemnej apki. - Większe cele dotykowe: ✕ usuwania i chipy presetów (~40px). - Brak szarego tap-highlight, stabilny -webkit-text-size-adjust. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Przeprojektowanie warstwy wizualnej w stronę czystego, minimalnego dark mode (Apple-like): spokojniejsza, neutralniejsza paleta, hairline'owe obramowania, więcej powietrza, subtelne cienie i pille, segmentowana kontrolka głosowania (Mogę/Może/Nie), kolory systemowe iOS dla yes/maybe/no, focus-ring na inputach. Wszystkie klasy i zmienne CSS zachowane — markup bez zmian. Theme/splash kolory zsynchronizowane z nową paletą. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Pełna przebudowa układu (nie tylko kolory): - Dashboard: large title + powitanie, sekcje jako szare nagłówki, wypady jako zgrupowana lista (jedna wyspa z separatorami) z chevronami, prominentny „+ Nowy wypad", zdegradowany „Wyloguj", przyjazny stan pusty. - Strona wypadu: back-link, przeprojektowany nagłówek (tytuł/miejsce/organizator), „Czekamy na…" jako pille, subtelniejsze „Usuń wypad". - globals.css: nowe prymitywy iOS (list-group/list-row, section-label, large-title, empty-state, pill-wait/done, back-link); usunięte event-card/list-item. Czysto prezentacyjne — logika i baza bez zmian. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Wybór awatara przy pierwszym logowaniu (emoji), zapisany w user_metadata i profiles (nowa kolumna avatar). Dashboard wzbogacony zgodnie z kierunkiem hybrydowym: nagłówek z ikoną appki i awatarem usera, gradientowy CTA, karty wypadów z awatarami głosujących, ikonami daty/godziny/miejsca i paskiem „% zagłosowało"; baner z poradą. Strona wypadu: awatary uczestników i ikonki. Bez okładek/statystyk/dwóch kolumn — lekkie, jednokolumnowe, mobile-first. Nowe: src/lib/avatars.ts, src/components/icons.tsx, src/components/Avatar.tsx. Zmiana schematu: profiles.avatar (uruchom schema.sql ponownie). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
- Wgrywanie zdjęcia profilowego z galerii (iOS): Supabase Storage (bucket
avatars + RLS), klientowy resize do 512px, avatar trzyma URL albo emoji.
- Avatar renderuje zdjęcie gdy URL, inaczej emoji/inicjały.
- ProfileMenu: klik w avatar w rogu → Zmień zdjęcie / Wybierz emoji / Wyloguj.
- SetupForm (1. logowanie): emoji albo wgranie zdjęcia, z podglądem.
- Dashboard: usunięty tytuł „Planner" i opis oraz osobny Wyloguj; góra to
tylko „Cześć, {imię}" + avatar.
Wymaga ponownego uruchomienia schema.sql (bucket avatars + polityki Storage).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Klik w avatar w rogu otwiera wyśrodkowany modal na rozmytym (blur) przyciemnionym tle: duży avatar z badge'em aparatu (zmiana zdjęcia), rząd emoji, edycja nicku z zapisem i wyloguj. Zmiany avatara/nicku aktualizują się na żywo; modal zamyka ✕ lub klik w tło. Zastępuje dotychczasową rozwijaną listę. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Próbka kierunku Apple „Liquid Glass" na samym dashboardzie: nasycone, statyczne tło (GlassBackground) prześwitujące przez matowe szkło kart, CTA i banera (backdrop-blur + saturate + hairline + wewnętrzny odblask). Style scope'owane pod .glass-page, więc strona wypadu i modale pozostają płaskie. Bez zmian logiki/bazy. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Trzecia warstwa głębi „mokrego szkła": połyskliwa linia (gradient, jaśniejsza w środku) na górnej krawędzi szklanych powierzchni przez ::before; mocniejszy drop shadow (0 20px 60px /0.5), by karty wyraźniej lewitowały. Czysto CSS, scope pod .glass-page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Nowe adresy przy pierwszym logowaniu wyzwalają szablon „Confirm signup",
który domyślnie pokazuje link — stąd nowi użytkownicy dostawali link zamiast
kodu, a istniejący (szablon Magic Link) kod. Dokumentuj dodanie {{ .Token }}
do obu szablonów (lub wyłączenie Confirm email).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Dwie wyraźne kule zastąpione rozlaną, wielopunktową aurorą (kilka dużych, miękkich plam koloru wtopionych w ciemną bazę) + subtelne ziarno (SVG noise, soft-light) dla premium feel i braku bandingu. Bez wyraźnych „bańek". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Cztery symetryczne radialne w rogach czytały się jak osobne poświaty. Środki gradientów przeniesione poza kadr + ogromne rozmiary i ukośna baza → kolor wpływa z brzegów i zlewa się w pasma, bez widocznych kół. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Zamiast statycznego washu — pionowe, miękkie kurtyny zorzy (zieleń/turkus + fiolet) z maską po bokach i blendem screen, bardzo wolno falujące (skew/scale, 28-40s). Bez kosztownego blura per-klatka; szanuje prefers-reduced-motion. Nocna baza + poświata nad horyzontem. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Wyraźniejszy ruch (większa amplituda translateX/skew, 17-25s), przygaszone kolory (niższe alfy + opacity grupy 0.8), i jaśniejsza część gradientu przesunięta na środek + wyższa grupa → zorza wypełnia ekran, nie tylko górę. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Przycisk „Szybkie logowanie (dev)" na ekranie logowania pojawia się tylko gdy ustawione są NEXT_PUBLIC_DEV_EMAIL/PASSWORD; loguje hasłem do testowego konta (signInWithPassword), omijając kod e-mail. Brak sekretów w repo — gate przez zmienne ustawiane wyłącznie w Preview. Udokumentowane w .env.example. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Zamiast logowania hasłem ze zmiennych — przycisk „Wejdź bez logowania (gość)" przez supabase.auth.signInAnonymously z domyślnym nickiem+avatarem (omija ekran profilu). Pokazywany tylko na preview/localhost (hostname z „-git-"), więc na produkcji niewidoczny i bez żadnej konfiguracji. Cofnięto zmienne NEXT_PUBLIC_DEV_* z .env.example. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Poprzedni warunek (-git-) nie łapał URL-i per-deploy Vercela, więc guzik gościa się nie pokazywał. Pokazujemy go na każdym *.vercel.app i localhost; ukryty tylko na własnej domenie produkcyjnej. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Karty listy (.event-rich) — najliczniejsze i scrollowane — zamienione na „smoked glass" bez backdrop-filter, więc nie ma rozmycia liczonego co klatkę przy scrollu. Prawdziwy blur zostaje tylko na nielicznych elementach (CTA, formularz, baner) i zmniejszony do 12px/150%. Wygląd zachowany, scroll lekki. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Statyczna głębia bez kosztu przy scrollu: fazowana krawędź (inset jasny górno-lewy + ciemny dolno-prawy), refleksy światła w narożnikach i lekka barwna refrakcja przy dolnej krawędzi kart. Dotyczy kart listy oraz pozostałych szklanych powierzchni i CTA. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Przywrócono backdrop-filter (frosted) na kartach listy — z zachowaniem fazowanej krawędzi i glintów. W zamian zorza wyciszona (niższe alfy + opacity 0.55) i zepchnięta na boki (pasma przy lewej i prawej krawędzi, środek spokojniejszy). Rozmycie dodatkowo zmiękcza zorzę za kartami. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Refrakcja: chromatyczne rozszczepienie na krawędziach (chłodny błękit vs fiolet) przez kolorowe inset-cienie + cienki, tęczowo przesunięty rant (gradientowy border przez mask-composite). Aurora odrobinę mocniejsza (opacity 0.55 → 0.63). Wszystko statyczne — bez kosztu przy scrollu. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Mniej „AI": neonowy zielony/cyan zastąpione stonowaną, analogiczną gamą (przygaszony błękit → indygo → fiolet → kurzowy róż), też w poświacie bazy. Karty mieszają się z aurorą: niższe własne przyciemnienie (0.28 → 0.20) i wyższa saturacja rozmycia (do 195%) → glass tintuje się kolorem zorzy za sobą. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ErbidN4HCXywidwUdDcbf
Liquid Glass UI, awatary ze zdjęciem, modal profilu, guest login
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MF3pEjMiVuE3XnzgNeXfR2
position: fixed + inset: 0 can fail to track the growing visual viewport when Safari's address bar auto-hides on scroll, leaving the background short of the bottom edge. Size it explicitly with 100dvw/100dvh (falling back to 100vw/100vh), matching the dvh pattern already used for .auth-screen.
Animating grid-template-rows is a layout property — the browser was reflowing the whole form every frame for 0.28s while closing, causing the dropped-frame/jump you saw. Content now fades out first via transform+opacity (compositor-only, same as the open path already does), then grid-template-rows/margins/backdrop-filter snap instantly once it's already invisible — one reflow in one frame instead of smeared across ~8.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Real design fixes from screenshot review, not the full redesign pass: - "+ Nowy wypad" and "Ustal ten termin" now use the app's existing accent blue (already present on the "AKTYWNY" badge) instead of the same flat gray as every other card, so the primary action actually stands out. - Progress bar track opacity bumped slightly so it's visible even at 0%. - "Cweluchy" (who hasn't voted) now renders as avatar chips via the existing AvatarStack component instead of a plain comma-joined name list. The segmented voting control (Wchodzę/Może/Pas) was already color-coded on selection in the existing CSS — the screenshot just showed a slot with zero votes, so nothing was selected. No change needed there.
The solid rgba(10,132,255,0.9) background was too loud next to the rest of the muted UI. Dropped to a translucent tint (0.2-0.22 alpha) with a visible border instead — still reads as the accent color, no longer shouts.
The previous glass-bg sizing fix wasn't the actual cause of the persistent black bottom bar (confirmed via a real device screenshot on a short dashboard). html/body had no min-height, so on pages shorter than the screen, iOS Safari (with viewport-fit=cover) paints the leftover bottom safe-area with theme-color instead of real page content — a flat #050505 strip with no aurora glow, since it's outside the actual document. min-height: 100dvh on body ensures the document always fills the screen, so there's nothing left for iOS to paint in.
The app never disables double-tap-to-zoom (no maximum-scale/user-scalable in the viewport meta), so iOS Safari holds every tap on buttons and links for a short window to see if a second tap follows (zoom gesture). The :active press animation fires immediately on touchstart regardless, which is why the button visibly "presses" even when the click itself gets delayed or dropped — especially on quick or light taps, and worse with repeated taps. touch-action: manipulation removes that disambiguation on interactive elements specifically, without touching pinch-zoom elsewhere.
maximumScale: 1 matches initialScale, which disables browser zoom gestures. This app is chrome (fixed layout, gated behind login), not content to scale — zoom only added tap-disambiguation latency on top of the touch-action fix. Trade-off: removes pinch-to-zoom as a text-scaling aid for low-vision users, accepted as intentional for this app-like use case.
overscroll-behavior-y: none stops the browser's pull-down-to-refresh gesture chain. Supabase Realtime already pushes updates live, so a manual page reload from an accidental upward swipe is never needed and only risked interrupting the session.
Purely cosmetic — the visible scrollbar broke the native-app feel. Scrolling still works identically, just no visual indicator. scrollbar-gutter: stable was only there to reserve space for a scrollbar that will no longer render, so it's gone too.
Two CSS-only attempts (position:fixed inset:0, then explicit width/height:100dvh) didn't hold up on a real device — the bar came back intermittently, self-resolving only on a fresh app relaunch. That's the signature of dvh being unreliably recalculated at standalone PWA launch on iOS, not a wrong formula. GlassBackground now measures window.innerHeight on mount and on resize/visualViewport resize, publishing it as --app-vh on documentElement. .glass-bg and html/body now prefer that measured value over dvh, falling back to dvh only before the effect has run (first paint, pre-hydration).
…zing Confirmed by the user: this never happened while the aurora was animated. Moving blobs swept across the whole screen over time, including the bottom, masking the fact that their resting positions never actually reached it. Freezing the animation earlier (for performance) froze them exactly where that gap was, exposing a real, permanent uncovered strip — not a viewport-height calculation issue. The last three commits (glass-bg sizing, body min-height, JS-measured --app-vh) weren't wrong to have, just weren't the actual fix. b6 is now centered exactly on the bottom edge (top: 100%) and widened to 90vw, so its full-intensity core — not just the fading tail of the gradient — sits right at the bottom, guaranteed regardless of device screen height.
Confirmed by a second screenshot: the bar was still there on cold start, but vanished as soon as any resize-triggering interaction happened (e.g. focusing the "Nowy wypad" title input brings up the keyboard). That means the fix from the last commit was directionally right, but the very first measurement right after mount can still be stale on a cold PWA launch, before iOS finishes settling the safe-area layout — and nothing was forcing a re-measure without user interaction. Now schedules re-measures at 50/200/500/1000ms after mount, plus listens to pageshow/visibilitychange, so it self-corrects without requiring the user to touch anything first.
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
2 participants
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.
No description provided.