Enhance layout and functionality by integrating TercihProfiliKapisiLazy component into layout.tsx, improving user experience with a new section in the RootLayout. Update BolumlerPage and ListemPage for better structure and readability, including adjustments to headings and content organization. Refactor UniversiteIcerik to utilize UniversiteProgramTablosu for displaying program data, and streamline UniversiteKonumHaritasi for improved rendering. Update ManuelListe components for clearer user instructions and enhanced interaction. Overall, these changes aim to improve visual clarity and user engagement across the application.

src/components/program-tablosu.tsx

@@ -9,18 +9,19 @@ import { useState } from "react";
 import Link from "next/link";
 import { useLinkStatus } from "next/link";
 import {
-  Check,
   ChevronDown,
-  Plus,
   Rocket,
   Scale,
   ShieldCheck,
-  TrendingDown,
-  TrendingUp,
 } from "lucide-react";
 import type { DilimKey, Program, PuanTuruKey, RankResults } from "@/lib/db";
 import { riskHesapla, type RiskSeviyesi } from "@/lib/risk";
 import { turkishSlugify } from "@/lib/slug";
+import {
+  ProgramSiraGecmisi,
+  ProgramTabanTrendi,
+  programEtkinSira,
+} from "@/components/program-liste-verileri";
 import {
   Table,
   TableBody,
@@ -30,12 +31,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  MANUEL_LISTE_MAX,
-  ekle,
-  useManuelListe,
-  type ManuelTercih,
-} from "@/components/manuel-liste/store";
+import { ProgramEkleButonu } from "@/components/manuel-liste/program-ekle-butonu";
 
 const DILIMLER: {
   key: DilimKey;
@@ -128,22 +124,6 @@ function PuanTuruSecici({
   );
 }
 
-function efektifSira(p: Program): number | null {
-  return p.sira2025 ?? p.sira2024;
-}
-
-function tercihYap(p: Program, adaySira: number): ManuelTercih {
-  const taban = efektifSira(p);
-  return {
-    id: p.id,
-    isim: p.isim,
-    universite: p.universite,
-    il: p.il,
-    efektifSira: taban,
-    risk: riskHesapla(taban, adaySira),
-  };
-}
-
 const BOS_EKSTRA: Record<DilimKey, Program[]> = {
   hayal: [],
   dengeli: [],
@@ -167,12 +147,9 @@ export function ProgramTablosu({
   adaySira: number;
   tur: PuanTuruKey;
 }) {
-  const liste = useManuelListe();
   const [aktifDilim, setAktifDilim] = useState<DilimKey>(() =>
     varsayilanDilim(sonuclar),
   );
-  const listedekiler = new Set(liste.map((t) => t.id));
-  const doldu = liste.length >= MANUEL_LISTE_MAX;
 
   // "Daha fazla göster" ile sayfalanan devam satırları. Sıra/tür değişince
   // (puan türü seçici aynı bileşeni yeniden render eder, remount etmez)
@@ -190,10 +167,6 @@ export function ProgramTablosu({
     }
   }
 
-  function eklemeyiDene(p: Program) {
-    ekle(tercihYap(p, adaySira));
-  }
-
   async function dahaFazlaYukle(dilim: DilimKey, offset: number) {
     setYuklenen(dilim);
     try {
@@ -300,9 +273,7 @@ export function ProgramTablosu({
                           key={p.id}
                           program={p}
                           adaySira={adaySira}
-                          listede={listedekiler.has(p.id)}
-                          doldu={doldu}
-                          onEkle={eklemeyiDene}
+                          tur={tur}
                         />
                       ))}
                     </TableBody>
@@ -334,86 +305,6 @@ export function ProgramTablosu({
   );
 }
 
-// Tabanın 2021–2025 seyri: küçük sıra = daha rekabetçi olduğundan y ekseni
-// ters çevrilir; çizgi yukarı gidiyorsa bölüm yıllar içinde zorlaşıyor demektir.
-function SiraGecmisi({ p }: { p: Program }) {
-  const yillar = [
-    [2021, p.sira2021],
-    [2022, p.sira2022],
-    [2023, p.sira2023],
-    [2024, p.sira2024],
-    [2025, p.sira2025],
-  ].filter((y): y is [number, number] => y[1] != null);
-  if (yillar.length < 2) return <span className="text-slate-400">—</span>;
-
-  const siralar = yillar.map(([, s]) => s);
-  const min = Math.min(...siralar);
-  const max = Math.max(...siralar);
-  const W = 56;
-  const H = 18;
-  const PAD = 2;
-  const noktalar = yillar.map(([yil, s], i) => {
-    const x = PAD + (i / (yillar.length - 1)) * (W - PAD * 2);
-    // min sıra (en rekabetçi) üstte dursun
-    const y =
-      max === min
-        ? H / 2
-        : PAD + ((s - min) / (max - min)) * (H - PAD * 2);
-    return { x, y, yil, s };
-  });
-  const son = noktalar[noktalar.length - 1];
-  const ozet = yillar
-    .map(([yil, s]) => `${yil}: ~${s.toLocaleString("tr-TR")}.`)
-    .join("\n");
-
-  return (
-    <svg
-      viewBox={`0 0 ${W} ${H}`}
-      className="inline-block h-[18px] w-14 text-slate-300"
-      role="img"
-      aria-label={`Taban sıra geçmişi. ${ozet.replaceAll("\n", " ")}`}
-    >
-      <title>{ozet}</title>
-      <polyline
-        points={noktalar.map((n) => `${n.x},${n.y}`).join(" ")}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <circle cx={son.x} cy={son.y} r="2" className="fill-slate-500" />
-    </svg>
-  );
-}
-
-// Taban sıra iki yıl üst üste %10'dan fazla oynadıysa yönünü gösterir;
-// küçük sıra = daha rekabetçi taban demektir.
-function TabanTrendi({ p }: { p: Program }) {
-  if (p.sira2025 == null || p.sira2024 == null) return null;
-  const oran = (p.sira2024 - p.sira2025) / p.sira2024;
-  if (Math.abs(oran) < 0.1) return null;
-  const yukseliyor = oran > 0;
-  const gecis = `${p.sira2024.toLocaleString("tr-TR")} → ${p.sira2025.toLocaleString("tr-TR")}`;
-  return yukseliyor ? (
-    <TrendingUp
-      className="size-3 shrink-0 text-amber-500"
-      aria-label={`Taban yükseliyor: ${gecis}`}
-      role="img"
-    >
-      <title>{`Taban yükseliyor: ${gecis}`}</title>
-    </TrendingUp>
-  ) : (
-    <TrendingDown
-      className="size-3 shrink-0 text-emerald-600"
-      aria-label={`Taban geriliyor: ${gecis}`}
-      role="img"
-    >
-      <title>{`Taban geriliyor: ${gecis}`}</title>
-    </TrendingDown>
-  );
-}
-
 // /universite/[slug] sayfa slug'ı: harita.ts'teki uniAdiNormalize ile aynı
 // kural (sondaki "(İL)" eki atılır) — client bundle'a harita verisi çekmemek
 // için burada tekrarlanır. Katalog haritası DB'deki tüm universite
@@ -425,17 +316,13 @@ function uniSayfaSlug(ad: string): string {
 function ProgramSatiri({
   program: p,
   adaySira,
-  listede,
-  doldu,
-  onEkle,
+  tur,
 }: {
   program: Program;
   adaySira: number;
-  listede: boolean;
-  doldu: boolean;
-  onEkle: (p: Program) => void;
+  tur: PuanTuruKey;
 }) {
-  const taban = efektifSira(p);
+  const taban = programEtkinSira(p);
   const risk = riskHesapla(taban, adaySira);
   const devlet = p.unitur === "DEVLET";
 
@@ -466,7 +353,6 @@ function ProgramSatiri({
               href={`/universite/${uniSayfaSlug(p.universite)}`}
               className="hover:text-primary hover:underline"
               title={`${p.universite} taban puanları sayfası`}
-              // Satırdaki "+" ekleme akışıyla karışmasın: tıklama satıra yayılmaz
               onClick={(e) => e.stopPropagation()}
             >
               {p.universite}
@@ -479,7 +365,7 @@ function ProgramSatiri({
         </span>
       </TableCell>
       <TableCell className="hidden text-right text-xs md:table-cell">
-        <SiraGecmisi p={p} />
+        <ProgramSiraGecmisi program={p} />
       </TableCell>
       <TableCell
         className="hidden text-right text-xs tabular-nums text-slate-500 sm:table-cell"
@@ -504,39 +390,18 @@ function ProgramSatiri({
       </TableCell>
       <TableCell className="text-right text-xs tabular-nums text-slate-500">
         <span className="inline-flex items-center gap-1">
-          <TabanTrendi p={p} />
+          <ProgramTabanTrendi program={p} />
           {taban != null ? `~${taban.toLocaleString("tr-TR")}.` : "—"}
         </span>
       </TableCell>
       <TableCell className="pr-4 text-right">
-        <button
-          type="button"
-          disabled={listede || doldu}
-          onClick={() => onEkle(p)}
-          title={
-            listede
-              ? "Zaten seçtiklerinde"
-              : doldu
-                ? `Seçtiklerin dolu (${MANUEL_LISTE_MAX}/${MANUEL_LISTE_MAX})`
-                : "Seçtiklerime ekle"
-          }
-          className={`inline-flex size-8 cursor-pointer items-center justify-center rounded-full border transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.92] disabled:cursor-default ${
-            listede
-              ? "border-emerald-200 bg-emerald-50 text-emerald-600"
-              : "border-slate-200 bg-white text-slate-500 hover:border-primary hover:bg-primary/5 hover:text-primary disabled:opacity-40"
-          }`}
-        >
-          {listede ? (
-            <Check className="size-4" aria-hidden />
-          ) : (
-            <Plus className="size-4" aria-hidden />
-          )}
-          <span className="sr-only">
-            {listede
-              ? `${p.isim} seçtiklerinde`
-              : `${p.isim} seçtiklerine ekle`}
-          </span>
-        </button>
+        <ProgramEkleButonu
+          program={p}
+          kaynak="sonuc"
+          adaySira={adaySira}
+          adayTur={tur}
+          className="size-8 min-h-8 min-w-8"
+        />
       </TableCell>
     </TableRow>
   );