diff --git a/__tests__/components/header/AppSidebar.test.tsx b/__tests__/components/header/AppSidebar.test.tsx index 3ff8e07aad..818bd14979 100644 --- a/__tests__/components/header/AppSidebar.test.tsx +++ b/__tests__/components/header/AppSidebar.test.tsx @@ -22,6 +22,9 @@ jest.mock('@/components/app-wallets/AppWalletsContext'); const onClose = jest.fn(); (useAppWallets as jest.Mock).mockReturnValue({ appWalletsSupported: true }); render(); + expect(menuProps.menu).toEqual(expect.arrayContaining([ + expect.objectContaining({ label: 'Discover', path: '/discover' }), + ])); expect(menuProps.menu.find((m: any) => m.label === 'Tools').children[0]).toEqual({ label: 'App Wallets', path: '/tools/app-wallets' }); headerProps.onClose(); expect(onClose).toHaveBeenCalled(); diff --git a/codex/STATE.md b/codex/STATE.md index d33aa76e4f..8a87357541 100644 --- a/codex/STATE.md +++ b/codex/STATE.md @@ -38,6 +38,7 @@ This table is the single source of truth for active and historical tickets. Keep | TKT-0032 | Remove unused hasMetadataContent export | In-Progress | P2 | openai-assistant | — | 2025-10-28 | | TKT-0033 | Remove unused createIcsDataUrl helper | Review | P2 | openai-assistant | — | 2025-10-28 | | TKT-0034 | Remove unused findLightDropBySerialNoWithPagination helper | Review | P2 | openai-assistant | — | 2025-10-28 | +| TKT-0035 | Add Discover link to app sidebar navigation | In-Progress | P1 | openai-assistant | — | 2025-10-29 | ## Usage Guidelines diff --git a/codex/tickets/TKT-0035.md b/codex/tickets/TKT-0035.md new file mode 100644 index 0000000000..b22ef67640 --- /dev/null +++ b/codex/tickets/TKT-0035.md @@ -0,0 +1,52 @@ +--- +created: 2025-10-29 +id: TKT-0035 +owner: openai-assistant +priority: P1 +status: In-Progress +title: Add Discover link to app sidebar navigation +--- + +## Context + +> The in-app sidebar navigation omits a link to the Discover experience, forcing users to rely on deep links or browser navigation. Restoring parity with the web sidebar should improve discoverability and align the app's UX. While iterating on these navigation fixes, we also spotted inconsistent search icons in the app waves and identity search inputs that should be updated to the shared Heroicons set. + +## Plan + +- [x] Audit the app sidebar component to confirm available navigation slots and icon usage. +- [x] Inject a Discover entry pointing to the existing Discover route with consistent styling and ordering. +- [ ] Validate navigation manually and adjust tests or stories if they cover sidebar entries. +- [ ] Update `WavesListSearch` and the identity search form to use the Heroicons search glyph. +- [ ] Ensure relevant tests reflect the updated icon rendering. + +## Acceptance + +- [ ] App sidebar includes a Discover item that routes to the Discover page. +- [ ] Sidebar highlight state updates correctly when visiting Discover. +- [ ] Waves list and identity search inputs render the Heroicons search icon consistently. +- [ ] `npm run lint`, `npm run type-check`, and targeted tests for the sidebar/search components pass locally. + +## Links + +- Primary PR: _(add when available)_ +- Follow-ups: _(reference additional tickets or TODO items)_ + +## Log + +- 2025-10-29T11:47:41Z – Created ticket and captured initial scope for restoring Discover navigation entry. +- 2025-10-29T11:50:40Z – Added Discover link to app sidebar and reordered Network section ahead of Tools. +- 2025-10-29T12:03:31Z – Expanded ticket scope to align waves and identity search icons with Heroicons. +- 2025-10-29T12:04:31Z – Swapped both waves and identity search fields to use the shared Heroicons magnifier glyph. +- 2025-10-29T12:20:49Z – Reinstated the `useRounded` option on `WaveHeader` per design confirmation. +- 2025-10-29T12:29:35Z – Made the drop overlay full-screen in the app shell and added safe-area padding to the mobile drop header. +- 2025-10-29T12:31:32Z – Offset the drop close button using safe-area-aware positioning. +- 2025-10-29T12:48:26Z – Tweaked `WaveItem` card aspect/gradient heights to reduce hero image height on small screens. +- 2025-10-29T12:50:55Z – Added a loading state and disabled interaction for the Waves “Show all” toggle to avoid jarring label flips. +- 2025-10-29T12:53:25Z – Brightened the “Show less” state and added directional icons so the toggle remains obvious after expansion. +- 2025-10-29T13:02:20Z – Reverted `WavesListWrapper` UI experiments; restored original toggle styling and behavior. +- 2025-10-29T13:03:41Z – Added `readonly` to `BrainMobile` props to align with the TypeScript conventions. +- 2025-10-29T13:04:31Z – Swapped the drop close SVG for the shared Heroicons `XMarkIcon` component. +- 2025-10-29T13:16:24Z – Adjusted mobile drop header spacing while verifying safe-area offsets. +- 2025-10-29T13:22:31Z – Detached `SingleWaveDropChat` from `LayoutContext` so the overlay no longer reserves extra space for the AppHeader. +- 2025-10-29T13:24:18Z – Reverted that change after it regressed the drop layout. +- 2025-10-29T13:26:58Z – Switched the typing indicator background to a Tailwind gradient (bottom-up) for smoother blending. diff --git a/components/brain/BrainMobile.tsx b/components/brain/BrainMobile.tsx index 802f947ff8..2af2465694 100644 --- a/components/brain/BrainMobile.tsx +++ b/components/brain/BrainMobile.tsx @@ -43,7 +43,7 @@ export enum BrainView { } interface Props { - children: ReactNode; + readonly children: ReactNode; } const BrainMobile: React.FC = ({ children }) => { @@ -268,11 +268,15 @@ const BrainMobile: React.FC = ({ children }) => { [BrainView.NOTIFICATIONS]: , }; + const dropOverlayClass = isApp + ? "tw-fixed tw-inset-0 tw-z-[2000] tw-bg-black tailwind-scope" + : "tw-absolute tw-inset-0 tw-z-[1000]"; + return (
{createOverlay} {isDropOpen && ( -
+
= ({ return (
{/* Main content container */} -
+
diff --git a/components/brain/right-sidebar/BrainRightSidebarContent.tsx b/components/brain/right-sidebar/BrainRightSidebarContent.tsx index fd9e50ea4d..b85da19ed6 100644 --- a/components/brain/right-sidebar/BrainRightSidebarContent.tsx +++ b/components/brain/right-sidebar/BrainRightSidebarContent.tsx @@ -11,7 +11,7 @@ const BrainRightSidebarContent: React.FC = ({ wave, }) => { return ( -
+
diff --git a/components/common/TabToggleWithOverflow.tsx b/components/common/TabToggleWithOverflow.tsx index eb6f916fff..6a46f9e352 100644 --- a/components/common/TabToggleWithOverflow.tsx +++ b/components/common/TabToggleWithOverflow.tsx @@ -179,7 +179,7 @@ export const TabToggleWithOverflow: React.FC = ({ unstyledMenu unstyledItems triggerClassName={clsx( - "tw-flex tw-items-center tw-gap-0.5 tw-border-0 tw-bg-transparent tw-text-sm tw-font-medium tw-transition-all tw-duration-200 tw-whitespace-nowrap focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400/50 focus-visible:tw-rounded-sm", + "tw-flex-1 tw-py-3 tw-whitespace-nowrap tw-text-sm tw-font-medium tw-border-b-2 tw-border-t-0 tw-border-x-0 tw-border-solid tw-bg-transparent tw-transition-all tw-duration-200", isActiveInOverflow ? "tw-text-primary-300 tw-border-b-2 tw-border-primary-400" : "tw-text-iron-400 hover:tw-text-iron-200", diff --git a/components/header/AppSidebar.tsx b/components/header/AppSidebar.tsx index ab617de8f4..b590534e32 100644 --- a/components/header/AppSidebar.tsx +++ b/components/header/AppSidebar.tsx @@ -12,6 +12,7 @@ import { } from "@heroicons/react/24/outline"; import { Fragment, useCallback, useEffect, useMemo } from "react"; import { useAppWallets } from "../app-wallets/AppWalletsContext"; +import DiscoverIcon from "../common/icons/DiscoverIcon"; import UsersIcon from "../common/icons/UsersIcon"; import AppSidebarHeader from "./AppSidebarHeader"; import AppSidebarMenuItems from "./AppSidebarMenuItems"; @@ -19,6 +20,23 @@ import AppUserConnect from "./AppUserConnect"; const MENU = [ { label: "Profile", path: "/profile", icon: UserIcon }, + { label: "Discover", path: "/discover", icon: DiscoverIcon }, + { + label: "Network", + icon: UsersIcon, + children: [ + { label: "Identities", path: "/network" }, + { label: "Activity", path: "/network/activity" }, + { label: "Groups", path: "/network/groups" }, + { label: "NFT Activity", path: "/nft-activity" }, + { label: "Memes Calendar", path: "/meme-calendar" }, + { label: "TDH", path: "/network/tdh" }, + { label: "Metrics", section: true }, + { label: "Definitions", path: "/network/definitions" }, + { label: "Network Stats", path: "/network/stats" }, + { label: "Levels", path: "/network/levels" }, + ], + }, { label: "Tools", icon: WrenchIcon, @@ -70,22 +88,6 @@ const MENU = [ { label: "Release Notes", path: "/about/release-notes" }, ], }, - { - label: "Network", - icon: UsersIcon, - children: [ - { label: "Identities", path: "/network" }, - { label: "Network Activity", path: "/network/activity" }, - { label: "Groups", path: "/network/groups" }, - { label: "NFT Activity", path: "/nft-activity" }, - { label: "Memes Calendar", path: "/meme-calendar" }, - { label: "TDH", path: "/network/tdh" }, - { label: "Metrics", section: true }, - { label: "Definitions", path: "/network/definitions" }, - { label: "Network Stats", path: "/network/stats" }, - { label: "Levels", path: "/network/levels" }, - ], - }, ]; export default function AppSidebar({ diff --git a/components/utils/input/identity/IdentitySearch.tsx b/components/utils/input/identity/IdentitySearch.tsx index 8b2779a868..19ff9ec13e 100644 --- a/components/utils/input/identity/IdentitySearch.tsx +++ b/components/utils/input/identity/IdentitySearch.tsx @@ -3,17 +3,15 @@ import { useQuery } from "@tanstack/react-query"; import { useEffect, useRef, useState, KeyboardEvent, useId } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCircleExclamation, - faMagnifyingGlass, - faXmark, -} from "@fortawesome/free-solid-svg-icons"; +import { faCircleExclamation, faXmark } from "@fortawesome/free-solid-svg-icons"; import { useClickAway, useDebounce, useKeyPressEvent } from "react-use"; import { CommunityMemberMinimal } from "@/entities/IProfile"; import { commonApiFetch } from "@/services/api/common-api"; import CommonProfileSearchItems from "../profile-search/CommonProfileSearchItems"; import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper"; import { getSelectableIdentity } from "@/components/utils/input/profile-search/getSelectableIdentity"; +import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; + export enum IdentitySearchSize { SM = "SM", MD = "MD", @@ -268,8 +266,7 @@ export default function IdentitySearch({ }`} placeholder=" " /> -