diff --git a/docker/frontend/src/Library.tsx b/docker/frontend/src/Library.tsx index 7f5ac80..d48da9c 100644 --- a/docker/frontend/src/Library.tsx +++ b/docker/frontend/src/Library.tsx @@ -64,6 +64,7 @@ const NODE_KEY = 'recipescam.library.node'; const FRAME_KEY = 'recipescam.library.frame'; const COLUMN_KEY = 'recipescam.library.column'; const OPEN_KEY = 'recipescam.library.open'; +const DEEP_KEY = 'recipescam.library.deep'; const COLUMN_MIN = 88; const COLUMN_MAX = 460; const COLUMN_DEFAULT = 118; @@ -128,8 +129,9 @@ export function Library() { }); // Whether the strip draws the whole branch under the open node or only the // node itself. Deep is how a roll reads — its top level holds no file of its - // own — and shallow is what a folder of folders is for. - const [deep, setDeep] = useState(true); + // own — and shallow is what a folder of folders is for. The reader's answer is + // picked up where the last visit left it, the same as the open node above. + const [deep, setDeep] = useState(() => recall(DEEP_KEY) !== 'false'); // The frame that is up in the open node — raised by a click on its thumbnail, // and picked up where the last visit left it, so a reader who leaves for the // studio comes back to the negative they were looking at rather than to the @@ -358,7 +360,8 @@ export function Library() { }, [reload]); // What the screen remembers: the folder that was open, the frame that was up in - // it, and the width its column was dragged to. + // it, the width its column was dragged to, and whether the strip drew the whole + // branch under that folder or only the folder itself. useEffect(() => { if (node) keep(NODE_KEY, node); }, [node]); @@ -371,6 +374,9 @@ export function Library() { useEffect(() => { keep(OPEN_KEY, [...expanded].join(',')); }, [expanded]); + useEffect(() => { + keep(DEEP_KEY, String(deep)); + }, [deep]); // The menu closes on the next click anywhere but its own items, and on Escape. // Escape is the whole reason this listens on the document instead of sitting