UBER-54: Attempt to Expand/collapse issue fix (#3183)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/ExpandCollapse.svelte

@@ -13,30 +13,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher, afterUpdate } from 'svelte'
+  import { afterUpdate, createEventDispatcher } from 'svelte'
-  import { quintOut } from 'svelte/easing'
-  import { tweened } from 'svelte/motion'
 
   export let isExpanded = false
-  export let duration = 150
-  export let easing: (t: number) => number = quintOut
 
   const dispatch = createEventDispatcher()
   afterUpdate(() => dispatch('changeContent'))
-
-  const tweenedHeight = tweened(0, { duration, easing })
-
-  let height = 0
-
-  $: tweenedHeight.set(isExpanded ? height : 0, { duration, easing })
 </script>
 
-<div
+<div class="root" hidden={!isExpanded}>
-  class="root"
+  <div class="flex-no-shrink clear-mins">
-  style="height: {$tweenedHeight}px;"
-  style:overflow={$tweenedHeight < height ? 'auto' : $tweenedHeight === 0 ? 'hidden' : 'visible'}
->
-  <div bind:offsetHeight={height} class="flex-no-shrink clear-mins">
     <slot />
   </div>
 </div>

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -72,7 +72,12 @@
   $: initialLimit = !lastLevel ? undefined : singleCat ? singleCategoryLimit : defaultLimit
   $: limit = initialLimit
 
-  let collapsed = true
+  $: categoryCollapseKey = `list_collapsing_${location.pathname}_${
+    typeof category === 'object' ? category.name : category
+  }`
+  $: storedCollapseState = localStorage.getItem(categoryCollapseKey)
+
+  $: collapsed = storedCollapseState === 'true' || storedCollapseState === null
   let wasLoaded = false
 
   const dispatch = createEventDispatcher()
@@ -83,8 +88,10 @@
   }
 
   function initCollapsed (singleCat: boolean, lastLevel: boolean): void {
+    if (localStorage.getItem(categoryCollapseKey) === null) {
       collapsed = !disableHeader && !singleCat && items.length > (lastLevel ? autoFoldLimit : singleCategoryLimit)
     }
+  }
 
   $: initCollapsed(singleCat, lastLevel)
 
@@ -319,12 +326,14 @@
   }
   export function expand (): void {
     collapsed = false
+    localStorage.setItem(categoryCollapseKey, 'false')
   }
   export function scroll (item: Doc): void {
     const pos = limited.findIndex((it) => it._id === item._id)
     if (pos >= 0) {
       if (collapsed) {
         collapsed = false
+        localStorage.setItem(categoryCollapseKey, 'false')
         setTimeout(() => scroll(item), 50)
       } else {
         listItems[pos]?.scroll()
@@ -371,10 +380,11 @@
       }}
       on:collapse={() => {
         collapsed = !collapsed
+        localStorage.setItem(categoryCollapseKey, collapsed ? 'true' : 'false')
       }}
     />
   {/if}
-  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined} duration={0}>
+  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined}>
     {#if !lastLevel}
       <slot
         name="category"