Add new CanvasProvider state to manage the opening of the ThumbsPagesPod accordion

[sergioelmoreno]

When the user load a saved file, the ThumbsPagesPod accordion is open by default to improve the User Experience

There is no issue related

[brauliodiez]

A flag is a good idea, but true/false won't work the second time you open a document, one trick we can do is to count the number of times we have opened documents, something like:

const [howManyLoadedDocuments, setHowManyLoadedDocuments] = React.useState(0);

[brauliodiez]

The setter we can call it directly here in the provider (no need to call it from outside, something like:

  const loadDocument = (document: DocumentModel) => {
    setDocument(document);
+    setHowManyLoadedDocuments(numberOfDocuments => numberOfDocuments + 1);
  };

[brauliodiez]

Rather in the provider (see comment)

[brauliodiez]

mmm.. we could create a custom hook to encapsulate the open doc funciontallity, the use it directly in the scene, something like:

import { useCanvasContext } from '@/core/providers';
import { useEffect, useRef, useState } from 'react';

export const useAccordionSectionVisibility = () => {
  const [isThumbPagesPodOpen, setIsThumbPagesPodOpen] = useState(false);
  const thumbPagesPodRef = useRef<HTMLDetailsElement>(null);
  const { fullDocument, howManyLoadedDocuments } = useCanvasContext();

  useEffect(() => {
    if (
      howManyLoadedDocuments > 0 &&
      thumbPagesPodRef.current &&
      fullDocument.pages.length > 1
    ) {
      setIsThumbPagesPodOpen(true);
      thumbPagesPodRef.current.open = true;
    }
  }, [howManyLoadedDocuments]);

  useEffect(() => {
    const handleToggle = () => {
      setIsThumbPagesPodOpen(thumbPagesPodRef.current?.open ?? false);
    };

    const detailsElement = thumbPagesPodRef.current;
    if (detailsElement) {
      detailsElement.addEventListener('toggle', handleToggle);
    }

    // Cleanup event listener on component unmount
    return () => {
      if (detailsElement) {
        detailsElement.removeEventListener('toggle', handleToggle);
      }
    };
  }, []);

  return {
    thumbPagesPodRef,
    isThumbPagesPodOpen,
  };
};