atproto explorer
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

record tabs as hash links

Juliet 135c595c 0be6c154

+12 -12
+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={