From 35ae4f2f7cb67df8f75636f475d183c162a5dfce Mon Sep 17 00:00:00 2001
From: Lemon <lemonknowsall@gmail.com>
Date: Wed, 18 Mar 2026 18:44:40 -0700
Subject: [PATCH] Add decorative semi-ellipse arc to mobile bottom nav

Adds an SVG arc on top of the MobileBottomNav that blends
seamlessly with the nav bar, creating a unified curved element.
Removes the top border so they feel like one continuous shape.
---
 src/components/MobileBottomNav.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx
index 2ef7d02d..be6fb5b3 100644
--- a/src/components/MobileBottomNav.tsx
+++ b/src/components/MobileBottomNav.tsx
@@ -39,11 +39,24 @@ export function MobileBottomNav() {
 
       <nav
         className={cn(
-          'fixed bottom-0 left-0 right-0 z-40 bg-background/80 backdrop-blur-md border-t border-border sidebar:hidden safe-area-bottom',
+          'fixed bottom-0 left-0 right-0 z-40 bg-background/80 backdrop-blur-md sidebar:hidden safe-area-bottom',
           'transition-transform duration-300 ease-in-out',
           isHidden && 'translate-y-full',
         )}
       >
+        {/* Decorative semi-ellipse arc on top of the nav */}
+        <svg
+          className="absolute left-0 right-0 bottom-full w-full pointer-events-none"
+          viewBox="0 0 100 12"
+          preserveAspectRatio="none"
+          style={{ height: 20 }}
+        >
+          {/* Fill matching the nav background */}
+          <path d="M0,12 Q50,0 100,12 Z" className="fill-background/80" />
+          {/* Stroke matching the nav border */}
+          <path d="M0,12 Q50,0 100,12" className="fill-none stroke-border" vectorEffect="non-scaling-stroke" />
+        </svg>
+
         <div className="h-14 flex items-center">
 
           {/* Feed */}