Story Editor: Preset Panel Height & Collapse Persistence

assets/src/edit-story/components/panels/panel/panel.js

@@ -35,6 +35,8 @@ const Wrapper = styled.section`
   position: relative;
 `;
 
+const LOCAL_STORAGE_PREFIX = 'web_stories_ui_settings';
+
 function Panel({
   name,
   children,
@@ -43,13 +45,40 @@ function Panel({
   initialHeight = null,
   ariaLabel = null,
   ariaHidden = false,
+  isPersisted,
 }) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [expandToHeight, setExpandToHeight] = useState(initialHeight);
-  const [height, setHeight] = useState(initialHeight);
+  const persisted = useMemo(() => {
+    if (!isPersisted) {
+      return null;
+    }
+    const stored = localStorage.getItem(`${LOCAL_STORAGE_PREFIX}:${name}`);
+    return stored && JSON.parse(stored);
+  }, [name, isPersisted]);
+  const [isCollapsed, setIsCollapsed] = useState(
+    Boolean(persisted?.isCollapsed)
+  );
+  const [expandToHeight, setExpandToHeight] = useState(
+    persisted?.expandToHeight || initialHeight
+  );
+  const [height, setHeight] = useState(persisted?.height || initialHeight);
   const [hasTitle, setHasTitle] = useState(false);
   const [manuallyChanged, setManuallyChanged] = useState(false);
 
+  // If supplied with a persistance key, persist height & collapsed state
+  useEffect(() => {
+    if (!isPersisted) {
+      return;
+    }
+    localStorage.setItem(
+      `${LOCAL_STORAGE_PREFIX}:${name}`,
+      JSON.stringify({
+        height,
+        isCollapsed,
+        expandToHeight,
+      })
+    );
+  }, [height, isCollapsed, expandToHeight, isPersisted, name]);
+
   const confirmTitle = useCallback(() => setHasTitle(true), []);
 
   const collapse = useCallback(() => {
@@ -61,6 +90,7 @@ function Panel({
       setHeight(0);
     }
   }, [resizeable, canCollapse]);
+
   const expand = useCallback(
     (restoreHeight = true) => {
       setIsCollapsed(false);
@@ -71,10 +101,13 @@ function Panel({
     [resizeable, expandToHeight]
   );
 
+  // Expand panel on first mount if collapse not persisted
   useEffect(() => {
-    setIsCollapsed(!canCollapse);
+    if (persisted?.isCollapsed) {
+      return;
+    }
     expand(true);
-  }, [canCollapse, expand]);
+  }, [canCollapse, expand, persisted]);
 
   useEffect(() => {
     if (resizeable && height <= PANEL_COLLAPSED_THRESHOLD && !isCollapsed) {
@@ -83,12 +116,12 @@ function Panel({
   }, [collapse, height, resizeable, isCollapsed]);
 
   useEffect(() => {
-    if (manuallyChanged || !resizeable) {
+    if (manuallyChanged || persisted || !resizeable) {
       return;
     }
     setHeight(initialHeight);
     setExpandToHeight(initialHeight);
-  }, [manuallyChanged, initialHeight, resizeable]);
+  }, [manuallyChanged, initialHeight, resizeable, persisted]);
 
   const manuallySetHeight = useCallback(
     (h) => {
@@ -160,6 +193,7 @@ Panel.propTypes = {
   canCollapse: PropTypes.bool,
   ariaLabel: PropTypes.string,
   ariaHidden: PropTypes.bool,
+  isPersisted: PropTypes.bool,
 };
 
 export default Panel;

assets/src/edit-story/components/panels/preset/presetPanel.js

@@ -132,10 +132,11 @@ function PresetPanel({
 
   return (
     <Panel
-      name="stylepreset"
+      name={`stylepreset-${presetType}`}
       initialHeight={Math.min(initialHeight, window.innerHeight / 3)}
       resizeable={resizeable}
       canCollapse={canCollapse}
+      isPersisted
     >
       <PresetsHeader
         handleAddPreset={handleAddPreset}