Make feed surfaces transparent

src/components/ArcBackground.tsx

@@ -33,6 +33,8 @@ interface ArcBackgroundProps {
   variant: 'down' | 'up' | 'rect';
   /** Extra classes on the <svg> element. */
   className?: string;
+  /** Extra classes on the filled background path. */
+  fillClassName?: string;
 }
 
 /**
@@ -40,7 +42,7 @@ interface ArcBackgroundProps {
  * MobileBottomNav. Draws a semi-transparent filled shape (rectangle + optional
  * curved arc) as a single path so there are no sub-pixel seams between layers.
  */
-export function ArcBackground({ variant, className }: ArcBackgroundProps) {
+export function ArcBackground({ variant, className, fillClassName }: ArcBackgroundProps) {
   const path = variant === 'down' ? ARC_DOWN_PATH : variant === 'up' ? ARC_UP_PATH : RECT_PATH;
   const hasArc = variant !== 'rect';
 
@@ -57,7 +59,7 @@ export function ArcBackground({ variant, className }: ArcBackgroundProps) {
       preserveAspectRatio="none"
       style={hasArc ? (variant === 'up' ? arcUpHeightStyle : arcDownHeightStyle) : fullHeightStyle}
     >
-      <path d={path} className="fill-background/85" />
+      <path d={path} className={cn('fill-background/85', fillClassName)} />
       {variant === 'down' && <path d="M0,34 L50,46 L100,34" fill="none" className="stroke-border" strokeWidth="1" vectorEffect="non-scaling-stroke" strokeLinejoin="round" />}
       {variant === 'up' && <path d="M0,40 L50,16 L100,40" fill="none" className="stroke-border" strokeWidth="1" vectorEffect="non-scaling-stroke" strokeLinejoin="round" />}
     </svg>

src/components/Feed.tsx

@@ -271,8 +271,9 @@ export function Feed({ kinds, tagFilters, header, hideCompose, emptyMessage, fee
   const showSavedFeedTabs = user && !isKindSpecificPage && !tagFilters;
   const useGlobeBackdrop = feedId === 'home' && !kinds && !tagFilters && !header;
   const translucentCardClassName = useGlobeBackdrop
-    ? 'bg-background/70 border-border/50 hover:bg-background/80'
+    ? 'bg-transparent border-border/50 hover:bg-transparent'
     : undefined;
+  const transparentFeedSurfaceClassName = useGlobeBackdrop ? 'bg-transparent' : undefined;
 
   return (
     <main className={cn('flex-1 min-w-0 min-h-dvh', useGlobeBackdrop && 'relative isolate overflow-x-clip')}>
@@ -286,11 +287,11 @@ export function Feed({ kinds, tagFilters, header, hideCompose, emptyMessage, fee
           <LandingHero onJoinClick={() => setAuthDialogOpen(true)} />
         )}
 
-        {!hideCompose && <ComposeBox compact hideBorder />}
+        {!hideCompose && <ComposeBox compact hideBorder className={transparentFeedSurfaceClassName} />}
 
         {/* Tabs (logged in) */}
         {user && (
-          <SubHeaderBar>
+          <SubHeaderBar backgroundFillClassName={transparentFeedSurfaceClassName && 'fill-transparent'}>
             <TabButton label={isKindSpecificPage || tagFilters ? 'Follows' : 'Following'} active={activeTab === 'follows'} onClick={() => handleSetActiveTab('follows')} />
             {!isKindSpecificPage && !tagFilters && (
               <TabButton label="Network" active={activeTab === 'network'} onClick={() => handleSetActiveTab('network')} />

src/components/SubHeaderBar.tsx

@@ -16,6 +16,8 @@ interface SubHeaderBarProps {
   className?: string;
   /** Extra classes on the inner flex container holding the tabs. */
   innerClassName?: string;
+  /** Extra classes on the SVG background fill. */
+  backgroundFillClassName?: string;
   /** Replace the decorative arc with a plain rectangle. */
   noArc?: boolean;
   /** Keep the bar visible when the mobile top bar hides (slides to top-0 instead of off-screen). */
@@ -30,7 +32,7 @@ interface SubHeaderBarProps {
  * Used by all tab bars (Feed, Search, Notifications, etc.) and the MobileTopBar
  * fallback arc.
  */
-export function SubHeaderBar({ children, className, innerClassName, noArc: _noArc, pinned }: SubHeaderBarProps) {
+export function SubHeaderBar({ children, className, innerClassName, backgroundFillClassName, noArc: _noArc, pinned }: SubHeaderBarProps) {
   const [hover, setHover] = useState<HoverSlice | null>(null);
   const [active, setActive] = useState<HoverSlice | null>(null);
   const navHidden = useNavHidden();
@@ -127,7 +129,7 @@ export function SubHeaderBar({ children, className, innerClassName, noArc: _noAr
         )}
         {/* Inner wrapper holds the ArcBackground and tab content. */}
         <div className="relative">
-          <ArcBackground variant="rect" />
+          <ArcBackground variant="rect" fillClassName={backgroundFillClassName} />
           {/* Per-tab hover highlight: a flat-bottomed slab clipped to the hovered tab's x-slice */}
           {hover && (
             <svg