atmosphere explorer
pds.ls
tool
typescript
atproto
repo list with expand for infos
+37
-17
+37
-17
src/views/pds.tsx
+37
-17
src/views/pds.tsx
···
52
52
const [repos, setRepos] = createSignal<ComAtprotoSyncListRepos.Repo[]>();
53
53
54
54
const RepoCard = (repo: ComAtprotoSyncListRepos.Repo) => {
55
+
const [expanded, setExpanded] = createSignal(false);
56
+
55
57
return (
56
-
<A
57
-
href={`/at://${repo.did}`}
58
-
class="dark:hover:bg-dark-200 flex min-w-0 items-start gap-2 rounded px-1.5 py-1 text-left hover:bg-neutral-200/70"
59
-
>
60
-
<div class="flex min-w-0 flex-1 flex-col">
61
-
<div class="flex items-center gap-x-2 text-sm">
62
-
<span class="min-w-0 truncate font-mono" onclick={(e) => e.stopPropagation()}>
63
-
<DidHoverCard newTab did={repo.did} />
58
+
<div class="flex flex-col gap-1">
59
+
<div class="flex items-start">
60
+
<button
61
+
type="button"
62
+
onclick={() => setExpanded(!expanded())}
63
+
class="dark:hover:bg-dark-200 flex min-w-0 flex-1 items-center gap-2 rounded p-1 hover:bg-neutral-200/70"
64
+
>
65
+
<span class="mt-0.5 flex shrink-0 items-center text-neutral-400 dark:text-neutral-500">
66
+
{expanded() ?
67
+
<span class="iconify lucide--chevron-down"></span>
68
+
: <span class="iconify lucide--chevron-right"></span>}
64
69
</span>
65
-
<Show when={!repo.active}>
66
-
<span class="flex shrink-0 items-center gap-1 text-red-500 dark:text-red-400">
67
-
<span class="iconify lucide--alert-triangle"></span>
68
-
{repo.status ?? "inactive"}
70
+
<div class="flex min-w-0 flex-1 items-center gap-x-2 text-sm">
71
+
<span class="min-w-0 truncate font-mono" onclick={(e) => e.stopPropagation()}>
72
+
<DidHoverCard newTab did={repo.did} />
69
73
</span>
70
-
</Show>
71
-
</div>
72
-
<div class="flex flex-col gap-x-2 font-mono text-xs text-neutral-500 dark:text-neutral-400">
74
+
<Show when={!repo.active}>
75
+
<span class="flex shrink-0 items-center gap-1 text-red-500 dark:text-red-400">
76
+
<span class="iconify lucide--unplug"></span>
77
+
{repo.status ?? "inactive"}
78
+
</span>
79
+
</Show>
80
+
</div>
81
+
</button>
82
+
<Show when={expanded()}>
83
+
<A
84
+
href={`/at://${repo.did}`}
85
+
class="flex size-7 shrink-0 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-200 hover:text-neutral-600 active:bg-neutral-300 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:active:bg-neutral-600"
86
+
>
87
+
<span class="iconify lucide--arrow-right"></span>
88
+
</A>
89
+
</Show>
90
+
</div>
91
+
<Show when={expanded()}>
92
+
<div class="mb-2 ml-[28px] flex flex-col gap-1 font-mono text-xs text-neutral-500 dark:text-neutral-400">
73
93
<Show when={repo.head}>
74
94
<span class="truncate">{repo.head}</span>
75
95
</Show>
···
81
101
</div>
82
102
</Show>
83
103
</div>
84
-
</div>
85
-
</A>
104
+
</Show>
105
+
</div>
86
106
);
87
107
};
88
108