comparing cb0090bdb5c34a445d35edeee7b16089b25e230c and main on pdsls.dev/pdsls

+6 -2

src/utils/copy.ts

···

       1
       1
       -
       import { setNotif } from "../layout";

     

       1
       1
       +
       import { addNotification, removeNotification } from "../components/notification";

     

       2
       2
        
       

     

       3
       3
        
       export const addToClipboard = (text: string) => {

     

       4
       4
        
         navigator.clipboard.writeText(text);

     

       5
       5
       -
         setNotif({ show: true, icon: "lucide--clipboard-check", text: "Copied to clipboard" });

     

       5
       5
       +
         const id = addNotification({

     

       6
       6
       +
           message: "Copied to clipboard",

     

       7
       7
       +
           type: "success",

     

       8
       8
       +
         });

     

       9
       9
       +
         setTimeout(() => removeNotification(id), 3000);

     

       6
       10
        
       };

+4 -1

src/components/button.tsx

···

       1
       1
        
       import { JSX } from "solid-js";

     

       2
       2
        
       

     

       3
       3
        
       export interface ButtonProps {

     

       4
       4
       +
         type?: "button" | "submit" | "reset" | "menu" | undefined;

     

       5
       5
       +
         disabled?: boolean;

     

       4
       6
        
         class?: string;

     

       5
       7
        
         classList?: Record<string, boolean | undefined>;

     

       6
       8
        
         onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;

     
···

       10
       12
        
       export const Button = (props: ButtonProps) => {

     

       11
       13
        
         return (

     

       12
       14
        
           <button

     

       13
       13
       -
             type="button"

     

       15
       15
       +
             type={props.type ?? "button"}

     

       16
       16
       +
             disabled={props.disabled ?? false}

     

       14
       17
        
             class={

     

       15
       18
        
               props.class ??

     

       16
       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"

+1 -1

public/manifest.json

···

       8
       8
        
         "theme_color": "#1f1f1f",

     

       9
       9
        
         "icons": [

     

       10
       10
        
           {

     

       11
       11
       -
             "src": "/favicon.png",

     

       11
       11
       +
             "src": "/favicon.ico",

     

       12
       12
        
             "type": "image/png",

     

       13
       13
        
             "sizes": "512x512"

     

       14
       14
        
           },

public/headers/sonic.jpg

This is a binary file and will not be displayed.

-66

src/utils/types/at-uri.ts

···

       1
       1
       -
       type Did<TMethod extends string = string> = `did:${TMethod}:${string}`;

     

       2
       2
       -
       

     

       3
       3
       -
       type Nsid = `${string}.${string}.${string}`;

     

       4
       4
       -
       

     

       5
       5
       -
       type RecordKey = string;

     

       6
       6
       -
       

     

       7
       7
       -
       const DID_RE = /^did:([a-z]+):([a-zA-Z0-9._:%\-]*[a-zA-Z0-9._\-])$/;

     

       8
       8
       -
       

     

       9
       9
       -
       const NSID_RE =

     

       10
       10
       -
         /^[a-zA-Z](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?:\.[a-zA-Z](?:[a-zA-Z0-9]{0,62})?)$/;

     

       11
       11
       -
       

     

       12
       12
       -
       const RECORD_KEY_RE = /^(?!\.{1,2}$)[a-zA-Z0-9_~.:-]{1,512}$/;

     

       13
       13
       -
       

     

       14
       14
       -
       export const ATURI_RE =

     

       15
       15
       -
         /^at:\/\/([a-zA-Z0-9._:%-]+)(?:\/([a-zA-Z0-9-.]+)(?:\/([a-zA-Z0-9._~:@!$&%')(*+,;=-]+))?)?(?:#(\/[a-zA-Z0-9._~:@!$&%')(*+,;=\-[\]/\\]*))?$/;

     

       16
       16
       -
       

     

       17
       17
       -
       const isDid = (input: unknown): input is Did => {

     

       18
       18
       -
         return (

     

       19
       19
       -
           typeof input === "string" && input.length >= 7 && input.length <= 2048 && DID_RE.test(input)

     

       20
       20
       -
         );

     

       21
       21
       -
       };

     

       22
       22
       -
       

     

       23
       23
       -
       const isNsid = (input: unknown): input is Nsid => {

     

       24
       24
       -
         return (

     

       25
       25
       -
           typeof input === "string" && input.length >= 5 && input.length <= 317 && NSID_RE.test(input)

     

       26
       26
       -
         );

     

       27
       27
       -
       };

     

       28
       28
       -
       

     

       29
       29
       -
       const isRecordKey = (input: unknown): input is RecordKey => {

     

       30
       30
       -
         return (

     

       31
       31
       -
           typeof input === "string" &&

     

       32
       32
       -
           input.length >= 1 &&

     

       33
       33
       -
           input.length <= 512 &&

     

       34
       34
       -
           RECORD_KEY_RE.test(input)

     

       35
       35
       -
         );

     

       36
       36
       -
       };

     

       37
       37
       -
       

     

       38
       38
       -
       export interface AddressedAtUri {

     

       39
       39
       -
         repo: Did;

     

       40
       40
       -
         collection: Nsid;

     

       41
       41
       -
         rkey: string;

     

       42
       42
       -
         fragment: string | undefined;

     

       43
       43
       -
       }

     

       44
       44
       -
       

     

       45
       45
       -
       export const parseAddressedAtUri = (str: string): AddressedAtUri => {

     

       46
       46
       -
         const match = ATURI_RE.exec(str);

     

       47
       47
       -
         assert(match !== null, `invalid addressed-at-uri: ${str}`);

     

       48
       48
       -
       

     

       49
       49
       -
         const [, r, c, k, f] = match;

     

       50
       50
       -
         assert(isDid(r), `invalid repo in addressed-at-uri: ${r}`);

     

       51
       51
       -
         assert(isNsid(c), `invalid collection in addressed-at-uri: ${c}`);

     

       52
       52
       -
         assert(isRecordKey(k), `invalid rkey in addressed-at-uri: ${k}`);

     

       53
       53
       -
       

     

       54
       54
       -
         return {

     

       55
       55
       -
           repo: r,

     

       56
       56
       -
           collection: c,

     

       57
       57
       -
           rkey: k,

     

       58
       58
       -
           fragment: f,

     

       59
       59
       -
         };

     

       60
       60
       -
       };

     

       61
       61
       -
       

     

       62
       62
       -
       function assert(condition: boolean, message: string): asserts condition {

     

       63
       63
       -
         if (!condition) {

     

       64
       64
       -
           throw new Error(message);

     

       65
       65
       -
         }

     

       66
       66
       -
       }

+22 -1

vite.config.ts

···

       1
       1
        
       import tailwindcss from "@tailwindcss/vite";

     

       2
       2
       +
       import { execSync } from "child_process";

     

       2
       3
        
       import { defineConfig } from "vite";

     

       3
       4
        
       import solidPlugin from "vite-plugin-solid";

     

       4
       5
        
       import metadata from "./public/oauth-client-metadata.json";

     
···

       6
       7
        
       const SERVER_HOST = "127.0.0.1";

     

       7
       8
        
       const SERVER_PORT = 13213;

     

       8
       9
        
       

     

       10
       10
       +
       const getVersion = (): string => {

     

       11
       11
       +
         try {

     

       12
       12
       +
           const describe = execSync("git describe --tags --long --dirty --always").toString().trim();

     

       13
       13
       +
       

     

       14
       14
       +
           const match = describe.match(/^v?(.+?)-(\d+)-g([a-f0-9]+)(-dirty)?$/);

     

       15
       15
       +
       

     

       16
       16
       +
           if (match) {

     

       17
       17
       +
             const [, version, commits, hash, dirty] = match;

     

       18
       18
       +
             if (commits === "0") {

     

       19
       19
       +
               return `v${version}${dirty ? "-dirty" : ""}`;

     

       20
       20
       +
             }

     

       21
       21
       +
             return `v${version}.dev${commits}+g${hash}${dirty ? "-dirty" : ""}`;

     

       22
       22
       +
           }

     

       23
       23
       +
       

     

       24
       24
       +
           return `v0.0.0.dev+g${describe}`;

     

       25
       25
       +
         } catch {

     

       26
       26
       +
           return "v0.0.0-unknown";

     

       27
       27
       +
         }

     

       28
       28
       +
       };

     

       29
       29
       +
       

     

       9
       30
        
       export default defineConfig({

     

       10
       31
        
         plugins: [

     

       11
       32
        
           tailwindcss(),

     

       12
       33
        
           solidPlugin(),

     

       13
       13
       -
           // Injects OAuth-related variables

     

       14
       34
        
           {

     

       15
       35
        
             name: "oauth",

     

       16
       36
        
             config(_conf, { command }) {

     
···

       35
       55
        
       

     

       36
       56
        
               process.env.VITE_CLIENT_URI = metadata.client_uri;

     

       37
       57
        
               process.env.VITE_OAUTH_SCOPE = metadata.scope;

     

       58
       58
       +
               process.env.VITE_APP_VERSION = getVersion();

     

       38
       59
        
             },

     

       39
       60
        
           },

     

       40
       61
        
         ],

-10

src/utils/app-urls.ts

···

       3
       3
        
       export enum App {

     

       4
       4
        
         Bluesky,

     

       5
       5
        
         Tangled,

     

       6
       6
       -
         Whitewind,

     

       7
       6
        
         Frontpage,

     

       8
       7
        
         Pinksea,

     

       9
       8
        
         Linkat,

     
···

       12
       11
        
       export const appName = {

     

       13
       12
        
         [App.Bluesky]: "Bluesky",

     

       14
       13
        
         [App.Tangled]: "Tangled",

     

       15
       15
       -
         [App.Whitewind]: "Whitewind",

     

       16
       14
        
         [App.Frontpage]: "Frontpage",

     

       17
       15
        
         [App.Pinksea]: "Pinksea",

     

       18
       16
        
         [App.Linkat]: "Linkat",

     
···

       29
       27
        
         "main.bsky.dev": App.Bluesky,

     

       30
       28
        
         "social.daniela.lol": App.Bluesky,

     

       31
       29
        
         "tangled.org": App.Tangled,

     

       32
       32
       -
         "whtwnd.com": App.Whitewind,

     

       33
       30
        
         "frontpage.fyi": App.Frontpage,

     

       34
       31
        
         "pinksea.art": App.Pinksea,

     

       35
       32
        
         "linkat.blue": App.Linkat,

     
···

       92
       89
        
       

     

       93
       90
        
           return `at://${user}`;

     

       94
       91
        
         },

     

       95
       95
       -
         [App.Whitewind]: (path) => {

     

       96
       96
       -
           if (path.length === 2) {

     

       97
       97
       -
             return `at://${path[0]}/com.whtwnd.blog.entry/${path[1]}`;

     

       98
       98
       -
           }

     

       99
       99
       -
       

     

       100
       100
       -
           return `at://${path[0]}/com.whtwnd.blog.entry`;

     

       101
       101
       -
         },

     

       102
       92
        
         [App.Frontpage]: (path) => {

     

       103
       93
        
           if (path.length === 3) {

     

       104
       94
        
             return `at://${path[1]}/fyi.unravel.frontpage.post/${path[2]}`;

+7 -1

src/components/video-player.tsx

···

       22
       22
        
         });

     

       23
       23
        
       

     

       24
       24
        
         return (

     

       25
       25
       -
           <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline onLoadedData={props.onLoad}>

     

       25
       25
       +
           <video

     

       26
       26
       +
             ref={video}

     

       27
       27
       +
             class="max-h-80 max-w-[20rem]"

     

       28
       28
       +
             controls

     

       29
       29
       +
             playsinline

     

       30
       30
       +
             onLoadedData={props.onLoad}

     

       31
       31
       +
           >

     

       26
       32
        
             <source type="video/mp4" />

     

       27
       33
        
           </video>

     

       28
       34
        
         );

+15 -15

src/utils/hooks/debounced.ts

···

       1
       1
       -
       import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';

     

       1
       1
       +
       import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";

     

       2
       2
        
       

     

       3
       3
        
       export const createDebouncedValue = <T>(

     

       4
       4
       -
       	accessor: Accessor<T>,

     

       5
       5
       -
       	delay: number,

     

       6
       6
       -
       	equals?: false | ((prev: T, next: T) => boolean),

     

       4
       4
       +
         accessor: Accessor<T>,

     

       5
       5
       +
         delay: number,

     

       6
       6
       +
         equals?: false | ((prev: T, next: T) => boolean),

     

       7
       7
        
       ): Accessor<T> => {

     

       8
       8
       -
       	const initial = accessor();

     

       9
       9
       -
       	const [state, setState] = createSignal(initial, { equals });

     

       8
       8
       +
         const initial = accessor();

     

       9
       9
       +
         const [state, setState] = createSignal(initial, { equals });

     

       10
       10
        
       

     

       11
       11
       -
       	createEffect((prev: T) => {

     

       12
       12
       -
       		const next = accessor();

     

       11
       11
       +
         createEffect((prev: T) => {

     

       12
       12
       +
           const next = accessor();

     

       13
       13
        
       

     

       14
       14
       -
       		if (prev !== next) {

     

       15
       15
       -
       			const timeout = setTimeout(() => setState(() => next), delay);

     

       16
       16
       -
       			onCleanup(() => clearTimeout(timeout));

     

       17
       17
       -
       		}

     

       14
       14
       +
           if (prev !== next) {

     

       15
       15
       +
             const timeout = setTimeout(() => setState(() => next), delay);

     

       16
       16
       +
             onCleanup(() => clearTimeout(timeout));

     

       17
       17
       +
           }

     

       18
       18
        
       

     

       19
       19
       -
       		return next;

     

       20
       20
       -
       	}, initial);

     

       19
       19
       +
           return next;

     

       20
       20
       +
         }, initial);

     

       21
       21
        
       

     

       22
       22
       -
       	return state;

     

       22
       22
       +
         return state;

     

       23
       23
        
       };

+30

src/utils/key.ts

···

       1
       1
       +
       import { parseDidKey, parsePublicMultikey } from "@atcute/crypto";

     

       2
       2
       +
       import { fromBase58Btc } from "@atcute/multibase";

     

       3
       3
       +
       

     

       4
       4
       +
       export const detectKeyType = (key: string): string => {

     

       5
       5
       +
         try {

     

       6
       6
       +
           return parsePublicMultikey(key).type;

     

       7
       7
       +
         } catch (e) {

     

       8
       8
       +
           try {

     

       9
       9
       +
             const bytes = fromBase58Btc(key.startsWith("z") ? key.slice(1) : key);

     

       10
       10
       +
             if (bytes.length >= 2) {

     

       11
       11
       +
               const type = (bytes[0] << 8) | bytes[1];

     

       12
       12
       +
               if (type === 0xed01) {

     

       13
       13
       +
                 return "ed25519";

     

       14
       14
       +
               }

     

       15
       15
       +
             }

     

       16
       16
       +
           } catch {}

     

       17
       17
       +
           return "unknown";

     

       18
       18
       +
         }

     

       19
       19
       +
       };

     

       20
       20
       +
       

     

       21
       21
       +
       export const detectDidKeyType = (key: string): string => {

     

       22
       22
       +
         try {

     

       23
       23
       +
           return parseDidKey(key).type;

     

       24
       24
       +
         } catch (e) {

     

       25
       25
       +
           if (key.startsWith("did:key:")) {

     

       26
       26
       +
             return detectKeyType(key.slice(8));

     

       27
       27
       +
           }

     

       28
       28
       +
           return "unknown";

     

       29
       29
       +
         }

     

       30
       30
       +
       };

+13

src/auth/oauth-config.ts

···

       1
       1
       +
       import { configureOAuth, defaultIdentityResolver } from "@atcute/oauth-browser-client";

     

       2
       2
       +
       import { didDocumentResolver, handleResolver } from "../utils/api";

     

       3
       3
       +
       

     

       4
       4
       +
       configureOAuth({

     

       5
       5
       +
         metadata: {

     

       6
       6
       +
           client_id: import.meta.env.VITE_OAUTH_CLIENT_ID,

     

       7
       7
       +
           redirect_uri: import.meta.env.VITE_OAUTH_REDIRECT_URL,

     

       8
       8
       +
         },

     

       9
       9
       +
         identityResolver: defaultIdentityResolver({

     

       10
       10
       +
           handleResolver: handleResolver,

     

       11
       11
       +
           didDocumentResolver: didDocumentResolver,

     

       12
       12
       +
         }),

     

       13
       13
       +
       });

+77

src/auth/scope-flow.ts

···

       1
       1
       +
       import { isDid, isHandle } from "@atcute/lexicons/syntax";

     

       2
       2
       +
       import { createAuthorizationUrl } from "@atcute/oauth-browser-client";

     

       3
       3
       +
       import { createSignal } from "solid-js";

     

       4
       4
       +
       

     

       5
       5
       +
       interface UseOAuthScopeFlowOptions {

     

       6
       6
       +
         onError?: (error: unknown) => void;

     

       7
       7
       +
         onRedirecting?: () => void;

     

       8
       8
       +
         beforeRedirect?: (account: string) => Promise<void>;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       export const useOAuthScopeFlow = (options: UseOAuthScopeFlowOptions = {}) => {

     

       12
       12
       +
         const [showScopeSelector, setShowScopeSelector] = createSignal(false);

     

       13
       13
       +
         const [pendingAccount, setPendingAccount] = createSignal("");

     

       14
       14
       +
         const [shouldForceRedirect, setShouldForceRedirect] = createSignal(false);

     

       15
       15
       +
       

     

       16
       16
       +
         const initiate = (account: string) => {

     

       17
       17
       +
           if (!account) return;

     

       18
       18
       +
           setPendingAccount(account);

     

       19
       19
       +
           setShouldForceRedirect(false);

     

       20
       20
       +
           setShowScopeSelector(true);

     

       21
       21
       +
         };

     

       22
       22
       +
       

     

       23
       23
       +
         const initiateWithRedirect = (account: string) => {

     

       24
       24
       +
           if (!account) return;

     

       25
       25
       +
           setPendingAccount(account);

     

       26
       26
       +
           setShouldForceRedirect(true);

     

       27
       27
       +
           setShowScopeSelector(true);

     

       28
       28
       +
         };

     

       29
       29
       +
       

     

       30
       30
       +
         const complete = async (scopeString: string, scopeIds: string) => {

     

       31
       31
       +
           try {

     

       32
       32
       +
             const account = pendingAccount();

     

       33
       33
       +
       

     

       34
       34
       +
             if (options.beforeRedirect && !shouldForceRedirect()) {

     

       35
       35
       +
               try {

     

       36
       36
       +
                 await options.beforeRedirect(account);

     

       37
       37
       +
                 setShowScopeSelector(false);

     

       38
       38
       +
                 return;

     

       39
       39
       +
               } catch {}

     

       40
       40
       +
             }

     

       41
       41
       +
       

     

       42
       42
       +
             localStorage.setItem("pendingScopes", scopeIds);

     

       43
       43
       +
       

     

       44
       44
       +
             options.onRedirecting?.();

     

       45
       45
       +
       

     

       46
       46
       +
             const authUrl = await createAuthorizationUrl({

     

       47
       47
       +
               scope: scopeString,

     

       48
       48
       +
               target:

     

       49
       49
       +
                 isHandle(account) || isDid(account) ?

     

       50
       50
       +
                   { type: "account", identifier: account }

     

       51
       51
       +
                 : { type: "pds", serviceUrl: account },

     

       52
       52
       +
             });

     

       53
       53
       +
       

     

       54
       54
       +
             await new Promise((resolve) => setTimeout(resolve, 250));

     

       55
       55
       +
             location.assign(authUrl);

     

       56
       56
       +
           } catch (e) {

     

       57
       57
       +
             console.error(e);

     

       58
       58
       +
             options.onError?.(e);

     

       59
       59
       +
             setShowScopeSelector(false);

     

       60
       60
       +
           }

     

       61
       61
       +
         };

     

       62
       62
       +
       

     

       63
       63
       +
         const cancel = () => {

     

       64
       64
       +
           setShowScopeSelector(false);

     

       65
       65
       +
           setPendingAccount("");

     

       66
       66
       +
           setShouldForceRedirect(false);

     

       67
       67
       +
         };

     

       68
       68
       +
       

     

       69
       69
       +
         return {

     

       70
       70
       +
           showScopeSelector,

     

       71
       71
       +
           pendingAccount,

     

       72
       72
       +
           initiate,

     

       73
       73
       +
           initiateWithRedirect,

     

       74
       74
       +
           complete,

     

       75
       75
       +
           cancel,

     

       76
       76
       +
         };

     

       77
       77
       +
       };

+53

src/auth/scope-utils.ts

···

       1
       1
       +
       import { agent, sessions } from "./state";

     

       2
       2
       +
       

     

       3
       3
       +
       export const GRANULAR_SCOPES = [

     

       4
       4
       +
         {

     

       5
       5
       +
           id: "create",

     

       6
       6
       +
           scope: "repo:*?action=create",

     

       7
       7
       +
           label: "Create records",

     

       8
       8
       +
         },

     

       9
       9
       +
         {

     

       10
       10
       +
           id: "update",

     

       11
       11
       +
           scope: "repo:*?action=update",

     

       12
       12
       +
           label: "Update records",

     

       13
       13
       +
         },

     

       14
       14
       +
         {

     

       15
       15
       +
           id: "delete",

     

       16
       16
       +
           scope: "repo:*?action=delete",

     

       17
       17
       +
           label: "Delete records",

     

       18
       18
       +
         },

     

       19
       19
       +
         {

     

       20
       20
       +
           id: "blob",

     

       21
       21
       +
           scope: "blob:*/*",

     

       22
       22
       +
           label: "Upload blobs",

     

       23
       23
       +
         },

     

       24
       24
       +
       ];

     

       25
       25
       +
       

     

       26
       26
       +
       export const BASE_SCOPES = ["atproto"];

     

       27
       27
       +
       

     

       28
       28
       +
       export const buildScopeString = (selected: Set<string>): string => {

     

       29
       29
       +
         const granular = GRANULAR_SCOPES.filter((s) => selected.has(s.id)).map((s) => s.scope);

     

       30
       30
       +
         return [...BASE_SCOPES, ...granular].join(" ");

     

       31
       31
       +
       };

     

       32
       32
       +
       

     

       33
       33
       +
       export const scopeIdsToString = (scopeIds: Set<string>): string => {

     

       34
       34
       +
         return ["atproto", ...Array.from(scopeIds)].join(",");

     

       35
       35
       +
       };

     

       36
       36
       +
       

     

       37
       37
       +
       export const parseScopeString = (scopeIdsString: string): Set<string> => {

     

       38
       38
       +
         if (!scopeIdsString) return new Set();

     

       39
       39
       +
         const ids = scopeIdsString.split(",").filter(Boolean);

     

       40
       40
       +
         return new Set(ids.filter((id) => id !== "atproto"));

     

       41
       41
       +
       };

     

       42
       42
       +
       

     

       43
       43
       +
       export const hasScope = (grantedScopes: string | undefined, scopeId: string): boolean => {

     

       44
       44
       +
         if (!grantedScopes) return false;

     

       45
       45
       +
         return grantedScopes.split(",").includes(scopeId);

     

       46
       46
       +
       };

     

       47
       47
       +
       

     

       48
       48
       +
       export const hasUserScope = (scopeId: string): boolean => {

     

       49
       49
       +
         if (!agent()) return false;

     

       50
       50
       +
         const grantedScopes = sessions[agent()!.sub]?.grantedScopes;

     

       51
       51
       +
         if (!grantedScopes) return true;

     

       52
       52
       +
         return hasScope(grantedScopes, scopeId);

     

       53
       53
       +
       };

+14

src/auth/state.ts

···

       1
       1
       +
       import { OAuthUserAgent } from "@atcute/oauth-browser-client";

     

       2
       2
       +
       import { createSignal } from "solid-js";

     

       3
       3
       +
       import { createStore } from "solid-js/store";

     

       4
       4
       +
       

     

       5
       5
       +
       export type Account = {

     

       6
       6
       +
         signedIn: boolean;

     

       7
       7
       +
         handle?: string;

     

       8
       8
       +
         grantedScopes?: string;

     

       9
       9
       +
       };

     

       10
       10
       +
       

     

       11
       11
       +
       export type Sessions = Record<string, Account>;

     

       12
       12
       +
       

     

       13
       13
       +
       export const [agent, setAgent] = createSignal<OAuthUserAgent | undefined>();

     

       14
       14
       +
       export const [sessions, setSessions] = createStore<Sessions>();

-143

src/components/login.tsx

···

       1
       1
       -
       import { Client } from "@atcute/client";

     

       2
       2
       -
       import { Did } from "@atcute/lexicons";

     

       3
       3
       -
       import { isDid, isHandle } from "@atcute/lexicons/syntax";

     

       4
       4
       -
       import {

     

       5
       5
       -
         configureOAuth,

     

       6
       6
       -
         createAuthorizationUrl,

     

       7
       7
       -
         defaultIdentityResolver,

     

       8
       8
       -
         finalizeAuthorization,

     

       9
       9
       -
         getSession,

     

       10
       10
       -
         OAuthUserAgent,

     

       11
       11
       -
         type Session,

     

       12
       12
       -
       } from "@atcute/oauth-browser-client";

     

       13
       13
       -
       import { createSignal, Show } from "solid-js";

     

       14
       14
       -
       import { didDocumentResolver, handleResolver } from "../utils/api";

     

       15
       15
       -
       

     

       16
       16
       -
       configureOAuth({

     

       17
       17
       -
         metadata: {

     

       18
       18
       -
           client_id: import.meta.env.VITE_OAUTH_CLIENT_ID,

     

       19
       19
       -
           redirect_uri: import.meta.env.VITE_OAUTH_REDIRECT_URL,

     

       20
       20
       -
         },

     

       21
       21
       -
         identityResolver: defaultIdentityResolver({

     

       22
       22
       -
           handleResolver: handleResolver,

     

       23
       23
       -
           didDocumentResolver: didDocumentResolver,

     

       24
       24
       -
         }),

     

       25
       25
       -
       });

     

       26
       26
       -
       

     

       27
       27
       -
       export const [agent, setAgent] = createSignal<OAuthUserAgent | undefined>();

     

       28
       28
       -
       

     

       29
       29
       -
       type Account = {

     

       30
       30
       -
         signedIn: boolean;

     

       31
       31
       -
         handle?: string;

     

       32
       32
       -
       };

     

       33
       33
       -
       

     

       34
       34
       -
       export type Sessions = Record<string, Account>;

     

       35
       35
       -
       

     

       36
       36
       -
       const Login = () => {

     

       37
       37
       -
         const [notice, setNotice] = createSignal("");

     

       38
       38
       -
         const [loginInput, setLoginInput] = createSignal("");

     

       39
       39
       -
       

     

       40
       40
       -
         const login = async (handle: string) => {

     

       41
       41
       -
           try {

     

       42
       42
       -
             setNotice("");

     

       43
       43
       -
             if (!handle) return;

     

       44
       44
       -
             setNotice(`Contacting your data server...`);

     

       45
       45
       -
             const authUrl = await createAuthorizationUrl({

     

       46
       46
       -
               scope: import.meta.env.VITE_OAUTH_SCOPE,

     

       47
       47
       -
               target:

     

       48
       48
       -
                 isHandle(handle) || isDid(handle) ?

     

       49
       49
       -
                   { type: "account", identifier: handle }

     

       50
       50
       -
                 : { type: "pds", serviceUrl: handle },

     

       51
       51
       -
             });

     

       52
       52
       -
       

     

       53
       53
       -
             setNotice(`Redirecting...`);

     

       54
       54
       -
             await new Promise((resolve) => setTimeout(resolve, 250));

     

       55
       55
       -
       

     

       56
       56
       -
             location.assign(authUrl);

     

       57
       57
       -
           } catch (e) {

     

       58
       58
       -
             console.error(e);

     

       59
       59
       -
             setNotice(`${e}`);

     

       60
       60
       -
           }

     

       61
       61
       -
         };

     

       62
       62
       -
       

     

       63
       63
       -
         return (

     

       64
       64
       -
           <form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>

     

       65
       65
       -
             <label for="username" class="hidden">

     

       66
       66
       -
               Add account

     

       67
       67
       -
             </label>

     

       68
       68
       -
             <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">

     

       69
       69
       -
               <label

     

       70
       70
       -
                 for="username"

     

       71
       71
       -
                 class="iconify lucide--user-round-plus shrink-0 text-neutral-500 dark:text-neutral-400"

     

       72
       72
       -
               ></label>

     

       73
       73
       -
               <input

     

       74
       74
       -
                 type="text"

     

       75
       75
       -
                 spellcheck={false}

     

       76
       76
       -
                 placeholder="user.bsky.social"

     

       77
       77
       -
                 id="username"

     

       78
       78
       -
                 name="username"

     

       79
       79
       -
                 autocomplete="username"

     

       80
       80
       -
                 aria-label="Your AT Protocol handle"

     

       81
       81
       -
                 class="grow py-1 select-none placeholder:text-sm focus:outline-none"

     

       82
       82
       -
                 onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       83
       83
       -
               />

     

       84
       84
       -
               <button

     

       85
       85
       -
                 onclick={() => login(loginInput())}

     

       86
       86
       -
                 class="flex items-center rounded-md p-1 hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"

     

       87
       87
       -
               >

     

       88
       88
       -
                 <span class="iconify lucide--log-in"></span>

     

       89
       89
       -
               </button>

     

       90
       90
       -
             </div>

     

       91
       91
       -
             <Show when={notice()}>

     

       92
       92
       -
               <div class="text-sm">{notice()}</div>

     

       93
       93
       -
             </Show>

     

       94
       94
       -
           </form>

     

       95
       95
       -
         );

     

       96
       96
       -
       };

     

       97
       97
       -
       

     

       98
       98
       -
       const retrieveSession = async () => {

     

       99
       99
       -
         const init = async (): Promise<Session | undefined> => {

     

       100
       100
       -
           const params = new URLSearchParams(location.hash.slice(1));

     

       101
       101
       -
       

     

       102
       102
       -
           if (params.has("state") && (params.has("code") || params.has("error"))) {

     

       103
       103
       -
             history.replaceState(null, "", location.pathname + location.search);

     

       104
       104
       -
       

     

       105
       105
       -
             const auth = await finalizeAuthorization(params);

     

       106
       106
       -
             const did = auth.session.info.sub;

     

       107
       107
       -
       

     

       108
       108
       -
             localStorage.setItem("lastSignedIn", did);

     

       109
       109
       -
       

     

       110
       110
       -
             const sessions = localStorage.getItem("sessions");

     

       111
       111
       -
             const newSessions: Sessions = sessions ? JSON.parse(sessions) : { [did]: {} };

     

       112
       112
       -
             newSessions[did] = { signedIn: true };

     

       113
       113
       -
             localStorage.setItem("sessions", JSON.stringify(newSessions));

     

       114
       114
       -
             return auth.session;

     

       115
       115
       -
           } else {

     

       116
       116
       -
             const lastSignedIn = localStorage.getItem("lastSignedIn");

     

       117
       117
       -
       

     

       118
       118
       -
             if (lastSignedIn) {

     

       119
       119
       -
               const sessions = localStorage.getItem("sessions");

     

       120
       120
       -
               const newSessions: Sessions = sessions ? JSON.parse(sessions) : {};

     

       121
       121
       -
               try {

     

       122
       122
       -
                 const session = await getSession(lastSignedIn as Did);

     

       123
       123
       -
                 const rpc = new Client({ handler: new OAuthUserAgent(session) });

     

       124
       124
       -
                 const res = await rpc.get("com.atproto.server.getSession");

     

       125
       125
       -
                 newSessions[lastSignedIn].signedIn = true;

     

       126
       126
       -
                 localStorage.setItem("sessions", JSON.stringify(newSessions));

     

       127
       127
       -
                 if (!res.ok) throw res.data.error;

     

       128
       128
       -
                 return session;

     

       129
       129
       -
               } catch (err) {

     

       130
       130
       -
                 newSessions[lastSignedIn].signedIn = false;

     

       131
       131
       -
                 localStorage.setItem("sessions", JSON.stringify(newSessions));

     

       132
       132
       -
                 throw err;

     

       133
       133
       -
               }

     

       134
       134
       -
             }

     

       135
       135
       -
           }

     

       136
       136
       -
         };

     

       137
       137
       -
       

     

       138
       138
       -
         const session = await init();

     

       139
       139
       -
       

     

       140
       140
       -
         if (session) setAgent(new OAuthUserAgent(session));

     

       141
       141
       -
       };

     

       142
       142
       -
       

     

       143
       143
       -
       export { Login, retrieveSession };

public/fonts/Figtree[wght].woff2

This is a binary file and will not be displayed.

src/components/create.tsx

···

       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;

     

       61
       62
        
       

     

       62
       63
        
             const key = props.create ? "n" : "e";

     

       63
       64
        
             if (ev.key === key) {

+109

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 { Button } from "../button.jsx";

     

       6
       6
       +
       import { TextInput } from "../text-input.jsx";

     

       7
       7
       +
       import { editorInstance } from "./state";

     

       8
       8
       +
       

     

       9
       9
       +
       export const FileUpload = (props: {

     

       10
       10
       +
         file: File;

     

       11
       11
       +
         blobInput: HTMLInputElement;

     

       12
       12
       +
         onClose: () => void;

     

       13
       13
       +
       }) => {

     

       14
       14
       +
         const [uploading, setUploading] = createSignal(false);

     

       15
       15
       +
         const [error, setError] = createSignal("");

     

       16
       16
       +
       

     

       17
       17
       +
         onCleanup(() => (props.blobInput.value = ""));

     

       18
       18
       +
       

     

       19
       19
       +
         const formatFileSize = (bytes: number) => {

     

       20
       20
       +
           if (bytes === 0) return "0 Bytes";

     

       21
       21
       +
           const k = 1024;

     

       22
       22
       +
           const sizes = ["Bytes", "KB", "MB", "GB"];

     

       23
       23
       +
           const i = Math.floor(Math.log(bytes) / Math.log(k));

     

       24
       24
       +
           return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];

     

       25
       25
       +
         };

     

       26
       26
       +
       

     

       27
       27
       +
         const uploadBlob = async () => {

     

       28
       28
       +
           let blob: Blob;

     

       29
       29
       +
       

     

       30
       30
       +
           const mimetype = (document.getElementById("mimetype") as HTMLInputElement)?.value;

     

       31
       31
       +
           (document.getElementById("mimetype") as HTMLInputElement).value = "";

     

       32
       32
       +
           if (mimetype) blob = new Blob([props.file], { type: mimetype });

     

       33
       33
       +
           else blob = props.file;

     

       34
       34
       +
       

     

       35
       35
       +
           if ((document.getElementById("exif-rm") as HTMLInputElement).checked) {

     

       36
       36
       +
             const exifRemoved = remove(new Uint8Array(await blob.arrayBuffer()));

     

       37
       37
       +
             if (exifRemoved !== null) blob = new Blob([exifRemoved], { type: blob.type });

     

       38
       38
       +
           }

     

       39
       39
       +
       

     

       40
       40
       +
           const rpc = new Client({ handler: agent()! });

     

       41
       41
       +
           setUploading(true);

     

       42
       42
       +
           const res = await rpc.post("com.atproto.repo.uploadBlob", {

     

       43
       43
       +
             input: blob,

     

       44
       44
       +
           });

     

       45
       45
       +
           setUploading(false);

     

       46
       46
       +
           if (!res.ok) {

     

       47
       47
       +
             setError(res.data.error);

     

       48
       48
       +
             return;

     

       49
       49
       +
           }

     

       50
       50
       +
           editorInstance.view.dispatch({

     

       51
       51
       +
             changes: {

     

       52
       52
       +
               from: editorInstance.view.state.selection.main.head,

     

       53
       53
       +
               insert: JSON.stringify(res.data.blob, null, 2),

     

       54
       54
       +
             },

     

       55
       55
       +
           });

     

       56
       56
       +
           props.onClose();

     

       57
       57
       +
         };

     

       58
       58
       +
       

     

       59
       59
       +
         return (

     

       60
       60
       +
           <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -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">

     

       61
       61
       +
             <h2 class="mb-2 font-semibold">Upload blob</h2>

     

       62
       62
       +
             <div class="flex flex-col gap-2 text-sm">

     

       63
       63
       +
               <div class="flex flex-col gap-1">

     

       64
       64
       +
                 <p class="flex gap-1">

     

       65
       65
       +
                   <span class="truncate">{props.file.name}</span>

     

       66
       66
       +
                   <span class="shrink-0 text-neutral-600 dark:text-neutral-400">

     

       67
       67
       +
                     ({formatFileSize(props.file.size)})

     

       68
       68
       +
                   </span>

     

       69
       69
       +
                 </p>

     

       70
       70
       +
               </div>

     

       71
       71
       +
               <div class="flex items-center gap-x-2">

     

       72
       72
       +
                 <label for="mimetype" class="shrink-0 select-none">

     

       73
       73
       +
                   MIME type

     

       74
       74
       +
                 </label>

     

       75
       75
       +
                 <TextInput id="mimetype" placeholder={props.file.type} />

     

       76
       76
       +
               </div>

     

       77
       77
       +
               <div class="flex items-center gap-1">

     

       78
       78
       +
                 <input id="exif-rm" type="checkbox" checked />

     

       79
       79
       +
                 <label for="exif-rm" class="select-none">

     

       80
       80
       +
                   Remove EXIF data

     

       81
       81
       +
                 </label>

     

       82
       82
       +
               </div>

     

       83
       83
       +
               <p class="text-xs text-neutral-600 dark:text-neutral-400">

     

       84
       84
       +
                 Metadata will be pasted after the cursor

     

       85
       85
       +
               </p>

     

       86
       86
       +
               <Show when={error()}>

     

       87
       87
       +
                 <span class="text-red-500 dark:text-red-400">Error: {error()}</span>

     

       88
       88
       +
               </Show>

     

       89
       89
       +
               <div class="flex justify-between gap-2">

     

       90
       90
       +
                 <Button onClick={props.onClose}>Cancel</Button>

     

       91
       91
       +
                 <Show when={uploading()}>

     

       92
       92
       +
                   <div class="flex items-center gap-1">

     

       93
       93
       +
                     <span class="iconify lucide--loader-circle animate-spin"></span>

     

       94
       94
       +
                     <span>Uploading</span>

     

       95
       95
       +
                   </div>

     

       96
       96
       +
                 </Show>

     

       97
       97
       +
                 <Show when={!uploading()}>

     

       98
       98
       +
                   <Button

     

       99
       99
       +
                     onClick={uploadBlob}

     

       100
       100
       +
                     class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"

     

       101
       101
       +
                   >

     

       102
       102
       +
                     Upload

     

       103
       103
       +
                   </Button>

     

       104
       104
       +
                 </Show>

     

       105
       105
       +
               </div>

     

       106
       106
       +
             </div>

     

       107
       107
       +
           </div>

     

       108
       108
       +
         );

     

       109
       109
       +
       };

+87

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
       +
           <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -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">

     

       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
       +
                     class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"

     

       79
       79
       +
                   >

     

       80
       80
       +
                     Insert

     

       81
       81
       +
                   </Button>

     

       82
       82
       +
                 </Show>

     

       83
       83
       +
               </div>

     

       84
       84
       +
             </form>

     

       85
       85
       +
           </div>

     

       86
       86
       +
         );

     

       87
       87
       +
       };

+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
       +
       };

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>();

src/components/editor.tsx

···

       48
       48
        
               keymap.of([indentWithTab]),

     

       49
       49
        
               linter(jsonParseLinter()),

     

       50
       50
        
               themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight),

     

       51
       51
       +
               EditorView.lineWrapping,

     

       51
       52
        
             ],

     

       52
       53
        
           });

     

       53
       54
        
           editorInstance.view = view;

+29 -48

src/components/create/index.tsx

···

       20
       20
        
       import { addNotification, removeNotification } from "../notification.jsx";

     

       21
       21
        
       import { TextInput } from "../text-input.jsx";

     

       22
       22
        
       import Tooltip from "../tooltip.jsx";

     

       23
       23
       +
       import { ConfirmSubmit } from "./confirm-submit";

     

       23
       24
        
       import { FileUpload } from "./file-upload";

     

       24
       25
        
       import { HandleInput } from "./handle-input";

     

       25
       26
        
       import { MenuItem } from "./menu-item";

     
···

       37
       38
        
         const [openUpload, setOpenUpload] = createSignal(false);

     

       38
       39
        
         const [openInsertMenu, setOpenInsertMenu] = createSignal(false);

     

       39
       40
        
         const [openHandleDialog, setOpenHandleDialog] = createSignal(false);

     

       40
       40
       -
         const [validate, setValidate] = createSignal<boolean | undefined>(undefined);

     

       41
       41
       +
         const [openConfirmDialog, setOpenConfirmDialog] = createSignal(false);

     

       41
       42
        
         const [isMaximized, setIsMaximized] = createSignal(false);

     

       42
       43
        
         const [isMinimized, setIsMinimized] = createSignal(false);

     

       43
       44
        
         const [collectionError, setCollectionError] = createSignal("");

     
···

       96
       97
        
           };

     

       97
       98
        
         };

     

       98
       99
        
       

     

       99
       99
       -
         const getValidateIcon = () => {

     

       100
       100
       -
           return (

     

       101
       101
       -
             validate() === true ? "lucide--circle-check"

     

       102
       102
       -
             : validate() === false ? "lucide--circle-x"

     

       103
       103
       -
             : "lucide--circle"

     

       104
       104
       -
           );

     

       105
       105
       -
         };

     

       106
       106
       -
       

     

       107
       107
       -
         const getValidateLabel = () => {

     

       108
       108
       -
           return (

     

       109
       109
       -
             validate() === true ? "True"

     

       110
       110
       -
             : validate() === false ? "False"

     

       111
       111
       -
             : "Unset"

     

       112
       112
       -
           );

     

       113
       113
       -
         };

     

       114
       114
       -
       

     

       115
       100
        
         createEffect(() => {

     

       116
       101
        
           if (openDialog()) {

     

       117
       117
       -
             setValidate(undefined);

     

       118
       102
        
             setCollectionError("");

     

       119
       103
        
             setRkeyError("");

     

       120
       104
        
           }

     

       121
       105
        
         });

     

       122
       106
        
       

     

       123
       123
       -
         const createRecord = async (formData: FormData) => {

     

       107
       107
       +
         const createRecord = async (validate: boolean | undefined) => {

     

       108
       108
       +
           const formData = new FormData(formRef);

     

       124
       109
        
           const repo = formData.get("repo")?.toString();

     

       125
       110
        
           if (!repo) return;

     

       126
       111
        
           const rpc = new Client({ handler: new OAuthUserAgent(await getSession(repo as Did)) });

     
···

       139
       124
        
               collection: collection ? collection.toString() : record.$type,

     

       140
       125
        
               rkey: rkey?.toString().length ? rkey?.toString() : undefined,

     

       141
       126
        
               record: record,

     

       142
       142
       -
               validate: validate(),

     

       127
       127
       +
               validate: validate,

     

       143
       128
        
             },

     

       144
       129
        
           });

     

       145
       130
        
           if (!res.ok) {

     

       146
       131
        
             setNotice(`${res.data.error}: ${res.data.message}`);

     

       147
       132
        
             return;

     

       148
       133
        
           }

     

       134
       134
       +
           setOpenConfirmDialog(false);

     

       149
       135
        
           setOpenDialog(false);

     

       150
       136
        
           const id = addNotification({

     

       151
       137
        
             message: "Record created",

     
···

       155
       141
        
           navigate(`/${res.data.uri}`);

     

       156
       142
        
         };

     

       157
       143
        
       

     

       158
       158
       -
         const editRecord = async (recreate?: boolean) => {

     

       144
       144
       +
         const editRecord = async (validate: boolean | undefined, recreate: boolean) => {

     

       159
       145
        
           const record = editorInstance.view.state.doc.toString();

     

       160
       146
        
           if (!record) return;

     

       161
       147
        
           const rpc = new Client({ handler: agent()! });

     
···

       165
       151
        
               const res = await rpc.post("com.atproto.repo.applyWrites", {

     

       166
       152
        
                 input: {

     

       167
       153
        
                   repo: agent()!.sub,

     

       168
       168
       -
                   validate: validate(),

     

       154
       154
       +
                   validate: validate,

     

       169
       155
        
                   writes: [

     

       170
       156
        
                     {

     

       171
       157
        
                       collection: params.collection as `${string}.${string}.${string}`,

     
···

       189
       175
        
               const res = await rpc.post("com.atproto.repo.applyWrites", {

     

       190
       176
        
                 input: {

     

       191
       177
        
                   repo: agent()!.sub,

     

       192
       192
       -
                   validate: validate(),

     

       178
       178
       +
                   validate: validate,

     

       193
       179
        
                   writes: [

     

       194
       180
        
                     {

     

       195
       181
        
                       collection: params.collection as `${string}.${string}.${string}`,

     
···

       205
       191
        
                 return;

     

       206
       192
        
               }

     

       207
       193
        
             }

     

       194
       194
       +
             setOpenConfirmDialog(false);

     

       208
       195
        
             setOpenDialog(false);

     

       209
       196
        
             const id = addNotification({

     

       210
       197
        
               message: "Record edited",

     
···

       418
       405
        
                       >

     

       419
       406
        
                         <HandleInput onClose={() => setOpenHandleDialog(false)} />

     

       420
       407
        
                       </Modal>

     

       408
       408
       +
                       <Modal

     

       409
       409
       +
                         open={openConfirmDialog()}

     

       410
       410
       +
                         onClose={() => setOpenConfirmDialog(false)}

     

       411
       411
       +
                         closeOnClick={false}

     

       412
       412
       +
                       >

     

       413
       413
       +
                         <ConfirmSubmit

     

       414
       414
       +
                           isCreate={props.create}

     

       415
       415
       +
                           onConfirm={(validate, recreate) => {

     

       416
       416
       +
                             if (props.create) {

     

       417
       417
       +
                               createRecord(validate);

     

       418
       418
       +
                             } else {

     

       419
       419
       +
                               editRecord(validate, recreate);

     

       420
       420
       +
                             }

     

       421
       421
       +
                           }}

     

       422
       422
       +
                           onClose={() => setOpenConfirmDialog(false)}

     

       423
       423
       +
                         />

     

       424
       424
       +
                       </Modal>

     

       421
       425
        
                       <div class="flex items-center justify-end gap-2">

     

       422
       422
       -
                         <button

     

       423
       423
       -
                           type="button"

     

       424
       424
       -
                           class="flex items-center gap-1 rounded-sm p-1.5 text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       425
       425
       -
                           onClick={() =>

     

       426
       426
       -
                             setValidate(

     

       427
       427
       -
                               validate() === true ? false

     

       428
       428
       -
                               : validate() === false ? undefined

     

       429
       429
       -
                               : true,

     

       430
       430
       -
                             )

     

       431
       431
       -
                           }

     

       432
       432
       -
                         >

     

       433
       433
       -
                           <Tooltip text={getValidateLabel()}>

     

       434
       434
       -
                             <span class={`iconify ${getValidateIcon()}`}></span>

     

       435
       435
       -
                           </Tooltip>

     

       436
       436
       -
                           <span>Validate</span>

     

       437
       437
       -
                         </button>

     

       438
       438
       -
                         <Show when={!props.create && hasUserScope("create") && hasUserScope("delete")}>

     

       439
       439
       -
                           <Button onClick={() => editRecord(true)}>Recreate</Button>

     

       440
       440
       -
                         </Show>

     

       441
       441
       -
                         <Button

     

       442
       442
       -
                           onClick={() =>

     

       443
       443
       -
                             props.create ? createRecord(new FormData(formRef)) : editRecord()

     

       444
       444
       -
                           }

     

       445
       445
       -
                         >

     

       446
       446
       -
                           {props.create ? "Create" : "Edit"}

     

       426
       426
       +
                         <Button onClick={() => setOpenConfirmDialog(true)}>

     

       427
       427
       +
                           {props.create ? "Create..." : "Edit..."}

     

       447
       428
        
                         </Button>

     

       448
       429
        
                       </div>

     

       449
       430
        
                     </div>

+9 -9

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">

     

       4
       4
       +
             <div class="flex flex-col gap-1">

     

       5
       5
        
               <div>

     

       6
       6
        
                 <span class="text-xl font-semibold">AT Protocol Explorer</span>

     

       7
       7
        
               </div>

     
···

       15
       15
        
                   .

     

       16
       16
        
                 </span>

     

       17
       17
        
               </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>

     

       21
       21
       -
               </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>

     

       25
       25
       -
               </div>

     

       26
       18
        
               <div class="flex items-center gap-1">

     

       27
       19
        
                 <div class="iconify lucide--link" />

     

       28
       20
        
                 <span>

     
···

       37
       29
        
                   .

     

       38
       30
        
                 </span>

     

       39
       31
        
               </div>

     

       32
       32
       +
               <div class="flex items-center gap-1">

     

       33
       33
       +
                 <div class="iconify lucide--user-round" />

     

       34
       34
       +
                 <span>Login to manage records in your repository.</span>

     

       35
       35
       +
               </div>

     

       36
       36
       +
               <div class="flex items-center gap-1">

     

       37
       37
       +
                 <div class="iconify lucide--radio-tower" />

     

       38
       38
       +
                 <span>Jetstream and firehose streaming.</span>

     

       39
       39
       +
               </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>

+2 -2

src/components/create/confirm-submit.tsx

···

       33
       33
        
                 <div class="flex items-center gap-2">

     

       34
       34
        
                   <button

     

       35
       35
        
                     type="button"

     

       36
       36
       -
                     class="-ml-2 flex min-w-30 items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200 dark:hover:bg-neutral-700"

     

       36
       36
       +
                     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"

     

       37
       37
        
                     onClick={cycleValidate}

     

       38
       38
        
                   >

     

       39
       39
        
                     <span

     
···

       57
       57
        
                   <div class="flex items-center gap-2">

     

       58
       58
        
                     <button

     

       59
       59
        
                       type="button"

     

       60
       60
       -
                       class="-ml-2 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200 dark:hover:bg-neutral-700"

     

       60
       60
       +
                       class="-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"

     

       61
       61
        
                       onClick={() => setRecreate(!recreate())}

     

       62
       62
        
                     >

     

       63
       63
        
                       <span

+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
        
               }}

+1 -1

src/components/navbar.tsx

···

       110
       110
        
                       <A

     

       111
       111
        
                         end

     

       112
       112
        
                         href={`/at://${props.params.repo}`}

     

       113
       113
       -
                         inactiveClass="flex min-w-0 gap-1 py-0.5 font-medium text-blue-400 hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       113
       113
       +
                         inactiveClass="flex grow min-w-0 gap-1 py-0.5 font-medium text-blue-400 hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       114
       114
        
                       >

     

       115
       115
        
                         <Show

     

       116
       116
        
                           when={handle() !== props.params.repo}

+1 -1

src/auth/login.tsx

···

       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">

     

       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"

+24

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
       +
       }

     

       9
       9
       +
       

     

       10
       10
       +
       type RouteCache = Record<string, CollectionCacheEntry>;

     

       11
       11
       +
       

     

       12
       12
       +
       const [routeCache, setRouteCache] = createStore<RouteCache>({});

     

       13
       13
       +
       

     

       14
       14
       +
       export const getCollectionCache = (key: string): CollectionCacheEntry | undefined => {

     

       15
       15
       +
         return routeCache[key];

     

       16
       16
       +
       };

     

       17
       17
       +
       

     

       18
       18
       +
       export const setCollectionCache = (key: string, entry: CollectionCacheEntry): void => {

     

       19
       19
       +
         setRouteCache(key, entry);

     

       20
       20
       +
       };

     

       21
       21
       +
       

     

       22
       22
       +
       export const clearCollectionCache = (key: string): void => {

     

       23
       23
       +
         setRouteCache(key, undefined!);

     

       24
       24
       +
       };

+3 -1

src/components/lexicon-schema.tsx

···

       268
       268
        
               <ConstraintsList property={props.property.items!} />

     

       269
       269
        
             </Show>

     

       270
       270
        
             <Show when={props.property.description && !props.hideNameType}>

     

       271
       271
       -
               <p class="text-sm text-neutral-700 dark:text-neutral-300">{props.property.description}</p>

     

       271
       271
       +
               <p class="text-sm wrap-break-word text-neutral-700 dark:text-neutral-300">

     

       272
       272
       +
                 {props.property.description}

     

       273
       273
       +
               </p>

     

       272
       274
        
             </Show>

     

       273
       275
        
           </div>

     

       274
       276
        
         );

public/ribbon.webp

This is a binary file and will not be displayed.

src/components/search.tsx

···

       141
       141
        
           input = input.trim().replace(/^@/, "");

     

       142
       142
        
           if (!input.length) return;

     

       143
       143
        
       

     

       144
       144
       +
           if (input.includes("%")) {

     

       145
       145
       +
             try {

     

       146
       146
       +
               input = decodeURIComponent(input);

     

       147
       147
       +
             } catch {}

     

       148
       148
       +
           }

     

       149
       149
       +
       

     

       144
       150
        
           setShowSearch(false);

     

       145
       151
        
           setInput(undefined);

     

       146
       152
        
           setSelectedIndex(-1);

+157 -153

src/views/collection.tsx

···

       2
       2
        
       import { Client, simpleFetchHandler } from "@atcute/client";

     

       3
       3
        
       import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
       4
        
       import * as TID from "@atcute/tid";

     

       5
       5
       +
       import { Title } from "@solidjs/meta";

     

       5
       6
        
       import { A, useBeforeLeave, useParams } from "@solidjs/router";

     

       6
       7
        
       import {

     

       7
       8
        
         createEffect,

     
···

       250
       251
        
           );

     

       251
       252
        
       

     

       252
       253
        
         return (

     

       253
       253
       -
           <Show when={records.length || response()}>

     

       254
       254
       -
             <div class="-mt-2 flex w-full flex-col items-center">

     

       255
       255
       -
               <StickyOverlay>

     

       256
       256
       -
                 <div class="flex w-full flex-col gap-2">

     

       257
       257
       -
                   <div class="flex items-center gap-1.5">

     

       258
       258
       -
                     <Show when={agent() && agent()?.sub === did && hasUserScope("delete")}>

     

       259
       259
       -
                       <div class="flex items-center">

     

       260
       260
       -
                         <Tooltip

     

       261
       261
       -
                           text={batchDelete() ? "Cancel" : "Delete"}

     

       262
       262
       -
                           children={

     

       263
       263
       -
                             <button

     

       264
       264
       -
                               onclick={() => {

     

       265
       265
       -
                                 setRecords({ from: 0, to: records.length - 1 }, "toDelete", false);

     

       266
       266
       -
                                 setLastSelected(undefined);

     

       267
       267
       -
                                 setBatchDelete(!batchDelete());

     

       268
       268
       -
                               }}

     

       269
       269
       -
                               class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       270
       270
       -
                             >

     

       271
       271
       -
                               <span

     

       272
       272
       -
                                 class={`iconify ${batchDelete() ? "lucide--circle-x" : "lucide--trash-2"} `}

     

       273
       273
       -
                               ></span>

     

       274
       274
       -
                             </button>

     

       275
       275
       -
                           }

     

       276
       276
       -
                         />

     

       277
       277
       -
                         <Show when={batchDelete()}>

     

       254
       254
       +
           <>

     

       255
       255
       +
             <Title>{params.collection} - PDSls</Title>

     

       256
       256
       +
             <Show when={records.length || response()}>

     

       257
       257
       +
               <div class="-mt-2 flex w-full flex-col items-center">

     

       258
       258
       +
                 <StickyOverlay>

     

       259
       259
       +
                   <div class="flex w-full flex-col gap-2">

     

       260
       260
       +
                     <div class="flex items-center gap-1.5">

     

       261
       261
       +
                       <Show when={agent() && agent()?.sub === did && hasUserScope("delete")}>

     

       262
       262
       +
                         <div class="flex items-center">

     

       278
       263
        
                           <Tooltip

     

       279
       279
       -
                             text="Select all"

     

       264
       264
       +
                             text={batchDelete() ? "Cancel" : "Delete"}

     

       280
       265
        
                             children={

     

       281
       266
        
                               <button

     

       282
       282
       -
                                 onclick={() => selectAll()}

     

       267
       267
       +
                                 onclick={() => {

     

       268
       268
       +
                                   setRecords({ from: 0, to: records.length - 1 }, "toDelete", false);

     

       269
       269
       +
                                   setLastSelected(undefined);

     

       270
       270
       +
                                   setBatchDelete(!batchDelete());

     

       271
       271
       +
                                 }}

     

       283
       272
        
                                 class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       284
       273
        
                               >

     

       285
       285
       -
                                 <span class="iconify lucide--copy-check"></span>

     

       274
       274
       +
                                 <span

     

       275
       275
       +
                                   class={`iconify ${batchDelete() ? "lucide--circle-x" : "lucide--trash-2"} `}

     

       276
       276
       +
                                 ></span>

     

       286
       277
        
                               </button>

     

       287
       278
        
                             }

     

       288
       279
        
                           />

     

       289
       289
       -
                           <Show when={hasUserScope("create")}>

     

       280
       280
       +
                           <Show when={batchDelete()}>

     

       290
       281
        
                             <Tooltip

     

       291
       291
       -
                               text="Recreate"

     

       282
       282
       +
                               text="Select all"

     

       283
       283
       +
                               children={

     

       284
       284
       +
                                 <button

     

       285
       285
       +
                                   onclick={() => selectAll()}

     

       286
       286
       +
                                   class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       287
       287
       +
                                 >

     

       288
       288
       +
                                   <span class="iconify lucide--copy-check"></span>

     

       289
       289
       +
                                 </button>

     

       290
       290
       +
                               }

     

       291
       291
       +
                             />

     

       292
       292
       +
                             <Show when={hasUserScope("create")}>

     

       293
       293
       +
                               <Tooltip

     

       294
       294
       +
                                 text="Recreate"

     

       295
       295
       +
                                 children={

     

       296
       296
       +
                                   <button

     

       297
       297
       +
                                     onclick={() => {

     

       298
       298
       +
                                       setRecreate(true);

     

       299
       299
       +
                                       setOpenDelete(true);

     

       300
       300
       +
                                     }}

     

       301
       301
       +
                                     class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       302
       302
       +
                                   >

     

       303
       303
       +
                                     <span class="iconify lucide--recycle text-green-500 dark:text-green-400"></span>

     

       304
       304
       +
                                   </button>

     

       305
       305
       +
                                 }

     

       306
       306
       +
                               />

     

       307
       307
       +
                             </Show>

     

       308
       308
       +
                             <Tooltip

     

       309
       309
       +
                               text="Delete"

     

       292
       310
        
                               children={

     

       293
       311
        
                                 <button

     

       294
       312
        
                                   onclick={() => {

     

       295
       295
       -
                                     setRecreate(true);

     

       313
       313
       +
                                     setRecreate(false);

     

       296
       314
        
                                     setOpenDelete(true);

     

       297
       315
        
                                   }}

     

       298
       316
        
                                   class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       299
       317
        
                                 >

     

       300
       300
       -
                                   <span class="iconify lucide--recycle text-green-500 dark:text-green-400"></span>

     

       318
       318
       +
                                   <span class="iconify lucide--trash-2 text-red-500 dark:text-red-400"></span>

     

       301
       319
        
                                 </button>

     

       302
       320
        
                               }

     

       303
       321
        
                             />

     

       304
       322
        
                           </Show>

     

       305
       305
       -
                           <Tooltip

     

       306
       306
       -
                             text="Delete"

     

       307
       307
       -
                             children={

     

       308
       308
       -
                               <button

     

       309
       309
       -
                                 onclick={() => {

     

       310
       310
       -
                                   setRecreate(false);

     

       311
       311
       -
                                   setOpenDelete(true);

     

       312
       312
       -
                                 }}

     

       313
       313
       -
                                 class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       323
       323
       +
                         </div>

     

       324
       324
       +
                         <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       325
       325
       +
                           <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">

     

       326
       326
       +
                             <h2 class="mb-2 font-semibold">

     

       327
       327
       +
                               {recreate() ? "Recreate" : "Delete"}{" "}

     

       328
       328
       +
                               {records.filter((r) => r.toDelete).length} records?

     

       329
       329
       +
                             </h2>

     

       330
       330
       +
                             <div class="flex justify-end gap-2">

     

       331
       331
       +
                               <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       332
       332
       +
                               <Button

     

       333
       333
       +
                                 onClick={deleteRecords}

     

       334
       334
       +
                                 class={`dark:shadow-dark-700 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500" : "bg-red-500 hover:bg-red-400 active:bg-red-400"}`}

     

       314
       335
        
                               >

     

       315
       315
       -
                                 <span class="iconify lucide--trash-2 text-red-500 dark:text-red-400"></span>

     

       316
       316
       -
                               </button>

     

       317
       317
       -
                             }

     

       318
       318
       -
                           />

     

       319
       319
       -
                         </Show>

     

       320
       320
       -
                       </div>

     

       321
       321
       -
                       <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       322
       322
       -
                         <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">

     

       323
       323
       -
                           <h2 class="mb-2 font-semibold">

     

       324
       324
       -
                             {recreate() ? "Recreate" : "Delete"}{" "}

     

       325
       325
       -
                             {records.filter((r) => r.toDelete).length} records?

     

       326
       326
       -
                           </h2>

     

       327
       327
       -
                           <div class="flex justify-end gap-2">

     

       328
       328
       -
                             <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       329
       329
       -
                             <Button

     

       330
       330
       -
                               onClick={deleteRecords}

     

       331
       331
       -
                               class={`dark:shadow-dark-700 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500" : "bg-red-500 hover:bg-red-400 active:bg-red-400"}`}

     

       332
       332
       -
                             >

     

       333
       333
       -
                               {recreate() ? "Recreate" : "Delete"}

     

       334
       334
       -
                             </Button>

     

       336
       336
       +
                                 {recreate() ? "Recreate" : "Delete"}

     

       337
       337
       +
                               </Button>

     

       338
       338
       +
                             </div>

     

       335
       339
        
                           </div>

     

       340
       340
       +
                         </Modal>

     

       341
       341
       +
                       </Show>

     

       342
       342
       +
                       <TextInput

     

       343
       343
       +
                         name="Filter"

     

       344
       344
       +
                         placeholder="Filter by substring"

     

       345
       345
       +
                         onInput={(e) => setFilter(e.currentTarget.value)}

     

       346
       346
       +
                         class="grow"

     

       347
       347
       +
                       />

     

       348
       348
       +
                       <Tooltip text="Jetstream">

     

       349
       349
       +
                         <A

     

       350
       350
       +
                           href={`/jetstream?collections=${params.collection}&dids=${params.repo}`}

     

       351
       351
       +
                           class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       352
       352
       +
                         >

     

       353
       353
       +
                           <span class="iconify lucide--radio-tower"></span>

     

       354
       354
       +
                         </A>

     

       355
       355
       +
                       </Tooltip>

     

       356
       356
       +
                     </div>

     

       357
       357
       +
                     <Show when={records.length > 1}>

     

       358
       358
       +
                       <div class="flex items-center justify-between gap-x-2">

     

       359
       359
       +
                         <Button

     

       360
       360
       +
                           onClick={() => {

     

       361
       361
       +
                             setReverse(!reverse());

     

       362
       362
       +
                             setCursor(undefined);

     

       363
       363
       +
                             clearCollectionCache(cacheKey());

     

       364
       364
       +
                             refetch();

     

       365
       365
       +
                           }}

     

       366
       366
       +
                           classList={{

     

       367
       367
       +
                             "text-blue-500! dark:text-blue-400! border-blue-500! dark:border-blue-400!":

     

       368
       368
       +
                               reverse(),

     

       369
       369
       +
                           }}

     

       370
       370
       +
                         >

     

       371
       371
       +
                           <span

     

       372
       372
       +
                             class={`iconify ${reverse() ? "lucide--arrow-down-wide-narrow" : "lucide--arrow-up-narrow-wide"}`}

     

       373
       373
       +
                           ></span>

     

       374
       374
       +
                           Reverse

     

       375
       375
       +
                         </Button>

     

       376
       376
       +
                         <div>

     

       377
       377
       +
                           <Show when={batchDelete()}>

     

       378
       378
       +
                             <span>{records.filter((rec) => rec.toDelete).length}</span>

     

       379
       379
       +
                             <span>/</span>

     

       380
       380
       +
                           </Show>

     

       381
       381
       +
                           <span>{filter() ? filteredRecords().length : records.length} records</span>

     

       382
       382
       +
                         </div>

     

       383
       383
       +
                         <div class="flex w-20 items-center justify-end">

     

       384
       384
       +
                           <Show when={cursor()}>

     

       385
       385
       +
                             <Show when={!response.loading}>

     

       386
       386
       +
                               <Button onClick={() => refetch()}>Load More</Button>

     

       387
       387
       +
                             </Show>

     

       388
       388
       +
                             <Show when={response.loading}>

     

       389
       389
       +
                               <div class="iconify lucide--loader-circle w-20 animate-spin text-xl" />

     

       390
       390
       +
                             </Show>

     

       391
       391
       +
                           </Show>

     

       336
       392
        
                         </div>

     

       337
       337
       -
                       </Modal>

     

       393
       393
       +
                       </div>

     

       338
       394
        
                     </Show>

     

       339
       339
       -
                     <TextInput

     

       340
       340
       -
                       name="Filter"

     

       341
       341
       -
                       placeholder="Filter by substring"

     

       342
       342
       -
                       onInput={(e) => setFilter(e.currentTarget.value)}

     

       343
       343
       -
                       class="grow"

     

       344
       344
       -
                     />

     

       345
       345
       -
                     <Tooltip text="Jetstream">

     

       346
       346
       -
                       <A

     

       347
       347
       -
                         href={`/jetstream?collections=${params.collection}&dids=${params.repo}`}

     

       348
       348
       -
                         class="flex items-center rounded-md p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       349
       349
       -
                       >

     

       350
       350
       -
                         <span class="iconify lucide--radio-tower"></span>

     

       351
       351
       -
                       </A>

     

       352
       352
       -
                     </Tooltip>

     

       353
       395
        
                   </div>

     

       354
       354
       -
                   <Show when={records.length > 1}>

     

       355
       355
       -
                     <div class="flex items-center justify-between gap-x-2">

     

       356
       356
       -
                       <Button

     

       357
       357
       -
                         onClick={() => {

     

       358
       358
       -
                           setReverse(!reverse());

     

       359
       359
       -
                           setCursor(undefined);

     

       360
       360
       -
                           clearCollectionCache(cacheKey());

     

       361
       361
       -
                           refetch();

     

       362
       362
       -
                         }}

     

       363
       363
       -
                         classList={{

     

       364
       364
       -
                           "text-blue-500! dark:text-blue-400! border-blue-500! dark:border-blue-400!":

     

       365
       365
       -
                             reverse(),

     

       366
       366
       -
                         }}

     

       367
       367
       -
                       >

     

       368
       368
       -
                         <span

     

       369
       369
       -
                           class={`iconify ${reverse() ? "lucide--arrow-down-wide-narrow" : "lucide--arrow-up-narrow-wide"}`}

     

       370
       370
       -
                         ></span>

     

       371
       371
       -
                         Reverse

     

       372
       372
       -
                       </Button>

     

       373
       373
       -
                       <div>

     

       374
       374
       -
                         <Show when={batchDelete()}>

     

       375
       375
       -
                           <span>{records.filter((rec) => rec.toDelete).length}</span>

     

       376
       376
       -
                           <span>/</span>

     

       377
       377
       -
                         </Show>

     

       378
       378
       -
                         <span>{filter() ? filteredRecords().length : records.length} records</span>

     

       379
       379
       -
                       </div>

     

       380
       380
       -
                       <div class="flex w-20 items-center justify-end">

     

       381
       381
       -
                         <Show when={cursor()}>

     

       382
       382
       -
                           <Show when={!response.loading}>

     

       383
       383
       -
                             <Button onClick={() => refetch()}>Load More</Button>

     

       396
       396
       +
                 </StickyOverlay>

     

       397
       397
       +
                 <div class="flex max-w-full flex-col px-2 font-mono">

     

       398
       398
       +
                   <For each={filteredRecords()}>

     

       399
       399
       +
                     {(record, index) => {

     

       400
       400
       +
                       const rounding = () => {

     

       401
       401
       +
                         const recs = filteredRecords();

     

       402
       402
       +
                         const prevSelected = recs[index() - 1]?.toDelete;

     

       403
       403
       +
                         const nextSelected = recs[index() + 1]?.toDelete;

     

       404
       404
       +
                         return `${!prevSelected ? "rounded-t" : ""} ${!nextSelected ? "rounded-b" : ""}`;

     

       405
       405
       +
                       };

     

       406
       406
       +
                       return (

     

       407
       407
       +
                         <>

     

       408
       408
       +
                           <Show when={batchDelete()}>

     

       409
       409
       +
                             <div

     

       410
       410
       +
                               class={`select-none ${

     

       411
       411
       +
                                 record.toDelete ?

     

       412
       412
       +
                                   `bg-blue-200 hover:bg-blue-300/80 active:bg-blue-300 dark:bg-blue-700/30 dark:hover:bg-blue-700/50 dark:active:bg-blue-700/70 ${rounding()}`

     

       413
       413
       +
                                 : "rounded hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       414
       414
       +
                               }`}

     

       415
       415
       +
                               onclick={(e) => {

     

       416
       416
       +
                                 handleSelectionClick(e, index());

     

       417
       417
       +
                                 setRecords(index(), "toDelete", !record.toDelete);

     

       418
       418
       +
                               }}

     

       419
       419
       +
                             >

     

       420
       420
       +
                               <RecordLink record={record} />

     

       421
       421
       +
                             </div>

     

       384
       422
        
                           </Show>

     

       385
       385
       -
                           <Show when={response.loading}>

     

       386
       386
       -
                             <div class="iconify lucide--loader-circle w-20 animate-spin text-xl" />

     

       423
       423
       +
                           <Show when={!batchDelete()}>

     

       424
       424
       +
                             <A

     

       425
       425
       +
                               href={`/at://${did}/${params.collection}/${record.rkey}`}

     

       426
       426
       +
                               class="rounded select-none hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       427
       427
       +
                             >

     

       428
       428
       +
                               <RecordLink record={record} />

     

       429
       429
       +
                             </A>

     

       387
       430
        
                           </Show>

     

       388
       388
       -
                         </Show>

     

       389
       389
       -
                       </div>

     

       390
       390
       -
                     </div>

     

       391
       391
       -
                   </Show>

     

       431
       431
       +
                         </>

     

       432
       432
       +
                       );

     

       433
       433
       +
                     }}

     

       434
       434
       +
                   </For>

     

       392
       435
        
                 </div>

     

       393
       393
       -
               </StickyOverlay>

     

       394
       394
       -
               <div class="flex max-w-full flex-col px-2 font-mono">

     

       395
       395
       -
                 <For each={filteredRecords()}>

     

       396
       396
       -
                   {(record, index) => {

     

       397
       397
       -
                     const rounding = () => {

     

       398
       398
       -
                       const recs = filteredRecords();

     

       399
       399
       -
                       const prevSelected = recs[index() - 1]?.toDelete;

     

       400
       400
       -
                       const nextSelected = recs[index() + 1]?.toDelete;

     

       401
       401
       -
                       return `${!prevSelected ? "rounded-t" : ""} ${!nextSelected ? "rounded-b" : ""}`;

     

       402
       402
       -
                     };

     

       403
       403
       -
                     return (

     

       404
       404
       -
                       <>

     

       405
       405
       -
                         <Show when={batchDelete()}>

     

       406
       406
       -
                           <div

     

       407
       407
       -
                             class={`select-none ${

     

       408
       408
       -
                               record.toDelete ?

     

       409
       409
       -
                                 `bg-blue-200 hover:bg-blue-300/80 active:bg-blue-300 dark:bg-blue-700/30 dark:hover:bg-blue-700/50 dark:active:bg-blue-700/70 ${rounding()}`

     

       410
       410
       -
                               : "rounded hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       411
       411
       -
                             }`}

     

       412
       412
       -
                             onclick={(e) => {

     

       413
       413
       -
                               handleSelectionClick(e, index());

     

       414
       414
       -
                               setRecords(index(), "toDelete", !record.toDelete);

     

       415
       415
       -
                             }}

     

       416
       416
       -
                           >

     

       417
       417
       -
                             <RecordLink record={record} />

     

       418
       418
       -
                           </div>

     

       419
       419
       -
                         </Show>

     

       420
       420
       -
                         <Show when={!batchDelete()}>

     

       421
       421
       -
                           <A

     

       422
       422
       -
                             href={`/at://${did}/${params.collection}/${record.rkey}`}

     

       423
       423
       -
                             class="rounded select-none hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       424
       424
       -
                           >

     

       425
       425
       -
                             <RecordLink record={record} />

     

       426
       426
       -
                           </A>

     

       427
       427
       -
                         </Show>

     

       428
       428
       -
                       </>

     

       429
       429
       -
                     );

     

       430
       430
       -
                   }}

     

       431
       431
       -
                 </For>

     

       432
       436
        
               </div>

     

       433
       433
       -
             </div>

     

       434
       434
       -
           </Show>

     

       437
       437
       +
             </Show>

     

       438
       438
       +
           </>

     

       435
       439
        
         );

     

       436
       440
        
       };

     

       437
       441

+180 -169

src/views/record.tsx

···

       384
       384
        
             <Title>

     

       385
       385
        
               {params.collection}/{params.rkey} - PDSls

     

       386
       386
        
             </Title>

     

       387
       387
       -
             <Show when={record()} keyed>

     

       388
       388
       -
               <div class="flex w-full flex-col items-center">

     

       389
       389
       -
                 <div class="mb-3 flex w-full justify-between px-2 text-sm sm:text-base">

     

       390
       390
       -
                   <div class="flex items-center gap-4">

     

       391
       391
       -
                     <RecordTab tab="record" label="Record" />

     

       392
       392
       -
                     <RecordTab tab="schema" label="Schema" />

     

       393
       393
       -
                     <RecordTab tab="backlinks" label="Backlinks" />

     

       394
       394
       -
                     <RecordTab tab="info" label="Info" error />

     

       387
       387
       +
             <ErrorBoundary

     

       388
       388
       +
               fallback={(err) => (

     

       389
       389
       +
                 <div class="flex w-full flex-col items-center gap-1 px-2 py-4">

     

       390
       390
       +
                   <span class="font-semibold text-red-500 dark:text-red-400">Error loading record</span>

     

       391
       391
       +
                   <div class="max-w-md text-sm wrap-break-word text-neutral-600 dark:text-neutral-400">

     

       392
       392
       +
                     {err.message}

     

       395
       393
        
                   </div>

     

       396
       396
       -
                   <div class="flex gap-0.5">

     

       397
       397
       -
                     <Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>

     

       398
       398
       -
                       <Show when={hasUserScope("update")}>

     

       399
       399
       -
                         <RecordEditor create={false} record={record()?.value} refetch={refetch} />

     

       400
       400
       -
                       </Show>

     

       401
       401
       -
                       <Show when={hasUserScope("delete")}>

     

       402
       402
       -
                         <Tooltip text="Delete">

     

       403
       403
       -
                           <button

     

       404
       404
       -
                             class="flex items-center rounded-sm p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       405
       405
       -
                             onclick={() => setOpenDelete(true)}

     

       406
       406
       -
                           >

     

       407
       407
       -
                             <span class="iconify lucide--trash-2"></span>

     

       408
       408
       -
                           </button>

     

       409
       409
       -
                         </Tooltip>

     

       410
       410
       -
                         <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       411
       411
       -
                           <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">

     

       412
       412
       -
                             <h2 class="mb-2 font-semibold">Delete this record?</h2>

     

       413
       413
       -
                             <div class="flex justify-end gap-2">

     

       414
       414
       -
                               <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       415
       415
       -
                               <Button

     

       416
       416
       -
                                 onClick={deleteRecord}

     

       417
       417
       -
                                 class="dark:shadow-dark-700 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"

     

       418
       418
       -
                               >

     

       419
       419
       -
                                 Delete

     

       420
       420
       -
                               </Button>

     

       421
       421
       -
                             </div>

     

       422
       422
       -
                           </div>

     

       423
       423
       -
                         </Modal>

     

       424
       424
       -
                       </Show>

     

       425
       425
       -
                     </Show>

     

       426
       426
       -
                     <MenuProvider>

     

       427
       427
       -
                       <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">

     

       428
       428
       -
                         <CopyMenu

     

       429
       429
       -
                           content={JSON.stringify(record()?.value, null, 2)}

     

       430
       430
       -
                           label="Copy record"

     

       431
       431
       -
                           icon="lucide--copy"

     

       432
       432
       -
                         />

     

       433
       433
       -
                         <CopyMenu

     

       434
       434
       -
                           content={`at://${params.repo}/${params.collection}/${params.rkey}`}

     

       435
       435
       -
                           label="Copy AT URI"

     

       436
       436
       -
                           icon="lucide--copy"

     

       437
       437
       -
                         />

     

       438
       438
       -
                         <Show when={record()?.cid}>

     

       439
       439
       -
                           {(cid) => <CopyMenu content={cid()} label="Copy CID" icon="lucide--copy" />}

     

       394
       394
       +
                 </div>

     

       395
       395
       +
               )}

     

       396
       396
       +
             >

     

       397
       397
       +
               <Show when={record()} keyed>

     

       398
       398
       +
                 <div class="flex w-full flex-col items-center">

     

       399
       399
       +
                   <div class="mb-3 flex w-full justify-between px-2 text-sm sm:text-base">

     

       400
       400
       +
                     <div class="flex items-center gap-4">

     

       401
       401
       +
                       <RecordTab tab="record" label="Record" />

     

       402
       402
       +
                       <RecordTab tab="schema" label="Schema" />

     

       403
       403
       +
                       <RecordTab tab="backlinks" label="Backlinks" />

     

       404
       404
       +
                       <RecordTab tab="info" label="Info" error />

     

       405
       405
       +
                     </div>

     

       406
       406
       +
                     <div class="flex gap-0.5">

     

       407
       407
       +
                       <Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>

     

       408
       408
       +
                         <Show when={hasUserScope("update")}>

     

       409
       409
       +
                           <RecordEditor create={false} record={record()?.value} refetch={refetch} />

     

       440
       410
        
                         </Show>

     

       441
       441
       -
                         <MenuSeparator />

     

       442
       442
       -
                         <Show when={externalLink()}>

     

       443
       443
       -
                           {(externalLink) => (

     

       444
       444
       -
                             <NavMenu

     

       445
       445
       -
                               href={externalLink()?.link}

     

       446
       446
       -
                               icon={`${externalLink().icon ?? "lucide--app-window"}`}

     

       447
       447
       -
                               label={`Open on ${externalLink().label}`}

     

       448
       448
       -
                               newTab

     

       449
       449
       -
                             />

     

       450
       450
       -
                           )}

     

       411
       411
       +
                         <Show when={hasUserScope("delete")}>

     

       412
       412
       +
                           <Tooltip text="Delete">

     

       413
       413
       +
                             <button

     

       414
       414
       +
                               class="flex items-center rounded-sm p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       415
       415
       +
                               onclick={() => setOpenDelete(true)}

     

       416
       416
       +
                             >

     

       417
       417
       +
                               <span class="iconify lucide--trash-2"></span>

     

       418
       418
       +
                             </button>

     

       419
       419
       +
                           </Tooltip>

     

       420
       420
       +
                           <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       421
       421
       +
                             <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">

     

       422
       422
       +
                               <h2 class="mb-2 font-semibold">Delete this record?</h2>

     

       423
       423
       +
                               <div class="flex justify-end gap-2">

     

       424
       424
       +
                                 <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       425
       425
       +
                                 <Button

     

       426
       426
       +
                                   onClick={deleteRecord}

     

       427
       427
       +
                                   class="dark:shadow-dark-700 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"

     

       428
       428
       +
                                 >

     

       429
       429
       +
                                   Delete

     

       430
       430
       +
                                 </Button>

     

       431
       431
       +
                               </div>

     

       432
       432
       +
                             </div>

     

       433
       433
       +
                           </Modal>

     

       451
       434
        
                         </Show>

     

       452
       452
       -
                         <NavMenu

     

       453
       453
       -
                           href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}

     

       454
       454
       -
                           icon="lucide--external-link"

     

       455
       455
       -
                           label="Record on PDS"

     

       456
       456
       -
                           newTab

     

       457
       457
       -
                         />

     

       458
       458
       -
                       </DropdownMenu>

     

       459
       459
       -
                     </MenuProvider>

     

       460
       460
       -
                   </div>

     

       461
       461
       -
                 </div>

     

       462
       462
       -
                 <Show when={!location.hash || location.hash === "#record"}>

     

       463
       463
       -
                   <div class="w-max max-w-screen min-w-full px-4 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:px-2 sm:text-sm md:max-w-3xl">

     

       464
       464
       -
                     <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />

     

       435
       435
       +
                       </Show>

     

       436
       436
       +
                       <MenuProvider>

     

       437
       437
       +
                         <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">

     

       438
       438
       +
                           <CopyMenu

     

       439
       439
       +
                             content={JSON.stringify(record()?.value, null, 2)}

     

       440
       440
       +
                             label="Copy record"

     

       441
       441
       +
                             icon="lucide--copy"

     

       442
       442
       +
                           />

     

       443
       443
       +
                           <CopyMenu

     

       444
       444
       +
                             content={`at://${params.repo}/${params.collection}/${params.rkey}`}

     

       445
       445
       +
                             label="Copy AT URI"

     

       446
       446
       +
                             icon="lucide--copy"

     

       447
       447
       +
                           />

     

       448
       448
       +
                           <Show when={record()?.cid}>

     

       449
       449
       +
                             {(cid) => <CopyMenu content={cid()} label="Copy CID" icon="lucide--copy" />}

     

       450
       450
       +
                           </Show>

     

       451
       451
       +
                           <MenuSeparator />

     

       452
       452
       +
                           <Show when={externalLink()}>

     

       453
       453
       +
                             {(externalLink) => (

     

       454
       454
       +
                               <NavMenu

     

       455
       455
       +
                                 href={externalLink()?.link}

     

       456
       456
       +
                                 icon={`${externalLink().icon ?? "lucide--app-window"}`}

     

       457
       457
       +
                                 label={`Open on ${externalLink().label}`}

     

       458
       458
       +
                                 newTab

     

       459
       459
       +
                               />

     

       460
       460
       +
                             )}

     

       461
       461
       +
                           </Show>

     

       462
       462
       +
                           <NavMenu

     

       463
       463
       +
                             href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}

     

       464
       464
       +
                             icon="lucide--external-link"

     

       465
       465
       +
                             label="Record on PDS"

     

       466
       466
       +
                             newTab

     

       467
       467
       +
                           />

     

       468
       468
       +
                         </DropdownMenu>

     

       469
       469
       +
                       </MenuProvider>

     

       470
       470
       +
                     </div>

     

       465
       471
        
                   </div>

     

       466
       466
       -
                 </Show>

     

       467
       467
       -
                 <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>

     

       468
       468
       -
                   <Show when={lexiconNotFound() === true}>

     

       469
       469
       -
                     <span class="w-full px-2 text-sm">Lexicon schema could not be resolved.</span>

     

       472
       472
       +
                   <Show when={!location.hash || location.hash === "#record"}>

     

       473
       473
       +
                     <div class="w-max max-w-screen min-w-full px-4 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:px-2 sm:text-sm md:max-w-3xl">

     

       474
       474
       +
                       <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />

     

       475
       475
       +
                     </div>

     

       470
       476
        
                   </Show>

     

       471
       471
       -
                   <Show when={lexiconNotFound() === undefined}>

     

       472
       472
       -
                     <span class="w-full px-2 text-sm">Resolving lexicon schema...</span>

     

       477
       477
       +
                   <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>

     

       478
       478
       +
                     <Show when={lexiconNotFound() === true}>

     

       479
       479
       +
                       <span class="w-full px-2 text-sm">Lexicon schema could not be resolved.</span>

     

       480
       480
       +
                     </Show>

     

       481
       481
       +
                     <Show when={lexiconNotFound() === undefined}>

     

       482
       482
       +
                       <span class="w-full px-2 text-sm">Resolving lexicon schema...</span>

     

       483
       483
       +
                     </Show>

     

       484
       484
       +
                     <Show when={schema() || params.collection === "com.atproto.lexicon.schema"}>

     

       485
       485
       +
                       <ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>

     

       486
       486
       +
                         <LexiconSchemaView schema={schema()?.rawSchema ?? (record()?.value as any)} />

     

       487
       487
       +
                       </ErrorBoundary>

     

       488
       488
       +
                     </Show>

     

       473
       489
        
                   </Show>

     

       474
       474
       -
                   <Show when={schema() || params.collection === "com.atproto.lexicon.schema"}>

     

       475
       475
       -
                     <ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>

     

       476
       476
       -
                       <LexiconSchemaView schema={schema()?.rawSchema ?? (record()?.value as any)} />

     

       490
       490
       +
                   <Show when={location.hash === "#backlinks"}>

     

       491
       491
       +
                     <ErrorBoundary

     

       492
       492
       +
                       fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}

     

       493
       493
       +
                     >

     

       494
       494
       +
                       <Suspense

     

       495
       495
       +
                         fallback={

     

       496
       496
       +
                           <div class="iconify lucide--loader-circle animate-spin self-center text-xl" />

     

       497
       497
       +
                         }

     

       498
       498
       +
                       >

     

       499
       499
       +
                         <div class="w-full px-2">

     

       500
       500
       +
                           <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />

     

       501
       501
       +
                         </div>

     

       502
       502
       +
                       </Suspense>

     

       477
       503
        
                     </ErrorBoundary>

     

       478
       504
        
                   </Show>

     

       479
       479
       -
                 </Show>

     

       480
       480
       -
                 <Show when={location.hash === "#backlinks"}>

     

       481
       481
       -
                   <ErrorBoundary

     

       482
       482
       -
                     fallback={(err) => <div class="wrap-break-word">Error: {err.message}</div>}

     

       483
       483
       -
                   >

     

       484
       484
       -
                     <Suspense

     

       485
       485
       -
                       fallback={

     

       486
       486
       -
                         <div class="iconify lucide--loader-circle animate-spin self-center text-xl" />

     

       487
       487
       -
                       }

     

       488
       488
       -
                     >

     

       489
       489
       -
                       <div class="w-full px-2">

     

       490
       490
       -
                         <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />

     

       491
       491
       -
                       </div>

     

       492
       492
       -
                     </Suspense>

     

       493
       493
       -
                   </ErrorBoundary>

     

       494
       494
       -
                 </Show>

     

       495
       495
       -
                 <Show when={location.hash === "#info"}>

     

       496
       496
       -
                   <div class="flex w-full flex-col gap-2 px-2 text-sm">

     

       497
       497
       -
                     <div>

     

       498
       498
       -
                       <p class="font-semibold">AT URI</p>

     

       499
       499
       -
                       <div class="truncate text-xs">{record()?.uri}</div>

     

       500
       500
       -
                     </div>

     

       501
       501
       -
                     <Show when={record()?.cid}>

     

       505
       505
       +
                   <Show when={location.hash === "#info"}>

     

       506
       506
       +
                     <div class="flex w-full flex-col gap-2 px-2 text-sm">

     

       502
       507
        
                       <div>

     

       503
       503
       -
                         <p class="font-semibold">CID</p>

     

       504
       504
       -
                         <div class="truncate text-left text-xs" dir="rtl">

     

       505
       505
       -
                           {record()?.cid}

     

       506
       506
       -
                         </div>

     

       508
       508
       +
                         <p class="font-semibold">AT URI</p>

     

       509
       509
       +
                         <div class="truncate text-xs">{record()?.uri}</div>

     

       507
       510
        
                       </div>

     

       508
       508
       -
                     </Show>

     

       509
       509
       -
                     <div>

     

       510
       510
       -
                       <div class="flex items-center gap-1">

     

       511
       511
       -
                         <p class="font-semibold">Record verification</p>

     

       512
       512
       -
                         <span

     

       513
       513
       -
                           classList={{

     

       514
       514
       -
                             "iconify lucide--check text-green-500 dark:text-green-400":

     

       515
       515
       -
                               validRecord() === true,

     

       516
       516
       -
                             "iconify lucide--x text-red-500 dark:text-red-400": validRecord() === false,

     

       517
       517
       -
                             "iconify lucide--loader-circle animate-spin": validRecord() === undefined,

     

       518
       518
       -
                           }}

     

       519
       519
       -
                         ></span>

     

       520
       520
       -
                       </div>

     

       521
       521
       -
                       <Show when={validRecord() === false}>

     

       522
       522
       -
                         <div class="text-xs wrap-break-word">{verifyError()}</div>

     

       511
       511
       +
                       <Show when={record()?.cid}>

     

       512
       512
       +
                         <div>

     

       513
       513
       +
                           <p class="font-semibold">CID</p>

     

       514
       514
       +
                           <div class="truncate text-left text-xs" dir="rtl">

     

       515
       515
       +
                             {record()?.cid}

     

       516
       516
       +
                           </div>

     

       517
       517
       +
                         </div>

     

       523
       518
        
                       </Show>

     

       524
       524
       -
                     </div>

     

       525
       525
       -
                     <div>

     

       526
       526
       -
                       <div class="flex items-center gap-1">

     

       527
       527
       -
                         <p class="font-semibold">Schema validation</p>

     

       528
       528
       -
                         <span

     

       529
       529
       -
                           classList={{

     

       530
       530
       -
                             "iconify lucide--check text-green-500 dark:text-green-400":

     

       531
       531
       -
                               validSchema() === true,

     

       532
       532
       -
                             "iconify lucide--x text-red-500 dark:text-red-400": validSchema() === false,

     

       533
       533
       -
                             "iconify lucide--loader-circle animate-spin":

     

       534
       534
       -
                               validSchema() === undefined && remoteValidation(),

     

       535
       535
       -
                           }}

     

       536
       536
       -
                         ></span>

     

       519
       519
       +
                       <div>

     

       520
       520
       +
                         <div class="flex items-center gap-1">

     

       521
       521
       +
                           <p class="font-semibold">Record verification</p>

     

       522
       522
       +
                           <span

     

       523
       523
       +
                             classList={{

     

       524
       524
       +
                               "iconify lucide--check text-green-500 dark:text-green-400":

     

       525
       525
       +
                                 validRecord() === true,

     

       526
       526
       +
                               "iconify lucide--x text-red-500 dark:text-red-400": validRecord() === false,

     

       527
       527
       +
                               "iconify lucide--loader-circle animate-spin": validRecord() === undefined,

     

       528
       528
       +
                             }}

     

       529
       529
       +
                           ></span>

     

       530
       530
       +
                         </div>

     

       531
       531
       +
                         <Show when={validRecord() === false}>

     

       532
       532
       +
                           <div class="text-xs wrap-break-word">{verifyError()}</div>

     

       533
       533
       +
                         </Show>

     

       537
       534
        
                       </div>

     

       538
       538
       -
                       <Show when={validSchema() === false}>

     

       539
       539
       -
                         <div class="text-xs wrap-break-word">{validationError()}</div>

     

       540
       540
       -
                       </Show>

     

       541
       541
       -
                       <Show

     

       542
       542
       -
                         when={

     

       543
       543
       -
                           !remoteValidation() &&

     

       544
       544
       -
                           validSchema() === undefined &&

     

       545
       545
       -
                           params.collection &&

     

       546
       546
       -
                           !(params.collection in lexicons)

     

       547
       547
       -
                         }

     

       548
       548
       -
                       >

     

       549
       549
       -
                         <Button onClick={() => validateRemoteSchema(record()!.value)}>

     

       550
       550
       -
                           Validate via resolution

     

       551
       551
       -
                         </Button>

     

       552
       552
       -
                       </Show>

     

       553
       553
       -
                     </div>

     

       554
       554
       -
                     <Show when={lexiconUri()}>

     

       555
       535
        
                       <div>

     

       556
       556
       -
                         <p class="font-semibold">Lexicon schema</p>

     

       557
       557
       -
                         <div class="truncate text-xs">

     

       558
       558
       -
                           <A

     

       559
       559
       -
                             href={`/${lexiconUri()}`}

     

       560
       560
       -
                             class="text-blue-400 hover:underline active:underline"

     

       561
       561
       -
                           >

     

       562
       562
       -
                             {lexiconUri()}

     

       563
       563
       -
                           </A>

     

       536
       536
       +
                         <div class="flex items-center gap-1">

     

       537
       537
       +
                           <p class="font-semibold">Schema validation</p>

     

       538
       538
       +
                           <span

     

       539
       539
       +
                             classList={{

     

       540
       540
       +
                               "iconify lucide--check text-green-500 dark:text-green-400":

     

       541
       541
       +
                                 validSchema() === true,

     

       542
       542
       +
                               "iconify lucide--x text-red-500 dark:text-red-400": validSchema() === false,

     

       543
       543
       +
                               "iconify lucide--loader-circle animate-spin":

     

       544
       544
       +
                                 validSchema() === undefined && remoteValidation(),

     

       545
       545
       +
                             }}

     

       546
       546
       +
                           ></span>

     

       564
       547
        
                         </div>

     

       548
       548
       +
                         <Show when={validSchema() === false}>

     

       549
       549
       +
                           <div class="text-xs wrap-break-word">{validationError()}</div>

     

       550
       550
       +
                         </Show>

     

       551
       551
       +
                         <Show

     

       552
       552
       +
                           when={

     

       553
       553
       +
                             !remoteValidation() &&

     

       554
       554
       +
                             validSchema() === undefined &&

     

       555
       555
       +
                             params.collection &&

     

       556
       556
       +
                             !(params.collection in lexicons)

     

       557
       557
       +
                           }

     

       558
       558
       +
                         >

     

       559
       559
       +
                           <Button onClick={() => validateRemoteSchema(record()!.value)}>

     

       560
       560
       +
                             Validate via resolution

     

       561
       561
       +
                           </Button>

     

       562
       562
       +
                         </Show>

     

       565
       563
        
                       </div>

     

       566
       566
       -
                     </Show>

     

       567
       567
       -
                   </div>

     

       568
       568
       -
                 </Show>

     

       569
       569
       -
               </div>

     

       570
       570
       -
             </Show>

     

       564
       564
       +
                       <Show when={lexiconUri()}>

     

       565
       565
       +
                         <div>

     

       566
       566
       +
                           <p class="font-semibold">Lexicon schema</p>

     

       567
       567
       +
                           <div class="truncate text-xs">

     

       568
       568
       +
                             <A

     

       569
       569
       +
                               href={`/${lexiconUri()}`}

     

       570
       570
       +
                               class="text-blue-400 hover:underline active:underline"

     

       571
       571
       +
                             >

     

       572
       572
       +
                               {lexiconUri()}

     

       573
       573
       +
                             </A>

     

       574
       574
       +
                           </div>

     

       575
       575
       +
                         </div>

     

       576
       576
       +
                       </Show>

     

       577
       577
       +
                     </div>

     

       578
       578
       +
                   </Show>

     

       579
       579
       +
                 </div>

     

       580
       580
       +
               </Show>

     

       581
       581
       +
             </ErrorBoundary>

     

       571
       582
        
           </>

     

       572
       583
        
         );

     

       573
       584
        
       };

+1 -1

src/components/tooltip.tsx

···

       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 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>

+21 -5

src/components/json.tsx

···

       20
       20
        
         repo: string;

     

       21
       21
        
         truncate?: boolean;

     

       22
       22
        
         parentIsBlob?: boolean;

     

       23
       23
       +
         newTab?: boolean;

     

       23
       24
        
       }

     

       24
       25
        
       

     

       25
       26
        
       const JSONCtx = createContext<JSONContext>();

     
···

       53
       54
        
             const authority = await resolveLexiconAuthority(nsid as Nsid);

     

       54
       55
        
       

     

       55
       56
        
             const hash = anchor ? `#schema:${anchor}` : "#schema";

     

       56
       56
       -
             navigate(`/at://${authority}/com.atproto.lexicon.schema/${nsid}${hash}`);

     

       57
       57
       +
             if (ctx.newTab)

     

       58
       58
       +
               window.open(`/at://${authority}/com.atproto.lexicon.schema/${nsid}${hash}`, "_blank");

     

       59
       59
       +
             else navigate(`/at://${authority}/com.atproto.lexicon.schema/${nsid}${hash}`);

     

       57
       60
        
           } catch (err) {

     

       58
       61
        
             console.error("Failed to resolve lexicon authority:", err);

     

       59
       62
        
             const id = addNotification({

     
···

       76
       79
        
               {(part) => (

     

       77
       80
        
                 <>

     

       78
       81
        
                   {isResourceUri(part) ?

     

       79
       79
       -
                     <A class="text-blue-400 hover:underline active:underline" href={`/${part}`}>

     

       82
       82
       +
                     <A

     

       83
       83
       +
                       class="text-blue-400 hover:underline active:underline"

     

       84
       84
       +
                       href={`/${part}`}

     

       85
       85
       +
                       target={ctx.newTab ? "_blank" : "_self"}

     

       86
       86
       +
                     >

     

       80
       87
        
                       {part}

     

       81
       88
        
                     </A>

     

       82
       89
        
                   : isDid(part) ?

     

       83
       83
       -
                     <A class="text-blue-400 hover:underline active:underline" href={`/at://${part}`}>

     

       90
       90
       +
                     <A

     

       91
       91
       +
                       class="text-blue-400 hover:underline active:underline"

     

       92
       92
       +
                       href={`/at://${part}`}

     

       93
       93
       +
                       target={ctx.newTab ? "_blank" : "_self"}

     

       94
       94
       +
                     >

     

       84
       95
        
                       {part}

     

       85
       96
        
                     </A>

     

       86
       97
        
                   : isNsid(part.split("#")[0]) && props.isType ?

     
···

       297
       308
        
         return <JSONObject data={data} />;

     

       298
       309
        
       };

     

       299
       310
        
       

     

       300
       300
       -
       export const JSONValue = (props: { data: JSONType; repo: string; truncate?: boolean }) => {

     

       311
       311
       +
       export const JSONValue = (props: {

     

       312
       312
       +
         data: JSONType;

     

       313
       313
       +
         repo: string;

     

       314
       314
       +
         truncate?: boolean;

     

       315
       315
       +
         newTab?: boolean;

     

       316
       316
       +
       }) => {

     

       301
       317
        
         return (

     

       302
       302
       -
           <JSONCtx.Provider value={{ repo: props.repo, truncate: props.truncate }}>

     

       318
       318
       +
           <JSONCtx.Provider value={{ repo: props.repo, truncate: props.truncate, newTab: props.newTab }}>

     

       303
       319
        
             <JSONValueInner data={props.data} />

     

       304
       320
        
           </JSONCtx.Provider>

     

       305
       321
        
         );

+2 -4

src/views/car.tsx

···

       448
       448
        
                           class="truncate font-medium"

     

       449
       449
        
                           classList={{

     

       450
       450
        
                             "text-neutral-700 dark:text-neutral-300": hasSingleEntry,

     

       451
       451
       -
                             "text-blue-500 dark:text-blue-400": !hasSingleEntry,

     

       451
       451
       +
                             "text-blue-400": !hasSingleEntry,

     

       452
       452
        
                           }}

     

       453
       453
        
                         >

     

       454
       454
        
                           {entry.name}

     
···

       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-500 dark:text-blue-400">

     

       460
       460
       -
                             {entry.entries[0].key}

     

       461
       461
       -
                           </span>

     

       459
       459
       +
                           <span class="truncate font-medium text-blue-400">{entry.entries[0].key}</span>

     

       462
       460
        
                         </Show>

     

       463
       461
        
       

     

       464
       462
        
                         <Show when={!hasSingleEntry}>

+24 -11

src/views/repo.tsx

···

       193
       193
        
       

     

       194
       194
        
         const downloadRepo = async () => {

     

       195
       195
        
           let notificationId: string | null = null;

     

       196
       196
       +
           const abortController = new AbortController();

     

       196
       197
        
       

     

       197
       198
        
           try {

     

       198
       199
        
             setDownloading(true);

     
···

       201
       202
        
               progress: 0,

     

       202
       203
        
               total: 0,

     

       203
       204
        
               type: "info",

     

       205
       205
       +
               onCancel: () => {

     

       206
       206
       +
                 abortController.abort();

     

       207
       207
       +
                 if (notificationId) {

     

       208
       208
       +
                   removeNotification(notificationId);

     

       209
       209
       +
                 }

     

       210
       210
       +
               },

     

       204
       211
        
             });

     

       205
       212
        
       

     

       206
       206
       -
             const response = await fetch(`${pds}/xrpc/com.atproto.sync.getRepo?did=${did}`);

     

       213
       213
       +
             const response = await fetch(`${pds}/xrpc/com.atproto.sync.getRepo?did=${did}`, {

     

       214
       214
       +
               signal: abortController.signal,

     

       215
       215
       +
             });

     

       207
       216
        
             if (!response.ok) {

     

       208
       217
        
               throw new Error(`HTTP error status: ${response.status}`);

     

       209
       218
        
             }

     
···

       254
       263
        
               message: "Repository downloaded successfully",

     

       255
       264
        
               type: "success",

     

       256
       265
        
               progress: undefined,

     

       266
       266
       +
               onCancel: undefined,

     

       257
       267
        
             });

     

       258
       268
        
             setTimeout(() => {

     

       259
       269
        
               if (notificationId) removeNotification(notificationId);

     

       260
       270
        
             }, 3000);

     

       261
       271
        
           } catch (error) {

     

       262
       262
       -
             console.error("Download failed:", error);

     

       263
       263
       -
             if (notificationId) {

     

       264
       264
       -
               updateNotification(notificationId, {

     

       265
       265
       -
                 message: "Download failed",

     

       266
       266
       -
                 type: "error",

     

       267
       267
       -
                 progress: undefined,

     

       268
       268
       -
               });

     

       269
       269
       -
               setTimeout(() => {

     

       270
       270
       -
                 if (notificationId) removeNotification(notificationId);

     

       271
       271
       -
               }, 5000);

     

       272
       272
       +
             if (!(error instanceof Error && error.name === "AbortError")) {

     

       273
       273
       +
               console.error("Download failed:", error);

     

       274
       274
       +
               if (notificationId) {

     

       275
       275
       +
                 updateNotification(notificationId, {

     

       276
       276
       +
                   message: "Download failed",

     

       277
       277
       +
                   type: "error",

     

       278
       278
       +
                   progress: undefined,

     

       279
       279
       +
                   onCancel: undefined,

     

       280
       280
       +
                 });

     

       281
       281
       +
                 setTimeout(() => {

     

       282
       282
       +
                   if (notificationId) removeNotification(notificationId);

     

       283
       283
       +
                 }, 5000);

     

       284
       284
       +
               }

     

       272
       285
        
             }

     

       273
       286
        
           }

     

       274
       287
        
           setDownloading(false);

Compare changes