aragrp/components/changelog-panel.tsx

"use client";

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { ChangelogVersionCard } from "@/components/changelog-version-card";
import type { ChangelogRelease } from "@/lib/changelog-types";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";
import { APP_VERSION } from "@/lib/version";

type ChangelogPanelProps = {
  releases: ChangelogRelease[];
};

export function ChangelogPanel({ releases }: ChangelogPanelProps) {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <button
          type="button"
          title="مشاهده تاریخچه تغییرات"
          className={cn(
            type.caption,
            "mt-2 block text-center transition-colors hover:text-foreground"
          )}
        >
          نسخه {APP_VERSION}
        </button>
      </SheetTrigger>

      <SheetContent
        side="left"
        closePosition="start"
        className="flex w-full flex-col gap-0 p-0 sm:max-w-lg"
      >
        <SheetHeader className="shrink-0 border-b px-4 py-4 text-start">
          <SheetTitle className={type.h4}>تاریخچه نسخه‌ها</SheetTitle>
          <SheetDescription className={type.caption}>
            نسخه فعلی:{" "}
            <span className="font-mono font-medium text-foreground">
              v{APP_VERSION}
            </span>
          </SheetDescription>
        </SheetHeader>

        <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
          {releases.map((release) => (
            <ChangelogVersionCard key={release.version} release={release} />
          ))}
        </div>
      </SheetContent>
    </Sheet>
  );
}