commit 0ccd5b5a46cd62ad5c9f65b10271ca8a125b35eb · pdsls.dev/pdsls

+58 -25

src/views/repo.tsx

···

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

     

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

     

       6
        
       import {

     

       0
        
       
     

       7
        
         createResource,

     

       8
        
         createSignal,

     

       9
        
         ErrorBoundary,

     
···

       57
        
         let pds: string;

     

       58
        
         const did = params.repo!;

     

       59
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       60
        
         const RepoTab = (props: {

     

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

     

       62
        
           label: string;

     

       63
       -
         }) => (

     

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

     

       65
       -
             <span

     

       66
       -
               classList={{

     

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

     

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

     

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

     

       70
       -
                   (!location.hash &&

     

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

     

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

     

       73
       -
               }}

     

       74
       -
             >

     

       75
       -
               {props.label}

     

       76
       -
             </span>

     

       77
       -
           </A>

     

       78
       -
         );

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       79
        
       

     

       80
        
         const getRotationKeys = async () => {

     

       81
        
           const res = await fetch(

     
···

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

     

       272
        
                     </div>

     

       273
        
                   </Show>

     

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

     

       275
        
                     <Tooltip text="Filter collections">

     

       276
        
                       <button

     

       277
        
                         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
        
                     </Suspense>

     

       371
        
                   </ErrorBoundary>

     

       372
        
                 </Show>

     

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

     

       374
        
                   <Show when={showFilter()}>

     

       375
        
                     <TextInput

     

       376
        
                       name="filter"

     
···

       382
        
                       }}

     

       383
        
                     />

     

       384
        
                   </Show>

     

       385
       -
                   <div

     

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

     

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

     

       388
       -
                   >

     

       389
        
                     <For

     

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

     

       391
        
                         filter() ?

     
···

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

     

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

     

       402
        
       

     

       0
        
       
     

       0
        
       
     

       403
        
                         return (

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

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

     

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

     

       408
        
                               </Show>

     
···

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

     

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

     

       420
        
                               />

     

       421
       -
                             </div>

     

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

     

       423
        
                               <For

     

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

···

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

     

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

     

       6
        
       import {

     

       7
       +
         createEffect,

     

       8
        
         createResource,

     

       9
        
         createSignal,

     

       10
        
         ErrorBoundary,

     
···

       58
        
         let pds: string;

     

       59
        
         const did = params.repo!;

     

       60
        
       

     

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

     

       62
       +
         createEffect(() => {

     

       63
       +
           const hash = location.hash;

     

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

     

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

     

       66
       +
             requestAnimationFrame(() => {

     

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

     

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

     

       69
       +
             });

     

       70
       +
           }

     

       71
       +
         });

     

       72
       +
       

     

       73
        
         const RepoTab = (props: {

     

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

     

       75
        
           label: string;

     

       76
       +
         }) => {

     

       77
       +
           const isActive = () => {

     

       78
       +
             if (!location.hash) {

     

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

     

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

     

       81
       +
               return false;

     

       82
       +
             }

     

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

     

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

     

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

     

       86
       +
           };

     

       87
       +
       

     

       88
       +
           return (

     

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

     

       90
       +
               <span

     

       91
       +
                 classList={{

     

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

     

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

     

       94
       +
                     !isActive(),

     

       95
       +
                 }}

     

       96
       +
               >

     

       97
       +
                 {props.label}

     

       98
       +
               </span>

     

       99
       +
             </A>

     

       100
       +
           );

     

       101
       +
         };

     

       102
        
       

     

       103
        
         const getRotationKeys = async () => {

     

       104
        
           const res = await fetch(

     
···

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

     

       295
        
                     </div>

     

       296
        
                   </Show>

     

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

     

       298
        
                     <Tooltip text="Filter collections">

     

       299
        
                       <button

     

       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"

     
···

       393
        
                     </Suspense>

     

       394
        
                   </ErrorBoundary>

     

       395
        
                 </Show>

     

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

     

       397
        
                   <Show when={showFilter()}>

     

       398
        
                     <TextInput

     

       399
        
                       name="filter"

     
···

       405
        
                       }}

     

       406
        
                     />

     

       407
        
                   </Show>

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       409
        
                     <For

     

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

     

       411
        
                         filter() ?

     
···

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

     

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

     

       422
        
       

     

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

     

       424
       +
       

     

       425
        
                         return (

     

       426
       +
                           <div

     

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

     

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

     

       429
       +
                             classList={{

     

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

     

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

     

       432
       +
                             }}

     

       433
       +
                           >

     

       434
       +
                             <a

     

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

     

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

     

       437
       +
                             >

     

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

     

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

     

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

     

       441
        
                               </Show>

     
···

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

     

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

     

       453
        
                               />

     

       454
       +
                             </a>

     

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

     

       456
        
                               <For

     

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