commit 0ccd5b5a46cd62ad5c9f65b10271ca8a125b35eb · pdsls.dev/pdsls

+58 -25
src/views/repo.tsx
···

       4
       4
        
       import { ActorIdentifier, Did, Handle, Nsid } from "@atcute/lexicons";

     

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

     

       6
       6
        
       import {

     

       7
       7
       +
         createEffect,

     

       7
       8
        
         createResource,

     

       8
       9
        
         createSignal,

     

       9
       10
        
         ErrorBoundary,

     
···

       57
       58
        
         let pds: string;

     

       58
       59
        
         const did = params.repo!;

     

       59
       60
        
       

     

       61
       61
       +
         // Handle scrolling to a collection group when hash is like #collections:app.bsky

     

       62
       62
       +
         createEffect(() => {

     

       63
       63
       +
           const hash = location.hash;

     

       64
       64
       +
           if (hash.startsWith("#collections:")) {

     

       65
       65
       +
             const authority = hash.slice(13);

     

       66
       66
       +
             requestAnimationFrame(() => {

     

       67
       67
       +
               const element = document.getElementById(`collection-${authority}`);

     

       68
       68
       +
               if (element) element.scrollIntoView({ behavior: "instant", block: "start" });

     

       69
       69
       +
             });

     

       70
       70
       +
           }

     

       71
       71
       +
         });

     

       72
       72
       +
       

     

       60
       73
        
         const RepoTab = (props: {

     

       61
       74
        
           tab: "collections" | "backlinks" | "identity" | "blobs" | "logs";

     

       62
       75
        
           label: string;

     

       63
       63
       -
         }) => (

     

       64
       64
       -
           <A class="flex items-center" href={`/at://${params.repo}#${props.tab}`}>

     

       65
       65
       -
             <span

     

       66
       66
       -
               classList={{

     

       67
       67
       -
                 "flex items-center border-b-2": true,

     

       68
       68
       -
                 "border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":

     

       69
       69
       -
                   (location.hash !== `#${props.tab}` && !!location.hash) ||

     

       70
       70
       -
                   (!location.hash &&

     

       71
       71
       -
                     ((!error() && props.tab !== "collections") ||

     

       72
       72
       -
                       (!!error() && props.tab !== "identity"))),

     

       73
       73
       -
               }}

     

       74
       74
       -
             >

     

       75
       75
       -
               {props.label}

     

       76
       76
       -
             </span>

     

       77
       77
       -
           </A>

     

       78
       78
       -
         );

     

       76
       76
       +
         }) => {

     

       77
       77
       +
           const isActive = () => {

     

       78
       78
       +
             if (!location.hash) {

     

       79
       79
       +
               if (!error() && props.tab === "collections") return true;

     

       80
       80
       +
               if (!!error() && props.tab === "identity") return true;

     

       81
       81
       +
               return false;

     

       82
       82
       +
             }

     

       83
       83
       +
             if (props.tab === "collections")

     

       84
       84
       +
               return location.hash === "#collections" || location.hash.startsWith("#collections:");

     

       85
       85
       +
             return location.hash === `#${props.tab}`;

     

       86
       86
       +
           };

     

       87
       87
       +
       

     

       88
       88
       +
           return (

     

       89
       89
       +
             <A class="flex items-center" href={`/at://${params.repo}#${props.tab}`}>

     

       90
       90
       +
               <span

     

       91
       91
       +
                 classList={{

     

       92
       92
       +
                   "flex items-center border-b-2": true,

     

       93
       93
       +
                   "border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":

     

       94
       94
       +
                     !isActive(),

     

       95
       95
       +
                 }}

     

       96
       96
       +
               >

     

       97
       97
       +
                 {props.label}

     

       98
       98
       +
               </span>

     

       99
       99
       +
             </A>

     

       100
       100
       +
           );

     

       101
       101
       +
         };

     

       79
       102
        
       

     

       80
       103
        
         const getRotationKeys = async () => {

     

       81
       104
        
           const res = await fetch(

     
···

       271
       294
        
                       <span>{error()}</span>

     

       272
       295
        
                     </div>

     

       273
       296
        
                   </Show>

     

       274
       274
       -
                   <Show when={!error() && (!location.hash || location.hash === "#collections")}>

     

       297
       297
       +
                   <Show when={!error() && (!location.hash || location.hash.startsWith("#collections"))}>

     

       275
       298
        
                     <Tooltip text="Filter collections">

     

       276
       299
        
                       <button

     

       277
       300
        
                         class="flex items-center rounded-sm p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     
···

       370
       393
        
                     </Suspense>

     

       371
       394
        
                   </ErrorBoundary>

     

       372
       395
        
                 </Show>

     

       373
       373
       -
                 <Show when={nsids() && (!location.hash || location.hash === "#collections")}>

     

       396
       396
       +
                 <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>

     

       374
       397
        
                   <Show when={showFilter()}>

     

       375
       398
        
                     <TextInput

     

       376
       399
        
                       name="filter"

     
···

       382
       405
        
                       }}

     

       383
       406
        
                     />

     

       384
       407
        
                   </Show>

     

       385
       385
       -
                   <div

     

       386
       386
       -
                     class="flex flex-col overflow-hidden text-sm"

     

       387
       387
       -
                     classList={{ "-mt-1": !showFilter() }}

     

       388
       388
       -
                   >

     

       408
       408
       +
                   <div class="flex flex-col text-sm wrap-anywhere" classList={{ "-mt-1": !showFilter() }}>

     

       389
       409
        
                     <For

     

       390
       410
        
                       each={Object.keys(nsids() ?? {}).filter((authority) =>

     

       391
       411
        
                         filter() ?

     
···

       400
       420
        
                         const reversedDomain = authority.split(".").reverse().join(".");

     

       401
       421
        
                         const [faviconLoaded, setFaviconLoaded] = createSignal(false);

     

       402
       422
        
       

     

       423
       423
       +
                         const isHighlighted = () => location.hash === `#collections:${authority}`;

     

       424
       424
       +
       

     

       403
       425
        
                         return (

     

       404
       404
       -
                           <div class="dark:hover:bg-dark-200 flex items-start gap-2 rounded-lg p-1 hover:bg-neutral-200">

     

       405
       405
       -
                             <div class="flex h-5 w-4 shrink-0 items-center justify-center">

     

       426
       426
       +
                           <div

     

       427
       427
       +
                             id={`collection-${authority}`}

     

       428
       428
       +
                             class="group flex items-start gap-2 rounded-lg p-1 transition-colors"

     

       429
       429
       +
                             classList={{

     

       430
       430
       +
                               "dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),

     

       431
       431
       +
                               "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),

     

       432
       432
       +
                             }}

     

       433
       433
       +
                           >

     

       434
       434
       +
                             <a

     

       435
       435
       +
                               href={`#collections:${authority}`}

     

       436
       436
       +
                               class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"

     

       437
       437
       +
                             >

     

       438
       438
       +
                               <span class="iconify lucide--link absolute top-1/2 -left-5 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100" />

     

       406
       439
        
                               <Show when={!faviconLoaded()}>

     

       407
       440
        
                                 <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />

     

       408
       441
        
                               </Show>

     
···

       418
       451
        
                                 onLoad={() => setFaviconLoaded(true)}

     

       419
       452
        
                                 onError={() => setFaviconLoaded(false)}

     

       420
       453
        
                               />

     

       421
       421
       -
                             </div>

     

       454
       454
       +
                             </a>

     

       422
       455
        
                             <div class="flex flex-1 flex-col">

     

       423
       456
        
                               <For

     

       424
       457
        
                                 each={nsids()?.[authority].nsids.filter((nsid) =>