New desktop layout

FooterWrapper.tsx

@@ -1,16 +1,77 @@
 "use client";
 
+import Footer from "@/components/footer/Footer";
+import { SIDEBAR_WIDTHS } from "@/constants/sidebar";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import useDeviceInfo from "./hooks/useDeviceInfo";
-import Footer from "@/components/footer/Footer";
+import { useSidebarController } from "./hooks/useSidebarController";
 
 export default function FooterWrapper() {
   const { isApp } = useDeviceInfo();
   const pathname = usePathname();
+  const [homeActiveTab, setHomeActiveTab] = useState<string>("latest");
+  const { sidebarWidth, isMobile, isNarrow } = useSidebarController();
+  useEffect(() => {
+    const win = (globalThis as typeof globalThis & { window?: Window }).window;
+    if (win === undefined) {
+      return;
+    }
+
+    const determineInitialTab = () => {
+      try {
+        const params = new URLSearchParams(win.location?.search ?? "");
+        const tabFromQuery = params.get("tab");
+        const savedTab = win.localStorage.getItem("home.activeTab");
+        const resolvedTab = tabFromQuery ?? savedTab;
+        if (resolvedTab) {
+          setHomeActiveTab(resolvedTab);
+        }
+      } catch (error) {
+        console.warn("Failed to determine active home tab", error);
+      }
+    };
+
+    determineInitialTab();
+
+    const handleTabChange = (event: CustomEvent<{ tab?: string }>) => {
+      if (event.detail?.tab) {
+        setHomeActiveTab(event.detail.tab);
+      }
+    };
+
+    win.addEventListener("homeTabChange", handleTabChange as EventListener);
+
+    return () => {
+      win.removeEventListener("homeTabChange", handleTabChange as EventListener);
+    };
+  }, []);
+
+  const homeFeedTabActive = pathname === "/" && homeActiveTab === "feed";
+  const myFeedRoutes = ["/my-feed", "/feed"];
+
   const hideFooter =
     isApp ||
-    ["/waves", "/my-stream", "/open-mobile"].some((path) =>
+    homeFeedTabActive ||
+    myFeedRoutes.some((path) => pathname?.startsWith(path)) ||
+    ["/waves", "/messages", "/notifications", "/open-mobile"].some((path) =>
       pathname?.startsWith(path)
     );
-  return hideFooter ? null : <Footer />;
+
+  if (hideFooter) return null;
+
+  // App mode or small-screen web: no left-rail spacing
+  if (isApp || isMobile) return <Footer />;
+
+  // Desktop WebLayout: match main content's sidebar spacing
+  const sidebarSpacing = isNarrow ? SIDEBAR_WIDTHS.COLLAPSED : sidebarWidth;
+
+  return (
+    <div
+      className="tw-w-full tw-max-w-[82.75rem] tw-mx-auto"
+      style={{ paddingLeft: sidebarSpacing }}
+    >
+      <Footer />
+    </div>
+  );
 }

__mocks__/nextFontMock.js

@@ -8,7 +8,6 @@ const createFontMock = () => ({
 module.exports = {
   Inter: createFontMock,
   Roboto: createFontMock,
-  Poppins: createFontMock,
   Open_Sans: createFontMock,
   Lato: createFontMock,
   Montserrat: createFontMock,

__tests__/app/waveRedirect.test.tsx

@@ -6,6 +6,6 @@ jest.mock("next/navigation", () => ({ redirect: jest.fn() }));
 describe("Wave redirect page", () => {
   it("calls next/navigation redirect with wave param", async () => {
     await WaveRedirect({ params: { wave: "test-wave-123" } } as any);
-    expect(redirect).toHaveBeenCalledWith("/my-stream?wave=test-wave-123");
+    expect(redirect).toHaveBeenCalledWith("/waves?wave=test-wave-123");
   });
 });

__tests__/components/DistributionPlanToolWrapper.test.tsx

@@ -3,9 +3,6 @@ import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
 import DistributionPlanToolWrapper from "@/components/distribution-plan-tool/wrapper/DistributionPlanToolWrapper";
 import { render } from "@testing-library/react";
 
-jest.mock("next/font/google", () => ({
-  Poppins: () => ({ className: "poppins" }),
-}));
 jest.mock("@/components/auth/SeizeConnectContext");
 
 // Mock TitleContext

__tests__/components/about/AboutApply.test.tsx

@@ -19,7 +19,7 @@ describe('AboutApply', () => {
     });
     expect(link).toHaveAttribute(
       'href',
-      'https://6529.io/my-stream?wave=0ecb95d0-d8f2-48e8-8137-bfa71ee8593c'
+      'https://6529.io/waves?wave=0ecb95d0-d8f2-48e8-8137-bfa71ee8593c'
     );
     expect(link).toHaveAttribute('target', '_blank');
   });

__tests__/components/allowlist-tool/common/modals/AllowlistToolCommonModalWrapper.test.tsx

@@ -90,8 +90,9 @@ describe('AllowlistToolCommonModalWrapper', () => {
         <div>content</div>
       </AllowlistToolCommonModalWrapper>
     );
-    const overlay = document.querySelector('.tw-bg-opacity-75') as HTMLElement;
-    fireEvent.mouseDown(overlay);
+    const overlay = document.querySelector('.tw-bg-opacity-50');
+    expect(overlay).not.toBeNull();
+    fireEvent.mouseDown(overlay as Element);
     expect(handleClose).toHaveBeenCalledTimes(1);
   });
 

__tests__/components/block-picker/BlockPickerTimeWindowSelectList.test.tsx

@@ -2,10 +2,6 @@ import { BlockPickerTimeWindow } from "@/app/tools/block-finder/page.client";
 import BlockPickerTimeWindowSelectList from "@/components/block-picker/BlockPickerTimeWindowSelectList";
 import { fireEvent, render, screen } from "@testing-library/react";
 
-jest.mock("next/font/google", () => ({
-  Poppins: () => ({ className: "poppins" }),
-}));
-
 describe("BlockPickerTimeWindowSelectList", () => {
   const options = [
     { title: "One", value: BlockPickerTimeWindow.ONE_MINUTE },

__tests__/components/brain/Brain.test.tsx

@@ -1,40 +1,43 @@
 import { render, screen } from '@testing-library/react';
-let useBreakpointMock = jest.fn();
-
-jest.mock('react-use', () => ({
-  createBreakpoint: () => useBreakpointMock,
-}));
+import Brain from '@/components/brain/Brain';
 
 jest.mock('@/components/brain/BrainMobile', () => ({
   __esModule: true,
-  default: ({ children }: any) => <div data-testid="mobile">{children}</div>,
+  default: ({ children }: any) => <div data-testid='mobile'>{children}</div>,
 }));
 
 jest.mock('@/components/brain/BrainDesktop', () => ({
   __esModule: true,
-  default: ({ children }: any) => <div data-testid="desktop">{children}</div>,
+  default: ({ children }: any) => <div data-testid='desktop'>{children}</div>,
 }));
 
-import Brain from '@/components/brain/Brain';
+jest.mock('@/hooks/useDeviceInfo', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const useDeviceInfo = jest.requireMock('@/hooks/useDeviceInfo').default as jest.Mock;
 
 describe('Brain', () => {
   beforeEach(() => {
-    useBreakpointMock.mockReset();
+    useDeviceInfo.mockReset();
   });
 
-  it('renders mobile version when breakpoint is S', () => {
-    useBreakpointMock.mockReturnValue('S');
+  it('renders mobile version when running inside the app', () => {
+    useDeviceInfo.mockReturnValue({ isApp: true });
     render(<Brain>child</Brain>);
+
     expect(screen.getByTestId('mobile')).toBeInTheDocument();
     expect(screen.getByText('child')).toBeInTheDocument();
-    expect(screen.queryByTestId('desktop')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('desktop')).toBeNull();
   });
 
   it('renders desktop version otherwise', () => {
-    useBreakpointMock.mockReturnValue('LG');
+    useDeviceInfo.mockReturnValue({ isApp: false });
     render(<Brain>desk</Brain>);
+
     expect(screen.getByTestId('desktop')).toBeInTheDocument();
     expect(screen.getByText('desk')).toBeInTheDocument();
-    expect(screen.queryByTestId('mobile')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('mobile')).toBeNull();
   });
 });

__tests__/components/brain/BrainDesktop.test.tsx

@@ -14,16 +14,22 @@ jest.mock('@/components/brain/BrainDesktopDrop', () => jest.fn(({ onClose }) =>
 jest.mock('@/components/brain/ContentTabContext', () => ({ ContentTabProvider: ({children}:any) => <div>{children}</div> }));
 jest.mock('@/components/brain/my-stream/layout/LayoutContext', () => ({ useLayout: () => ({ contentContainerStyle:{} }) }));
 jest.mock('@tanstack/react-query', () => ({ useQuery: jest.fn(), keepPreviousData:{} }));
+jest.mock('@/hooks/useSidebarState', () => ({
+  __esModule: true,
+  useSidebarState: jest.fn()
+}));
 
 import BrainDesktop from '@/components/brain/BrainDesktop';
+import { useSidebarState } from '@/hooks/useSidebarState';
 
 const mockedRouter = useRouter as jest.Mock;
 const mockedUseSearchParams = useSearchParams as jest.Mock;
 const mockedUsePathname = usePathname as jest.Mock;
 const mockedUseQuery = useQuery as jest.Mock;
 const mockedDrop = require('@/components/brain/BrainDesktopDrop');
+const mockedUseSidebarState = useSidebarState as jest.Mock;
 
-function setup(query:any){
+function setup(query:any, options?: { sidebarOpen?: boolean }) {
   const push = jest.fn();
   const searchParams = {
     get: jest.fn((key:string) => query[key] || null),
@@ -41,30 +47,41 @@ function setup(query:any){
   mockedUseQuery.mockReturnValue({ data: query.drop ? { id: query.drop } : null });
   rightMock.mockClear();
   (mockedDrop as jest.Mock).mockClear();
+  mockedUseSidebarState.mockReturnValue({
+    isRightSidebarOpen: options?.sidebarOpen ?? true,
+    closeRightSidebar: jest.fn(),
+    openRightSidebar: jest.fn(),
+    toggleRightSidebar: jest.fn()
+  });
   return { push, searchParams, ...render(<BrainDesktop>child</BrainDesktop>) };
 }
 
 describe('BrainDesktop', () => {
   it('shows right sidebar when wave present', () => {
-    setup({ wave:'1' });
+    setup({ wave:'1' }, { sidebarOpen: true });
     expect(screen.getByTestId('right')).toBeInTheDocument();
     expect(screen.queryByTestId('drop')).toBeNull();
   });
 
+  it('does not show right sidebar when closed', () => {
+    setup({ wave:'1' }, { sidebarOpen: false });
+    expect(screen.queryByTestId('right')).toBeNull();
+  });
+
   it('shows drop overlay when drop param set', () => {
-    setup({ wave:'1', drop:'d1' });
+    setup({ wave:'1', drop:'d1' }, { sidebarOpen: true });
     expect(screen.getByTestId('drop')).toBeInTheDocument();
     expect(screen.queryByTestId('right')).toBeNull();
   });
 
   it('removes drop param on close', () => {
-    const { push } = setup({ wave:'1', drop:'d1' });
+    const { push } = setup({ wave:'1', drop:'d1' }, { sidebarOpen: true });
     screen.getByTestId('drop').click();
     expect(push).toHaveBeenCalledWith('/brain?wave=1', { scroll: false });
   });
 
   it('handles drop click from sidebar', () => {
-    const { push } = setup({ wave:'1' });
+    const { push } = setup({ wave:'1' }, { sidebarOpen: true });
     const call = (rightMock.mock.calls[0] as any)[0];
     call.onDropClick({ id:'new' });
     expect(push).toHaveBeenCalledWith('/brain?wave=1&drop=new', { scroll: false });

__tests__/components/brain/BrainMobile.test.tsx

@@ -78,7 +78,7 @@ describe('BrainMobile', () => {
   });
 
   it('shows notifications view when path matches', async () => {
-    mockPathname = '/my-stream/notifications';
+    mockPathname = '/notifications';
     render(<BrainMobile>child</BrainMobile>);
     await waitFor(() => {
       expect(screen.getByTestId('notifications')).toBeInTheDocument();

__tests__/components/brain/NotificationsWrapper.test.tsx

@@ -48,6 +48,6 @@ describe('NotificationsWrapper', () => {
     );
     screen.getByTestId('items').click();
     expect(setActive).toHaveBeenCalledTimes(2);
-    expect(push).toHaveBeenCalledWith('/my-stream?wave=w&serialNo=1/');
+    expect(push).toHaveBeenCalledWith('/waves?wave=w&serialNo=1/');
   });
 });

__tests__/components/brain/content/BrainContent.test.tsx

@@ -9,6 +9,11 @@ jest.mock('react-use', () => ({
   createBreakpoint: () => () => bpValue,
 }));
 
+jest.mock('@/hooks/useDeviceInfo', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({ isApp: true })),
+}));
+
 jest.mock('@/components/brain/my-stream/layout/LayoutContext', () => ({
   useLayout: () => ({ registerRef }),
 }));

__tests__/components/brain/content/BrainContentPinnedWave.test.tsx

@@ -24,6 +24,11 @@ jest.mock('@/hooks/usePrefetchWaveData', () => ({
   usePrefetchWaveData: () => prefetch,
 }));
 
+jest.mock('@/hooks/useDeviceInfo', () => ({
+  __esModule: true,
+  default: () => ({ isApp: false }),
+}));
+
 const registerWave = jest.fn();
 jest.mock('@/contexts/wave/MyStreamContext', () => ({
   useMyStream: () => ({ registerWave }),
@@ -82,7 +87,7 @@ describe('BrainContentPinnedWave', () => {
     const { container } = renderComponent();
 
     expect(screen.getAllByText('Wave 1').length).toBeGreaterThan(0);
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/my-stream?wave=1');
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/waves?wave=1');
 
     await user.hover(container.firstChild as HTMLElement);
     expect(onMouseEnter).toHaveBeenCalledWith('1');
@@ -94,15 +99,15 @@ describe('BrainContentPinnedWave', () => {
 
     await user.click(screen.getByRole('link'));
     expect(onMouseLeave).toHaveBeenCalled();
-    expect(push).toHaveBeenCalledWith('/my-stream?wave=1');
+    expect(push).toHaveBeenCalledWith('/waves?wave=1');
   });
 
-  it('uses /my-stream when viewing active wave and skips prefetch', async () => {
+  it('uses waves route when viewing active wave and skips prefetch', async () => {
     searchParams.set('wave', '1');
     const user = userEvent.setup();
     const { container } = renderComponent();
 
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/my-stream');
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/waves');
 
     await user.hover(container.firstChild as HTMLElement);
     expect(onMouseEnter).toHaveBeenCalledWith('1');

__tests__/components/brain/content/BrainContentPinnedWaves.test.tsx

@@ -25,7 +25,14 @@ jest.mock('@/components/brain/content/BrainContentPinnedWave', () => ({
   ),
 }));
 
+jest.mock('@/contexts/wave/MyStreamContext', () => ({
+  useMyStream: jest.fn(),
+}));
+
 import BrainContentPinnedWaves from '@/components/brain/content/BrainContentPinnedWaves';
+import { useMyStream } from '@/contexts/wave/MyStreamContext';
+
+const mockUseMyStream = useMyStream as jest.Mock;
 
 beforeAll(() => {
   (window as any).matchMedia = (window as any).matchMedia || (() => ({ matches: false, addListener: jest.fn(), removeListener: jest.fn() }));
@@ -40,6 +47,7 @@ describe('BrainContentPinnedWaves', () => {
     replace.mockClear();
     mockPinnedIds = [];
     searchParams.delete('wave');
+    mockUseMyStream.mockReturnValue({ directMessages: { list: [] } });
   });
 
   it('returns null when no pinned waves', () => {
@@ -59,6 +67,6 @@ describe('BrainContentPinnedWaves', () => {
     expect(wave2).toBeInTheDocument();
     await user.click(wave1);
     expect(removeId).toHaveBeenCalledWith('1');
-    expect(replace).toHaveBeenCalledWith('/my-stream');
+    expect(replace).toHaveBeenCalledWith('/waves');
   });
 });

__tests__/components/brain/direct-messages/DirectMessagesList.test.tsx

@@ -82,8 +82,8 @@ describe('DirectMessagesList', () => {
   });
 
   it('shows connect wallet placeholder when not authenticated', () => {
-    const { container } = renderWithAuth(null);
-    expect(container.querySelector('#my-stream-connect')).toBeInTheDocument();
+    renderWithAuth(null);
+    expect(screen.getByTestId('connect')).toBeInTheDocument();
     expect(screen.getByTestId('connect')).toBeInTheDocument();
   });