feat: scroll-fade under pinned breadcrumb on content-area scroll

Once the content area has scrolled, a mask fades its top edge to
transparent so content dissolves into the pinned breadcrumb rather than
cutting off abruptly. Masking (rather than overlaying a matching colour)
reveals the real page backdrop — which is a theme gradient with
background-attachment: fixed, so no single colour could match it — making
the fade seamless on every theme. Toggled by a lightweight scroll listener
(re-renders only when crossing scrollTop 0), so content isn't faded at
rest and pages whose content fits show nothing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: interacsean

packages/core/src/components/sidebar/sidebar-layout.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from "react";
 import { SidebarProvider, SidebarInset, SidebarTrigger, useSidebar } from "@/components/sidebar";
 import { AppShellOutlet } from "@/components/content";
 import { AppearanceSwitcher } from "@/components/appearance-switcher";
@@ -68,6 +69,17 @@ const HidableSidebarTrigger = () => {
 export const SidebarLayout = (props: SidebarLayoutProps) => {
   const Children = props.children ? props.children({ Outlet: AppShellOutlet }) : null;
 
+  // Toggle a scroll-fade under the pinned breadcrumb once the content area
+  // has scrolled, so content dissolves into the header instead of cutting off
+  // abruptly. State only flips when crossing 0, so this doesn't re-render on
+  // every scroll frame.
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [scrolled, setScrolled] = useState(false);
+  const handleScroll = () => {
+    const next = (scrollRef.current?.scrollTop ?? 0) > 0;
+    setScrolled((prev) => (prev === next ? prev : next));
+  };
+
   return (
     <SidebarProvider
       defaultOpen={props.defaultOpen}
@@ -100,11 +112,22 @@ export const SidebarLayout = (props: SidebarLayoutProps) => {
               margin / padding pair mirrors SidebarInset's own responsive
               padding (px-4, → px-8 at md when the sidebar is the inset
               variant). */}
+          {/* Scroll-fade: once scrolled, a mask fades the top edge of the
+              content to transparent so it dissolves into the pinned breadcrumb
+              rather than cutting off. Masking (rather than overlaying a matching
+              colour) reveals the real page backdrop — which is a theme gradient
+              with `background-attachment: fixed`, so no single colour could
+              match it — making the fade seamless on every theme. Only applied
+              when scrolled, so content isn't faded at rest. */}
           <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            data-scrolled={scrolled ? "" : undefined}
             className={cn(
               "astw:flex astw:flex-col astw:gap-4 astw:flex-1 astw:min-h-0 astw:overflow-y-auto",
               "astw:-mr-4 astw:pr-4",
               "astw:md:group-has-data-[variant=inset]/sidebar-wrapper:-mr-8 astw:md:group-has-data-[variant=inset]/sidebar-wrapper:pr-8",
+              "astw:data-[scrolled]:[mask-image:linear-gradient(to_bottom,transparent,black_2rem)]",
             )}
           >
             {Children ?? <AppShellOutlet />}