From 1e465b8012116740fc345937707a20a46bd71549 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Sun, 12 Apr 2026 22:31:26 +0700
Subject: [PATCH] Fix apps customization

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/AppItem.svelte             |  2 ++
 .../src/components/AppSwitcher.svelte         |  1 +
 .../src/components/Applications.svelte        | 34 ++++++++++++-------
 .../src/components/Workbench.svelte           |  1 +
 .../workbench/customize-sidebar-apps.spec.ts  | 34 +++++++++++++++++++
 5 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 tests/sanity/tests/workbench/customize-sidebar-apps.spec.ts

diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index 94dc5e768c0..dfa0a3efb22 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -25,6 +25,7 @@
   export let loading: boolean = false
   export let notify: boolean = false
   export let navigator: boolean = false
+  export let dataId: string | undefined = undefined
 </script>
 
 <button
@@ -33,6 +34,7 @@
   class:selected
   class:navigator
   id={'app-' + label}
+  data-id={dataId}
   disabled={loading}
   use:tooltip={{ label }}
   on:click
diff --git a/plugins/workbench-resources/src/components/AppSwitcher.svelte b/plugins/workbench-resources/src/components/AppSwitcher.svelte
index 163a685a175..28079f310af 100644
--- a/plugins/workbench-resources/src/components/AppSwitcher.svelte
+++ b/plugins/workbench-resources/src/components/AppSwitcher.svelte
@@ -99,6 +99,7 @@
             bind:this={btns[i]}
             class="ap-menuItem withIcon flex-row-center flex-grow"
             class:hover={btns[i] === activeElement}
+            data-id={`app-switcher-row-${app.alias}`}
             on:click={() => {
               if (hiddenAppsIds.includes(app._id)) showApplication(app)
               else hideApplication(app)
diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte
index d08f77ebff0..e000f92c20e 100644
--- a/plugins/workbench-resources/src/components/Applications.svelte
+++ b/plugins/workbench-resources/src/components/Applications.svelte
@@ -110,20 +110,27 @@
 
   updateExcludedApps()
 
-  function isAppVisibleInSwitcher (app: Application, disabledModules: Set<Ref<Application>>): boolean {
-    return !hiddenAppsIds.includes(app._id) && !excludedApps.includes(app.alias) && !disabledModules.has(app._id)
-  }
+  let topApps: Application[] = []
+  let midApps: Application[] = []
+  let bottomApps: Application[] = []
 
-  $: topApps = apps
-    .filter((it) => it.position === 'top' && isAppVisibleInSwitcher(it, disabledApplications))
-    .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
-  $: midApps = apps
-    .filter(
-      (it) => it.position !== 'top' && it.position !== 'bottom' && isAppVisibleInSwitcher(it, disabledApplications)
-    )
-    .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+  // Single reactive block so reads of hiddenAppsIds / excludedApps / disabledApplications
+  $: {
+    const hidden = hiddenAppsIds
+    const excluded = excludedApps
+    const disabled = disabledApplications
 
-  $: bottomApps = apps.filter((it) => it.position === 'bottom' && isAppVisibleInSwitcher(it, disabledApplications))
+    const isApplicationVisibleInSidebar = (app: Application): boolean =>
+      !hidden.includes(app._id) && !excluded.includes(app.alias) && !disabled.has(app._id)
+
+    topApps = apps
+      .filter((it) => it.position === 'top' && isApplicationVisibleInSidebar(it))
+      .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+    midApps = apps
+      .filter((it) => it.position !== 'top' && it.position !== 'bottom' && isApplicationVisibleInSidebar(it))
+      .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+    bottomApps = apps.filter((it) => it.position === 'bottom' && isApplicationVisibleInSidebar(it))
+  }
 
   const inboxClient = InboxNotificationsClientImpl.getClient()
   const inboxNotificationsByContextStore = inboxClient.inboxNotificationsByContext
@@ -177,6 +184,7 @@
             navigator={app._id === active && $deviceInfo.navigator.visible}
             notify={showNotify(app.alias, hasInboxNotifications, hasNewInboxNotifications, hasNewMessagesNotification)}
             {...customProps}
+            dataId={`app-sidebar-${app.alias}`}
             on:click={getClickHandler(app, customProps)}
           />
         </NavLink>
@@ -193,6 +201,7 @@
             label={app.label}
             navigator={app._id === active && $deviceInfo.navigator.visible}
             {...customProps}
+            dataId={`app-sidebar-${app.alias}`}
             on:click={getClickHandler(app, customProps)}
           />
         </NavLink>
@@ -209,6 +218,7 @@
               navigator={app._id === active && $deviceInfo.navigator.visible}
               notify={app.alias === chatId && hasNewInboxNotifications}
               {...customProps}
+              dataId={`app-sidebar-${app.alias}`}
               on:click={getClickHandler(app, customProps)}
             />
           </NavLink>
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 516fee8f451..ec2f890b60a 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -926,6 +926,7 @@
         <AppItem
           icon={IconSettings}
           label={setting.string.Customize}
+          dataId="workbench-app-customize"
           size={appsMini ? 'small' : 'large'}
           on:click={() => showPopup(AppSwitcher, { apps }, popupPosition)}
         />
diff --git a/tests/sanity/tests/workbench/customize-sidebar-apps.spec.ts b/tests/sanity/tests/workbench/customize-sidebar-apps.spec.ts
new file mode 100644
index 00000000000..5d3866fcc21
--- /dev/null
+++ b/tests/sanity/tests/workbench/customize-sidebar-apps.spec.ts
@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { PlatformSetting, PlatformURI } from '../utils'
+
+test.use({
+  storageState: PlatformSetting
+})
+
+test.describe('Customize sidebar applications', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`${PlatformURI}/workbench/sanity-ws/recruit`)
+  })
+
+  test('sidebar apps match Customize visibility toggles', async ({ page }) => {
+    const recruitSidebar = page.getByTestId('app-sidebar-recruit')
+    const customize = page.getByTestId('workbench-app-customize')
+    const recruitRow = page.getByTestId('app-switcher-row-recruit')
+
+    await expect(recruitSidebar).toBeVisible()
+
+    await customize.click()
+    await expect(recruitRow).toBeVisible()
+    await recruitRow.click()
+    await page.keyboard.press('Escape')
+
+    await expect(recruitSidebar).toHaveCount(0)
+
+    await customize.click()
+    await expect(recruitRow).toBeVisible()
+    await recruitRow.click()
+    await page.keyboard.press('Escape')
+
+    await expect(recruitSidebar).toBeVisible()
+  })
+})