more material 3 tweaks

src/components/Header.tsx

···
 import { Link, useRouter } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+
+import { isAtTopAtom } from "~/utils/atoms";
 
 export function Header({
   backButtonCallback,
···
   title?: string;
 }) {
   const router = useRouter();
+  const [isAtTop] = useAtom(isAtTopAtom);
   //const what = router.history.
   return (
-    <div className="flex items-center gap-4 px-4 py-3 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
+    <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 ${!isAtTop && "shadow"} border-gray-200 dark:border-gray-700`}>
       {backButtonCallback ? (<Link
         to=".."
         //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"

src/components/InfiniteCustomFeed.tsx

···
       <button
         onClick={handleRefresh}
         disabled={isRefetching}
-        className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:bg-gray-400 disabled:cursor-not-allowed"
+        className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed"
         aria-label="Refresh feed"
       >
-        {isRefetching ? <RefreshIcon className="h-6 w-6 text-gray-600 dark:text-gray-400 animate-spin" /> : <RefreshIcon className="h-6 w-6 text-gray-600 dark:text-gray-400" />}
+        <RefreshIcon className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} />
       </button>
     </>
   );

src/components/UniversalPostRenderer.tsx

···
           // dont cursor: "pointer",
           borderBottomWidth: bottomBorder ? (isQuote ? 0 : 1) : 0,
         }}
-        className="border-gray-300 dark:border-gray-600"
+        className="border-gray-300 dark:border-gray-800"
       >
         {isRepost && (
           <div
···
               width: isQuote ? 16 : 42,
               height: isQuote ? 16 : 42,
             }}
-            className="border border-gray-300 dark:border-gray-600 bg-gray-300 dark:bg-gray-600"
+            className="border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600"
           />
         </div>
         <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}>
···
                 hydrate embeds this deep but the connection here is implicit
                 todo: idk make this a real part of the embed shim so its not implicit */
               <>
-                <div className="border-gray-300 dark:border-gray-600 p-3 rounded-xl border italic text-gray-400 text-[14px]">
+                <div className="border-gray-300 dark:border-gray-800 p-3 rounded-xl border italic text-gray-400 text-[14px]">
                   (there is an embed here thats too deep to render)
                 </div>
               </>
···
                       borderBottomWidth: 1,
                       marginBottom: 8,
                     }} // important for height animation
-                    className="text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700"
+                    className="text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-800 was7"
                   >
                     {fullDateTimeFormat(post.indexedAt)}
                   </div>
···
             //boxShadow: theme.cardShadow,
             overflow: "hidden",
           }}
-          className="shadow border border-gray-200 dark:border-gray-700"
+          className="shadow border border-gray-200 dark:border-gray-800 was7"
         >
           <UniversalPostRenderer
             post={post}
···
             //boxShadow: theme.cardShadow,
             overflow: "hidden",
           }}
-          className="shadow border border-gray-200 dark:border-gray-700"
+          className="shadow border border-gray-200 dark:border-gray-800 was7"
         >
           <UniversalPostRenderer
             post={post}
···
                 //border: `1px solid ${theme.border}`,
                 overflow: "hidden",
               }}
-              className="border border-gray-200 dark:border-gray-700 bg-gray-200 dark:bg-gray-900"
+              className="border border-gray-200 dark:border-gray-800 was7 bg-gray-200 dark:bg-gray-900"
             >
               {lightboxIndex !== null && (
                 <Lightbox
···
               overflow: "hidden",
               //border: `1px solid ${theme.border}`,
             }}
-            className="border border-gray-200 dark:border-gray-700"
+            className="border border-gray-200 dark:border-gray-800 was7"
           >
             {lightboxIndex !== null && (
               <Lightbox
···
               //border: `1px solid ${theme.border}`,
               // height: 240, // fixed height for cropping
             }}
-            className="border border-gray-200 dark:border-gray-700"
+            className="border border-gray-200 dark:border-gray-800 was7"
           >
             {lightboxIndex !== null && (
               <Lightbox
···
               //border: `1px solid ${theme.border}`,
               //aspectRatio: "3 / 2", // overall grid aspect
             }}
-            className="border border-gray-200 dark:border-gray-700"
+            className="border border-gray-200 dark:border-gray-800 was7"
           >
             {lightboxIndex !== null && (
               <Lightbox
···
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
           }}
-          className="lightbox-sidebar overscroll-none disablegutter border-l dark:border-gray-700 border-gray-300 fixed z-50 flex top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white"
+          className="lightbox-sidebar overscroll-none disablegutter border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 flex top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white"
         >
           <ProfilePostComponent
             did={post.did}
···
     >
       <div
         style={containerStyle as React.CSSProperties}
-        className="border border-gray-200 dark:border-gray-700"
+        className="border border-gray-200 dark:border-gray-800 was7"
       >
         {thumb && (
           <div
···
               marginBottom: 8,
               //borderBottom: `1px solid ${theme.border}`,
             }}
-            className="border-b border-gray-200 dark:border-gray-700"
+            className="border-b border-gray-200 dark:border-gray-800 was7"
           >
             <img
               src={thumb}
···
               borderRadius: 12,
               //border: `1px solid ${theme.border}`,
             }}
-            className="border border-gray-200 dark:border-gray-700"
+            className="border border-gray-200 dark:border-gray-800 was7"
             onClick={async (e) => {
               e.stopPropagation();
               setPlaying(true);
···
               100 / (aspect ? aspect.width / aspect.height : 16 / 9)
             }%`, // 16:9 = 56.25%, 4:3 = 75%
           }}
-          className="border border-gray-200 dark:border-gray-700"
+          className="border border-gray-200 dark:border-gray-800 was7"
         >
           <ReactPlayer
             src={url}

src/main.tsx

···
 import "~/styles/app.css";
 
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { QueryClient, QueryClientProvider, } from "@tanstack/react-query";
-import {
-  persistQueryClient,
-} from "@tanstack/react-query-persist-client";
-import { createRouter,RouterProvider } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { persistQueryClient } from "@tanstack/react-query-persist-client";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { useSetAtom } from "jotai";
+import { useEffect } from "react";
 //import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 
 import reportWebVitals from "./reportWebVitals.ts";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
-
+import { isAtTopAtom } from "./utils/atoms.ts";
 
 const queryClient = new QueryClient({
   defaultOptions: {
···
 persistQueryClient({
   queryClient,
   persister: localStoragePersister,
-})
+});
 
 // Create a new router instance
 const router = createRouter({
···
   root.render(
     // double queries annoys me
     // <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <ScrollTopWatcher />
+      <RouterProvider router={router} />
+    </QueryClientProvider>
     // </StrictMode>
   );
 }
···
 // to log results (for example: reportWebVitals(// /*mass comment*/ console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+export default function ScrollTopWatcher() {
+  const setIsAtTop = useSetAtom(isAtTopAtom);
+  useEffect(() => {
+    const meta = document.querySelector('meta[name="theme-color"]');
+    let lastAtTop = window.scrollY === 0;
+    let timeoutId: number | undefined;
+
+    const setVars = (atTop: boolean) => {
+      const root = document.documentElement;
+      root.style.setProperty("--is-top", atTop ? "1" : "0");
+
+      const bg = getComputedStyle(root).getPropertyValue("--header-bg").trim();
+      if (meta && bg) meta.setAttribute("content", bg);
+      setIsAtTop(atTop);
+    };
+
+    const check = () => {
+      const atTop = window.scrollY === 0;
+      if (atTop !== lastAtTop) {
+        lastAtTop = atTop;
+        setVars(atTop);
+      }
+    };
+
+    const handleScroll = () => {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = window.setTimeout(check, 2);
+    };
+
+    // initialize
+    setVars(lastAtTop);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return null;
+}

src/routes/__root.tsx

···
           </button>
         )}
 
-        <main className="w-full max-w-[600px] lg:border-x border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 pb-16 lg:pb-0">
+        <main className="w-full max-w-[600px] lg:border-x border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 pb-16 lg:pb-0 overflow-x-clip">
           {children}
         </main>
 
···
       </div>
 
       {agent?.did ? (
-        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-950 border-t border-gray-200 dark:border-gray-700 z-40">
+        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-gray-50 dark:bg-gray-900 border-0 shadow border-gray-200 dark:border-gray-700 z-40">
           <div className="flex justify-around items-center p-2">
             <MaterialNavItem
               small
···
           </div>
         </nav>
       ) : (
-        <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 z-10">
+        <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-0 shadow border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 z-10">
           <div className="flex items-center gap-2">
             <img src="/redstar.png" alt="Red Dwarf Logo" className="w-6 h-6" />
             <span className="font-bold text-lg text-gray-900 dark:text-gray-100">
···
     <button
       className={`flex flex-row h-12 min-h-12 max-h-12 px-4 py-0.5 w-full items-center rounded-full transition-colors flex-1 gap-1 ${
         active
-          ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600"
-          : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+          ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-800 bg-gray-200 hover:dark:bg-gray-700"
+          : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-900"
       }`}
       onClick={() => {
         onClickCallbback();
···
         {active ? ActiveIcon : InactiveIcon}
       </div>
       <span
-        className={`text-[16px] text-roboto ${active ? "font-medium" : ""}`}
+        className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`}
       >
         {text}
       </span>
···
         {active ? ActiveIcon : InactiveIcon}
       </div>
       <span
-        className={`text-[16px] text-roboto ${active ? "font-medium" : ""}`}
+        className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`}
       >
         {text}
       </span>

src/routes/index.tsx

···
   agentAtom,
   authedAtom,
   feedScrollPositionsAtom,
+  isAtTopAtom,
   selectedFeedUriAtom,
   store,
 } from "~/utils/atoms";
···
     authed && agent && identity?.pds && feedServiceDid;
   const isReadyForUnauthedFeed = !authed && selectedFeed;
 
+
+  const [isAtTop] = useAtom(isAtTopAtom);
+
   return (
     <div
-      className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`}
+      className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"} ${!isAtTop && "shadow"}`}
     >
       {savedFeeds.length > 0 ? (
-        <div className="flex items-center px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
+        <div className="flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
           {savedFeeds.map((item: any, idx: number) => {
             const label = item.value.split("/").pop() || item.value;
             const isActive = selectedFeed === item.value;

src/styles/app.css

···
 }
 .font-roboto {
   font-family: "Roboto", sans-serif;
+}
+
+:root {
+  --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50));
+  --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));
+}
+
+:root {
+  --header-bg: var(--header-bg-light);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --header-bg: var(--header-bg-dark);
+  }
+}
+
+:root {
+  --shadow-opacity: calc(1 - var(--is-top));
+  --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
 }

src/utils/atoms.ts

···
   {}
 );
 
+export const isAtTopAtom = atom<boolean>(true);
+
 export const agentAtom = atom<Agent|null>(null);
 export const authedAtom = atom<boolean>(false);