forked from
pds.ls/pdsls
atproto explorer
repo collection list redesign
+29
-58
+1
-1
src/views/pds.tsx
+1
-1
src/views/pds.tsx
···
52
52
<div class="flex items-center">
53
53
<A
54
54
href={`/at://${repo.did}`}
55
-
class="grow truncate rounded py-0.5 font-mono text-blue-400 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
55
+
class="grow truncate rounded py-0.5 font-mono hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
56
56
>
57
57
{repo.did}
58
58
</A>
+28
-57
src/views/repo.tsx
+28
-57
src/views/repo.tsx
···
130
130
setDownloading(false);
131
131
};
132
132
133
-
const toggleCollection = (authority: string) => {
134
-
setNsids({
135
-
...nsids(),
136
-
[authority]: { ...nsids()![authority], hidden: !nsids()![authority].hidden },
137
-
});
138
-
};
139
-
140
133
return (
141
134
<Show when={repo()}>
142
135
<div class="flex w-full flex-col gap-2 break-words">
···
226
219
onInput={(e) => setFilter(e.currentTarget.value)}
227
220
class="grow"
228
221
/>
229
-
<div class="flex flex-col font-mono">
230
-
<div class="grid grid-cols-[min-content_1fr] items-center gap-x-2 overflow-hidden text-sm">
231
-
<For
232
-
each={Object.keys(nsids() ?? {}).filter((authority) =>
233
-
filter() ?
234
-
authority.startsWith(filter()!) || filter()?.startsWith(authority)
235
-
: true,
236
-
)}
237
-
>
238
-
{(authority) => (
239
-
<>
240
-
<button onclick={() => toggleCollection(authority)} class="flex items-center">
241
-
<span
242
-
classList={{
243
-
"iconify lucide--chevron-down text-lg transition-transform": true,
244
-
"-rotate-90": nsids()?.[authority].hidden,
245
-
}}
246
-
></span>
247
-
</button>
248
-
<button
249
-
class="bg-transparent text-left wrap-anywhere"
250
-
onclick={() => toggleCollection(authority)}
251
-
>
252
-
{authority}
253
-
</button>
254
-
<Show when={!nsids()?.[authority].hidden}>
255
-
<div></div>
256
-
<div class="flex flex-col">
257
-
<For
258
-
each={nsids()?.[authority].nsids.filter((nsid) =>
259
-
filter() ?
260
-
nsid.startsWith(filter()!.split(".").slice(2).join("."))
261
-
: true,
262
-
)}
263
-
>
264
-
{(nsid) => (
265
-
<A
266
-
href={`/at://${did}/${authority}.${nsid}`}
267
-
class="text-blue-400 hover:underline active:underline"
268
-
>
269
-
{authority}.{nsid}
270
-
</A>
271
-
)}
272
-
</For>
273
-
</div>
274
-
</Show>
275
-
</>
276
-
)}
277
-
</For>
278
-
</div>
222
+
<div class="flex flex-col overflow-hidden font-mono text-sm">
223
+
<For
224
+
each={Object.keys(nsids() ?? {}).filter((authority) =>
225
+
filter() ?
226
+
authority.startsWith(filter()!) || filter()?.startsWith(authority)
227
+
: true,
228
+
)}
229
+
>
230
+
{(authority) => (
231
+
<div class="flex flex-col rounded-lg p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700">
232
+
<For
233
+
each={nsids()?.[authority].nsids.filter((nsid) =>
234
+
filter() ? nsid.startsWith(filter()!.split(".").slice(2).join(".")) : true,
235
+
)}
236
+
>
237
+
{(nsid) => (
238
+
<A
239
+
href={`/at://${did}/${authority}.${nsid}`}
240
+
class="hover:underline active:underline"
241
+
>
242
+
<span>{authority}</span>
243
+
<span class="text-neutral-500 dark:text-neutral-400">.{nsid}</span>
244
+
</A>
245
+
)}
246
+
</For>
247
+
</div>
248
+
)}
249
+
</For>
279
250
</div>
280
251
</Show>
281
252
<Show when={location.hash === "#identity"}>