atmosphere explorer
pds.ls
tool
typescript
atproto
restyle tabs in repo and record pages
+27
-22
+7
-2
src/components/dropdown.tsx
+7
-2
src/components/dropdown.tsx
···
75
75
export const ActionMenu = (props: {
76
76
label: string;
77
77
icon: string;
78
-
onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
78
+
onClick: () => void;
79
79
}) => {
80
+
const ctx = useContext(MenuContext);
81
+
80
82
return (
81
83
<button
82
-
onClick={props.onClick}
84
+
onClick={() => {
85
+
props.onClick();
86
+
ctx?.setShowMenu(false);
87
+
}}
83
88
class="flex items-center gap-2 rounded-md p-1.5 whitespace-nowrap hover:bg-neutral-200/50 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
84
89
>
85
90
<Show when={props.icon}>
+3
-3
src/views/record.tsx
+3
-3
src/views/record.tsx
···
364
364
<A
365
365
classList={{
366
366
"border-b-2": true,
367
-
"border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":
367
+
"border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-600 dark:hover:border-neutral-400":
368
368
!isActive(),
369
369
}}
370
370
href={`/at://${did}/${params.collection}/${params.rkey}#${props.tab}`}
···
381
381
return (
382
382
<Show when={record()} keyed>
383
383
<div class="flex w-full flex-col items-center">
384
-
<div class="dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-sm shadow-xs dark:border-neutral-700">
385
-
<div class="ml-1 flex items-center gap-3">
384
+
<div class="mb-3 flex w-full justify-between px-2 text-sm sm:text-base">
385
+
<div class="flex items-center gap-4">
386
386
<RecordTab tab="record" label="Record" />
387
387
<RecordTab tab="schema" label="Schema" />
388
388
<RecordTab tab="backlinks" label="Backlinks" />
+17
-17
src/views/repo.tsx
+17
-17
src/views/repo.tsx
···
89
89
<A
90
90
classList={{
91
91
"border-b-2": true,
92
-
"border-transparent hover:border-neutral-400 dark:hover:border-neutral-600": !isActive(),
92
+
"border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-600 dark:hover:border-neutral-400":
93
+
!isActive(),
93
94
}}
94
95
href={`/at://${params.repo}#${props.tab}`}
95
96
>
···
275
276
return (
276
277
<Show when={repo()}>
277
278
<div class="flex w-full flex-col gap-3 wrap-break-word">
278
-
<div class="dark:shadow-dark-700 dark:bg-dark-300 flex justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-sm shadow-xs dark:border-neutral-700">
279
-
<div class="ml-1 flex items-center gap-2 text-xs sm:gap-4 sm:text-sm">
279
+
<div class="flex justify-between px-2 text-sm sm:text-base">
280
+
<div class="flex items-center gap-3 sm:gap-4">
280
281
<Show when={!error()}>
281
282
<RepoTab tab="collections" label="Collections" />
282
283
</Show>
···
289
290
</Show>
290
291
<RepoTab tab="backlinks" label="Backlinks" />
291
292
</div>
292
-
<div class="flex gap-0.5">
293
+
<div class="flex gap-1">
293
294
<Show when={error() && error() !== "Missing PDS"}>
294
295
<div class="flex items-center gap-1 text-red-500 dark:text-red-400">
295
296
<span class="iconify lucide--alert-triangle"></span>
296
297
<span>{error()}</span>
297
298
</div>
298
-
</Show>
299
-
<Show when={!error() && (!location.hash || location.hash.startsWith("#collections"))}>
300
-
<Tooltip text="Filter collections">
301
-
<button
302
-
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"
303
-
onClick={() => setShowFilter(!showFilter())}
304
-
>
305
-
<span class="iconify lucide--filter"></span>
306
-
</button>
307
-
</Tooltip>
308
299
</Show>
309
300
<MenuProvider>
310
301
<DropdownMenu icon="lucide--ellipsis-vertical" buttonClass="rounded-sm p-1.5">
302
+
<Show
303
+
when={!error() && (!location.hash || location.hash.startsWith("#collections"))}
304
+
>
305
+
<ActionMenu
306
+
label="Filter collections"
307
+
icon="lucide--filter"
308
+
onClick={() => setShowFilter(!showFilter())}
309
+
/>
310
+
</Show>
311
311
<CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />
312
312
<NavMenu
313
313
href={`/jetstream?dids=${params.repo}`}
···
323
323
</Show>
324
324
<Show when={error()?.length === 0 || error() === undefined}>
325
325
<ActionMenu
326
-
label="Export Repo"
326
+
label="Export repo"
327
327
icon={downloading() ? "lucide--loader-circle animate-spin" : "lucide--download"}
328
328
onClick={() => downloadRepo()}
329
329
/>
···
336
336
: `https://${did.split("did:web:")[1]}/.well-known/did.json`
337
337
}
338
338
newTab
339
-
label="DID Document"
339
+
label="DID document"
340
340
icon="lucide--external-link"
341
341
/>
342
342
<Show when={did.startsWith("did:plc")}>
343
343
<NavMenu
344
344
href={`${localStorage.plcDirectory ?? "https://plc.directory"}/${did}/log/audit`}
345
345
newTab
346
-
label="Audit Log"
346
+
label="Audit log"
347
347
icon="lucide--external-link"
348
348
/>
349
349
</Show>