gerbeur/src/components/playlist/PlaylistCard.tsx

import { Link, useNavigate } from "react-router";
import { t } from "@lingui/core/macro";
import { Plural, Trans } from "@lingui/react/macro";
import type { Playlist } from "../../model.ts";
import { relativeTime } from "../../utils/shared/relativeTime.ts";
import { playlistImageUrl, playlistUrl } from "../../utils/shared/urls.ts";
import {
  isPlaylistVisited,
  isRecent,
  markPlaylistVisited,
} from "../../utils/shared/visited.ts";
import { Tooltip } from "../shared/Tooltip.tsx";

interface PlaylistCardProps {
  playlist: Playlist;
  onDelete?: () => void;
  isOwner?: boolean;
}

export function PlaylistCard(
  { playlist, onDelete, isOwner }: PlaylistCardProps,
) {
  const navigate = useNavigate();
  const unread = !isOwner && isRecent(playlist.createdAt) &&
    !isPlaylistVisited(playlist.id);

  function handleNavigate() {
    markPlaylistVisited(playlist.id);
    navigate(playlistUrl(playlist));
  }

  return (
    <li className="playlist-card">
      <div
        className="playlist-card-inner"
        onClick={handleNavigate}
      >
        <div className="playlist-card-preview">
          {playlist.imageMime
            ? (
              <img
                src={playlistImageUrl(playlist)}
                alt=""
                className="playlist-card-img"
                loading="lazy"
                decoding="async"
              />
            )
            : <span className="playlist-card-icon">📋</span>}
        </div>
        <div className="playlist-card-body">
          <Link
            to={playlistUrl(playlist)}
            className="playlist-card-title"
            onClick={(e) => {
              e.stopPropagation();
              markPlaylistVisited(playlist.id);
            }}
          >
            {unread && <span className="unread-dot" aria-hidden="true" />}
            {playlist.title}
          </Link>
          {playlist.description && (
            <p className="playlist-card-description">{playlist.description}</p>
          )}
          <div className="playlist-card-meta">
            <span
              className={`playlist-badge${
                playlist.isPublic ? "" : " playlist-badge--private"
              }`}
            >
              {playlist.isPublic
                ? <Trans>public</Trans>
                : <Trans>private</Trans>}
            </span>
            {playlist.ownerUsername && !isOwner && (
              <Link
                to={`/users/${playlist.ownerUsername}`}
                className="playlist-card-owner"
                onClick={(e) => e.stopPropagation()}
              >
                @{playlist.ownerUsername}
              </Link>
            )}
            {playlist.dumpCount !== undefined && (
              <span className="playlist-card-count">
                <Plural
                  value={playlist.dumpCount}
                  one="# dump"
                  other="# dumps"
                />
              </span>
            )}
            <Tooltip text={playlist.createdAt.toLocaleString()}>
              <time dateTime={playlist.createdAt.toISOString()}>
                {relativeTime(playlist.createdAt)}
              </time>
            </Tooltip>
          </div>
        </div>
      </div>
      {onDelete && (
        <button
          type="button"
          className="playlist-card-delete-btn"
          onClick={(e) => {
            e.stopPropagation();
            onDelete();
          }}
          aria-label={t`Delete playlist`}
        >
          ✕
        </button>
      )}
    </li>
  );
}