"use client";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, Loader2, Mail, X } from "lucide-react";
import { useTRPC } from "@karakeep/shared-react/trpc";
interface Invitation {
id: string;
role: string;
list: {
name: string;
icon?: string;
description?: string | null;
owner?: {
name?: string;
} | null;
};
}
function InvitationRow({ invitation }: { invitation: Invitation }) {
const api = useTRPC();
const { t } = useTranslation();
const queryClient = useQueryClient();
const acceptInvitation = useMutation(
api.lists.acceptInvitation.mutationOptions({
onSuccess: async () => {
toast({
description: t("lists.invitations.accepted"),
});
await Promise.all([
queryClient.invalidateQueries(
api.lists.getPendingInvitations.pathFilter(),
),
queryClient.invalidateQueries(api.lists.list.pathFilter()),
]);
},
onError: (error) => {
toast({
variant: "destructive",
description: error.message || t("lists.invitations.failed_to_accept"),
});
},
}),
);
const declineInvitation = useMutation(
api.lists.declineInvitation.mutationOptions({
onSuccess: async () => {
toast({
description: t("lists.invitations.declined"),
});
await queryClient.invalidateQueries(
api.lists.getPendingInvitations.pathFilter(),
);
},
onError: (error) => {
toast({
variant: "destructive",
description:
error.message || t("lists.invitations.failed_to_decline"),
});
},
}),
);
return (
<div className="flex items-center justify-between rounded-lg border p-4">
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium">{invitation.list.name}</span>
<span className="text-xs text-muted-foreground">
{invitation.list.icon}
</span>
</div>
{invitation.list.description && (
<div className="mt-1 text-sm text-muted-foreground">
{invitation.list.description}
</div>
)}
<div className="mt-2 text-sm text-muted-foreground">
{t("lists.invitations.invited_by")}{" "}
<span className="font-medium">
{invitation.list.owner?.name || "Unknown"}
</span>
{" • "}
<span className="capitalize">{invitation.role}</span>
</div>
</div>
<div className="flex items-center gap-2">
<Button
size="sm"
variant="outline"
onClick={() =>
declineInvitation.mutate({ invitationId: invitation.id })
}
disabled={declineInvitation.isPending || acceptInvitation.isPending}
>
{declineInvitation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<X className="mr-1 h-4 w-4" />
{t("lists.invitations.decline")}
</>
)}
</Button>
<Button
size="sm"
onClick={() =>
acceptInvitation.mutate({ invitationId: invitation.id })
}
disabled={acceptInvitation.isPending || declineInvitation.isPending}
>
{acceptInvitation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<Check className="mr-1 h-4 w-4" />
{t("lists.invitations.accept")}
</>
)}
</Button>
</div>
</div>
);
}
export function PendingInvitationsCard() {
const api = useTRPC();
const { t } = useTranslation();
const { data: invitations, isLoading } = useQuery(
api.lists.getPendingInvitations.queryOptions(),
);
if (isLoading) {
return null;
}
if (!invitations || invitations.length === 0) {
return null;
}
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 font-normal">
<Mail className="h-5 w-5" />
{t("lists.invitations.pending")}
<span className="rounded bg-secondary p-1 text-sm text-secondary-foreground">
{invitations.length}
</span>
</CardTitle>
<CardDescription>{t("lists.invitations.description")}</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
{invitations.map((invitation) => (
<InvitationRow key={invitation.id} invitation={invitation} />
))}
</CardContent>
</Card>
);
}
