commit 93ef3f863eecf2ffdfd8c5b0a2f0ec4b46e4117a · pdsls.dev/pdsls

+44

src/components/sticky.tsx

···

       1
       +
       import { createSignal, JSX, onCleanup, onMount } from "solid-js";

     

       2
       +
       

     

       3
       +
       export const StickyOverlay = (props: { children?: JSX.Element }) => {

     

       4
       +
         const [filterStuck, setFilterStuck] = createSignal(false);

     

       5
       +
       

     

       6
       +
         return (

     

       7
       +
           <div

     

       8
       +
             ref={(node) => {

     

       9
       +
               onMount(() => {

     

       10
       +
                 let ticking = false;

     

       11
       +
                 const tick = () => {

     

       12
       +
                   const topPx = parseFloat(getComputedStyle(node).top);

     

       13
       +
                   const { top } = node.getBoundingClientRect();

     

       14
       +
                   setFilterStuck(top <= topPx + 0.5);

     

       15
       +
                   ticking = false;

     

       16
       +
                 };

     

       17
       +
       

     

       18
       +
                 const onScroll = () => {

     

       19
       +
                   if (!ticking) {

     

       20
       +
                     ticking = true;

     

       21
       +
                     requestAnimationFrame(tick);

     

       22
       +
                   }

     

       23
       +
                 };

     

       24
       +
       

     

       25
       +
                 window.addEventListener("scroll", onScroll, { passive: true });

     

       26
       +
       

     

       27
       +
                 tick();

     

       28
       +
       

     

       29
       +
                 onCleanup(() => {

     

       30
       +
                   window.removeEventListener("scroll", onScroll);

     

       31
       +
                 });

     

       32
       +
               });

     

       33
       +
             }}

     

       34
       +
             class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"

     

       35
       +
             classList={{

     

       36
       +
               "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":

     

       37
       +
                 filterStuck(),

     

       38
       +
               "bg-transparent border-transparent shadow-none": !filterStuck(),

     

       39
       +
             }}

     

       40
       +
           >

     

       41
       +
             {props.children}

     

       42
       +
           </div>

     

       43
       +
         );

     

       44
       +
       };

+4 -47

src/views/collection.tsx

···

       3
        
       import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
        
       import * as TID from "@atcute/tid";

     

       5
        
       import { A, useParams } from "@solidjs/router";

     

       6
       -
       import {

     

       7
       -
         createEffect,

     

       8
       -
         createResource,

     

       9
       -
         createSignal,

     

       10
       -
         For,

     

       11
       -
         onCleanup,

     

       12
       -
         onMount,

     

       13
       -
         Show,

     

       14
       -
         untrack,

     

       15
       -
       } from "solid-js";

     

       16
        
       import { createStore } from "solid-js/store";

     

       17
        
       import { Button } from "../components/button.jsx";

     

       18
        
       import { JSONType, JSONValue } from "../components/json.jsx";

     

       19
        
       import { agent } from "../components/login.jsx";

     

       0
        
       
     

       20
        
       import { TextInput } from "../components/text-input.jsx";

     

       21
        
       import Tooltip from "../components/tooltip.jsx";

     

       22
        
       import { setNotif } from "../layout.jsx";

     
···

       81
        
         const [batchDelete, setBatchDelete] = createSignal(false);

     

       82
        
         const [lastSelected, setLastSelected] = createSignal<number>();

     

       83
        
         const [reverse, setReverse] = createSignal(false);

     

       84
       -
         const [filterStuck, setFilterStuck] = createSignal(false);

     

       85
        
         const did = params.repo;

     

       86
        
         let pds: string;

     

       87
        
         let rpc: Client;

     

       88
       -
         let sticky!: HTMLDivElement;

     

       89
        
       

     

       90
        
         const fetchRecords = async () => {

     

       91
        
           if (!pds) pds = await resolvePDS(did);

     
···

       168
        
             true,

     

       169
        
           );

     

       170
        
       

     

       171
       -
         onMount(() => {

     

       172
       -
           let ticking = false;

     

       173
       -
           const tick = () => {

     

       174
       -
             const topPx = parseFloat(getComputedStyle(sticky).top);

     

       175
       -
             const { top } = sticky.getBoundingClientRect();

     

       176
       -
             setFilterStuck(top <= topPx + 0.5);

     

       177
       -
             ticking = false;

     

       178
       -
           };

     

       179
       -
       

     

       180
       -
           const onScroll = () => {

     

       181
       -
             if (!ticking) {

     

       182
       -
               ticking = true;

     

       183
       -
               requestAnimationFrame(tick);

     

       184
       -
             }

     

       185
       -
           };

     

       186
       -
       

     

       187
       -
           window.addEventListener("scroll", onScroll, { passive: true });

     

       188
       -
       

     

       189
       -
           tick();

     

       190
       -
       

     

       191
       -
           onCleanup(() => {

     

       192
       -
             window.removeEventListener("scroll", onScroll);

     

       193
       -
           });

     

       194
       -
         });

     

       195
       -
       

     

       196
        
         return (

     

       197
        
           <Show when={records.length || response()}>

     

       198
        
             <div class="-mt-2 flex w-full flex-col items-center">

     

       199
       -
               <div

     

       200
       -
                 ref={(el) => (sticky = el)}

     

       201
       -
                 class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"

     

       202
       -
                 classList={{

     

       203
       -
                   "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":

     

       204
       -
                     filterStuck(),

     

       205
       -
                   "bg-transparent border-transparent shadow-none": !filterStuck(),

     

       206
       -
                 }}

     

       207
       -
               >

     

       208
        
                 <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">

     

       209
        
                   <Show when={agent() && agent()?.sub === did}>

     

       210
        
                     <div class="flex items-center gap-x-2">

     
···

       297
        
                     </div>

     

       298
        
                   </div>

     

       299
        
                 </Show>

     

       300
       -
               </div>

     

       301
        
               <div class="flex max-w-full flex-col font-mono">

     

       302
        
                 <For

     

       303
        
                   each={records.filter((rec) =>

···

       3
        
       import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
        
       import * as TID from "@atcute/tid";

     

       5
        
       import { A, useParams } from "@solidjs/router";

     

       6
       +
       import { createEffect, createResource, createSignal, For, Show, untrack } from "solid-js";

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       7
        
       import { createStore } from "solid-js/store";

     

       8
        
       import { Button } from "../components/button.jsx";

     

       9
        
       import { JSONType, JSONValue } from "../components/json.jsx";

     

       10
        
       import { agent } from "../components/login.jsx";

     

       11
       +
       import { StickyOverlay } from "../components/sticky.jsx";

     

       12
        
       import { TextInput } from "../components/text-input.jsx";

     

       13
        
       import Tooltip from "../components/tooltip.jsx";

     

       14
        
       import { setNotif } from "../layout.jsx";

     
···

       73
        
         const [batchDelete, setBatchDelete] = createSignal(false);

     

       74
        
         const [lastSelected, setLastSelected] = createSignal<number>();

     

       75
        
         const [reverse, setReverse] = createSignal(false);

     

       0
        
       
     

       76
        
         const did = params.repo;

     

       77
        
         let pds: string;

     

       78
        
         let rpc: Client;

     

       0
        
       
     

       79
        
       

     

       80
        
         const fetchRecords = async () => {

     

       81
        
           if (!pds) pds = await resolvePDS(did);

     
···

       158
        
             true,

     

       159
        
           );

     

       160
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       161
        
         return (

     

       162
        
           <Show when={records.length || response()}>

     

       163
        
             <div class="-mt-2 flex w-full flex-col items-center">

     

       164
       +
               <StickyOverlay>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       165
        
                 <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">

     

       166
        
                   <Show when={agent() && agent()?.sub === did}>

     

       167
        
                     <div class="flex items-center gap-x-2">

     
···

       254
        
                     </div>

     

       255
        
                   </div>

     

       256
        
                 </Show>

     

       257
       +
               </StickyOverlay>

     

       258
        
               <div class="flex max-w-full flex-col font-mono">

     

       259
        
                 <For

     

       260
        
                   each={records.filter((rec) =>

+3 -2

src/views/labels.tsx

···

       3
        
       import { A, useParams, useSearchParams } from "@solidjs/router";

     

       4
        
       import { createResource, createSignal, For, onMount, Show } from "solid-js";

     

       5
        
       import { Button } from "../components/button.jsx";

     

       0
        
       
     

       6
        
       import { TextInput } from "../components/text-input.jsx";

     

       7
        
       import { labelerCache, resolvePDS } from "../utils/api.js";

     

       8
        
       import { localDateFromTimestamp } from "../utils/date.js";

     
···

       98
        
                 </div>

     

       99
        
               </div>

     

       100
        
             </form>

     

       101
       -
             <div class="dark:bg-dark-500 sticky top-0 z-5 flex w-screen flex-col items-center justify-center gap-3 bg-neutral-100 py-3">

     

       102
        
               <TextInput

     

       103
        
                 placeholder="Filter by label"

     

       104
        
                 onInput={(e) => setFilter(e.currentTarget.value)}

     
···

       123
        
                   </div>

     

       124
        
                 </Show>

     

       125
        
               </div>

     

       126
       -
             </div>

     

       127
        
             <Show when={labels().length}>

     

       128
        
               <div class="flex max-w-full min-w-[22rem] flex-col gap-2 divide-y-[0.5px] divide-neutral-400 text-sm wrap-anywhere whitespace-pre-wrap sm:min-w-[24rem] dark:divide-neutral-600">

     

       129
        
                 <For each={filterLabels()}>

···

       3
        
       import { A, useParams, useSearchParams } from "@solidjs/router";

     

       4
        
       import { createResource, createSignal, For, onMount, Show } from "solid-js";

     

       5
        
       import { Button } from "../components/button.jsx";

     

       6
       +
       import { StickyOverlay } from "../components/sticky.jsx";

     

       7
        
       import { TextInput } from "../components/text-input.jsx";

     

       8
        
       import { labelerCache, resolvePDS } from "../utils/api.js";

     

       9
        
       import { localDateFromTimestamp } from "../utils/date.js";

     
···

       99
        
                 </div>

     

       100
        
               </div>

     

       101
        
             </form>

     

       102
       +
             <StickyOverlay>

     

       103
        
               <TextInput

     

       104
        
                 placeholder="Filter by label"

     

       105
        
                 onInput={(e) => setFilter(e.currentTarget.value)}

     
···

       124
        
                   </div>

     

       125
        
                 </Show>

     

       126
        
               </div>

     

       127
       +
             </StickyOverlay>

     

       128
        
             <Show when={labels().length}>

     

       129
        
               <div class="flex max-w-full min-w-[22rem] flex-col gap-2 divide-y-[0.5px] divide-neutral-400 text-sm wrap-anywhere whitespace-pre-wrap sm:min-w-[24rem] dark:divide-neutral-600">

     

       130
        
                 <For each={filterLabels()}>