5jiji.com
+68
-63
src/views/repo.tsx
+68
-63
src/views/repo.tsx
···
404
/>
405
</Show>
406
<div class="flex flex-col text-sm wrap-anywhere" classList={{ "-mt-1": !showFilter() }}>
407
-
<For
408
-
each={Object.keys(nsids() ?? {}).filter((authority) =>
409
-
filter() ?
410
-
authority.includes(filter()!) ||
411
-
nsids()?.[authority].nsids.some((nsid) =>
412
-
`${authority}.${nsid}`.includes(filter()!),
413
-
)
414
-
: true,
415
-
)}
416
>
417
-
{(authority) => {
418
-
const reversedDomain = authority.split(".").reverse().join(".");
419
-
const [faviconLoaded, setFaviconLoaded] = createSignal(false);
420
421
-
const isHighlighted = () => location.hash === `#collections:${authority}`;
422
423
-
return (
424
-
<div
425
-
id={`collection-${authority}`}
426
-
class="group flex items-start gap-2 rounded-lg p-1 transition-colors"
427
-
classList={{
428
-
"dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),
429
-
"bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
430
-
}}
431
-
>
432
-
<a
433
-
href={`#collections:${authority}`}
434
-
class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
435
>
436
-
<span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">
437
-
<span class="iconify lucide--link absolute -left-2 w-7"></span>
438
-
</span>
439
-
<Show when={!faviconLoaded()}>
440
-
<span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
441
-
</Show>
442
-
<img
443
-
src={
444
-
["bsky.app", "bsky.chat"].includes(reversedDomain) ?
445
-
"https://web-cdn.bsky.app/static/apple-touch-icon.png"
446
-
: `https://${reversedDomain}/favicon.ico`
447
-
}
448
-
alt={`${reversedDomain} favicon`}
449
-
class="h-4 w-4"
450
-
classList={{ hidden: !faviconLoaded() }}
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) =>
458
-
filter() ? `${authority}.${nsid}`.includes(filter()!) : true,
459
-
)}
460
>
461
-
{(nsid) => (
462
-
<A
463
-
href={`/at://${did}/${authority}.${nsid}`}
464
-
class="hover:underline active:underline"
465
-
>
466
-
<span>{authority}</span>
467
-
<span class="text-neutral-500 dark:text-neutral-400">.{nsid}</span>
468
-
</A>
469
-
)}
470
-
</For>
471
</div>
472
-
</div>
473
-
);
474
-
}}
475
-
</For>
476
</div>
477
</Show>
478
<Show when={location.hash === "#identity" || (error() && !location.hash)}>
···
404
/>
405
</Show>
406
<div class="flex flex-col text-sm wrap-anywhere" classList={{ "-mt-1": !showFilter() }}>
407
+
<Show
408
+
when={Object.keys(nsids() ?? {}).length != 0}
409
+
fallback={<span class="text-center text-base mt-3">No collections found.</span>}
410
>
411
+
<For
412
+
each={Object.keys(nsids() ?? {}).filter((authority) =>
413
+
filter() ?
414
+
authority.includes(filter()!) ||
415
+
nsids()?.[authority].nsids.some((nsid) =>
416
+
`${authority}.${nsid}`.includes(filter()!),
417
+
)
418
+
: true,
419
+
)}
420
+
>
421
+
{(authority) => {
422
+
const reversedDomain = authority.split(".").reverse().join(".");
423
+
const [faviconLoaded, setFaviconLoaded] = createSignal(false);
424
425
+
const isHighlighted = () => location.hash === `#collections:${authority}`;
426
427
+
return (
428
+
<div
429
+
id={`collection-${authority}`}
430
+
class="group flex items-start gap-2 rounded-lg p-1 transition-colors"
431
+
classList={{
432
+
"dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),
433
+
"bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
434
+
}}
435
>
436
+
<a
437
+
href={`#collections:${authority}`}
438
+
class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
439
>
440
+
<span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">
441
+
<span class="iconify lucide--link absolute -left-2 w-7"></span>
442
+
</span>
443
+
<Show when={!faviconLoaded()}>
444
+
<span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
445
+
</Show>
446
+
<img
447
+
src={
448
+
["bsky.app", "bsky.chat"].includes(reversedDomain) ?
449
+
"https://web-cdn.bsky.app/static/apple-touch-icon.png"
450
+
: `https://${reversedDomain}/favicon.ico`
451
+
}
452
+
alt={`${reversedDomain} favicon`}
453
+
class="h-4 w-4"
454
+
classList={{ hidden: !faviconLoaded() }}
455
+
onLoad={() => setFaviconLoaded(true)}
456
+
onError={() => setFaviconLoaded(false)}
457
+
/>
458
+
</a>
459
+
<div class="flex flex-1 flex-col">
460
+
<For
461
+
each={nsids()?.[authority].nsids.filter((nsid) =>
462
+
filter() ? `${authority}.${nsid}`.includes(filter()!) : true,
463
+
)}
464
+
>
465
+
{(nsid) => (
466
+
<A
467
+
href={`/at://${did}/${authority}.${nsid}`}
468
+
class="hover:underline active:underline"
469
+
>
470
+
<span>{authority}</span>
471
+
<span class="text-neutral-500 dark:text-neutral-400">.{nsid}</span>
472
+
</A>
473
+
)}
474
+
</For>
475
+
</div>
476
</div>
477
+
);
478
+
}}
479
+
</For>
480
+
</Show>
481
</div>
482
</Show>
483
<Show when={location.hash === "#identity" || (error() && !location.hash)}>