From dea207996ed929d829a51121e5e4e2dd98b97820 Mon Sep 17 00:00:00 2001
From: ayrisdev <ayris.dev@gmail.com>
Date: Wed, 2 Sep 2026 22:58:06 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20kanal=20detay=20sayfas=C4=B1nda=20i?=
 =?UTF-8?q?=C3=A7=20i=C3=A7e=20girinti=20(segment/aday=20klip)=20netle?=
 =?UTF-8?q?=C5=9Ftirildi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

3 seviyeli border-left girinti (oturum > segment > aday klip) yerine
gerçek kutu (soft-card) blokları — her segment kendi arka planıyla
ayrışıyor, adaylar onun içinde daha da net bir alt kutuda. Segment
başlığı artık ham dosya yolu değil ("15sn segment · 02.09.2026 20:14"
gibi) insan-okur bir etiket — dosya yolu küçük/soluk referans olarak
altta kaldı. "Canlı Durum" kartındaki karışık bölümler de (hata/canlı
önizleme/log/segment ayarı/manuel başlat) Separator ile ayrıştırıldı.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/frontend/app/channels/[id]/page.tsx | 222 ++++++++++++-----------
 1 file changed, 117 insertions(+), 105 deletions(-)

diff --git a/apps/frontend/app/channels/[id]/page.tsx b/apps/frontend/app/channels/[id]/page.tsx
index b2ddc21..3554b48 100644
--- a/apps/frontend/app/channels/[id]/page.tsx
+++ b/apps/frontend/app/channels/[id]/page.tsx
@@ -21,6 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge, type badgeVariants } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import type { VariantProps } from "class-variance-authority";
 
 export const dynamic = "force-dynamic";
@@ -111,40 +112,12 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
             )}
           </div>
         </CardHeader>
-        <CardContent className="flex flex-col gap-3">
+        <CardContent className="flex flex-col gap-4">
           <p className="font-mono-num text-xs text-muted-foreground">
             Aktif: {channel.isActive ? "evet" : "hayır"} · Son kontrol:{" "}
             {channel.lastCheckedAt ? formatTr(channel.lastCheckedAt) : "—"}
           </p>
 
-          <form
-            action={updateChannelSegmentTime.bind(null, channel.id)}
-            className="flex flex-wrap items-end gap-2"
-          >
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="segmentTimeMin" className="text-xs text-muted-foreground">
-                Bu kanal için segment süresi (dakika)
-              </Label>
-              <Input
-                id="segmentTimeMin"
-                name="segmentTimeMin"
-                type="number"
-                min={1}
-                max={60}
-                step={0.5}
-                placeholder="varsayılan (15)"
-                defaultValue={channel.segmentTimeSec ? channel.segmentTimeSec / 60 : ""}
-                className="w-40"
-              />
-            </div>
-            <Button type="submit" variant="outline" size="sm">
-              Kaydet
-            </Button>
-            <span className="text-xs text-muted-foreground">
-              Boş bırakılırsa global varsayılan kullanılır. Sadece bundan sonra başlayacak kayıtları etkiler.
-            </span>
-          </form>
-
           {status === undefined && (
             <p className="text-sm text-muted-foreground">
               api-daemon&apos;dan canlı durum alınamadı (servis erişilemez olabilir).
@@ -152,7 +125,7 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
           )}
 
           {status?.lastPollError && (
-            <div className="flex flex-col gap-1.5">
+            <div className="flex flex-col gap-1.5 rounded-lg border border-err/30 bg-err/5 p-3">
               <div className="flex items-center gap-2">
                 <Badge variant="err" className="w-fit">
                   son poll hatası
@@ -161,32 +134,64 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
                   {formatTr(status.lastPollError.at)}
                 </span>
               </div>
-              <pre className="font-mono-num whitespace-pre-wrap rounded-md border border-border bg-background/60 p-3 text-[0.7rem] text-muted-foreground">
+              <pre className="font-mono-num whitespace-pre-wrap text-[0.7rem] text-muted-foreground">
                 {status.lastPollError.message}
               </pre>
             </div>
           )}
 
-          {status?.recording && activeSession?.liveVideoId && activeSession.liveVideoId !== "forced" && (
-            <iframe
-              src={`https://www.youtube.com/embed/${activeSession.liveVideoId}`}
-              title="Canlı yayın önizleme"
-              className="aspect-video w-full max-w-md rounded-md border border-border"
-              allow="autoplay; encrypted-media"
-            />
+          {status?.recording && (
+            <div className="flex flex-col gap-3">
+              {activeSession?.liveVideoId && activeSession.liveVideoId !== "forced" && (
+                <iframe
+                  src={`https://www.youtube.com/embed/${activeSession.liveVideoId}`}
+                  title="Canlı yayın önizleme"
+                  className="aspect-video w-full max-w-md rounded-md border border-border"
+                  allow="autoplay; encrypted-media"
+                />
+              )}
+              {activeSession && <LiveLogViewer sessionId={activeSession.id} />}
+            </div>
           )}
 
-          {status?.recording && activeSession && <LiveLogViewer sessionId={activeSession.id} />}
+          <Separator />
 
-          <details className="mt-1 text-sm">
-            <summary className="cursor-pointer font-mono-num text-xs text-muted-foreground">
-              Manuel URL ile kayıt başlat
-            </summary>
-            <form action={forceStartCapture.bind(null, channel.id)} className="mt-2 flex gap-2">
-              <Input name="url" placeholder="https://www.youtube.com/watch?v=..." required className="flex-1" />
-              <Button type="submit">Başlat</Button>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <form
+              action={updateChannelSegmentTime.bind(null, channel.id)}
+              className="flex flex-wrap items-end gap-2"
+            >
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="segmentTimeMin" className="text-xs text-muted-foreground">
+                  Bu kanal için segment süresi (dakika)
+                </Label>
+                <Input
+                  id="segmentTimeMin"
+                  name="segmentTimeMin"
+                  type="number"
+                  min={1}
+                  max={60}
+                  step={0.5}
+                  placeholder="varsayılan"
+                  defaultValue={channel.segmentTimeSec ? channel.segmentTimeSec / 60 : ""}
+                  className="w-32"
+                />
+              </div>
+              <Button type="submit" variant="outline" size="sm">
+                Kaydet
+              </Button>
             </form>
-          </details>
+
+            <details className="text-sm">
+              <summary className="cursor-pointer font-mono-num text-xs text-muted-foreground">
+                Manuel URL ile kayıt başlat
+              </summary>
+              <form action={forceStartCapture.bind(null, channel.id)} className="mt-2 flex gap-2">
+                <Input name="url" placeholder="https://www.youtube.com/watch?v=..." required className="w-64" />
+                <Button type="submit">Başlat</Button>
+              </form>
+            </details>
+          </div>
         </CardContent>
       </Card>
 
@@ -213,11 +218,14 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
                 ) : (
                   <CardContent className="flex flex-col gap-4">
                     {session.segments.map((segment) => (
-                      <div key={segment.id} className="border-l-2 border-border pl-4">
+                      <div key={segment.id} className="rounded-lg border border-border bg-muted/20 p-4">
                         <div className="flex items-center justify-between gap-2">
-                          <span className="font-mono-num text-xs text-muted-foreground">{segment.filePath}</span>
+                          <span className="text-sm font-medium">
+                            {segment.duration}sn segment · {formatTr(segment.startedAt)}
+                          </span>
                           <Badge variant={STATUS_BADGE[segment.status] ?? "muted"}>{segment.status}</Badge>
                         </div>
+                        <span className="font-mono-num text-[0.7rem] text-muted-foreground">{segment.filePath}</span>
 
                         <video controls preload="metadata" className="mt-2 w-full max-w-md rounded-md border border-border">
                           <source src={`/api/segments/${segment.id}/video`} type="video/mp4" />
@@ -236,73 +244,77 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
                         </div>
 
                         {segment.candidates.length === 0 && segment.status !== "PENDING" && (
-                          <p className="mt-2 text-xs text-muted-foreground">
+                          <p className="mt-3 text-xs text-muted-foreground">
                             Bu segmentte aday klip bulunamadı (sinyal analizi ilginç bir an tespit etmedi).
                           </p>
                         )}
 
-                        {segment.candidates.map((c) => (
-                          <div key={c.id} className="mt-3 border-l-2 border-border pl-4">
-                            <div className="flex items-center justify-between gap-2">
-                              <span className="font-mono-num text-xs text-muted-foreground">
-                                {c.startSec}s – {c.endSec}s
-                                {c.audioPeakScore != null && ` · peak ${c.audioPeakScore.toFixed(1)}dB`}
-                              </span>
-                              <Badge variant={STATUS_BADGE[c.status] ?? "muted"}>{c.status}</Badge>
-                            </div>
-                            {transcriptPreview(c.transcriptJson) && (
-                              <p className="mt-1.5 text-sm leading-relaxed">{transcriptPreview(c.transcriptJson)}</p>
-                            )}
+                        {segment.candidates.length > 0 && (
+                          <div className="mt-3 flex flex-col gap-2">
+                            {segment.candidates.map((c) => (
+                              <div key={c.id} className="rounded-md border border-border bg-background/60 p-3">
+                                <div className="flex items-center justify-between gap-2">
+                                  <span className="font-mono-num text-xs text-muted-foreground">
+                                    {c.startSec}s – {c.endSec}s
+                                    {c.audioPeakScore != null && ` · peak ${c.audioPeakScore.toFixed(1)}dB`}
+                                  </span>
+                                  <Badge variant={STATUS_BADGE[c.status] ?? "muted"}>{c.status}</Badge>
+                                </div>
+                                {transcriptPreview(c.transcriptJson) && (
+                                  <p className="mt-1.5 text-sm leading-relaxed">{transcriptPreview(c.transcriptJson)}</p>
+                                )}
 
-                            {c.short && (
-                              <div className="mt-2 flex flex-col items-start gap-2">
-                                <Badge variant={STATUS_BADGE[c.short.status] ?? "muted"}>9:16: {c.short.status}</Badge>
-                                {c.short.status === "READY" && (
-                                  <>
-                                    <video controls preload="metadata" className="w-[220px] rounded-md border border-border">
-                                      <source src={`/api/shorts/${c.short.id}/video`} type="video/mp4" />
-                                    </video>
-                                    <Button asChild variant="outline" size="sm">
-                                      <a href={`/api/shorts/${c.short.id}/video?download=1`}>İndir</a>
-                                    </Button>
-                                  </>
-                                )}
-                                {c.short.status === "FAILED" && (
-                                  <>
-                                    {c.short.errorMessage && (
-                                      <p className="font-mono-num text-xs text-muted-foreground">{c.short.errorMessage}</p>
+                                {c.short && (
+                                  <div className="mt-2 flex flex-col items-start gap-2">
+                                    <Badge variant={STATUS_BADGE[c.short.status] ?? "muted"}>9:16: {c.short.status}</Badge>
+                                    {c.short.status === "READY" && (
+                                      <>
+                                        <video controls preload="metadata" className="w-[220px] rounded-md border border-border">
+                                          <source src={`/api/shorts/${c.short.id}/video`} type="video/mp4" />
+                                        </video>
+                                        <Button asChild variant="outline" size="sm">
+                                          <a href={`/api/shorts/${c.short.id}/video?download=1`}>İndir</a>
+                                        </Button>
+                                      </>
                                     )}
-                                    <form action={retryRender.bind(null, c.id)}>
-                                      <Button type="submit" size="sm">
-                                        Tekrar Dene
-                                      </Button>
-                                    </form>
-                                  </>
+                                    {c.short.status === "FAILED" && (
+                                      <>
+                                        {c.short.errorMessage && (
+                                          <p className="font-mono-num text-xs text-muted-foreground">{c.short.errorMessage}</p>
+                                        )}
+                                        <form action={retryRender.bind(null, c.id)}>
+                                          <Button type="submit" size="sm">
+                                            Tekrar Dene
+                                          </Button>
+                                        </form>
+                                      </>
+                                    )}
+                                    {c.short.status === "RENDERING" && (
+                                      <form action={cancelRender.bind(null, c.id)}>
+                                        <ConfirmButton
+                                          confirmText="Render'ı başarısız say ve kilidi aç? (Çalışan process'i öldürmez, sadece durumu sıfırlar)"
+                                          label="Takıldıysa İptal Et"
+                                          variant="outline"
+                                        />
+                                      </form>
+                                    )}
+                                  </div>
                                 )}
-                                {c.short.status === "RENDERING" && (
-                                  <form action={cancelRender.bind(null, c.id)}>
-                                    <ConfirmButton
-                                      confirmText="Render'ı başarısız say ve kilidi aç? (Çalışan process'i öldürmez, sadece durumu sıfırlar)"
-                                      label="Takıldıysa İptal Et"
-                                      variant="outline"
-                                    />
+                                {!c.short && c.status === "TRANSCRIBED" && (
+                                  <form action={retryRender.bind(null, c.id)} className="mt-2">
+                                    <Button type="submit" size="sm">
+                                      9:16 Render Et
+                                    </Button>
                                   </form>
                                 )}
-                              </div>
-                            )}
-                            {!c.short && c.status === "TRANSCRIBED" && (
-                              <form action={retryRender.bind(null, c.id)} className="mt-2">
-                                <Button type="submit" size="sm">
-                                  9:16 Render Et
-                                </Button>
-                              </form>
-                            )}
 
-                            <form action={deleteCandidateSegment.bind(null, c.id)} className="mt-2">
-                              <ConfirmButton confirmText="Bu aday klibi silmek istediğine emin misin?" label="Sil" />
-                            </form>
+                                <form action={deleteCandidateSegment.bind(null, c.id)} className="mt-2">
+                                  <ConfirmButton confirmText="Bu aday klibi silmek istediğine emin misin?" label="Sil" />
+                                </form>
+                              </div>
+                            ))}
                           </div>
-                        ))}
+                        )}
                       </div>
                     ))}
                   </CardContent>