From fd1e6fb64af776c8a77a1d2f178c4b9322d4191a Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 18 Feb 2026 04:06:52 -0600
Subject: [PATCH] Hide Notifications title header on mobile, keep All/Mentions
 tabs

The "Notifications" header with bell icon is redundant with the bottom nav
on mobile, so it's now hidden below the sidebar breakpoint. The All/Mentions
tab bar remains visible as the top element on mobile.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/MobileTopBar.tsx |  2 +-
 src/pages/NotificationsPage.tsx | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index 90d8cccd..f23e1666 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -27,7 +27,7 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
 
       {/* Center: Mew logo */}
       <div className="flex-1 flex items-center justify-center">
-        <MewLogo size={22} />
+        <MewLogo size={28} />
       </div>
 
       {/* Right: spacer for symmetry */}
diff --git a/src/pages/NotificationsPage.tsx b/src/pages/NotificationsPage.tsx
index e48aabaf..459f0e9d 100644
--- a/src/pages/NotificationsPage.tsx
+++ b/src/pages/NotificationsPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useSeoMeta } from '@unhead/react';
-import { ArrowLeft, Bell, Heart, Repeat2, Zap, AtSign, MessageCircle, MoreHorizontal } from 'lucide-react';
+import { Bell, Heart, Repeat2, Zap, AtSign, MessageCircle, MoreHorizontal } from 'lucide-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
@@ -66,11 +66,8 @@ export function NotificationsPage() {
   return (
     <MainLayout>
       <main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-l xl:border-r border-border min-h-screen">
-        {/* Header */}
-        <div className={cn(STICKY_HEADER_CLASS, 'flex items-center gap-4 px-4 h-20 bg-background/80 backdrop-blur-md z-10')}>
-          <Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors sidebar:hidden">
-            <ArrowLeft className="size-5" />
-          </Link>
+        {/* Header — desktop only */}
+        <div className={cn(STICKY_HEADER_CLASS, 'hidden sidebar:flex items-center gap-4 px-4 h-20 bg-background/80 backdrop-blur-md z-10')}>
           <div className="flex items-center gap-2">
             <Bell className="size-5" />
             <h1 className="text-xl font-bold">Notifications</h1>
@@ -78,7 +75,7 @@ export function NotificationsPage() {
         </div>
 
         {/* Tab bar */}
-        <div className="flex border-b border-border">
+        <div className="flex border-b border-border sidebar:sticky sidebar:top-0 bg-background/80 backdrop-blur-md z-10">
           {tabs.map(({ key, label }) => (
             <button
               key={key}