Revert "web: fix list pane not expanding (#7758)"

This reverts commit fd9db3605d.
2026-09-01 19:49:54 +02:00 · 2025-03-27 13:04:28 +05:00
parent df1c1595c7
commit dcba3ebdd7
6 changed files with 14 additions and 64 deletions
--- 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 <http://www.gnu.org/licenses/>.
 */

-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<SplitPaneImperativeHandle>(null);
-  const listPaneSize = useRef<null | number>(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 (
    <>
      <Flex
@@ -173,8 +155,6 @@ function DesktopAppContents() {
          direction="vertical"
          onChange={(sizes) => {
            useStore.setState({ isNavPaneCollapsed: sizes[0] <= 70 });
-
-            listPaneSize.current = sizes[1];
          }}
        >
          {isFocusMode ? null : (
@@ -193,12 +173,12 @@ function DesktopAppContents() {
              <NavigationMenu onExpand={() => navPane.current?.reset(0)} />
            </Pane>
          )}
-          {!isFocusMode ? (
+          {!isFocusMode && isListPaneVisible ? (
            <Pane
              id="list-pane"
              initialSize={380}
              style={{ flex: 1, display: "flex" }}
-              snapSize={LIST_PANE_SNAP_SIZE}
+              snapSize={200}
              maxSize={500}
              className="list-pane"
            >
--- 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<VirtuosoHandle>(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();
--- 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 }) {
        <Button
          variant="secondary"
          sx={{ p: 1, px: "small", bg: "transparent", mx: 1 }}
-          onClick={() => setCollapsedNavPaneHovered(true)}
+          onClick={() => setExpanded(true)}
        >
          <HamburgerMenu size={16} color="icon" />
        </Button>
@@ -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 }) {
            <Flex sx={{ flexDirection: "column", px: 1, gap: [1, 1, "small"] }}>
              <Routes
                isCollapsed={isCollapsed}
-                collapse={() => collapseNavPaneHoveredIfNavPaneCollapsed()}
+                collapse={() => isNavPaneCollapsed && setExpanded(false)}
              />
              <Colors
                isCollapsed={isCollapsed}
-                collapse={() => collapseNavPaneHoveredIfNavPaneCollapsed()}
+                collapse={() => isNavPaneCollapsed && setExpanded(false)}
              />
              <Box
                bg="separator"
@@ -403,7 +394,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
              />
              <Shortcuts
                isCollapsed={isCollapsed}
-                collapse={() => collapseNavPaneHoveredIfNavPaneCollapsed()}
+                collapse={() => isNavPaneCollapsed && setExpanded(false)}
              />
            </Flex>
          </FlexScrollContainer>
@@ -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);
-  }
-}
--- 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();
--- 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();
--- a/apps/web/src/stores/app-store.ts
+++ b/apps/web/src/stores/app-store.ts
@@ -67,7 +67,6 @@ class AppStore extends BaseStore<AppStore> {
  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<AppStore> {
    );
  };

-  setCollapsedNavPaneHovered = (state: boolean) => {
-    this.set({ isCollapsedNavPaneHovered: state });
-  };
-
  refresh = async () => {
    logger.measure("refreshing app");