feat(right_pane): add count in title for PDF items

This commit is contained in:
Elian Doran 2025-12-30 00:16:45 +02:00
parent f5a89aa81a
commit 9a9cd8e6a5
No known key found for this signature in database
4 changed files with 19 additions and 8 deletions

View File

@ -2234,5 +2234,13 @@
"empty_button": "Hide the panel",
"toggle": "Toggle right panel",
"custom_widget_go_to_source": "Go to source code"
},
"pdf": {
"attachments_one": "{{count}} attachment",
"attachments_other": "{{count}} attachments",
"layers_one": "{{count}} layer",
"layers_other": "{{count}} layers",
"pages_one": "{{count}} page",
"pages_other": "{{count}} pages"
}
}

View File

@ -1,5 +1,6 @@
import "./PdfAttachments.css";
import { t } from "../../services/i18n";
import { formatSize } from "../../services/utils";
import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../react/hooks";
import Icon from "../react/Icon";
@ -25,7 +26,7 @@ export default function PdfAttachments() {
}
return (
<RightPanelWidget id="pdf-attachments" title="Attachments">
<RightPanelWidget id="pdf-attachments" title={t("pdf.attachments", { count: attachmentsData.attachments.length })}>
<div className="pdf-attachments-list">
{attachmentsData.attachments.map((attachment) => (
<PdfAttachmentItem

View File

@ -1,5 +1,6 @@
import "./PdfLayers.css";
import { t } from "../../services/i18n";
import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../react/hooks";
import Icon from "../react/Icon";
import RightPanelWidget from "./RightPanelWidget";
@ -21,7 +22,7 @@ export default function PdfLayers() {
}
return (layersData?.layers && layersData.layers.length > 0 &&
<RightPanelWidget id="pdf-layers" title="Layers">
<RightPanelWidget id="pdf-layers" title={t("pdf.layers", { count: layersData.layers.length })}>
<div className="pdf-layers-list">
{layersData.layers.map((layer) => (
<PdfLayerItem

View File

@ -2,6 +2,8 @@ import "./PdfPages.css";
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { NoteContextDataMap } from "../../components/note_context";
import { t } from "../../services/i18n";
import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../react/hooks";
import RightPanelWidget from "./RightPanelWidget";
@ -9,20 +11,20 @@ export default function PdfPages() {
const { note } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type");
const noteMime = useNoteProperty(note, "mime");
const pagesData = useGetContextData("pdfPages");
if (noteType !== "file" || noteMime !== "application/pdf") {
return null;
}
return (
<RightPanelWidget id="pdf-pages" title="Pages" grow>
<PdfPagesList key={note?.noteId} />
return (pagesData &&
<RightPanelWidget id="pdf-pages" title={t("pdf.pages", { count: pagesData?.totalPages || 0 })} grow>
<PdfPagesList key={note?.noteId} pagesData={pagesData} />
</RightPanelWidget>
);
}
function PdfPagesList() {
const pagesData = useGetContextData("pdfPages");
function PdfPagesList({ pagesData }: { pagesData: NoteContextDataMap["pdfPages"] }) {
const [thumbnails, setThumbnails] = useState<Map<number, string>>(new Map());
const requestedThumbnails = useRef<Set<number>>(new Set());
@ -42,7 +44,6 @@ function PdfPagesList() {
const requestThumbnail = useCallback((pageNumber: number) => {
// Only request if we haven't already requested it and don't have it
if (!requestedThumbnails.current.has(pageNumber) && !thumbnails.has(pageNumber) && pagesData) {
console.log("[PdfPages] Requesting thumbnail for page:", pageNumber);
requestedThumbnails.current.add(pageNumber);
pagesData.requestThumbnail(pageNumber);
}