Files
kolaytercih/src/features/kullanici/components/user-nav.tsx
bilalgursen 78ad84922a
All checks were successful
Deploy / deploy (push) Successful in 6m23s
feat(tema): açık / koyu / sistem teması
- TemaSaglayici (next-themes) + alt bilgide TemaSecici
- globals.css: .dark bloğunda palet token'ları çevrilir; bileşenlere
  dark: sınıfı yazılmaz
- yüzeyler bg-white → bg-card, koyu haplar text-slate-50, SVG'lerde
  sabit renk yerine değişken
- DESIGN.md §2.3 + tasarim-denetim kuralları (yuzey-beyaz,
  koyu-hap-beyaz-yazi, dark-sinif), AGENTS.md karanlık mod bölümü
- docs: koyu tema denetimi raporu

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-10-05 10:20:02 +03:00

82 lines
3.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import Link from "next/link";
import { ClipboardList, Coins } from "lucide-react";
import { getCurrentUser } from "@/lib/session";
import { ListemButonu } from "@/features/liste/components/listem-butonu";
import { ListeSenkron } from "@/features/liste/components/liste-senkron";
import { RybbitIdentify } from "@/components/rybbit-identify";
import { GirisLinki } from "./giris-linki";
import { SignOutButton } from "./sign-out-button";
/**
* Suspense fallback'i: girişsiz görünümle aynı yükseklik/genişlikte sessiz
* bir pill — session sorgusu akarken header zıplamasın (CLS yok).
*/
export function UserNavFallback() {
return (
<div
className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2"
aria-hidden
>
<div className="h-9 w-16 rounded-full bg-slate-900/10 sm:h-12 sm:w-28" />
</div>
);
}
export async function UserNav() {
const u = await getCurrentUser();
// Manuel liste localStorage'ta yaşadığı için Listem girişsiz de çalışır
if (!u) {
return (
<div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
<RybbitIdentify kullaniciId={null} />
<ListeSenkron userId={null} />
<ListemButonu />
<GirisLinki />
</div>
);
}
return (
<div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
<RybbitIdentify kullaniciId={u.id} />
<ListeSenkron userId={u.id} />
<ListemButonu />
{/* Yapay Zeka raporunun kalıcı kapısı: girişli kullanıcı /listem'i
navbar'dan bulamıyordu (çekmece butonu manuel liste boşken hiç
görünmüyor). Rapor var mı diye DB'ye sorulmuyor — navbar'ın TTFB'si
bozulmasın; liste boşsa sayfadaki ListemBosCta karşılıyor.
Sınıf seti kredi pill'iyle birebir aynı (tek kaynak). */}
<Link
href="/listem"
aria-label="Yapay Zeka Listem"
title="Yapay Zeka'nın kurduğu 24 tercihlik listen"
className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-card px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
>
<ClipboardList className="size-3.5 text-primary sm:size-4" aria-hidden />
{/* Etiket her genişlikte gizli; anlamı yukarıdaki aria-label + title
taşıyor. Konteyner `max-w-6xl` = 1152 px'te kilitli olduğu için
`xl` (1280 px) yeni yer AÇMIYOR, ama eski görünürlük deseni tam
orada iki etiketi birden geri getiriyordu (+229 px) ve ortadaki
`absolute` nav ile çakışma üretiyordu. Sağ kümenin bütçesi ~304 px
= dört ikon-pill; bir etiket bile fazla. ListemButonu:38 ile aynı
desen (tek kaynak). */}
<span className="hidden">Yapay Zeka Listem</span>
</Link>
<Link
href="/paket?kaynak=nav"
className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-card px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
title="Kredilerin — yüklemek için tıkla"
>
<Coins className="size-3.5 text-amber-500 sm:size-4" aria-hidden />
<span className="tabular-nums">{u.creditBalance}</span>
{/* Etiket yalnızca md–lg arası: daha darda logo kesiliyor, lg üstünde
ortadaki nav ile yer dar (konteyner 1152'de sabit). İkon+sayı ve
title her genişlikte anlamı taşıyor. */}
<span className="hidden md:inline lg:hidden">kredi</span>
</Link>
<SignOutButton />
</div>
);
}