fix(sonuc): harita en üste çıkar, liste sayısı çerezi kaymayı sıfırlar

Manuel listenin haritası /sonuc'ta tablonun altından sayfanın en üstüne
alındı: listesini kurmuş ziyaretçi ekranda önce kendi listesini görür.
Liste boşken harita DOM'a hiç girmez — yer tutucu da çizilmez, tadımlık
main'in ilk çocuğu kalır ve first:mt-0 çalışmayı sürdürür. Yani ürünü ilk
kez gören ziyaretçide sayfa sırası hiç değişmiyor.

Çerez neden gerekti: manuel liste localStorage'ta yaşıyor, store'un sunucu
snapshot'ı her zaman boş liste dönüyor. Harita yukarıdayken kayıtlı liste
ancak hidrasyondan sonra okunabildiği için harita sonradan belirip sayfayı
itiyordu (mobilde ~146 px, masaüstünde ~368 px; CLS ~0,13 / ~0,35). Client
artık listenin yalnızca UZUNLUĞUNU kolaytercih.liste-sayi çerezine aynalıyor
(kişisel veri ya da program kimliği yok, öznitelikleri kolaytercih.profil ile
birebir aynı); sunucu bunu okuyup haritaya ilk boyada tam ölçülü yer ayırıyor,
chunk inince kutunun yalnızca içi doluyor. Çerez hidrasyona kadar geçerli:
store okunduktan sonra tek doğru kaynak listenin kendisi, böylece bayat çerez
ya da çekmeceden boşaltılan liste durumunda boş harita ekranda kalmıyor.

Yanında: harita iskeletine motion-reduce:animate-none (artık katlamanın
üstünde, durdurulamaz nabız gösterilmemeli), yurt dışı şeridine sabit
yükseklikli loading yer tutucu (ssr:false + loading'siz dynamic, yoktan
beliren ~104 px). Kararın tersini belgeleyen üç yorum bloğu da güncellendi.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-23 10:58:53 +03:00
parent c5769e2fbb
commit ea4b30a842
7 changed files with 117 additions and 33 deletions

View File

@@ -11,6 +11,7 @@ import {
SonucProgramTablosuSkeleton,
} from "@/features/liste/components/sonuc-program-tablosu";
import { ManuelHarita } from "@/features/liste/components/manuel-harita";
import { LISTE_SAYI_CEREZ_ADI } from "@/features/liste/liste-dogrula";
import { TadimlikBolumu } from "@/features/rapor/components/tadimlik-bolumu";
import { SonucSihirbazi } from "@/features/sihirbaz/components/sihirbaz-bolumu";
import { SiraGerekli } from "@/features/sihirbaz/components/sira-gerekli";
@@ -85,6 +86,17 @@ export default function SonucPage({
const uniturGrubu =
tipHam === "devlet" || tipHam === "vakif" ? tipHam : undefined;
// Manuel liste localStorage'ta yaşar; store'un sunucu snapshot'ı her
// zaman boştur. Client, listenin yalnızca UZUNLUĞUNU çereze aynalar
// (liste-store.ts) — sunucunun "bu ziyaretçinin listesi var" bilgisini
// hidrasyondan ÖNCE alabildiği tek kanal bu. Sayı > 0 ise haritaya tam
// ölçülü yer ayrılır; çerez yoksa/0 ise harita hiç render edilmez.
const listeSayisi = Number.parseInt(
cerezler.get(LISTE_SAYI_CEREZ_ADI)?.value ?? "",
10,
);
const haritayaYerAyir = Number.isFinite(listeSayisi) && listeSayisi > 0;
if (!Number.isFinite(sira) || sira < 1 || sira > 4_000_000) {
return (
<>
@@ -97,21 +109,26 @@ export default function SonucPage({
return (
<div className="min-h-screen bg-slate-50 text-slate-900">
<main className="mx-auto max-w-4xl px-4 py-12">
{/* Sayfa hiyerarşisi: tadımlık → ham tablo → manuel listenin
haritası. Tadımlık, ödeme öncesi gösterebildiğimiz TEK gerçek
önizleme olduğu için ilk ekranda durur.
{/* Sayfa hiyerarşisi: manuel listenin haritası → tadımlık → ham
tablo. İki farklı ziyaretçi, iki farklı ilk ekran:
Harita neden TABLONUN ALTINDA: liste store'unun sunucu
snapshot'ı her zaman boş liste döner (liste-store.ts), kayıtlı
liste ancak hidrasyondan sonra okunur. Harita yukarıda olsaydı
dönüş ziyaretçisinde sayfa açıldıktan saniyeler sonra ~368 px
yüksekliğinde belirip tadımlığı ve tabloyu aşağı itecekti
(impact fraction ~1, CLS eşiğinin çok üstü). Aşağıda belirince
yalnızca sihirbaz ile dipnotu iter, ikisi de katlanın altında.
Bilgi mimarisi olarak da doğru sıra: harita, tablodan kurulan
listenin görselleştirmesidir. Liste boşken hiç render edilmez
(bkz. manuel-harita.tsx); store'a abone olduğu için tablodan
"+" ile eklenenler buraya canlı yansır. */}
• Listesi OLAN ziyaretçi ekranda önce kendi kurduğu listeyi
görür — o kişi "bu ürün ne?" aşamasını geçmiştir.
• Listesi OLMAYAN ziyaretçide harita DOM'a hiç girmez
(manuel-harita.tsx), sıra bugünküyle birebir aynı kalır:
tadımlık → tablo. Tadımlık, ödeme öncesi gösterebildiğimiz
TEK gerçek önizleme olduğu için o kişide ilk ekranda durur
ve `first:mt-0` ile main'in py-12'sini kullanmayı sürdürür.
Harita YUKARIDA nasıl CLS üretmiyor: kayıtlı liste ancak
hidrasyondan sonra localStorage'tan okunabildiği için harita
yukarıdayken sonradan belirip sayfayı iterdi (mobilde ~146 px,
masaüstünde ~368 px). Çözüm, listenin SAYISINI çerezle
sunucuya aynalamak (haritayaYerAyir, yukarısı): sunucu ilk
boyada haritanın tam ölçülü kutusunu çizer, chunk inince
kutunun yalnızca İÇİ dolar. Haritanın yerini bir daha
aşağı almadan önce bu mekanizmayı kontrol et. */}
<ManuelHarita yerAyir={haritayaYerAyir} />
{/* Girişsiz tadımlık: gerçek rapor satırı formatında tek örnek.
Havuzda içerik yoksa bileşen hiç render edilmez. */}
@@ -128,8 +145,6 @@ export default function SonucPage({
uniturGrubu={uniturGrubu}
/>
<ManuelHarita />
{/* Sihirbaz akışı (CTA + modal) — üretim ve liste /listem'de
yaşar, burada yalnızca funnel kartları render edilir */}
<SonucSihirbazi