back round 0 view raw

collection filter styling #5

closed

opened by

futur.blue 3 months ago targeting main

preview: https://github.com/user-attachments/assets/6281c46d-eccf-4900-9d71-6027d447fa96

options

unified split

Changed files

+68 -7

src

components

button.tsx

views

collection.tsx

+3 -1

src/components/button.tsx

···

       2
       2
        
       

     

       3
       3
        
       export interface ButtonProps {

     

       4
       4
        
         class?: string;

     

       5
       5
       +
         classList?: Record<string, boolean | undefined>;

     

       5
       6
        
         onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;

     

       6
       7
        
         children?: JSX.Element;

     

       7
       8
        
       }

     
···

       12
       13
        
             type="button"

     

       13
       14
        
             class={

     

       14
       15
        
               props.class ??

     

       15
       15
       -
               "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"

     

       16
       16
       +
               "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 border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-md hover:bg-neutral-50 active:bg-neutral-50 dark:border-neutral-700"

     

       16
       17
        
             }

     

       18
       18
       +
             classList={props.classList}

     

       17
       19
        
             onClick={props.onClick}

     

       18
       20
        
           >

     

       19
       21
        
             {props.children}

+65 -6

src/views/collection.tsx

···

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

     

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

     

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

     

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

     

       6
       6
       +
       import {

     

       7
       7
       +
         createEffect,

     

       8
       8
       +
         createResource,

     

       9
       9
       +
         createSignal,

     

       10
       10
       +
         For,

     

       11
       11
       +
         onCleanup,

     

       12
       12
       +
         onMount,

     

       13
       13
       +
         Show,

     

       14
       14
       +
         untrack,

     

       15
       15
       +
       } from "solid-js";

     

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

     

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

     

       17
       17
       +
       import { Button, type ButtonProps } from "../components/button.jsx";

     

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

     

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

     

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

     
···

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

     

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

     

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

     

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

     

       75
       85
        
         const did = params.repo;

     

       76
       86
        
         let pds: string;

     

       77
       87
        
         let rpc: Client;

     

       88
       88
       +
         let sticky!: HTMLDivElement;

     

       78
       89
        
       

     

       79
       90
        
         const fetchRecords = async () => {

     

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

     
···

       157
       168
        
             true,

     

       158
       169
        
           );

     

       159
       170
        
       

     

       171
       171
       +
         const FilterButton = (props: ButtonProps) => {

     

       172
       172
       +
           return (

     

       173
       173
       +
             <Button

     

       174
       174
       +
               class="flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-md dark:border-neutral-700"

     

       175
       175
       +
               classList={{

     

       176
       176
       +
                 "dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50":

     

       177
       177
       +
                   !filterStuck(),

     

       178
       178
       +
                 "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":

     

       179
       179
       +
                   filterStuck(),

     

       180
       180
       +
               }}

     

       181
       181
       +
               {...props}

     

       182
       182
       +
             />

     

       183
       183
       +
           );

     

       184
       184
       +
         };

     

       185
       185
       +
       

     

       186
       186
       +
         onMount(() => {

     

       187
       187
       +
           let ticking = false;

     

       188
       188
       +
           const tick = () => {

     

       189
       189
       +
             const topPx = parseFloat(getComputedStyle(sticky).top);

     

       190
       190
       +
             const { top } = sticky.getBoundingClientRect();

     

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

     

       192
       192
       +
             ticking = false;

     

       193
       193
       +
           };

     

       194
       194
       +
       

     

       195
       195
       +
           const onScroll = () => {

     

       196
       196
       +
             if (!ticking) {

     

       197
       197
       +
               ticking = true;

     

       198
       198
       +
               requestAnimationFrame(tick);

     

       199
       199
       +
             }

     

       200
       200
       +
           };

     

       201
       201
       +
       

     

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

     

       203
       203
       +
       

     

       204
       204
       +
           tick();

     

       205
       205
       +
       

     

       206
       206
       +
           onCleanup(() => {

     

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

     

       208
       208
       +
           });

     

       209
       209
       +
         });

     

       210
       210
       +
       

     

       160
       211
        
         return (

     

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

     

       162
       213
        
             <div class="flex w-full flex-col items-center">

     

       163
       163
       -
               <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">

     

       214
       214
       +
               <div

     

       215
       215
       +
                 ref={(el) => (sticky = el)}

     

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

     

       217
       217
       +
                 classList={{

     

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

     

       219
       219
       +
                     filterStuck(),

     

       220
       220
       +
                   "bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),

     

       221
       221
       +
                 }}

     

       222
       222
       +
               >

     

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

     

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

     

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

     
···

       221
       280
        
                 </div>

     

       222
       281
        
                 <Show when={records.length > 1}>

     

       223
       282
        
                   <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">

     

       224
       224
       -
                     <Button

     

       283
       283
       +
                     <FilterButton

     

       225
       284
        
                       onClick={() => {

     

       226
       285
        
                         setReverse(!reverse());

     

       227
       286
        
                         setRecords([]);

     
···

       233
       292
        
                         class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}

     

       234
       293
        
                       ></span>

     

       235
       294
        
                       Reverse

     

       236
       236
       -
                     </Button>

     

       295
       295
       +
                     </FilterButton>

     

       237
       296
        
                     <div>

     

       238
       297
        
                       <Show when={batchDelete()}>

     

       239
       298
        
                         <span>{records.filter((rec) => rec.toDelete).length}</span>

     
···

       244
       303
        
                     <div class="flex w-[5rem] items-center justify-end">

     

       245
       304
        
                       <Show when={cursor()}>

     

       246
       305
        
                         <Show when={!response.loading}>

     

       247
       247
       -
                           <Button onClick={() => refetch()}>Load More</Button>

     

       306
       306
       +
                           <FilterButton onClick={() => refetch()}>Load More</FilterButton>

     

       248
       307
        
                         </Show>

     

       249
       308
        
                         <Show when={response.loading}>

     

       250
       309
        
                           <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />