forked from
pds.ls/pdsls
atmosphere explorer
new pds repo list
+26
-73
+26
-73
src/views/pds.tsx
+26
-73
src/views/pds.tsx
···
7
7
import { createResource, createSignal, For, Show } from "solid-js";
8
8
import { Button } from "../components/button";
9
9
import DidHoverCard from "../components/hover-card/did";
10
-
import { Modal } from "../components/modal";
11
10
import { setPDS } from "../components/navbar";
12
-
import Tooltip from "../components/tooltip";
13
11
import { localDateFromTimestamp } from "../utils/date";
14
12
15
13
const LIMIT = 1000;
16
14
17
-
const PdsView = () => {
15
+
export const PdsView = () => {
18
16
const params = useParams();
19
17
const location = useLocation();
20
18
const [version, setVersion] = createSignal<string>();
···
54
52
const [repos, setRepos] = createSignal<ComAtprotoSyncListRepos.Repo[]>();
55
53
56
54
const RepoCard = (repo: ComAtprotoSyncListRepos.Repo) => {
57
-
const [openInfo, setOpenInfo] = createSignal(false);
58
-
59
55
return (
60
-
<div class="flex items-center gap-0.5">
61
-
<DidHoverCard
62
-
did={repo.did}
63
-
class="min-w-0 grow"
64
-
trigger={
65
-
<A
66
-
href={`/at://${repo.did}`}
67
-
class="block truncate rounded-md p-0.5 font-mono hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
68
-
>
69
-
{repo.did}
70
-
</A>
71
-
}
72
-
/>
73
-
<Show when={!repo.active}>
74
-
<Tooltip text={repo.status ?? "Unknown status"}>
75
-
<span class="iconify lucide--unplug text-red-500 dark:text-red-400"></span>
76
-
</Tooltip>
77
-
</Show>
78
-
<button
79
-
onclick={() => setOpenInfo(true)}
80
-
class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
81
-
>
82
-
<span class="iconify lucide--info text-neutral-600 dark:text-neutral-400"></span>
83
-
</button>
84
-
<Modal
85
-
open={openInfo()}
86
-
onClose={() => setOpenInfo(false)}
87
-
contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-max max-w-[90vw] rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md sm:max-w-xl dark:border-neutral-700"
88
-
>
89
-
<div class="mb-2 flex items-center justify-between gap-4">
90
-
<p class="truncate font-semibold">{repo.did}</p>
91
-
<button
92
-
onclick={() => setOpenInfo(false)}
93
-
class="flex shrink-0 items-center rounded-md p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 active:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
94
-
>
95
-
<span class="iconify lucide--x"></span>
96
-
</button>
56
+
<A
57
+
href={`/at://${repo.did}`}
58
+
class="dark:hover:bg-dark-200 flex min-w-0 items-start gap-2 rounded p-1.5 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} />
64
+
</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"}
69
+
</span>
70
+
</Show>
97
71
</div>
98
-
<div class="grid grid-cols-[auto_1fr] items-baseline gap-x-1 gap-y-0.5 text-sm">
99
-
<span class="font-medium">Head:</span>
100
-
<span class="wrap-anywhere text-neutral-700 dark:text-neutral-300">{repo.head}</span>
101
-
72
+
<div class="flex flex-col gap-x-2 font-mono text-xs text-neutral-500 dark:text-neutral-400">
73
+
<Show when={repo.head}>
74
+
<span class="truncate">{repo.head}</span>
75
+
</Show>
102
76
<Show when={TID.validate(repo.rev)}>
103
-
<span class="font-medium">Rev:</span>
104
77
<div class="flex gap-1">
105
-
<span class="text-neutral-700 dark:text-neutral-300">{repo.rev}</span>
106
-
<span class="text-neutral-600 dark:text-neutral-400">·</span>
107
-
<span class="text-neutral-600 dark:text-neutral-400">
108
-
{localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}
109
-
</span>
78
+
<span>{repo.rev}</span>
79
+
<span>•</span>
80
+
<span>{localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}</span>
110
81
</div>
111
82
</Show>
112
-
113
-
<Show when={repo.active !== undefined}>
114
-
<span class="font-medium">Active:</span>
115
-
<span
116
-
class={`iconify self-center ${
117
-
repo.active ?
118
-
"lucide--check text-green-500 dark:text-green-400"
119
-
: "lucide--x text-red-500 dark:text-red-400"
120
-
}`}
121
-
></span>
122
-
</Show>
123
-
124
-
<Show when={repo.status}>
125
-
<span class="font-medium">Status:</span>
126
-
<span class="text-neutral-700 dark:text-neutral-300">{repo.status}</span>
127
-
</Show>
128
83
</div>
129
-
</Modal>
130
-
</div>
84
+
</div>
85
+
</A>
131
86
);
132
87
};
133
88
···
160
115
<Tab tab="firehose" label="Firehose" />
161
116
</div>
162
117
<Show when={!location.hash || location.hash === "#repos"}>
163
-
<div class="flex flex-col divide-y-[0.5px] divide-neutral-300 pb-20 dark:divide-neutral-700">
118
+
<div class="-mx-1.5 flex flex-col pb-20">
164
119
<For each={repos()}>{(repo) => <RepoCard {...repo} />}</For>
165
120
</div>
166
121
</Show>
···
274
229
</>
275
230
);
276
231
};
277
-
278
-
export { PdsView };