Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 12:12:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: fix expand sidebar button not working

Browse Source
This commit is contained in:
Abdullah Atta
2025-03-25 12:57:54 +05:00
parent ba7154d58c
commit b48232bb62
7 changed files with 24 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app.tsx
View File

@@ -170,7 +170,7 @@ function DesktopAppContents() {
zIndex: 3
}}
>
<NavigationMenu onExpand={() => navPane.current?.expand(0)} />
<NavigationMenu onExpand={() => navPane.current?.reset(0)} />
</Pane>
)}
{!isFocusMode && isListPaneVisible ? (

15
apps/web/src/components/navigation-menu/index.tsx
View File

@@ -17,13 +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 React, {
useCallback,
useEffect,
useMemo,
useRef,
useState
} from "react";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { Box, Button, Flex, Image, Text } from "@theme-ui/components";
import {
Note,
@@ -99,16 +93,12 @@ import Tags from "../../views/tags";
import { Notebooks } from "../../views/notebooks";
import { UserProfile } from "../../dialogs/settings/components/user-profile";
import { SUBSCRIPTION_STATUS } from "../../common/constants";
import { ConfirmDialog, showLogoutConfirmation } from "../../dialogs/confirm";
import { CREATE_BUTTON_MAP, createBackup, logout } from "../../common";
import { TaskManager } from "../../common/task-manager";
import { showToast } from "../../utils/toast";
import { CREATE_BUTTON_MAP, logout } from "../../common";
import { TabItem } from "./tab-item";
import Notice from "../notice";
import { usePromise } from "@notesnook/common";
import { showSortMenu } from "../group-header";
import { Freeze } from "react-freeze";
import { logger } from "../../utils/logger";
type Route = {
id: "notes" | "favorites" | "reminders" | "monographs" | "trash";
@@ -288,6 +278,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
variant="secondary"
sx={{ p: 1, bg: "transparent" }}
onClick={onExpand}
title={strings.expandSidebar()}
>
<ExpandSidebar size={13} color="icon" />
</Button>

148
apps/web/src/components/route-container/index.tsx
View File

@@ -18,16 +18,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { PropsWithChildren, useRef } from "react";
import { Box, Button, Flex, Text } from "@theme-ui/components";
import { ArrowLeft, Menu, Search, Plus, Close, AddReminder } from "../icons";
import { useStore } from "../../stores/app-store";
import { Box } from "@theme-ui/components";
import { Close, AddReminder } from "../icons";
import { useStore as useSearchStore } from "../../stores/search-store";
import useMobile from "../../hooks/use-mobile";
import { debounce, usePromise } from "@notesnook/common";
import Field from "../field";
import { strings } from "@notesnook/intl";
import { TITLE_BAR_HEIGHT } from "../title-bar";
import { AppEventManager, AppEvents } from "../../common/app-events";
import { RouteResult } from "../../navigation/types";
import { CREATE_BUTTON_MAP } from "../../common";
@@ -160,145 +157,4 @@ function Header(props: RouteContainerProps) {
/>
</Box>
);
// if (isSearching)
// return (
// <Flex
// sx={{
// alignItems: "center",
// justifyContent: "center",
// height: TITLE_BAR_HEIGHT,
// zIndex: 2,
// px: 1
// }}
// className="route-container-header search-container"
// >
// <Field
// data-test-id="search-input"
// autoFocus
// id="search"
// name="search"
// variant="borderless"
// type="text"
// sx={{ m: 0, flex: 1, gap: 0 }}
// styles={{ input: { p: "5px", m: 0 } }}
// defaultValue={query}
// placeholder={strings.typeAKeyword()}
// onChange={debounce(
// (e) => useSearchStore.setState({ query: e.target.value }),
// 250
// )}
// onKeyUp={(e) => {
// if (e.key === "Escape")
// useSearchStore.setState({
// isSearching: false,
// searchType: undefined
// });
// }}
// action={{
// icon: Close,
// testId: "search-button",
// onClick: () =>
// useSearchStore.setState({
// isSearching: false,
// searchType: undefined
// })
// }}
// />
// </Flex>
// );
// return (
// <Flex
// className="route-container-header"
// sx={{
// px: 1,
// alignItems: "center",
// justifyContent: "space-between",
// height: TITLE_BAR_HEIGHT,
// zIndex: 2
// }}
// >
// <Flex
// py={1}
// sx={{
// alignItems: "center",
// justifyContent: "center",
// overflow: "hidden",
// gap: 1
// }}
// >
// {buttons?.back ? (
// <Button
// {...buttons.back}
// data-test-id="route-go-back"
// sx={{ p: 0, flexShrink: 0 }}
// >
// <ArrowLeft size={20} />
// </Button>
// ) : (
// <Button
// onClick={() =>
// AppEventManager.publish(AppEvents.toggleSideMenu, true)
// }
// sx={{ p: 0, flexShrink: 0 }}
// >
// <Menu
// sx={{
// display: ["block", "block", "none"],
// size: 23
// }}
// size={24}
// />
// </Button>
// )}
// {titlePromise.status === "fulfilled" && titlePromise.value && (
// <Text
// className="routeHeader"
// variant="heading"
// data-test-id="routeHeader"
// color="heading"
// >
// {titlePromise.value}
// </Text>
// )}
// </Flex>
// <Flex sx={{ flexShrink: 0, gap: 2 }}>
// {buttons?.search && (
// <Button
// title={buttons.search.title}
// onClick={() =>
// useSearchStore.setState({ isSearching: true, searchType: type })
// }
// data-test-id={"open-search"}
// sx={{ p: 0 }}
// >
// <Search
// size={24}
// sx={{
// size: 24
// }}
// />
// </Button>
// )}
// {!isMobile && buttons?.create && (
// <Button
// {...buttons.create}
// data-test-id={`${type}-action-button`}
// sx={{ p: 0 }}
// >
// <Plus
// color="accentForeground"
// size={18}
// sx={{
// height: 24,
// width: 24,
// bg: "accent",
// borderRadius: 100
// }}
// />
// </Button>
// )}
// </Flex>
// </Flex>
// );
}

8
apps/web/src/components/split-pane/index.tsx
View File

@@ -60,6 +60,7 @@ type PaneOptions = {
export type SplitPaneImperativeHandle = {
collapse: (index: number) => void;
expand: (index: number) => void;
reset: (index: number) => void;
isCollapsed: (index: number) => boolean;
};
export const SplitPane = React.forwardRef<
@@ -285,6 +286,13 @@ export const SplitPane = React.forwardRef<
currentPane.expandedSize = undefined;
setSizes(paneSizes.current, wrapSize.current);
},
reset: (index: number) => {
const currentPane = paneSizes.current[index];
currentPane.collapsed = false;
currentPane.size = currentPane.initialSize;
currentPane.expandedSize = undefined;
setSizes(paneSizes.current, wrapSize.current);
},
isCollapsed: (index: number) => {
return paneSizes.current[index].collapsed;
}

4
packages/intl/locale/en.po
View File

@@ -2508,6 +2508,10 @@ msgstr "Exit fullscreen"
msgid "Expand"
msgstr "Expand"
#: src/strings.ts:2441
msgid "Expand sidebar"
msgstr "Expand sidebar"
#: src/strings.ts:2053
msgid "Experience the next level of private note taking\""
msgstr "Experience the next level of private note taking\""

4
packages/intl/locale/pseudo-LOCALE.po
View File

@@ -2497,6 +2497,10 @@ msgstr ""
msgid "Expand"
msgstr ""
#: src/strings.ts:2441
msgid "Expand sidebar"
msgstr ""
#: src/strings.ts:2053
msgid "Experience the next level of private note taking\""
msgstr ""

3
packages/intl/src/strings.ts
View File

@@ -2439,5 +2439,6 @@ Use this if changes from other devices are not appearing on this device. This wi
stable: () => t`Stable`,
beta: () => t`Beta`,
zoom: () => t`Zoom`,
toggleFocusMode: () => t`Toggle focus mode`
toggleFocusMode: () => t`Toggle focus mode`,
expandSidebar: () => t`Expand sidebar`
};