From 9a9cd8e6a5176230e970c44062656aef81aa245d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 30 Dec 2025 00:16:45 +0200
Subject: [PATCH] feat(right_pane): add count in title for PDF items

---
 apps/client/src/translations/en/translation.json   |  8 ++++++++
 apps/client/src/widgets/sidebar/PdfAttachments.tsx |  3 ++-
 apps/client/src/widgets/sidebar/PdfLayers.tsx      |  3 ++-
 apps/client/src/widgets/sidebar/PdfPages.tsx       | 13 +++++++------
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 7712ee91a..76c293a76 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -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"
   }
 }
diff --git a/apps/client/src/widgets/sidebar/PdfAttachments.tsx b/apps/client/src/widgets/sidebar/PdfAttachments.tsx
index a9ef8c74e..3b6c21e71 100644
--- a/apps/client/src/widgets/sidebar/PdfAttachments.tsx
+++ b/apps/client/src/widgets/sidebar/PdfAttachments.tsx
@@ -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
diff --git a/apps/client/src/widgets/sidebar/PdfLayers.tsx b/apps/client/src/widgets/sidebar/PdfLayers.tsx
index 407b188f5..48143bf2d 100644
--- a/apps/client/src/widgets/sidebar/PdfLayers.tsx
+++ b/apps/client/src/widgets/sidebar/PdfLayers.tsx
@@ -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
diff --git a/apps/client/src/widgets/sidebar/PdfPages.tsx b/apps/client/src/widgets/sidebar/PdfPages.tsx
index 014001875..8b1eeaafd 100644
--- a/apps/client/src/widgets/sidebar/PdfPages.tsx
+++ b/apps/client/src/widgets/sidebar/PdfPages.tsx
@@ -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);
         }