style: show interaction when active (#1692)

Co-authored-by: himself65 <himself65@outlook.com>

apps/web/src/layouts/index.tsx

@@ -198,7 +198,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
           onOpenWorkspaceListModal={handleOpenWorkspaceListModal}
           openPage={handleOpenPage}
           createPage={handleCreatePage}
-          currentPath={router.asPath}
+          currentPath={router.asPath.split('?')[0]}
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
         <StyledWrapper className="main-container">

package.json

@@ -40,7 +40,7 @@
     "@affine/cli": "workspace:*",
     "@istanbuljs/schema": "^0.1.3",
     "@perfsee/sdk": "^1.5.1",
-    "@playwright/test": "^1.31.2",
+    "@playwright/test": "^1.32.1",
     "@testing-library/react": "^14.0.0",
     "@types/eslint": "^8.21.3",
     "@types/node": "^18.15.5",

tests/parallels/local-first-setting-page.spec.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+import { clickSideBarSettingButton } from '../libs/sidebar';
+
+test.describe('Local first setting page', () => {
+  test('Should highlight the setting page menu when selected', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    const element = await page.getByTestId(
+      'slider-bar-workspace-setting-button'
+    );
+    const prevColor = await element.evaluate(
+      element => window.getComputedStyle(element).color
+    );
+    await clickSideBarSettingButton(page);
+    const currentColor = await element.evaluate(
+      element => window.getComputedStyle(element).color
+    );
+    expect(prevColor).not.toBe(currentColor);
+  });
+});