diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index 9246e7833..eea0c7857 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -17,7 +17,6 @@ import { ThemeId, theme } from '../tokens/stitches.config' import { NavigationMenu } from './navMenu/NavigationMenu' import { Button } from '../elements/Button' import { List } from '@phosphor-icons/react' -import { usePersistedState } from '../../lib/hooks/usePersistedState' import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu' import { AddLinkModal } from './AddLinkModal' import { saveUrlMutation } from '../../lib/networking/mutations/saveUrlMutation' @@ -39,6 +38,9 @@ type NavigationLayoutProps = { rightPane?: ReactNode section: NavigationSection pageMetaDataProps?: PageMetaDataProps + + showNavigationMenu: boolean + setShowNavigationMenu: (show: boolean) => void } export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { @@ -50,12 +52,6 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] = useState(false) - const [showNavMenu, setShowNavMenu, isLoading] = usePersistedState({ - key: 'nav-show-menu', - isSessionStorage: false, - initialValue: true, - }) - useKeyboardShortcuts(navigationCommands(router)) useKeyboardShortcuts( @@ -136,15 +132,15 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { } }, [showLogout]) - if (isLoading) { - return ( - - ) - } + // if (isLoading) { + // return ( + // + // ) + // } return ( { - setShowNavMenu(!showNavMenu) + props.setShowNavigationMenu(!props.showNavigationMenu) }} /> - {!isLoading && showNavMenu && ( + {props.showNavigationMenu && ( <> boolean + + showNavigationMenu: boolean } export function LibraryContainer(props: LibraryContainerProps): JSX.Element { @@ -787,6 +789,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { setIsChecked={setIsChecked} itemIsChecked={itemIsChecked} multiSelectMode={multiSelectMode} + showNavigationMenu={props.showNavigationMenu} setMultiSelectMode={setMultiSelectMode} performMultiSelectAction={performMultiSelectAction} searchTerm={queryInputs.searchQuery} @@ -885,6 +888,8 @@ export type HomeFeedContentProps = { locale: string ) => Promise + showNavigationMenu: boolean + setIsChecked: (itemId: string, set: boolean) => void itemIsChecked: (itemId: string) => boolean @@ -939,9 +944,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { layout={layout} viewer={viewerData?.me} updateLayout={updateLayout} - showFilterMenu={true} - // eslint-disable-next-line @typescript-eslint/no-empty-function - setShowFilterMenu={() => {}} + showFilterMenu={props.showNavigationMenu} searchTerm={props.searchTerm} applySearchQuery={(searchQuery: string) => { props.applySearchQuery(searchQuery) diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index ca89c1bab..03865b4e1 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/packages/web/components/templates/library/LibraryHeader.tsx @@ -4,18 +4,15 @@ import { theme } from '../../tokens/stitches.config' import { FormInput } from '../../elements/FormElements' import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts' import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts' -import { Button, IconButton } from '../../elements/Button' +import { Button } from '../../elements/Button' import { FunnelSimple, X } from '@phosphor-icons/react' -import { LayoutType, LibraryMode } from '../homeFeed/HomeFeedContainer' +import { LayoutType } from '../homeFeed/HomeFeedContainer' import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo' -import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from '../homeFeed/HeaderSpacer' import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu' import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation' import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon' import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon' -import { HeaderToggleTLDRIcon } from '../../elements/icons/HeaderToggleTLDRIcon' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' -import { userHasFeature } from '../../../lib/featureFlag' import { MultiSelectControls, CheckBoxButton, @@ -33,7 +30,6 @@ export type LibraryHeaderProps = { applySearchQuery: (searchQuery: string) => void showFilterMenu: boolean - setShowFilterMenu: (show: boolean) => void numItemsSelected: number multiSelectMode: MultiSelectMode @@ -93,7 +89,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element { right: '0', }, '@xlgDown': { - px: '40px', + px: props.showFilterMenu ? '0px' : '40px', }, }} > diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index bf12a1852..37cb7f092 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -263,7 +263,6 @@ const Shortcuts = (props: NavigationMenuProps): JSX.Element => { type: 'internal', index: 0, }) - console.log('create leaf: ', result) } }, [treeRef]) @@ -390,7 +389,6 @@ async function setShortcuts( async function resetShortcuts(path: string): Promise { const url = new URL(path, fetchEndpoint) - console.log('resetting shortcuts') try { const response = await fetch(url.toString(), { method: 'DELETE', @@ -415,12 +413,10 @@ async function resetShortcuts(path: string): Promise { const cachedShortcutsData = (): Shortcut[] | undefined => { if (typeof localStorage !== 'undefined') { const str = localStorage.getItem('/api/shortcuts') - console.log('cached shortcuts: ', str) if (str) { return JSON.parse(str) as Shortcut[] } } - console.log('undefined shortcuts') return undefined } @@ -515,7 +511,6 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { const onActivate = useCallback( (node: NodeApi) => { - console.log('onActivate: ', node) if (node.data.type == 'folder') { const join = node.data.join if (join == 'or') { @@ -524,7 +519,6 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { return `(${child.data.filter})` }) .join(' OR ') - console.log('query: ', query) } } else if (node.data.section != null && node.data.filter != null) { router.push(`/l/${node.data.section}?q=${node.data.filter}`) @@ -550,12 +544,12 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { } const maximumHeight = useMemo(() => { - // recurse the tree + if (!data) { + return 320 + } return countTotalShortcuts(data as Shortcut[]) * 36 }, [data]) - console.log('maximumHeight: ', maximumHeight) - return ( ({ + key: 'nav-show-menu', + isSessionStorage: false, + initialValue: true, + }) + const section: NavigationSection | undefined = useMemo(() => { if (!router.isReady) { return undefined @@ -45,6 +53,7 @@ export default function Home(): JSX.Element { item.folder == 'inbox' ) }} + showNavigationMenu={showNavigationMenu} /> ) case 'subscriptions': @@ -58,6 +67,7 @@ export default function Home(): JSX.Element { item.folder == 'following' ) }} + showNavigationMenu={showNavigationMenu} /> ) case 'archive': @@ -65,6 +75,7 @@ export default function Home(): JSX.Element { item.state != 'DELETED' && item.isArchived} + showNavigationMenu={showNavigationMenu} /> ) case 'trash': @@ -72,6 +83,7 @@ export default function Home(): JSX.Element { item.state == 'DELETED'} + showNavigationMenu={showNavigationMenu} /> ) @@ -81,7 +93,11 @@ export default function Home(): JSX.Element { } return ( - + {sectionView(section)} )