panel/components/cards/CompactMessage.tsx

"use client";

import { Message, User } from "revolt-api";
import { Avatar, AvatarImage } from "../ui/avatar";
import { Image as ImageIcon, Pencil } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "../ui/alert-dialog";
import dayjs from "dayjs";
import { decodeTime } from "ulid";

import calendarPlugin from "dayjs/plugin/calendar";
import Link from "next/link";
import { AUTUMN_URL } from "@/lib/constants";
dayjs.extend(calendarPlugin);

export function CompactMessage({
  message,
  users,
  hideUser,
}: {
  message: Message;
  users?: Record<string, User>;
  hideUser?: boolean;
}) {
  const user = users?.[message.author];

  return (
    <AlertDialog>
      <AlertDialogTrigger className="w-full">
        <div
          className="flex gap-2"
          onMouseUp={(e) =>
            e.button === 1 &&
            window.open(`/panel/inspect/message/${message._id}`, "_blank")
          }
        >
          <div
            className="flex-shrink-0 w-12 text-center"
            title={dayjs(decodeTime(message._id)).calendar()}
          >
            {dayjs(decodeTime(message._id)).format("HH:mm")}
          </div>
          {!hideUser && (
            <div
              className="flex-1 min-w-0 overflow-ellipsis overflow-hidden text-right"
              title={`${user?.username}#${user?.discriminator}`}
            >
              {user?.avatar && (
                <Avatar className="w-4 h-4 inline-block align-middle mr-1">
                  <AvatarImage
                    src={`${AUTUMN_URL}/avatars/${user.avatar._id}`}
                  />
                </Avatar>
              )}
              {user?.username}{" "}
              {message.edited && (
                <Pencil size={12} className="inline align-middle" />
              )}
            </div>
          )}
          <div className="flex-[2] min-w-0 overflow-ellipsis overflow-hidden text-left">
            {message.attachments?.length || message.embeds?.length ? (
              <ImageIcon size={12} className="inline align-middle" />
            ) : null}{" "}
            {message.content ?? <span className="text-gray-500">No text.</span>}
          </div>
        </div>
      </AlertDialogTrigger>
      <AlertDialogContent className="max-h-[100vh] overflow-y-auto">
        <AlertDialogHeader className="min-w-0">
          <AlertDialogTitle>
            {user?.avatar && (
              <Avatar className="inline-block align-middle mr-1">
                <AvatarImage src={`${AUTUMN_URL}/avatars/${user.avatar._id}`} />
              </Avatar>
            )}{" "}
            {user?.username}#{user?.discriminator}
          </AlertDialogTitle>
          <AlertDialogDescription className="flex flex-col gap-2 max-w-full">
            {message.content && <span>{message.content}</span>}
            {message.attachments?.map((attachment) =>
              attachment.metadata.type === "Image" ? (
                <a
                  target="_blank"
                  className="w-fit"
                  key={attachment._id}
                  href={`${AUTUMN_URL}/attachments/${attachment._id}`}
                >
                  <img
                    className="max-h-[240px] object-contain"
                    src={`${AUTUMN_URL}/attachments/${attachment._id}`}
                  />
                </a>
              ) : (
                "unsupported"
              )
            )}
            {message.embeds?.map((embed, index) => (
              <pre key={index} className="overflow-auto max-w-full">
                <code>{JSON.stringify(embed, null, 2)}</code>
              </pre>
            ))}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <Link href={`/panel/inspect/user/${message.author}`}>
            <AlertDialogCancel>Author</AlertDialogCancel>
          </Link>
          <Link href={`/panel/inspect/message/${message._id}`}>
            <AlertDialogCancel>Inspect</AlertDialogCancel>
          </Link>
          <AlertDialogAction>Close</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}