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/login/page.tsx
+21 -58
View File
@@ -1,71 +1,34 @@
import { prisma } from "@streamclipper/db";
import { bootstrapAdmin, login } from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
export const dynamic = "force-dynamic";
const fieldStyle = {
background: "var(--bg)",
border: "1px solid var(--border)",
borderRadius: "6px",
padding: "0.6rem 0.7rem",
color: "var(--text)",
fontSize: "0.9rem",
};
const buttonStyle = {
background: "var(--accent)",
border: "none",
borderRadius: "6px",
padding: "0.6rem 1rem",
color: "#fff",
fontWeight: 600,
fontSize: "0.9rem",
cursor: "pointer",
};
export default async function LoginPage({
searchParams,
}: {
searchParams: Promise<{ error?: string }>;
}) {
export default async function LoginPage({ searchParams }: { searchParams: Promise<{ error?: string }> }) {
const { error } = await searchParams;
const userCount = await prisma.user.count();
const isBootstrap = userCount === 0;
return (
<div style={{ maxWidth: "360px", margin: "4rem auto" }}>
<h1>{isBootstrap ? "İlk Yönetici Hesabını Oluştur" : "Giriş Yap"}</h1>
{isBootstrap && (
<p className="empty" style={{ marginBottom: "1rem" }}>
Henüz kullanıcı yok — panele erişecek ilk admin hesabını burada oluştur.
</p>
)}
{!isBootstrap && error && (
<p style={{ color: "var(--err)", fontSize: "0.9rem", marginBottom: "1rem" }}>
Kullanıcı adı veya şifre hatalı.
</p>
)}
<form
action={isBootstrap ? bootstrapAdmin : login}
className="card"
style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}
>
<input name="username" placeholder="Kullanıcı adı" required style={fieldStyle} />
<input
name="password"
type="password"
placeholder="Şifre"
required
minLength={isBootstrap ? 8 : undefined}
style={fieldStyle}
/>
<button type="submit" style={buttonStyle}>
{isBootstrap ? "Hesabı Oluştur" : "Giriş Yap"}
</button>
</form>
<div className="flex min-h-[60vh] items-center justify-center">
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle className="text-xl">{isBootstrap ? "İlk Yönetici Hesabını Oluştur" : "Giriş Yap"}</CardTitle>
{isBootstrap && (
<CardDescription>Henüz kullanıcı yok — panele erişecek ilk admin hesabını burada oluştur.</CardDescription>
)}
</CardHeader>
<CardContent>
{!isBootstrap && error && <p className="mb-3 text-sm text-destructive">Kullanıcı adı veya şifre hatalı.</p>}
<form action={isBootstrap ? bootstrapAdmin : login} className="flex flex-col gap-3">
<Input name="username" placeholder="Kullanıcı adı" required />
<Input name="password" type="password" placeholder="Şifre" required minLength={isBootstrap ? 8 : undefined} />
<Button type="submit">{isBootstrap ? "Hesabı Oluştur" : "Giriş Yap"}</Button>
</form>
</CardContent>
</Card>
</div>
);
}