From 755df8f002b8beaa331c99ed7b3e4a14c2f350f0 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Sat, 7 Dec 2024 18:57:57 +0300
Subject: [PATCH] Fixed toggle navigator and aside (#7289)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 .../src/components/Floor.svelte               |  2 +-
 .../src/components/Applications.svelte        | 11 +++--
 .../src/components/Workbench.svelte           | 40 +++++++++++++------
 tests/sanity/tests/tracker/subissues.spec.ts  |  4 --
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/plugins/love-resources/src/components/Floor.svelte b/plugins/love-resources/src/components/Floor.svelte
index d1c5e5c799..8b3aeb8990 100644
--- a/plugins/love-resources/src/components/Floor.svelte
+++ b/plugins/love-resources/src/components/Floor.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header allowFullsize adaptive={'disabled'}>
+  <Header adaptive={'disabled'}>
     <Breadcrumb title={selectedFloor?.name ?? ''} size={'large'} isCurrent />
     <svelte:fragment slot="beforeTitle">
       <ViewletSelector bind:viewlet bind:preference bind:loading viewletQuery={{ attachTo: lovePlg.class.Floor }} />
diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte
index cd2f0a8098..c617800469 100644
--- a/plugins/workbench-resources/src/components/Applications.svelte
+++ b/plugins/workbench-resources/src/components/Applications.svelte
@@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import core, { getCurrentAccount, type Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
@@ -27,6 +28,8 @@
   export let apps: Application[] = []
   export let direction: 'vertical' | 'horizontal' = 'vertical'
 
+  const dispatch = createEventDispatcher()
+
   let loaded: boolean = false
   let hiddenAppsIds: Array<Ref<Application>> = []
   const hiddenAppsIdsQuery = createQuery()
@@ -66,9 +69,7 @@
             label={app.label}
             navigator={app._id === active && $deviceInfo.navigator.visible}
             on:click={() => {
-              if (app._id === active) {
-                $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
-              }
+              if (app._id === active) dispatch('toggleNav')
             }}
           />
         </NavLink>
@@ -82,9 +83,7 @@
             label={app.label}
             navigator={app._id === active && $deviceInfo.navigator.visible}
             on:click={() => {
-              if (app._id === active) {
-                $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
-              }
+              if (app._id === active) dispatch('toggleNav')
             }}
           />
         </NavLink>
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 484f1f91b7..172131dc21 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -160,11 +160,26 @@
 
   const linkProviders = client.getModel().findAllSync(view.mixin.LinkIdProvider, {})
 
-  $deviceInfo.navigator.visible = getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true
-  $deviceInfo.aside.visible = getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true
+  const defaultNavigator = !(getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true)
+  const savedNavigator = localStorage.getItem('hiddenNavigator')
+  const savedAside = localStorage.getItem('hiddenAside')
+  let hiddenNavigator: boolean = savedNavigator !== null ? savedNavigator === 'true' : defaultNavigator
+  let hiddenAside: boolean = savedAside !== null ? savedAside === 'true' : defaultNavigator
+  $deviceInfo.navigator.visible = !hiddenNavigator
+  $deviceInfo.aside.visible = !hiddenAside
+  sidebarStore.subscribe((sidebar) => {
+    if (!$deviceInfo.aside.float) {
+      hiddenAside = sidebar.variant === SidebarVariant.MINI
+      localStorage.setItem('hiddenAside', `${hiddenAside}`)
+    }
+  })
 
   async function toggleNav (): Promise<void> {
     $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
+    if (!$deviceInfo.navigator.float) {
+      hiddenNavigator = !$deviceInfo.navigator.visible
+      localStorage.setItem('hiddenNavigator', `${hiddenNavigator}`)
+    }
     closeTooltip()
     if (currentApplication && navigatorModel) {
       await tick()
@@ -638,14 +653,12 @@
 
   $deviceInfo.navigator.float = workbenchWidth <= HIDE_NAVIGATOR
   const checkWorkbenchWidth = (): void => {
-    if (workbenchWidth <= HIDE_NAVIGATOR && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
+    if (workbenchWidth <= HIDE_NAVIGATOR && !$deviceInfo.navigator.float) {
       $deviceInfo.navigator.visible = false
       $deviceInfo.navigator.float = true
     } else if (workbenchWidth > HIDE_NAVIGATOR && $deviceInfo.navigator.float) {
-      if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
-        $deviceInfo.navigator.float = false
-        $deviceInfo.navigator.visible = true
-      }
+      $deviceInfo.navigator.float = false
+      $deviceInfo.navigator.visible = !hiddenNavigator
     }
   }
   checkWorkbenchWidth()
@@ -653,10 +666,8 @@
     $deviceInfo.aside.visible = false
     $deviceInfo.aside.float = true
   } else if ($deviceInfo.docWidth > HIDE_ASIDE && $deviceInfo.aside.float) {
-    if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
-      $deviceInfo.aside.float = false
-      $deviceInfo.aside.visible = true
-    }
+    $deviceInfo.aside.float = false
+    $deviceInfo.aside.visible = !hiddenAside
   }
   const checkOnHide = (): void => {
     if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
@@ -847,7 +858,12 @@
             notify={hasInboxNotifications}
           />
         </NavLink>
-        <Applications {apps} active={currentApplication?._id} direction={$deviceInfo.navigator.direction} />
+        <Applications
+          {apps}
+          active={currentApplication?._id}
+          direction={$deviceInfo.navigator.direction}
+          on:toggleNav={toggleNav}
+        />
       </div>
       <div
         class="info-box {$deviceInfo.navigator.direction}"
diff --git a/tests/sanity/tests/tracker/subissues.spec.ts b/tests/sanity/tests/tracker/subissues.spec.ts
index 748de19b68..37e2044a5d 100644
--- a/tests/sanity/tests/tracker/subissues.spec.ts
+++ b/tests/sanity/tests/tracker/subissues.spec.ts
@@ -12,7 +12,6 @@ import {
 } from './tracker.utils'
 import { Issue, NewIssue } from '../model/tracker/types'
 import { IssuesDetailsPage } from '../model/tracker/issues-details-page'
-import { CommonTrackerPage } from '../model/tracker/common-tracker-page'
 
 test.use({
   storageState: PlatformSetting
@@ -20,17 +19,14 @@ test.use({
 test.describe('Tracker sub-issues tests', () => {
   let issuesPage: IssuesPage
   let issuesDetailsPage: IssuesDetailsPage
-  let commonTrackerPage: CommonTrackerPage
 
   test.beforeEach(async ({ page }) => {
     issuesPage = new IssuesPage(page)
     issuesDetailsPage = new IssuesDetailsPage(page)
-    commonTrackerPage = new CommonTrackerPage(page)
     await (await page.goto(`${PlatformURI}/workbench/sanity-ws`))?.finished()
   })
 
   test('create sub-issue', async ({ page }) => {
-    await commonTrackerPage.clickOnApplicationButton()
     const props = {
       name: `issue-${generateId(5)}`,
       description: 'description',