feat: pdf reader

frontend/src/components/reader/PdfLimitationsNotice.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18n-lite";
+
+const DISMISS_KEY = "cloud-reader.pdf-limitations-dismissed";
+
+interface PdfLimitationsNoticeProps {
+  bookId: number;
+}
+
+export function PdfLimitationsNotice({ bookId }: PdfLimitationsNoticeProps) {
+  const { t } = useTranslation();
+  const storageKey = `${DISMISS_KEY}:${bookId}`;
+  const [visible, setVisible] = useState(() => {
+    try {
+      return localStorage.getItem(storageKey) !== "1";
+    } catch {
+      return true;
+    }
+  });
+
+  if (!visible) return null;
+
+  const dismiss = () => {
+    setVisible(false);
+    try {
+      localStorage.setItem(storageKey, "1");
+    } catch {
+      /* ignore */
+    }
+  };
+
+  return (
+    <div className="reader-pdf-notice" role="status">
+      <div className="reader-pdf-notice-text">
+        <strong className="reader-pdf-notice-title">{t("reader.pdfLimitationsTitle")}</strong>
+        <p className="reader-pdf-notice-body">{t("reader.pdfLimitationsBody")}</p>
+      </div>
+      <button
+        type="button"
+        className="reader-pdf-notice-dismiss"
+        onClick={dismiss}
+        aria-label={t("reader.pdfLimitationsDismissAria")}
+      >
+        {t("common.dismiss")}
+      </button>
+    </div>
+  );
+}