cleanup dialogs

Author: izadoesdev

apps/dashboard/app/(main)/organizations/components/general-settings.tsx

@@ -105,7 +105,7 @@ export function GeneralSettings({
 								/>
 								<p className="text-muted-foreground text-xs">
 									Used in URLs:{" "}
-									<code className="rounded bg-muted px-1 py-0.5 text-xs">
+									<code className="rounded bg-secondary px-1.5 py-0.5 font-mono text-foreground text-xs">
 										/{slug}
 									</code>
 								</p>

apps/dashboard/app/(main)/organizations/invitations/invitation-list.tsx

@@ -4,19 +4,11 @@ import { EnvelopeIcon, TrashIcon } from "@phosphor-icons/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useState } from "react";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { DeleteDialog } from "@/components/ui/delete-dialog";
 import type { CancelInvitation, Invitation } from "@/hooks/use-organizations";
+import { cn } from "@/lib/utils";
 
 dayjs.extend(relativeTime);
 
@@ -25,17 +17,21 @@ type InvitationToCancel = {
 	email: string;
 };
 
-interface InvitationRowProps {
+type InvitationRowProps = {
 	invitation: Invitation;
 	isCancellingInvitation: boolean;
 	onConfirmCancel: (inv: InvitationToCancel) => void;
-}
+};
 
 function InvitationRow({
 	invitation,
 	isCancellingInvitation,
 	onConfirmCancel,
 }: InvitationRowProps) {
+	const isExpired =
+		invitation.status === "pending" &&
+		dayjs(invitation.expiresAt).isBefore(dayjs());
+
 	const isPending =
 		invitation.status === "pending" &&
 		dayjs(invitation.expiresAt).isAfter(dayjs());
@@ -51,13 +47,15 @@ function InvitationRow({
 		},
 		expired: {
 			label: "Expired",
-			className: "border-muted bg-muted text-muted-foreground",
+			className: "border-secondary bg-secondary text-secondary-foreground",
 		},
 	};
 
-	const status =
-		statusConfig[invitation.status as keyof typeof statusConfig] ??
-		statusConfig.expired;
+	const actualStatus = isExpired
+		? "expired"
+		: ((invitation.status as keyof typeof statusConfig) ?? "expired");
+
+	const status = statusConfig[actualStatus] ?? statusConfig.expired;
 
 	return (
 		<div className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-4 px-5 py-4">
@@ -69,12 +67,12 @@ function InvitationRow({
 				<p className="truncate font-medium">{invitation.email}</p>
 				<p className="truncate text-muted-foreground text-sm">
 					{invitation.role ?? "member"} ·{" "}
-					{invitation.status === "pending" ? "Expires" : "Expired"}{" "}
+					{isExpired ? "Expired" : isPending ? "Expires" : "Expired"}{" "}
 					{dayjs(invitation.expiresAt).fromNow()}
 				</p>
 			</div>
 
-			<Badge className={status.className} variant="secondary">
+			<Badge className={cn(status.className, "h-7")} variant="secondary">
 				{status.label}
 			</Badge>
 
@@ -110,12 +108,16 @@ export function InvitationList({
 		useState<InvitationToCancel | null>(null);
 
 	const handleCancel = async () => {
-		if (!invitationToCancel) return;
+		if (!invitationToCancel) {
+			return;
+		}
 		await onCancelInvitationAction(invitationToCancel.id);
 		setInvitationToCancel(null);
 	};
 
-	if (invitations.length === 0) return null;
+	if (invitations.length === 0) {
+		return null;
+	}
 
 	return (
 		<>
@@ -130,30 +132,17 @@ export function InvitationList({
 				))}
 			</div>
 
-			<AlertDialog
-				onOpenChange={(open) => !open && setInvitationToCancel(null)}
-				open={!!invitationToCancel}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>
-							Cancel invitation for {invitationToCancel?.email}?
-						</AlertDialogTitle>
-						<AlertDialogDescription>
-							This action cannot be undone. The invitation will be cancelled.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Keep</AlertDialogCancel>
-						<AlertDialogAction
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-							onClick={handleCancel}
-						>
-							Cancel Invitation
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+			<DeleteDialog
+				cancelLabel="Keep"
+				confirmLabel="Cancel Invitation"
+				description={`Are you sure you want to cancel the invitation for ${invitationToCancel?.email}? This action cannot be undone.`}
+				isDeleting={isCancellingInvitation}
+				isOpen={!!invitationToCancel}
+				itemName={invitationToCancel?.email}
+				onClose={() => setInvitationToCancel(null)}
+				onConfirm={handleCancel}
+				title="Cancel Invitation"
+			/>
 		</>
 	);
 }

apps/dashboard/app/(main)/organizations/invitations/invitations-view.tsx

@@ -196,7 +196,7 @@ export function InvitationsView({
 								<XIcon className="size-3.5" weight="bold" />
 								Expired
 								{expiredCount > 0 && (
-									<span className="rounded-full bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+									<span className="rounded-full bg-secondary px-1.5 py-0.5 text-secondary-foreground text-xs">
 										{expiredCount}
 									</span>
 								)}

apps/dashboard/app/(main)/organizations/members/member-list.tsx

@@ -4,19 +4,10 @@ import { CrownIcon, TrashIcon } from "@phosphor-icons/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useState } from "react";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { DeleteDialog } from "@/components/ui/delete-dialog";
 import {
 	Select,
 	SelectContent,
@@ -31,26 +22,26 @@ import type {
 
 dayjs.extend(relativeTime);
 
-interface MemberToRemove {
+type MemberToRemove = {
 	id: string;
 	name: string;
-}
+};
 
-interface MemberListProps {
+type MemberListProps = {
 	members: OrganizationMember[];
 	onRemoveMember: (memberId: string) => void;
 	isRemovingMember: boolean;
 	onUpdateRole: (member: UpdateMemberData) => void;
 	isUpdatingMember: boolean;
 	organizationId: string;
-}
+};
 
-interface RoleSelectorProps {
+type RoleSelectorProps = {
 	member: OrganizationMember;
 	onUpdateRole: MemberListProps["onUpdateRole"];
 	isUpdatingMember: boolean;
 	organizationId: string;
-}
+};
 
 function RoleSelector({
 	member,
@@ -85,15 +76,15 @@ function RoleSelector({
 	);
 }
 
-interface MemberRowProps {
+type MemberRowProps = {
 	member: OrganizationMember;
 	onRemoveMember: MemberListProps["onRemoveMember"];
 	isRemovingMember: boolean;
 	onUpdateRole: MemberListProps["onUpdateRole"];
 	isUpdatingMember: boolean;
 	organizationId: string;
 	onConfirmRemove: (member: MemberToRemove) => void;
-}
+};
 
 function MemberRow({
 	member,
@@ -169,7 +160,9 @@ export function MemberList({
 	);
 
 	const handleRemove = async () => {
-		if (!memberToRemove) return;
+		if (!memberToRemove) {
+			return;
+		}
 		await onRemoveMember(memberToRemove.id);
 		setMemberToRemove(null);
 	};
@@ -189,29 +182,16 @@ export function MemberList({
 				/>
 			))}
 
-			<AlertDialog
-				onOpenChange={(open) => !open && setMemberToRemove(null)}
-				open={!!memberToRemove}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Remove {memberToRemove?.name}?</AlertDialogTitle>
-						<AlertDialogDescription>
-							This action cannot be undone. This will permanently remove the
-							member from the organization.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-							onClick={handleRemove}
-						>
-							Remove
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+			<DeleteDialog
+				confirmLabel="Remove"
+				description={`This action cannot be undone. This will permanently remove ${memberToRemove?.name} from the organization.`}
+				isDeleting={isRemovingMember}
+				isOpen={!!memberToRemove}
+				itemName={memberToRemove?.name}
+				onClose={() => setMemberToRemove(null)}
+				onConfirm={handleRemove}
+				title="Remove Member"
+			/>
 		</>
 	);
 }

apps/dashboard/app/(main)/websites/[id]/_components/tabs/audience-tab.tsx

@@ -162,7 +162,7 @@ export function WebsiteAudienceTab({
 						<div className="flex items-center gap-3">
 							<BrowserIcon
 								fallback={
-									<div className="flex h-5 w-5 items-center justify-center rounded bg-muted font-medium text-muted-foreground text-xs">
+									<div className="flex h-5 w-5 items-center justify-center rounded bg-secondary font-medium text-secondary-foreground text-xs">
 										{browserName.charAt(0).toUpperCase()}
 									</div>
 								}

apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-history-sheet.tsx

@@ -11,18 +11,9 @@ import {
 import { useAtom } from "jotai";
 import type React from "react";
 import { useEffect, useState } from "react";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { DeleteDialog } from "@/components/ui/delete-dialog";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -43,18 +34,18 @@ import { cn } from "@/lib/utils";
 import { websiteDataAtom, websiteIdAtom } from "@/stores/jotai/assistantAtoms";
 import { getChatDB } from "../lib/chat-db";
 
-interface ChatHistoryItem {
+type ChatHistoryItem = {
 	websiteId: string;
 	websiteName?: string;
 	lastUpdated: number;
 	messageCount: number;
 	lastMessage?: string;
-}
+};
 
-interface ChatHistorySheetProps {
+type ChatHistorySheetProps = {
 	isOpen: boolean;
 	onClose: () => void;
-}
+};
 
 function formatRelativeTime(timestamp: number): string {
 	const now = Date.now();
@@ -339,29 +330,14 @@ export function ChatHistorySheet({ isOpen, onClose }: ChatHistorySheetProps) {
 					</div>
 				</SheetContent>
 			</Sheet>
-			<AlertDialog
-				onOpenChange={() => setDeleteConfirm(null)}
-				open={!!deleteConfirm}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
-						<AlertDialogDescription>
-							This will permanently delete this chat history. This action cannot
-							be undone.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-							onClick={() => deleteConfirm && handleDeleteChat(deleteConfirm)}
-						>
-							Delete
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+			<DeleteDialog
+				confirmLabel="Delete"
+				description="This will permanently delete this chat history. This action cannot be undone."
+				isOpen={!!deleteConfirm}
+				onClose={() => setDeleteConfirm(null)}
+				onConfirm={() => deleteConfirm && handleDeleteChat(deleteConfirm)}
+				title="Delete Chat History"
+			/>
 		</>
 	);
 }

apps/dashboard/app/(main)/websites/[id]/users/[userId]/_components/session-utils.tsx

@@ -44,7 +44,7 @@ export const getEventIconAndColor = (
 				color: "text-muted-foreground",
 				bgColor: "bg-muted/30",
 				borderColor: "border-muted",
-				badgeColor: "bg-muted text-muted-foreground border-muted",
+				badgeColor: "bg-secondary text-secondary-foreground border-secondary",
 			};
 	}
 };