From 42ea9f7280018e5b055ee2237f7d40f92950fff2 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Thu, 27 Mar 2025 13:04:28 +0500 Subject: [PATCH] Revert "web: fix list pane not expanding (#7758)" This reverts commit fd9db3605dbf2a60ffc1d3c14c1cd70f7a32579b. --- apps/web/src/app.tsx | 26 ++------------ .../src/components/list-container/index.tsx | 3 -- .../src/components/navigation-menu/index.tsx | 36 ++++++------------- apps/web/src/components/notebook/index.tsx | 6 +--- apps/web/src/components/tag/index.tsx | 2 -- apps/web/src/stores/app-store.ts | 5 --- 6 files changed, 14 insertions(+), 64 deletions(-) diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx index a9921ff24..34ceaf97a 100644 --- a/apps/web/src/app.tsx +++ b/apps/web/src/app.tsx @@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { Suspense, useEffect, useRef } from "react"; +import { useState, Suspense, useEffect, useRef } from "react"; import { Box, Flex } from "@theme-ui/components"; import { ScopedThemeProvider } from "./components/theme-provider"; import useMobile from "./hooks/use-mobile"; @@ -50,8 +50,6 @@ import { STATUS_BAR_HEIGHT } from "./common/constants"; new WebExtensionRelay(); -const LIST_PANE_SNAP_SIZE = 200; - function App() { const isMobile = useMobile(); const isFocusMode = useStore((store) => store.isFocusMode); @@ -133,31 +131,15 @@ export default App; function DesktopAppContents() { const isFocusMode = useStore((store) => store.isFocusMode); const isListPaneVisible = useStore((store) => store.isListPaneVisible); - const toggleListPane = useStore((store) => store.toggleListPane); const isTablet = useTablet(); // const [isNarrow, setIsNarrow] = useState(isTablet || false); const navPane = useRef(null); - const listPaneSize = useRef(null); useEffect(() => { if (isTablet) navPane.current?.collapse(0); else if (navPane.current?.isCollapsed(0)) navPane.current?.expand(0); }, [isTablet]); - useEffect(() => { - if (isListPaneVisible) { - navPane.current?.expand(1); - return; - } - if ( - listPaneSize.current !== null && - listPaneSize.current < LIST_PANE_SNAP_SIZE - ) { - toggleListPane(); - navPane.current?.reset(1); - } - }, [isListPaneVisible]); - return ( <> { useStore.setState({ isNavPaneCollapsed: sizes[0] <= 70 }); - - listPaneSize.current = sizes[1]; }} > {isFocusMode ? null : ( @@ -193,12 +173,12 @@ function DesktopAppContents() { navPane.current?.reset(0)} /> )} - {!isFocusMode ? ( + {!isFocusMode && isListPaneVisible ? ( diff --git a/apps/web/src/components/list-container/index.tsx b/apps/web/src/components/list-container/index.tsx index fd55cf68b..3969fc00d 100644 --- a/apps/web/src/components/list-container/index.tsx +++ b/apps/web/src/components/list-container/index.tsx @@ -25,7 +25,6 @@ import { useStore as useSelectionStore, store as selectionStore } from "../../stores/selection-store"; -import { useStore as useAppStore } from "../../stores/app-store"; import GroupHeader from "../group-header"; import { ListItemWrapper, @@ -104,7 +103,6 @@ function ListContainer(props: ListContainerProps) { const toggleSelection = useSelectionStore( (store) => store.toggleSelectionMode ); - const toggleListPane = useAppStore((store) => store.toggleListPane); const listRef = useRef(null); const listContainerRef = useRef(null); @@ -117,7 +115,6 @@ function ListContainer(props: ListContainerProps) { AppEventManager.subscribe( AppEvents.revealItemInList, async (id?: string) => { - toggleListPane(); if (!id || !listRef.current) return; const ids = await items.ids(); diff --git a/apps/web/src/components/navigation-menu/index.tsx b/apps/web/src/components/navigation-menu/index.tsx index ad4ff7e37..d43e7cc15 100644 --- a/apps/web/src/components/navigation-menu/index.tsx +++ b/apps/web/src/components/navigation-menu/index.tsx @@ -197,17 +197,12 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) { const isFocusMode = useAppStore((store) => store.isFocusMode); const [currentTab, setCurrentTab] = useState<(typeof tabs)[number]>(tabs[0]); const isNavPaneCollapsed = useAppStore((store) => store.isNavPaneCollapsed); - const isCollapsedNavPaneHovered = useAppStore( - (store) => store.isCollapsedNavPaneHovered - ); - const setCollapsedNavPaneHovered = useAppStore( - (store) => store.setCollapsedNavPaneHovered - ); - const isCollapsed = isNavPaneCollapsed && !isCollapsedNavPaneHovered; + const [expanded, setExpanded] = useState(false); + const isCollapsed = isNavPaneCollapsed && !expanded; const mouseHoverTimeout = useRef(0); useEffect(() => { - if (isNavPaneCollapsed) setCollapsedNavPaneHovered(false); + if (isNavPaneCollapsed) setExpanded(false); }, [isNavPaneCollapsed]); return ( @@ -226,11 +221,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) { borderRight: "1px solid var(--separator)", pt: 1, transition: "width 0.1s ease-in", - width: isNavPaneCollapsed - ? isCollapsedNavPaneHovered - ? 250 - : 50 - : "100%" + width: isNavPaneCollapsed ? (expanded ? 250 : 50) : "100%" }} onMouseEnter={() => { clearTimeout(mouseHoverTimeout.current); @@ -240,7 +231,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) { if (!isNavPaneCollapsed) return; mouseHoverTimeout.current = setTimeout(() => { if (!isNavPaneCollapsed) return; - setCollapsedNavPaneHovered(false); + setExpanded(false); }, 500) as unknown as number; }} > @@ -248,7 +239,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) { @@ -331,7 +322,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) { icon={tab.icon} selected={currentTab.id === tab.id} onClick={() => { - if (isNavPaneCollapsed) setCollapsedNavPaneHovered(true); + if (isNavPaneCollapsed) setExpanded(true); setCurrentTab(tab); }} /> @@ -390,11 +381,11 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) { collapseNavPaneHoveredIfNavPaneCollapsed()} + collapse={() => isNavPaneCollapsed && setExpanded(false)} /> collapseNavPaneHoveredIfNavPaneCollapsed()} + collapse={() => isNavPaneCollapsed && setExpanded(false)} /> void }) { /> collapseNavPaneHoveredIfNavPaneCollapsed()} + collapse={() => isNavPaneCollapsed && setExpanded(false)} /> @@ -967,12 +958,5 @@ function navigateToRoute(path: string) { return useSearchStore.getState().resetSearch(); return useAppStore.getState().toggleListPane(); } - useAppStore.getState().toggleListPane(); navigate(path); } - -export function collapseNavPaneHoveredIfNavPaneCollapsed() { - if (useAppStore.getState().isNavPaneCollapsed) { - useAppStore.getState().setCollapsedNavPaneHovered(false); - } -} diff --git a/apps/web/src/components/notebook/index.tsx b/apps/web/src/components/notebook/index.tsx index e88623993..e1f07044b 100644 --- a/apps/web/src/components/notebook/index.tsx +++ b/apps/web/src/components/notebook/index.tsx @@ -43,7 +43,6 @@ import { store as appStore } from "../../stores/app-store"; import { Multiselect } from "../../common/multi-select"; import { strings } from "@notesnook/intl"; import { db } from "../../common/db"; -import { collapseNavPaneHoveredIfNavPaneCollapsed } from "../navigation-menu"; type NotebookProps = { item: NotebookType; @@ -79,10 +78,7 @@ export function Notebook(props: NotebookProps) { isFocused={isOpened} isCompact item={item} - onClick={() => { - navigate(`/notebooks/${item.id}`); - collapseNavPaneHoveredIfNavPaneCollapsed(); - }} + onClick={() => navigate(`/notebooks/${item.id}`)} onDragEnter={(e) => { if (!isDragEntering(e)) return; e.currentTarget.focus(); diff --git a/apps/web/src/components/tag/index.tsx b/apps/web/src/components/tag/index.tsx index 735add731..2e8612981 100644 --- a/apps/web/src/components/tag/index.tsx +++ b/apps/web/src/components/tag/index.tsx @@ -31,7 +31,6 @@ import { useStore as useSelectionStore } from "../../stores/selection-store"; import { useStore as useNoteStore } from "../../stores/note-store"; import { Multiselect } from "../../common/multi-select"; import { strings } from "@notesnook/intl"; -import { collapseNavPaneHoveredIfNavPaneCollapsed } from "../navigation-menu"; type TagProps = { item: TagType; totalNotes: number }; function Tag(props: TagProps) { @@ -88,7 +87,6 @@ function Tag(props: TagProps) { menuItems={tagMenuItems} onClick={() => { navigate(`/tags/${id}`); - collapseNavPaneHoveredIfNavPaneCollapsed(); }} onDragEnter={(e) => { e?.currentTarget.focus(); diff --git a/apps/web/src/stores/app-store.ts b/apps/web/src/stores/app-store.ts index a84a0c2f8..063bf4308 100644 --- a/apps/web/src/stores/app-store.ts +++ b/apps/web/src/stores/app-store.ts @@ -67,7 +67,6 @@ class AppStore extends BaseStore { isFocusMode = false; isListPaneVisible = true; isNavPaneCollapsed = false; - isCollapsedNavPaneHovered = false; isVaultCreated = false; isAutoSyncEnabled = Config.get("autoSyncEnabled", true); isSyncEnabled = Config.get("syncEnabled", true); @@ -172,10 +171,6 @@ class AppStore extends BaseStore { ); }; - setCollapsedNavPaneHovered = (state: boolean) => { - this.set({ isCollapsedNavPaneHovered: state }); - }; - refresh = async () => { logger.measure("refreshing app");