From f2fcfb0339600ac0298c555b3ccdccfc3241ccd3 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Mon, 25 May 2026 11:46:31 +0300 Subject: [PATCH 1/2] fix(explore): condense mobile header to search + tabs Mobile and tablet explore pages were stacking three headers (search icon bar, "Explore" title, tabs). Collapse to two: - replace the search icon with the full-width SpotlightTrigger pill - drop the standalone "Explore" title row - keep the date-range dropdown next to the tabs Co-Authored-By: Claude Opus 4.7 (1M context) --- .../shared/src/components/MainFeedLayout.tsx | 5 +-- .../components/header/MobileExploreHeader.tsx | 44 ------------------- .../layout/MainLayoutHeader.spec.tsx | 9 ---- .../components/layout/MainLayoutHeader.tsx | 42 ++++++++---------- .../components/spotlight/SpotlightTrigger.tsx | 21 +-------- 5 files changed, 21 insertions(+), 100 deletions(-) delete mode 100644 packages/shared/src/components/header/MobileExploreHeader.tsx diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index dd26b0bca49..5f7108585ff 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -699,12 +699,11 @@ export default function MainFeedLayout({ tab={tab} setTab={onTabChange} showBreadcrumbs={false} - showDropdown={false} className={{ container: - 'sticky top-[7.5rem] z-header w-full border-b border-border-subtlest-tertiary bg-background-default', + 'sticky top-[4.5rem] z-header w-full border-b border-border-subtlest-tertiary bg-background-default', tabBarHeader: 'no-scrollbar overflow-x-auto', - tabBarContainer: 'w-full', + tabBarContainer: 'min-w-0 flex-1', }} /> ); diff --git a/packages/shared/src/components/header/MobileExploreHeader.tsx b/packages/shared/src/components/header/MobileExploreHeader.tsx deleted file mode 100644 index f14d5e7f805..00000000000 --- a/packages/shared/src/components/header/MobileExploreHeader.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { ReactElement } from 'react'; -import React from 'react'; -import { OtherFeedPage } from '../../lib/query'; -import { QueryStateKeys, useQueryState } from '../../hooks/utils/useQueryState'; -import { Dropdown } from '../fields/Dropdown'; -import { CalendarIcon } from '../icons'; -import { IconSize } from '../Icon'; -import { ButtonSize } from '../buttons/common'; -import { periodTexts } from '../layout/common'; - -const withDateRange = [ - OtherFeedPage.ExploreUpvoted, - OtherFeedPage.ExploreDiscussed, -]; - -interface ExploreHeaderProps { - path: string; -} - -export function MobileExploreHeader({ - path, -}: ExploreHeaderProps): ReactElement { - const [period, setPeriod] = useQueryState({ - key: [QueryStateKeys.FeedPeriod], - defaultValue: 0, - }); - - return ( -

- Explore - {withDateRange.includes(path as OtherFeedPage) && ( - } - selectedIndex={period} - options={periodTexts} - buttonSize={ButtonSize.Medium} - onChange={(_, index) => setPeriod(index)} - /> - )} -

- ); -} diff --git a/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx b/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx index 412683c9d68..5d56163b876 100644 --- a/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx +++ b/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx @@ -52,12 +52,6 @@ jest.mock('../../hooks/feed/useFeedName', () => ({ jest.mock('../../hooks/useActiveNav', () => jest.fn()); -jest.mock('../header/MobileExploreHeader', () => ({ - MobileExploreHeader: ({ path }: { path: string }) => ( -
{path}
- ), -})); - const mockUseSettingsContext = useSettingsContext as jest.Mock; const mockUseActiveFeedNameContext = useActiveFeedNameContext as jest.Mock; const mockUseViewSize = useViewSize as jest.Mock; @@ -115,9 +109,6 @@ describe('MainLayoutHeader', () => { expect(hydratedHeader).toBe(initialHeader); expect(hydratedHeader).toHaveClass('sticky', 'top-0'); - expect(screen.getByTestId('mobile-explore-header')).toHaveTextContent( - 'posts', - ); expect(recoverableErrors).toHaveLength(0); await act(async () => { diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx index e8de3627e61..b7b13c070d4 100644 --- a/packages/shared/src/components/layout/MainLayoutHeader.tsx +++ b/packages/shared/src/components/layout/MainLayoutHeader.tsx @@ -14,7 +14,6 @@ import { useFeedName } from '../../hooks/feed/useFeedName'; import { useCustomizeNewTab } from '../../features/customizeNewTab/CustomizeNewTabContext'; import { SharedFeedPage } from '../utilities'; import FeedNav from '../feeds/FeedNav'; -import { MobileExploreHeader } from '../header/MobileExploreHeader'; import useActiveNav from '../../hooks/useActiveNav'; export interface MainLayoutHeaderProps { @@ -121,29 +120,24 @@ function MainLayoutHeader({ : undefined, }} > - {isMobileSearchPage ? ( - <> - {renderSearchPanel()} - {!isSearch && } - - ) : ( - sidebarRendered !== undefined && ( - <> -
- -
- {renderSearchPanel()} - - - ) - )} + {isMobileSearchPage + ? renderSearchPanel() + : sidebarRendered !== undefined && ( + <> +
+ +
+ {renderSearchPanel()} + + + )} ); } diff --git a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx index 79c8b4f6e33..6522efd0220 100644 --- a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx +++ b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx @@ -1,12 +1,11 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { AiIcon, SearchIcon } from '../icons'; +import { AiIcon } from '../icons'; import { IconSize } from '../Icon'; import { isAppleDevice } from '../../lib/func'; import { KeyboadShortcutLabel } from '../KeyboardShortcutLabel'; import { useSpotlight } from './SpotlightContext'; -import { ViewSize, useViewSize } from '../../hooks'; interface SpotlightTriggerProps { className?: string; @@ -24,24 +23,6 @@ export const SpotlightTrigger = ({ className, }: SpotlightTriggerProps): ReactElement => { const { open } = useSpotlight(); - const isLaptop = useViewSize(ViewSize.Laptop); - - if (!isLaptop) { - return ( - - ); - } return (