From 5f6b66c40ec26a08387d2eff6f52ca607111b6ef Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Mon, 20 Oct 2025 16:12:47 +0200
Subject: [PATCH] feat: add BottomNav component for mobile navigation and
 update Layout to include it

---
 src/components/BottomNav.tsx                | 109 ++++++++++++++++++++
 src/components/Header.tsx                   |  59 +----------
 src/components/Layout.tsx                   |   9 +-
 src/components/ProfessionalBlogPostForm.tsx |   4 +-
 4 files changed, 123 insertions(+), 58 deletions(-)
 create mode 100644 src/components/BottomNav.tsx

diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
new file mode 100644
index 0000000..3cbe1f4
--- /dev/null
+++ b/src/components/BottomNav.tsx
@@ -0,0 +1,109 @@
+import { Link, useLocation } from 'react-router-dom';
+import { Home, Users, Bookmark, PenSquare, User as UserIcon } from 'lucide-react';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { nip19 } from 'nostr-tools';
+
+export function BottomNav() {
+  const { user, metadata } = useCurrentUser();
+  const location = useLocation();
+
+  const profilePath = user ? `/${nip19.npubEncode(user.pubkey)}` : '/';
+
+  const isActive = (pathStartsWith: string | string[]) => {
+    const paths = Array.isArray(pathStartsWith) ? pathStartsWith : [pathStartsWith];
+    return paths.some((p) => location.pathname === p || location.pathname.startsWith(p + '/'));
+  };
+
+  return (
+    <nav
+      className="sm:hidden fixed bottom-0 inset-x-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+      role="navigation"
+      aria-label="Bottom navigation"
+    >
+      <div className="container px-4 sm:px-6 lg:px-8">
+        <ul className="grid grid-cols-5 h-16 items-center">
+          <li className="flex items-stretch">
+            <Link
+              to="/"
+              aria-label="Home"
+              className={
+                'flex-1 flex items-center justify-center gap-1 text-sm transition-colors ' +
+                (isActive('/') ? 'text-foreground' : 'text-muted-foreground hover:text-foreground')
+              }
+            >
+              <Home className="h-5 w-5" />
+              <span className="sr-only">Home</span>
+            </Link>
+          </li>
+          <li className="flex items-stretch">
+            <Link
+              to="/following"
+              aria-label="Following"
+              className={
+                'flex-1 flex items-center justify-center gap-1 text-sm transition-colors ' +
+                (isActive('/following') ? 'text-foreground' : 'text-muted-foreground hover:text-foreground')
+              }
+            >
+              <Users className="h-5 w-5" />
+              <span className="sr-only">Following</span>
+            </Link>
+          </li>
+          <li className="flex items-stretch">
+            <Link
+              to="/bookmarks"
+              aria-label="Bookmarks"
+              className={
+                'flex-1 flex items-center justify-center gap-1 text-sm transition-colors ' +
+                (isActive('/bookmarks') ? 'text-foreground' : 'text-muted-foreground hover:text-foreground')
+              }
+            >
+              <Bookmark className="h-5 w-5" />
+              <span className="sr-only">Bookmarks</span>
+            </Link>
+          </li>
+          <li className="flex items-stretch">
+            <Link
+              to="/create"
+              aria-label="Create"
+              className={
+                'flex-1 flex items-center justify-center gap-1 text-sm transition-colors ' +
+                (isActive('/create') ? 'text-foreground' : 'text-muted-foreground hover:text-foreground')
+              }
+            >
+              <PenSquare className="h-5 w-5" />
+              <span className="sr-only">Create</span>
+            </Link>
+          </li>
+          <li className="flex items-stretch">
+            <Link
+              to={profilePath}
+              aria-label="Profile"
+              className={
+                'flex-1 flex items-center justify-center gap-1 text-sm transition-colors ' +
+                (isActive(profilePath) ? 'text-foreground' : 'text-muted-foreground hover:text-foreground')
+              }
+            >
+              {user ? (
+                <Avatar className="h-7 w-7">
+                  {metadata?.picture ? (
+                    <AvatarImage src={metadata.picture} alt={metadata?.display_name || metadata?.name || 'Profile'} />
+                  ) : (
+                    <AvatarFallback>
+                      <UserIcon className="h-4 w-4" />
+                    </AvatarFallback>
+                  )}
+                </Avatar>
+              ) : (
+                <UserIcon className="h-5 w-5" />
+              )}
+              <span className="sr-only">Profile</span>
+            </Link>
+          </li>
+        </ul>
+      </div>
+      {/* Safe area for iOS */}
+      <div className="h-[env(safe-area-inset-bottom)]" />
+    </nav>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 074af51..b4bef6d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,14 +2,11 @@ import { Link } from 'react-router-dom';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { LoginArea } from '@/components/auth/LoginArea';
 import { Button } from '@/components/ui/button';
-import { PenSquare, Menu, Bookmark, Users } from 'lucide-react';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { PenSquare, Bookmark, Users } from 'lucide-react';
 import { ThemeToggle } from '@/components/ThemeToggle';
-import { useState } from 'react';
 
 export function Header() {
   const { user } = useCurrentUser();
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -53,56 +50,10 @@ export function Header() {
           <LoginArea className="max-w-60" />
         </div>
 
-        {/* Mobile Menu */}
-        <div className="sm:hidden">
-          <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <SheetTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <Menu className="h-5 w-5" />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="right" className="w-[280px]">
-              <div className="flex flex-col gap-6 mt-8">
-                {/* Theme Toggle in Menu */}
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium">Theme</span>
-                  <ThemeToggle />
-                </div>
-
-                {/* Login Area in Menu */}
-                <div className="flex flex-col gap-2">
-                  <span className="text-sm font-medium">Account</span>
-                  <LoginArea className="w-full" />
-                </div>
-
-                {/* Navigation for logged in users */}
-                {user && (
-                  <>
-                    <div className="border-t pt-4 space-y-2">
-                      <Button variant="outline" className="w-full" asChild onClick={() => setIsMenuOpen(false)}>
-                        <Link to="/following">
-                          <Users className="h-4 w-4 mr-2" />
-                          Following
-                        </Link>
-                      </Button>
-                      <Button variant="outline" className="w-full" asChild onClick={() => setIsMenuOpen(false)}>
-                        <Link to="/bookmarks">
-                          <Bookmark className="h-4 w-4 mr-2" />
-                          Bookmarks
-                        </Link>
-                      </Button>
-                      <Button variant="default" className="w-full" asChild onClick={() => setIsMenuOpen(false)}>
-                        <Link to="/create">
-                          <PenSquare className="h-4 w-4 mr-2" />
-                          New Post
-                        </Link>
-                      </Button>
-                    </div>
-                  </>
-                )}
-              </div>
-            </SheetContent>
-          </Sheet>
+        {/* Mobile: show LoginArea in header (bottom nav is still used for nav) */}
+        <div className="sm:hidden flex items-center">
+          <ThemeToggle />
+          <LoginArea />
         </div>
       </div>
     </header>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 461da80..123627a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Header } from './Header';
+import { BottomNav } from './BottomNav';
 import packageJson from '../../package.json';
 
 interface LayoutProps {
@@ -10,10 +11,14 @@ export function Layout({ children }: LayoutProps) {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-1">
+      {/* Add bottom padding on mobile so content isn't hidden behind the bottom nav */}
+      <main className="flex-1 pb-20 sm:pb-0">
         {children}
       </main>
-      <footer className="border-t py-6 md:py-8">
+      {/* Mobile-only bottom navigation */}
+      <BottomNav />
+      {/* Add extra bottom padding on mobile so footer content can scroll above the BottomNav overlay */}
+      <footer className="border-t pt-6 pb-24 sm:pb-8 md:pt-8">
         <div className="container px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
             <p>Powered by Nostr</p>
diff --git a/src/components/ProfessionalBlogPostForm.tsx b/src/components/ProfessionalBlogPostForm.tsx
index e387bd1..059669b 100644
--- a/src/components/ProfessionalBlogPostForm.tsx
+++ b/src/components/ProfessionalBlogPostForm.tsx
@@ -253,7 +253,7 @@ export function ProfessionalBlogPostForm({ editIdentifier }: ProfessionalBlogPos
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 pb-24 sm:pb-0">
       {/* Header */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
@@ -451,7 +451,7 @@ export function ProfessionalBlogPostForm({ editIdentifier }: ProfessionalBlogPos
 
       {/* Mobile Action Buttons */}
       {isMobile && (
-        <Card className="sticky bottom-4 shadow-lg">
+        <Card className="sticky bottom-[calc(5rem+env(safe-area-inset-bottom))] shadow-lg">
           <CardContent className="py-4">
             <div className="flex gap-2">
               <Button