From 789b172a7c3f532cc6882ea9ed1e574fd38aeb63 Mon Sep 17 00:00:00 2001
From: futurGH <me@futuristick.ca>
Date: Mon, 8 Sep 2025 18:40:05 -0400
Subject: [PATCH] collection filter background on scroll

---
 src/views/collection.tsx | 42 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index ae49f25..60d1b52 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -3,7 +3,7 @@ import { Client, CredentialManager } from "@atcute/client";
 import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";
 import * as TID from "@atcute/tid";
 import { A, useParams } from "@solidjs/router";
-import { createEffect, createResource, createSignal, For, Show, untrack } from "solid-js";
+import { createEffect, createResource, createSignal, For, Show, untrack, onMount, onCleanup } from "solid-js";
 import { createStore } from "solid-js/store";
 import { Button } from "../components/button.jsx";
 import { JSONType, JSONValue } from "../components/json.jsx";
@@ -72,9 +72,11 @@ const CollectionView = () => {
   const [batchDelete, setBatchDelete] = createSignal(false);
   const [lastSelected, setLastSelected] = createSignal<number>();
   const [reverse, setReverse] = createSignal(false);
+  const [filterStuck, setFilterStuck] = createSignal(false);
   const did = params.repo;
   let pds: string;
   let rpc: Client;
+  let sticky!: HTMLDivElement;
 
   const fetchRecords = async () => {
     if (!pds) pds = await resolvePDS(did);
@@ -157,11 +159,43 @@ const CollectionView = () => {
       true,
     );
 
+  onMount(() => {
+    let ticking = false;
+    const tick = () => {
+      const topPx = parseFloat(getComputedStyle(sticky).top);
+      const { top } = sticky.getBoundingClientRect();
+      setFilterStuck(top <= topPx + 0.5);
+      ticking = false;
+    };
+
+    const onScroll = () => {
+      if (!ticking) {
+        ticking = true;
+        requestAnimationFrame(tick);
+      }
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    tick();
+
+    onCleanup(() => {
+      window.removeEventListener("scroll", onScroll);
+    });
+  });
+
   return (
     <Show when={records.length || response()}>
       <div class="flex w-full flex-col items-center">
-        <div class="dark:bg-dark-500 sticky top-0 z-5 flex w-screen flex-col items-center justify-center gap-2 bg-neutral-100 pt-1 pb-3">
-          <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">
+      <div
+        ref={(el) => (sticky = el)}
+        class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
+        classList={{
+          "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md": filterStuck(),
+          "bg-transparent border-transparent shadow-none": !filterStuck(),
+        }}
+      >
+          <div class="z-20 flex w-[22rem] items-center gap-2 sm:w-[24rem]">
             <Show when={agent() && agent()?.sub === did}>
               <div class="flex items-center gap-x-2">
                 <Tooltip
@@ -220,7 +254,7 @@ const CollectionView = () => {
             />
           </div>
           <Show when={records.length > 1}>
-            <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
+            <div class="z-20 flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
               <Button
                 onClick={() => {
                   setReverse(!reverse());
-- 
2.43.0


From a54099db757fd0338260283cb4b6f62a10ea7687 Mon Sep 17 00:00:00 2001
From: futurGH <me@futuristick.ca>
Date: Mon, 8 Sep 2025 18:53:33 -0400
Subject: [PATCH] buttons styling

---
 src/components/button.tsx |  4 +++-
 src/views/collection.tsx  | 25 ++++++++++++++++++-------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/button.tsx b/src/components/button.tsx
index acda2d3..83cb1ff 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -2,6 +2,7 @@ import { JSX } from "solid-js";
 
 export interface ButtonProps {
   class?: string;
+  classList?: Record<string, boolean | undefined>;
   onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
   children?: JSX.Element;
 }
@@ -12,8 +13,9 @@ export const Button = (props: ButtonProps) => {
       type="button"
       class={
         props.class ??
-        "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold shadow-sm hover:bg-neutral-50 active:bg-neutral-50"
+        "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md  hover:bg-neutral-50 active:bg-neutral-50"
       }
+      classList={props.classList}
       onClick={props.onClick}
     >
       {props.children}
diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index 60d1b52..04b7288 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -5,7 +5,7 @@ import * as TID from "@atcute/tid";
 import { A, useParams } from "@solidjs/router";
 import { createEffect, createResource, createSignal, For, Show, untrack, onMount, onCleanup } from "solid-js";
 import { createStore } from "solid-js/store";
-import { Button } from "../components/button.jsx";
+import { Button, type ButtonProps } from "../components/button.jsx";
 import { JSONType, JSONValue } from "../components/json.jsx";
 import { agent } from "../components/login.jsx";
 import { TextInput } from "../components/text-input.jsx";
@@ -159,6 +159,17 @@ const CollectionView = () => {
       true,
     );
 
+  const NavigationButton = (props: ButtonProps) => {
+	return <Button
+	    class="flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md"
+		classList={{
+			"dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50": !filterStuck(),
+			"dark:bg-dark-100 dark:hover:bg-dark-50 dark:active:bg-dark-50 bg-neutral-50 hover:bg-neutral-200 active:bg-neutral-200": filterStuck()
+		}}
+		{...props}
+	/>
+  }
+
   onMount(() => {
     let ticking = false;
     const tick = () => {
@@ -192,10 +203,10 @@ const CollectionView = () => {
         class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
         classList={{
           "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md": filterStuck(),
-          "bg-transparent border-transparent shadow-none": !filterStuck(),
+          "bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),
         }}
       >
-          <div class="z-20 flex w-[22rem] items-center gap-2 sm:w-[24rem]">
+          <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">
             <Show when={agent() && agent()?.sub === did}>
               <div class="flex items-center gap-x-2">
                 <Tooltip
@@ -254,8 +265,8 @@ const CollectionView = () => {
             />
           </div>
           <Show when={records.length > 1}>
-            <div class="z-20 flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
-              <Button
+            <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
+              <NavigationButton
                 onClick={() => {
                   setReverse(!reverse());
                   setRecords([]);
@@ -267,7 +278,7 @@ const CollectionView = () => {
                   class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
                 ></span>
                 Reverse
-              </Button>
+              </NavigationButton>
               <div>
                 <Show when={batchDelete()}>
                   <span>{records.filter((rec) => rec.toDelete).length}</span>
@@ -278,7 +289,7 @@ const CollectionView = () => {
               <div class="flex w-[5rem] items-center justify-end">
                 <Show when={cursor()}>
                   <Show when={!response.loading}>
-                    <Button onClick={() => refetch()}>Load More</Button>
+                    <NavigationButton onClick={() => refetch()}>Load More</NavigationButton>
                   </Show>
                   <Show when={response.loading}>
                     <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />
-- 
2.43.0


From a9b4f1aedaa1d6e39436e644544726a256423a7f Mon Sep 17 00:00:00 2001
From: futurGH <me@futuristick.ca>
Date: Mon, 8 Sep 2025 18:58:07 -0400
Subject: [PATCH] naming

---
 src/views/collection.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index 04b7288..b0be20d 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -159,7 +159,7 @@ const CollectionView = () => {
       true,
     );
 
-  const NavigationButton = (props: ButtonProps) => {
+  const FilterButton = (props: ButtonProps) => {
 	return <Button
 	    class="flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md"
 		classList={{
@@ -266,7 +266,7 @@ const CollectionView = () => {
           </div>
           <Show when={records.length > 1}>
             <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
-              <NavigationButton
+              <FilterButton
                 onClick={() => {
                   setReverse(!reverse());
                   setRecords([]);
@@ -278,7 +278,7 @@ const CollectionView = () => {
                   class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
                 ></span>
                 Reverse
-              </NavigationButton>
+              </FilterButton>
               <div>
                 <Show when={batchDelete()}>
                   <span>{records.filter((rec) => rec.toDelete).length}</span>
@@ -289,7 +289,7 @@ const CollectionView = () => {
               <div class="flex w-[5rem] items-center justify-end">
                 <Show when={cursor()}>
                   <Show when={!response.loading}>
-                    <NavigationButton onClick={() => refetch()}>Load More</NavigationButton>
+                    <FilterButton onClick={() => refetch()}>Load More</FilterButton>
                   </Show>
                   <Show when={response.loading}>
                     <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />
-- 
2.43.0