chore: remove LLM generated doc

apps/client/src/components/app_context.ts

@@ -473,6 +473,11 @@ type EventMappings = {
     noteContextRemoved: {
         ntxIds: string[];
     };
+    contextDataChanged: {
+        noteContext: NoteContext;
+        key: string;
+        value: unknown;
+    };
     exportSvg: { ntxId: string | null | undefined; };
     exportPng: { ntxId: string | null | undefined; };
     geoMapCreateChildNote: {

apps/client/src/components/note_context.ts

@@ -12,6 +12,7 @@ import server from "../services/server.js";
 import treeService from "../services/tree.js";
 import utils from "../services/utils.js";
 import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type { HeadingContext } from "../widgets/sidebar/TableOfContents.js";
 import appContext, { type EventData, type EventListener } from "./app_context.js";
 import Component from "./component.js";
 
@@ -22,6 +23,26 @@ export interface SetNoteOpts {
 
 export type GetTextEditorCallback = (editor: CKTextEditor) => void;
 
+export interface NoteContextDataMap {
+    toc: HeadingContext;
+    pdfPages: {
+        totalPages: number;
+        currentPage: number;
+        scrollToPage(page: number): void;
+        requestThumbnail(page: number): void;
+    };
+    pdfAttachments: {
+        attachments: Array<{ filename: string; size: number }>;
+        downloadAttachment(filename: string): void;
+    };
+    pdfLayers: {
+        layers: Array<{ id: string; name: string; visible: boolean }>;
+        toggleLayer(layerId: string, visible: boolean): void;
+    };
+}
+
+type ContextDataKey = keyof NoteContextDataMap;
+
 class NoteContext extends Component implements EventListener<"entitiesReloaded"> {
     ntxId: string | null;
     hoistedNoteId: string;
@@ -32,6 +53,13 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     parentNoteId?: string | null;
     viewScope?: ViewScope;
 
+    /**
+     * Metadata storage for UI components (e.g., table of contents, PDF page list, code outline).
+     * This allows type widgets to publish data that sidebar/toolbar components can consume.
+     * Data is automatically cleared when navigating to a different note.
+     */
+    private contextData: Map<string, unknown> = new Map();
+
     constructor(ntxId: string | null = null, hoistedNoteId: string = "root", mainNtxId: string | null = null) {
         super();
 
@@ -91,6 +119,17 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         this.viewScope = opts.viewScope;
         ({ noteId: this.noteId, parentNoteId: this.parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(resolvedNotePath));
 
+        // Clear context data when switching notes and notify subscribers
+        const oldKeys = Array.from(this.contextData.keys());
+        this.contextData.clear();
+        for (const key of oldKeys) {
+            this.triggerEvent("contextDataChanged", {
+                noteContext: this,
+                key,
+                value: undefined
+            });
+        }
+
         this.saveToRecentNotes(resolvedNotePath);
 
         protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
@@ -443,6 +482,52 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         return title;
     }
+
+    /**
+     * Set metadata for this note context (e.g., table of contents, PDF pages, code outline).
+     * This data can be consumed by sidebar/toolbar components.
+     *
+     * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages", "codeOutline")
+     * @param value - The data to store (will be cleared when switching notes)
+     */
+    setContextData<K extends ContextDataKey>(key: K, value: NoteContextDataMap[K]): void {
+        this.contextData.set(key, value);
+        // Trigger event so subscribers can react
+        this.triggerEvent("contextDataChanged", {
+            noteContext: this,
+            key,
+            value
+        });
+    }
+
+    /**
+     * Get metadata for this note context.
+     *
+     * @param key - The data key to retrieve
+     * @returns The stored data, or undefined if not found
+     */
+    getContextData<K extends ContextDataKey>(key: K): NoteContextDataMap[K] | undefined {
+        return this.contextData.get(key) as NoteContextDataMap[K] | undefined;
+    }
+
+    /**
+     * Check if context data exists for a given key.
+     */
+    hasContextData(key: ContextDataKey): boolean {
+        return this.contextData.has(key);
+    }
+
+    /**
+     * Clear specific context data.
+     */
+    clearContextData(key: ContextDataKey): void {
+        this.contextData.delete(key);
+        this.triggerEvent("contextDataChanged", {
+            noteContext: this,
+            key,
+            value: undefined
+        });
+    }
 }
 
 export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {

apps/client/src/services/utils.ts

@@ -187,13 +187,15 @@ export function formatSize(size: number | null | undefined) {
         return "";
     }
 
-    size = Math.max(Math.round(size / 1024), 1);
-
-    if (size < 1024) {
-        return `${size} KiB`;
+    if (size === 0) {
+        return "0 B";
     }
-    return `${Math.round(size / 102.4) / 10} MiB`;
 
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(size) / Math.log(k));
+
+    return `${Math.round((size / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
 }
 
 function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {

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"
   }
 }

apps/client/src/types-pdfjs.d.ts

@@ -1,3 +0,0 @@
-interface Window {
-    TRILIUM_VIEW_HISTORY_STORE?: object;
-}

apps/client/src/widgets/collections/NoteList.tsx

@@ -11,8 +11,7 @@ import froca from "../../services/froca";
 import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } from "../../services/ws";
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent } from "../react/hooks";
 import { allViewTypes, ViewModeMedia, ViewModeProps, ViewTypeOptions } from "./interface";
-import ViewModeStorage, { type ViewModeStorageType } from "./view_mode_storage";
-
+import ViewModeStorage from "./view_mode_storage";
 interface NoteListProps {
     note: FNote | null | undefined;
     notePath: string | null | undefined;
@@ -216,7 +215,7 @@ export function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOpt
     return noteIds;
 }
 
-export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewModeStorageType | undefined) {
+export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined) {
     const [ viewConfig, setViewConfig ] = useState<{
         config: T | undefined;
         storeFn: (data: T) => void;

apps/client/src/widgets/collections/view_mode_storage.ts

@@ -4,16 +4,14 @@ import { ViewTypeOptions } from "../collections/interface";
 
 const ATTACHMENT_ROLE = "viewConfig";
 
-export type ViewModeStorageType = ViewTypeOptions | "pdfHistory";
-
 export default class ViewModeStorage<T extends object> {
 
     private note: FNote;
     private attachmentName: string;
 
-    constructor(note: FNote, viewType: ViewModeStorageType) {
+    constructor(note: FNote, viewType: ViewTypeOptions) {
         this.note = note;
-        this.attachmentName = `${viewType}.json`;
+        this.attachmentName = viewType + ".json";
     }
 
     async store(data: T) {

apps/client/src/widgets/react/hooks.tsx

@@ -8,7 +8,7 @@ import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayou
 
 import appContext, { EventData, EventNames } from "../../components/app_context";
 import Component from "../../components/component";
-import NoteContext from "../../components/note_context";
+import NoteContext, { NoteContextDataMap } from "../../components/note_context";
 import FBlob from "../../entities/fblob";
 import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
@@ -1192,3 +1192,113 @@ export function useContentElement(noteContext: NoteContext | null | undefined) {
 
     return contentElement;
 }
+
+/**
+ * Set context data on the current note context.
+ * This allows type widgets to publish data (e.g., table of contents, PDF pages)
+ * that can be consumed by sidebar/toolbar components.
+ *
+ * Data is automatically cleared when navigating to a different note.
+ *
+ * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages")
+ * @param value - The data to publish
+ *
+ * @example
+ * // In a PDF viewer widget:
+ * const { noteContext } = useActiveNoteContext();
+ * useSetContextData(noteContext, "pdfPages", pages);
+ */
+export function useSetContextData<K extends keyof NoteContextDataMap>(
+    noteContext: NoteContext | null | undefined,
+    key: K,
+    value: NoteContextDataMap[K] | undefined
+) {
+    const valueRef = useRef<NoteContextDataMap[K] | undefined>(value);
+    valueRef.current = value;
+
+    useEffect(() => {
+        if (!noteContext || valueRef.current === undefined) return;
+
+        noteContext.setContextData(key, valueRef.current);
+
+        return () => {
+            noteContext.clearContextData(key);
+        };
+    }, [noteContext, key]);
+
+    // Update when value changes
+    useEffect(() => {
+        if (!noteContext || value === undefined) return;
+        noteContext.setContextData(key, value);
+    }, [noteContext, key, value]);
+}
+
+/**
+ * Get context data from the active note context.
+ * This is typically used in sidebar/toolbar components that need to display
+ * data published by type widgets.
+ *
+ * The component will automatically re-render when the data changes.
+ *
+ * @param key - The data key to retrieve (e.g., "toc", "pdfPages")
+ * @returns The current data, or undefined if not available
+ *
+ * @example
+ * // In a Table of Contents sidebar widget:
+ * function TableOfContents() {
+ *   const headings = useGetContextData<Heading[]>("toc");
+ *   if (!headings) return <div>No headings available</div>;
+ *   return <ul>{headings.map(h => <li>{h.text}</li>)}</ul>;
+ * }
+ */
+export function useGetContextData<K extends keyof NoteContextDataMap>(key: K): NoteContextDataMap[K] | undefined {
+    const { noteContext } = useActiveNoteContext();
+    const [data, setData] = useState<NoteContextDataMap[K] | undefined>(() =>
+        noteContext?.getContextData(key)
+    );
+
+    // Update initial value when noteContext changes
+    useEffect(() => {
+        setData(noteContext?.getContextData(key));
+    }, [noteContext, key]);
+
+    // Subscribe to changes via Trilium event system
+    useTriliumEvent("contextDataChanged", ({ noteContext: eventNoteContext, key: changedKey, value }) => {
+        if (eventNoteContext === noteContext && changedKey === key) {
+            setData(value as NoteContextDataMap[K]);
+        }
+    });
+
+    return data;
+}
+
+/**
+ * Get context data from a specific note context (not necessarily the active one).
+ *
+ * @param noteContext - The specific note context to get data from
+ * @param key - The data key to retrieve
+ * @returns The current data, or undefined if not available
+ */
+export function useGetContextDataFrom<K extends keyof NoteContextDataMap>(
+    noteContext: NoteContext | null | undefined,
+    key: K
+): NoteContextDataMap[K] | undefined {
+    const [data, setData] = useState<NoteContextDataMap[K] | undefined>(() =>
+        noteContext?.getContextData(key)
+    );
+
+    // Update initial value when noteContext changes
+    useEffect(() => {
+        setData(noteContext?.getContextData(key));
+    }, [noteContext, key]);
+
+    // Subscribe to changes via Trilium event system
+    useTriliumEvent("contextDataChanged", ({ noteContext: eventNoteContext, key: changedKey, value }) => {
+        if (eventNoteContext === noteContext && changedKey === key) {
+            setData(value as NoteContextDataMap[K]);
+        }
+    });
+
+    return data;
+}
+

apps/client/src/widgets/sidebar/RightPanelContainer.tsx

@@ -15,6 +15,9 @@ import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent
 import Icon from "../react/Icon";
 import LegacyRightPanelWidget from "../right_panel_widget";
 import HighlightsList from "./HighlightsList";
+import PdfAttachments from "./pdf/PdfAttachments";
+import PdfLayers from "./pdf/PdfLayers";
+import PdfPages from "./pdf/PdfPages";
 import RightPanelWidget from "./RightPanelWidget";
 import TableOfContents from "./TableOfContents";
 
@@ -57,13 +60,27 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
 function useItems(rightPaneVisible: boolean, widgetsByParent: WidgetsByParent) {
     const { note } = useActiveNoteContext();
     const noteType = useNoteProperty(note, "type");
+    const noteMime = useNoteProperty(note, "mime");
     const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
+    const isPdf = noteType === "file" && noteMime === "application/pdf";
 
     if (!rightPaneVisible) return [];
     const definitions: RightPanelWidgetDefinition[] = [
         {
             el: <TableOfContents />,
-            enabled: (noteType === "text" || noteType === "doc"),
+            enabled: (noteType === "text" || noteType === "doc" || isPdf),
+        },
+        {
+            el: <PdfPages />,
+            enabled: isPdf,
+        },
+        {
+            el: <PdfAttachments />,
+            enabled: isPdf,
+        },
+        {
+            el: <PdfLayers />,
+            enabled: isPdf,
         },
         {
             el: <HighlightsList />,

apps/client/src/widgets/sidebar/TableOfContents.css

@@ -29,6 +29,11 @@
     hyphens: auto;
 }
 
+.toc li.active > .item-content {
+    font-weight: bold;
+    color: var(--main-text-color);
+}
+
 .toc > ol {
     --toc-depth-level: 1;
 }

apps/client/src/widgets/sidebar/TableOfContents.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 
 import { t } from "../../services/i18n";
 import { randomString } from "../../services/utils";
-import { useActiveNoteContext, useContentElement, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
+import { useActiveNoteContext, useContentElement, useGetContextData, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
 import Icon from "../react/Icon";
 import RightPanelWidget from "./RightPanelWidget";
 
@@ -21,29 +21,50 @@ interface HeadingsWithNesting extends RawHeading {
     children: HeadingsWithNesting[];
 }
 
+export interface HeadingContext {
+    scrollToHeading(heading: RawHeading): void;
+    headings: RawHeading[];
+    activeHeadingId?: string | null;
+}
+
 export default function TableOfContents() {
     const { note, noteContext } = useActiveNoteContext();
     const noteType = useNoteProperty(note, "type");
+    const noteMime = useNoteProperty(note, "mime");
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
 
     return (
         <RightPanelWidget id="toc" title={t("toc.table_of_contents")} grow>
             {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextTableOfContents />}
             {noteType === "text" && !isReadOnly && <EditableTextTableOfContents />}
+            {noteType === "file" && noteMime === "application/pdf" && <PdfTableOfContents />}
         </RightPanelWidget>
     );
 }
 
-function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading }: {
+function PdfTableOfContents() {
+    const data = useGetContextData("toc");
+
+    return (
+        <AbstractTableOfContents
+            headings={data?.headings || []}
+            scrollToHeading={data?.scrollToHeading || (() => {})}
+            activeHeadingId={data?.activeHeadingId}
+        />
+    );
+}
+
+function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading, activeHeadingId }: {
     headings: T[];
     scrollToHeading(heading: T): void;
+    activeHeadingId?: string | null;
 }) {
     const nestedHeadings = buildHeadingTree(headings);
     return (
         <span className="toc">
             {nestedHeadings.length > 0 ? (
                 <ol>
-                    {nestedHeadings.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} />)}
+                    {nestedHeadings.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
                 </ol>
             ) : (
                 <div className="no-headings">{t("toc.no_headings")}</div>
@@ -52,14 +73,16 @@ function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeadi
     );
 }
 
-function TableOfContentsHeading({ heading, scrollToHeading }: {
+function TableOfContentsHeading({ heading, scrollToHeading, activeHeadingId }: {
     heading: HeadingsWithNesting;
     scrollToHeading(heading: RawHeading): void;
+    activeHeadingId?: string | null;
 }) {
     const [ collapsed, setCollapsed ] = useState(false);
+    const isActive = heading.id === activeHeadingId;
     return (
         <>
-            <li className={clsx(collapsed && "collapsed")}>
+            <li className={clsx(collapsed && "collapsed", isActive && "active")}>
                 {heading.children.length > 0 && (
                     <Icon
                         className="collapse-button"
@@ -74,7 +97,7 @@ function TableOfContentsHeading({ heading, scrollToHeading }: {
             </li>
             {heading.children && (
                 <ol>
-                    {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} />)}
+                    {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
                 </ol>
             )}
         </>

apps/client/src/widgets/sidebar/pdf/PdfAttachments.css

@@ -0,0 +1,57 @@
+.pdf-attachments-list {
+    width: 100%;
+}
+
+.pdf-attachment-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--main-border-color);
+    transition: background-color 0.2s;
+}
+
+.pdf-attachment-item:hover {
+    background-color: var(--hover-item-background-color);
+}
+
+.pdf-attachment-item:last-child {
+    border-bottom: none;
+}
+
+.pdf-attachment-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.pdf-attachment-filename {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--main-text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.pdf-attachment-size {
+    font-size: 11px;
+    color: var(--muted-text-color);
+    margin-top: 2px;
+}
+
+.no-attachments {
+    padding: 16px;
+    text-align: center;
+    color: var(--muted-text-color);
+}
+
+.pdf-attachment-item .bx {
+    flex-shrink: 0;
+    font-size: 18px;
+    color: var(--muted-text-color);
+}
+
+.pdf-attachment-item:hover .bx {
+    color: var(--main-text-color);
+}

apps/client/src/widgets/sidebar/pdf/PdfAttachments.tsx

@@ -0,0 +1,62 @@
+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";
+import RightPanelWidget from "../RightPanelWidget";
+
+interface AttachmentInfo {
+    filename: string;
+    size: number;
+}
+
+export default function PdfAttachments() {
+    const { note } = useActiveNoteContext();
+    const noteType = useNoteProperty(note, "type");
+    const noteMime = useNoteProperty(note, "mime");
+    const attachmentsData = useGetContextData("pdfAttachments");
+
+    if (noteType !== "file" || noteMime !== "application/pdf") {
+        return null;
+    }
+
+    if (!attachmentsData || attachmentsData.attachments.length === 0) {
+        return null;
+    }
+
+    return (
+        <RightPanelWidget id="pdf-attachments" title={t("pdf.attachments", { count: attachmentsData.attachments.length })}>
+            <div className="pdf-attachments-list">
+                {attachmentsData.attachments.map((attachment) => (
+                    <PdfAttachmentItem
+                        key={attachment.filename}
+                        attachment={attachment}
+                        onDownload={attachmentsData.downloadAttachment}
+                    />
+                ))}
+            </div>
+        </RightPanelWidget>
+    );
+}
+
+function PdfAttachmentItem({
+    attachment,
+    onDownload
+}: {
+    attachment: AttachmentInfo;
+    onDownload: (filename: string) => void;
+}) {
+    const sizeText = formatSize(attachment.size);
+
+    return (
+        <div className="pdf-attachment-item" onClick={() => onDownload(attachment.filename)}>
+            <Icon icon="bx bx-paperclip" />
+            <div className="pdf-attachment-info">
+                <div className="pdf-attachment-filename">{attachment.filename}</div>
+                <div className="pdf-attachment-size">{sizeText}</div>
+            </div>
+            <Icon icon="bx bx-download" />
+        </div>
+    );
+}

apps/client/src/widgets/sidebar/pdf/PdfLayers.css

@@ -0,0 +1,54 @@
+.pdf-layers-list {
+    width: 100%;
+}
+
+.pdf-layer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--main-border-color);
+    transition: background-color 0.2s;
+}
+
+.pdf-layer-item:hover {
+    background-color: var(--hover-item-background-color);
+}
+
+.pdf-layer-item:last-child {
+    border-bottom: none;
+}
+
+.pdf-layer-item.hidden {
+    opacity: 0.5;
+}
+
+.pdf-layer-name {
+    flex: 1;
+    font-size: 13px;
+    color: var(--main-text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.no-layers {
+    padding: 16px;
+    text-align: center;
+    color: var(--muted-text-color);
+}
+
+.pdf-layer-item .bx {
+    flex-shrink: 0;
+    font-size: 18px;
+    color: var(--muted-text-color);
+}
+
+.pdf-layer-item:hover .bx {
+    color: var(--main-text-color);
+}
+
+.pdf-layer-item.visible .bx {
+    color: var(--main-text-color);
+}

apps/client/src/widgets/sidebar/pdf/PdfLayers.tsx

@@ -0,0 +1,55 @@
+import "./PdfLayers.css";
+
+import { t } from "../../../services/i18n";
+import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../../react/hooks";
+import Icon from "../../react/Icon";
+import RightPanelWidget from "../RightPanelWidget";
+
+interface LayerInfo {
+    id: string;
+    name: string;
+    visible: boolean;
+}
+
+export default function PdfLayers() {
+    const { note } = useActiveNoteContext();
+    const noteType = useNoteProperty(note, "type");
+    const noteMime = useNoteProperty(note, "mime");
+    const layersData = useGetContextData("pdfLayers");
+
+    if (noteType !== "file" || noteMime !== "application/pdf") {
+        return null;
+    }
+
+    return (layersData?.layers && layersData.layers.length > 0 &&
+        <RightPanelWidget id="pdf-layers" title={t("pdf.layers", { count: layersData.layers.length })}>
+            <div className="pdf-layers-list">
+                {layersData.layers.map((layer) => (
+                    <PdfLayerItem
+                        key={layer.id}
+                        layer={layer}
+                        onToggle={layersData.toggleLayer}
+                    />
+                ))}
+            </div>
+        </RightPanelWidget>
+    );
+}
+
+function PdfLayerItem({
+    layer,
+    onToggle
+}: {
+    layer: LayerInfo;
+    onToggle: (layerId: string, visible: boolean) => void;
+}) {
+    return (
+        <div
+            className={`pdf-layer-item ${layer.visible ? 'visible' : 'hidden'}`}
+            onClick={() => onToggle(layer.id, !layer.visible)}
+        >
+            <Icon icon={layer.visible ? "bx bx-show" : "bx bx-hide"} />
+            <div className="pdf-layer-name">{layer.name}</div>
+        </div>
+    );
+}

apps/client/src/widgets/sidebar/pdf/PdfPages.css

@@ -0,0 +1,70 @@
+.pdf-pages-list {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 8px;
+    padding: 8px;
+    align-content: flex-start;
+}
+
+.pdf-page-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+    position: relative;
+
+    .pdf-page-number {
+        font-size: 12px;
+        margin-bottom: 4px;
+        color: var(--main-text-color);
+        position: absolute;
+        bottom: 1em;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: var(--accented-background-color);
+        padding: 0.2em 0.5em;
+        border-radius: 4px;
+    }
+}
+
+.pdf-page-item:hover {
+    background-color: var(--hover-item-background-color);
+}
+
+.pdf-page-item.active {
+    border-color: var(--main-border-color);
+    background-color: var(--active-item-background-color);
+}
+
+.pdf-page-thumbnail {
+    width: 100%;
+    aspect-ratio: 8.5 / 11; /* Standard page ratio */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--accented-background-color);
+    border: 1px solid var(--main-border-color);
+}
+
+.pdf-page-thumbnail img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.pdf-page-loading {
+    color: var(--muted-text-color);
+    font-size: 11px;
+}
+
+.no-pages {
+    padding: 16px;
+    text-align: center;
+    color: var(--muted-text-color);
+}

apps/client/src/widgets/sidebar/pdf/PdfPages.tsx

@@ -0,0 +1,111 @@
+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";
+
+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 (pagesData &&
+        <RightPanelWidget id="pdf-pages" title={t("pdf.pages", { count: pagesData?.totalPages || 0 })} grow>
+            <PdfPagesList key={note?.noteId} pagesData={pagesData} />
+        </RightPanelWidget>
+    );
+}
+
+function PdfPagesList({ pagesData }: { pagesData: NoteContextDataMap["pdfPages"] }) {
+    const [thumbnails, setThumbnails] = useState<Map<number, string>>(new Map());
+    const requestedThumbnails = useRef<Set<number>>(new Set());
+
+    useEffect(() => {
+        // Listen for thumbnail responses via custom event
+        function handleThumbnail(event: CustomEvent) {
+            const { pageNumber, dataUrl } = event.detail;
+            setThumbnails(prev => new Map(prev).set(pageNumber, dataUrl));
+        }
+
+        window.addEventListener("pdf-thumbnail", handleThumbnail as EventListener);
+        return () => {
+            window.removeEventListener("pdf-thumbnail", handleThumbnail as EventListener);
+        };
+    }, []);
+
+    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) {
+            requestedThumbnails.current.add(pageNumber);
+            pagesData.requestThumbnail(pageNumber);
+        }
+    }, [pagesData, thumbnails]);
+
+    if (!pagesData || pagesData.totalPages === 0) {
+        return <div className="no-pages">No pages available</div>;
+    }
+
+    const pages = Array.from({ length: pagesData.totalPages }, (_, i) => i + 1);
+
+    return (
+        <div className="pdf-pages-list">
+            {pages.map(pageNumber => (
+                <PdfPageItem
+                    key={pageNumber}
+                    pageNumber={pageNumber}
+                    isActive={pageNumber === pagesData.currentPage}
+                    thumbnail={thumbnails.get(pageNumber)}
+                    onRequestThumbnail={requestThumbnail}
+                    onPageClick={() => pagesData.scrollToPage(pageNumber)}
+                />
+            ))}
+        </div>
+    );
+}
+
+function PdfPageItem({
+    pageNumber,
+    isActive,
+    thumbnail,
+    onRequestThumbnail,
+    onPageClick
+}: {
+    pageNumber: number;
+    isActive: boolean;
+    thumbnail?: string;
+    onRequestThumbnail(page: number): void;
+    onPageClick(): void;
+}) {
+    const hasRequested = useRef(false);
+
+    useEffect(() => {
+        if (!thumbnail && !hasRequested.current) {
+            hasRequested.current = true;
+            onRequestThumbnail(pageNumber);
+        }
+    }, [pageNumber, thumbnail, onRequestThumbnail]);
+
+    return (
+        <div
+            className={`pdf-page-item ${isActive ? 'active' : ''}`}
+            onClick={onPageClick}
+        >
+            <div className="pdf-page-number">{pageNumber}</div>
+            <div className="pdf-page-thumbnail">
+                {thumbnail ? (
+                    <img src={thumbnail} alt={`Page ${pageNumber}`} />
+                ) : (
+                    <div className="pdf-page-loading">Loading...</div>
+                )}
+            </div>
+        </div>
+    );
+}

apps/client/src/widgets/type_widgets/File.tsx

@@ -10,13 +10,13 @@ import { TypeWidgetProps } from "./type_widget";
 
 const TEXT_MAX_NUM_CHARS = 5000;
 
-export default function FileTypeWidget({ note, parentComponent }: TypeWidgetProps) {
+export default function FileTypeWidget({ note, parentComponent, noteContext }: TypeWidgetProps) {
     const blob = useNoteBlob(note, parentComponent?.componentId);
 
     if (blob?.content) {
         return <TextPreview content={blob.content} />;
     } else if (note.mime === "application/pdf") {
-        return <PdfPreview blob={blob} note={note} componentId={parentComponent?.componentId} />;
+        return <PdfPreview blob={blob} note={note} componentId={parentComponent?.componentId} noteContext={noteContext} />;
     } else if (note.mime.startsWith("video/")) {
         return <VideoPreview note={note} />;
     } else if (note.mime.startsWith("audio/")) {

apps/client/src/widgets/type_widgets/file/Pdf.tsx

@@ -1,11 +1,12 @@
 import { RefObject } from "preact";
 import { useCallback, useEffect, useRef } from "preact/hooks";
 
+import type NoteContext from "../../../components/note_context";
 import FBlob from "../../../entities/fblob";
 import FNote from "../../../entities/fnote";
 import server from "../../../services/server";
 import { useViewModeConfig } from "../../collections/NoteList";
-import { useTriliumOption } from "../../react/hooks";
+import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 
 const VARIABLE_WHITELIST = new Set([
     "root-background",
@@ -14,8 +15,9 @@ const VARIABLE_WHITELIST = new Set([
     "main-text-color"
 ]);
 
-export default function PdfPreview({ note, blob, componentId }: {
+export default function PdfPreview({ note, blob, componentId, noteContext }: {
     note: FNote,
+    noteContext: NoteContext
     blob: FBlob | null | undefined,
     componentId: string | undefined;
 }) {
@@ -23,6 +25,7 @@ export default function PdfPreview({ note, blob, componentId }: {
     const { onLoad } = useStyleInjection(iframeRef);
     const historyConfig = useViewModeConfig(note, "pdfHistory");
     const [ locale ] = useTriliumOption("locale");
+    const [ newLayout ] = useTriliumOptionBool("newLayout");
 
     useEffect(() => {
         function handleMessage(event: MessageEvent) {
@@ -34,13 +37,111 @@ export default function PdfPreview({ note, blob, componentId }: {
             if (event.data.type === "pdfjs-viewer-save-view-history" && event.data?.data) {
                 historyConfig?.storeFn(JSON.parse(event.data.data));
             }
+
+            if (event.data.type === "pdfjs-viewer-toc") {
+                if (event.data.data) {
+                    // Convert PDF outline to HeadingContext format
+                    const headings = convertPdfOutlineToHeadings(event.data.data);
+                    noteContext.setContextData("toc", {
+                        headings,
+                        activeHeadingId: null,
+                        scrollToHeading: (heading) => {
+                            iframeRef.current?.contentWindow?.postMessage({
+                                type: "trilium-scroll-to-heading",
+                                headingId: heading.id
+                            }, "*");
+                        }
+                    });
+                } else {
+                    // No ToC available, use empty headings
+                    noteContext.setContextData("toc", {
+                        headings: [],
+                        activeHeadingId: null,
+                        scrollToHeading: () => {}
+                    });
+                }
+            }
+
+            if (event.data.type === "pdfjs-viewer-active-heading") {
+                const currentToc = noteContext.getContextData("toc");
+                if (currentToc) {
+                    noteContext.setContextData("toc", {
+                        ...currentToc,
+                        activeHeadingId: event.data.headingId
+                    });
+                }
+            }
+
+            if (event.data.type === "pdfjs-viewer-page-info") {
+                noteContext.setContextData("pdfPages", {
+                    totalPages: event.data.totalPages,
+                    currentPage: event.data.currentPage,
+                    scrollToPage: (page: number) => {
+                        iframeRef.current?.contentWindow?.postMessage({
+                            type: "trilium-scroll-to-page",
+                            pageNumber: page
+                        }, "*");
+                    },
+                    requestThumbnail: (page: number) => {
+                        iframeRef.current?.contentWindow?.postMessage({
+                            type: "trilium-request-thumbnail",
+                            pageNumber: page
+                        }, "*");
+                    }
+                });
+            }
+
+            if (event.data.type === "pdfjs-viewer-current-page") {
+                const currentPages = noteContext.getContextData("pdfPages");
+                if (currentPages) {
+                    noteContext.setContextData("pdfPages", {
+                        ...currentPages,
+                        currentPage: event.data.currentPage
+                    });
+                }
+            }
+
+            if (event.data.type === "pdfjs-viewer-thumbnail") {
+                // Forward thumbnail to any listeners
+                window.dispatchEvent(new CustomEvent("pdf-thumbnail", {
+                    detail: {
+                        pageNumber: event.data.pageNumber,
+                        dataUrl: event.data.dataUrl
+                    }
+                }));
+            }
+
+            if (event.data.type === "pdfjs-viewer-attachments") {
+                noteContext.setContextData("pdfAttachments", {
+                    attachments: event.data.attachments,
+                    downloadAttachment: (filename: string) => {
+                        iframeRef.current?.contentWindow?.postMessage({
+                            type: "trilium-download-attachment",
+                            filename
+                        }, "*");
+                    }
+                });
+            }
+
+            if (event.data.type === "pdfjs-viewer-layers") {
+                noteContext.setContextData("pdfLayers", {
+                    layers: event.data.layers,
+                    toggleLayer: (layerId: string, visible: boolean) => {
+                        iframeRef.current?.contentWindow?.postMessage({
+                            type: "trilium-toggle-layer",
+                            layerId,
+                            visible
+                        }, "*");
+                    }
+                });
+            }
         }
 
         window.addEventListener("message", handleMessage);
         return () => {
             window.removeEventListener("message", handleMessage);
         };
-    }, [ note, historyConfig, componentId, blob ]);
+    }, [ note, historyConfig, componentId, blob, noteContext ]);
 
     // Refresh when blob changes.
     useEffect(() => {
@@ -49,11 +150,12 @@ export default function PdfPreview({ note, blob, componentId }: {
         }
     }, [ blob ]);
 
+
     return (historyConfig &&
         <iframe
             ref={iframeRef}
             class="pdf-preview"
-            src={`pdfjs/web/viewer.html?file=../../api/notes/${note.noteId}/open&lang=${locale}`}
+            src={`pdfjs/web/viewer.html?file=../../api/notes/${note.noteId}/open&lang=${locale}&sidebar=${newLayout ? "0" : "1"}`}
             onLoad={() => {
                 const win = iframeRef.current?.contentWindow;
                 if (win) {
@@ -99,7 +201,7 @@ function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>) {
 
 function getRootCssVariables() {
     const styles = getComputedStyle(document.documentElement);
-    const vars: Record<string, string> = {};
+    const vars = {};
 
     for (let i = 0; i < styles.length; i++) {
         const prop = styles[i];
@@ -111,8 +213,45 @@ function getRootCssVariables() {
     return vars;
 }
 
-function cssVarsToString(vars: Record<string, string>) {
+function cssVarsToString(vars) {
     return `:root {\n${Object.entries(vars)
         .map(([k, v]) => `  ${k}: ${v};`)
         .join('\n')}\n}`;
 }
+
+interface PdfOutlineItem {
+    title: string;
+    level: number;
+    dest: unknown;
+    id: string;
+    items: PdfOutlineItem[];
+}
+
+interface PdfHeading {
+    level: number;
+    text: string;
+    id: string;
+    element: null;
+}
+
+function convertPdfOutlineToHeadings(outline: PdfOutlineItem[]): PdfHeading[] {
+    const headings: PdfHeading[] = [];
+
+    function flatten(items: PdfOutlineItem[]) {
+        for (const item of items) {
+            headings.push({
+                level: item.level + 1,
+                text: item.title,
+                id: item.id,
+                element: null // PDFs don't have DOM elements
+            });
+
+            if (item.items && item.items.length > 0) {
+                flatten(item.items);
+            }
+        }
+    }
+
+    flatten(outline);
+    return headings;
+}

packages/pdfjs-viewer/src/attachments.ts

@@ -0,0 +1,80 @@
+export async function setupPdfAttachments() {
+    const app = window.PDFViewerApplication;
+
+    // Extract immediately since we're called after documentloaded
+    await extractAndSendAttachments();
+
+    // Listen for download requests
+    window.addEventListener("message", async (event) => {
+        if (event.data?.type === "trilium-download-attachment") {
+            const filename = event.data.filename;
+            await downloadAttachment(filename);
+        }
+    });
+}
+
+async function extractAndSendAttachments() {
+    const app = window.PDFViewerApplication;
+
+    try {
+        const attachments = await app.pdfDocument.getAttachments();
+        console.log("Got attachments:", attachments);
+
+        if (!attachments) {
+            window.parent.postMessage({
+                type: "pdfjs-viewer-attachments",
+                attachments: []
+            }, "*");
+            return;
+        }
+
+        // Convert attachments object to array
+        const attachmentList = Object.entries(attachments).map(([filename, data]: [string, any]) => ({
+            filename,
+            content: data.content, // Uint8Array
+            size: data.content?.length || 0
+        }));
+
+        // Send metadata only (not the full content)
+        window.parent.postMessage({
+            type: "pdfjs-viewer-attachments",
+            attachments: attachmentList.map(att => ({
+                filename: att.filename,
+                size: att.size
+            }))
+        }, "*");
+    } catch (error) {
+        console.error("Error extracting attachments:", error);
+        window.parent.postMessage({
+            type: "pdfjs-viewer-attachments",
+            attachments: []
+        }, "*");
+    }
+}
+
+async function downloadAttachment(filename: string) {
+    const app = window.PDFViewerApplication;
+
+    try {
+        const attachments = await app.pdfDocument.getAttachments();
+        const attachment = attachments?.[filename];
+
+        if (!attachment) {
+            console.error("Attachment not found:", filename);
+            return;
+        }
+
+        // Create blob and download
+        const blob = new Blob([attachment.content], { type: "application/octet-stream" });
+        const url = URL.createObjectURL(blob);
+
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        a.click();
+
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error("Error downloading attachment:", error);
+    }
+}

packages/pdfjs-viewer/src/custom.css

@@ -12,3 +12,7 @@
         box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
     }
 }
+
+#toolbarViewerLeft > .toolbarButtonSpacer:first-child {
+    display: none !important;
+}

packages/pdfjs-viewer/src/custom.ts

@@ -1,7 +1,18 @@
 import interceptPersistence from "./persistence";
+import { extractAndSendToc, setupScrollToHeading, setupActiveHeadingTracking } from "./toc";
+import { setupPdfPages } from "./pages";
+import { setupPdfAttachments } from "./attachments";
+import { setupPdfLayers } from "./layers";
+
+const LOG_EVENT_BUS = false;
 
 async function main() {
-    interceptPersistence(getCustomAppOptions());
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get("sidebar") === "0") {
+        hideSidebar();
+    }
+
+    interceptPersistence(getCustomAppOptions(urlParams));
 
     // Wait for the PDF viewer application to be available.
     while (!window.PDFViewerApplication) {
@@ -9,20 +20,42 @@ async function main() {
     }
     const app = window.PDFViewerApplication;
 
+    if (LOG_EVENT_BUS) {
+        patchEventBus();
+    }
     app.eventBus.on("documentloaded", () => {
         manageSave();
+        extractAndSendToc();
+        setupScrollToHeading();
+        setupActiveHeadingTracking();
+        setupPdfPages();
+        setupPdfAttachments();
+        setupPdfLayers();
     });
     await app.initializedPromise;
 };
 
-function getCustomAppOptions() {
-    const urlParams = new URLSearchParams(window.location.search);
+function hideSidebar() {
+    window.TRILIUM_HIDE_SIDEBAR = true;
+    const toggleButtonEl = document.getElementById("viewsManagerToggleButton");
+    if (toggleButtonEl) {
+        const spacer = toggleButtonEl.nextElementSibling.nextElementSibling;
+        if (spacer.classList.contains("toolbarButtonSpacer")) {
+            spacer.remove();
+        }
+        toggleButtonEl.remove();
+    }
+}
 
+function getCustomAppOptions(urlParams: URLSearchParams) {
     return {
         localeProperties: {
             // Read from URL query
             lang: urlParams.get("lang") || "en"
-        }
+        },
+        // Control sidebar visibility via query parameter
+        // sidebarViewOnLoad: -1 disables sidebar, 0 = NONE (default)
+        viewsManager: null
     };
 }
 
@@ -41,7 +74,7 @@ function manageSave() {
             window.parent.postMessage({
                 type: "pdfjs-viewer-document-modified",
                 data: data
-            }, window.location.origin);
+            }, "*");
             storage.resetModified();
             timeout = null;
         }, 2_000);
@@ -60,4 +93,15 @@ function manageSave() {
     });
 }
 
+function patchEventBus() {
+    const eventBus = window.PDFViewerApplication.eventBus;
+    const originalDispatch = eventBus.dispatch.bind(eventBus);
+
+    eventBus.dispatch = (type: string, data?: any) => {
+        console.log("PDF.js event:", type, data);
+        return originalDispatch(type, data);
+    };
+}
+
 main();
+console.log("Custom script loaded");

packages/pdfjs-viewer/src/layers.ts

@@ -0,0 +1,118 @@
+export async function setupPdfLayers() {
+    const app = window.PDFViewerApplication;
+
+    // Extract immediately since we're called after documentloaded
+    await extractAndSendLayers();
+
+    // Listen for layer visibility toggle requests
+    window.addEventListener("message", async (event) => {
+        if (event.data?.type === "trilium-toggle-layer") {
+            const layerId = event.data.layerId;
+            const visible = event.data.visible;
+            await toggleLayer(layerId, visible);
+        }
+    });
+}
+
+async function extractAndSendLayers() {
+    const app = window.PDFViewerApplication;
+
+    try {
+        // Get the config from the viewer if available (has updated state), otherwise from document
+        const pdfViewer = app.pdfViewer;
+        const optionalContentConfig = pdfViewer?.optionalContentConfigPromise
+            ? await pdfViewer.optionalContentConfigPromise
+            : await app.pdfDocument.getOptionalContentConfig();
+
+        if (!optionalContentConfig) {
+            window.parent.postMessage({
+                type: "pdfjs-viewer-layers",
+                layers: []
+            }, "*");
+            return;
+        }
+
+        // Get all layer group IDs from the order
+        const order = optionalContentConfig.getOrder();
+        if (!order || order.length === 0) {
+            window.parent.postMessage({
+                type: "pdfjs-viewer-layers",
+                layers: []
+            }, "*");
+            return;
+        }
+
+        // Flatten the order array (it can be nested) and extract group IDs
+        const groupIds: string[] = [];
+        const flattenOrder = (items: any[]) => {
+            for (const item of items) {
+                if (typeof item === 'string') {
+                    groupIds.push(item);
+                } else if (Array.isArray(item)) {
+                    flattenOrder(item);
+                } else if (item && typeof item === 'object' && item.id) {
+                    groupIds.push(item.id);
+                }
+            }
+        };
+        flattenOrder(order);
+
+        // Get group details for each ID and only include valid, toggleable layers
+        const layers = groupIds.map(id => {
+            const group = optionalContentConfig.getGroup(id);
+
+            // Only include groups that have a name and usage property (actual layers)
+            if (!group || !group.name || !group.usage) {
+                return null;
+            }
+
+            // Use group.visible property like PDF.js viewer does
+            return {
+                id,
+                name: group.name,
+                visible: group.visible
+            };
+        }).filter(layer => layer !== null); // Filter out invalid layers
+
+        window.parent.postMessage({
+            type: "pdfjs-viewer-layers",
+            layers
+        }, "*");
+    } catch (error) {
+        console.error("Error extracting layers:", error);
+        window.parent.postMessage({
+            type: "pdfjs-viewer-layers",
+            layers: []
+        }, "*");
+    }
+}
+
+async function toggleLayer(layerId: string, visible: boolean) {
+    const app = window.PDFViewerApplication;
+
+    try {
+        const pdfViewer = app.pdfViewer;
+        if (!pdfViewer) {
+            return;
+        }
+
+        const optionalContentConfig = await pdfViewer.optionalContentConfigPromise;
+        if (!optionalContentConfig) {
+            return;
+        }
+
+        // Set visibility on the config (like PDF.js viewer does)
+        optionalContentConfig.setVisibility(layerId, visible);
+
+        // Dispatch optionalcontentconfig event with the existing config
+        app.eventBus.dispatch("optionalcontentconfig", {
+            source: app,
+            promise: Promise.resolve(optionalContentConfig)
+        });
+
+        // Send updated layer state back
+        await extractAndSendLayers();
+    } catch (error) {
+        console.error("Error toggling layer:", error);
+    }
+}

packages/pdfjs-viewer/src/pages.ts

@@ -0,0 +1,83 @@
+export function setupPdfPages() {
+    const app = window.PDFViewerApplication;
+
+    // Send initial page info when pages are initialized
+    app.eventBus.on("pagesinit", () => {
+        sendPageInfo();
+    });
+
+    // Also send immediately if document is already loaded
+    if (app.pdfDocument && app.pdfViewer) {
+        sendPageInfo();
+    }
+
+    // Track current page changes
+    app.eventBus.on("pagechanging", (evt: any) => {
+        window.parent.postMessage({
+            type: "pdfjs-viewer-current-page",
+            currentPage: evt.pageNumber
+        }, "*");
+    });
+
+    // Listen for scroll-to-page requests
+    window.addEventListener("message", (event) => {
+        if (event.data?.type === "trilium-scroll-to-page") {
+            const pageNumber = event.data.pageNumber;
+            app.pdfViewer.currentPageNumber = pageNumber;
+        }
+    });
+
+    // Listen for thumbnail requests
+    window.addEventListener("message", async (event) => {
+        if (event.data?.type === "trilium-request-thumbnail") {
+            const pageNumber = event.data.pageNumber;
+            await generateThumbnail(pageNumber);
+        }
+    });
+}
+
+function sendPageInfo() {
+    const app = window.PDFViewerApplication;
+
+    window.parent.postMessage({
+        type: "pdfjs-viewer-page-info",
+        totalPages: app.pdfDocument.numPages,
+        currentPage: app.pdfViewer.currentPageNumber
+    }, "*");
+}
+
+async function generateThumbnail(pageNumber: number) {
+    const app = window.PDFViewerApplication;
+
+    try {
+        const page = await app.pdfDocument.getPage(pageNumber);
+
+        // Create canvas for thumbnail
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) return;
+
+        // Set thumbnail size (smaller than actual page)
+        const viewport = page.getViewport({ scale: 0.2 });
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+
+        // Render page to canvas
+        await page.render({
+            canvasContext: context,
+            viewport: viewport
+        }).promise;
+
+        // Convert to data URL
+        const dataUrl = canvas.toDataURL('image/jpeg', 0.7);
+
+        // Send thumbnail to parent
+        window.parent.postMessage({
+            type: "pdfjs-viewer-thumbnail",
+            pageNumber,
+            dataUrl
+        }, "*");
+    } catch (error) {
+        console.error(`Error generating thumbnail for page ${pageNumber}:`, error);
+    }
+}

packages/pdfjs-viewer/src/persistence.ts

@@ -1,6 +1,4 @@
 export default function interceptViewHistory(customOptions?: object) {
-    // We need to monkey-patch the localStorage used by PDF.js to store view history.
-    // Other attempts to intercept the history saving/loading (like overriding methods on PDFViewerApplication) have failed.
     const originalSetItem = Storage.prototype.setItem;
     Storage.prototype.setItem = function (key: string, value: string) {
         if (key === "pdfjs.history") {
@@ -42,7 +40,7 @@ function saveHistory(value: string) {
         window.parent.postMessage({
             type: "pdfjs-viewer-save-view-history",
             data: JSON.stringify(history)
-        }, window.location.origin);
+        }, "*");
         saveTimeout = null;
     }, 2_000);
 }

packages/pdfjs-viewer/src/toc.ts

@@ -0,0 +1,187 @@
+let outlineMap: Map<string, any> | null = null;
+let headingPositions: Array<{ id: string; pageIndex: number; y: number }> | null = null;
+
+export async function extractAndSendToc() {
+    const app = window.PDFViewerApplication;
+
+    try {
+        const outline = await app.pdfDocument.getOutline();
+
+        if (!outline || outline.length === 0) {
+            window.parent.postMessage({
+                type: "pdfjs-viewer-toc",
+                data: null
+            }, "*");
+            return;
+        }
+
+        // Store outline items with their destinations for later scrolling
+        outlineMap = new Map();
+        headingPositions = [];
+        const toc = convertOutlineToToc(outline, 0, outlineMap);
+
+        // Build position mapping for active heading detection
+        await buildPositionMapping(outlineMap);
+
+        window.parent.postMessage({
+            type: "pdfjs-viewer-toc",
+            data: toc
+        }, "*");
+    } catch (error) {
+        window.parent.postMessage({
+            type: "pdfjs-viewer-toc",
+            data: null
+        }, "*");
+    }
+}
+
+function convertOutlineToToc(outline: any[], level = 0, outlineMap?: Map<string, any>, parentId = ""): any[] {
+    return outline.map((item, index) => {
+        const id = parentId ? `${parentId}-${index}` : `pdf-outline-${index}`;
+
+        if (outlineMap) {
+            outlineMap.set(id, item);
+        }
+
+        return {
+            title: item.title,
+            level: level,
+            dest: item.dest,
+            id: id,
+            items: item.items && item.items.length > 0 ? convertOutlineToToc(item.items, level + 1, outlineMap, id) : []
+        };
+    });
+}
+
+export function setupScrollToHeading() {
+    window.addEventListener("message", async (event) => {
+        if (event.data?.type === "trilium-scroll-to-heading") {
+            const headingId = event.data.headingId;
+
+            if (!outlineMap) return;
+
+            const outlineItem = outlineMap.get(headingId);
+            if (!outlineItem || !outlineItem.dest) return;
+
+            const app = window.PDFViewerApplication;
+
+            // Navigate to the destination
+            try {
+                const dest = typeof outlineItem.dest === 'string'
+                    ? await app.pdfDocument.getDestination(outlineItem.dest)
+                    : outlineItem.dest;
+
+                if (dest) {
+                    app.pdfLinkService.goToDestination(dest);
+                }
+            } catch (error) {
+                console.error("Error navigating to heading:", error);
+            }
+        }
+    });
+}
+
+async function buildPositionMapping(outlineMap: Map<string, any>) {
+    const app = window.PDFViewerApplication;
+
+    for (const [id, item] of outlineMap.entries()) {
+        if (!item.dest) continue;
+
+        try {
+            const dest = typeof item.dest === 'string'
+                ? await app.pdfDocument.getDestination(item.dest)
+                : item.dest;
+
+            if (dest && dest[0]) {
+                const pageRef = dest[0];
+                const pageIndex = await app.pdfDocument.getPageIndex(pageRef);
+
+                // Extract Y coordinate from destination (dest[3] is typically the y-coordinate)
+                const y = typeof dest[3] === 'number' ? dest[3] : 0;
+
+                headingPositions?.push({ id, pageIndex, y });
+            }
+        } catch (error) {
+            // Skip items with invalid destinations
+        }
+    }
+
+    // Sort by page and then by Y position (descending, since PDF coords are bottom-up)
+    headingPositions?.sort((a, b) => {
+        if (a.pageIndex !== b.pageIndex) {
+            return a.pageIndex - b.pageIndex;
+        }
+        return b.y - a.y; // Higher Y comes first (top of page)
+    });
+}
+
+export function setupActiveHeadingTracking() {
+    const app = window.PDFViewerApplication;
+    let lastActiveHeading: string | null = null;
+
+    // Offset from top of viewport to consider a heading "active"
+    // This makes the heading active when it's near the top, not when fully scrolled past
+    const ACTIVE_HEADING_OFFSET = 100;
+
+    function updateActiveHeading() {
+        if (!headingPositions || headingPositions.length === 0) return;
+
+        const currentPage = app.page - 1; // PDF.js uses 1-based, we need 0-based
+        const viewer = app.pdfViewer;
+        const container = viewer.container;
+        const scrollTop = container.scrollTop;
+
+        // Find the heading closest to the top of the viewport
+        let activeHeadingId: string | null = null;
+        let bestDistance = Infinity;
+
+        for (const heading of headingPositions) {
+            // Get the page view to calculate actual position
+            const pageView = viewer.getPageView(heading.pageIndex);
+            if (!pageView || !pageView.div) {
+                continue;
+            }
+
+            const pageTop = pageView.div.offsetTop;
+            const pageHeight = pageView.div.clientHeight;
+
+            // Convert PDF Y coordinate (bottom-up) to screen position (top-down)
+            const headingScreenY = pageTop + (pageHeight - heading.y);
+
+            // Calculate distance from top of viewport
+            const distance = Math.abs(headingScreenY - scrollTop);
+
+            // If this heading is closer to the top of viewport, and it's not too far below
+            if (headingScreenY <= scrollTop + ACTIVE_HEADING_OFFSET && distance < bestDistance) {
+                activeHeadingId = heading.id;
+                bestDistance = distance;
+            }
+        }
+
+        if (activeHeadingId !== lastActiveHeading) {
+            lastActiveHeading = activeHeadingId;
+            window.parent.postMessage({
+                type: "pdfjs-viewer-active-heading",
+                headingId: activeHeadingId
+            }, "*");
+        }
+    }
+
+    // Debounced scroll handler
+    let scrollTimeout: number | null = null;
+    const debouncedUpdate = () => {
+        if (scrollTimeout) {
+            clearTimeout(scrollTimeout);
+        }
+        scrollTimeout = window.setTimeout(updateActiveHeading, 100);
+    };
+
+    app.eventBus.on("pagechanging", debouncedUpdate);
+
+    // Also listen to scroll events for more granular updates within a page
+    const container = app.pdfViewer.container;
+    container.addEventListener("scroll", debouncedUpdate);
+
+    // Initial update
+    updateActiveHeading();
+}

packages/pdfjs-viewer/tsconfig.app.json

@@ -14,8 +14,7 @@
     "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo"
   },
   "include": [
-    "src/**/*.ts",
-    "../../apps/client/src/types-pdfjs.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "eslint.config.js",
@@ -24,7 +23,7 @@
   ],
   "references": [
     {
-      "path": "../commons/tsconfig.lib.json"
+      "path": "../commons/tsconfig.app.json"
     }
   ]
 }

packages/pdfjs-viewer/viewer/viewer.mjs

@@ -18609,7 +18609,7 @@ function getViewerConfiguration() {
       imageAltTextSettingsSeparator: document.getElementById("imageAltTextSettingsSeparator"),
       documentPropertiesButton: document.getElementById("documentProperties")
     },
-    viewsManager: {
+    viewsManager: window.TRILIUM_HIDE_SIDEBAR ? null : {
       outerContainer: document.getElementById("outerContainer"),
       toggleButton: document.getElementById("viewsManagerToggleButton"),
       sidebarContainer: document.getElementById("viewsManager"),

tsconfig.json

@@ -63,9 +63,6 @@
     {
       "path": "./packages/share-theme"
     },
-    {
-      "path": "./packages/pdfjs-viewer"
-    },
     {
       "path": "./scripts"
     }