6529-Collections · ragnep · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git 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(<AppSidebar open={true} onClose={onClose} />);
+      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
@@ -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
@@ -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
@@ -43,7 +43,7 @@ export enum BrainView {
 }
 
 interface Props {
-  children: ReactNode;
+  readonly children: ReactNode;
 }
 
 const BrainMobile: React.FC<Props> = ({ children }) => {
@@ -268,11 +268,15 @@ const BrainMobile: React.FC<Props> = ({ children }) => {
     [BrainView.NOTIFICATIONS]: <BrainNotifications />,
   };
 
+  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 (
     <div className="tw-relative tw-flex tw-flex-col tw-h-full">
       {createOverlay}
       {isDropOpen && (
-        <div className="tw-absolute tw-inset-0 tw-z-1000">
+        <div className={dropOverlayClass}>
           <BrainDesktopDrop
             drop={{
               type: DropSize.FULL,

diff --git a/components/brain/my-stream/MyStreamWaveLeaderboard.tsx b/components/brain/my-stream/MyStreamWaveLeaderboard.tsx
@@ -81,7 +81,7 @@ const MyStreamWaveLeaderboard: React.FC<MyStreamWaveLeaderboardProps> = ({
   return (
     <div className={containerClassName} style={leaderboardViewStyle}>
       {/* Main content container */}
-      <div className="tw-pt-4">
+      <div className="tw-pt-2 md:tw-pt-4">
         <WaveLeaderboardTime wave={wave} />
       </div>
 

diff --git a/components/brain/right-sidebar/BrainRightSidebarContent.tsx b/components/brain/right-sidebar/BrainRightSidebarContent.tsx
@@ -11,7 +11,7 @@ const BrainRightSidebarContent: React.FC<BrainRightSidebarContentProps> = ({
   wave,
 }) => {
   return (
-    <div className="tw-flex tw-flex-col tw-h-full tw-overflow-y-auto">
+    <div className="tw-flex tw-flex-col tw-overflow-y-auto">
       <WaveSpecs wave={wave} useRing={false} />
       <WaveGroups wave={wave} useRing={false} />
     </div>

diff --git a/components/common/TabToggleWithOverflow.tsx b/components/common/TabToggleWithOverflow.tsx
@@ -179,7 +179,7 @@ export const TabToggleWithOverflow: React.FC<TabToggleWithOverflowProps> = ({
           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
@@ -12,13 +12,31 @@ 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";
 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
@@ -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=" "
       />
-      <FontAwesomeIcon
-        icon={faMagnifyingGlass}
+      <MagnifyingGlassIcon
         className={`${ICON_CLASSES[size]} tw-text-iron-300 tw-pointer-events-none tw-absolute tw-left-3 tw-h-5 tw-w-5`}
         aria-hidden="true"
       />

diff --git a/components/waves/drop/DefaultSingleWaveDrop.tsx b/components/waves/drop/DefaultSingleWaveDrop.tsx
@@ -33,7 +33,7 @@ export const DefaultSingleWaveDrop: React.FC<DefaultSingleWaveDropProps> = ({
   );
 
   return (
-    <div className="tw-w-full tw-h-full tw-bg-iron-950 tw-flex tw-flex-col  tw-pb-[env(safe-area-inset-bottom,0px)]">
+    <div className="tw-w-full tw-h-full tw-bg-iron-950 tw-flex tw-flex-col tw-pb-[env(safe-area-inset-bottom,0px)]">
       <SingleWaveDropHeader
         activeTab={activeTab}
         setActiveTab={setActiveTab}

diff --git a/components/waves/drop/SingleWaveDropChat.tsx b/components/waves/drop/SingleWaveDropChat.tsx
@@ -85,7 +85,7 @@ export const SingleWaveDropChat: React.FC<SingleWaveDropChatProps> = ({
           <div className="tw-h-full tw-w-full tw-flex tw-items-stretch">
             <div className={containerClassName} style={containerStyle}>
               <div
-                className={`tw-flex-1 tw-min-h-0 ${isApp ? "tw-mb-20" : ""}`}>
+                className={`tw-flex-1 tw-min-h-0 ${isApp ? "tw-mb-8" : ""}`}>
                 <WaveDropsAll
                   waveId={wave.id}
                   onReply={({

diff --git a/components/waves/drop/SingleWaveDropClose.tsx b/components/waves/drop/SingleWaveDropClose.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface SingleWaveDropCloseProps {
   readonly onClose: () => void;
@@ -8,23 +9,13 @@ export const SingleWaveDropClose: React.FC<SingleWaveDropCloseProps> = ({ onClos
   return (
     <button
       type="button"
-      className="tw-absolute tw-z-1000 tw-top-2.5 lg:tw-top-0 tw-right-4 tw-text-iron-300 desktop-hover:hover:tw-text-iron-400 tw-bg-transparent tw-border-0 tw-transition tw-duration-300 tw-ease-out"
+      className="tw-absolute tw-z-1000 tw-top-[calc(env(safe-area-inset-top,0px)+0.5rem)] tw-right-4 lg:tw-top-0 tw-text-iron-300 desktop-hover:hover:tw-text-iron-400 tw-bg-transparent tw-border-0 tw-transition tw-duration-300 tw-ease-out"
       onClick={onClose}
     >
-      <svg
-        className="tw-h-6 tw-w-6"
+      <XMarkIcon
         aria-hidden="true"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth="1.5"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M6 18L18 6M6 6l12 12"
-        />
-      </svg>
+        className="tw-h-6 tw-w-6 tw-flex-shrink-0"
+      />
     </button>
   );
 }; 
diff --git a/components/waves/drop/SingleWaveDropHeader.tsx b/components/waves/drop/SingleWaveDropHeader.tsx
@@ -15,9 +15,9 @@ export const SingleWaveDropHeader: React.FC<SingleWaveDropHeaderProps> = ({
   onClose,
 }) => {
   return (
-    <div className="lg:tw-hidden tw-inline-flex tw-w-full tw-justify-between">
+    <div className="lg:tw-hidden tw-inline-flex tw-w-full tw-justify-between tw-items-center tw-relative tw-px-4 tw-pt-[env(safe-area-inset-top,0px)] tw-gap-3">
       <SingleWaveDropTabs activeTab={activeTab} setActiveTab={setActiveTab} />
       <SingleWaveDropClose onClose={onClose} />
     </div>
   );
-}; 
+}; 
diff --git a/components/waves/drops/wave-drops-all/subcomponents/WaveDropsTypingIndicator.tsx b/components/waves/drops/wave-drops-all/subcomponents/WaveDropsTypingIndicator.tsx
@@ -15,7 +15,7 @@ export const WaveDropsTypingIndicator: React.FC<
 
   return (
     <div
-      className={`tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-inset-x-0 tw-mr-2 tw-px-4 tw-py-1 tw-flex tw-items-center tw-gap-x-2 tw-bg-iron-950 tw-transition-opacity tw-duration-300 tw-ease-in-out ${visibilityClass}`}
+      className={`tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-inset-x-0 tw-mr-2 tw-px-4 tw-pb-1.5 tw-pt-1.5 tw-flex tw-items-center tw-gap-x-2 tw-transition-opacity tw-duration-300 tw-ease-in-out tw-bg-gradient-to-t tw-from-iron-950 tw-via-iron-950/90 tw-to-transparent ${visibilityClass}`}
     >
       <div className="tw-flex tw-items-center tw-gap-x-0.5">
         <FontAwesomeIcon

diff --git a/components/waves/groups/WaveGroups.tsx b/components/waves/groups/WaveGroups.tsx
@@ -15,7 +15,7 @@ export default function WaveGroups({ wave, useRing = true }: WaveGroupsProps) {
     : "tw-rounded-b-xl lg:tw-rounded-b-none";
 
   return (
-    <div className="tw-w-full tw-border-t tw-border-iron-800 tw-border-solid tw-border-x-0 tw-border-b-0">
+    <div className="tw-border-t tw-border-iron-800 tw-border-solid tw-border-x-0 tw-border-b-0">
       <div className={`tw-h-full tw-bg-iron-950 tw-relative ${ringClasses}`}>
         <div className="tw-h-full tw-overflow-y-auto tw-overflow-x-hidden no-scrollbar">
           <div className="tw-pb-4">

diff --git a/components/waves/header/WaveHeader.tsx b/components/waves/header/WaveHeader.tsx
@@ -48,7 +48,7 @@ export default function WaveHeader({
 
   return (
     <div
-      className={`tw-h-full tw-bg-iron-950 tw-relative tw-overflow-auto ${ringClasses}`}
+      className={`tw-bg-iron-950 tw-relative tw-overflow-auto ${ringClasses}`}
     >
       <div
         className={`${

diff --git a/components/waves/list/WaveItem.tsx b/components/waves/list/WaveItem.tsx
@@ -291,7 +291,7 @@ export default function WaveItem({
       onClick={handleCardClick}
       onKeyDown={handleCardKeyDown}
     >
-      <div className="tw-relative tw-aspect-[16/9] tw-overflow-hidden tw-rounded-xl">
+      <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-aspect-[16/8.5] sm:tw-aspect-[16/9]">
         <div
           className="tw-absolute tw-inset-0 tw-rounded-xl"
           style={{
@@ -309,7 +309,7 @@ export default function WaveItem({
           />
         )}
         <div
-          className="tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-h-40 sm:tw-h-44 md:tw-h-48"
+          className="tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-h-36 sm:tw-h-44 md:tw-h-48"
           style={{
             background:
               "linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.64) 32%, rgba(0,0,0,0.30) 64%, rgba(0,0,0,0.00) 100%)",

diff --git a/components/waves/list/header/WavesListSearch.tsx b/components/waves/list/header/WavesListSearch.tsx
@@ -1,6 +1,7 @@
 import IdentitySearch, {
   IdentitySearchSize,
 } from "@/components/utils/input/identity/IdentitySearch";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
 export default function WavesListSearch({
   identity,
@@ -17,18 +18,10 @@ export default function WavesListSearch({
     <div className="tw-flex tw-flex-col tw-w-full sm:tw-flex-row sm:tw-items-center tw-gap-4 xl:tw-w-1/2 xl:tw-pr-3">
       <div className="tw-flex-1">
         <div className="tw-relative">
-          <svg
+          <MagnifyingGlassIcon
             className="tw-text-iron-300 tw-pointer-events-none tw-absolute tw-left-3 tw-top-3 tw-h-5 tw-w-5"
-            viewBox="0 0 20 20"
-            fill="currentColor"
             aria-hidden="true"
-          >
-            <path
-              fillRule="evenodd"
-              d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
+          />
           {waveName && (
             <svg
               onClick={() => setWaveName(null)}

diff --git a/components/waves/specs/WaveSpecs.tsx b/components/waves/specs/WaveSpecs.tsx
@@ -15,9 +15,8 @@ export default function WaveSpecs({ wave, useRing = true }: WaveSpecsProps) {
     : "";
 
   return (
-    <div>
       <div
-        className={`tw-h-full tw-bg-iron-950 tw-relative tw-overflow-auto ${ringClasses}`}
+        className={`tw-bg-iron-950 tw-relative tw-overflow-auto ${ringClasses}`}
       >
         <div className="tw-pb-4">
           <div className="tw-px-4 tw-pt-3 tw-flex tw-justify-between tw-items-center">
@@ -50,6 +49,5 @@ export default function WaveSpecs({ wave, useRing = true }: WaveSpecsProps) {
           </div>
         </div>
       </div>
-    </div>
   );
 }