Compare commits

..

2 Commits

Author SHA1 Message Date
4df6522952 feat(channel-card): add confirmation dialog for schedule regeneration 2026-03-16 01:50:05 +01:00
40f698acb7 refactor: clean up styles and improve layout in dashboard and edit channel components
- Removed unnecessary class names for buttons in ChannelCard and DashboardPage components.
- Updated layout styles in RootLayout to apply dark mode by default.
- Refactored edit-channel-sheet to streamline block editor and filter editor components.
- Adjusted duration input fields to reflect minutes instead of seconds in AlgorithmicFilterEditor.
- Enhanced the structure of the EditChannelSheet for better readability and maintainability.
2026-03-16 01:40:28 +01:00
5 changed files with 558 additions and 472 deletions

View File

@@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import {
Pencil,
@@ -14,6 +15,7 @@ import {
import { Button } from "@/components/ui/button";
import { useActiveSchedule } from "@/hooks/use-channels";
import type { ChannelResponse } from "@/lib/types";
import { ConfirmDialog } from "./confirm-dialog";
interface ChannelCardProps {
channel: ChannelResponse;
@@ -65,6 +67,7 @@ export function ChannelCard({
onMoveUp,
onMoveDown,
}: ChannelCardProps) {
const [confirmOpen, setConfirmOpen] = useState(false);
const blockCount = channel.schedule_config.blocks.length;
const { status, label } = useScheduleStatus(channel.id);
@@ -155,7 +158,13 @@ export function ChannelCard({
<div className="flex gap-2">
<Button
size="sm"
onClick={onGenerateSchedule}
onClick={() => {
if (status !== "none") {
setConfirmOpen(true);
} else {
onGenerateSchedule();
}
}}
disabled={isGenerating}
className={`flex-1 ${status === "expired" ? "border border-red-800/50 bg-red-950/30 text-red-300 hover:bg-red-900/40" : ""}`}
>
@@ -168,7 +177,6 @@ export function ChannelCard({
size="icon-sm"
onClick={onViewSchedule}
title="View schedule"
className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
>
<CalendarDays className="size-3.5" />
</Button>
@@ -176,13 +184,28 @@ export function ChannelCard({
size="icon-sm"
asChild
title="Watch on TV"
className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
>
<Link href={`/tv?channel=${channel.id}`}>
<Tv2 className="size-3.5" />
</Link>
</Button>
</div>
<ConfirmDialog
open={confirmOpen}
onOpenChange={setConfirmOpen}
title="Regenerate schedule?"
description={
<>
<span className="font-medium text-zinc-200">{channel.name}</span>
{" "}already has an active schedule. Generating a new one will overwrite it immediately.
</>
}
confirmLabel="Regenerate"
onConfirm={() => {
setConfirmOpen(false);
onGenerateSchedule();
}}
/>
</div>
);
}

View File

@@ -0,0 +1,67 @@
"use client";
import React from "react";
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogCancel,
AlertDialogAction,
} from "@/components/ui/alert-dialog";
interface ConfirmDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description: React.ReactNode;
confirmLabel?: string;
cancelLabel?: string;
onConfirm: () => void;
isPending?: boolean;
destructive?: boolean;
}
export function ConfirmDialog({
open,
onOpenChange,
title,
description,
confirmLabel = "Confirm",
cancelLabel = "Cancel",
onConfirm,
isPending,
destructive,
}: ConfirmDialogProps) {
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent className="bg-zinc-900 border-zinc-800 text-zinc-100">
<AlertDialogHeader>
<AlertDialogTitle>{title}</AlertDialogTitle>
<AlertDialogDescription className="text-zinc-400">
{description}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel
disabled={isPending}
className="border-zinc-700 bg-transparent text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
>
{cancelLabel}
</AlertDialogCancel>
<AlertDialogAction
onClick={onConfirm}
disabled={isPending}
className={
destructive ? "bg-red-600 text-white hover:bg-red-700" : undefined
}
>
{confirmLabel}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}

View File

@@ -241,7 +241,6 @@ export default function DashboardPage() {
<Button
onClick={() => setTranscodeOpen(true)}
title="Transcode settings"
className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
>
<Settings2 className="size-4" />
Transcode
@@ -257,7 +256,6 @@ export default function DashboardPage() {
}
disabled={rescanLibrary.isPending}
title="Rescan local files directory"
className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
>
<RefreshCw className={`size-4 ${rescanLibrary.isPending ? "animate-spin" : ""}`} />
Rescan library
@@ -268,7 +266,6 @@ export default function DashboardPage() {
onClick={handleRegenerateAll}
disabled={isRegeneratingAll}
title="Regenerate schedules for all channels"
className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
>
<RefreshCw
className={`size-4 ${isRegeneratingAll ? "animate-spin" : ""}`}
@@ -276,17 +273,11 @@ export default function DashboardPage() {
Regenerate all
</Button>
)}
<Button
onClick={() => setIptvOpen(true)}
className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
>
<Button onClick={() => setIptvOpen(true)}>
<Antenna className="size-4" />
IPTV
</Button>
<Button
onClick={() => setImportOpen(true)}
className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
>
<Button onClick={() => setImportOpen(true)}>
<Upload className="size-4" />
Import
</Button>

View File

@@ -26,7 +26,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="en" className="dark">
<head>
<Script
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"