From 91e90cba08d39df04859e59dd020b6e2b5bde9c3 Mon Sep 17 00:00:00 2001
From: rimar1337 <132627503+rimar1337@users.noreply.github.com>
Date: Sat, 18 Oct 2025 19:20:37 +0700
Subject: [PATCH] more material 3 tweaks

---
 src/components/Header.tsx                |  6 ++-
 src/components/InfiniteCustomFeed.tsx    |  4 +-
 src/components/UniversalPostRenderer.tsx | 30 +++++------
 src/main.tsx                             | 63 ++++++++++++++++++++----
 src/routes/__root.tsx                    | 14 +++---
 src/routes/index.tsx                     |  8 ++-
 src/styles/app.css                       | 19 +++++++
 src/utils/atoms.ts                       |  2 +
 8 files changed, 109 insertions(+), 37 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ad24a94..691e47a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,7 @@
 import { Link, useRouter } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+
+import { isAtTopAtom } from "~/utils/atoms";
 
 export function Header({
   backButtonCallback,
@@ -8,9 +11,10 @@ export function Header({
   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"
diff --git a/src/components/InfiniteCustomFeed.tsx b/src/components/InfiniteCustomFeed.tsx
index 627ed2a..29ca054 100644
--- a/src/components/InfiniteCustomFeed.tsx
+++ b/src/components/InfiniteCustomFeed.tsx
@@ -113,10 +113,10 @@ export function InfiniteCustomFeed({
       <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>
     </>
   );
diff --git a/src/components/UniversalPostRenderer.tsx b/src/components/UniversalPostRenderer.tsx
index 9928c9b..96c88e5 100644
--- a/src/components/UniversalPostRenderer.tsx
+++ b/src/components/UniversalPostRenderer.tsx
@@ -1248,7 +1248,7 @@ function UniversalPostRenderer({
           // 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
@@ -1316,7 +1316,7 @@ function UniversalPostRenderer({
               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 }}>
@@ -1521,7 +1521,7 @@ function UniversalPostRenderer({
                 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>
               </>
@@ -1544,7 +1544,7 @@ function UniversalPostRenderer({
                       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>
@@ -1780,7 +1780,7 @@ function PostEmbeds({
             //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}
@@ -1897,7 +1897,7 @@ function PostEmbeds({
             //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}
@@ -1970,7 +1970,7 @@ function PostEmbeds({
                 //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
@@ -2011,7 +2011,7 @@ function PostEmbeds({
               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
@@ -2061,7 +2061,7 @@ function PostEmbeds({
               //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
@@ -2146,7 +2146,7 @@ function PostEmbeds({
               //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
@@ -2283,7 +2283,7 @@ export function 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}
@@ -2587,7 +2587,7 @@ function ExternalLinkEmbed({
     >
       <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
@@ -2601,7 +2601,7 @@ function ExternalLinkEmbed({
               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}
@@ -2727,7 +2727,7 @@ const SmartHLSPlayer = ({
               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);
@@ -2768,7 +2768,7 @@ const SmartHLSPlayer = ({
               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}
diff --git a/src/main.tsx b/src/main.tsx
index b07915a..1199dbf 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,18 +1,18 @@
 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: {
@@ -28,7 +28,7 @@ const localStoragePersister = createSyncStoragePersister({
 persistQueryClient({
   queryClient,
   persister: localStoragePersister,
-})
+});
 
 // Create a new router instance
 const router = createRouter({
@@ -54,9 +54,10 @@ if (rootElement && !rootElement.innerHTML) {
   root.render(
     // double queries annoys me
     // <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <ScrollTopWatcher />
+      <RouterProvider router={router} />
+    </QueryClientProvider>
     // </StrictMode>
   );
 }
@@ -65,3 +66,45 @@ if (rootElement && !rootElement.innerHTML) {
 // 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;
+}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index d6eeef0..11d13e3 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -431,7 +431,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
           </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>
 
@@ -448,7 +448,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       </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
@@ -616,7 +616,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
           </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">
@@ -682,8 +682,8 @@ function MaterialNavItem({
     <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();
@@ -693,7 +693,7 @@ function MaterialNavItem({
         {active ? ActiveIcon : InactiveIcon}
       </div>
       <span
-        className={`text-[16px] text-roboto ${active ? "font-medium" : ""}`}
+        className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`}
       >
         {text}
       </span>
@@ -732,7 +732,7 @@ function MaterialPillButton({
         {active ? ActiveIcon : InactiveIcon}
       </div>
       <span
-        className={`text-[16px] text-roboto ${active ? "font-medium" : ""}`}
+        className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`}
       >
         {text}
       </span>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 5bd04d8..07fbf91 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -10,6 +10,7 @@ import {
   agentAtom,
   authedAtom,
   feedScrollPositionsAtom,
+  isAtTopAtom,
   selectedFeedUriAtom,
   store,
 } from "~/utils/atoms";
@@ -350,12 +351,15 @@ export function Home({ hidden = false }: { hidden?: boolean }) {
     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;
diff --git a/src/styles/app.css b/src/styles/app.css
index f40037d..3219cd1 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -86,4 +86,23 @@
 }
 .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));
 }
\ No newline at end of file
diff --git a/src/utils/atoms.ts b/src/utils/atoms.ts
index 5f3a203..4e6913f 100644
--- a/src/utils/atoms.ts
+++ b/src/utils/atoms.ts
@@ -21,5 +21,7 @@ export const likedPostsAtom = atomWithStorage<Record<string, string>>(
   {}
 );
 
+export const isAtTopAtom = atom<boolean>(true);
+
 export const agentAtom = atom<Agent|null>(null);
 export const authedAtom = atom<boolean>(false);
-- 
2.51.2