+70 -10

src/components/create.tsx

··· 1 1 2 2 3 3 4 4 + import { getSession, OAuthUserAgent } from "@atcute/oauth-browser-client"; 5 5 + import { remove } from "@mary/exif-rm"; 6 6 + import { useNavigate, useParams } from "@solidjs/router"; 7 7 + import { 8 8 + createEffect, 9 9 + createSignal, 10 10 + For, 11 11 + lazy, 12 12 + onCleanup, 13 13 + onMount, 14 14 + Show, 15 15 + Suspense, 16 16 + } from "solid-js"; 17 17 + import { hasUserScope } from "../auth/scope-utils"; 18 18 + import { agent, sessions } from "../auth/state"; 19 19 + import { Button } from "./button.jsx"; 4 20 5 21 6 22 ··· 36 52 37 53 38 54 55 55 + } 56 56 + }); 39 57 58 58 + onMount(() => { 59 59 + const keyEvent = (ev: KeyboardEvent) => { 60 60 + if (ev.target instanceof HTMLInputElement || ev.target instanceof HTMLTextAreaElement) return; 61 61 + if ((ev.target as HTMLElement).closest("[data-modal]")) return; 40 62 63 63 + const key = props.create ? "n" : "e"; 64 64 + if (ev.key === key) { 65 65 + ev.preventDefault(); 41 66 67 67 + if (openDialog() && isMinimized()) { 68 68 + setIsMinimized(false); 69 69 + } else if (!openDialog() && !document.querySelector("[data-modal]")) { 70 70 + setOpenDialog(true); 71 71 + } 72 72 + } 73 73 + }; 42 74 75 75 + window.addEventListener("keydown", keyEvent); 76 76 + onCleanup(() => window.removeEventListener("keydown", keyEvent)); 77 77 + }); 43 78 79 79 + const defaultPlaceholder = () => { 80 80 + return { 81 81 + $type: "app.bsky.feed.post", 44 82 45 83 46 84 ··· 142 180 143 181 144 182 183 183 + return; 184 184 + } 185 185 + } else { 186 186 + const res = await rpc.post("com.atproto.repo.applyWrites", { 187 187 + input: { 188 188 + repo: agent()!.sub, 189 189 + validate: validate(), 190 190 + writes: [ 191 191 + { 192 192 + collection: params.collection as `${string}.${string}.${string}`, 193 193 + rkey: params.rkey!, 194 194 + $type: "com.atproto.repo.applyWrites#update", 195 195 + value: editedRecord, 196 196 + }, 197 197 + ], 198 198 + }, 199 199 + }); 200 200 + if (!res.ok) { 145 201 146 202 147 203 ··· 463 519 464 520 465 521 522 522 + </Tooltip> 523 523 + <span>Validate</span> 524 524 + </button> 525 525 + <Show when={!props.create && hasUserScope("create") && hasUserScope("delete")}> 526 526 + <Button onClick={() => editRecord(true)}>Recreate</Button> 527 527 + </Show> 528 528 + <Button 466 529 467 530 468 531 ··· 481 544 482 545 483 546 484 484 - 485 485 - 486 486 - 487 487 - </Tooltip> 488 488 - <span>Validate</span> 489 489 - </button> 490 490 - <Show when={!props.create}> 491 491 - <Button onClick={() => editRecord(true)}>Recreate</Button> 492 492 - </Show> 493 493 - <Button 547 547 + <span class="text-sm font-medium">{props.create ? "Creating" : "Editing"} record</span> 548 548 + </button> 549 549 + </Show> 550 550 + <Tooltip text={props.create ? "Create record (n)" : "Edit record (e)"}> 551 551 + <button 552 552 + class={`flex items-center p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 ${props.create ? "rounded-lg" : "rounded-sm"}`} 553 553 + onclick={() => {

+2 -2

src/auth/session-manager.ts

··· 1 1 - import { Client, CredentialManager } from "@atcute/client"; 1 1 + import { Client, simpleFetchHandler } from "@atcute/client"; 2 2 import { Did } from "@atcute/lexicons"; 3 3 import { 4 4 finalizeAuthorization, ··· 20 20 21 21 export const getAvatar = async (did: Did): Promise<string | undefined> => { 22 22 const rpc = new Client({ 23 23 - handler: new CredentialManager({ service: "https://public.api.bsky.app" }), 23 23 + handler: simpleFetchHandler({ service: "https://public.api.bsky.app" }), 24 24 }); 25 25 const res = await rpc.get("app.bsky.actor.getProfile", { params: { actor: did } }); 26 26 if (res.ok) {

public/favicon.ico

This is a binary file and will not be displayed.

+1 -4

index.html

··· 7 7 8 8 9 9 10 10 - 10 10 + <meta property="og:description" content="Browse the public data on atproto" /> 11 11 <meta property="description" content="Browse the public data on atproto" /> 12 12 <link rel="manifest" href="/manifest.json" /> 13 13 - <title>PDSls</title> 14 14 - <link rel="preconnect" href="https://rsms.me/" /> 15 15 - <link rel="stylesheet" href="https://rsms.me/inter/inter.css" /> 16 13 <link rel="preconnect" href="https://fonts.bunny.net" /> 17 14 <link href="https://fonts.bunny.net/css?family=roboto-mono:400" rel="stylesheet" /> 18 15 <link href="https://fonts.cdnfonts.com/css/pecita" rel="stylesheet" />

public/fonts/Figtree[wght].woff2

This is a binary file and will not be displayed.

+104

src/components/create/file-upload.tsx

··· 1 1 + import { Client } from "@atcute/client"; 2 2 + import { remove } from "@mary/exif-rm"; 3 3 + import { createSignal, onCleanup, Show } from "solid-js"; 4 4 + import { agent } from "../../auth/state"; 5 5 + import { formatFileSize } from "../../utils/format"; 6 6 + import { Button } from "../button.jsx"; 7 7 + import { TextInput } from "../text-input.jsx"; 8 8 + import { editorInstance } from "./state"; 9 9 + 10 10 + export const FileUpload = (props: { 11 11 + file: File; 12 12 + blobInput: HTMLInputElement; 13 13 + onClose: () => void; 14 14 + }) => { 15 15 + const [uploading, setUploading] = createSignal(false); 16 16 + const [error, setError] = createSignal(""); 17 17 + 18 18 + onCleanup(() => (props.blobInput.value = "")); 19 19 + 20 20 + const uploadBlob = async () => { 21 21 + let blob: Blob; 22 22 + 23 23 + const mimetype = (document.getElementById("mimetype") as HTMLInputElement)?.value; 24 24 + (document.getElementById("mimetype") as HTMLInputElement).value = ""; 25 25 + if (mimetype) blob = new Blob([props.file], { type: mimetype }); 26 26 + else blob = props.file; 27 27 + 28 28 + if ((document.getElementById("exif-rm") as HTMLInputElement).checked) { 29 29 + const exifRemoved = remove(new Uint8Array(await blob.arrayBuffer())); 30 30 + if (exifRemoved !== null) blob = new Blob([exifRemoved as BlobPart], { type: blob.type }); 31 31 + } 32 32 + 33 33 + const rpc = new Client({ handler: agent()! }); 34 34 + setUploading(true); 35 35 + const res = await rpc.post("com.atproto.repo.uploadBlob", { 36 36 + input: blob, 37 37 + }); 38 38 + setUploading(false); 39 39 + if (!res.ok) { 40 40 + setError(res.data.error); 41 41 + return; 42 42 + } 43 43 + editorInstance.view.dispatch({ 44 44 + changes: { 45 45 + from: editorInstance.view.state.selection.main.head, 46 46 + insert: JSON.stringify(res.data.blob, null, 2), 47 47 + }, 48 48 + }); 49 49 + props.onClose(); 50 50 + }; 51 51 + 52 52 + return ( 53 53 + <> 54 54 + <h2 class="mb-2 font-semibold">Upload blob</h2> 55 55 + <div class="flex flex-col gap-2 text-sm"> 56 56 + <div class="flex flex-col gap-1"> 57 57 + <p class="flex gap-1"> 58 58 + <span class="truncate">{props.file.name}</span> 59 59 + <span class="shrink-0 text-neutral-600 dark:text-neutral-400"> 60 60 + ({formatFileSize(props.file.size)}) 61 61 + </span> 62 62 + </p> 63 63 + </div> 64 64 + <div class="flex items-center gap-x-2"> 65 65 + <label for="mimetype" class="shrink-0 select-none"> 66 66 + MIME type 67 67 + </label> 68 68 + <TextInput id="mimetype" placeholder={props.file.type} /> 69 69 + </div> 70 70 + <div class="flex items-center gap-1"> 71 71 + <input id="exif-rm" type="checkbox" checked /> 72 72 + <label for="exif-rm" class="select-none"> 73 73 + Remove EXIF data 74 74 + </label> 75 75 + </div> 76 76 + <p class="text-xs text-neutral-600 dark:text-neutral-400"> 77 77 + Metadata will be pasted after the cursor 78 78 + </p> 79 79 + <Show when={error()}> 80 80 + <span class="text-red-500 dark:text-red-400">Error: {error()}</span> 81 81 + </Show> 82 82 + <div class="flex justify-between gap-2"> 83 83 + <Button onClick={props.onClose}>Cancel</Button> 84 84 + <Show when={uploading()}> 85 85 + <div class="flex items-center gap-1"> 86 86 + <span class="iconify lucide--loader-circle animate-spin"></span> 87 87 + <span>Uploading</span> 88 88 + </div> 89 89 + </Show> 90 90 + <Show when={!uploading()}> 91 91 + <Button 92 92 + onClick={uploadBlob} 93 93 + classList={{ 94 94 + "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true, 95 95 + }} 96 96 + > 97 97 + Upload 98 98 + </Button> 99 99 + </Show> 100 100 + </div> 101 101 + </div> 102 102 + </> 103 103 + ); 104 104 + };

+89

src/components/create/handle-input.tsx

··· 1 1 + import { Handle } from "@atcute/lexicons"; 2 2 + import { createSignal, Show } from "solid-js"; 3 3 + import { resolveHandle } from "../../utils/api"; 4 4 + import { Button } from "../button.jsx"; 5 5 + import { TextInput } from "../text-input.jsx"; 6 6 + import { editorInstance } from "./state"; 7 7 + 8 8 + export const HandleInput = (props: { onClose: () => void }) => { 9 9 + const [resolving, setResolving] = createSignal(false); 10 10 + const [error, setError] = createSignal(""); 11 11 + let handleFormRef!: HTMLFormElement; 12 12 + 13 13 + const resolveDid = async (e: SubmitEvent) => { 14 14 + e.preventDefault(); 15 15 + const formData = new FormData(handleFormRef); 16 16 + const handleValue = formData.get("handle")?.toString().trim(); 17 17 + 18 18 + if (!handleValue) { 19 19 + setError("Please enter a handle"); 20 20 + return; 21 21 + } 22 22 + 23 23 + setResolving(true); 24 24 + setError(""); 25 25 + try { 26 26 + const did = await resolveHandle(handleValue as Handle); 27 27 + editorInstance.view.dispatch({ 28 28 + changes: { 29 29 + from: editorInstance.view.state.selection.main.head, 30 30 + insert: `"${did}"`, 31 31 + }, 32 32 + }); 33 33 + props.onClose(); 34 34 + handleFormRef.reset(); 35 35 + } catch (err: any) { 36 36 + setError(err.message || "Failed to resolve handle"); 37 37 + } finally { 38 38 + setResolving(false); 39 39 + } 40 40 + }; 41 41 + 42 42 + return ( 43 43 + <> 44 44 + <h2 class="mb-2 font-semibold">Insert DID from handle</h2> 45 45 + <form ref={handleFormRef} onSubmit={resolveDid} class="flex flex-col gap-2 text-sm"> 46 46 + <div class="flex flex-col gap-1"> 47 47 + <label for="handle-input" class="select-none"> 48 48 + Handle 49 49 + </label> 50 50 + <TextInput id="handle-input" name="handle" placeholder="user.bsky.social" /> 51 51 + </div> 52 52 + <p class="text-xs text-neutral-600 dark:text-neutral-400"> 53 53 + DID will be pasted after the cursor 54 54 + </p> 55 55 + <Show when={error()}> 56 56 + <span class="text-red-500 dark:text-red-400">Error: {error()}</span> 57 57 + </Show> 58 58 + <div class="flex justify-between gap-2"> 59 59 + <Button 60 60 + type="button" 61 61 + onClick={() => { 62 62 + props.onClose(); 63 63 + handleFormRef.reset(); 64 64 + setError(""); 65 65 + }} 66 66 + > 67 67 + Cancel 68 68 + </Button> 69 69 + <Show when={resolving()}> 70 70 + <div class="flex items-center gap-1"> 71 71 + <span class="iconify lucide--loader-circle animate-spin"></span> 72 72 + <span>Resolving</span> 73 73 + </div> 74 74 + </Show> 75 75 + <Show when={!resolving()}> 76 76 + <Button 77 77 + type="submit" 78 78 + classList={{ 79 79 + "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true, 80 80 + }} 81 81 + > 82 82 + Insert 83 83 + </Button> 84 84 + </Show> 85 85 + </div> 86 86 + </form> 87 87 + </> 88 88 + ); 89 89 + };

+12

src/components/create/menu-item.tsx

··· 1 1 + export const MenuItem = (props: { icon: string; label: string; onClick: () => void }) => { 2 2 + return ( 3 3 + <button 4 4 + type="button" 5 5 + class="flex items-center gap-2 rounded-md p-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 6 6 + onClick={props.onClick} 7 7 + > 8 8 + <span class={`iconify ${props.icon}`}></span> 9 9 + <span>{props.label}</span> 10 10 + </button> 11 11 + ); 12 12 + };

+4

src/components/create/state.ts

··· 1 1 + import { createSignal } from "solid-js"; 2 2 + 3 3 + export const editorInstance = { view: null as any }; 4 4 + export const [placeholder, setPlaceholder] = createSignal<any>();

+42 -1

src/components/editor.tsx

··· 7 7 import { basicLight } from "@fsegurai/codemirror-theme-basic-light"; 8 8 import { basicSetup, EditorView } from "codemirror"; 9 9 import { onCleanup, onMount } from "solid-js"; 10 10 - import { editorInstance } from "./create"; 10 10 + import { editorInstance } from "./create/state"; 11 11 12 12 const Editor = (props: { content: string }) => { 13 13 let editorDiv!: HTMLDivElement; 14 14 + 15 15 + 16 16 + 17 17 + 18 18 + 19 19 + 20 20 + 21 21 + 22 22 + 23 23 + 24 24 + 25 25 + 26 26 + 27 27 + 28 28 + 29 29 + 30 30 + 31 31 + 32 32 + 33 33 + 34 34 + 35 35 + 36 36 + 37 37 + 38 38 + 39 39 + 40 40 + 41 41 + 42 42 + 43 43 + 44 44 + 45 45 + 46 46 + 47 47 + 48 48 + keymap.of([indentWithTab]), 49 49 + linter(jsonParseLinter()), 50 50 + themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight), 51 51 + EditorView.lineWrapping, 52 52 + ], 53 53 + }); 54 54 + editorInstance.view = view;

+97

src/components/create/confirm-submit.tsx

··· 1 1 + import { createSignal, Show } from "solid-js"; 2 2 + import { hasUserScope } from "../../auth/scope-utils"; 3 3 + import { Button } from "../button.jsx"; 4 4 + 5 5 + export const ConfirmSubmit = (props: { 6 6 + isCreate: boolean; 7 7 + onConfirm: (validate: boolean | undefined, recreate: boolean) => void; 8 8 + onClose: () => void; 9 9 + }) => { 10 10 + const [validate, setValidate] = createSignal<boolean | undefined>(undefined); 11 11 + const [recreate, setRecreate] = createSignal(false); 12 12 + 13 13 + const getValidateLabel = () => { 14 14 + return ( 15 15 + validate() === true ? "True" 16 16 + : validate() === false ? "False" 17 17 + : "Unset" 18 18 + ); 19 19 + }; 20 20 + 21 21 + const cycleValidate = () => { 22 22 + setValidate( 23 23 + validate() === undefined ? true 24 24 + : validate() === true ? false 25 25 + : undefined, 26 26 + ); 27 27 + }; 28 28 + 29 29 + return ( 30 30 + <> 31 31 + <div class="flex flex-col gap-3 text-sm"> 32 32 + <h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2> 33 33 + <div class="flex flex-col gap-1.5"> 34 34 + <div class="flex items-center gap-2"> 35 35 + <button 36 36 + type="button" 37 37 + class="-ml-2 flex min-w-30 items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200/50 dark:hover:bg-neutral-700" 38 38 + onClick={cycleValidate} 39 39 + > 40 40 + <span 41 41 + classList={{ 42 42 + iconify: true, 43 43 + "lucide--square-check text-green-500 dark:text-green-400": validate() === true, 44 44 + "lucide--square-x text-red-500 dark:text-red-400": validate() === false, 45 45 + "lucide--square text-neutral-500 dark:text-neutral-400": validate() === undefined, 46 46 + }} 47 47 + ></span> 48 48 + <span>Validate: {getValidateLabel()}</span> 49 49 + </button> 50 50 + </div> 51 51 + <p class="text-xs text-neutral-600 dark:text-neutral-400"> 52 52 + Set to 'false' to skip lexicon schema validation by the PDS, 'true' to require it, or 53 53 + leave unset to validate only for known lexicons. 54 54 + </p> 55 55 + </div> 56 56 + <Show when={!props.isCreate}> 57 57 + <div class="flex flex-col gap-1.5"> 58 58 + <div class="flex items-center gap-2"> 59 59 + <button 60 60 + type="button" 61 61 + class={ 62 62 + hasUserScope("create") ? 63 63 + "-ml-2 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200/50 dark:hover:bg-neutral-700" 64 64 + : "-ml-2 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs opacity-40" 65 65 + } 66 66 + onClick={() => hasUserScope("create") && setRecreate(!recreate())} 67 67 + > 68 68 + <span 69 69 + classList={{ 70 70 + iconify: true, 71 71 + "lucide--square-check text-green-500 dark:text-green-400": recreate(), 72 72 + "lucide--square text-neutral-500 dark:text-neutral-400": !recreate(), 73 73 + }} 74 74 + ></span> 75 75 + <span>Recreate{hasUserScope("create") ? "" : " (create permission needed)"}</span> 76 76 + </button> 77 77 + </div> 78 78 + <p class="text-xs text-neutral-600 dark:text-neutral-400"> 79 79 + Delete the existing record and create a new one with the same record key. 80 80 + </p> 81 81 + </div> 82 82 + </Show> 83 83 + <div class="flex justify-between gap-2"> 84 84 + <Button onClick={props.onClose}>Cancel</Button> 85 85 + <Button 86 86 + onClick={() => props.onConfirm(validate(), recreate())} 87 87 + classList={{ 88 88 + "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true, 89 89 + }} 90 90 + > 91 91 + {props.isCreate ? "Create" : "Edit"} 92 92 + </Button> 93 93 + </div> 94 94 + </div> 95 95 + </> 96 96 + ); 97 97 + };

+44 -50

src/views/logs.tsx

··· 5 5 6 6 7 7 8 8 + import { createEffect, createResource, createSignal, For, Show } from "solid-js"; 9 9 + import { localDateFromTimestamp } from "../utils/date.js"; 10 10 + import { createOperationHistory, DiffEntry, groupBy } from "../utils/plc-logs.js"; 11 11 + import { plcDirectory } from "./settings.jsx"; 8 12 13 13 + type PlcEvent = "handle" | "rotation_key" | "service" | "verification_method"; 9 14 10 15 11 16 ··· 16 21 17 22 18 23 24 24 + !activePlcEvent() || diffs.some((d) => d.type.startsWith(activePlcEvent()!)); 19 25 26 26 + const fetchPlcLogs = async () => { 27 27 + const res = await fetch(`${plcDirectory()}/${props.did}/log/audit`); 28 28 + const json = await res.json(); 29 29 + const logs = defs.indexedEntryLog.parse(json); 30 30 + setRawLogs(logs); 20 31 21 32 22 33 ··· 40 51 41 52 42 53 54 54 + } 55 55 + }); 43 56 57 57 + const FilterButton = (props: { event: PlcEvent; label: string }) => { 58 58 + const isActive = () => activePlcEvent() === props.event; 59 59 + const toggleFilter = () => setActivePlcEvent(isActive() ? undefined : props.event); 44 60 61 61 + return ( 62 62 + <button 63 63 + classList={{ 64 64 + "font-medium rounded-lg px-2 py-1.5 text-xs sm:text-sm transition-colors": true, 65 65 + "bg-neutral-700 text-white dark:bg-neutral-300 dark:text-neutral-900": isActive(), 66 66 + "bg-neutral-200 text-neutral-700 hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600": 67 67 + !isActive(), 68 68 + }} 69 69 + onclick={toggleFilter} 70 70 + > 71 71 + {props.label} 72 72 + </button> 73 73 + ); 74 74 + }; 45 75 46 76 47 77 ··· 220 250 221 251 222 252 223 223 - 224 224 - 225 225 - 226 226 - 227 227 - 228 228 - 229 229 - 230 230 - 231 231 - 232 232 - 233 233 - 234 234 - 235 235 - 236 236 - 237 237 - 238 238 - 239 239 - 240 240 - 241 241 - 242 242 - 243 243 - 244 244 - 245 245 - 246 246 - 247 247 - 248 248 - 249 249 - 250 250 - 251 251 - 252 252 - 253 253 - 254 254 - 255 255 - 256 256 - 257 257 - 258 258 - 259 259 - 260 260 - 261 261 - 262 262 - 263 263 - 264 264 - 265 265 - 266 266 - 267 267 - 268 268 - 269 269 - 270 270 - 271 271 - 253 253 + <div class="iconify lucide--filter" /> 254 254 + <p class="font-medium">Filter by type</p> 255 255 + </div> 256 256 + <div class="flex flex-wrap gap-1"> 257 257 + <FilterButton event="handle" label="Alias" /> 258 258 + <FilterButton event="service" label="Service" /> 259 259 + <FilterButton event="verification_method" label="Verification" /> 260 260 + <FilterButton event="rotation_key" label="Rotation Key" /> 261 261 + </div> 272 262 </div> 273 263 <div class="flex items-center gap-1.5 text-sm font-medium"> 274 264 <Show when={validLog() === true}> 275 275 - <span class="iconify lucide--check-circle-2 text-green-500 dark:text-green-400"></span> 265 265 + <span class="iconify lucide--check text-green-600 dark:text-green-400"></span> 276 266 <span>Valid log</span> 277 267 </Show> 278 268 <Show when={validLog() === false}> 269 269 + <span class="iconify lucide--x text-red-500 dark:text-red-400"></span> 270 270 + <span>Log validation failed</span> 271 271 + </Show> 272 272 + <Show when={validLog() === undefined}>

+219 -33

src/views/home.tsx

··· 1 1 - export const Home = () => { 2 2 - return ( 3 3 - <div class="flex w-full flex-col gap-3 wrap-break-word"> 4 4 - <div class="flex flex-col gap-0.5"> 5 5 - <div> 6 6 - <span class="text-xl font-semibold">AT Protocol Explorer</span> 7 7 - </div> 8 8 - 9 9 - 10 10 - 11 11 - 1 1 + import { A } from "@solidjs/router"; 2 2 + import { For, JSX } from "solid-js"; 3 3 + import { setOpenManager } from "../auth/state"; 4 4 + import { Button } from "../components/button"; 5 5 + import { SearchButton } from "../components/search"; 6 6 + 7 7 + type ProfileData = { 8 8 + did: string; 9 9 + handle: string; 10 10 + }; 12 11 12 12 + export const Home = () => { 13 13 + const FooterLink = (props: { 14 14 + href: string; 15 15 + color: string; 16 16 + darkColor?: string; 17 17 + children: JSX.Element; 18 18 + }) => ( 19 19 + <a 20 20 + href={props.href} 21 21 + class={`relative flex items-center gap-1.5 after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-current ${props.color} after:transition-[width] after:duration-300 after:ease-out hover:after:w-full ${props.darkColor ?? ""}`} 22 22 + target="_blank" 23 23 + > 24 24 + {props.children} 25 25 + </a> 26 26 + ); 27 27 + 28 28 + const allExampleProfiles: ProfileData[] = [ 29 29 + { did: "did:plc:7vimlesenouvuaqvle42yhvo", handle: "juli.ee" }, 30 30 + { did: "did:plc:oisofpd7lj26yvgiivf3lxsi", handle: "hailey.at" }, 31 31 + { did: "did:plc:vwzwgnygau7ed7b7wt5ux7y2", handle: "retr0.id" }, 32 32 + { did: "did:plc:vc7f4oafdgxsihk4cry2xpze", handle: "jcsalterego.bsky.social" }, 33 33 + { did: "did:plc:uu5axsmbm2or2dngy4gwchec", handle: "futur.blue" }, 34 34 + { did: "did:plc:ia76kvnndjutgedggx2ibrem", handle: "mary.my.id" }, 35 35 + { did: "did:plc:hdhoaan3xa3jiuq4fg4mefid", handle: "bad-example.com" }, 36 36 + { did: "did:plc:q6gjnaw2blty4crticxkmujt", handle: "jaz.sh" }, 37 37 + { did: "did:plc:jrtgsidnmxaen4offglr5lsh", handle: "quilling.dev" }, 38 38 + { did: "did:plc:3c6vkaq7xf5kz3va3muptjh5", handle: "aylac.top" }, 39 39 + { did: "did:plc:gwd5r7dbg3zv6dhv75hboa3f", handle: "mofu.run" }, 40 40 + { did: "did:plc:tzrpqyerzt37pyj54hh52xrz", handle: "rainy.pet" }, 41 41 + { did: "did:plc:qx7in36j344d7qqpebfiqtew", handle: "futanari.observer" }, 42 42 + { did: "did:plc:ucaezectmpny7l42baeyooxi", handle: "sapphic.moe" }, 43 43 + { did: "did:plc:6v6jqsy7swpzuu53rmzaybjy", handle: "computer.fish" }, 44 44 + { did: "did:plc:w4nvvt6feq2l3qgnwl6a7g7d", handle: "emilia.wtf" }, 45 45 + { did: "did:plc:xwhsmuozq3mlsp56dyd7copv", handle: "paizuri.moe" }, 46 46 + { did: "did:plc:aokggmp5jzj4nc5jifhiplqc", handle: "dreary.blacksky.app" }, 47 47 + { did: "did:plc:k644h4rq5bjfzcetgsa6tuby", handle: "natalie.sh" }, 48 48 + { did: "did:plc:ttdrpj45ibqunmfhdsb4zdwq", handle: "nekomimi.pet" }, 49 49 + { did: "did:plc:fz2tul67ziakfukcwa3vdd5d", handle: "nullekko.moe" }, 50 50 + { did: "did:plc:qxichs7jsycphrsmbujwqbfb", handle: "isabelroses.com" }, 51 51 + { did: "did:plc:fnvdhaoe7b5abgrtvzf4ttl5", handle: "isuggest.selfce.st" }, 52 52 + { did: "did:plc:p5yjdr64h7mk5l3kh6oszryk", handle: "blooym.dev" }, 53 53 + { did: "did:plc:hvakvedv6byxhufjl23mfmsd", handle: "number-one-warned.rat.mom" }, 54 54 + { did: "did:plc:6if5m2yo6kroprmmency3gt5", handle: "olaren.dev" }, 55 55 + { did: "did:plc:w7adfxpixpi77e424cjjxnxy", handle: "anyaustin.bsky.social" }, 56 56 + { did: "did:plc:h6as5sk7tfqvvnqvfrlnnwqn", handle: "cwonus.org" }, 57 57 + { did: "did:plc:mo7bk6gblylupvhetkqmndrv", handle: "claire.on-her.computer" }, 58 58 + { did: "did:plc:73gqgbnvpx5syidcponjrics", handle: "coil-habdle.ebil.club" }, 59 59 + ]; 13 60 61 61 + const profiles = [...allExampleProfiles].sort(() => Math.random() - 0.5).slice(0, 3); 14 62 15 15 - . 16 16 - </span> 63 63 + return ( 64 64 + <div class="flex w-full flex-col gap-5 px-2 wrap-break-word"> 65 65 + {/* Welcome Section */} 66 66 + <div class="flex flex-col gap-4"> 67 67 + <div class="flex flex-col gap-1"> 68 68 + <h1 class="text-lg font-medium">Atmosphere Explorer</h1> 69 69 + <div class="text-sm text-neutral-600 dark:text-neutral-300"> 70 70 + <p> 71 71 + Browse the public data on the{" "} 72 72 + <a 73 73 + href="https://atproto.com" 74 74 + target="_blank" 75 75 + class="underline decoration-neutral-400 transition-colors hover:text-blue-500 hover:decoration-blue-500 dark:decoration-neutral-500 dark:hover:text-blue-400" 76 76 + > 77 77 + AT Protocol 78 78 + </a> 79 79 + </p> 80 80 + </div> 17 81 </div> 18 18 - <div class="flex items-center gap-1"> 19 19 - <div class="iconify lucide--user-round" /> 20 20 - <span>Login to manage records in your repository.</span> 82 82 + 83 83 + {/* Example Repos */} 84 84 + <section class="mb-1 flex flex-col gap-3"> 85 85 + <div class="flex justify-between"> 86 86 + <For each={profiles}> 87 87 + {(profile) => ( 88 88 + <A 89 89 + href={`/at://${profile.did}`} 90 90 + class="group flex min-w-0 basis-1/3 flex-col items-center gap-1.5 transition-transform hover:scale-105 active:scale-105" 91 91 + > 92 92 + <img 93 93 + src={`/avatar/${profile.handle}.jpg`} 94 94 + alt={`Bluesky profile picture of ${profile.handle}`} 95 95 + class="size-16 rounded-full ring-2 ring-transparent transition-all group-hover:ring-blue-500 active:ring-blue-500 dark:group-hover:ring-blue-400 dark:active:ring-blue-400" 96 96 + classList={{ 97 97 + "animate-[spin_5s_linear_infinite] [animation-play-state:paused] group-hover:[animation-play-state:running]": 98 98 + profile.handle === "coil-habdle.ebil.club", 99 99 + }} 100 100 + /> 101 101 + <span class="w-full truncate text-center text-xs text-neutral-600 dark:text-neutral-300"> 102 102 + @{profile.handle} 103 103 + </span> 104 104 + </A> 105 105 + )} 106 106 + </For> 107 107 + </div> 108 108 + </section> 109 109 + <div class="flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400"> 110 110 + <SearchButton /> 111 111 + <span>to find any account</span> 21 112 </div> 22 22 - <div class="flex items-center gap-1"> 23 23 - <div class="iconify lucide--radio-tower" /> 24 24 - <span>Jetstream and firehose streaming.</span> 113 113 + <div class="flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400"> 114 114 + <Button onClick={() => setOpenManager(true)}> 115 115 + <span class="iconify lucide--user-round"></span> 116 116 + Sign in 117 117 + </Button> 118 118 + <span>to manage records</span> 25 119 </div> 26 26 - <div class="flex items-center gap-1"> 27 27 - <div class="iconify lucide--link" /> 28 28 - <span> 29 29 - 30 30 - 31 31 - 32 32 - 33 33 - 34 34 - 120 120 + </div> 35 121 122 122 + <div class="flex flex-col gap-4 text-sm"> 123 123 + <div class="flex flex-col gap-2"> 124 124 + <A 125 125 + href="/jetstream" 126 126 + class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 text-neutral-700 transition-colors hover:text-blue-500 dark:text-neutral-300 dark:hover:text-blue-400" 127 127 + > 128 128 + <div class="iconify lucide--radio-tower" /> 129 129 + <span class="underline decoration-transparent group-hover:decoration-current"> 130 130 + Jetstream 131 131 + </span> 132 132 + <div /> 133 133 + <span class="text-xs text-neutral-500 dark:text-neutral-400"> 134 134 + Event stream with filtering 135 135 + </span> 136 136 + </A> 137 137 + <A 138 138 + href="/firehose" 139 139 + class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 text-neutral-700 transition-colors hover:text-blue-500 dark:text-neutral-300 dark:hover:text-blue-400" 140 140 + > 141 141 + <div class="iconify lucide--rss" /> 142 142 + <span class="underline decoration-transparent group-hover:decoration-current"> 143 143 + Firehose 144 144 + </span> 145 145 + <div /> 146 146 + <span class="text-xs text-neutral-500 dark:text-neutral-400"> 147 147 + Raw relay event stream 148 148 + </span> 149 149 + </A> 150 150 + <A 151 151 + href="/spacedust" 152 152 + class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 text-neutral-700 transition-colors hover:text-blue-500 dark:text-neutral-300 dark:hover:text-blue-400" 153 153 + > 154 154 + <div class="iconify lucide--orbit" /> 155 155 + <span class="underline decoration-transparent group-hover:decoration-current"> 156 156 + Spacedust 157 157 + </span> 158 158 + <div /> 159 159 + <span class="text-xs text-neutral-500 dark:text-neutral-400"> 160 160 + Interaction links stream 161 161 + </span> 162 162 + </A> 163 163 + </div> 36 164 37 37 - . 38 38 - </span> 165 165 + <div class="flex flex-col gap-2"> 166 166 + <A 167 167 + href="/labels" 168 168 + class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 text-neutral-700 transition-colors hover:text-blue-500 dark:text-neutral-300 dark:hover:text-blue-400" 169 169 + > 170 170 + <div class="iconify lucide--tag" /> 171 171 + <span class="underline decoration-transparent group-hover:decoration-current"> 172 172 + Labels 173 173 + </span> 174 174 + <div /> 175 175 + <span class="text-xs text-neutral-500 dark:text-neutral-400"> 176 176 + Query labeler services 177 177 + </span> 178 178 + </A> 179 179 + <A 180 180 + href="/car" 181 181 + class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 text-neutral-700 transition-colors hover:text-blue-500 dark:text-neutral-300 dark:hover:text-blue-400" 182 182 + > 183 183 + <div class="iconify lucide--folder-archive" /> 184 184 + <span class="underline decoration-transparent group-hover:decoration-current"> 185 185 + Archive 186 186 + </span> 187 187 + <div /> 188 188 + <span class="text-xs text-neutral-500 dark:text-neutral-400"> 189 189 + Explore and unpack CAR files 190 190 + </span> 191 191 + </A> 39 192 </div> 40 40 - <div class="flex items-center gap-1"> 41 41 - <div class="iconify lucide--tag" /> 42 42 - <span>Query labels from moderation services.</span> 193 193 + </div> 194 194 + 195 195 + <div class="flex justify-center gap-1.5 text-sm text-neutral-600 sm:gap-2 dark:text-neutral-300"> 196 196 + <FooterLink 197 197 + href="https://juli.ee" 198 198 + color="after:text-rose-400" 199 199 + darkColor="dark:after:text-rose-300" 200 200 + > 201 201 + <span class="iconify lucide--terminal text-rose-400 dark:text-rose-300"></span> 202 202 + <span class="font-pecita">juliet</span> 203 203 + </FooterLink> 204 204 + {/* • */} 205 205 + {/* <FooterLink href="https://raycast.com/" color="after:text-[#FF6363]"> */} 206 206 + {/* <span class="iconify-color i-raycast-light block dark:hidden"></span> */} 207 207 + {/* <span class="iconify-color i-raycast-dark hidden dark:block"></span> */} 208 208 + {/* Raycast */} 209 209 + {/* </FooterLink> */}• 210 210 + <FooterLink 211 211 + href="https://bsky.app/profile/did:plc:6q5daed5gutiyerimlrnojnz" 212 212 + color="after:text-[#0085ff]" 213 213 + > 214 214 + <span class="simple-icons--bluesky iconify text-[#0085ff]"></span> 215 215 + Bluesky 216 216 + </FooterLink> 217 217 + • 218 218 + <FooterLink 219 219 + href="https://tangled.org/did:plc:6q5daed5gutiyerimlrnojnz/pdsls/" 220 220 + color="after:text-black" 221 221 + darkColor="dark:after:text-white" 222 222 + > 223 223 + <span class="iconify i-tangled text-black dark:text-white"></span> 224 224 + Source 225 225 + </FooterLink> 226 226 + </div> 227 227 + </div> 228 228 + );

+2 -2

src/components/sticky.tsx

··· 29 29 /> 30 30 31 31 <div 32 32 - class="sticky top-2 z-10 flex w-full flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors" 32 32 + class="sticky top-2 z-10 flex w-full flex-col items-center justify-center gap-2 rounded-lg border-[0.5px] p-3 transition-colors" 33 33 classList={{ 34 34 - "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md": 34 34 + "bg-neutral-50 dark:bg-dark-300 border-neutral-300 dark:border-neutral-700 shadow-md": 35 35 filterStuck(), 36 36 "bg-transparent border-transparent shadow-none": !filterStuck(), 37 37 }}

+105 -51

src/components/navbar.tsx

··· 1 1 + import * as TID from "@atcute/tid"; 2 2 + import { A, Params } from "@solidjs/router"; 3 3 + import { createEffect, createMemo, createSignal, Show } from "solid-js"; 4 4 + import { isTouchDevice } from "../layout"; 5 5 + import { didDocCache } from "../utils/api"; 6 6 + import { addToClipboard } from "../utils/copy"; 7 7 + import { localDateFromTimestamp } from "../utils/date"; 8 8 + import Tooltip from "./tooltip"; 1 9 2 2 - 3 3 - 4 4 - 5 5 - 6 6 - 7 7 - 8 8 - 10 10 + export const [pds, setPDS] = createSignal<string>(); 9 11 10 12 11 13 ··· 18 20 e.stopPropagation(); 19 21 addToClipboard(props.content); 20 22 }} 21 21 - class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`} 23 23 + class={`-mr-2 hidden items-center rounded px-2 py-1 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 sm:py-1.5 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`} 22 24 aria-label="Copy to clipboard" 23 25 > 24 24 - <span class="iconify lucide--link"></span> 25 25 - 26 26 - 27 27 - 26 26 + <span class="iconify lucide--copy"></span> 27 27 + </button> 28 28 + </Tooltip> 29 29 + </Show> 28 30 29 31 30 32 31 33 export const NavBar = (props: { params: Params }) => { 32 34 const [handle, setHandle] = createSignal(props.params.repo); 33 33 - const [showHandle, setShowHandle] = createSignal(localStorage.showHandle === "true"); 34 35 35 36 createEffect(() => { 36 37 if (pds() !== undefined && props.params.repo) { ··· 39 40 40 41 41 42 43 43 + } 44 44 + }); 42 45 46 46 + const rkeyTimestamp = createMemo(() => { 47 47 + if (!props.params.rkey || !TID.validate(props.params.rkey)) return undefined; 48 48 + const timestamp = TID.parse(props.params.rkey).timestamp / 1000; 49 49 + return timestamp <= Date.now() ? timestamp : undefined; 50 50 + }); 43 51 52 52 + return ( 53 53 + <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base"> 54 54 + {/* PDS Level */} 44 55 45 56 46 57 58 58 + <span 59 59 + classList={{ 60 60 + "iconify shrink-0 transition-colors duration-200": true, 61 61 + "lucide--alert-triangle text-red-500 dark:text-red-400": 62 62 + pds() === "Missing PDS" && props.params.repo?.startsWith("did:"), 63 63 + "lucide--hard-drive text-neutral-500 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200": 64 64 + pds() !== "Missing PDS" || !props.params.repo?.startsWith("did:"), 65 65 + }} 66 66 + ></span> 67 67 + </Tooltip> 68 68 + <Show when={pds() && (pds() !== "Missing PDS" || props.params.repo?.startsWith("did:"))}> 69 69 + <Show 70 70 + when={pds() === "Missing PDS"} 71 71 + fallback={ 47 72 48 73 49 74 50 75 76 76 + <A 77 77 + end 78 78 + href={pds()!} 79 79 + inactiveClass="text-blue-500 py-0.5 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300" 80 80 + > 81 81 + {pds()} 82 82 + </A> 51 83 52 84 53 85 ··· 61 93 62 94 63 95 96 96 + <Show when={props.params.repo}> 97 97 + {/* Repository Level */} 98 98 + <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 99 99 + <div class="flex min-w-0 basis-full items-center gap-2"> 100 100 + <Tooltip text="Repository"> 101 101 + <span class="iconify lucide--book-user shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 102 102 + </Tooltip> 103 103 + <Show 104 104 + when={props.params.collection} 105 105 + fallback={ 106 106 + <span class="flex min-w-0 gap-1 py-0.5 font-medium"> 107 107 + <Show 108 108 + when={handle() !== props.params.repo} 109 109 + fallback={<span class="truncate">{props.params.repo}</span>} 110 110 + > 111 111 + <span class="shrink-0">{handle()}</span> 112 112 + <span class="truncate text-neutral-500 dark:text-neutral-400"> 113 113 + ({props.params.repo}) 114 114 + </span> 115 115 + </Show> 116 116 + </span> 117 117 + } 118 118 + > 119 119 + <A 120 120 + end 121 121 + href={`/at://${props.params.repo}`} 122 122 + inactiveClass="flex grow min-w-0 gap-1 py-0.5 font-medium text-blue-500 hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300" 123 123 + > 124 124 + <Show 125 125 + when={handle() !== props.params.repo} 126 126 + fallback={<span class="truncate">{props.params.repo}</span>} 127 127 + > 128 128 + <span class="shrink-0">{handle()}</span> 129 129 + <span class="truncate">({props.params.repo})</span> 130 130 + </Show> 131 131 + </A> 132 132 + </Show> 133 133 + </div> 134 134 + <CopyButton content={props.params.repo!} label="Copy DID" /> 135 135 + </div> 136 136 + </Show> 64 137 65 138 66 139 ··· 73 146 74 147 75 148 149 149 + <A 150 150 + end 151 151 + href={`/at://${props.params.repo}/${props.params.collection}`} 152 152 + inactiveClass="text-blue-500 dark:text-blue-400 grow py-0.5 font-medium hover:text-blue-600 transition-colors duration-150 dark:hover:text-blue-300" 153 153 + > 154 154 + {props.params.collection} 155 155 + </A> 76 156 77 157 78 158 ··· 86 166 87 167 88 168 89 89 - 90 90 - 91 91 - 92 92 - 93 93 - 94 94 - 95 95 - 96 96 - <A 97 97 - end 98 98 - href={`/at://${props.params.repo}`} 99 99 - inactiveClass="text-blue-400 w-full py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 100 100 - > 101 101 - {showHandle() ? handle() : props.params.repo} 102 102 - </A> 103 103 - : <span class="py-0.5 font-medium"> 104 104 - {showHandle() ? handle() : props.params.repo} 105 105 - </span> 106 106 - } 107 107 - </div> 108 108 - <div class="flex"> 109 109 - <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 110 110 - <button 111 111 - type="button" 112 112 - class={`items-center rounded px-1.25 py-1.25 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 sm:px-2 sm:py-1.5 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70 ${isTouchDevice ? "flex" : "hidden group-hover:flex"}`} 113 113 - onclick={() => { 114 114 - localStorage.showHandle = !showHandle(); 115 115 - setShowHandle(!showHandle()); 116 116 - }} 117 117 - aria-label="Switch DID/Handle" 118 118 - > 119 119 - <span 120 120 - class={`iconify shrink-0 duration-200 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 121 121 - ></span> 122 122 - </button> 169 169 + <Tooltip text="Record"> 170 170 + <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 123 171 </Tooltip> 124 124 - <CopyButton content={props.params.repo!} label="Copy DID" /> 172 172 + <div class="flex min-w-0 gap-1 py-0.5 font-medium"> 173 173 + <span class="shrink-0">{props.params.rkey}</span> 174 174 + <Show when={rkeyTimestamp()}> 175 175 + <span class="truncate text-neutral-500 dark:text-neutral-400"> 176 176 + ({localDateFromTimestamp(rkeyTimestamp()!)}) 177 177 + </span> 178 178 + </Show> 179 179 + </div> 125 180 </div> 126 126 - </div> 127 127 - </Show> 128 128 - 181 181 + <CopyButton 182 182 + content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}

+142 -173

src/components/backlinks.tsx

··· 1 1 import * as TID from "@atcute/tid"; 2 2 import { createResource, createSignal, For, onMount, Show } from "solid-js"; 3 3 - import { 4 4 - getAllBacklinks, 5 5 - getDidBacklinks, 6 6 - getRecordBacklinks, 7 7 - LinksWithDids, 8 8 - LinksWithRecords, 9 9 - } from "../utils/api.js"; 3 3 + import { getAllBacklinks, getRecordBacklinks, LinksWithRecords } from "../utils/api.js"; 10 4 import { localDateFromTimestamp } from "../utils/date.js"; 11 5 import { Button } from "./button.jsx"; 6 6 + import { Favicon } from "./favicon.jsx"; 7 7 + import DidHoverCard from "./hover-card/did.jsx"; 8 8 + import RecordHoverCard from "./hover-card/record.jsx"; 12 9 13 13 - type Backlink = { 10 10 + type BacklinksProps = { 11 11 + target: string; 12 12 + collection: string; 13 13 + path: string; 14 14 + }; 15 15 + 16 16 + type BacklinkEntry = { 17 17 + collection: string; 14 18 path: string; 15 19 counts: { distinct_dids: number; records: number }; 16 20 }; 17 21 18 18 - const linksBySource = (links: Record<string, any>) => { 19 19 - let out: Record<string, Backlink[]> = {}; 22 22 + const flattenLinks = (links: Record<string, any>): BacklinkEntry[] => { 23 23 + const entries: BacklinkEntry[] = []; 20 24 Object.keys(links) 21 25 .toSorted() 22 26 .forEach((collection) => { ··· 24 28 Object.keys(paths) 25 29 .toSorted() 26 30 .forEach((path) => { 27 27 - if (paths[path].records === 0) return; 28 28 - if (out[collection]) out[collection].push({ path, counts: paths[path] }); 29 29 - else out[collection] = [{ path, counts: paths[path] }]; 31 31 + if (paths[path].records > 0) { 32 32 + entries.push({ collection, path, counts: paths[path] }); 33 33 + } 30 34 }); 31 35 }); 32 32 - return out; 36 36 + return entries; 33 37 }; 34 38 35 35 - const Backlinks = (props: { target: string }) => { 36 36 - const fetchBacklinks = async () => { 37 37 - const res = await getAllBacklinks(props.target); 38 38 - return linksBySource(res.links); 39 39 - }; 40 40 - 41 41 - const [response] = createResource(fetchBacklinks); 39 39 + const BacklinkRecords = (props: BacklinksProps & { cursor?: string }) => { 40 40 + const [links, setLinks] = createSignal<LinksWithRecords>(); 41 41 + const [more, setMore] = createSignal(false); 42 42 43 43 - const [show, setShow] = createSignal<{ 44 44 - collection: string; 45 45 - path: string; 46 46 - showDids: boolean; 47 47 - } | null>(); 43 43 + onMount(async () => { 44 44 + const res = await getRecordBacklinks(props.target, props.collection, props.path, props.cursor); 45 45 + setLinks(res); 46 46 + }); 48 47 49 48 return ( 50 50 - <div class="flex w-full flex-col gap-1 text-sm wrap-anywhere"> 51 51 - <Show 52 52 - when={response() && Object.keys(response()!).length} 53 53 - fallback={<p>No backlinks found.</p>} 54 54 - > 55 55 - <For each={Object.keys(response()!)}> 56 56 - {(collection) => ( 57 57 - <div> 58 58 - <div class="flex items-center gap-1"> 59 59 - <span class="iconify lucide--book-text shrink-0"></span> 60 60 - {collection} 61 61 - </div> 62 62 - <For each={response()![collection]}> 63 63 - {({ path, counts }) => ( 64 64 - <div class="ml-4.5"> 65 65 - <div class="flex items-center gap-1"> 66 66 - <span class="iconify lucide--route shrink-0"></span> 67 67 - {path.slice(1)} 68 68 - </div> 69 69 - <div class="ml-4.5"> 70 70 - <p> 71 71 - <button 72 72 - class="text-blue-400 hover:underline active:underline" 73 73 - onclick={() => 74 74 - ( 75 75 - show()?.collection === collection && 76 76 - show()?.path === path && 77 77 - !show()?.showDids 78 78 - ) ? 79 79 - setShow(null) 80 80 - : setShow({ collection, path, showDids: false }) 81 81 - } 82 82 - > 83 83 - {counts.records} record{counts.records < 2 ? "" : "s"} 84 84 - </button> 85 85 - {" from "} 86 86 - <button 87 87 - class="text-blue-400 hover:underline active:underline" 88 88 - onclick={() => 89 89 - ( 90 90 - show()?.collection === collection && 91 91 - show()?.path === path && 92 92 - show()?.showDids 93 93 - ) ? 94 94 - setShow(null) 95 95 - : setShow({ collection, path, showDids: true }) 96 96 - } 97 97 - > 98 98 - {counts.distinct_dids} DID 99 99 - {counts.distinct_dids < 2 ? "" : "s"} 100 100 - </button> 101 101 - </p> 102 102 - <Show when={show()?.collection === collection && show()?.path === path}> 103 103 - <Show when={show()?.showDids}> 104 104 - <p class="w-full font-semibold">Distinct identities</p> 105 105 - <BacklinkItems 106 106 - target={props.target} 107 107 - collection={collection} 108 108 - path={path} 109 109 - dids={true} 110 110 - /> 111 111 - </Show> 112 112 - <Show when={!show()?.showDids}> 113 113 - <p class="w-full font-semibold">Records</p> 114 114 - <BacklinkItems 115 115 - target={props.target} 116 116 - collection={collection} 117 117 - path={path} 118 118 - dids={false} 119 119 - /> 120 120 - </Show> 121 121 - </Show> 122 122 - </div> 123 123 - </div> 124 124 - )} 125 125 - </For> 49 49 + <Show when={links()} fallback={<p class="px-3 py-2 text-center text-neutral-500">Loading…</p>}> 50 50 + <For each={links()!.linking_records}> 51 51 + {({ did, collection, rkey }) => { 52 52 + const timestamp = 53 53 + TID.validate(rkey) ? localDateFromTimestamp(TID.parse(rkey).timestamp / 1000) : null; 54 54 + const uri = `at://${did}/${collection}/${rkey}`; 55 55 + return ( 56 56 + <RecordHoverCard 57 57 + uri={uri} 58 58 + class="block" 59 59 + trigger={ 60 60 + <a 61 61 + href={`/${uri}`} 62 62 + class="grid grid-cols-[auto_1fr_auto] items-center gap-x-1 px-2 py-1.5 font-mono text-xs select-none hover:bg-neutral-200/50 sm:gap-x-3 sm:px-3 dark:hover:bg-neutral-700/50" 63 63 + > 64 64 + <span class="text-blue-500 dark:text-blue-400">{rkey}</span> 65 65 + <DidHoverCard 66 66 + did={did} 67 67 + class="min-w-0" 68 68 + trigger={ 69 69 + <a 70 70 + href={`/at://${did}`} 71 71 + class="block truncate text-neutral-700 hover:underline dark:text-neutral-300" 72 72 + onClick={(e) => e.stopPropagation()} 73 73 + > 74 74 + {did} 75 75 + </a> 76 76 + } 77 77 + /> 78 78 + <span class="text-neutral-500 tabular-nums dark:text-neutral-400"> 79 79 + {timestamp ?? ""} 80 80 + </span> 81 81 + </a> 82 82 + } 83 83 + /> 84 84 + ); 85 85 + }} 86 86 + </For> 87 87 + <Show when={links()?.cursor}> 88 88 + <Show 89 89 + when={more()} 90 90 + fallback={ 91 91 + <div class="p-2"> 92 92 + <Button 93 93 + onClick={() => setMore(true)} 94 94 + class="dark:hover:bg-dark-200 dark:active:bg-dark-100 w-full rounded-md border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 95 95 + > 96 96 + Load more 97 97 + </Button> 126 98 </div> 127 127 - )} 128 128 - </For> 99 99 + } 100 100 + > 101 101 + <BacklinkRecords 102 102 + target={props.target} 103 103 + collection={props.collection} 104 104 + path={props.path} 105 105 + cursor={links()!.cursor} 106 106 + /> 107 107 + </Show> 129 108 </Show> 130 130 - </div> 109 109 + </Show> 131 110 ); 132 111 }; 133 112 134 134 - // switching on !!did everywhere is pretty annoying, this could probably be two components 135 135 - // but i don't want to duplicate or think about how to extract the paging logic 136 136 - const BacklinkItems = ({ 137 137 - target, 138 138 - collection, 139 139 - path, 140 140 - dids, 141 141 - cursor, 142 142 - }: { 143 143 - target: string; 144 144 - collection: string; 145 145 - path: string; 146 146 - dids: boolean; 147 147 - cursor?: string; 148 148 - }) => { 149 149 - const [links, setLinks] = createSignal<LinksWithDids | LinksWithRecords>(); 150 150 - const [more, setMore] = createSignal<boolean>(false); 151 151 - 152 152 - onMount(async () => { 153 153 - const links = await (dids ? getDidBacklinks : getRecordBacklinks)( 154 154 - target, 155 155 - collection, 156 156 - path, 157 157 - cursor, 158 158 - ); 159 159 - setLinks(links); 113 113 + const Backlinks = (props: { target: string }) => { 114 114 + const [response] = createResource(async () => { 115 115 + const res = await getAllBacklinks(props.target); 116 116 + return flattenLinks(res.links); 160 117 }); 161 118 162 162 - // TODO: could pass the `total` into this component, which can be checked against each call to this endpoint to find if it's stale. 163 163 - // also hmm 'total' is misleading/wrong on that api 164 164 - 165 119 return ( 166 166 - <Show when={links()} fallback={<p>Loading&hellip;</p>}> 167 167 - <Show when={dids}> 168 168 - <For each={(links() as LinksWithDids).linking_dids}> 169 169 - {(did) => ( 170 170 - <a 171 171 - href={`/at://${did}`} 172 172 - class="relative flex w-full font-mono text-blue-400 hover:underline active:underline" 173 173 - > 174 174 - {did} 175 175 - </a> 176 176 - )} 177 177 - </For> 178 178 - </Show> 179 179 - <Show when={!dids}> 180 180 - <For each={(links() as LinksWithRecords).linking_records}> 181 181 - {({ did, collection, rkey }) => ( 182 182 - <p class="relative flex w-full items-center gap-1 font-mono"> 183 183 - <a 184 184 - href={`/at://${did}/${collection}/${rkey}`} 185 185 - class="text-blue-400 hover:underline active:underline" 186 186 - > 187 187 - {rkey} 188 188 - </a> 189 189 - <span class="text-xs text-neutral-500 dark:text-neutral-400"> 190 190 - {TID.validate(rkey) ? 191 191 - localDateFromTimestamp(TID.parse(rkey).timestamp / 1000) 192 192 - : undefined} 193 193 - </span> 194 194 - </p> 120 120 + <div class="flex w-full flex-col gap-3 text-sm"> 121 121 + <Show when={response()} fallback={<p class="text-neutral-500">Loading…</p>}> 122 122 + <Show when={response()!.length === 0}> 123 123 + <p class="text-neutral-500">No backlinks found.</p> 124 124 + </Show> 125 125 + <For each={response()}> 126 126 + {(entry) => ( 127 127 + <BacklinkSection 128 128 + target={props.target} 129 129 + collection={entry.collection} 130 130 + path={entry.path} 131 131 + counts={entry.counts} 132 132 + /> 195 133 )} 196 134 </For> 197 135 </Show> 198 198 - <Show when={links()?.cursor}> 199 199 - <Show when={more()} fallback={<Button onClick={() => setMore(true)}>Load More</Button>}> 200 200 - <BacklinkItems 201 201 - target={target} 202 202 - collection={collection} 203 203 - path={path} 204 204 - dids={dids} 205 205 - cursor={links()!.cursor} 136 136 + </div> 137 137 + ); 138 138 + }; 139 139 + 140 140 + const BacklinkSection = ( 141 141 + props: BacklinksProps & { counts: { distinct_dids: number; records: number } }, 142 142 + ) => { 143 143 + const [expanded, setExpanded] = createSignal(false); 144 144 + 145 145 + const authority = () => props.collection.split(".").slice(0, 2).join("."); 146 146 + 147 147 + return ( 148 148 + <div class="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700"> 149 149 + <button 150 150 + class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50" 151 151 + onClick={() => setExpanded(!expanded())} 152 152 + > 153 153 + <div class="flex min-w-0 flex-1 items-center gap-2"> 154 154 + <Favicon authority={authority()} /> 155 155 + <div class="flex min-w-0 flex-1 flex-col"> 156 156 + <span class="w-full truncate">{props.collection}</span> 157 157 + <span class="w-full text-xs wrap-break-word text-neutral-500 dark:text-neutral-400"> 158 158 + {props.path.slice(1)} 159 159 + </span> 160 160 + </div> 161 161 + </div> 162 162 + <div class="flex shrink-0 items-center gap-2 text-neutral-700 dark:text-neutral-300"> 163 163 + <span class="text-xs"> 164 164 + {props.counts.records} from {props.counts.distinct_dids} repo 165 165 + {props.counts.distinct_dids > 1 ? "s" : ""} 166 166 + </span> 167 167 + <span 168 168 + class="iconify lucide--chevron-down transition-transform" 169 169 + classList={{ "rotate-180": expanded() }} 206 170 /> 207 207 - </Show> 171 171 + </div> 172 172 + </button> 173 173 + <Show when={expanded()}> 174 174 + <div class="border-t border-neutral-200 bg-neutral-50/50 dark:border-neutral-700 dark:bg-neutral-800/30"> 175 175 + <BacklinkRecords target={props.target} collection={props.collection} path={props.path} /> 176 176 + </div> 208 177 </Show> 209 209 - </Show> 178 178 + </div> 210 179 ); 211 180 }; 212 181

+27 -7

src/auth/login.tsx

··· 29 29 30 30 31 31 32 32 + }; 32 33 34 34 + return ( 35 35 + <div class="flex flex-col gap-y-3 px-1"> 36 36 + <Show when={!scopeFlow.showScopeSelector()}> 37 37 + <Show when={props.onCancel}> 38 38 + <div class="flex items-center gap-2"> 39 39 + <button 40 40 + onclick={handleCancel} 41 41 + class="flex items-center rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 33 42 34 43 35 44 45 45 + <div class="font-semibold">Add account</div> 46 46 + </div> 47 47 + </Show> 48 48 + <form class="flex flex-col gap-3" onsubmit={(e) => e.preventDefault()}> 49 49 + <label for="username" class="hidden"> 50 50 + Add account 51 51 + </label> 52 52 + <div class="dark:bg-dark-100 flex grow items-center gap-2 rounded-lg bg-white px-2 outline-1 outline-neutral-200 focus-within:outline-[1.5px] focus-within:outline-neutral-600 dark:outline-neutral-600 dark:focus-within:outline-neutral-400"> 53 53 + <label 54 54 + for="username" 55 55 + class="iconify lucide--user-round-plus shrink-0 text-neutral-500 dark:text-neutral-400" 36 56 37 57 38 58 ··· 46 66 47 67 48 68 49 49 - <label for="username" class="hidden"> 50 50 - Add account 51 51 - </label> 52 52 - <div class="dark:bg-dark-100 dark:inset-shadow-dark-200 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 inset-shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400"> 53 53 - <label 54 54 - for="username" 55 55 - class="iconify lucide--user-round-plus shrink-0 text-neutral-500 dark:text-neutral-400" 69 69 + </div> 70 70 + <button 71 71 + onclick={() => initiateLogin(loginInput())} 72 72 + class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700" 73 73 + > 74 74 + Continue 75 75 + </button>

+1 -1

src/components/text-input.tsx

··· 25 25 disabled={props.disabled} 26 26 required={props.required} 27 27 class={ 28 28 - "dark:bg-dark-100 dark:inset-shadow-dark-200 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " + 28 28 + "dark:bg-dark-100 rounded-md bg-white px-2 py-1 outline-1 outline-neutral-200 select-none placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400 " + 29 29 props.class 30 30 } 31 31 onInput={props.onInput}

+8 -7

src/components/dropdown.tsx

··· 69 69 70 70 71 71 72 72 + ); 73 73 + }; 72 74 75 75 + export const ActionMenu = (props: { label: string; icon: string; onClick: () => void }) => { 76 76 + const ctx = useContext(MenuContext); 73 77 74 74 - 75 75 - export const ActionMenu = (props: { 76 76 - label: string; 77 77 - icon: string; 78 78 - onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>; 79 79 - }) => { 80 78 return ( 81 79 <button 82 82 - onClick={props.onClick} 80 80 + onClick={() => { 81 81 + props.onClick(); 82 82 + ctx?.setShowMenu(false); 83 83 + }} 83 84 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 85 > 85 86 <Show when={props.icon}>

+25

src/utils/route-cache.ts

··· 1 1 + import { createStore } from "solid-js/store"; 2 2 + 3 3 + export interface CollectionCacheEntry { 4 4 + records: unknown[]; 5 5 + cursor: string | undefined; 6 6 + scrollY: number; 7 7 + reverse: boolean; 8 8 + limit: number; 9 9 + } 10 10 + 11 11 + type RouteCache = Record<string, CollectionCacheEntry>; 12 12 + 13 13 + const [routeCache, setRouteCache] = createStore<RouteCache>({}); 14 14 + 15 15 + export const getCollectionCache = (key: string): CollectionCacheEntry | undefined => { 16 16 + return routeCache[key]; 17 17 + }; 18 18 + 19 19 + export const setCollectionCache = (key: string, entry: CollectionCacheEntry): void => { 20 20 + setRouteCache(key, entry); 21 21 + }; 22 22 + 23 23 + export const clearCollectionCache = (key: string): void => { 24 24 + setRouteCache(key, undefined!); 25 25 + };

+11 -12

src/components/theme.tsx

··· 8 8 9 9 export const ThemeSelection = () => { 10 10 const [theme, setTheme] = createSignal( 11 11 - localStorage.getItem("theme") === null ? "system" 11 11 + localStorage.getItem("theme") === null ? "auto" 12 12 : localStorage.theme === "dark" ? "dark" 13 13 : "light", 14 14 ); ··· 18 18 document.documentElement.classList.toggle( 19 19 "dark", 20 20 newTheme === "dark" || 21 21 - (newTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches), 21 21 + (newTheme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches), 22 22 ); 23 23 - if (newTheme === "system") localStorage.removeItem("theme"); 23 23 + if (newTheme === "auto") localStorage.removeItem("theme"); 24 24 else localStorage.theme = newTheme; 25 25 }; 26 26 27 27 - const ThemeOption = (props: { theme: string; icon: string; label: string }) => { 27 27 + const ThemeOption = (props: { theme: string; label: string }) => { 28 28 return ( 29 29 <button 30 30 classList={{ 31 31 - "flex items-center gap-2 rounded-xl border px-3 py-2": true, 31 31 + "flex items-center min-w-21 justify-center rounded-xl border px-3 py-2": true, 32 32 "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700": 33 33 theme() === props.theme, 34 34 "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-200/30 dark:hover:bg-neutral-800": ··· 36 36 }} 37 37 onclick={() => updateTheme(props.theme)} 38 38 > 39 39 - <span class={"iconify " + props.icon}></span> 40 40 - <span>{props.label}</span> 39 39 + {props.label} 41 40 </button> 42 41 ); 43 42 }; 44 43 45 44 return ( 46 46 - <div class="flex flex-col gap-0.5"> 47 47 - <label class="select-none">Theme</label> 45 45 + <div class="flex flex-col gap-1"> 46 46 + <label class="font-medium select-none">Theme</label> 48 47 <div class="flex gap-2"> 49 49 - <ThemeOption theme="system" icon="lucide--monitor" label="System" /> 50 50 - <ThemeOption theme="light" icon="lucide--sun" label="Light" /> 51 51 - <ThemeOption theme="dark" icon="lucide--moon" label="Dark" /> 48 48 + <ThemeOption theme="auto" label="Auto" /> 49 49 + <ThemeOption theme="light" label="Light" /> 50 50 + <ThemeOption theme="dark" label="Dark" /> 52 51 </div> 53 52 </div> 54 53 );

public/ribbon.webp

This is a binary file and will not be displayed.

+123 -119

src/views/stream.tsx

··· 1 1 import { Firehose } from "@skyware/firehose"; 2 2 + import { Title } from "@solidjs/meta"; 2 3 import { A, useLocation, useSearchParams } from "@solidjs/router"; 3 4 import { createSignal, For, onCleanup, onMount, Show } from "solid-js"; 4 5 import { Button } from "../components/button"; ··· 169 170 }); 170 171 171 172 return ( 172 172 - <div class="flex w-full flex-col items-center"> 173 173 - <div class="mb-1 flex gap-4 font-medium"> 174 174 - <A 175 175 - class="flex items-center gap-1 border-b-2" 176 176 - inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600" 177 177 - href="/jetstream" 178 178 - > 179 179 - Jetstream 180 180 - </A> 181 181 - <A 182 182 - class="flex items-center gap-1 border-b-2" 183 183 - inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600" 184 184 - href="/firehose" 185 185 - > 186 186 - Firehose 187 187 - </A> 188 188 - </div> 189 189 - <StickyOverlay> 190 190 - <form ref={formRef} class="flex w-full flex-col gap-1.5 text-sm"> 191 191 - <Show when={!connected()}> 192 192 - <label class="flex items-center justify-end gap-x-1"> 193 193 - <span class="min-w-20">Instance</span> 194 194 - <TextInput 195 195 - name="instance" 196 196 - value={ 197 197 - searchParams.instance ?? 198 198 - (streamType === "jetstream" ? 199 199 - "wss://jetstream1.us-east.bsky.network/subscribe" 200 200 - : "wss://bsky.network") 201 201 - } 202 202 - class="grow" 203 203 - /> 204 204 - </label> 205 205 - <Show when={streamType === "jetstream"}> 173 173 + <> 174 174 + <Title>{streamType === "firehose" ? "Firehose" : "Jetstream"} - PDSls</Title> 175 175 + <div class="flex w-full flex-col items-center"> 176 176 + <div class="mb-1 flex gap-4 font-medium"> 177 177 + <A 178 178 + class="flex items-center gap-1 border-b-2" 179 179 + inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600" 180 180 + href="/jetstream" 181 181 + > 182 182 + Jetstream 183 183 + </A> 184 184 + <A 185 185 + class="flex items-center gap-1 border-b-2" 186 186 + inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600" 187 187 + href="/firehose" 188 188 + > 189 189 + Firehose 190 190 + </A> 191 191 + </div> 192 192 + <StickyOverlay> 193 193 + <form ref={formRef} class="flex w-full flex-col gap-1.5 text-sm"> 194 194 + <Show when={!connected()}> 206 195 <label class="flex items-center justify-end gap-x-1"> 207 207 - <span class="min-w-20">Collections</span> 208 208 - <textarea 209 209 - name="collections" 210 210 - spellcheck={false} 211 211 - placeholder="Comma-separated list of collections" 212 212 - value={searchParams.collections ?? ""} 213 213 - class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400" 196 196 + <span class="min-w-20">Instance</span> 197 197 + <TextInput 198 198 + name="instance" 199 199 + value={ 200 200 + searchParams.instance ?? 201 201 + (streamType === "jetstream" ? 202 202 + "wss://jetstream1.us-east.bsky.network/subscribe" 203 203 + : "wss://bsky.network") 204 204 + } 205 205 + class="grow" 214 206 /> 215 207 </label> 216 216 - </Show> 217 217 - <Show when={streamType === "jetstream"}> 208 208 + <Show when={streamType === "jetstream"}> 209 209 + <label class="flex items-center justify-end gap-x-1"> 210 210 + <span class="min-w-20">Collections</span> 211 211 + <textarea 212 212 + name="collections" 213 213 + spellcheck={false} 214 214 + placeholder="Comma-separated list of collections" 215 215 + value={searchParams.collections ?? ""} 216 216 + class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400" 217 217 + /> 218 218 + </label> 219 219 + </Show> 220 220 + <Show when={streamType === "jetstream"}> 221 221 + <label class="flex items-center justify-end gap-x-1"> 222 222 + <span class="min-w-20">DIDs</span> 223 223 + <textarea 224 224 + name="dids" 225 225 + spellcheck={false} 226 226 + placeholder="Comma-separated list of DIDs" 227 227 + value={searchParams.dids ?? ""} 228 228 + class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400" 229 229 + /> 230 230 + </label> 231 231 + </Show> 218 232 <label class="flex items-center justify-end gap-x-1"> 219 219 - <span class="min-w-20">DIDs</span> 220 220 - <textarea 221 221 - name="dids" 222 222 - spellcheck={false} 223 223 - placeholder="Comma-separated list of DIDs" 224 224 - value={searchParams.dids ?? ""} 225 225 - class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400" 233 233 + <span class="min-w-20">Cursor</span> 234 234 + <TextInput 235 235 + name="cursor" 236 236 + placeholder="Leave empty for live-tail" 237 237 + value={searchParams.cursor ?? ""} 238 238 + class="grow" 226 239 /> 227 240 </label> 241 241 + <Show when={streamType === "jetstream"}> 242 242 + <div class="flex items-center justify-end gap-x-1"> 243 243 + <input 244 244 + type="checkbox" 245 245 + name="allEvents" 246 246 + id="allEvents" 247 247 + checked={searchParams.allEvents === "on" ? true : false} 248 248 + /> 249 249 + <label for="allEvents" class="select-none"> 250 250 + Show account and identity events 251 251 + </label> 252 252 + </div> 253 253 + </Show> 228 254 </Show> 229 229 - <label class="flex items-center justify-end gap-x-1"> 230 230 - <span class="min-w-20">Cursor</span> 231 231 - <TextInput 232 232 - name="cursor" 233 233 - placeholder="Leave empty for live-tail" 234 234 - value={searchParams.cursor ?? ""} 235 235 - class="grow" 236 236 - /> 237 237 - </label> 238 238 - <Show when={streamType === "jetstream"}> 239 239 - <div class="flex items-center justify-end gap-x-1"> 240 240 - <input 241 241 - type="checkbox" 242 242 - name="allEvents" 243 243 - id="allEvents" 244 244 - checked={searchParams.allEvents === "on" ? true : false} 245 245 - /> 246 246 - <label for="allEvents" class="select-none"> 247 247 - Show account and identity events 248 248 - </label> 249 249 - </div> 250 250 - </Show> 251 251 - </Show> 252 252 - <Show when={connected()}> 253 253 - <div class="flex flex-col gap-1 wrap-anywhere"> 254 254 - <For each={parameters()}> 255 255 - {(param) => ( 256 256 - <Show when={param.param}> 257 257 - <div class="flex"> 258 258 - <div class="min-w-24 font-semibold">{param.name}</div> 259 259 - {param.param} 260 260 - </div> 261 261 - </Show> 262 262 - )} 263 263 - </For> 264 264 - </div> 265 265 - </Show> 266 266 - <div class="flex justify-end"> 267 255 <Show when={connected()}> 268 268 - <button 269 269 - type="button" 270 270 - onmousedown={(e) => { 271 271 - e.preventDefault(); 272 272 - disconnect(); 273 273 - }} 274 274 - ontouchstart={(e) => { 275 275 - e.preventDefault(); 276 276 - disconnect(); 277 277 - }} 278 278 - class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 279 279 - > 280 280 - Disconnect 281 281 - </button> 282 282 - </Show> 283 283 - <Show when={!connected()}> 284 284 - <Button onClick={() => connectSocket(new FormData(formRef))}>Connect</Button> 256 256 + <div class="flex flex-col gap-1 wrap-anywhere"> 257 257 + <For each={parameters()}> 258 258 + {(param) => ( 259 259 + <Show when={param.param}> 260 260 + <div class="flex"> 261 261 + <div class="min-w-24 font-semibold">{param.name}</div> 262 262 + {param.param} 263 263 + </div> 264 264 + </Show> 265 265 + )} 266 266 + </For> 267 267 + </div> 285 268 </Show> 286 286 - </div> 287 287 - </form> 288 288 - </StickyOverlay> 289 289 - <Show when={notice().length}> 290 290 - <div class="text-red-500 dark:text-red-400">{notice()}</div> 291 291 - </Show> 292 292 - <div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-sm wrap-anywhere whitespace-pre-wrap md:w-3xl"> 293 293 - <For each={records().toReversed()}> 294 294 - {(rec) => ( 295 295 - <div class="pb-2"> 296 296 - <JSONValue data={rec} repo={rec.did ?? rec.repo} /> 269 269 + <div class="flex justify-end"> 270 270 + <Show when={connected()}> 271 271 + <button 272 272 + type="button" 273 273 + onmousedown={(e) => { 274 274 + e.preventDefault(); 275 275 + disconnect(); 276 276 + }} 277 277 + ontouchstart={(e) => { 278 278 + e.preventDefault(); 279 279 + disconnect(); 280 280 + }} 281 281 + class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 282 282 + > 283 283 + Disconnect 284 284 + </button> 285 285 + </Show> 286 286 + <Show when={!connected()}> 287 287 + <Button onClick={() => connectSocket(new FormData(formRef))}>Connect</Button> 288 288 + </Show> 297 289 </div> 298 298 - )} 299 299 - </For> 290 290 + </form> 291 291 + </StickyOverlay> 292 292 + <Show when={notice().length}> 293 293 + <div class="text-red-500 dark:text-red-400">{notice()}</div> 294 294 + </Show> 295 295 + <div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-sm wrap-anywhere whitespace-pre-wrap md:w-3xl"> 296 296 + <For each={records().toReversed()}> 297 297 + {(rec) => ( 298 298 + <div class="pb-2"> 299 299 + <JSONValue data={rec} repo={rec.did ?? rec.repo} /> 300 300 + </div> 301 301 + )} 302 302 + </For> 303 303 + </div> 300 304 </div> 301 301 - </div> 305 305 + </> 302 306 ); 303 307 }; 304 308

+10 -5

src/components/tooltip.tsx

··· 1 1 2 2 + import { isTouchDevice } from "../layout"; 2 3 3 3 - 4 4 - 5 5 - 6 6 - 4 4 + const Tooltip = (props: { text: string; children: JSX.Element }) => ( 5 5 + <span class="group/tooltip relative inline-flex items-center"> 6 6 + {props.children} 7 7 <Show when={!isTouchDevice}> 8 8 <span 9 9 style={`transform: translate(-50%, 28px)`} 10 10 - class={`dark:shadow-dark-700 pointer-events-none absolute left-[50%] z-20 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-neutral-50 p-1 text-center font-sans text-xs whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`} 10 10 + class={`dark:shadow-dark-700 dark:bg-dark-300 pointer-events-none absolute left-[50%] z-20 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-white p-1 text-center font-sans text-xs font-normal whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:text-neutral-200`} 11 11 > 12 12 {props.text} 13 13 </span> 14 14 + </Show> 15 15 + </span> 16 16 + ); 17 17 + 18 18 + export default Tooltip;

+649

src/views/car.tsx

··· 1 1 + import * as CAR from "@atcute/car"; 2 2 + import * as CBOR from "@atcute/cbor"; 3 3 + import * as CID from "@atcute/cid"; 4 4 + import { fromStream, isCommit } from "@atcute/repo"; 5 5 + import * as TID from "@atcute/tid"; 6 6 + import { Title } from "@solidjs/meta"; 7 7 + import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from "solid-js"; 8 8 + import { Button } from "../components/button.jsx"; 9 9 + import { JSONValue, type JSONType } from "../components/json.jsx"; 10 10 + import { TextInput } from "../components/text-input.jsx"; 11 11 + import { isTouchDevice } from "../layout.jsx"; 12 12 + import { localDateFromTimestamp } from "../utils/date.js"; 13 13 + 14 14 + const isIOS = 15 15 + /iPad|iPhone|iPod/.test(navigator.userAgent) || 16 16 + (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1); 17 17 + 18 18 + // Convert CBOR-decoded objects to JSON-friendly format 19 19 + const toJsonValue = (obj: unknown): JSONType => { 20 20 + if (obj === null || obj === undefined) return null; 21 21 + 22 22 + if (CID.isCidLink(obj)) { 23 23 + return { $link: obj.$link }; 24 24 + } 25 25 + 26 26 + if ( 27 27 + obj && 28 28 + typeof obj === "object" && 29 29 + "version" in obj && 30 30 + "codec" in obj && 31 31 + "digest" in obj && 32 32 + "bytes" in obj 33 33 + ) { 34 34 + try { 35 35 + return { $link: CID.toString(obj as CID.Cid) }; 36 36 + } catch {} 37 37 + } 38 38 + 39 39 + if (CBOR.isBytes(obj)) { 40 40 + return { $bytes: obj.$bytes }; 41 41 + } 42 42 + 43 43 + if (Array.isArray(obj)) { 44 44 + return obj.map(toJsonValue); 45 45 + } 46 46 + 47 47 + if (typeof obj === "object") { 48 48 + const result: Record<string, JSONType> = {}; 49 49 + for (const [key, value] of Object.entries(obj)) { 50 50 + result[key] = toJsonValue(value); 51 51 + } 52 52 + return result; 53 53 + } 54 54 + 55 55 + return obj as JSONType; 56 56 + }; 57 57 + 58 58 + interface Archive { 59 59 + file: File; 60 60 + did: string; 61 61 + entries: CollectionEntry[]; 62 62 + } 63 63 + 64 64 + interface CollectionEntry { 65 65 + name: string; 66 66 + entries: RecordEntry[]; 67 67 + } 68 68 + 69 69 + interface RecordEntry { 70 70 + key: string; 71 71 + cid: string; 72 72 + record: JSONType; 73 73 + } 74 74 + 75 75 + type View = 76 76 + | { type: "repo" } 77 77 + | { type: "collection"; collection: CollectionEntry } 78 78 + | { type: "record"; collection: CollectionEntry; record: RecordEntry }; 79 79 + 80 80 + export const CarView = () => { 81 81 + const [archive, setArchive] = createSignal<Archive | null>(null); 82 82 + const [loading, setLoading] = createSignal(false); 83 83 + const [error, setError] = createSignal<string>(); 84 84 + const [view, setView] = createSignal<View>({ type: "repo" }); 85 85 + 86 86 + const parseCarFile = async (file: File) => { 87 87 + setLoading(true); 88 88 + setError(undefined); 89 89 + 90 90 + try { 91 91 + // Read file as ArrayBuffer to extract DID from commit block 92 92 + const buffer = new Uint8Array(await file.arrayBuffer()); 93 93 + const car = CAR.fromUint8Array(buffer); 94 94 + 95 95 + // Get DID from commit block 96 96 + let did = ""; 97 97 + const rootCid = car.roots[0]?.$link; 98 98 + if (rootCid) { 99 99 + for (const entry of car) { 100 100 + if (CID.toString(entry.cid) === rootCid) { 101 101 + const commit = CBOR.decode(entry.bytes); 102 102 + if (isCommit(commit)) { 103 103 + did = commit.did; 104 104 + } 105 105 + break; 106 106 + } 107 107 + } 108 108 + } 109 109 + 110 110 + const collections = new Map<string, RecordEntry[]>(); 111 111 + const result: Archive = { 112 112 + file, 113 113 + did, 114 114 + entries: [], 115 115 + }; 116 116 + 117 117 + const stream = file.stream(); 118 118 + const repo = fromStream(stream); 119 119 + try { 120 120 + for await (const entry of repo) { 121 121 + let list = collections.get(entry.collection); 122 122 + if (list === undefined) { 123 123 + collections.set(entry.collection, (list = [])); 124 124 + result.entries.push({ 125 125 + name: entry.collection, 126 126 + entries: list, 127 127 + }); 128 128 + } 129 129 + 130 130 + const record = toJsonValue(entry.record); 131 131 + list.push({ 132 132 + key: entry.rkey, 133 133 + cid: entry.cid.$link, 134 134 + record, 135 135 + }); 136 136 + } 137 137 + } finally { 138 138 + await repo.dispose(); 139 139 + } 140 140 + 141 141 + setArchive(result); 142 142 + setView({ type: "repo" }); 143 143 + } catch (err) { 144 144 + console.error("Failed to parse CAR file:", err); 145 145 + setError(err instanceof Error ? err.message : "Failed to parse CAR file"); 146 146 + } finally { 147 147 + setLoading(false); 148 148 + } 149 149 + }; 150 150 + 151 151 + const handleFileChange = (e: Event) => { 152 152 + const input = e.target as HTMLInputElement; 153 153 + const file = input.files?.[0]; 154 154 + if (file) { 155 155 + parseCarFile(file); 156 156 + } 157 157 + }; 158 158 + 159 159 + const handleDrop = (e: DragEvent) => { 160 160 + e.preventDefault(); 161 161 + const file = e.dataTransfer?.files?.[0]; 162 162 + if (file && (file.name.endsWith(".car") || file.type === "application/vnd.ipld.car")) { 163 163 + parseCarFile(file); 164 164 + } 165 165 + }; 166 166 + 167 167 + const handleDragOver = (e: DragEvent) => { 168 168 + e.preventDefault(); 169 169 + }; 170 170 + 171 171 + const reset = () => { 172 172 + setArchive(null); 173 173 + setView({ type: "repo" }); 174 174 + setError(undefined); 175 175 + }; 176 176 + 177 177 + return ( 178 178 + <> 179 179 + <Title>CAR explorer - PDSls</Title> 180 180 + <div class="flex w-full flex-col items-center"> 181 181 + <Show 182 182 + when={archive()} 183 183 + fallback={ 184 184 + <WelcomeView 185 185 + loading={loading()} 186 186 + error={error()} 187 187 + onFileChange={handleFileChange} 188 188 + onDrop={handleDrop} 189 189 + onDragOver={handleDragOver} 190 190 + /> 191 191 + } 192 192 + > 193 193 + {(arch) => <ExploreView archive={arch()} view={view} setView={setView} onClose={reset} />} 194 194 + </Show> 195 195 + </div> 196 196 + </> 197 197 + ); 198 198 + }; 199 199 + 200 200 + const WelcomeView = (props: { 201 201 + loading: boolean; 202 202 + error?: string; 203 203 + onFileChange: (e: Event) => void; 204 204 + onDrop: (e: DragEvent) => void; 205 205 + onDragOver: (e: DragEvent) => void; 206 206 + }) => { 207 207 + return ( 208 208 + <div class="flex w-full max-w-3xl flex-col gap-y-4 px-2"> 209 209 + <div class="flex flex-col gap-y-1"> 210 210 + <h1 class="text-lg font-semibold">CAR explorer</h1> 211 211 + <p class="text-sm text-neutral-600 dark:text-neutral-400"> 212 212 + Upload a CAR (Content Addressable aRchive) file to explore its contents. 213 213 + </p> 214 214 + </div> 215 215 + 216 216 + <div 217 217 + class="dark:bg-dark-300 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-neutral-300 bg-neutral-50 p-8 transition-colors hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500" 218 218 + onDrop={props.onDrop} 219 219 + onDragOver={props.onDragOver} 220 220 + > 221 221 + <Show 222 222 + when={!props.loading} 223 223 + fallback={ 224 224 + <div class="flex flex-col items-center gap-2"> 225 225 + <span class="iconify lucide--loader-circle animate-spin text-3xl text-neutral-400" /> 226 226 + <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400"> 227 227 + Reading CAR file... 228 228 + </span> 229 229 + </div> 230 230 + } 231 231 + > 232 232 + <span class="iconify lucide--folder-archive text-3xl text-neutral-400" /> 233 233 + <div class="text-center"> 234 234 + <p class="text-sm font-medium text-neutral-700 dark:text-neutral-300"> 235 235 + Drag and drop a CAR file here 236 236 + </p> 237 237 + <p class="text-xs text-neutral-500 dark:text-neutral-400">or</p> 238 238 + </div> 239 239 + <label class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-8 items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-3 py-1.5 text-sm shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"> 240 240 + <input 241 241 + type="file" 242 242 + accept={isIOS ? undefined : ".car,application/vnd.ipld.car"} 243 243 + onChange={props.onFileChange} 244 244 + class="hidden" 245 245 + /> 246 246 + <span class="iconify lucide--upload text-sm" /> 247 247 + Choose file 248 248 + </label> 249 249 + </Show> 250 250 + </div> 251 251 + 252 252 + <Show when={props.error}> 253 253 + <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300"> 254 254 + {props.error} 255 255 + </div> 256 256 + </Show> 257 257 + </div> 258 258 + ); 259 259 + }; 260 260 + 261 261 + const ExploreView = (props: { 262 262 + archive: Archive; 263 263 + view: () => View; 264 264 + setView: (view: View) => void; 265 265 + onClose: () => void; 266 266 + }) => { 267 267 + return ( 268 268 + <div class="flex w-full flex-col"> 269 269 + <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base"> 270 270 + {/* DID / Repository Level */} 271 271 + <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 272 272 + <Show 273 273 + when={props.view().type !== "repo"} 274 274 + fallback={ 275 275 + <div class="flex min-h-6 min-w-0 basis-full items-center gap-2 px-2 sm:min-h-7"> 276 276 + <span class="iconify lucide--book-user shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200" /> 277 277 + <span class="truncate py-0.5 font-medium">{props.archive.did || "Repository"}</span> 278 278 + </div> 279 279 + } 280 280 + > 281 281 + <button 282 282 + type="button" 283 283 + onClick={() => props.setView({ type: "repo" })} 284 284 + class="flex min-h-6 min-w-0 basis-full items-center gap-2 px-2 sm:min-h-7" 285 285 + > 286 286 + <span class="iconify lucide--book-user shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200" /> 287 287 + <span class="truncate py-0.5 font-medium text-blue-400 transition-colors duration-150 group-hover:text-blue-500 dark:group-hover:text-blue-300"> 288 288 + {props.archive.did || "Repository"} 289 289 + </span> 290 290 + </button> 291 291 + </Show> 292 292 + <button 293 293 + type="button" 294 294 + onClick={props.onClose} 295 295 + title="Close and upload a different file" 296 296 + class="flex shrink-0 items-center rounded px-2 py-1 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 sm:py-1.5 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70" 297 297 + > 298 298 + <span class="iconify lucide--x" /> 299 299 + </button> 300 300 + </div> 301 301 + 302 302 + {/* Collection Level */} 303 303 + <Show 304 304 + when={(() => { 305 305 + const v = props.view(); 306 306 + return v.type === "collection" || v.type === "record" ? v.collection : null; 307 307 + })()} 308 308 + > 309 309 + {(collection) => ( 310 310 + <Show 311 311 + when={props.view().type === "record"} 312 312 + fallback={ 313 313 + <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 314 314 + <div class="flex min-h-6 min-w-0 basis-full items-center gap-2 sm:min-h-7"> 315 315 + <span class="iconify lucide--folder-open shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200" /> 316 316 + <span class="truncate py-0.5 font-medium">{collection().name}</span> 317 317 + </div> 318 318 + </div> 319 319 + } 320 320 + > 321 321 + <button 322 322 + type="button" 323 323 + onClick={() => props.setView({ type: "collection", collection: collection() })} 324 324 + class="group relative flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40" 325 325 + > 326 326 + <div class="flex min-h-6 min-w-0 basis-full items-center gap-2 sm:min-h-7"> 327 327 + <span class="iconify lucide--folder-open shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200" /> 328 328 + <span class="truncate py-0.5 font-medium text-blue-400 transition-colors duration-150 group-hover:text-blue-500 dark:group-hover:text-blue-300"> 329 329 + {collection().name} 330 330 + </span> 331 331 + </div> 332 332 + </button> 333 333 + </Show> 334 334 + )} 335 335 + </Show> 336 336 + 337 337 + {/* Record Level */} 338 338 + <Show 339 339 + when={(() => { 340 340 + const v = props.view(); 341 341 + return v.type === "record" ? v.record : null; 342 342 + })()} 343 343 + > 344 344 + {(record) => ( 345 345 + <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 346 346 + <div class="flex min-h-6 min-w-0 basis-full items-center gap-2 sm:min-h-7"> 347 347 + <span class="iconify lucide--file-json shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200" /> 348 348 + <span class="truncate py-0.5 font-medium">{record().key}</span> 349 349 + </div> 350 350 + </div> 351 351 + )} 352 352 + </Show> 353 353 + </nav> 354 354 + 355 355 + <div class="px-2 py-2"> 356 356 + <Switch> 357 357 + <Match when={props.view().type === "repo"}> 358 358 + <RepoSubview archive={props.archive} onRoute={props.setView} /> 359 359 + </Match> 360 360 + 361 361 + <Match 362 362 + when={(() => { 363 363 + const v = props.view(); 364 364 + return v.type === "collection" ? v : null; 365 365 + })()} 366 366 + keyed 367 367 + > 368 368 + {({ collection }) => ( 369 369 + <CollectionSubview 370 370 + archive={props.archive} 371 371 + collection={collection} 372 372 + onRoute={props.setView} 373 373 + /> 374 374 + )} 375 375 + </Match> 376 376 + 377 377 + <Match 378 378 + when={(() => { 379 379 + const v = props.view(); 380 380 + return v.type === "record" ? v : null; 381 381 + })()} 382 382 + keyed 383 383 + > 384 384 + {({ collection, record }) => ( 385 385 + <RecordSubview archive={props.archive} collection={collection} record={record} /> 386 386 + )} 387 387 + </Match> 388 388 + </Switch> 389 389 + </div> 390 390 + </div> 391 391 + ); 392 392 + }; 393 393 + 394 394 + const RepoSubview = (props: { archive: Archive; onRoute: (view: View) => void }) => { 395 395 + const [filter, setFilter] = createSignal(""); 396 396 + 397 397 + const sortedEntries = createMemo(() => { 398 398 + return [...props.archive.entries].sort((a, b) => a.name.localeCompare(b.name)); 399 399 + }); 400 400 + 401 401 + const filteredEntries = createMemo(() => { 402 402 + const f = filter().toLowerCase().trim(); 403 403 + if (!f) return sortedEntries(); 404 404 + return sortedEntries().filter((entry) => entry.name.toLowerCase().includes(f)); 405 405 + }); 406 406 + 407 407 + const totalRecords = createMemo(() => 408 408 + props.archive.entries.reduce((sum, entry) => sum + entry.entries.length, 0), 409 409 + ); 410 410 + 411 411 + return ( 412 412 + <div class="flex flex-col gap-3"> 413 413 + <div class="text-sm text-neutral-600 dark:text-neutral-400"> 414 414 + {props.archive.entries.length} collection{props.archive.entries.length > 1 ? "s" : ""} 415 415 + <span class="text-neutral-400 dark:text-neutral-600"> · </span> 416 416 + {totalRecords()} record{totalRecords() > 1 ? "s" : ""} 417 417 + </div> 418 418 + 419 419 + <TextInput 420 420 + placeholder="Filter collections" 421 421 + value={filter()} 422 422 + onInput={(e) => setFilter(e.currentTarget.value)} 423 423 + class="text-sm" 424 424 + /> 425 425 + 426 426 + <ul class="flex flex-col"> 427 427 + <For each={filteredEntries()}> 428 428 + {(entry) => { 429 429 + const hasSingleEntry = entry.entries.length === 1; 430 430 + 431 431 + return ( 432 432 + <li> 433 433 + <button 434 434 + onClick={() => { 435 435 + if (hasSingleEntry) { 436 436 + props.onRoute({ 437 437 + type: "record", 438 438 + collection: entry, 439 439 + record: entry.entries[0], 440 440 + }); 441 441 + } else { 442 442 + props.onRoute({ type: "collection", collection: entry }); 443 443 + } 444 444 + }} 445 445 + class="flex w-full items-center gap-2 rounded p-2 text-left text-sm hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-800 dark:active:bg-neutral-700" 446 446 + > 447 447 + <span 448 448 + class="truncate font-medium" 449 449 + classList={{ 450 450 + "text-neutral-700 dark:text-neutral-300": hasSingleEntry, 451 451 + "text-blue-400": !hasSingleEntry, 452 452 + }} 453 453 + > 454 454 + {entry.name} 455 455 + </span> 456 456 + 457 457 + <Show when={hasSingleEntry}> 458 458 + <span class="iconify lucide--chevron-right shrink-0 text-xs text-neutral-500" /> 459 459 + <span class="truncate font-medium text-blue-400">{entry.entries[0].key}</span> 460 460 + </Show> 461 461 + 462 462 + <Show when={!hasSingleEntry}> 463 463 + <span class="ml-auto text-xs text-neutral-500">{entry.entries.length}</span> 464 464 + </Show> 465 465 + </button> 466 466 + </li> 467 467 + ); 468 468 + }} 469 469 + </For> 470 470 + </ul> 471 471 + 472 472 + <Show when={filteredEntries().length === 0 && filter()}> 473 473 + <div class="flex flex-col items-center justify-center py-8 text-center"> 474 474 + <span class="iconify lucide--search-x mb-2 text-3xl text-neutral-400" /> 475 475 + <p class="text-sm text-neutral-600 dark:text-neutral-400"> 476 476 + No collections match your filter 477 477 + </p> 478 478 + </div> 479 479 + </Show> 480 480 + </div> 481 481 + ); 482 482 + }; 483 483 + 484 484 + const RECORDS_PER_PAGE = 100; 485 485 + 486 486 + const CollectionSubview = (props: { 487 487 + archive: Archive; 488 488 + collection: CollectionEntry; 489 489 + onRoute: (view: View) => void; 490 490 + }) => { 491 491 + const [filter, setFilter] = createSignal(""); 492 492 + const [displayCount, setDisplayCount] = createSignal(RECORDS_PER_PAGE); 493 493 + 494 494 + // Sort entries by TID timestamp (most recent first), non-TID entries go to the end 495 495 + const sortedEntries = createMemo(() => { 496 496 + return [...props.collection.entries].sort((a, b) => { 497 497 + const aIsTid = TID.validate(a.key); 498 498 + const bIsTid = TID.validate(b.key); 499 499 + 500 500 + if (aIsTid && bIsTid) { 501 501 + return TID.parse(b.key).timestamp - TID.parse(a.key).timestamp; 502 502 + } 503 503 + if (aIsTid) return -1; 504 504 + if (bIsTid) return 1; 505 505 + return b.key.localeCompare(a.key); 506 506 + }); 507 507 + }); 508 508 + 509 509 + const filteredEntries = createMemo(() => { 510 510 + const f = filter().toLowerCase().trim(); 511 511 + if (!f) return sortedEntries(); 512 512 + return sortedEntries().filter((entry) => 513 513 + JSON.stringify(entry.record).toLowerCase().includes(f), 514 514 + ); 515 515 + }); 516 516 + 517 517 + const displayedEntries = createMemo(() => { 518 518 + return filteredEntries().slice(0, displayCount()); 519 519 + }); 520 520 + 521 521 + const hasMore = createMemo(() => filteredEntries().length > displayCount()); 522 522 + 523 523 + const loadMore = () => { 524 524 + setDisplayCount((prev) => prev + RECORDS_PER_PAGE); 525 525 + }; 526 526 + 527 527 + return ( 528 528 + <div class="flex flex-col gap-3"> 529 529 + <span class="text-sm text-neutral-600 dark:text-neutral-400"> 530 530 + {filteredEntries().length} record{filteredEntries().length > 1 ? "s" : ""} 531 531 + {filter() && filteredEntries().length !== props.collection.entries.length && ( 532 532 + <span class="text-neutral-400 dark:text-neutral-500"> 533 533 + {" "} 534 534 + (of {props.collection.entries.length}) 535 535 + </span> 536 536 + )} 537 537 + </span> 538 538 + 539 539 + <div class="flex items-center gap-2"> 540 540 + <TextInput 541 541 + placeholder="Filter records" 542 542 + value={filter()} 543 543 + onInput={(e) => { 544 544 + setFilter(e.currentTarget.value); 545 545 + setDisplayCount(RECORDS_PER_PAGE); 546 546 + }} 547 547 + class="grow text-sm" 548 548 + /> 549 549 + 550 550 + <Show when={hasMore()}> 551 551 + <span class="text-sm text-neutral-600 dark:text-neutral-400"> 552 552 + {displayedEntries().length}/{filteredEntries().length} 553 553 + </span> 554 554 + 555 555 + <Button onClick={loadMore}>Load More</Button> 556 556 + </Show> 557 557 + </div> 558 558 + 559 559 + <div class="flex flex-col font-mono"> 560 560 + <For each={displayedEntries()}> 561 561 + {(entry) => { 562 562 + const isTid = TID.validate(entry.key); 563 563 + const timestamp = isTid ? TID.parse(entry.key).timestamp / 1_000 : null; 564 564 + const [hover, setHover] = createSignal(false); 565 565 + const [previewHeight, setPreviewHeight] = createSignal(0); 566 566 + let rkeyRef!: HTMLButtonElement; 567 567 + let previewRef!: HTMLSpanElement; 568 568 + 569 569 + createEffect(() => { 570 570 + if (hover()) setPreviewHeight(previewRef.offsetHeight); 571 571 + }); 572 572 + 573 573 + const isOverflowing = (previewHeight: number) => 574 574 + rkeyRef.offsetTop - window.scrollY + previewHeight + 32 > window.innerHeight; 575 575 + 576 576 + return ( 577 577 + <button 578 578 + onClick={() => { 579 579 + props.onRoute({ 580 580 + type: "record", 581 581 + collection: props.collection, 582 582 + record: entry, 583 583 + }); 584 584 + }} 585 585 + ref={rkeyRef} 586 586 + onmouseover={() => !isTouchDevice && setHover(true)} 587 587 + onmouseleave={() => !isTouchDevice && setHover(false)} 588 588 + class="relative flex w-full items-baseline gap-1 rounded px-1 py-0.5 text-left hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 589 589 + > 590 590 + <span class="shrink-0 text-sm text-blue-400">{entry.key}</span> 591 591 + <span class="truncate text-xs text-neutral-500 dark:text-neutral-400" dir="rtl"> 592 592 + {entry.cid} 593 593 + </span> 594 594 + <Show when={timestamp}> 595 595 + {(ts) => ( 596 596 + <span class="ml-auto shrink-0 text-xs">{localDateFromTimestamp(ts())}</span> 597 597 + )} 598 598 + </Show> 599 599 + <Show when={hover()}> 600 600 + <span 601 601 + ref={previewRef} 602 602 + class={`dark:bg-dark-300 dark:shadow-dark-700 pointer-events-none absolute left-[50%] z-25 block max-h-80 w-max max-w-sm -translate-x-1/2 overflow-hidden rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-xs whitespace-pre-wrap shadow-md sm:max-h-112 lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`} 603 603 + > 604 604 + <JSONValue data={entry.record} repo={props.archive.did} truncate /> 605 605 + </span> 606 606 + </Show> 607 607 + </button> 608 608 + ); 609 609 + }} 610 610 + </For> 611 611 + </div> 612 612 + 613 613 + <Show when={filteredEntries().length === 0 && filter()}> 614 614 + <div class="flex flex-col items-center justify-center py-8 text-center"> 615 615 + <span class="iconify lucide--search-x mb-2 text-3xl text-neutral-400" /> 616 616 + <p class="text-sm text-neutral-600 dark:text-neutral-400">No records match your filter</p> 617 617 + </div> 618 618 + </Show> 619 619 + </div> 620 620 + ); 621 621 + }; 622 622 + 623 623 + const RecordSubview = (props: { 624 624 + archive: Archive; 625 625 + collection: CollectionEntry; 626 626 + record: RecordEntry; 627 627 + }) => { 628 628 + return ( 629 629 + <div class="flex flex-col items-center gap-3"> 630 630 + <div class="flex w-full items-center gap-2 text-sm text-neutral-600 sm:text-base dark:text-neutral-400"> 631 631 + <span class="iconify lucide--box shrink-0" /> 632 632 + <span class="text-xs break-all">{props.record.cid}</span> 633 633 + </div> 634 634 + 635 635 + <Show 636 636 + when={props.record.record !== null} 637 637 + fallback={ 638 638 + <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300"> 639 639 + Failed to decode record 640 640 + </div> 641 641 + } 642 642 + > 643 643 + <div class="max-w-full min-w-full font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:w-max sm:max-w-screen sm:px-4 sm:text-sm md:max-w-3xl"> 644 644 + <JSONValue data={props.record.record} repo={props.archive.did || ""} newTab /> 645 645 + </div> 646 646 + </Show> 647 647 + </div> 648 648 + ); 649 649 + };

+15 -1

src/components/notification.tsx

··· 7 7 progress?: number; 8 8 total?: number; 9 9 type?: "info" | "success" | "error"; 10 10 + onCancel?: () => void; 10 11 }; 11 12 12 13 const [notifications, setNotifications] = createStore<Notification[]>([]); ··· 48 49 "animate-[slideIn_0.25s_ease-in]": !removingIds().has(notification.id), 49 50 "animate-[slideOut_0.25s_ease-in]": removingIds().has(notification.id), 50 51 }} 51 51 - onClick={() => removeNotification(notification.id)} 52 52 + onClick={() => 53 53 + notification.progress === undefined && removeNotification(notification.id) 54 54 + } 52 55 > 53 56 <div class="flex items-center gap-2 text-sm"> 54 57 <Show when={notification.progress !== undefined}> ··· 82 85 {notification.progress}% 83 86 </div> 84 87 </Show> 88 88 + <Show when={notification.onCancel}> 89 89 + <button 90 90 + class="dark:hover:bg-dark-200 dark:active:bg-dark-100 dark:bg-dark-300 mt-1 rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700" 91 91 + onClick={(e) => { 92 92 + e.stopPropagation(); 93 93 + notification.onCancel?.(); 94 94 + }} 95 95 + > 96 96 + Cancel 97 97 + </button> 98 98 + </Show> 85 99 </div> 86 100 </Show> 87 101 </div>

+44

src/views/car/index.tsx

··· 1 1 + import { Title } from "@solidjs/meta"; 2 2 + import { A } from "@solidjs/router"; 3 3 + 4 4 + export const CarView = () => { 5 5 + return ( 6 6 + <div class="flex w-full max-w-3xl flex-col gap-y-4 px-2"> 7 7 + <Title>Archive tools - PDSls</Title> 8 8 + <div class="flex flex-col gap-y-1"> 9 9 + <h1 class="text-lg font-semibold">Archive tools</h1> 10 10 + <p class="text-sm text-neutral-600 dark:text-neutral-400"> 11 11 + Tools for working with CAR (Content Addressable aRchive) files. 12 12 + </p> 13 13 + </div> 14 14 + 15 15 + <div class="flex flex-col gap-3"> 16 16 + <A 17 17 + href="explore" 18 18 + class="dark:bg-dark-300 flex items-start gap-3 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 text-left transition-colors hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-600 dark:hover:border-neutral-500 dark:hover:bg-neutral-800" 19 19 + > 20 20 + <span class="iconify lucide--folder-search mt-0.5 shrink-0 text-xl text-neutral-500 dark:text-neutral-400" /> 21 21 + <div class="flex flex-col gap-1"> 22 22 + <span class="font-medium">Explore archive</span> 23 23 + <span class="text-sm text-neutral-600 dark:text-neutral-400"> 24 24 + Browse records inside a repository archive 25 25 + </span> 26 26 + </div> 27 27 + </A> 28 28 + 29 29 + <A 30 30 + href="unpack" 31 31 + class="dark:bg-dark-300 flex items-start gap-3 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 text-left transition-colors hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-600 dark:hover:border-neutral-500 dark:hover:bg-neutral-800" 32 32 + > 33 33 + <span class="iconify lucide--file-archive mt-0.5 shrink-0 text-xl text-neutral-500 dark:text-neutral-400" /> 34 34 + <div class="flex flex-col gap-1"> 35 35 + <span class="font-medium">Unpack archive</span> 36 36 + <span class="text-sm text-neutral-600 dark:text-neutral-400"> 37 37 + Extract records from an archive into a ZIP file 38 38 + </span> 39 39 + </div> 40 40 + </A> 41 41 + </div> 42 42 + </div> 43 43 + ); 44 44 + };

+152

src/views/car/logger.tsx

··· 1 1 + import { For } from "solid-js"; 2 2 + import { createMutable } from "solid-js/store"; 3 3 + 4 4 + interface LogEntry { 5 5 + type: "log" | "info" | "warn" | "error"; 6 6 + at: number; 7 7 + msg: string; 8 8 + } 9 9 + 10 10 + interface PendingLogEntry { 11 11 + msg: string; 12 12 + } 13 13 + 14 14 + export const createLogger = () => { 15 15 + const pending = createMutable<PendingLogEntry[]>([]); 16 16 + 17 17 + let backlog: LogEntry[] | undefined = []; 18 18 + let push = (entry: LogEntry) => { 19 19 + backlog!.push(entry); 20 20 + }; 21 21 + 22 22 + return { 23 23 + internal: { 24 24 + get pending() { 25 25 + return pending; 26 26 + }, 27 27 + attach(fn: (entry: LogEntry) => void) { 28 28 + if (backlog !== undefined) { 29 29 + for (let idx = 0, len = backlog.length; idx < len; idx++) { 30 30 + fn(backlog[idx]); 31 31 + } 32 32 + backlog = undefined; 33 33 + } 34 34 + push = fn; 35 35 + }, 36 36 + }, 37 37 + log(msg: string) { 38 38 + push({ type: "log", at: Date.now(), msg }); 39 39 + }, 40 40 + info(msg: string) { 41 41 + push({ type: "info", at: Date.now(), msg }); 42 42 + }, 43 43 + warn(msg: string) { 44 44 + push({ type: "warn", at: Date.now(), msg }); 45 45 + }, 46 46 + error(msg: string) { 47 47 + push({ type: "error", at: Date.now(), msg }); 48 48 + }, 49 49 + progress(initialMsg: string, throttleMs = 500) { 50 50 + pending.unshift({ msg: initialMsg }); 51 51 + 52 52 + let entry: PendingLogEntry | undefined = pending[0]; 53 53 + 54 54 + return { 55 55 + update: throttle((msg: string) => { 56 56 + if (entry !== undefined) { 57 57 + entry.msg = msg; 58 58 + } 59 59 + }, throttleMs), 60 60 + destroy() { 61 61 + if (entry !== undefined) { 62 62 + const index = pending.indexOf(entry); 63 63 + pending.splice(index, 1); 64 64 + entry = undefined; 65 65 + } 66 66 + }, 67 67 + [Symbol.dispose]() { 68 68 + this.destroy(); 69 69 + }, 70 70 + }; 71 71 + }, 72 72 + }; 73 73 + }; 74 74 + 75 75 + export type Logger = ReturnType<typeof createLogger>; 76 76 + 77 77 + const formatter = new Intl.DateTimeFormat("en-US", { timeStyle: "short", hour12: false }); 78 78 + 79 79 + export const LoggerView = (props: { logger: Logger }) => { 80 80 + return ( 81 81 + <ul class="flex flex-col font-mono text-xs empty:hidden"> 82 82 + <For each={props.logger.internal.pending}> 83 83 + {(entry) => ( 84 84 + <li class="flex gap-2 px-4 py-1 whitespace-pre-wrap"> 85 85 + <span class="shrink-0 font-medium whitespace-pre-wrap text-neutral-400">-----</span> 86 86 + <span class="wrap-break-word">{entry.msg}</span> 87 87 + </li> 88 88 + )} 89 89 + </For> 90 90 + 91 91 + <div 92 92 + ref={(node) => { 93 93 + props.logger.internal.attach(({ type, at, msg }) => { 94 94 + let ecn = `flex gap-2 whitespace-pre-wrap px-4 py-1`; 95 95 + let tcn = `shrink-0 whitespace-pre-wrap font-medium`; 96 96 + if (type === "log") { 97 97 + tcn += ` text-neutral-500`; 98 98 + } else if (type === "info") { 99 99 + ecn += ` bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300`; 100 100 + tcn += ` text-blue-500`; 101 101 + } else if (type === "warn") { 102 102 + ecn += ` bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300`; 103 103 + tcn += ` text-amber-500`; 104 104 + } else if (type === "error") { 105 105 + ecn += ` bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300`; 106 106 + tcn += ` text-red-500`; 107 107 + } 108 108 + 109 109 + const item = ( 110 110 + <li class={ecn}> 111 111 + <span class={tcn}>{formatter.format(at)}</span> 112 112 + <span class="wrap-break-word">{msg}</span> 113 113 + </li> 114 114 + ); 115 115 + 116 116 + if (item instanceof Node) { 117 117 + node.after(item); 118 118 + } 119 119 + }); 120 120 + }} 121 121 + /> 122 122 + </ul> 123 123 + ); 124 124 + }; 125 125 + 126 126 + const throttle = <T extends (...args: any[]) => void>(func: T, wait: number) => { 127 127 + let timeout: ReturnType<typeof setTimeout> | null = null; 128 128 + let lastArgs: Parameters<T> | null = null; 129 129 + let lastCallTime = 0; 130 130 + 131 131 + const invoke = () => { 132 132 + func(...lastArgs!); 133 133 + lastCallTime = Date.now(); 134 134 + timeout = null; 135 135 + }; 136 136 + 137 137 + return (...args: Parameters<T>) => { 138 138 + const now = Date.now(); 139 139 + const timeSinceLastCall = now - lastCallTime; 140 140 + 141 141 + lastArgs = args; 142 142 + 143 143 + if (timeSinceLastCall >= wait) { 144 144 + if (timeout !== null) { 145 145 + clearTimeout(timeout); 146 146 + } 147 147 + invoke(); 148 148 + } else if (timeout === null) { 149 149 + timeout = setTimeout(invoke, wait - timeSinceLastCall); 150 150 + } 151 151 + }; 152 152 + };

+146

src/views/car/shared.tsx

··· 1 1 + import * as CBOR from "@atcute/cbor"; 2 2 + import * as CID from "@atcute/cid"; 3 3 + import { A } from "@solidjs/router"; 4 4 + import { Show } from "solid-js"; 5 5 + import { type JSONType } from "../../components/json.jsx"; 6 6 + 7 7 + export const isIOS = 8 8 + /iPad|iPhone|iPod/.test(navigator.userAgent) || 9 9 + (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1); 10 10 + 11 11 + // Convert CBOR-decoded objects to JSON-friendly format 12 12 + export const toJsonValue = (obj: unknown): JSONType => { 13 13 + if (obj === null || obj === undefined) return null; 14 14 + 15 15 + if (CID.isCidLink(obj)) { 16 16 + return { $link: obj.$link }; 17 17 + } 18 18 + 19 19 + if ( 20 20 + obj && 21 21 + typeof obj === "object" && 22 22 + "version" in obj && 23 23 + "codec" in obj && 24 24 + "digest" in obj && 25 25 + "bytes" in obj 26 26 + ) { 27 27 + try { 28 28 + return { $link: CID.toString(obj as CID.Cid) }; 29 29 + } catch {} 30 30 + } 31 31 + 32 32 + if (CBOR.isBytes(obj)) { 33 33 + return { $bytes: obj.$bytes }; 34 34 + } 35 35 + 36 36 + if (Array.isArray(obj)) { 37 37 + return obj.map(toJsonValue); 38 38 + } 39 39 + 40 40 + if (typeof obj === "object") { 41 41 + const result: Record<string, JSONType> = {}; 42 42 + for (const [key, value] of Object.entries(obj)) { 43 43 + result[key] = toJsonValue(value); 44 44 + } 45 45 + return result; 46 46 + } 47 47 + 48 48 + return obj as JSONType; 49 49 + }; 50 50 + 51 51 + export interface Archive { 52 52 + file: File; 53 53 + did: string; 54 54 + entries: CollectionEntry[]; 55 55 + } 56 56 + 57 57 + export interface CollectionEntry { 58 58 + name: string; 59 59 + entries: RecordEntry[]; 60 60 + } 61 61 + 62 62 + export interface RecordEntry { 63 63 + key: string; 64 64 + cid: string; 65 65 + record: JSONType; 66 66 + } 67 67 + 68 68 + export type View = 69 69 + | { type: "repo" } 70 70 + | { type: "collection"; collection: CollectionEntry } 71 71 + | { type: "record"; collection: CollectionEntry; record: RecordEntry }; 72 72 + 73 73 + export const WelcomeView = (props: { 74 74 + title: string; 75 75 + subtitle: string; 76 76 + loading: boolean; 77 77 + progress?: number; 78 78 + error?: string; 79 79 + onFileChange: (e: Event) => void; 80 80 + onDrop: (e: DragEvent) => void; 81 81 + onDragOver: (e: DragEvent) => void; 82 82 + }) => { 83 83 + return ( 84 84 + <div class="flex w-full max-w-3xl flex-col gap-y-4 px-2"> 85 85 + <div class="flex flex-col gap-y-1"> 86 86 + <div class="flex items-center gap-2 text-lg"> 87 87 + <A 88 88 + href="/car" 89 89 + class="flex size-7 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-200 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200" 90 90 + > 91 91 + <span class="iconify lucide--arrow-left" /> 92 92 + </A> 93 93 + <h1 class="font-semibold">{props.title}</h1> 94 94 + </div> 95 95 + <p class="text-sm text-neutral-600 dark:text-neutral-400">{props.subtitle}</p> 96 96 + </div> 97 97 + 98 98 + <div 99 99 + class="dark:bg-dark-300 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-neutral-300 bg-neutral-50 p-8 transition-colors hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500" 100 100 + onDrop={props.onDrop} 101 101 + onDragOver={props.onDragOver} 102 102 + > 103 103 + <Show 104 104 + when={!props.loading} 105 105 + fallback={ 106 106 + <div class="flex flex-col items-center gap-2"> 107 107 + <span class="iconify lucide--loader-circle animate-spin text-3xl text-neutral-400" /> 108 108 + <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400"> 109 109 + Reading CAR file... 110 110 + </span> 111 111 + <Show when={props.progress && props.progress > 0}> 112 112 + <span class="text-xs text-neutral-500 dark:text-neutral-400"> 113 113 + {props.progress?.toLocaleString()} records processed 114 114 + </span> 115 115 + </Show> 116 116 + </div> 117 117 + } 118 118 + > 119 119 + <span class="iconify lucide--folder-archive text-3xl text-neutral-400" /> 120 120 + <div class="text-center"> 121 121 + <p class="text-sm font-medium text-neutral-700 dark:text-neutral-300"> 122 122 + Drag and drop a CAR file here 123 123 + </p> 124 124 + <p class="text-xs text-neutral-500 dark:text-neutral-400">or</p> 125 125 + </div> 126 126 + <label class="dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex items-center gap-1 rounded-md border border-neutral-300 bg-neutral-50 px-2.5 py-1.5 text-sm text-neutral-700 transition-colors select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"> 127 127 + <input 128 128 + type="file" 129 129 + accept={isIOS ? undefined : ".car,application/vnd.ipld.car"} 130 130 + onChange={props.onFileChange} 131 131 + class="hidden" 132 132 + /> 133 133 + <span class="iconify lucide--upload text-sm" /> 134 134 + Choose file 135 135 + </label> 136 136 + </Show> 137 137 + </div> 138 138 + 139 139 + <Show when={props.error}> 140 140 + <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300"> 141 141 + {props.error} 142 142 + </div> 143 143 + </Show> 144 144 + </div> 145 145 + ); 146 146 + };

+249

src/views/car/unpack.tsx

··· 1 1 + import { fromStream } from "@atcute/repo"; 2 2 + import { zip, type ZipEntry } from "@mary/zip"; 3 3 + import { Title } from "@solidjs/meta"; 4 4 + import { FileSystemWritableFileStream, showSaveFilePicker } from "native-file-system-adapter"; 5 5 + import { createSignal, onCleanup } from "solid-js"; 6 6 + import { createDropHandler, createFileChangeHandler, handleDragOver } from "./file-handlers.js"; 7 7 + import { createLogger, LoggerView } from "./logger.jsx"; 8 8 + import { isIOS, toJsonValue, WelcomeView } from "./shared.jsx"; 9 9 + 10 10 + // Check if browser natively supports File System Access API 11 11 + const hasNativeFileSystemAccess = "showSaveFilePicker" in window; 12 12 + 13 13 + // HACK: Disable compression on WebKit due to an error being thrown 14 14 + const isWebKit = 15 15 + isIOS || (/AppleWebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)); 16 16 + 17 17 + const INVALID_CHAR_RE = /[<>:"/\\|?*\x00-\x1F]/g; 18 18 + const filenamify = (name: string) => { 19 19 + return name.replace(INVALID_CHAR_RE, "~"); 20 20 + }; 21 21 + 22 22 + export const UnpackToolView = () => { 23 23 + const logger = createLogger(); 24 24 + const [pending, setPending] = createSignal(false); 25 25 + 26 26 + let abortController: AbortController | undefined; 27 27 + 28 28 + onCleanup(() => { 29 29 + abortController?.abort(); 30 30 + }); 31 31 + 32 32 + const unpackToZip = async (file: File) => { 33 33 + abortController?.abort(); 34 34 + abortController = new AbortController(); 35 35 + const signal = abortController.signal; 36 36 + 37 37 + setPending(true); 38 38 + logger.log(`Starting extraction`); 39 39 + 40 40 + let repo: Awaited<ReturnType<typeof fromStream>> | undefined; 41 41 + 42 42 + const stream = file.stream(); 43 43 + repo = fromStream(stream); 44 44 + 45 45 + try { 46 46 + let count = 0; 47 47 + 48 48 + // On Safari/browsers without native File System Access API, use blob download 49 49 + if (!hasNativeFileSystemAccess) { 50 50 + const chunks: BlobPart[] = []; 51 51 + 52 52 + const entryGenerator = async function* (): AsyncGenerator<ZipEntry> { 53 53 + const progress = logger.progress(`Unpacking records (0 entries)`); 54 54 + 55 55 + try { 56 56 + for await (const entry of repo) { 57 57 + if (signal.aborted) return; 58 58 + 59 59 + try { 60 60 + const record = toJsonValue(entry.record); 61 61 + const filename = `${entry.collection}/${filenamify(entry.rkey)}.json`; 62 62 + const data = JSON.stringify(record, null, 2); 63 63 + 64 64 + yield { filename, data, compress: isWebKit ? false : "deflate" }; 65 65 + count++; 66 66 + progress.update(`Unpacking records (${count} entries)`); 67 67 + } catch { 68 68 + // Skip entries with invalid data 69 69 + } 70 70 + } 71 71 + } finally { 72 72 + progress[Symbol.dispose]?.(); 73 73 + } 74 74 + }; 75 75 + 76 76 + for await (const chunk of zip(entryGenerator())) { 77 77 + if (signal.aborted) return; 78 78 + chunks.push(chunk as BlobPart); 79 79 + } 80 80 + 81 81 + if (signal.aborted) return; 82 82 + 83 83 + logger.log(`${count} records extracted`); 84 84 + logger.log(`Creating download...`); 85 85 + 86 86 + const blob = new Blob(chunks, { type: "application/zip" }); 87 87 + const url = URL.createObjectURL(blob); 88 88 + const a = document.createElement("a"); 89 89 + a.href = url; 90 90 + a.download = `${file.name.replace(/\.car$/, "")}.zip`; 91 91 + document.body.appendChild(a); 92 92 + a.click(); 93 93 + document.body.removeChild(a); 94 94 + URL.revokeObjectURL(url); 95 95 + 96 96 + logger.log(`Finished! Download started.`); 97 97 + setPending(false); 98 98 + return; 99 99 + } 100 100 + 101 101 + // Native File System Access API path 102 102 + let writable: FileSystemWritableFileStream | undefined; 103 103 + 104 104 + // Create async generator that yields ZipEntry as we read from CAR 105 105 + const entryGenerator = async function* (): AsyncGenerator<ZipEntry> { 106 106 + const progress = logger.progress(`Unpacking records (0 entries)`); 107 107 + 108 108 + try { 109 109 + for await (const entry of repo) { 110 110 + if (signal.aborted) return; 111 111 + 112 112 + // Prompt for save location on first record 113 113 + if (writable === undefined) { 114 114 + const waiting = logger.progress(`Waiting for user...`); 115 115 + 116 116 + try { 117 117 + const fd = await showSaveFilePicker({ 118 118 + suggestedName: `${file.name.replace(/\.car$/, "")}.zip`, 119 119 + // @ts-expect-error: ponyfill doesn't have full typings 120 120 + id: "car-unpack", 121 121 + startIn: "downloads", 122 122 + types: [ 123 123 + { 124 124 + description: "ZIP archive", 125 125 + accept: { "application/zip": [".zip"] }, 126 126 + }, 127 127 + ], 128 128 + }).catch((err) => { 129 129 + if (err instanceof DOMException && err.name === "AbortError") { 130 130 + logger.warn(`File picker was cancelled`); 131 131 + } else { 132 132 + logger.warn(`Something went wrong when opening the file picker`); 133 133 + } 134 134 + return undefined; 135 135 + }); 136 136 + 137 137 + if (!fd) { 138 138 + logger.warn(`No file handle obtained`); 139 139 + return; 140 140 + } 141 141 + 142 142 + writable = await fd.createWritable(); 143 143 + 144 144 + if (writable === undefined) { 145 145 + logger.warn(`Failed to create writable stream`); 146 146 + return; 147 147 + } 148 148 + } finally { 149 149 + waiting[Symbol.dispose]?.(); 150 150 + } 151 151 + } 152 152 + 153 153 + try { 154 154 + const record = toJsonValue(entry.record); 155 155 + const filename = `${entry.collection}/${filenamify(entry.rkey)}.json`; 156 156 + const data = JSON.stringify(record, null, 2); 157 157 + 158 158 + yield { filename, data, compress: isWebKit ? false : "deflate" }; 159 159 + count++; 160 160 + progress.update(`Unpacking records (${count} entries)`); 161 161 + } catch { 162 162 + // Skip entries with invalid data 163 163 + } 164 164 + } 165 165 + } finally { 166 166 + progress[Symbol.dispose]?.(); 167 167 + } 168 168 + }; 169 169 + 170 170 + // Stream entries directly to zip, then to file 171 171 + let writeCount = 0; 172 172 + for await (const chunk of zip(entryGenerator())) { 173 173 + if (signal.aborted) { 174 174 + await writable?.abort(); 175 175 + return; 176 176 + } 177 177 + if (writable === undefined) { 178 178 + // User cancelled file picker 179 179 + setPending(false); 180 180 + return; 181 181 + } 182 182 + writeCount++; 183 183 + // Await every 100th write to apply backpressure 184 184 + if (writeCount % 100 === 0) { 185 185 + await writable.write(chunk); 186 186 + } else { 187 187 + writable.write(chunk); // Fire and forget 188 188 + } 189 189 + } 190 190 + 191 191 + if (signal.aborted) return; 192 192 + 193 193 + if (writable === undefined) { 194 194 + logger.warn(`CAR file has no records`); 195 195 + setPending(false); 196 196 + return; 197 197 + } 198 198 + 199 199 + logger.log(`${count} records extracted`); 200 200 + 201 201 + { 202 202 + const flushProgress = logger.progress(`Flushing writes...`); 203 203 + try { 204 204 + await writable.close(); 205 205 + logger.log(`Finished! File saved successfully.`); 206 206 + } catch (err) { 207 207 + logger.error(`Failed to save file: ${err}`); 208 208 + throw err; // Re-throw to be caught by outer catch 209 209 + } finally { 210 210 + flushProgress[Symbol.dispose]?.(); 211 211 + } 212 212 + } 213 213 + } catch (err) { 214 214 + if (signal.aborted) return; 215 215 + logger.error(`Error: ${err}\nFile might be malformed, or might not be a CAR archive`); 216 216 + } finally { 217 217 + await repo?.dispose(); 218 218 + if (!signal.aborted) { 219 219 + setPending(false); 220 220 + } 221 221 + } 222 222 + }; 223 223 + 224 224 + const handleFileChange = createFileChangeHandler(unpackToZip); 225 225 + 226 226 + // Wrap handleDrop to prevent multiple simultaneous uploads 227 227 + const baseDrop = createDropHandler(unpackToZip); 228 228 + const handleDrop = (e: DragEvent) => { 229 229 + if (pending()) return; 230 230 + baseDrop(e); 231 231 + }; 232 232 + 233 233 + return ( 234 234 + <> 235 235 + <Title>Unpack archive - PDSls</Title> 236 236 + <WelcomeView 237 237 + title="Unpack archive" 238 238 + subtitle="Upload a CAR file to extract all records into a ZIP archive." 239 239 + loading={pending()} 240 240 + onFileChange={handleFileChange} 241 241 + onDrop={handleDrop} 242 242 + onDragOver={handleDragOver} 243 243 + /> 244 244 + <div class="w-full max-w-3xl px-2"> 245 245 + <LoggerView logger={logger} /> 246 246 + </div> 247 247 + </> 248 248 + ); 249 249 + };

+24

src/views/car/file-handlers.ts

··· 1 1 + export const isCarFile = (file: File): boolean => { 2 2 + return file.name.endsWith(".car") || file.type === "application/vnd.ipld.car"; 3 3 + }; 4 4 + 5 5 + export const createFileChangeHandler = (onFile: (file: File) => void) => (e: Event) => { 6 6 + const input = e.target as HTMLInputElement; 7 7 + const file = input.files?.[0]; 8 8 + if (file) { 9 9 + onFile(file); 10 10 + } 11 11 + input.value = ""; 12 12 + }; 13 13 + 14 14 + export const createDropHandler = (onFile: (file: File) => void) => (e: DragEvent) => { 15 15 + e.preventDefault(); 16 16 + const file = e.dataTransfer?.files?.[0]; 17 17 + if (file && isCarFile(file)) { 18 18 + onFile(file); 19 19 + } 20 20 + }; 21 21 + 22 22 + export const handleDragOver = (e: DragEvent) => { 23 23 + e.preventDefault(); 24 24 + };

+108 -79

src/views/repo.tsx

··· 20 20 21 21 22 22 23 23 + MenuSeparator, 24 24 + NavMenu, 25 25 + } from "../components/dropdown.jsx"; 26 26 + import { Favicon } from "../components/favicon.jsx"; 27 27 + import { 28 28 + addNotification, 29 29 + removeNotification, 23 30 24 31 25 32 ··· 32 39 33 40 34 41 42 42 + import { detectDidKeyType, detectKeyType } from "../utils/key.js"; 43 43 + import { BlobView } from "./blob.jsx"; 44 44 + import { PlcLogView } from "./logs.jsx"; 45 45 + import { plcDirectory } from "./settings.jsx"; 35 46 47 47 + export const RepoView = () => { 48 48 + const params = useParams(); 36 49 37 50 38 51 ··· 86 99 87 100 88 101 102 102 + }; 89 103 104 104 + const getRotationKeys = async () => { 105 105 + const res = await fetch(`${plcDirectory()}/${did}/log/last`); 106 106 + const json = await res.json(); 107 107 + setRotationKeys(json.rotationKeys ?? []); 108 108 + }; 90 109 91 110 92 111 ··· 122 141 123 142 124 143 144 144 + if (!pds) { 145 145 + setError("Missing PDS"); 146 146 + return {}; 147 147 + } 125 148 126 149 127 150 ··· 295 318 296 319 297 320 321 321 + </div> 322 322 + <div class="flex gap-1"> 323 323 + <Show when={error() && error() !== "Missing PDS"}> 324 324 + <div class="flex items-center gap-1 font-medium text-red-500 dark:text-red-400"> 325 325 + <span class="iconify lucide--alert-triangle"></span> 326 326 + <span>{error()}</span> 327 327 + </div> 298 328 299 329 300 330 ··· 330 360 331 361 332 362 363 363 + <NavMenu 364 364 + href={ 365 365 + did.startsWith("did:plc") ? 366 366 + `${plcDirectory()}/${did}` 367 367 + : `https://${did.split("did:web:")[1]}/.well-known/did.json` 368 368 + } 369 369 + newTab 333 370 334 371 372 372 + /> 373 373 + <Show when={did.startsWith("did:plc")}> 374 374 + <NavMenu 375 375 + href={`${plcDirectory()}/${did}/log/audit`} 376 376 + newTab 377 377 + label="Audit log" 378 378 + icon="lucide--external-link" 335 379 336 380 337 381 ··· 406 450 407 451 408 452 453 453 + )} 454 454 + > 455 455 + {(authority) => { 456 456 + const isHighlighted = () => location.hash === `#collections:${authority}`; 409 457 458 458 + return ( 410 459 411 460 412 461 413 462 414 463 464 464 + "bg-blue-100 dark:bg-blue-500/25": isHighlighted(), 465 465 + }} 466 466 + > 467 467 + <Favicon 468 468 + authority={authority} 469 469 + wrapper={(children) => ( 470 470 + <a 471 471 + href={`#collections:${authority}`} 472 472 + class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70" 473 473 + > 474 474 + <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100"> 475 475 + <span class="iconify lucide--link absolute -left-2 w-7"></span> 476 476 + </span> 477 477 + {children} 478 478 + </a> 479 479 + )} 480 480 + /> 481 481 + <div class="flex flex-1 flex-col"> 482 482 + <For 483 483 + each={nsids()?.[authority].nsids.filter((nsid) => 415 484 416 485 417 486 ··· 488 557 489 558 490 559 560 560 + {(service) => ( 561 561 + <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300"> 562 562 + <span class="iconify lucide--hash"></span> 563 563 + <div class="flex items-center gap-2"> 564 564 + <span>{service.id.split("#")[1]}</span> 565 565 + <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400"> 566 566 + <span 567 567 + class="iconify text-xs" 568 568 + classList={{ 569 569 + "lucide--hard-drive": 570 570 + service.type === "AtprotoPersonalDataServer", 571 571 + "lucide--tag": service.type === "AtprotoLabeler", 572 572 + "lucide--rss": service.type === "BskyFeedGenerator", 573 573 + "lucide--wrench": ![ 574 574 + "AtprotoPersonalDataServer", 575 575 + "AtprotoLabeler", 576 576 + "BskyFeedGenerator", 577 577 + ].includes(service.type.toString()), 578 578 + }} 579 579 + ></span> 580 580 + <span>{service.type}</span> 581 581 + </div> 582 582 + </div> 583 583 + <span></span> 584 584 + <a 585 585 + class="w-fit underline hover:text-blue-500 dark:hover:text-blue-400" 491 586 492 587 493 588 ··· 512 607 513 608 514 609 610 610 + <div class="flex items-center gap-2"> 611 611 + <span>{verif.id.split("#")[1]}</span> 612 612 + <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400"> 613 613 + <span class="iconify lucide--key-round text-xs"></span> 614 614 + <span>{detectKeyType(key())}</span> 615 615 + </div> 616 616 + </div> 515 617 516 618 517 619 ··· 528 630 529 631 530 632 531 531 - 532 532 - 533 533 - 534 534 - 535 535 - 536 536 - 537 537 - 538 538 - 539 539 - 540 540 - 541 541 - 542 542 - 543 543 - 544 544 - 545 545 - 546 546 - 547 547 - 548 548 - 549 549 - 550 550 - 551 551 - 552 552 - 553 553 - 554 554 - 555 555 - 556 556 - 557 557 - 558 558 - 559 559 - 560 560 - 561 561 - 562 562 - 563 563 - 564 564 - 565 565 - 566 566 - 567 567 - 568 568 - 569 569 - 570 570 - 571 571 - 572 572 - 573 573 - 574 574 - {(service) => ( 633 633 + <For each={rotationKeys()}> 634 634 + {(key) => ( 575 635 <div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300"> 576 576 - <span class="iconify lucide--hash"></span> 577 577 - <span>{service.id.split("#")[1]}</span> 636 636 + <span class="iconify lucide--key-round"></span> 637 637 + <span>{detectDidKeyType(key)}</span> 578 638 <span></span> 579 579 - <a 580 580 - class="w-fit underline hover:text-blue-500 dark:hover:text-blue-400" 581 581 - 582 582 - 583 583 - 584 584 - 585 585 - 586 586 - 587 587 - 588 588 - 589 589 - 590 590 - 591 591 - 592 592 - 593 593 - 594 594 - 595 595 - 596 596 - 597 597 - 598 598 - 599 599 - 600 600 - 601 601 - 602 602 - 603 603 - 604 604 - 605 605 - <div class="flex items-center gap-2"> 606 606 - <span>{verif.id.split("#")[1]}</span> 607 607 - <div class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400"> 608 608 - <span class="iconify lucide--key-round"></span> 609 609 - <span>{detectKeyType(key())}</span> 610 610 - </div> 611 611 - </div> 639 639 + <div class="font-mono break-all">{key.replace("did:key:", "")}</div> 640 640 + </div>

public/fonts/Figtree[wght].woff2 public/fonts/Figtree.woff2

+2

src/auth/state.ts

··· 12 12 13 13 export const [agent, setAgent] = createSignal<OAuthUserAgent | undefined>(); 14 14 export const [sessions, setSessions] = createStore<Sessions>(); 15 15 + export const [openManager, setOpenManager] = createSignal(false); 16 16 + export const [pendingPermissionEdit, setPendingPermissionEdit] = createSignal<string | null>(null);

+36

src/components/favicon.tsx

··· 1 1 + import { createSignal, JSX, Match, Show, Switch } from "solid-js"; 2 2 + 3 3 + export const Favicon = (props: { 4 4 + authority: string; 5 5 + wrapper?: (children: JSX.Element) => JSX.Element; 6 6 + }) => { 7 7 + const [loaded, setLoaded] = createSignal(false); 8 8 + const domain = () => props.authority.split(".").reverse().join("."); 9 9 + 10 10 + const content = ( 11 11 + <Switch> 12 12 + <Match when={domain() === "tangled.sh"}> 13 13 + <span class="iconify i-tangled size-4" /> 14 14 + </Match> 15 15 + <Match when={["bsky.app", "bsky.chat"].includes(domain())}> 16 16 + <img src="https://web-cdn.bsky.app/static/apple-touch-icon.png" class="size-4" /> 17 17 + </Match> 18 18 + <Match when={true}> 19 19 + <Show when={!loaded()}> 20 20 + <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" /> 21 21 + </Show> 22 22 + <img 23 23 + src={`https://${domain()}/favicon.ico`} 24 24 + class="size-4" 25 25 + classList={{ hidden: !loaded() }} 26 26 + onLoad={() => setLoaded(true)} 27 27 + onError={() => setLoaded(false)} 28 28 + /> 29 29 + </Match> 30 30 + </Switch> 31 31 + ); 32 32 + 33 33 + return props.wrapper ? 34 34 + props.wrapper(content) 35 35 + : <div class="flex h-5 w-4 shrink-0 items-center justify-center">{content}</div>; 36 36 + };

+8 -3

src/auth/oauth-config.ts

··· 1 1 - import { configureOAuth, defaultIdentityResolver } from "@atcute/oauth-browser-client"; 1 1 + import { LocalActorResolver } from "@atcute/identity-resolver"; 2 2 + import { configureOAuth } from "@atcute/oauth-browser-client"; 2 3 import { didDocumentResolver, handleResolver } from "../utils/api"; 3 4 5 5 + const reactiveDidDocumentResolver = { 6 6 + resolve: async (did: string) => didDocumentResolver().resolve(did as any), 7 7 + }; 8 8 + 4 9 configureOAuth({ 5 10 metadata: { 6 11 client_id: import.meta.env.VITE_OAUTH_CLIENT_ID, 7 12 redirect_uri: import.meta.env.VITE_OAUTH_REDIRECT_URL, 8 13 }, 9 9 - identityResolver: defaultIdentityResolver({ 14 14 + identityResolver: new LocalActorResolver({ 10 15 handleResolver: handleResolver, 11 11 - didDocumentResolver: didDocumentResolver, 16 16 + didDocumentResolver: reactiveDidDocumentResolver, 12 17 }), 13 18 });

+22 -14

src/utils/api.ts

··· 16 16 import { DohJsonLexiconAuthorityResolver, LexiconSchemaResolver } from "@atcute/lexicon-resolver"; 17 17 import { Did, Handle } from "@atcute/lexicons"; 18 18 import { AtprotoDid, isHandle, Nsid } from "@atcute/lexicons/syntax"; 19 19 + import { createMemo } from "solid-js"; 19 20 import { createStore } from "solid-js/store"; 20 21 import { setPDS } from "../components/navbar"; 21 21 - 22 22 - export const didDocumentResolver = new CompositeDidDocumentResolver({ 23 23 - methods: { 24 24 - plc: new PlcDidDocumentResolver({ 25 25 - apiUrl: localStorage.getItem("plcDirectory") ?? "https://plc.directory", 22 22 + import { plcDirectory } from "../views/settings"; 23 23 + 24 24 + export const didDocumentResolver = createMemo( 25 25 + () => 26 26 + new CompositeDidDocumentResolver({ 27 27 + methods: { 28 28 + plc: new PlcDidDocumentResolver({ 29 29 + apiUrl: plcDirectory(), 30 30 + }), 31 31 + web: new AtprotoWebDidDocumentResolver(), 32 32 + }, 26 33 }), 27 27 - web: new AtprotoWebDidDocumentResolver(), 28 28 - }, 29 29 - }); 34 34 + ); 30 35 31 36 export const handleResolver = new CompositeHandleResolver({ 32 37 strategy: "dns-first", ··· 40 45 dohUrl: "https://dns.google/resolve?", 41 46 }); 42 47 43 43 - const schemaResolver = new LexiconSchemaResolver({ 44 44 - didDocumentResolver: didDocumentResolver, 45 45 - }); 48 48 + const schemaResolver = createMemo( 49 49 + () => 50 50 + new LexiconSchemaResolver({ 51 51 + didDocumentResolver: didDocumentResolver(), 52 52 + }), 53 53 + ); 46 54 47 55 const didPDSCache: Record<string, string> = {}; 48 56 const [labelerCache, setLabelerCache] = createStore<Record<string, string>>({}); ··· 54 62 throw new Error("Not a valid DID identifier"); 55 63 } 56 64 57 57 - const doc = await didDocumentResolver.resolve(did); 65 65 + const doc = await didDocumentResolver().resolve(did); 58 66 didDocCache[did] = doc; 59 67 60 68 const pds = getPdsEndpoint(doc); ··· 83 91 if (!isAtprotoDid(did)) { 84 92 throw new Error("Not a valid DID identifier"); 85 93 } 86 86 - return await didDocumentResolver.resolve(did); 94 94 + return await didDocumentResolver().resolve(did); 87 95 }; 88 96 89 97 const validateHandle = async (handle: Handle, did: Did) => { ··· 145 153 }; 146 154 147 155 const resolveLexiconSchema = async (authority: AtprotoDid, nsid: Nsid) => { 148 148 - return await schemaResolver.resolve(authority, nsid); 156 156 + return await schemaResolver().resolve(authority, nsid); 149 157 }; 150 158 151 159 interface LinkData {

+1 -1

LICENSE

··· 1 1 - Copyright (c) 2024-2025 Juliet Philippe <m@juli.ee> 1 1 + Copyright (c) 2024-2026 Juliet Philippe <m@juli.ee> 2 2 3 3 Permission to use, copy, modify, and/or distribute this software for any 4 4 purpose with or without fee is hereby granted.

+2 -1

README.md

··· 1 1 - # PDSls - AT Protocol Explorer 1 1 + # PDSls - Atmosphere Explorer 2 2 3 3 Lightweight and client-side web app to navigate [atproto](https://atproto.com/). 4 4 ··· 9 9 - Jetstream and firehose (com.atproto.sync.subscribeRepos) streaming. 10 10 - Backlinks support with [constellation](https://constellation.microcosm.blue/). 11 11 - Query moderation labels. 12 12 + - Explore and unpack repository archives (CAR). 12 13 13 14 ## Hacking 14 15

+9

src/utils/format.ts

··· 1 1 + const formatFileSize = (bytes: number): string => { 2 2 + if (bytes === 0) return "0 B"; 3 3 + const k = 1024; 4 4 + const sizes = ["B", "KB", "MB", "GB"]; 5 5 + const i = Math.floor(Math.log(bytes) / Math.log(k)); 6 6 + return `${(bytes / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1)} ${sizes[i]}`; 7 7 + }; 8 8 + 9 9 + export { formatFileSize };

+130

src/views/stream/stats.tsx

··· 1 1 + import { For, Show } from "solid-js"; 2 2 + import { STREAM_CONFIGS, StreamType } from "./config"; 3 3 + 4 4 + export type StreamStats = { 5 5 + connectedAt?: number; 6 6 + totalEvents: number; 7 7 + eventsPerSecond: number; 8 8 + eventTypes: Record<string, number>; 9 9 + collections: Record<string, number>; 10 10 + }; 11 11 + 12 12 + const formatUptime = (ms: number) => { 13 13 + const seconds = Math.floor(ms / 1000); 14 14 + const minutes = Math.floor(seconds / 60); 15 15 + const hours = Math.floor(minutes / 60); 16 16 + 17 17 + if (hours > 0) { 18 18 + return `${hours}h ${minutes % 60}m ${seconds % 60}s`; 19 19 + } else if (minutes > 0) { 20 20 + return `${minutes}m ${seconds % 60}s`; 21 21 + } else { 22 22 + return `${seconds}s`; 23 23 + } 24 24 + }; 25 25 + 26 26 + export const StreamStatsPanel = (props: { 27 27 + stats: StreamStats; 28 28 + currentTime: number; 29 29 + streamType: StreamType; 30 30 + showAllEvents?: boolean; 31 31 + }) => { 32 32 + const config = () => STREAM_CONFIGS[props.streamType]; 33 33 + const uptime = () => (props.stats.connectedAt ? props.currentTime - props.stats.connectedAt : 0); 34 34 + 35 35 + const shouldShowEventTypes = () => { 36 36 + if (!config().showEventTypes) return false; 37 37 + if (props.streamType === "jetstream") return props.showAllEvents === true; 38 38 + return true; 39 39 + }; 40 40 + 41 41 + const topCollections = () => 42 42 + Object.entries(props.stats.collections) 43 43 + .sort(([, a], [, b]) => b - a) 44 44 + .slice(0, 5); 45 45 + 46 46 + const topEventTypes = () => 47 47 + Object.entries(props.stats.eventTypes) 48 48 + .sort(([, a], [, b]) => b - a) 49 49 + .slice(0, 5); 50 50 + 51 51 + return ( 52 52 + <Show when={props.stats.connectedAt !== undefined}> 53 53 + <div class="w-full text-sm"> 54 54 + <div class="mb-1 font-semibold">Statistics</div> 55 55 + <div class="flex flex-wrap justify-between gap-x-4 gap-y-2"> 56 56 + <div> 57 57 + <div class="text-xs text-neutral-500 dark:text-neutral-400">Uptime</div> 58 58 + <div class="font-mono">{formatUptime(uptime())}</div> 59 59 + </div> 60 60 + <div> 61 61 + <div class="text-xs text-neutral-500 dark:text-neutral-400">Total Events</div> 62 62 + <div class="font-mono">{props.stats.totalEvents.toLocaleString()}</div> 63 63 + </div> 64 64 + <div> 65 65 + <div class="text-xs text-neutral-500 dark:text-neutral-400">Events/sec</div> 66 66 + <div class="font-mono">{props.stats.eventsPerSecond.toFixed(1)}</div> 67 67 + </div> 68 68 + <div> 69 69 + <div class="text-xs text-neutral-500 dark:text-neutral-400">Avg/sec</div> 70 70 + <div class="font-mono"> 71 71 + {uptime() > 0 ? ((props.stats.totalEvents / uptime()) * 1000).toFixed(1) : "0.0"} 72 72 + </div> 73 73 + </div> 74 74 + </div> 75 75 + 76 76 + <Show when={topEventTypes().length > 0 && shouldShowEventTypes()}> 77 77 + <div class="mt-2"> 78 78 + <div class="mb-1 text-xs text-neutral-500 dark:text-neutral-400">Event Types</div> 79 79 + <div class="grid grid-cols-[1fr_5rem_3rem] gap-x-1 gap-y-0.5 font-mono text-xs sm:gap-x-4"> 80 80 + <For each={topEventTypes()}> 81 81 + {([type, count]) => { 82 82 + const percentage = ((count / props.stats.totalEvents) * 100).toFixed(1); 83 83 + return ( 84 84 + <> 85 85 + <span class="text-neutral-700 dark:text-neutral-300">{type}</span> 86 86 + <span class="text-right text-neutral-600 tabular-nums dark:text-neutral-400"> 87 87 + {count.toLocaleString()} 88 88 + </span> 89 89 + <span class="text-right text-neutral-400 tabular-nums dark:text-neutral-500"> 90 90 + {percentage}% 91 91 + </span> 92 92 + </> 93 93 + ); 94 94 + }} 95 95 + </For> 96 96 + </div> 97 97 + </div> 98 98 + </Show> 99 99 + 100 100 + <Show when={topCollections().length > 0}> 101 101 + <div class="mt-2"> 102 102 + <div class="mb-1 text-xs text-neutral-500 dark:text-neutral-400"> 103 103 + {config().collectionsLabel} 104 104 + </div> 105 105 + <div class="grid grid-cols-[1fr_5rem_3rem] gap-x-1 gap-y-0.5 font-mono text-xs sm:gap-x-4"> 106 106 + <For each={topCollections()}> 107 107 + {([collection, count]) => { 108 108 + const percentage = ((count / props.stats.totalEvents) * 100).toFixed(1); 109 109 + return ( 110 110 + <> 111 111 + <span class="min-w-0 truncate text-neutral-700 dark:text-neutral-300"> 112 112 + {collection} 113 113 + </span> 114 114 + <span class="text-right text-neutral-600 tabular-nums dark:text-neutral-400"> 115 115 + {count.toLocaleString()} 116 116 + </span> 117 117 + <span class="text-right text-neutral-400 tabular-nums dark:text-neutral-500"> 118 118 + {percentage}% 119 119 + </span> 120 120 + </> 121 121 + ); 122 122 + }} 123 123 + </For> 124 124 + </div> 125 125 + </div> 126 126 + </Show> 127 127 + </div> 128 128 + </Show> 129 129 + ); 130 130 + };

+130

src/components/hover-card/base.tsx

··· 1 1 + import { A } from "@solidjs/router"; 2 2 + import { createSignal, JSX, onCleanup, Show } from "solid-js"; 3 3 + import { Portal } from "solid-js/web"; 4 4 + import { isTouchDevice } from "../../layout"; 5 5 + 6 6 + interface HoverCardProps { 7 7 + /** Link href - if provided, renders an A tag */ 8 8 + href?: string; 9 9 + /** Link/trigger label text */ 10 10 + label?: string; 11 11 + /** Open link in new tab */ 12 12 + newTab?: boolean; 13 13 + /** Called when hover starts (for prefetching) */ 14 14 + onHover?: () => void; 15 15 + /** Delay in ms before showing card and calling onHover (default: 0) */ 16 16 + hoverDelay?: number; 17 17 + /** Custom trigger element - if provided, overrides href/label */ 18 18 + trigger?: JSX.Element; 19 19 + /** Additional classes for the wrapper span */ 20 20 + class?: string; 21 21 + /** Additional classes for the link/label */ 22 22 + labelClass?: string; 23 23 + /** Additional classes for the preview container */ 24 24 + previewClass?: string; 25 25 + /** Preview content */ 26 26 + children: JSX.Element; 27 27 + } 28 28 + 29 29 + const HoverCard = (props: HoverCardProps) => { 30 30 + const [show, setShow] = createSignal(false); 31 31 + 32 32 + const [previewHeight, setPreviewHeight] = createSignal(0); 33 33 + const [anchorRect, setAnchorRect] = createSignal<DOMRect | null>(null); 34 34 + let anchorRef!: HTMLSpanElement; 35 35 + let previewRef!: HTMLDivElement; 36 36 + let resizeObserver: ResizeObserver | null = null; 37 37 + let hoverTimeout: number | null = null; 38 38 + 39 39 + const setupResizeObserver = (el: HTMLDivElement) => { 40 40 + resizeObserver?.disconnect(); 41 41 + previewRef = el; 42 42 + resizeObserver = new ResizeObserver(() => { 43 43 + if (previewRef) setPreviewHeight(previewRef.offsetHeight); 44 44 + }); 45 45 + resizeObserver.observe(el); 46 46 + }; 47 47 + 48 48 + onCleanup(() => { 49 49 + resizeObserver?.disconnect(); 50 50 + if (hoverTimeout !== null) { 51 51 + clearTimeout(hoverTimeout); 52 52 + } 53 53 + }); 54 54 + 55 55 + const isOverflowing = (previewHeight: number) => { 56 56 + const rect = anchorRect(); 57 57 + return rect && rect.top + previewHeight + 32 > window.innerHeight; 58 58 + }; 59 59 + 60 60 + const getPreviewStyle = () => { 61 61 + const rect = anchorRect(); 62 62 + if (!rect) return {}; 63 63 + 64 64 + const left = rect.left + rect.width / 2; 65 65 + const overflowing = isOverflowing(previewHeight()); 66 66 + const gap = 4; 67 67 + 68 68 + return { 69 69 + left: `${left}px`, 70 70 + top: overflowing ? `${rect.top - gap}px` : `${rect.bottom + gap}px`, 71 71 + transform: overflowing ? "translate(-50%, -100%)" : "translate(-50%, 0)", 72 72 + }; 73 73 + }; 74 74 + 75 75 + const handleMouseEnter = () => { 76 76 + const delay = props.hoverDelay ?? 0; 77 77 + setAnchorRect(anchorRef.getBoundingClientRect()); 78 78 + 79 79 + if (delay > 0) { 80 80 + hoverTimeout = window.setTimeout(() => { 81 81 + props.onHover?.(); 82 82 + setShow(true); 83 83 + hoverTimeout = null; 84 84 + }, delay); 85 85 + } else { 86 86 + props.onHover?.(); 87 87 + setShow(true); 88 88 + } 89 89 + }; 90 90 + 91 91 + const handleMouseLeave = () => { 92 92 + if (hoverTimeout !== null) { 93 93 + clearTimeout(hoverTimeout); 94 94 + hoverTimeout = null; 95 95 + } 96 96 + setShow(false); 97 97 + }; 98 98 + 99 99 + return ( 100 100 + <span 101 101 + ref={anchorRef} 102 102 + class={`group/hover-card relative ${props.class || "inline"}`} 103 103 + onMouseEnter={handleMouseEnter} 104 104 + onMouseLeave={handleMouseLeave} 105 105 + > 106 106 + {props.trigger ?? ( 107 107 + <A 108 108 + class={`text-blue-500 hover:underline active:underline dark:text-blue-400 ${props.labelClass || ""}`} 109 109 + href={props.href!} 110 110 + target={props.newTab ? "_blank" : undefined} 111 111 + > 112 112 + {props.label} 113 113 + </A> 114 114 + )} 115 115 + <Show when={show() && !isTouchDevice}> 116 116 + <Portal> 117 117 + <div 118 118 + ref={setupResizeObserver} 119 119 + style={getPreviewStyle()} 120 120 + class={`dark:bg-dark-300 dark:shadow-dark-700 pointer-events-none fixed z-50 block overflow-hidden rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700 ${props.previewClass ?? "max-h-80 w-max max-w-sm font-mono text-xs whitespace-pre-wrap sm:max-h-112 lg:max-w-lg"}`} 121 121 + > 122 122 + {props.children} 123 123 + </div> 124 124 + </Portal> 125 125 + </Show> 126 126 + </span> 127 127 + ); 128 128 + }; 129 129 + 130 130 + export default HoverCard;

+108

src/components/hover-card/did.tsx

··· 1 1 + import { getPdsEndpoint, type DidDocument } from "@atcute/identity"; 2 2 + import { createSignal, Show } from "solid-js"; 3 3 + import { resolveDidDoc } from "../../utils/api"; 4 4 + import HoverCard from "./base"; 5 5 + 6 6 + interface DidHoverCardProps { 7 7 + did: string; 8 8 + newTab?: boolean; 9 9 + class?: string; 10 10 + labelClass?: string; 11 11 + trigger?: any; 12 12 + hoverDelay?: number; 13 13 + } 14 14 + 15 15 + interface DidInfo { 16 16 + handle?: string; 17 17 + pds?: string; 18 18 + loading: boolean; 19 19 + error?: string; 20 20 + } 21 21 + 22 22 + const didCache = new Map<string, DidInfo>(); 23 23 + 24 24 + const prefetchDid = async (did: string) => { 25 25 + if (didCache.has(did)) return; 26 26 + 27 27 + didCache.set(did, { loading: true }); 28 28 + 29 29 + try { 30 30 + const doc: DidDocument = await resolveDidDoc(did as `did:${string}:${string}`); 31 31 + 32 32 + const handle = doc.alsoKnownAs?.find((aka) => aka.startsWith("at://"))?.replace("at://", ""); 33 33 + 34 34 + const pds = getPdsEndpoint(doc)?.replace("https://", "").replace("http://", ""); 35 35 + 36 36 + didCache.set(did, { handle, pds, loading: false }); 37 37 + } catch (err: any) { 38 38 + didCache.set(did, { loading: false, error: err.message || "Failed to resolve" }); 39 39 + } 40 40 + }; 41 41 + 42 42 + const DidHoverCard = (props: DidHoverCardProps) => { 43 43 + const [didInfo, setDidInfo] = createSignal<DidInfo | null>(null); 44 44 + 45 45 + const handlePrefetch = () => { 46 46 + prefetchDid(props.did); 47 47 + 48 48 + const cached = didCache.get(props.did); 49 49 + setDidInfo(cached || { loading: true }); 50 50 + 51 51 + if (!cached || cached.loading) { 52 52 + const pollInterval = setInterval(() => { 53 53 + const updated = didCache.get(props.did); 54 54 + if (updated && !updated.loading) { 55 55 + setDidInfo(updated); 56 56 + clearInterval(pollInterval); 57 57 + } 58 58 + }, 100); 59 59 + 60 60 + setTimeout(() => clearInterval(pollInterval), 10000); 61 61 + } 62 62 + }; 63 63 + 64 64 + return ( 65 65 + <HoverCard 66 66 + href={`/at://${props.did}`} 67 67 + label={props.did} 68 68 + newTab={props.newTab} 69 69 + onHover={handlePrefetch} 70 70 + hoverDelay={props.hoverDelay ?? 300} 71 71 + trigger={props.trigger} 72 72 + class={props.class} 73 73 + labelClass={props.labelClass} 74 74 + previewClass="w-max max-w-xs font-sans text-sm" 75 75 + > 76 76 + <Show when={didInfo()?.loading}> 77 77 + <div class="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400"> 78 78 + <span class="iconify lucide--loader-circle animate-spin" /> 79 79 + Loading... 80 80 + </div> 81 81 + </Show> 82 82 + <Show when={didInfo()?.error}> 83 83 + <div class="text-sm text-red-500 dark:text-red-400">{didInfo()?.error}</div> 84 84 + </Show> 85 85 + <Show when={!didInfo()?.loading && !didInfo()?.error}> 86 86 + <div class="flex flex-col gap-1"> 87 87 + <Show when={didInfo()?.handle}> 88 88 + <div class="flex items-center gap-2"> 89 89 + <span class="iconify lucide--at-sign text-neutral-500 dark:text-neutral-400" /> 90 90 + <span>{didInfo()?.handle}</span> 91 91 + </div> 92 92 + </Show> 93 93 + <Show when={didInfo()?.pds}> 94 94 + <div class="flex items-center gap-2"> 95 95 + <span class="iconify lucide--hard-drive text-neutral-500 dark:text-neutral-400" /> 96 96 + <span>{didInfo()?.pds}</span> 97 97 + </div> 98 98 + </Show> 99 99 + <Show when={!didInfo()?.handle && !didInfo()?.pds}> 100 100 + <div class="text-neutral-500 dark:text-neutral-400">No info available</div> 101 101 + </Show> 102 102 + </div> 103 103 + </Show> 104 104 + </HoverCard> 105 105 + ); 106 106 + }; 107 107 + 108 108 + export default DidHoverCard;

+119

src/components/hover-card/record.tsx

··· 1 1 + import { Client, simpleFetchHandler } from "@atcute/client"; 2 2 + import { ActorIdentifier } from "@atcute/lexicons"; 3 3 + import { createSignal, Show } from "solid-js"; 4 4 + import { getPDS } from "../../utils/api"; 5 5 + import { JSONValue } from "../json"; 6 6 + import HoverCard from "./base"; 7 7 + 8 8 + interface RecordHoverCardProps { 9 9 + uri: string; 10 10 + newTab?: boolean; 11 11 + class?: string; 12 12 + labelClass?: string; 13 13 + trigger?: any; 14 14 + hoverDelay?: number; 15 15 + } 16 16 + 17 17 + const recordCache = new Map<string, { value: unknown; loading: boolean; error?: string }>(); 18 18 + 19 19 + const parseAtUri = (uri: string) => { 20 20 + const match = uri.match(/^at:\/\/([^/]+)\/([^/]+)\/(.+)$/); 21 21 + if (!match) return null; 22 22 + return { repo: match[1], collection: match[2], rkey: match[3] }; 23 23 + }; 24 24 + 25 25 + const prefetchRecord = async (uri: string) => { 26 26 + if (recordCache.has(uri)) return; 27 27 + 28 28 + const parsed = parseAtUri(uri); 29 29 + if (!parsed) return; 30 30 + 31 31 + recordCache.set(uri, { value: null, loading: true }); 32 32 + 33 33 + try { 34 34 + const pds = await getPDS(parsed.repo); 35 35 + const rpc = new Client({ handler: simpleFetchHandler({ service: pds }) }); 36 36 + const res = await rpc.get("com.atproto.repo.getRecord", { 37 37 + params: { 38 38 + repo: parsed.repo as ActorIdentifier, 39 39 + collection: parsed.collection as `${string}.${string}.${string}`, 40 40 + rkey: parsed.rkey, 41 41 + }, 42 42 + }); 43 43 + 44 44 + if (!res.ok) { 45 45 + recordCache.set(uri, { value: null, loading: false, error: res.data.error }); 46 46 + return; 47 47 + } 48 48 + 49 49 + recordCache.set(uri, { value: res.data.value, loading: false }); 50 50 + } catch (err: any) { 51 51 + recordCache.set(uri, { value: null, loading: false, error: err.message || "Failed to fetch" }); 52 52 + } 53 53 + }; 54 54 + 55 55 + const RecordHoverCard = (props: RecordHoverCardProps) => { 56 56 + const [record, setRecord] = createSignal<{ 57 57 + value: unknown; 58 58 + loading: boolean; 59 59 + error?: string; 60 60 + } | null>(null); 61 61 + 62 62 + const parsed = () => parseAtUri(props.uri); 63 63 + 64 64 + const handlePrefetch = () => { 65 65 + prefetchRecord(props.uri); 66 66 + 67 67 + // Start polling for cache updates 68 68 + const cached = recordCache.get(props.uri); 69 69 + setRecord(cached || { value: null, loading: true }); 70 70 + 71 71 + if (!cached || cached.loading) { 72 72 + const pollInterval = setInterval(() => { 73 73 + const updated = recordCache.get(props.uri); 74 74 + if (updated && !updated.loading) { 75 75 + setRecord(updated); 76 76 + clearInterval(pollInterval); 77 77 + } 78 78 + }, 100); 79 79 + 80 80 + setTimeout(() => clearInterval(pollInterval), 10000); 81 81 + } 82 82 + }; 83 83 + 84 84 + return ( 85 85 + <HoverCard 86 86 + href={`/${props.uri}`} 87 87 + label={props.uri} 88 88 + newTab={props.newTab} 89 89 + onHover={handlePrefetch} 90 90 + hoverDelay={props.hoverDelay ?? 300} 91 91 + trigger={props.trigger} 92 92 + class={props.class} 93 93 + labelClass={props.labelClass} 94 94 + > 95 95 + <Show when={record()?.loading}> 96 96 + <div class="flex items-center gap-2 font-sans text-sm text-neutral-500 dark:text-neutral-400"> 97 97 + <span class="iconify lucide--loader-circle animate-spin" /> 98 98 + Loading... 99 99 + </div> 100 100 + </Show> 101 101 + <Show when={record()?.error}> 102 102 + <div class="font-sans text-sm text-red-500 dark:text-red-400">{record()?.error}</div> 103 103 + </Show> 104 104 + <Show when={record()?.value && !record()?.loading}> 105 105 + <div class="font-mono text-xs wrap-break-word"> 106 106 + <JSONValue 107 107 + data={record()?.value as any} 108 108 + repo={parsed()?.repo || ""} 109 109 + truncate 110 110 + newTab 111 111 + hideBlobs 112 112 + /> 113 113 + </div> 114 114 + </Show> 115 115 + </HoverCard> 116 116 + ); 117 117 + }; 118 118 + 119 119 + export default RecordHoverCard;

+7 -8

src/views/car/explore.tsx

··· 528 528 529 529 530 530 531 531 - 532 532 - 533 533 - 534 534 - 535 535 - 536 536 - 537 537 - 531 531 + }} 532 532 + class="flex w-full items-baseline gap-1 text-left" 533 533 + > 534 534 + <span class="max-w-full shrink-0 truncate text-sm text-blue-500 dark:text-blue-400"> 535 535 + {entry.key} 536 536 + </span> 537 537 + <span class="truncate text-xs text-neutral-500 dark:text-neutral-400" dir="rtl"> 538 538 539 539 540 540 ··· 544 544 </Show> 545 545 </button> 546 546 } 547 547 - previewClass="max-h-80 w-max max-w-sm text-xs whitespace-pre-wrap sm:max-h-112 lg:max-w-lg" 548 547 > 549 548 <JSONValue data={entry.record} repo={props.archive.did} truncate hideBlobs /> 550 549 </HoverCard>

+126 -2

src/auth/account.tsx

··· 1 1 import { Did } from "@atcute/lexicons"; 2 2 import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client"; 3 3 import { A } from "@solidjs/router"; 4 4 - import { createSignal, For, onMount, Show } from "solid-js"; 4 4 + import { createEffect, createSignal, For, onMount, Show } from "solid-js"; 5 5 import { createStore, produce } from "solid-js/store"; 6 6 import { ActionMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx"; 7 7 import { Modal } from "../components/modal.jsx"; ··· 17 17 retrieveSession, 18 18 saveSessionToStorage, 19 19 } from "./session-manager.js"; 20 20 - import { agent, openManager, sessions, setAgent, setOpenManager, setSessions } from "./state.js"; 20 20 + import { 21 21 + agent, 22 22 + openManager, 23 23 + pendingPermissionEdit, 24 24 + sessions, 25 25 + setAgent, 26 26 + setOpenManager, 27 27 + setPendingPermissionEdit, 28 28 + setSessions, 29 29 + } from "./state.js"; 21 30 22 31 const AccountDropdown = (props: { did: Did; onEditPermissions: (did: Did) => void }) => { 23 32 const removeSession = async (did: Did) => { ··· 73 82 beforeRedirect: (account) => resumeSession(account as Did), 74 83 }); 75 84 85 85 + createEffect(() => { 86 86 + const pending = pendingPermissionEdit(); 87 87 + if (pending) { 88 88 + scopeFlow.initiateWithRedirect(pending); 89 89 + setPendingPermissionEdit(null); 90 90 + } 91 91 + }); 92 92 + 76 93 const handleAccountClick = async (did: Did) => { 77 94 try { 78 95 await resumeSession(did); 96 96 + 97 97 + 98 98 + 99 99 + 100 100 + 101 101 + 102 102 + 103 103 + 104 104 + 105 105 + 106 106 + 107 107 + 108 108 + 109 109 + 110 110 + 111 111 + 112 112 + 113 113 + 114 114 + 115 115 + 116 116 + 117 117 + 118 118 + 119 119 + 120 120 + 121 121 + 122 122 + 123 123 + 124 124 + 125 125 + setShowingAddAccount(false); 126 126 + scopeFlow.cancel(); 127 127 + }} 128 128 + alignTop 129 129 + contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-full max-w-sm rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 mx-3 shadow-md dark:border-neutral-700" 130 130 + > 131 131 + <Show when={!scopeFlow.showScopeSelector() && !showingAddAccount()}> 132 132 + <div class="mb-2 px-1 font-semibold"> 133 133 + <span>Switch account</span> 134 134 + </div> 135 135 + <div class="mb-3 max-h-80 overflow-y-auto md:max-h-100"> 136 136 + <For each={Object.keys(sessions)}> 137 137 + {(did) => ( 138 138 + <div class="flex w-full items-center justify-between"> 139 139 + <A 140 140 + href={`/at://${did}`} 141 141 + onClick={() => setOpenManager(false)} 142 142 + class="flex items-center rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 143 143 + > 144 144 + <Show 145 145 + when={avatars[did as Did]} 146 146 + fallback={<span class="iconify lucide--user-round m-0.5 size-5"></span>} 147 147 + > 148 148 + <img src={getThumbnailUrl(avatars[did as Did])} class="size-6 rounded-full" /> 149 149 + </Show> 150 150 + </A> 151 151 + <button 152 152 + class="flex grow items-center justify-between gap-1 truncate rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 153 153 + onclick={() => handleAccountClick(did as Did)} 154 154 + > 155 155 + <span class="truncate">{sessions[did]?.handle || did}</span> 156 156 + <Show when={did === agent()?.sub && sessions[did].signedIn}> 157 157 + <span class="iconify lucide--circle-check shrink-0 text-blue-500 dark:text-blue-400"></span> 158 158 + </Show> 159 159 + <Show when={!sessions[did].signedIn}> 160 160 + <span class="iconify lucide--circle-alert shrink-0 text-red-500 dark:text-red-400"></span> 161 161 + </Show> 162 162 + </button> 163 163 + <AccountDropdown 164 164 + did={did as Did} 165 165 + onEditPermissions={(accountDid) => scopeFlow.initiateWithRedirect(accountDid)} 166 166 + /> 167 167 + </div> 168 168 + )} 169 169 + </For> 170 170 + </div> 171 171 + <button 172 172 + onclick={() => setShowingAddAccount(true)} 173 173 + class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700" 174 174 + > 175 175 + <span class="iconify lucide--plus"></span> 176 176 + <span>Add account</span> 177 177 + </button> 178 178 + </Show> 179 179 + 180 180 + <Show when={showingAddAccount() && !scopeFlow.showScopeSelector()}> 181 181 + <Login onCancel={() => setShowingAddAccount(false)} /> 182 182 + </Show> 183 183 + 184 184 + <Show when={scopeFlow.showScopeSelector()}> 185 185 + <ScopeSelector 186 186 + initialScopes={parseScopeString( 187 187 + sessions[scopeFlow.pendingAccount()]?.grantedScopes || "", 188 188 + )} 189 189 + onConfirm={scopeFlow.complete} 190 190 + onCancel={() => { 191 191 + scopeFlow.cancel(); 192 192 + setShowingAddAccount(false); 193 193 + }} 194 194 + /> 195 195 + </Show> 196 196 + </Modal> 197 197 + <button 198 198 + onclick={() => setOpenManager(true)} 199 199 + class={`flex items-center rounded-md ${agent() && avatars[agent()!.sub] ? "p-1.25" : "p-1.5"} hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`} 200 200 + > 201 201 + {agent() && avatars[agent()!.sub] ? 202 202 + <img src={getThumbnailUrl(avatars[agent()!.sub])} class="size-5 rounded-full" />

+38

src/components/permission-button.tsx

··· 1 1 + import { JSX } from "solid-js"; 2 2 + import { hasUserScope } from "../auth/scope-utils"; 3 3 + import { showPermissionPrompt } from "./permission-prompt"; 4 4 + import Tooltip from "./tooltip"; 5 5 + 6 6 + export interface PermissionButtonProps { 7 7 + scope: "create" | "update" | "delete" | "blob"; 8 8 + tooltip: string; 9 9 + class?: string; 10 10 + disabledClass?: string; 11 11 + onClick: () => void; 12 12 + children: JSX.Element; 13 13 + } 14 14 + 15 15 + export const PermissionButton = (props: PermissionButtonProps) => { 16 16 + const hasPermission = () => hasUserScope(props.scope); 17 17 + 18 18 + const handleClick = () => { 19 19 + if (hasPermission()) { 20 20 + props.onClick(); 21 21 + } else { 22 22 + showPermissionPrompt(props.scope); 23 23 + } 24 24 + }; 25 25 + 26 26 + const baseClass = 27 27 + props.class || 28 28 + "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"; 29 29 + const disabledClass = props.disabledClass || "flex items-center rounded-sm p-1.5 opacity-40"; 30 30 + 31 31 + return ( 32 32 + <Tooltip text={hasPermission() ? props.tooltip : `${props.tooltip} (permission required)`}> 33 33 + <button class={hasPermission() ? baseClass : disabledClass} onclick={handleClick}> 34 34 + {props.children} 35 35 + </button> 36 36 + </Tooltip> 37 37 + ); 38 38 + };

+52

src/components/permission-prompt.tsx

··· 1 1 + import { createSignal } from "solid-js"; 2 2 + import { GRANULAR_SCOPES } from "../auth/scope-utils"; 3 3 + import { agent, setOpenManager, setPendingPermissionEdit } from "../auth/state"; 4 4 + import { Button } from "./button"; 5 5 + import { Modal } from "./modal"; 6 6 + 7 7 + type ScopeId = "create" | "update" | "delete" | "blob"; 8 8 + 9 9 + const [requestedScope, setRequestedScope] = createSignal<ScopeId | null>(null); 10 10 + 11 11 + export const showPermissionPrompt = (scope: ScopeId) => { 12 12 + setRequestedScope(scope); 13 13 + }; 14 14 + 15 15 + export const PermissionPromptContainer = () => { 16 16 + const scopeLabel = () => { 17 17 + const scope = GRANULAR_SCOPES.find((s) => s.id === requestedScope()); 18 18 + return scope?.label.toLowerCase() || requestedScope(); 19 19 + }; 20 20 + 21 21 + const handleEditPermissions = () => { 22 22 + setRequestedScope(null); 23 23 + if (agent()) { 24 24 + setPendingPermissionEdit(agent()!.sub); 25 25 + setOpenManager(true); 26 26 + } 27 27 + }; 28 28 + 29 29 + return ( 30 30 + <Modal 31 31 + open={requestedScope() !== null} 32 32 + onClose={() => setRequestedScope(null)} 33 33 + contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[calc(100%-2rem)] max-w-md rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700" 34 34 + > 35 35 + <h2 class="mb-2 font-semibold">Permission required</h2> 36 36 + <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400"> 37 37 + You need the "{scopeLabel()}" permission to perform this action. 38 38 + </p> 39 39 + <div class="flex justify-end gap-2"> 40 40 + <Button onClick={() => setRequestedScope(null)}>Cancel</Button> 41 41 + <Button 42 42 + onClick={handleEditPermissions} 43 43 + classList={{ 44 44 + "bg-blue-500! text-white! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400! border-none!": true, 45 45 + }} 46 46 + > 47 47 + Edit permissions 48 48 + </Button> 49 49 + </div> 50 50 + </Modal> 51 51 + ); 52 52 + };

+229 -7

src/components/create/index.tsx

··· 235 235 onClose={() => setOpenDialog(false)} 236 236 closeOnClick={false} 237 237 nonBlocking={isMinimized()} 238 238 + alignTop 239 239 + contentClass={`dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700 ${isMaximized() ? "w-[calc(100%-1rem)] max-w-7xl h-[85vh]" : "w-[calc(100%-1rem)] max-w-3xl h-[65vh]"} ${isMinimized() ? "hidden" : ""}`} 238 240 > 239 239 - <div 240 240 - style="transform: translateX(-50%) translateZ(0);" 241 241 - classList={{ 242 242 - "dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto absolute top-18 left-1/2 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-all duration-200 dark:border-neutral-700 starting:opacity-0": true, 243 243 - "w-[calc(100%-1rem)] max-w-3xl h-[65vh]": !isMaximized(), 244 244 - "w-[calc(100%-1rem)] max-w-7xl h-[85vh]": isMaximized(), 245 245 - hidden: isMinimized(), 241 241 + <div class="mb-2 flex w-full justify-between text-base"> 242 242 + <div class="flex items-center gap-2"> 243 243 + <span class="font-semibold select-none"> 244 244 + {props.create ? "Creating" : "Editing"} record 245 245 + </span> 246 246 + </div> 247 247 + <div class="flex items-center gap-1"> 248 248 + <button 249 249 + type="button" 250 250 + onclick={() => setIsMinimized(true)} 251 251 + class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 252 252 + > 253 253 + <span class="iconify lucide--minus"></span> 254 254 + </button> 255 255 + <button 256 256 + type="button" 257 257 + onclick={() => setIsMaximized(!isMaximized())} 258 258 + class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 259 259 + > 260 260 + <span 261 261 + class={`iconify ${isMaximized() ? "lucide--minimize-2" : "lucide--maximize-2"}`} 262 262 + ></span> 263 263 + </button> 264 264 + <button 265 265 + id="close" 266 266 + onclick={() => setOpenDialog(false)} 267 267 + class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 268 268 + > 269 269 + <span class="iconify lucide--x"></span> 270 270 + </button> 271 271 + </div> 272 272 + </div> 273 273 + <form ref={formRef} class="flex min-h-0 flex-1 flex-col gap-y-2"> 274 274 + <Show when={props.create}> 275 275 + <div class="flex flex-wrap items-center gap-1 text-sm"> 276 276 + <span>at://</span> 277 277 + <select 278 278 + class="dark:bg-dark-100 max-w-40 truncate rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 select-none focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400" 279 279 + name="repo" 280 280 + id="repo" 281 281 + > 282 282 + <For each={Object.keys(sessions)}> 283 283 + {(session) => ( 284 284 + <option value={session} selected={session === agent()?.sub}> 285 285 + {sessions[session].handle ?? session} 286 286 + </option> 287 287 + )} 288 288 + </For> 289 289 + </select> 290 290 + <span>/</span> 291 291 + <TextInput 292 292 + id="collection" 293 293 + name="collection" 294 294 + placeholder="Collection (default: $type)" 295 295 + class={`w-40 placeholder:text-xs lg:w-52 ${collectionError() ? "border-red-500 focus:outline-red-500 dark:border-red-400 dark:focus:outline-red-400" : ""}`} 296 296 + onInput={(e) => { 297 297 + const value = e.currentTarget.value; 298 298 + if (!value || isNsid(value)) setCollectionError(""); 299 299 + else 300 300 + setCollectionError( 301 301 + "Invalid collection: use reverse domain format (e.g. app.bsky.feed.post)", 302 302 + ); 303 303 + }} 304 304 + /> 305 305 + <span>/</span> 306 306 + <TextInput 307 307 + id="rkey" 308 308 + name="rkey" 309 309 + placeholder="Record key (default: TID)" 310 310 + class={`w-40 placeholder:text-xs lg:w-52 ${rkeyError() ? "border-red-500 focus:outline-red-500 dark:border-red-400 dark:focus:outline-red-400" : ""}`} 311 311 + onInput={(e) => { 312 312 + const value = e.currentTarget.value; 313 313 + if (!value || isRecordKey(value)) setRkeyError(""); 314 314 + else setRkeyError("Invalid record key: 1-512 chars, use a-z A-Z 0-9 . _ ~ : -"); 315 315 + }} 316 316 + /> 317 317 + </div> 318 318 + <Show when={collectionError() || rkeyError()}> 319 319 + <div class="text-xs text-red-500 dark:text-red-400"> 320 320 + <div>{collectionError()}</div> 321 321 + <div>{rkeyError()}</div> 322 322 + </div> 323 323 + </Show> 324 324 + </Show> 325 325 + <div class="min-h-0 flex-1"> 326 326 + <Suspense 327 327 + fallback={ 328 328 + <div class="flex h-full items-center justify-center"> 329 329 + <span class="iconify lucide--loader-circle animate-spin text-xl"></span> 330 330 + </div> 331 331 + } 332 332 + > 333 333 + <Editor 334 334 + content={JSON.stringify( 335 335 + !props.create ? props.record 336 336 + : params.rkey ? placeholder() 337 337 + : defaultPlaceholder(), 338 338 + null, 339 339 + 2, 340 340 + )} 341 341 + /> 342 342 + </Suspense> 343 343 + </div> 344 344 + <div class="flex flex-col gap-2"> 345 345 + <Show when={notice()}> 346 346 + <div class="text-sm text-red-500 dark:text-red-400">{notice()}</div> 347 347 + </Show> 348 348 + <div class="flex justify-between gap-2"> 349 349 + <div class="relative" ref={insertMenuRef}> 350 350 + <Button onClick={() => setOpenInsertMenu(!openInsertMenu())}> 351 351 + <span class="iconify lucide--plus"></span> 352 352 + <span>Add</span> 353 353 + </Button> 354 354 + <Show when={openInsertMenu()}> 355 355 + <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute bottom-full left-0 z-10 mb-1 flex w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 shadow-md dark:border-neutral-700"> 356 356 + <MenuItem 357 357 + icon="lucide--id-card" 358 358 + label="Insert DID" 359 359 + onClick={insertDidFromHandle} 360 360 + /> 361 361 + <MenuItem 362 362 + icon="lucide--clock" 363 363 + label="Insert timestamp" 364 364 + onClick={insertTimestamp} 365 365 + /> 366 366 + <button 367 367 + type="button" 368 368 + class={ 369 369 + hasUserScope("blob") ? 370 370 + "flex items-center gap-2 rounded-md p-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 371 371 + : "flex items-center gap-2 rounded-md p-2 text-left text-xs opacity-40" 372 372 + } 373 373 + onClick={() => { 374 374 + if (hasUserScope("blob")) { 375 375 + setOpenInsertMenu(false); 376 376 + blobInput.click(); 377 377 + } 378 378 + }} 379 379 + > 380 380 + <span class="iconify lucide--upload shrink-0"></span> 381 381 + <span>Upload blob{hasUserScope("blob") ? "" : " (permission needed)"}</span> 382 382 + </button> 383 383 + </div> 384 384 + </Show> 385 385 + <input 386 386 + type="file" 387 387 + id="blob" 388 388 + class="sr-only" 389 389 + ref={blobInput} 390 390 + onChange={(e) => { 391 391 + if (e.target.files !== null) setOpenUpload(true); 392 392 + }} 393 393 + /> 394 394 + </div> 395 395 + <Modal 396 396 + open={openUpload()} 397 397 + onClose={() => setOpenUpload(false)} 398 398 + closeOnClick={false} 399 399 + contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[20rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700" 400 400 + > 401 401 + <FileUpload 402 402 + file={blobInput.files![0]} 403 403 + blobInput={blobInput} 404 404 + onClose={() => setOpenUpload(false)} 405 405 + /> 406 406 + </Modal> 407 407 + <Modal 408 408 + open={openHandleDialog()} 409 409 + onClose={() => setOpenHandleDialog(false)} 410 410 + closeOnClick={false} 411 411 + contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[20rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700" 412 412 + > 413 413 + <HandleInput onClose={() => setOpenHandleDialog(false)} /> 414 414 + </Modal> 415 415 + <Modal 416 416 + open={openConfirmDialog()} 417 417 + onClose={() => setOpenConfirmDialog(false)} 418 418 + closeOnClick={false} 419 419 + contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[24rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700" 420 420 + > 421 421 + <ConfirmSubmit 422 422 + isCreate={props.create} 423 423 + onConfirm={(validate, recreate) => { 424 424 + if (props.create) { 425 425 + createRecord(validate); 426 426 + } else { 427 427 + editRecord(validate, recreate); 428 428 + } 429 429 + }} 430 430 + onClose={() => setOpenConfirmDialog(false)} 431 431 + /> 432 432 + </Modal> 433 433 + <div class="flex items-center justify-end gap-2"> 434 434 + <Button onClick={() => setOpenConfirmDialog(true)}> 435 435 + {props.create ? "Create..." : "Edit..."} 436 436 + </Button> 437 437 + </div> 438 438 + </div> 439 439 + </div> 440 440 + </form> 441 441 + </Modal> 442 442 + <Show when={isMinimized() && openDialog()}> 443 443 + <button 444 444 + 445 445 + 446 446 + 447 447 + 448 448 + 449 449 + 450 450 + 451 451 + 452 452 + 453 453 + 454 454 + 455 455 + 456 456 + 457 457 + 458 458 + 459 459 + 460 460 + <button 461 461 + class={ 462 462 + hasPermission() ? 463 463 + `flex items-center p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 ${props.create ? "rounded-md" : "rounded-sm"}` 464 464 + : `flex items-center p-1.5 opacity-40 ${props.create ? "rounded-md" : "rounded-sm"}` 465 465 + } 466 466 + onclick={() => { 467 467 + if (hasPermission()) {

+46 -1

src/components/modal.tsx

··· 5 5 onClose?: () => void; 6 6 closeOnClick?: boolean; 7 7 nonBlocking?: boolean; 8 8 + alignTop?: boolean; 9 9 + contentClass?: string; 8 10 } 9 11 10 12 export const Modal = (props: ModalProps) => { ··· 12 14 <Show when={props.open}> 13 15 <div 14 16 data-modal 15 15 - class="fixed inset-0 z-50 h-full max-h-none w-full max-w-none bg-transparent text-neutral-900 dark:text-neutral-200" 17 17 + class="fixed inset-0 z-50 flex h-full max-h-none w-full max-w-none justify-center bg-transparent text-neutral-900 dark:text-neutral-200" 16 18 classList={{ 17 19 "pointer-events-none": props.nonBlocking, 20 20 + "items-start pt-18": props.alignTop, 21 21 + "items-center": !props.alignTop, 18 22 }} 19 23 ref={(node) => { 20 24 const handleEscape = (e: KeyboardEvent) => { 25 25 + 26 26 + 27 27 + 28 28 + 29 29 + 30 30 + 31 31 + 32 32 + 33 33 + 34 34 + 35 35 + 36 36 + 37 37 + 38 38 + 39 39 + 40 40 + 41 41 + 42 42 + 43 43 + 44 44 + 45 45 + 46 46 + 47 47 + 48 48 + 49 49 + 50 50 + 51 51 + 52 52 + 53 53 + 54 54 + 55 55 + } 56 56 + }} 57 57 + > 58 58 + <div 59 59 + class={`transition-all starting:scale-95 starting:opacity-0 ${props.contentClass ?? ""}`} 60 60 + > 61 61 + {props.children} 62 62 + </div> 63 63 + </div> 64 64 + </Show> 65 65 + );

+20 -6

src/views/record.tsx

··· 415 415 416 416 417 417 418 418 - 418 418 + > 419 419 <span class="iconify lucide--trash-2"></span> 420 420 </PermissionButton> 421 421 - <Modal open={openDelete()} onClose={() => setOpenDelete(false)}> 422 422 - <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0"> 423 423 - <h2 class="mb-2 font-semibold">Delete this record?</h2> 424 424 - <div class="flex justify-end gap-2"> 425 425 - <Button onClick={() => setOpenDelete(false)}>Cancel</Button> 421 421 + <Modal 422 422 + open={openDelete()} 423 423 + onClose={() => setOpenDelete(false)} 424 424 + contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700" 425 425 + > 426 426 + <h2 class="mb-2 font-semibold">Delete this record?</h2> 427 427 + <div class="flex justify-end gap-2"> 428 428 + <Button onClick={() => setOpenDelete(false)}>Cancel</Button> 429 429 + <Button 430 430 + onClick={deleteRecord} 431 431 + classList={{ 432 432 + "bg-red-500! border-none! text-white! hover:bg-red-400! active:bg-red-400!": true, 433 433 + }} 434 434 + > 435 435 + Delete 436 436 + </Button> 437 437 + </div> 438 438 + </Modal> 439 439 + </Show>

+365 -315

src/views/stream/index.tsx

··· 3 3 import { A, useLocation, useSearchParams } from "@solidjs/router"; 4 4 import { createSignal, For, onCleanup, onMount, Show } from "solid-js"; 5 5 import { Button } from "../../components/button"; 6 6 + import DidHoverCard from "../../components/hover-card/did"; 6 7 import { JSONValue } from "../../components/json"; 7 7 - import { StickyOverlay } from "../../components/sticky"; 8 8 import { TextInput } from "../../components/text-input"; 9 9 + import { addToClipboard } from "../../utils/copy"; 10 10 + import { getStreamType, STREAM_CONFIGS, STREAM_TYPES, StreamType } from "./config"; 9 11 import { StreamStats, StreamStatsPanel } from "./stats"; 10 12 11 13 const LIMIT = 20; 12 12 - type Parameter = { name: string; param: string | string[] | undefined }; 13 14 14 14 - const StreamView = () => { 15 15 + const TYPE_COLORS: Record<string, string> = { 16 16 + create: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300", 17 17 + update: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300", 18 18 + delete: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300", 19 19 + identity: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300", 20 20 + account: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300", 21 21 + sync: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300", 22 22 + }; 23 23 + 24 24 + const StreamRecordItem = (props: { record: any; streamType: StreamType }) => { 25 25 + const [expanded, setExpanded] = createSignal(false); 26 26 + const config = () => STREAM_CONFIGS[props.streamType]; 27 27 + const info = () => config().parseRecord(props.record); 28 28 + 29 29 + const displayType = () => { 30 30 + const i = info(); 31 31 + return i.type === "commit" || i.type === "link" ? i.action : i.type; 32 32 + }; 33 33 + 34 34 + const copyRecord = (e: MouseEvent) => { 35 35 + e.stopPropagation(); 36 36 + addToClipboard(JSON.stringify(props.record, null, 2)); 37 37 + }; 38 38 + 39 39 + return ( 40 40 + <div class="flex flex-col gap-2"> 41 41 + <div class="flex items-start gap-1"> 42 42 + <button 43 43 + type="button" 44 44 + onclick={() => setExpanded(!expanded())} 45 45 + class="dark:hover:bg-dark-200 flex min-w-0 flex-1 items-start gap-2 rounded p-1 text-left hover:bg-neutral-200/70" 46 46 + > 47 47 + <span class="mt-0.5 shrink-0 text-neutral-400 dark:text-neutral-500"> 48 48 + {expanded() ? 49 49 + <span class="iconify lucide--chevron-down"></span> 50 50 + : <span class="iconify lucide--chevron-right"></span>} 51 51 + </span> 52 52 + <div class="flex min-w-0 flex-1 flex-col gap-0.5"> 53 53 + <div class="flex items-center gap-x-1.5 sm:gap-x-2"> 54 54 + <span 55 55 + class={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${TYPE_COLORS[displayType()!] || "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300"}`} 56 56 + > 57 57 + {displayType()} 58 58 + </span> 59 59 + <Show when={info().collection && info().collection !== info().type}> 60 60 + <span class="min-w-0 truncate text-neutral-600 dark:text-neutral-300"> 61 61 + {info().collection} 62 62 + </span> 63 63 + </Show> 64 64 + <Show when={info().rkey}> 65 65 + <span class="max-w-full shrink-0 truncate text-neutral-400 dark:text-neutral-500"> 66 66 + {info().rkey} 67 67 + </span> 68 68 + </Show> 69 69 + </div> 70 70 + <div class="flex flex-col gap-x-2 gap-y-0.5 text-xs text-neutral-500 sm:flex-row sm:items-center dark:text-neutral-400"> 71 71 + <Show when={info().did}> 72 72 + <span class="w-fit" onclick={(e) => e.stopPropagation()}> 73 73 + <DidHoverCard newTab did={info().did!} /> 74 74 + </span> 75 75 + </Show> 76 76 + <Show when={info().time}> 77 77 + <span>{info().time}</span> 78 78 + </Show> 79 79 + </div> 80 80 + </div> 81 81 + </button> 82 82 + <Show when={expanded()}> 83 83 + <button 84 84 + type="button" 85 85 + onclick={copyRecord} 86 86 + class="flex size-6 shrink-0 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-200 hover:text-neutral-600 active:bg-neutral-300 sm:size-7 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:active:bg-neutral-600" 87 87 + > 88 88 + <span class="iconify lucide--copy"></span> 89 89 + </button> 90 90 + </Show> 91 91 + </div> 92 92 + <Show when={expanded()}> 93 93 + <div class="ml-6.5"> 94 94 + <div class="w-full text-xs wrap-anywhere whitespace-pre-wrap md:w-2xl"> 95 95 + <JSONValue newTab data={props.record} repo={info().did ?? ""} hideBlobs /> 96 96 + </div> 97 97 + </div> 98 98 + </Show> 99 99 + </div> 100 100 + ); 101 101 + }; 102 102 + 103 103 + export const StreamView = () => { 15 104 const [searchParams, setSearchParams] = useSearchParams(); 16 16 - const [parameters, setParameters] = createSignal<Parameter[]>([]); 17 17 - const streamType = useLocation().pathname === "/firehose" ? "firehose" : "jetstream"; 18 18 - const [records, setRecords] = createSignal<Array<any>>([]); 105 105 + const streamType = getStreamType(useLocation().pathname); 106 106 + const config = () => STREAM_CONFIGS[streamType]; 107 107 + 108 108 + const [records, setRecords] = createSignal<any[]>([]); 19 109 const [connected, setConnected] = createSignal(false); 20 110 const [paused, setPaused] = createSignal(false); 21 111 const [notice, setNotice] = createSignal(""); 112 112 + const [parameters, setParameters] = createSignal<{ name: string; value?: string }[]>([]); 113 113 + const [stats, setStats] = createSignal<StreamStats>({ 114 114 + totalEvents: 0, 115 115 + eventsPerSecond: 0, 22 116 117 117 + collections: {}, 118 118 + }); 119 119 + const [currentTime, setCurrentTime] = createSignal(Date.now()); 23 120 121 121 + let socket: WebSocket; 122 122 + let firehose: Firehose; 123 123 + let formRef!: HTMLFormElement; 24 124 125 125 + let rafId: number | null = null; 126 126 + let statsIntervalId: number | null = null; 127 127 + let statsUpdateIntervalId: number | null = null; 128 128 + let currentSecondEventCount = 0; 129 129 + let totalEventsCount = 0; 130 130 + let eventTypesMap: Record<string, number> = {}; 131 131 + let collectionsMap: Record<string, number> = {}; 25 132 133 133 + const addRecord = (record: any) => { 134 134 + currentSecondEventCount++; 135 135 + totalEventsCount++; 26 136 137 137 + const rawEventType = record.kind || record.$type || "unknown"; 138 138 + const eventType = rawEventType.includes("#") ? rawEventType.split("#").pop() : rawEventType; 139 139 + eventTypesMap[eventType] = (eventTypesMap[eventType] || 0) + 1; 27 140 141 141 + if (eventType !== "account" && eventType !== "identity") { 142 142 + const collection = 143 143 + record.commit?.collection || 144 144 + record.op?.path?.split("/")[0] || 145 145 + record.link?.source || 146 146 + "unknown"; 147 147 + collectionsMap[collection] = (collectionsMap[collection] || 0) + 1; 148 148 + } 28 149 29 150 30 151 ··· 36 157 37 158 38 159 160 160 + }; 39 161 162 162 + const disconnect = () => { 163 163 + if (!config().useFirehoseLib) socket?.close(); 164 164 + else firehose?.close(); 40 165 166 166 + if (rafId !== null) { 167 167 + cancelAnimationFrame(rafId); 168 168 + rafId = null; 41 169 42 170 43 171 44 172 45 173 46 174 175 175 + clearInterval(statsUpdateIntervalId); 176 176 + statsUpdateIntervalId = null; 177 177 + } 47 178 179 179 + pendingRecords = []; 180 180 + totalEventsCount = 0; 181 181 + eventTypesMap = {}; 182 182 + collectionsMap = {}; 183 183 + setConnected(false); 184 184 + setPaused(false); 185 185 + setStats((prev) => ({ ...prev, eventsPerSecond: 0 })); 186 186 + }; 48 187 188 188 + const connectStream = async (formData: FormData) => { 189 189 + setNotice(""); 190 190 + if (connected()) { 191 191 + disconnect(); 49 192 193 193 + } 194 194 + setRecords([]); 50 195 196 196 + const instance = formData.get("instance")?.toString() ?? config().defaultInstance; 197 197 + const url = config().buildUrl(instance, formData); 51 198 199 199 + // Save all form fields to URL params 200 200 + const params: Record<string, string | undefined> = { instance }; 201 201 + config().fields.forEach((field) => { 202 202 + params[field.searchParam] = formData.get(field.name)?.toString(); 203 203 + }); 204 204 + setSearchParams(params); 52 205 206 206 + // Build parameters display 207 207 + setParameters([ 208 208 + { name: "Instance", value: instance }, 209 209 + ...config() 210 210 + .fields.filter((f) => f.type !== "checkbox") 211 211 + .map((f) => ({ name: f.label, value: formData.get(f.name)?.toString() })), 212 212 + ...config() 213 213 + .fields.filter((f) => f.type === "checkbox" && formData.get(f.name) === "on") 214 214 + .map((f) => ({ name: f.label, value: "on" })), 215 215 + ]); 53 216 217 217 + setConnected(true); 218 218 + const now = Date.now(); 219 219 + setCurrentTime(now); 54 220 221 221 + totalEventsCount = 0; 222 222 + eventTypesMap = {}; 223 223 + collectionsMap = {}; 55 224 56 225 57 226 ··· 67 236 68 237 69 238 239 239 + })); 240 240 + }, 50); 70 241 242 242 + statsIntervalId = window.setInterval(() => { 243 243 + setStats((prev) => ({ ...prev, eventsPerSecond: currentSecondEventCount })); 244 244 + currentSecondEventCount = 0; 245 245 + setCurrentTime(Date.now()); 246 246 + }, 1000); 71 247 248 248 + if (!config().useFirehoseLib) { 249 249 + socket = new WebSocket(url); 250 250 + socket.addEventListener("message", (event) => { 251 251 + const rec = JSON.parse(event.data); 252 252 + const isFilteredEvent = rec.kind === "account" || rec.kind === "identity"; 253 253 + if (!isFilteredEvent || streamType !== "jetstream" || searchParams.allEvents === "on") 254 254 + addRecord(rec); 255 255 + }); 256 256 + socket.addEventListener("error", () => { 72 257 258 258 + disconnect(); 259 259 + }); 260 260 + } else { 261 261 + const cursor = formData.get("cursor")?.toString(); 262 262 + firehose = new Firehose({ 263 263 + relay: url, 264 264 + cursor: cursor, 73 265 74 266 75 267 ··· 77 269 78 270 79 271 272 272 + }); 273 273 + firehose.on("commit", (commit) => { 274 274 + for (const op of commit.ops) { 275 275 + addRecord({ 276 276 + $type: commit.$type, 277 277 + repo: commit.repo, 278 278 + seq: commit.seq, 80 279 280 280 + rev: commit.rev, 281 281 + since: commit.since, 282 282 + op: op, 283 283 + }); 284 284 + } 285 285 + }); 286 286 + firehose.on("identity", (identity) => addRecord(identity)); 287 287 + firehose.on("account", (account) => addRecord(account)); 288 288 + firehose.on("sync", (sync) => { 289 289 + addRecord({ 290 290 + $type: sync.$type, 291 291 + did: sync.did, 292 292 + rev: sync.rev, 293 293 + seq: sync.seq, 294 294 + time: sync.time, 295 295 + }); 296 296 + }); 297 297 + firehose.start(); 298 298 + } 299 299 + }; 81 300 301 301 + onMount(() => { 302 302 + if (searchParams.instance) { 303 303 + const formData = new FormData(); 304 304 + formData.append("instance", searchParams.instance.toString()); 305 305 + config().fields.forEach((field) => { 306 306 + const value = searchParams[field.searchParam]; 307 307 + if (value) formData.append(field.name, value.toString()); 308 308 + }); 309 309 + connectStream(formData); 310 310 + } 311 311 + }); 82 312 83 83 - 84 84 - 85 85 - 86 86 - 87 87 - 88 88 - 89 89 - 90 90 - 91 91 - 92 92 - 93 93 - 94 94 - 95 95 - 96 96 - 97 97 - 98 98 - 99 99 - 100 100 - 101 101 - 102 102 - 103 103 - 104 104 - 105 105 - 106 106 - 107 107 - 108 108 - 109 109 - 110 110 - 111 111 - 112 112 - 113 113 - 114 114 - 115 115 - 116 116 - 117 117 - 118 118 - 119 119 - 120 120 - 121 121 - 122 122 - 123 123 - 124 124 - 125 125 - 126 126 - 127 127 - 128 128 - 129 129 - 130 130 - 131 131 - 132 132 - 133 133 - 134 134 - 135 135 - 136 136 - 137 137 - 138 138 - 139 139 - 140 140 - 141 141 - 142 142 - 143 143 - 144 144 - 145 145 - 146 146 - 147 147 - 148 148 - 149 149 - 150 150 - 151 151 - 152 152 - 153 153 - 154 154 - 155 155 - 156 156 - 157 157 - 158 158 - 159 159 - 160 160 - 161 161 - 162 162 - 163 163 - 164 164 - 165 165 - 166 166 - 167 167 - 168 168 - 169 169 - 170 170 - 171 171 - 172 172 - 173 173 - 174 174 - 175 175 - 176 176 - 177 177 - 178 178 - 179 179 - 180 180 - 181 181 - 182 182 - 183 183 - 184 184 - 185 185 - 186 186 - 187 187 - 188 188 - 189 189 - 190 190 - 191 191 - 192 192 - 193 193 - 194 194 - 195 195 - 196 196 - 197 197 - 198 198 - 199 199 - 200 200 - 201 201 - 202 202 - 203 203 - 204 204 - 205 205 - 206 206 - 207 207 - 208 208 - 209 209 - 210 210 - 211 211 - 212 212 - 213 213 - 214 214 - 215 215 - 216 216 - 217 217 - 218 218 - 219 219 - 220 220 - 221 221 - 222 222 - 223 223 - 224 224 - 225 225 - 226 226 - 227 227 - 228 228 - 229 229 - 230 230 - 231 231 - 232 232 - 233 233 - 234 234 - 235 235 - 236 236 - 237 237 - 238 238 - 239 239 - 240 240 - 241 241 - 242 242 - 243 243 - 244 244 - 245 245 - 246 246 - 247 247 - 248 248 - 249 249 - 250 250 - 251 251 - 252 252 - 253 253 - 254 254 - 255 255 - 256 256 - 257 257 - 258 258 - 259 259 - 260 260 - 261 261 - 262 262 - 263 263 - 264 264 - 313 313 + onCleanup(() => { 314 314 + socket?.close(); 315 315 + firehose?.close(); 316 316 + if (rafId !== null) cancelAnimationFrame(rafId); 317 317 + if (statsIntervalId !== null) clearInterval(statsIntervalId); 318 318 + if (statsUpdateIntervalId !== null) clearInterval(statsUpdateIntervalId); 319 319 + }); 265 320 266 321 return ( 267 322 <> 268 268 - <Title>{streamType === "firehose" ? "Firehose" : "Jetstream"} - PDSls</Title> 269 269 - <div class="flex w-full flex-col items-center"> 323 323 + <Title>{config().label} - PDSls</Title> 324 324 + <div class="flex w-full flex-col items-center gap-2"> 325 325 + {/* Tab Navigation */} 270 326 <div class="flex gap-4 font-medium"> 271 271 - <A 272 272 - class="flex items-center gap-1 border-b-2" 273 273 - 274 274 - 275 275 - 276 276 - 277 277 - 278 278 - 279 279 - 280 280 - 281 281 - 282 282 - 327 327 + <For each={STREAM_TYPES}> 328 328 + {(type) => ( 329 329 + <A 330 330 + class="flex items-center gap-1 border-b-2" 331 331 + inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600" 332 332 + href={`/${type}`} 333 333 + > 334 334 + {STREAM_CONFIGS[type].label} 335 335 + </A> 336 336 + )} 337 337 + </For> 338 338 + </div> 283 339 284 284 - </A> 340 340 + {/* Stream Description */} 341 341 + <div class="w-full px-2 text-center"> 342 342 + <p class="text-sm text-neutral-600 dark:text-neutral-400">{config().description}</p> 285 343 </div> 344 344 + 345 345 + {/* Connection Form */} 286 346 <Show when={!connected()}> 287 287 - <form ref={formRef} class="mt-4 mb-4 flex w-full flex-col gap-1.5 px-2 text-sm"> 347 347 + <form ref={formRef} class="flex w-full flex-col gap-2 p-2 text-sm"> 288 348 <label class="flex items-center justify-end gap-x-1"> 289 289 - <span class="min-w-20">Instance</span> 349 349 + <span class="min-w-21 select-none">Instance</span> 290 350 <TextInput 351 351 + name="instance" 352 352 + value={searchParams.instance ?? config().defaultInstance} 353 353 + class="grow" 354 354 + /> 355 355 + </label> 356 356 + 357 357 + <For each={config().fields}> 358 358 + {(field) => ( 359 359 + <label class="flex items-center justify-end gap-x-1"> 360 360 + <Show when={field.type === "checkbox"}> 361 361 + <input 362 362 + type="checkbox" 363 363 + name={field.name} 364 364 + id={field.name} 365 365 + checked={searchParams[field.searchParam] === "on"} 366 366 + /> 367 367 + </Show> 368 368 + <span class="min-w-21 select-none">{field.label}</span> 369 369 + <Show when={field.type === "textarea"}> 370 370 + <textarea 371 371 + name={field.name} 372 372 + spellcheck={false} 373 373 + placeholder={field.placeholder} 374 374 + value={(searchParams[field.searchParam] as string) ?? ""} 375 375 + class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400" 376 376 + /> 377 377 + </Show> 378 378 + <Show when={field.type === "text"}> 379 379 + <TextInput 380 380 + name={field.name} 381 381 + placeholder={field.placeholder} 382 382 + value={(searchParams[field.searchParam] as string) ?? ""} 383 383 + class="grow" 384 384 + /> 385 385 + </Show> 386 386 + </label> 387 387 + )} 388 388 + </For> 291 389 292 292 - 293 293 - 294 294 - 295 295 - 296 296 - 297 297 - 298 298 - 299 299 - 300 300 - 301 301 - 302 302 - 303 303 - 304 304 - 305 305 - 306 306 - 307 307 - 308 308 - 309 309 - 310 310 - 311 311 - 312 312 - 313 313 - 314 314 - 315 315 - 316 316 - 317 317 - 318 318 - 319 319 - 320 320 - 321 321 - 322 322 - 323 323 - 324 324 - 325 325 - 326 326 - 327 327 - 328 328 - 329 329 - 330 330 - 331 331 - 332 332 - 333 333 - 334 334 - 335 335 - 336 336 - 337 337 - 338 338 - 339 339 - 340 340 - 341 341 - 342 342 - 343 343 - 344 344 - 345 345 - 346 346 - 347 347 - 348 348 - 349 349 - 390 390 + <div class="flex justify-end gap-2"> 391 391 + <Button onClick={() => connectStream(new FormData(formRef))}>Connect</Button> 392 392 + </div> 350 393 </form> 351 394 </Show> 395 395 + 396 396 + {/* Connected State */} 352 397 <Show when={connected()}> 353 353 - <StickyOverlay> 354 354 - <div class="flex w-full flex-col gap-2 p-1"> 355 355 - <div class="flex flex-col gap-1 text-sm wrap-anywhere"> 356 356 - <div class="font-semibold">Parameters</div> 357 357 - <For each={parameters()}> 358 358 - {(param) => ( 359 359 - <Show when={param.param}> 360 360 - <div class="text-sm"> 361 361 - <div class="text-xs text-neutral-500 dark:text-neutral-400"> 362 362 - {param.name} 363 363 - </div> 364 364 - <div class="text-neutral-700 dark:text-neutral-300">{param.param}</div> 365 365 - </div> 366 366 - </Show> 367 367 - )} 368 368 - </For> 369 369 - </div> 370 370 - <StreamStatsPanel stats={stats()} currentTime={currentTime()} /> 371 371 - <div class="flex justify-end gap-2"> 372 372 - <button 373 373 - type="button" 374 374 - ontouchstart={(e) => { 375 375 - e.preventDefault(); 376 376 - requestAnimationFrame(() => togglePause()); 377 377 - }} 378 378 - onclick={togglePause} 379 379 - class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 380 380 - > 381 381 - {paused() ? "Resume" : "Pause"} 382 382 - </button> 383 383 - <button 384 384 - type="button" 385 385 - ontouchstart={(e) => { 386 386 - e.preventDefault(); 387 387 - requestAnimationFrame(() => disconnect()); 388 388 - }} 389 389 - onclick={disconnect} 390 390 - class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 391 391 - > 392 392 - Disconnect 393 393 - </button> 394 394 - </div> 398 398 + <div class="flex w-full flex-col gap-2 p-2"> 399 399 + <div class="flex flex-col gap-1 text-sm wrap-anywhere"> 400 400 + <div class="font-semibold">Parameters</div> 401 401 + <For each={parameters()}> 402 402 + {(param) => ( 403 403 + <Show when={param.value}> 404 404 + <div class="text-sm"> 405 405 + <div class="text-xs text-neutral-500 dark:text-neutral-400">{param.name}</div> 406 406 + <div class="text-neutral-700 dark:text-neutral-300">{param.value}</div> 407 407 + </div> 408 408 + </Show> 409 409 + )} 410 410 + </For> 411 411 + </div> 412 412 + <StreamStatsPanel 413 413 + stats={stats()} 414 414 + currentTime={currentTime()} 415 415 + streamType={streamType} 416 416 + showAllEvents={searchParams.allEvents === "on"} 417 417 + /> 418 418 + <div class="flex justify-end gap-2"> 419 419 + <Button 420 420 + ontouchstart={(e) => { 421 421 + e.preventDefault(); 422 422 + requestAnimationFrame(() => setPaused(!paused())); 423 423 + }} 424 424 + onClick={() => setPaused(!paused())} 425 425 + > 426 426 + {paused() ? "Resume" : "Pause"} 427 427 + </Button> 428 428 + <Button 429 429 + ontouchstart={(e) => { 430 430 + e.preventDefault(); 431 431 + requestAnimationFrame(() => disconnect()); 432 432 + }} 433 433 + onClick={disconnect} 434 434 + > 435 435 + Disconnect 436 436 + </Button> 395 437 </div> 396 396 - </StickyOverlay> 438 438 + </div> 397 439 </Show> 440 440 + 441 441 + {/* Error Notice */} 398 442 <Show when={notice().length}> 399 443 <div class="text-red-500 dark:text-red-400">{notice()}</div> 400 444 </Show> 401 401 - <div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:text-sm md:w-3xl"> 402 402 - <For each={records().toReversed()}> 403 403 - {(rec) => ( 404 404 - <div class="pb-2"> 405 405 - <JSONValue data={rec} repo={rec.did ?? rec.repo} hideBlobs /> 406 406 - </div> 407 407 - )} 408 408 - </For> 409 409 - </div> 445 445 + 446 446 + {/* Records List */} 447 447 + <Show when={connected() || records().length > 0}> 448 448 + <div class="flex min-h-280 w-full flex-col gap-2 font-mono text-xs [overflow-anchor:auto] sm:text-sm"> 449 449 + <For each={records().toReversed()}> 450 450 + {(rec) => ( 451 451 + <div class="[overflow-anchor:none]"> 452 452 + <StreamRecordItem record={rec} streamType={streamType} /> 453 453 + </div> 454 454 + )} 455 455 + </For> 456 456 + <div class="h-px [overflow-anchor:auto]" /> 457 457 + </div> 458 458 + </Show> 410 459 </div> 411 460 </> 412 461 ); 462 462 + };

+221

src/views/stream/config.ts

··· 1 1 + import { localDateFromTimestamp } from "../../utils/date"; 2 2 + 3 3 + export type StreamType = "jetstream" | "firehose" | "spacedust"; 4 4 + 5 5 + export type FormField = { 6 6 + name: string; 7 7 + label: string; 8 8 + type: "text" | "textarea" | "checkbox"; 9 9 + placeholder?: string; 10 10 + searchParam: string; 11 11 + }; 12 12 + 13 13 + export type RecordInfo = { 14 14 + type: string; 15 15 + did?: string; 16 16 + collection?: string; 17 17 + rkey?: string; 18 18 + action?: string; 19 19 + time?: string; 20 20 + }; 21 21 + 22 22 + export type StreamConfig = { 23 23 + label: string; 24 24 + description: string; 25 25 + icon: string; 26 26 + defaultInstance: string; 27 27 + fields: FormField[]; 28 28 + useFirehoseLib: boolean; 29 29 + buildUrl: (instance: string, formData: FormData) => string; 30 30 + parseRecord: (record: any) => RecordInfo; 31 31 + showEventTypes: boolean; 32 32 + collectionsLabel: string; 33 33 + }; 34 34 + 35 35 + export const STREAM_CONFIGS: Record<StreamType, StreamConfig> = { 36 36 + jetstream: { 37 37 + label: "Jetstream", 38 38 + description: "A simplified event stream with support for collection and DID filtering.", 39 39 + icon: "lucide--radio-tower", 40 40 + defaultInstance: "wss://jetstream1.us-east.bsky.network/subscribe", 41 41 + useFirehoseLib: false, 42 42 + showEventTypes: true, 43 43 + collectionsLabel: "Top Collections", 44 44 + fields: [ 45 45 + { 46 46 + name: "collections", 47 47 + label: "Collections", 48 48 + type: "textarea", 49 49 + placeholder: "Comma-separated list of collections", 50 50 + searchParam: "collections", 51 51 + }, 52 52 + { 53 53 + name: "dids", 54 54 + label: "DIDs", 55 55 + type: "textarea", 56 56 + placeholder: "Comma-separated list of DIDs", 57 57 + searchParam: "dids", 58 58 + }, 59 59 + { 60 60 + name: "cursor", 61 61 + label: "Cursor", 62 62 + type: "text", 63 63 + placeholder: "Leave empty for live-tail", 64 64 + searchParam: "cursor", 65 65 + }, 66 66 + { 67 67 + name: "allEvents", 68 68 + label: "Show account and identity events", 69 69 + type: "checkbox", 70 70 + searchParam: "allEvents", 71 71 + }, 72 72 + ], 73 73 + buildUrl: (instance, formData) => { 74 74 + let url = instance + "?"; 75 75 + 76 76 + const collections = formData.get("collections")?.toString().split(","); 77 77 + collections?.forEach((c) => { 78 78 + if (c.trim().length) url += `wantedCollections=${c.trim()}&`; 79 79 + }); 80 80 + 81 81 + const dids = formData.get("dids")?.toString().split(","); 82 82 + dids?.forEach((d) => { 83 83 + if (d.trim().length) url += `wantedDids=${d.trim()}&`; 84 84 + }); 85 85 + 86 86 + const cursor = formData.get("cursor")?.toString(); 87 87 + if (cursor?.length) url += `cursor=${cursor}&`; 88 88 + 89 89 + return url.replace(/[&?]$/, ""); 90 90 + }, 91 91 + parseRecord: (rec) => { 92 92 + const collection = rec.commit?.collection || rec.kind; 93 93 + const rkey = rec.commit?.rkey; 94 94 + const action = rec.commit?.operation; 95 95 + const time = rec.time_us ? localDateFromTimestamp(rec.time_us / 1000) : undefined; 96 96 + return { type: rec.kind, did: rec.did, collection, rkey, action, time }; 97 97 + }, 98 98 + }, 99 99 + 100 100 + firehose: { 101 101 + label: "Firehose", 102 102 + description: "The raw event stream from a relay or PDS.", 103 103 + icon: "lucide--rss", 104 104 + defaultInstance: "wss://bsky.network", 105 105 + useFirehoseLib: true, 106 106 + showEventTypes: true, 107 107 + collectionsLabel: "Top Collections", 108 108 + fields: [ 109 109 + { 110 110 + name: "cursor", 111 111 + label: "Cursor", 112 112 + type: "text", 113 113 + placeholder: "Leave empty for live-tail", 114 114 + searchParam: "cursor", 115 115 + }, 116 116 + ], 117 117 + buildUrl: (instance, _formData) => { 118 118 + let url = instance; 119 119 + url = url.replace("/xrpc/com.atproto.sync.subscribeRepos", ""); 120 120 + if (!(url.startsWith("wss://") || url.startsWith("ws://"))) { 121 121 + url = "wss://" + url; 122 122 + } 123 123 + return url; 124 124 + }, 125 125 + parseRecord: (rec) => { 126 126 + const type = rec.$type?.split("#").pop() || rec.$type; 127 127 + const did = rec.repo ?? rec.did; 128 128 + const pathParts = rec.op?.path?.split("/") || []; 129 129 + const collection = pathParts[0]; 130 130 + const rkey = pathParts[1]; 131 131 + const time = rec.time ? localDateFromTimestamp(Date.parse(rec.time)) : undefined; 132 132 + return { type, did, collection, rkey, action: rec.op?.action, time }; 133 133 + }, 134 134 + }, 135 135 + 136 136 + spacedust: { 137 137 + label: "Spacedust", 138 138 + description: "A stream of links showing interactions across the network.", 139 139 + icon: "lucide--link", 140 140 + defaultInstance: "wss://spacedust.microcosm.blue/subscribe", 141 141 + useFirehoseLib: false, 142 142 + showEventTypes: false, 143 143 + collectionsLabel: "Top Sources", 144 144 + fields: [ 145 145 + { 146 146 + name: "sources", 147 147 + label: "Sources", 148 148 + type: "textarea", 149 149 + placeholder: "e.g. app.bsky.graph.follow:subject", 150 150 + searchParam: "sources", 151 151 + }, 152 152 + { 153 153 + name: "subjectDids", 154 154 + label: "Subject DIDs", 155 155 + type: "textarea", 156 156 + placeholder: "Comma-separated list of DIDs", 157 157 + searchParam: "subjectDids", 158 158 + }, 159 159 + { 160 160 + name: "subjects", 161 161 + label: "Subjects", 162 162 + type: "textarea", 163 163 + placeholder: "Comma-separated list of AT URIs", 164 164 + searchParam: "subjects", 165 165 + }, 166 166 + { 167 167 + name: "instant", 168 168 + label: "Instant mode (bypass 21s delay buffer)", 169 169 + type: "checkbox", 170 170 + searchParam: "instant", 171 171 + }, 172 172 + ], 173 173 + buildUrl: (instance, formData) => { 174 174 + let url = instance + "?"; 175 175 + 176 176 + const sources = formData.get("sources")?.toString().split(","); 177 177 + sources?.forEach((s) => { 178 178 + if (s.trim().length) url += `wantedSources=${s.trim()}&`; 179 179 + }); 180 180 + 181 181 + const subjectDids = formData.get("subjectDids")?.toString().split(","); 182 182 + subjectDids?.forEach((d) => { 183 183 + if (d.trim().length) url += `wantedSubjectDids=${d.trim()}&`; 184 184 + }); 185 185 + 186 186 + const subjects = formData.get("subjects")?.toString().split(","); 187 187 + subjects?.forEach((s) => { 188 188 + if (s.trim().length) url += `wantedSubjects=${encodeURIComponent(s.trim())}&`; 189 189 + }); 190 190 + 191 191 + const instant = formData.get("instant")?.toString(); 192 192 + if (instant === "on") url += `instant=true&`; 193 193 + 194 194 + return url.replace(/[&?]$/, ""); 195 195 + }, 196 196 + parseRecord: (rec) => { 197 197 + const source = rec.link?.source; 198 198 + const sourceRecord = rec.link?.source_record; 199 199 + const uriParts = sourceRecord?.replace("at://", "").split("/") || []; 200 200 + const did = uriParts[0]; 201 201 + const collection = uriParts[1]; 202 202 + const rkey = uriParts[2]; 203 203 + return { 204 204 + type: rec.kind, 205 205 + did, 206 206 + collection: source || collection, 207 207 + rkey, 208 208 + action: rec.link?.operation, 209 209 + time: undefined, 210 210 + }; 211 211 + }, 212 212 + }, 213 213 + }; 214 214 + 215 215 + export const STREAM_TYPES = Object.keys(STREAM_CONFIGS) as StreamType[]; 216 216 + 217 217 + export const getStreamType = (pathname: string): StreamType => { 218 218 + if (pathname === "/firehose") return "firehose"; 219 219 + if (pathname === "/spacedust") return "spacedust"; 220 220 + return "jetstream"; 221 221 + };

+14 -14

src/layout.tsx

··· 9 9 import { NavBar } from "./components/navbar.jsx"; 10 10 import { NotificationContainer } from "./components/notification.jsx"; 11 11 import { PermissionPromptContainer } from "./components/permission-prompt.jsx"; 12 12 - import { Search, SearchButton, showSearch } from "./components/search.jsx"; 12 12 + import { Search, SearchButton } from "./components/search.jsx"; 13 13 import { themeEvent } from "./components/theme.jsx"; 14 14 import { resolveHandle } from "./utils/api.js"; 15 15 import { plcDirectory } from "./views/settings.jsx"; ··· 126 126 </Show> 127 127 <div id="main" class="mx-auto mb-8 flex max-w-lg flex-col items-center p-3"> 128 128 <header 129 129 - class={`dark:shadow-dark-700 mb-3 flex w-full items-center justify-between rounded-xl border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 pl-3 shadow-xs [--header-bg:#fafafa] [--trans-blue:#5BCEFA90] [--trans-pink:#F5A9B890] [--trans-white:#FFFFFF90] dark:border-neutral-700 dark:bg-neutral-800 dark:[--header-bg:#262626] dark:[--trans-blue:#5BCEFAa0] dark:[--trans-pink:#F5A9B8a0] dark:[--trans-white:#FFFFFFa0] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,var(--trans-blue)_0%,var(--trans-blue)_20%,var(--trans-pink)_20%,var(--trans-pink)_40%,var(--trans-white)_40%,var(--trans-white)_60%,var(--trans-pink)_60%,var(--trans-pink)_80%,var(--trans-blue)_80%,var(--trans-blue)_100%)]" : ""}`} 129 129 + class={`dark:shadow-dark-700 mb-3 flex h-13 w-full items-center justify-between rounded-xl border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 pl-3 shadow-xs [--header-bg:#fafafa] [--trans-blue:#5BCEFA90] [--trans-pink:#F5A9B890] [--trans-white:#FFFFFF90] dark:border-neutral-700 dark:bg-neutral-800 dark:[--header-bg:#262626] dark:[--trans-blue:#5BCEFAa0] dark:[--trans-pink:#F5A9B8a0] dark:[--trans-white:#FFFFFFa0] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,var(--trans-blue)_0%,var(--trans-blue)_20%,var(--trans-pink)_20%,var(--trans-pink)_40%,var(--trans-white)_40%,var(--trans-white)_60%,var(--trans-pink)_60%,var(--trans-pink)_80%,var(--trans-blue)_80%,var(--trans-blue)_100%)]" : ""}`} 130 130 style={{ 131 131 "background-image": 132 132 props.params.repo && props.params.repo in headers ? ··· 149 149 /> 150 150 </Show> 151 151 </A> 152 152 - <div class="relative flex items-center gap-0.5 rounded-lg bg-neutral-50/60 px-1 py-0.5 dark:bg-neutral-800/60"> 153 153 - <SearchButton /> 152 152 + <div class="relative flex items-center gap-0.5 rounded-lg bg-neutral-50/60 p-1 dark:bg-neutral-800/60"> 153 153 + <div class="mr-1"> 154 154 + <SearchButton /> 155 155 + </div> 154 156 <Show when={agent()}> 155 157 <RecordEditor create={true} scope="create" /> 156 156 - 157 157 - 158 158 - 159 159 - 160 160 - 161 161 - 162 162 - 158 158 + </Show> 159 159 + <AccountManager /> 160 160 + <MenuProvider> 161 161 + <DropdownMenu icon="lucide--menu text-lg" buttonClass="rounded-md p-1.5"> 162 162 + <NavMenu href="/jetstream" label="Jetstream" icon="lucide--radio-tower" /> 163 163 + <NavMenu href="/firehose" label="Firehose" icon="lucide--rss" /> 164 164 + <NavMenu href="/spacedust" label="Spacedust" icon="lucide--orbit" /> 163 165 164 166 165 167 ··· 170 172 </div> 171 173 </header> 172 174 <div class="flex w-full flex-col items-center gap-3 text-pretty"> 173 173 - <Show when={showSearch() || location.pathname === "/"}> 174 174 - <Search /> 175 175 - </Show> 175 175 + <Search /> 176 176 <Show when={props.params.pds}> 177 177 <NavBar params={props.params} /> 178 178 </Show>

+396 -319

pnpm-lock.yaml

··· 35 35 36 36 37 37 38 38 + '@atcute/identity-resolver': 39 39 + specifier: ^1.2.2 40 40 + version: 1.2.2(@atcute/identity@1.1.3) 41 41 + '@atcute/lexicon-doc': 42 42 + specifier: ^2.0.6 43 43 + version: 2.0.6 38 44 39 45 40 46 ··· 85 91 86 92 87 93 94 94 + version: 0.5.2 95 95 + '@solidjs/meta': 96 96 + specifier: ^0.29.4 97 97 + version: 0.29.4(solid-js@1.9.11) 98 98 + '@solidjs/router': 99 99 + specifier: ^0.15.4 100 100 + version: 0.15.4(solid-js@1.9.11) 101 101 + codemirror: 102 102 + specifier: ^6.0.2 103 103 + version: 6.0.2 88 104 105 105 + specifier: ^3.0.1 106 106 + version: 3.0.1 107 107 + solid-js: 108 108 + specifier: ^1.9.11 109 109 + version: 1.9.11 110 110 + devDependencies: 111 111 + '@iconify-json/lucide': 112 112 + specifier: ^1.2.86 89 113 90 114 91 115 116 116 + version: 1.2.1(tailwindcss@4.1.18) 117 117 + '@tailwindcss/vite': 118 118 + specifier: ^4.1.18 119 119 + version: 4.1.18(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)) 120 120 + prettier: 121 121 + specifier: ^3.8.1 122 122 + version: 3.8.1 123 123 + prettier-plugin-organize-imports: 124 124 + specifier: ^4.3.0 125 125 + version: 4.3.0(prettier@3.8.1)(typescript@5.9.3) 126 126 + prettier-plugin-tailwindcss: 127 127 + specifier: ^0.7.2 128 128 + version: 0.7.2(prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3))(prettier@3.8.1) 129 129 + tailwindcss: 130 130 + specifier: ^4.1.18 131 131 + version: 4.1.18 92 132 93 133 134 134 + version: 5.9.3 135 135 + vite: 136 136 + specifier: ^7.3.1 137 137 + version: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2) 138 138 + vite-plugin-solid: 139 139 + specifier: ^2.11.10 140 140 + version: 2.11.10(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)) 94 141 142 142 + packages: 95 143 96 144 97 145 ··· 128 176 129 177 130 178 179 179 + '@atcute/identity@1.1.3': 180 180 + resolution: {integrity: sha512-oIqPoI8TwWeQxvcLmFEZLdN2XdWcaLVtlm8pNk0E72As9HNzzD9pwKPrLr3rmTLRIoULPPFmq9iFNsTeCIU9ng==} 131 181 182 182 + '@atcute/lexicon-doc@2.0.6': 183 183 + resolution: {integrity: sha512-iDYJkuom+tIw3zIvU1ggCEVFfReXKfOUtIhpY2kEg2kQeSfMB75F+8k1QOpeAQBetyWYmjsHqBuSUX9oQS6L1Q==} 132 184 133 185 134 186 ··· 666 718 667 719 668 720 721 721 + '@noble/secp256k1@3.0.0': 722 722 + resolution: {integrity: sha512-NJBaR352KyIvj3t6sgT/+7xrNyF9Xk9QlLSIqUGVUYlsnDTAUqY8LOmwpcgEx4AMJXRITQ5XEVHD+mMaPfr3mg==} 669 723 724 724 + '@rollup/rollup-android-arm-eabi@4.56.0': 725 725 + resolution: {integrity: sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw==} 726 726 + cpu: [arm] 727 727 + os: [android] 670 728 729 729 + '@rollup/rollup-android-arm64@4.56.0': 730 730 + resolution: {integrity: sha512-lfbVUbelYqXlYiU/HApNMJzT1E87UPGvzveGg2h0ktUNlOCxKlWuJ9jtfvs1sKHdwU4fzY7Pl8sAl49/XaEk6Q==} 731 731 + cpu: [arm64] 732 732 + os: [android] 671 733 734 734 + '@rollup/rollup-darwin-arm64@4.56.0': 735 735 + resolution: {integrity: sha512-EgxD1ocWfhoD6xSOeEEwyE7tDvwTgZc8Bss7wCWe+uc7wO8G34HHCUH+Q6cHqJubxIAnQzAsyUsClt0yFLu06w==} 736 736 + cpu: [arm64] 737 737 + os: [darwin] 672 738 739 739 + '@rollup/rollup-darwin-x64@4.56.0': 740 740 + resolution: {integrity: sha512-1vXe1vcMOssb/hOF8iv52A7feWW2xnu+c8BV4t1F//m9QVLTfNVpEdja5ia762j/UEJe2Z1jAmEqZAK42tVW3g==} 741 741 + cpu: [x64] 742 742 + os: [darwin] 673 743 744 744 + '@rollup/rollup-freebsd-arm64@4.56.0': 745 745 + resolution: {integrity: sha512-bof7fbIlvqsyv/DtaXSck4VYQ9lPtoWNFCB/JY4snlFuJREXfZnm+Ej6yaCHfQvofJDXLDMTVxWscVSuQvVWUQ==} 746 746 + cpu: [arm64] 747 747 + os: [freebsd] 674 748 749 749 + '@rollup/rollup-freebsd-x64@4.56.0': 750 750 + resolution: {integrity: sha512-KNa6lYHloW+7lTEkYGa37fpvPq+NKG/EHKM8+G/g9WDU7ls4sMqbVRV78J6LdNuVaeeK5WB9/9VAFbKxcbXKYg==} 751 751 + cpu: [x64] 752 752 + os: [freebsd] 675 753 754 754 + '@rollup/rollup-linux-arm-gnueabihf@4.56.0': 755 755 + resolution: {integrity: sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==} 756 756 + cpu: [arm] 757 757 + os: [linux] 676 758 759 759 + '@rollup/rollup-linux-arm-musleabihf@4.56.0': 760 760 + resolution: {integrity: sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==} 761 761 + cpu: [arm] 762 762 + os: [linux] 677 763 764 764 + '@rollup/rollup-linux-arm64-gnu@4.56.0': 765 765 + resolution: {integrity: sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==} 766 766 + cpu: [arm64] 767 767 + os: [linux] 678 768 769 769 + '@rollup/rollup-linux-arm64-musl@4.56.0': 770 770 + resolution: {integrity: sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==} 771 771 + cpu: [arm64] 772 772 + os: [linux] 679 773 774 774 + '@rollup/rollup-linux-loong64-gnu@4.56.0': 775 775 + resolution: {integrity: sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==} 776 776 + cpu: [loong64] 777 777 + os: [linux] 680 778 779 779 + '@rollup/rollup-linux-loong64-musl@4.56.0': 780 780 + resolution: {integrity: sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==} 781 781 + cpu: [loong64] 782 782 + os: [linux] 681 783 784 784 + '@rollup/rollup-linux-ppc64-gnu@4.56.0': 785 785 + resolution: {integrity: sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==} 786 786 + cpu: [ppc64] 787 787 + os: [linux] 682 788 789 789 + '@rollup/rollup-linux-ppc64-musl@4.56.0': 790 790 + resolution: {integrity: sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==} 791 791 + cpu: [ppc64] 792 792 + os: [linux] 683 793 794 794 + '@rollup/rollup-linux-riscv64-gnu@4.56.0': 795 795 + resolution: {integrity: sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==} 796 796 + cpu: [riscv64] 797 797 + os: [linux] 684 798 799 799 + '@rollup/rollup-linux-riscv64-musl@4.56.0': 800 800 + resolution: {integrity: sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==} 801 801 + cpu: [riscv64] 802 802 + os: [linux] 685 803 804 804 + '@rollup/rollup-linux-s390x-gnu@4.56.0': 805 805 + resolution: {integrity: sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==} 806 806 + cpu: [s390x] 807 807 + os: [linux] 686 808 809 809 + '@rollup/rollup-linux-x64-gnu@4.56.0': 810 810 + resolution: {integrity: sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==} 811 811 + cpu: [x64] 812 812 + os: [linux] 687 813 814 814 + '@rollup/rollup-linux-x64-musl@4.56.0': 815 815 + resolution: {integrity: sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==} 816 816 + cpu: [x64] 817 817 + os: [linux] 688 818 819 819 + '@rollup/rollup-openbsd-x64@4.56.0': 820 820 + resolution: {integrity: sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==} 821 821 + cpu: [x64] 822 822 + os: [openbsd] 689 823 824 824 + '@rollup/rollup-openharmony-arm64@4.56.0': 825 825 + resolution: {integrity: sha512-LhN/Reh+7F3RCgQIRbgw8ZMwUwyqJM+8pXNT6IIJAqm2IdKkzpCh/V9EdgOMBKuebIrzswqy4ATlrDgiOwbRcQ==} 826 826 + cpu: [arm64] 827 827 + os: [openharmony] 690 828 829 829 + '@rollup/rollup-win32-arm64-msvc@4.56.0': 830 830 + resolution: {integrity: sha512-kbFsOObXp3LBULg1d3JIUQMa9Kv4UitDmpS+k0tinPBz3watcUiV2/LUDMMucA6pZO3WGE27P7DsfaN54l9ing==} 831 831 + cpu: [arm64] 832 832 + os: [win32] 691 833 834 834 + '@rollup/rollup-win32-ia32-msvc@4.56.0': 835 835 + resolution: {integrity: sha512-vSSgny54D6P4vf2izbtFm/TcWYedw7f8eBrOiGGecyHyQB9q4Kqentjaj8hToe+995nob/Wv48pDqL5a62EWtg==} 836 836 + cpu: [ia32] 837 837 + os: [win32] 692 838 839 839 + '@rollup/rollup-win32-x64-gnu@4.56.0': 840 840 + resolution: {integrity: sha512-FeCnkPCTHQJFbiGG49KjV5YGW/8b9rrXAM2Mz2kiIoktq2qsJxRD5giEMEOD2lPdgs72upzefaUvS+nc8E3UzQ==} 841 841 + cpu: [x64] 842 842 + os: [win32] 693 843 844 844 + '@rollup/rollup-win32-x64-msvc@4.56.0': 845 845 + resolution: {integrity: sha512-H8AE9Ur/t0+1VXujj90w0HrSOuv0Nq9r1vSZF2t5km20NTfosQsGGUXDaKdQZzwuLts7IyL1fYT4hM95TI9c4g==} 846 846 + cpu: [x64] 847 847 + os: [win32] 694 848 695 849 696 850 ··· 813 967 814 968 815 969 970 970 + '@types/estree@1.0.8': 971 971 + resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} 816 972 973 973 + '@types/node@25.0.10': 974 974 + resolution: {integrity: sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==} 817 975 976 976 + acorn@8.15.0: 977 977 + resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==} 818 978 819 979 820 980 ··· 844 1004 845 1005 846 1006 1007 1007 + bun-types@1.3.6: 1008 1008 + resolution: {integrity: sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ==} 847 1009 1010 1010 + caniuse-lite@1.0.30001766: 1011 1011 + resolution: {integrity: sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==} 848 1012 1013 1013 + codemirror@6.0.2: 1014 1014 + resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==} 849 1015 850 1016 851 1017 ··· 905 1071 906 1072 907 1073 1074 1074 + domutils@3.2.2: 1075 1075 + resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} 908 1076 1077 1077 + electron-to-chromium@1.5.278: 1078 1078 + resolution: {integrity: sha512-dQ0tM1svDRQOwxnXxm+twlGTjr9Upvt8UFWAgmLsxEzFQxhbti4VwxmMjsDxVC51Zo84swW7FVCXEV+VAkhuPw==} 909 1079 1080 1080 + enhanced-resolve@5.18.4: 1081 1081 + resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==} 910 1082 911 1083 912 1084 ··· 1203 1375 1204 1376 1205 1377 1378 1378 + prettier-plugin-svelte: 1379 1379 + optional: true 1206 1380 1381 1381 + prettier@3.8.1: 1382 1382 + resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==} 1383 1383 + engines: {node: '>=14'} 1384 1384 + hasBin: true 1207 1385 1386 1386 + resolve-pkg-maps@1.0.0: 1387 1387 + resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} 1208 1388 1389 1389 + rollup@4.56.0: 1390 1390 + resolution: {integrity: sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==} 1391 1391 + engines: {node: '>=18.0.0', npm: '>=8.0.0'} 1392 1392 + hasBin: true 1209 1393 1210 1394 1211 1395 1212 1396 1213 1397 1214 1398 1399 1399 + resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} 1400 1400 + hasBin: true 1215 1401 1216 1216 - 1217 1217 - 1218 1218 - 1219 1219 - 1220 1220 - 1221 1221 - 1222 1222 - 1223 1223 - 1224 1224 - 1225 1225 - 1226 1226 - 1227 1227 - 1228 1228 - 1229 1229 - 1230 1230 - 1231 1231 - 1232 1232 - 1233 1233 - 1234 1234 - 1235 1235 - 1236 1236 - 1237 1237 - 1238 1238 - 1239 1239 - 1240 1240 - 1241 1241 - 1242 1242 - 1243 1243 - 1244 1244 - 1245 1245 - 1246 1246 - 1247 1247 - 1248 1248 - 1249 1249 - 1250 1250 - 1251 1251 - 1252 1252 - 1253 1253 - 1254 1254 - 1255 1255 - 1256 1256 - 1257 1257 - 1258 1258 - 1259 1259 - 1260 1260 - 1261 1261 - 1262 1262 - 1263 1263 - 1264 1264 - 1265 1265 - 1266 1266 - 1267 1267 - 1268 1268 - 1269 1269 - 1270 1270 - 1271 1271 - 1272 1272 - 1273 1273 - 1274 1274 - 1275 1275 - 1276 1276 - 1277 1277 - 1278 1278 - 1279 1279 - 1280 1280 - 1281 1281 - 1282 1282 - 1283 1283 - 1284 1284 - 1285 1285 - 1286 1286 - 1287 1287 - 1288 1288 - 1289 1289 - 1290 1290 - 1291 1291 - 1292 1292 - 1293 1293 - 1294 1294 - 1295 1295 - 1296 1296 - 1297 1297 - 1298 1298 - 1299 1299 - 1300 1300 - 1301 1301 - 1302 1302 - 1303 1303 - 1304 1304 - 1305 1305 - 1306 1306 - 1307 1307 - 1308 1308 - 1309 1309 - 1310 1310 - 1311 1311 - 1312 1312 - 1313 1313 - 1314 1314 - 1315 1315 - 1316 1316 - 1317 1317 - 1318 1318 - 1319 1319 - 1320 1320 - 1321 1321 - 1322 1322 - 1323 1323 - 1324 1324 - 1325 1325 - 1326 1326 - 1327 1327 - 1328 1328 - 1329 1329 - 1330 1330 - 1331 1331 - 1332 1332 - 1333 1333 - 1334 1334 - 1335 1335 - 1336 1336 - 1337 1337 - 1338 1338 - 1339 1339 - 1340 1340 - 1341 1341 - 1342 1342 - 1343 1343 - 1344 1344 - 1345 1345 - 1346 1346 - 1347 1347 - 1348 1348 - 1349 1349 - 1350 1350 - 1351 1351 - 1352 1352 - 1353 1353 - 1354 1354 - 1355 1355 - 1356 1356 - 1357 1357 - 1358 1358 - 1359 1359 - 1360 1360 - 1361 1361 - 1362 1362 - 1363 1363 - 1364 1364 - 1365 1365 - 1366 1366 - 1367 1367 - 1368 1368 - 1369 1369 - 1370 1370 - 1371 1371 - 1372 1372 - 1373 1373 - 1374 1374 - 1375 1375 - 1376 1376 - 1377 1377 - 1378 1378 - 1379 1379 - 1380 1380 - 1381 1381 - 1382 1382 - 1383 1383 - 1384 1384 - 1385 1385 - 1386 1386 - 1387 1387 - 1388 1388 - 1389 1389 - 1390 1390 - 1391 1391 - 1392 1392 - 1393 1393 - 1394 1394 - 1395 1395 - 1396 1396 - 1397 1397 - 1398 1398 - 1399 1399 - 1400 1400 - 1401 1401 - 1402 1402 - 1403 1403 - 1404 1404 - 1405 1405 - 1406 1406 - 1407 1407 - 1408 1408 - 1409 1409 - resolution: {integrity: sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w==} 1402 1402 + seroval-plugins@1.5.0: 1403 1403 + resolution: {integrity: sha512-EAHqADIQondwRZIdeW2I636zgsODzoBDwb3PT/+7TLDWyw1Dy/Xv7iGUIEXXav7usHDE9HVhOU61irI3EnyyHA==} 1410 1404 engines: {node: '>=10'} 1411 1405 peerDependencies: 1412 1406 seroval: ^1.0 1413 1407 1414 1414 - seroval@1.3.2: 1415 1415 - resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==} 1408 1408 + seroval@1.5.0: 1409 1409 + resolution: {integrity: sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==} 1416 1410 engines: {node: '>=10'} 1417 1411 1418 1418 - solid-js@1.9.10: 1419 1419 - 1420 1420 - 1421 1421 - 1422 1422 - 1423 1423 - 1424 1424 - 1425 1425 - 1426 1426 - 1427 1427 - 1428 1428 - 1429 1429 - 1430 1430 - 1431 1431 - 1432 1432 - 1433 1433 - 1434 1434 - 1435 1435 - 1436 1436 - 1437 1437 - 1438 1438 - 1439 1439 - 1440 1440 - 1441 1441 - 1442 1442 - 1443 1443 - 1444 1444 - 1445 1445 - 1446 1446 - 1447 1447 - 1448 1448 - 1449 1449 - 1450 1450 - 1451 1451 - 1452 1452 - 1453 1453 - 1454 1454 - 1455 1455 - 1456 1456 - 1457 1457 - 1458 1458 - 1459 1459 - 1460 1460 - 1461 1461 - 1462 1462 - 1463 1463 - 1464 1464 - 1465 1465 - 1466 1466 - 1467 1467 - 1468 1468 - 1469 1469 - 1470 1470 - 1471 1471 - 1472 1472 - 1473 1473 - 1474 1474 - 1475 1475 - 1476 1476 - 1477 1477 - 1478 1478 - 1479 1479 - 1480 1480 - 1481 1481 - 1482 1482 - 1483 1483 - 1484 1484 - 1485 1485 - 1486 1486 - 1487 1487 - 1488 1488 - 1489 1489 - 1490 1490 - 1491 1491 - 1492 1492 - 1493 1493 - 1494 1494 - 1495 1495 - 1496 1496 - 1497 1497 - 1498 1498 - 1499 1499 - 1500 1500 - 1501 1501 - 1502 1502 - 1503 1503 - 1504 1504 - 1505 1505 - 1506 1506 - 1507 1507 - 1508 1508 - 1509 1509 - 1510 1510 - 1511 1511 - 1512 1512 - 1513 1513 - 1514 1514 - 1515 1515 - 1516 1516 - 1517 1517 - 1518 1518 - 1519 1519 - 1520 1520 - 1521 1521 - 1522 1522 - 1523 1523 - 1524 1524 - 1525 1525 - 1526 1526 - 1527 1527 - 1528 1528 - 1529 1529 - 1412 1412 + solid-js@1.9.11: 1413 1413 + resolution: {integrity: sha512-WEJtcc5mkh/BnHA6Yrg4whlF8g6QwpmXXRg4P2ztPmcKeHHlH4+djYecBLhSpecZY2RRECXYUwIc/C2r3yzQ4Q==} 1530 1414 1415 1415 + solid-refresh@0.6.3: 1416 1416 + resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} 1531 1417 1532 1418 1533 1419 ··· 1729 1615 1730 1616 1731 1617 1618 1618 + '@atcute/lexicons': 1.2.6 1619 1619 + '@badrap/valita': 0.4.6 1732 1620 1621 1621 + '@atcute/lexicon-doc@2.0.6': 1622 1622 + dependencies: 1623 1623 + '@atcute/identity': 1.1.3 1733 1624 1734 1625 1735 1626 ··· 2225 2116 2226 2117 2227 2118 2119 2119 + '@noble/secp256k1@3.0.0': {} 2228 2120 2121 2121 + '@rollup/rollup-android-arm-eabi@4.56.0': 2122 2122 + optional: true 2229 2123 2124 2124 + '@rollup/rollup-android-arm64@4.56.0': 2125 2125 + optional: true 2230 2126 2127 2127 + '@rollup/rollup-darwin-arm64@4.56.0': 2128 2128 + optional: true 2231 2129 2130 2130 + '@rollup/rollup-darwin-x64@4.56.0': 2131 2131 + optional: true 2232 2132 2133 2133 + '@rollup/rollup-freebsd-arm64@4.56.0': 2134 2134 + optional: true 2233 2135 2136 2136 + '@rollup/rollup-freebsd-x64@4.56.0': 2137 2137 + optional: true 2234 2138 2139 2139 + '@rollup/rollup-linux-arm-gnueabihf@4.56.0': 2140 2140 + optional: true 2235 2141 2142 2142 + '@rollup/rollup-linux-arm-musleabihf@4.56.0': 2143 2143 + optional: true 2236 2144 2145 2145 + '@rollup/rollup-linux-arm64-gnu@4.56.0': 2146 2146 + optional: true 2237 2147 2148 2148 + '@rollup/rollup-linux-arm64-musl@4.56.0': 2149 2149 + optional: true 2238 2150 2151 2151 + '@rollup/rollup-linux-loong64-gnu@4.56.0': 2152 2152 + optional: true 2239 2153 2154 2154 + '@rollup/rollup-linux-loong64-musl@4.56.0': 2155 2155 + optional: true 2240 2156 2157 2157 + '@rollup/rollup-linux-ppc64-gnu@4.56.0': 2158 2158 + optional: true 2241 2159 2160 2160 + '@rollup/rollup-linux-ppc64-musl@4.56.0': 2161 2161 + optional: true 2242 2162 2163 2163 + '@rollup/rollup-linux-riscv64-gnu@4.56.0': 2164 2164 + optional: true 2243 2165 2166 2166 + '@rollup/rollup-linux-riscv64-musl@4.56.0': 2167 2167 + optional: true 2244 2168 2169 2169 + '@rollup/rollup-linux-s390x-gnu@4.56.0': 2170 2170 + optional: true 2245 2171 2172 2172 + '@rollup/rollup-linux-x64-gnu@4.56.0': 2173 2173 + optional: true 2246 2174 2175 2175 + '@rollup/rollup-linux-x64-musl@4.56.0': 2176 2176 + optional: true 2247 2177 2178 2178 + '@rollup/rollup-openbsd-x64@4.56.0': 2179 2179 + optional: true 2248 2180 2181 2181 + '@rollup/rollup-openharmony-arm64@4.56.0': 2182 2182 + optional: true 2249 2183 2184 2184 + '@rollup/rollup-win32-arm64-msvc@4.56.0': 2185 2185 + optional: true 2250 2186 2187 2187 + '@rollup/rollup-win32-ia32-msvc@4.56.0': 2188 2188 + optional: true 2251 2189 2190 2190 + '@rollup/rollup-win32-x64-gnu@4.56.0': 2191 2191 + optional: true 2252 2192 2193 2193 + '@rollup/rollup-win32-x64-msvc@4.56.0': 2194 2194 + optional: true 2253 2195 2196 2196 + '@skyware/firehose@0.5.2': 2254 2197 2255 2198 2199 2199 + '@atcute/cbor': 2.3.0 2200 2200 + nanoevents: 9.1.0 2256 2201 2202 2202 + '@solidjs/meta@0.29.4(solid-js@1.9.11)': 2203 2203 + dependencies: 2204 2204 + solid-js: 1.9.11 2257 2205 2206 2206 + '@solidjs/router@0.15.4(solid-js@1.9.11)': 2207 2207 + dependencies: 2208 2208 + solid-js: 1.9.11 2258 2209 2210 2210 + '@standard-schema/spec@1.1.0': {} 2259 2211 2260 2212 2261 2213 ··· 2315 2267 2316 2268 2317 2269 2270 2270 + '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18 2271 2271 + '@tailwindcss/oxide-win32-x64-msvc': 4.1.18 2318 2272 2273 2273 + '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2))': 2274 2274 + dependencies: 2275 2275 + '@tailwindcss/node': 4.1.18 2276 2276 + '@tailwindcss/oxide': 4.1.18 2277 2277 + tailwindcss: 4.1.18 2278 2278 + vite: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2) 2319 2279 2280 2280 + '@types/babel__core@7.20.5': 2281 2281 + dependencies: 2320 2282 2321 2283 2322 2284 ··· 2340 2302 2341 2303 2342 2304 2305 2305 + '@types/estree@1.0.8': {} 2343 2306 2307 2307 + '@types/node@25.0.10': 2308 2308 + dependencies: 2309 2309 + undici-types: 7.16.0 2344 2310 2345 2311 2346 2312 ··· 2350 2316 2351 2317 2352 2318 2319 2319 + html-entities: 2.3.3 2320 2320 + parse5: 7.3.0 2353 2321 2322 2322 + babel-preset-solid@1.9.10(@babel/core@7.28.6)(solid-js@1.9.11): 2323 2323 + dependencies: 2324 2324 + '@babel/core': 7.28.6 2325 2325 + babel-plugin-jsx-dom-expressions: 0.40.3(@babel/core@7.28.6) 2326 2326 + optionalDependencies: 2327 2327 + solid-js: 1.9.11 2354 2328 2329 2329 + baseline-browser-mapping@2.9.17: {} 2355 2330 2356 2331 2357 2332 2333 2333 + browserslist@4.28.1: 2334 2334 + dependencies: 2335 2335 + baseline-browser-mapping: 2.9.17 2336 2336 + caniuse-lite: 1.0.30001766 2337 2337 + electron-to-chromium: 1.5.278 2338 2338 + node-releases: 2.0.27 2339 2339 + update-browserslist-db: 1.2.3(browserslist@4.28.1) 2358 2340 2341 2341 + bun-types@1.3.6: 2342 2342 + dependencies: 2343 2343 + '@types/node': 25.0.10 2359 2344 2345 2345 + caniuse-lite@1.0.30001766: {} 2360 2346 2347 2347 + codemirror@6.0.2: 2348 2348 + dependencies: 2361 2349 2362 2350 2363 2351 ··· 2421 2409 2422 2410 2423 2411 2412 2412 + domelementtype: 2.3.0 2413 2413 + domhandler: 5.0.3 2424 2414 2415 2415 + electron-to-chromium@1.5.278: {} 2425 2416 2417 2417 + enhanced-resolve@5.18.4: 2418 2418 + dependencies: 2426 2419 2427 2420 2428 2421 ··· 2645 2638 2646 2639 2647 2640 2641 2641 + picocolors: 1.1.1 2642 2642 + source-map-js: 1.2.1 2648 2643 2644 2644 + prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3): 2645 2645 + dependencies: 2646 2646 + prettier: 3.8.1 2647 2647 + typescript: 5.9.3 2649 2648 2649 2649 + prettier-plugin-tailwindcss@0.7.2(prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3))(prettier@3.8.1): 2650 2650 + dependencies: 2651 2651 + prettier: 3.8.1 2652 2652 + optionalDependencies: 2653 2653 + prettier-plugin-organize-imports: 4.3.0(prettier@3.8.1)(typescript@5.9.3) 2650 2654 2655 2655 + prettier@3.8.1: {} 2651 2656 2657 2657 + resolve-pkg-maps@1.0.0: 2658 2658 + optional: true 2652 2659 2660 2660 + rollup@4.56.0: 2661 2661 + dependencies: 2662 2662 + '@types/estree': 1.0.8 2663 2663 + optionalDependencies: 2664 2664 + '@rollup/rollup-android-arm-eabi': 4.56.0 2665 2665 + '@rollup/rollup-android-arm64': 4.56.0 2666 2666 + '@rollup/rollup-darwin-arm64': 4.56.0 2667 2667 + '@rollup/rollup-darwin-x64': 4.56.0 2668 2668 + '@rollup/rollup-freebsd-arm64': 4.56.0 2669 2669 + '@rollup/rollup-freebsd-x64': 4.56.0 2670 2670 + '@rollup/rollup-linux-arm-gnueabihf': 4.56.0 2671 2671 + '@rollup/rollup-linux-arm-musleabihf': 4.56.0 2672 2672 + '@rollup/rollup-linux-arm64-gnu': 4.56.0 2673 2673 + '@rollup/rollup-linux-arm64-musl': 4.56.0 2674 2674 + '@rollup/rollup-linux-loong64-gnu': 4.56.0 2675 2675 + '@rollup/rollup-linux-loong64-musl': 4.56.0 2676 2676 + '@rollup/rollup-linux-ppc64-gnu': 4.56.0 2677 2677 + '@rollup/rollup-linux-ppc64-musl': 4.56.0 2678 2678 + '@rollup/rollup-linux-riscv64-gnu': 4.56.0 2679 2679 + '@rollup/rollup-linux-riscv64-musl': 4.56.0 2680 2680 + '@rollup/rollup-linux-s390x-gnu': 4.56.0 2681 2681 + '@rollup/rollup-linux-x64-gnu': 4.56.0 2682 2682 + '@rollup/rollup-linux-x64-musl': 4.56.0 2683 2683 + '@rollup/rollup-openbsd-x64': 4.56.0 2684 2684 + '@rollup/rollup-openharmony-arm64': 4.56.0 2685 2685 + '@rollup/rollup-win32-arm64-msvc': 4.56.0 2686 2686 + '@rollup/rollup-win32-ia32-msvc': 4.56.0 2687 2687 + '@rollup/rollup-win32-x64-gnu': 4.56.0 2688 2688 + '@rollup/rollup-win32-x64-msvc': 4.56.0 2689 2689 + fsevents: 2.3.3 2653 2690 2691 2691 + sax@1.4.4: {} 2654 2692 2693 2693 + semver@6.3.1: {} 2655 2694 2695 2695 + seroval-plugins@1.5.0(seroval@1.5.0): 2696 2696 + dependencies: 2697 2697 + seroval: 1.5.0 2656 2698 2699 2699 + seroval@1.5.0: {} 2657 2700 2701 2701 + solid-js@1.9.11: 2702 2702 + dependencies: 2703 2703 + csstype: 3.2.3 2704 2704 + seroval: 1.5.0 2705 2705 + seroval-plugins: 1.5.0(seroval@1.5.0) 2658 2706 2707 2707 + solid-refresh@0.6.3(solid-js@1.9.11): 2708 2708 + dependencies: 2709 2709 + '@babel/generator': 7.28.6 2710 2710 + '@babel/helper-module-imports': 7.28.6 2711 2711 + '@babel/types': 7.28.6 2712 2712 + solid-js: 1.9.11 2713 2713 + transitivePeerDependencies: 2714 2714 + - supports-color 2659 2715 2660 2716 2661 2717 ··· 2701 2757 2702 2758 2703 2759 2704 2704 - semver@6.3.1: {} 2760 2760 + escalade: 3.2.0 2761 2761 + picocolors: 1.1.1 2705 2762 2706 2706 - seroval-plugins@1.3.3(seroval@1.3.2): 2763 2763 + vite-plugin-solid@2.11.10(solid-js@1.9.11)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)): 2707 2764 dependencies: 2708 2708 - seroval: 1.3.2 2709 2709 - 2710 2710 - seroval@1.3.2: {} 2765 2765 + '@babel/core': 7.28.6 2766 2766 + '@types/babel__core': 7.20.5 2767 2767 + babel-preset-solid: 1.9.10(@babel/core@7.28.6)(solid-js@1.9.11) 2768 2768 + merge-anything: 5.1.7 2769 2769 + solid-js: 1.9.11 2770 2770 + solid-refresh: 0.6.3(solid-js@1.9.11) 2771 2771 + vite: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2) 2772 2772 + vitefu: 1.1.1(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)) 2773 2773 + transitivePeerDependencies: 2774 2774 + - supports-color 2711 2775 2712 2712 - solid-js@1.9.10: 2776 2776 + vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2): 2713 2777 dependencies: 2714 2714 - csstype: 3.2.3 2715 2715 - seroval: 1.3.2 2716 2716 - seroval-plugins: 1.3.3(seroval@1.3.2) 2778 2778 + esbuild: 0.27.2 2779 2779 + fdir: 6.5.0(picomatch@4.0.3) 2780 2780 + picomatch: 4.0.3 2781 2781 + postcss: 8.5.6 2782 2782 + rollup: 4.56.0 2783 2783 + tinyglobby: 0.2.15 2784 2784 + optionalDependencies: 2785 2785 + '@types/node': 25.0.10 2786 2786 + fsevents: 2.3.3 2787 2787 + jiti: 2.6.1 2788 2788 + lightningcss: 1.30.2 2789 2789 + tsx: 4.19.2 2790 2790 + 2791 2791 + vitefu@1.1.1(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2)): 2792 2792 + optionalDependencies: 2793 2793 + vite: 7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.19.2) 2794 2794 + 2795 2795 + w3c-keyname@2.2.8: {} 2717 2796 2718 2718 - solid-refresh@0.6.3(solid-js@1.9.10): 2719 2719 - dependencies:

+338 -1

src/views/collection.tsx

··· 40 40 class="flex w-full min-w-0 items-baseline rounded px-1 py-0.5" 41 41 trigger={ 42 42 <> 43 43 - <span class="shrink-0 text-sm text-blue-500 dark:text-blue-400">{props.record.rkey}</span> 43 43 + <span class="max-w-full shrink-0 truncate text-sm text-blue-500 dark:text-blue-400"> 44 44 + {props.record.rkey} 45 45 + </span> 44 46 <span class="ml-1 truncate text-xs text-neutral-500 dark:text-neutral-400" dir="rtl"> 45 47 {props.record.cid} 46 48 </span> 49 49 + 50 50 + 51 51 + 52 52 + 53 53 + 54 54 + 55 55 + 56 56 + 57 57 + 58 58 + 59 59 + 60 60 + 61 61 + 62 62 + 63 63 + 64 64 + 65 65 + 66 66 + 67 67 + 68 68 + 69 69 + 70 70 + 71 71 + 72 72 + 73 73 + 74 74 + 75 75 + 76 76 + 77 77 + 78 78 + 79 79 + 80 80 + 81 81 + 82 82 + 83 83 + 84 84 + 85 85 + 86 86 + 87 87 + 88 88 + 89 89 + 90 90 + 91 91 + 92 92 + 93 93 + 94 94 + 95 95 + 96 96 + 97 97 + 98 98 + 99 99 + 100 100 + 101 101 + 102 102 + 103 103 + 104 104 + 105 105 + 106 106 + 107 107 + 108 108 + 109 109 + 110 110 + 111 111 + 112 112 + 113 113 + 114 114 + 115 115 + 116 116 + 117 117 + 118 118 + 119 119 + 120 120 + 121 121 + 122 122 + 123 123 + 124 124 + 125 125 + 126 126 + 127 127 + 128 128 + 129 129 + 130 130 + 131 131 + 132 132 + 133 133 + 134 134 + 135 135 + 136 136 + 137 137 + 138 138 + 139 139 + 140 140 + 141 141 + 142 142 + 143 143 + 144 144 + 145 145 + 146 146 + 147 147 + 148 148 + 149 149 + 150 150 + 151 151 + 152 152 + 153 153 + 154 154 + 155 155 + 156 156 + 157 157 + 158 158 + 159 159 + 160 160 + 161 161 + 162 162 + 163 163 + 164 164 + 165 165 + 166 166 + 167 167 + 168 168 + 169 169 + 170 170 + 171 171 + 172 172 + 173 173 + 174 174 + 175 175 + 176 176 + 177 177 + 178 178 + 179 179 + 180 180 + 181 181 + 182 182 + 183 183 + 184 184 + 185 185 + 186 186 + 187 187 + 188 188 + 189 189 + 190 190 + 191 191 + 192 192 + 193 193 + 194 194 + 195 195 + 196 196 + 197 197 + 198 198 + 199 199 + 200 200 + 201 201 + 202 202 + 203 203 + 204 204 + 205 205 + 206 206 + 207 207 + 208 208 + 209 209 + 210 210 + 211 211 + 212 212 + 213 213 + 214 214 + 215 215 + 216 216 + 217 217 + 218 218 + 219 219 + 220 220 + 221 221 + 222 222 + 223 223 + 224 224 + 225 225 + 226 226 + 227 227 + 228 228 + 229 229 + 230 230 + 231 231 + 232 232 + 233 233 + 234 234 + 235 235 + 236 236 + 237 237 + 238 238 + 239 239 + 240 240 + 241 241 + 242 242 + 243 243 + 244 244 + 245 245 + 246 246 + 247 247 + 248 248 + 249 249 + 250 250 + 251 251 + 252 252 + 253 253 + 254 254 + 255 255 + 256 256 + 257 257 + 258 258 + 259 259 + 260 260 + 261 261 + 262 262 + 263 263 + 264 264 + 265 265 + 266 266 + 267 267 + 268 268 + 269 269 + 270 270 + 271 271 + 272 272 + 273 273 + 274 274 + 275 275 + 276 276 + 277 277 + 278 278 + 279 279 + 280 280 + 281 281 + 282 282 + 283 283 + 284 284 + 285 285 + 286 286 + 287 287 + 288 288 + 289 289 + 290 290 + 291 291 + 292 292 + 293 293 + 294 294 + 295 295 + 296 296 + 297 297 + 298 298 + 299 299 + 300 300 + 301 301 + 302 302 + 303 303 + 304 304 + 305 305 + 306 306 + 307 307 + 308 308 + 309 309 + 310 310 + 311 311 + 312 312 + 313 313 + 314 314 + 315 315 + <Button onClick={() => setOpenDelete(false)}>Cancel</Button> 316 316 + <Button 317 317 + onClick={deleteRecords} 318 318 + classList={{ 319 319 + "bg-blue-500! text-white! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400! border-none!": 320 320 + recreate(), 321 321 + "text-white! border-none! bg-red-500! hover:bg-red-600! active:bg-red-700!": 322 322 + !recreate(), 323 323 + }} 324 324 + > 325 325 + {recreate() ? "Recreate" : "Delete"} 326 326 + </Button> 327 327 + 328 328 + 329 329 + 330 330 + 331 331 + 332 332 + 333 333 + 334 334 + 335 335 + 336 336 + 337 337 + 338 338 + 339 339 + 340 340 + 341 341 + 342 342 + 343 343 + 344 344 + 345 345 + 346 346 + 347 347 + 348 348 + 349 349 + 350 350 + 351 351 + 352 352 + 353 353 + 354 354 + 355 355 + 356 356 + 357 357 + 358 358 + 359 359 + 360 360 + 361 361 + 362 362 + 363 363 + 364 364 + 365 365 + 366 366 + 367 367 + 368 368 + 369 369 + 370 370 + 371 371 + 372 372 + 373 373 + 374 374 + 375 375 + 376 376 + 377 377 + <Button onClick={() => refetch()}>Load more</Button> 378 378 + </Show> 379 379 + <Show when={response.loading}> 380 380 + <div class="iconify lucide--loader-circle w-20 animate-spin text-lg" /> 381 381 + </Show> 382 382 + </Show> 383 383 + </div>

+3 -3

src/auth/scope-selector.tsx

··· 44 44 }; 45 45 46 46 return ( 47 47 - <div class="flex flex-col gap-y-2"> 48 48 - <div class="mb-1 flex items-center gap-2"> 47 47 + <div class="flex flex-col gap-y-3"> 48 48 + <div class="flex items-center gap-2"> 49 49 <button 50 50 onclick={props.onCancel} 51 51 class="flex items-center rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" ··· 77 77 </div> 78 78 <button 79 79 onclick={handleConfirm} 80 80 - class="mt-2 grow rounded-lg border-[0.5px] border-neutral-300 bg-neutral-100 px-3 py-2 hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 80 80 + class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700" 81 81 > 82 82 Continue 83 83 </button>

-14

src/utils/templates.ts

··· 37 37 link: `https://pinksea.art/${uri.repo}`, 38 38 icon: "i-pinksea", 39 39 }), 40 40 - "blue.linkat.board": (uri) => ({ 41 41 - label: "Linkat", 42 42 - link: `https://linkat.blue/${uri.repo}`, 43 43 - }), 44 40 "sh.tangled.actor.profile": (uri) => ({ 45 41 label: "Tangled", 46 42 link: `https://tangled.org/${uri.repo}`, ··· 51 47 link: `https://tangled.org/${uri.repo}/${record.name}`, 52 48 icon: "i-tangled", 53 49 }), 54 54 - "pub.leaflet.document": (uri) => ({ 55 55 - label: "Leaflet", 56 56 - link: `https://leaflet.pub/p/${uri.repo}/${uri.rkey}`, 57 57 - icon: "iconify-color i-leaflet", 58 58 - }), 59 59 - "pub.leaflet.publication": (uri) => ({ 60 60 - label: "Leaflet", 61 61 - link: `https://leaflet.pub/lish/${uri.repo}/${uri.rkey}`, 62 62 - icon: "iconify-color i-leaflet", 63 63 - }), 64 50 };

-12

src/utils/types/lexicons.ts

··· 17 17 AppBskyLabelerService, 18 18 ChatBskyActorDeclaration, 19 19 } from "@atcute/bluesky"; 20 20 - import { 21 21 - PubLeafletComment, 22 22 - PubLeafletDocument, 23 23 - PubLeafletGraphSubscription, 24 24 - PubLeafletPublication, 25 25 - } from "@atcute/leaflet"; 26 20 import { 27 21 ShTangledActorProfile, 28 22 ShTangledFeedStar, ··· 85 79 "sh.tangled.repo.pull.status.merged": ShTangledRepoPullStatusMerged.mainSchema, 86 80 "sh.tangled.repo.pull.status.open": ShTangledRepoPullStatusOpen.mainSchema, 87 81 "sh.tangled.knot": ShTangledKnot.mainSchema, 88 88 - 89 89 - // Leaflet 90 90 - "pub.leaflet.comment": PubLeafletComment.mainSchema, 91 91 - "pub.leaflet.document": PubLeafletDocument.mainSchema, 92 92 - "pub.leaflet.graph.subscription": PubLeafletGraphSubscription.mainSchema, 93 93 - "pub.leaflet.publication": PubLeafletPublication.mainSchema, 94 82 };

+1

.gitignore

··· 2 2 dist 3 3 .env 4 4 .DS_Store 5 5 + public/oauth-client-metadata.json

-13

public/oauth-client-metadata.json

··· 1 1 - { 2 2 - "client_id": "https://pdsls.dev/oauth-client-metadata.json", 3 3 - "client_name": "PDSls", 4 4 - "client_uri": "https://pdsls.dev", 5 5 - "logo_uri": "https://pdsls.dev/favicon.ico", 6 6 - "redirect_uris": ["https://pdsls.dev/"], 7 7 - "scope": "atproto repo:*?action=create repo:*?action=update repo:*?action=delete blob:*/*", 8 8 - "grant_types": ["authorization_code", "refresh_token"], 9 9 - "response_types": ["code"], 10 10 - "token_endpoint_auth_method": "none", 11 11 - "application_type": "web", 12 12 - "dpop_bound_access_tokens": true 13 13 - }

+35

scripts/generate-oauth-metadata.js

··· 1 1 + import { mkdirSync, writeFileSync } from "fs"; 2 2 + import { dirname } from "path"; 3 3 + import { fileURLToPath } from "url"; 4 4 + 5 5 + const __filename = fileURLToPath(import.meta.url); 6 6 + const __dirname = dirname(__filename); 7 7 + 8 8 + const domain = process.env.APP_DOMAIN || "pdsls.dev"; 9 9 + const protocol = process.env.APP_PROTOCOL || "https"; 10 10 + const baseUrl = `${protocol}://${domain}`; 11 11 + 12 12 + const metadata = { 13 13 + client_id: `${baseUrl}/oauth-client-metadata.json`, 14 14 + client_name: "PDSls", 15 15 + client_uri: baseUrl, 16 16 + logo_uri: `${baseUrl}/favicon.ico`, 17 17 + redirect_uris: [`${baseUrl}/`], 18 18 + scope: "atproto repo:*?action=create repo:*?action=update repo:*?action=delete blob:*/*", 19 19 + grant_types: ["authorization_code", "refresh_token"], 20 20 + response_types: ["code"], 21 21 + token_endpoint_auth_method: "none", 22 22 + application_type: "web", 23 23 + dpop_bound_access_tokens: true, 24 24 + }; 25 25 + 26 26 + const outputPath = `${__dirname}/../public/oauth-client-metadata.json`; 27 27 + 28 28 + try { 29 29 + mkdirSync(dirname(outputPath), { recursive: true }); 30 30 + writeFileSync(outputPath, JSON.stringify(metadata, null, 2) + "\n"); 31 31 + console.log(`Generated OAuth metadata for ${baseUrl}`); 32 32 + } catch (error) { 33 33 + console.error("Failed to generate OAuth metadata:", error); 34 34 + process.exit(1); 35 35 + }

public/avatar/bad-example.com.jpg

This is a binary file and will not be displayed.

public/avatar/futur.blue.jpg

This is a binary file and will not be displayed.

public/avatar/hailey.at.jpg

This is a binary file and will not be displayed.

public/avatar/jaz.sh.jpg

This is a binary file and will not be displayed.

public/avatar/jcsalterego.bsky.social.jpg

This is a binary file and will not be displayed.

public/avatar/juli.ee.jpg

This is a binary file and will not be displayed.

public/avatar/mary.my.id.jpg

This is a binary file and will not be displayed.

public/avatar/retr0.id.jpg

This is a binary file and will not be displayed.

public/avatar/aylac.top.jpg

This is a binary file and will not be displayed.

public/avatar/computer.fish.jpg

This is a binary file and will not be displayed.

public/avatar/dreary.blacksky.app.jpg

This is a binary file and will not be displayed.

public/avatar/emilia.wtf.jpg

This is a binary file and will not be displayed.

public/avatar/futanari.observer.jpg

This is a binary file and will not be displayed.

public/avatar/mofu.run.jpg

This is a binary file and will not be displayed.

public/avatar/natalie.sh.jpg

This is a binary file and will not be displayed.

public/avatar/nekomimi.pet.jpg

This is a binary file and will not be displayed.

public/avatar/nullekko.moe.jpg

This is a binary file and will not be displayed.

public/avatar/paizuri.moe.jpg

This is a binary file and will not be displayed.

public/avatar/quilling.dev.jpg

This is a binary file and will not be displayed.

public/avatar/rainy.pet.jpg

This is a binary file and will not be displayed.

public/avatar/sapphic.moe.jpg

This is a binary file and will not be displayed.

public/avatar/blooym.dev.jpg

This is a binary file and will not be displayed.

public/avatar/isabelroses.com.jpg

This is a binary file and will not be displayed.

public/avatar/isuggest.selfce.st.jpg

This is a binary file and will not be displayed.

public/avatar/anyaustin.bsky.social.jpg

This is a binary file and will not be displayed.

public/avatar/claire.on-her.computer.jpg

This is a binary file and will not be displayed.

public/avatar/cwonus.org.jpg

This is a binary file and will not be displayed.

public/avatar/number-one-warned.rat.mom.jpg

This is a binary file and will not be displayed.

public/avatar/olaren.dev.jpg

This is a binary file and will not be displayed.

public/avatar/coil-habdle.ebil.club.jpg

This is a binary file and will not be displayed.

+2 -7

package.json

··· 10 10 "build": "vite build", 11 11 "serve": "vite preview" 12 12 }, 13 13 - "pnpm": { 14 14 - "overrides": { 15 15 - "seroval": "^1.4.1" 16 16 - } 17 17 - }, 18 13 "devDependencies": { 19 14 "@iconify-json/lucide": "^1.2.86", 20 15 "@iconify/tailwind4": "^1.2.1", 21 16 "@tailwindcss/vite": "^4.1.18", 22 22 - "prettier": "^3.8.0", 17 17 + "prettier": "^3.8.1", 23 18 "prettier-plugin-organize-imports": "^4.3.0", 24 19 "prettier-plugin-tailwindcss": "^0.7.2", 25 20 "tailwindcss": "^4.1.18", ··· 60 55 "@solidjs/router": "^0.15.4", 61 56 "codemirror": "^6.0.2", 62 57 "native-file-system-adapter": "^3.0.1", 63 63 - "solid-js": "^1.9.10" 58 58 + "solid-js": "^1.9.11" 64 59 }, 65 60 "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a" 66 61 }

+3 -1

src/components/button.tsx

··· 6 6 class?: string; 7 7 classList?: Record<string, boolean | undefined>; 8 8 onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>; 9 9 + ontouchstart?: (e: TouchEvent) => void; 9 10 children?: JSX.Element; 10 11 } 11 12 ··· 16 17 disabled={props.disabled ?? false} 17 18 class={ 18 19 props.class ?? 19 19 - "dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 20 20 + "dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex items-center gap-1 rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300" 20 21 } 21 22 classList={props.classList} 22 23 onClick={props.onClick} 24 24 + ontouchstart={props.ontouchstart} 23 25 > 24 26 {props.children} 25 27 </button>

+4 -2

src/views/labels.tsx

··· 277 277 <Button 278 278 onClick={handleLoadMore} 279 279 disabled={loading()} 280 280 - class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 w-20 items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800" 280 280 + classList={{ "w-20 justify-center": true }} 281 281 > 282 282 <Show 283 283 when={!loading()} 284 284 - fallback={<span class="iconify lucide--loader-circle animate-spin" />} 284 284 + fallback={ 285 285 + <span class="iconify lucide--loader-circle animate-spin text-base" /> 286 286 + } 285 287 > 286 288 Load more 287 289 </Show>

+13 -5

src/views/pds.tsx

··· 253 253 <div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100 pt-2 pb-4"> 254 254 <div class="flex flex-col items-center gap-1 pb-2"> 255 255 <p>{repos()?.length} loaded</p> 256 256 - <Show when={!response.loading && cursor()}> 257 257 - <Button onClick={() => refetch()}>Load more</Button> 258 258 - </Show> 259 259 - <Show when={response.loading}> 260 260 - <span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span> 256 256 + <Show when={cursor()}> 257 257 + <Button 258 258 + onClick={() => refetch()} 259 259 + disabled={response.loading} 260 260 + classList={{ "w-20 justify-center": true }} 261 261 + > 262 262 + <Show 263 263 + when={!response.loading} 264 264 + fallback={<span class="iconify lucide--loader-circle animate-spin text-base" />} 265 265 + > 266 266 + Load more 267 267 + </Show> 268 268 + </Button> 261 269 </Show> 262 270 </div> 263 271 </div>