From e297769ac2ed1a8dd3ca253b41bb414a6f95a306 Mon Sep 17 00:00:00 2001
From: ascarbek <ascarbek@gmail.com>
Date: Sun, 5 Mar 2023 23:34:46 +0600
Subject: [PATCH] fix: highlight active page

---
 .../layout/NavigationPanel/NavigationPanel.hooks.ts  |  6 +++++-
 .../layout/NavigationPanel/PageItem.hooks.ts         |  4 +++-
 .../components/layout/NavigationPanel/PageItem.tsx   |  5 ++++-
 .../stores/reducers/activePageId/slice.ts            | 12 ++++++++++++
 .../appflowy_tauri/src/appflowy_app/stores/store.ts  |  2 ++
 5 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/stores/reducers/activePageId/slice.ts

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts
index 4b2f9bde2d..1b7a28c655 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts
@@ -1,14 +1,16 @@
-import { useAppSelector } from '../../../stores/store';
+import { useAppDispatch, useAppSelector } from '../../../stores/store';
 import { useNavigate } from 'react-router-dom';
 import { IPage } from '../../../stores/reducers/pages/slice';
 import { ViewLayoutTypePB } from '../../../../services/backend';
 import { MouseEventHandler, useState } from 'react';
+import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
 
 // number of pixels from left side of screen to show hidden navigation panel
 const FLOATING_PANEL_SHOW_WIDTH = 10;
 const FLOATING_PANEL_HIDE_EXTRA_WIDTH = 10;
 
 export const useNavigationPanelHooks = function () {
+  const dispatch = useAppDispatch();
   const folders = useAppSelector((state) => state.folders);
   const pages = useAppSelector((state) => state.pages);
   const width = useAppSelector((state) => state.navigationWidth);
@@ -52,6 +54,8 @@ export const useNavigationPanelHooks = function () {
       }
     })();
 
+    dispatch(activePageIdActions.setActivePageId(page.id));
+
     navigate(`/page/${pageTypeRoute}/${page.id}`);
   };
 
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.hooks.ts
index 77e53086be..9e608071e1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.hooks.ts
@@ -1,5 +1,5 @@
 import { IPage, pagesActions } from '../../../stores/reducers/pages/slice';
-import { useAppDispatch } from '../../../stores/store';
+import { useAppDispatch, useAppSelector } from '../../../stores/store';
 import { useState } from 'react';
 import { nanoid } from 'nanoid';
 import { ViewBackendService } from '../../../stores/effects/folder/view/view_bd_svc';
@@ -9,6 +9,7 @@ export const usePageEvents = (page: IPage) => {
   const appDispatch = useAppDispatch();
   const [showPageOptions, setShowPageOptions] = useState(false);
   const [showRenamePopup, setShowRenamePopup] = useState(false);
+  const activePageId = useAppSelector((state) => state.activePageId);
   const viewBackendService: ViewBackendService = new ViewBackendService(page.id);
   const error = useError();
 
@@ -69,5 +70,6 @@ export const usePageEvents = (page: IPage) => {
     duplicatePage,
     closePopup,
     closeRenamePopup,
+    activePageId,
   };
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.tsx
index 7b1186f95d..0d0affe33f 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.tsx
@@ -20,13 +20,16 @@ export const PageItem = ({ page, onPageClick }: { page: IPage; onPageClick: () =
     duplicatePage,
     closePopup,
     closeRenamePopup,
+    activePageId,
   } = usePageEvents(page);
 
   return (
     <div className={'relative'}>
       <div
         onClick={() => onPageClick()}
-        className={'flex cursor-pointer items-center justify-between rounded-lg py-2 pl-8 pr-4 hover:bg-surface-2 '}
+        className={`flex cursor-pointer items-center justify-between rounded-lg py-2 pl-8 pr-4 hover:bg-surface-2 ${
+          activePageId === page.id ? 'bg-surface-2' : ''
+        }`}
       >
         <button className={'flex min-w-0 flex-1 items-center'}>
           <i className={'ml-1 mr-1 h-[16px] w-[16px]'}>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/activePageId/slice.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/activePageId/slice.ts
new file mode 100644
index 0000000000..f6ba120d63
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/activePageId/slice.ts
@@ -0,0 +1,12 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+export const activePageIdSlice = createSlice({
+  name: 'activePageId',
+  initialState: '',
+  reducers: {
+    setActivePageId(state, action: PayloadAction<string>) {
+      return action.payload;
+    },
+  },
+});
+
+export const activePageIdActions = activePageIdSlice.actions;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/store.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/store.ts
index 9e476d875e..1f96485938 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/store.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/store.ts
@@ -16,6 +16,7 @@ import { workspaceSlice } from './reducers/workspace/slice';
 import { databaseSlice } from './reducers/database/slice';
 import { boardSlice } from './reducers/board/slice';
 import { errorSlice } from './reducers/error/slice';
+import { activePageIdSlice } from './reducers/activePageId/slice';
 
 const listenerMiddlewareInstance = createListenerMiddleware({
   onError: () => console.error,
@@ -25,6 +26,7 @@ const store = configureStore({
   reducer: {
     [foldersSlice.name]: foldersSlice.reducer,
     [pagesSlice.name]: pagesSlice.reducer,
+    [activePageIdSlice.name]: activePageIdSlice.reducer,
     [navigationWidthSlice.name]: navigationWidthSlice.reducer,
     [currentUserSlice.name]: currentUserSlice.reducer,
     [gridSlice.name]: gridSlice.reducer,