forked from
pds.ls/pdsls
atproto explorer
record tabs as hash links
+12
-12
+12
-12
src/views/record.tsx
+12
-12
src/views/record.tsx
···
1
1
import { CredentialManager, Client } from "@atcute/client";
2
2
3
-
import { useNavigate, useParams } from "@solidjs/router";
3
+
import { A, useLocation, useNavigate, useParams } from "@solidjs/router";
4
4
import { createResource, createSignal, ErrorBoundary, Show, Suspense } from "solid-js";
5
5
6
6
import { Backlinks } from "../components/backlinks.jsx";
···
22
22
import { setNotif } from "../layout.jsx";
23
23
24
24
export const RecordView = () => {
25
+
const location = useLocation();
25
26
const navigate = useNavigate();
26
27
const params = useParams();
27
28
const [openDelete, setOpenDelete] = createSignal(false);
28
29
const [notice, setNotice] = createSignal("");
29
-
const [showBacklinks, setShowBacklinks] = createSignal(false);
30
30
const [externalLink, setExternalLink] = createSignal<
31
31
{ label: string; link: string; icon?: string } | undefined
32
32
>();
···
118
118
<div class="flex w-full flex-col items-center">
119
119
<div class="dark:shadow-dark-900/80 dark:bg-dark-300 my-3 flex w-[22rem] justify-between rounded-lg bg-white px-2 py-1.5 shadow-sm sm:w-[24rem]">
120
120
<div class="flex gap-3 text-sm">
121
-
<button
121
+
<A
122
122
classList={{
123
123
"flex items-center gap-1 border-b-2": true,
124
124
"border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":
125
-
showBacklinks(),
125
+
!!location.hash && location.hash !== "#record",
126
126
}}
127
-
onclick={() => setShowBacklinks(!showBacklinks())}
127
+
href={`/at://${did}/${params.collection}/${params.rkey}#record`}
128
128
>
129
129
<div class="iconify lucide--file-json" />
130
130
Record
131
-
</button>
132
-
<button
131
+
</A>
132
+
<A
133
133
classList={{
134
134
"flex items-center gap-1 border-b-2": true,
135
135
"border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":
136
-
!showBacklinks(),
136
+
location.hash !== "#backlinks",
137
137
}}
138
-
onclick={() => setShowBacklinks(!showBacklinks())}
138
+
href={`/at://${did}/${params.collection}/${params.rkey}#backlinks`}
139
139
>
140
140
<div class="iconify lucide--send-to-back" />
141
141
Backlinks
142
-
</button>
142
+
</A>
143
143
</div>
144
144
<div class="flex gap-1">
145
145
<Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>
···
199
199
</Tooltip>
200
200
</div>
201
201
</div>
202
-
<Show when={!showBacklinks()}>
202
+
<Show when={!location.hash || location.hash === "#record"}>
203
203
<Show when={validRecord() === false}>
204
204
<div class="mb-2 break-words text-red-500 dark:text-red-400">{notice()}</div>
205
205
</Show>
···
207
207
<JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
208
208
</div>
209
209
</Show>
210
-
<Show when={showBacklinks()}>
210
+
<Show when={location.hash === "#backlinks"}>
211
211
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
212
212
<Suspense
213
213
fallback={