ayrisdev/screenclipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: panel UI'ını Tailwind v4 + shadcn/ui ile yeniden tasarla (Faz 4)

Browse Source 
Elle yazılmış tek-dosya CSS (sabit koyu tema, ham table/button, window.confirm
ile silme onayı) yerine tutarlı bir bileşen sistemi: Card/Table/Badge/Button/
Input/Switch/AlertDialog primitifleri, Hanken Grotesk + JetBrains Mono
tipografi çifti, "broadcast/monitör" temalı özel bir renk paleti (camgöbeği
accent, ok/warn/err/live durum rengi sözlüğü). Tüm sayfalar (dashboard, kanal
detay, segmentler, ayarlar, istatistik, kullanıcılar, login) aynı oturumda
taşındı — silme onayları artık gerçek AlertDialog, native confirm() değil.

Veri akışı/server action'lar değişmedi, tamamen görsel katman.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ayrisdev
2026-09-02 14:33:24 +03:00
co-authored by Claude Sonnet 5
parent d045b24c85
commit 7d504d1938
30 changed files with 3436 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/app/layout.tsx
+30 -16
View File
@@ -1,8 +1,22 @@
import type { Metadata } from "next";
import Link from "next/link";
import { Hanken_Grotesk, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import { getSession } from "../lib/auth";
import { logout } from "./login/actions";
import { NavLink } from "./components/NavLink";
import { Button } from "@/components/ui/button";
const hankenGrotesk = Hanken_Grotesk({
subsets: ["latin"],
variable: "--font-hanken-grotesk",
display: "swap",
});
const jetbrainsMono = JetBrains_Mono({
subsets: ["latin"],
variable: "--font-jetbrains-mono",
display: "swap",
});
export const metadata: Metadata = {
title: "StreamClipper AI — Panel",
@@ -12,29 +26,29 @@ export default async function RootLayout({ children }: { children: React.ReactNo
const session = await getSession();
return (
<html lang="tr">
<html lang="tr" className={`${hankenGrotesk.variable} ${jetbrainsMono.variable}`}>
<body>
{session && (
<nav className="nav">
<Link href="/">Kanal Durumu</Link>
<Link href="/segments">Segment & Aday Kütüphanesi</Link>
<Link href="/stats">İstatistik</Link>
<Link href="/settings">Ayarlar</Link>
<Link href="/users">Kullanıcılar</Link>
<span style={{ marginLeft: "auto", display: "flex", gap: "1rem", alignItems: "center" }}>
<span className="mono">{session.username}</span>
<nav className="flex items-center gap-6 border-b border-border px-6 py-4">
<span className="mr-2 text-sm font-semibold tracking-tight text-foreground">
StreamClipper<span className="text-primary">.</span>
</span>
<NavLink href="/">Kanal Durumu</NavLink>
<NavLink href="/segments">Segment & Aday Kütüphanesi</NavLink>
<NavLink href="/stats">İstatistik</NavLink>
<NavLink href="/settings">Ayarlar</NavLink>
<NavLink href="/users">Kullanıcılar</NavLink>
<span className="ml-auto flex items-center gap-4">
<span className="font-mono-num text-xs text-muted-foreground">{session.username}</span>
<form action={logout}>
<button
type="submit"
style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", font: "inherit" }}
>
<Button type="submit" variant="ghost" size="sm" className="text-muted-foreground">
Çıkış Yap
</button>
</Button>
</form>
</span>
</nav>
)}
<main>{children}</main>
<main className="mx-auto max-w-4xl px-6 py-10">{children}</main>
</body>
</html>
);