···

       
56
       
56
       
 
       
          {(collection) => (

     

       
57
       
57
       
 
       
            <div>

     

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

     

       
59
       
59
       
-
       
                <span

     

       
60
       
60
       
-
       
                  title="Collection containing linking records"

     

       
61
       
61
       
-
       
                  class="iconify lucide--book-text shrink-0"

     

       
62
       
62
       
-
       
                ></span>

     

       
59
       
59
       
+
       
                <span class="iconify lucide--book-text shrink-0"></span>

     

       
63
       
60
       
 
       
                {collection}

     

       
64
       
61
       
 
       
              </div>

     

       
65
       
62
       
 
       
              <For each={response()![collection]}>

     

       
66
       
63
       
 
       
                {({ path, counts }) => (

     

       
67
       
64
       
 
       
                  <div class="ml-4.5">

     

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

     

       
69
       
69
       
-
       
                      <span

     

       
70
       
70
       
-
       
                        title="Record path where the link is found"

     

       
71
       
71
       
-
       
                        class="iconify lucide--route shrink-0"

     

       
72
       
72
       
-
       
                      ></span>

     

       
66
       
66
       
+
       
                      <span class="iconify lucide--route shrink-0"></span>

     

       
73
       
67
       
 
       
                      {path.slice(1)}

     

       
74
       
68
       
 
       
                    </div>

     

       
75
       
69
       
 
       
                    <div class="ml-4.5">

     

       
76
       
70
       
 
       
                      <p>

     

       
77
       
71
       
 
       
                        <button

     

       
78
       
72
       
 
       
                          class="text-blue-400 hover:underline active:underline"

     

       
79
       
79
       
-
       
                          title="Show linking records"

     

       
80
       
73
       
 
       
                          onclick={() =>

     

       
81
       
74
       
 
       
                            (

     

       
82
       
75
       
 
       
                              show()?.collection === collection &&

     
···

       
92
       
85
       
 
       
                        {" from "}

     

       
93
       
86
       
 
       
                        <button

     

       
94
       
87
       
 
       
                          class="text-blue-400 hover:underline active:underline"

     

       
95
       
95
       
-
       
                          title="Show linking DIDs"

     

       
96
       
88
       
 
       
                          onclick={() =>

     

       
97
       
89
       
 
       
                            (

     

       
98
       
90
       
 
       
                              show()?.collection === collection &&

     

···

       
25
       
25
       
 
       
      disabled={props.disabled}

     

       
26
       
26
       
 
       
      required={props.required}

     

       
27
       
27
       
 
       
      class={

     

       
28
       
28
       
-
       
        "dark:bg-dark-100 dark:shadow-dark-700 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +

     

       
28
       
28
       
+
       
        "dark:bg-dark-100 dark:inset-shadow-dark-200 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +

     

       
29
       
29
       
 
       
        props.class

     

       
30
       
30
       
 
       
      }

     

       
31
       
31
       
 
       
      onInput={props.onInput}

     

···

       
183
       
183
       
 
       
                  spellcheck={false}

     

       
184
       
184
       
 
       
                  placeholder="Comma-separated list of collections"

     

       
185
       
185
       
 
       
                  value={searchParams.collections ?? ""}

     

       
186
       
186
       
-
       
                  class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       
186
       
186
       
+
       
                  class="dark:bg-dark-100 dark:inset-shadow-dark-200 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       
187
       
187
       
 
       
                />

     

       
188
       
188
       
 
       
              </label>

     

       
189
       
189
       
 
       
            </Show>

     
···

       
195
       
195
       
 
       
                  spellcheck={false}

     

       
196
       
196
       
 
       
                  placeholder="Comma-separated list of DIDs"

     

       
197
       
197
       
 
       
                  value={searchParams.dids ?? ""}

     

       
198
       
198
       
-
       
                  class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       
198
       
198
       
+
       
                  class="dark:bg-dark-100 dark:inset-shadow-dark-200 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       
199
       
199
       
 
       
                />

     

       
200
       
200
       
 
       
              </label>

     

       
201
       
201
       
 
       
            </Show>

     

···

       
257
       
257
       
 
       
        </div>

     

       
258
       
258
       
 
       
        <div class="flex flex-wrap gap-1 sm:gap-2">

     

       
259
       
259
       
 
       
          <FilterButton icon="iconify lucide--at-sign" event="handle" label="Alias" />

     

       
260
       
260
       
-
       
          <FilterButton

     

       
261
       
261
       
-
       
            icon="iconify lucide--key-round"

     

       
262
       
262
       
-
       
            event="rotation_key"

     

       
263
       
263
       
-
       
            label="Rotation Key"

     

       
264
       
264
       
-
       
          />

     

       
265
       
260
       
 
       
          <FilterButton icon="iconify lucide--hard-drive" event="service" label="Service" />

     

       
266
       
261
       
 
       
          <FilterButton

     

       
267
       
262
       
 
       
            icon="iconify lucide--shield-check"

     

       
268
       
263
       
 
       
            event="verification_method"

     

       
269
       
264
       
 
       
            label="Verification"

     

       
270
       
265
       
 
       
          />

     

       
266
       
266
       
+
       
          <FilterButton

     

       
267
       
267
       
+
       
            icon="iconify lucide--key-round"

     

       
268
       
268
       
+
       
            event="rotation_key"

     

       
269
       
269
       
+
       
            label="Rotation Key"

     

       
270
       
270
       
+
       
          />

     

       
271
       
271
       
 
       
        </div>

     

       
272
       
272
       
 
       
      </div>

     

       
273
       
273
       
 
       
      <div class="flex items-center gap-1.5 text-sm font-medium">

     

···

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

     

···

       
294
       
294
       
 
       
    props.def.items ||

     

       
295
       
295
       
 
       
    props.def.knownValues;

     

       
296
       
296
       
 
       


     

       
297
       
297
       
-
       
  const handleHeaderClick = () => {

     

       
298
       
298
       
-
       
    window.history.replaceState(null, "", `#schema:${props.name}`);

     

       
299
       
299
       
-
       
    const element = document.getElementById(`def-${props.name}`);

     

       
300
       
300
       
-
       
    if (element) {

     

       
301
       
301
       
-
       
      element.scrollIntoView({ behavior: "instant", block: "start" });

     

       
302
       
302
       
-
       
    }

     

       
303
       
303
       
-
       
  };

     

       
304
       
304
       
-
       


     

       
305
       
297
       
 
       
  return (

     

       
306
       
298
       
 
       
    <div class="flex flex-col gap-3" id={`def-${props.name}`}>

     

       
307
       
299
       
 
       
      <div class="group flex items-center gap-2">

     

       
308
       
308
       
-
       
        <button

     

       
309
       
309
       
-
       
          type="button"

     

       
310
       
310
       
-
       
          onClick={handleHeaderClick}

     

       
311
       
311
       
-
       
          class="relative cursor-pointer text-lg font-semibold hover:underline"

     

       
312
       
312
       
-
       
        >

     

       
300
       
300
       
+
       
        <a href={`#schema:${props.name}`} class="relative text-lg font-semibold hover:underline">

     

       
313
       
301
       
 
       
          <span class="iconify lucide--link absolute top-1/2 -left-6 -translate-y-1/2 text-base opacity-0 transition-opacity group-hover:opacity-100" />

     

       
314
       
302
       
 
       
          {props.name === "main" ? "Main Definition" : props.name}

     

       
315
       
315
       
-
       
        </button>

     

       
303
       
303
       
+
       
        </a>

     

       
316
       
304
       
 
       
        <span class={`rounded px-2 py-0.5 text-xs font-semibold uppercase ${defTypeColor()}`}>

     

       
317
       
305
       
 
       
          {props.def.type}

     

       
318
       
306
       
 
       
        </span>

     
···

       
523
       
511
       
 
       
    const hash = location.hash;

     

       
524
       
512
       
 
       
    if (hash.startsWith("#schema:")) {

     

       
525
       
513
       
 
       
      const defName = hash.slice(8);

     

       
526
       
526
       
-
       
      const element = document.getElementById(`def-${defName}`);

     

       
527
       
527
       
-
       
      if (element) element.scrollIntoView({ behavior: "instant", block: "start" });

     

       
514
       
514
       
+
       
      requestAnimationFrame(() => {

     

       
515
       
515
       
+
       
        const element = document.getElementById(`def-${defName}`);

     

       
516
       
516
       
+
       
        if (element) element.scrollIntoView({ behavior: "instant", block: "start" });

     

       
517
       
517
       
+
       
      });

     

       
528
       
518
       
 
       
    }

     

       
529
       
519
       
 
       
  });

     

       
530
       
520
       
 
       


     

···

       
42
       
42
       
 
       
          <span>Query labels from moderation services.</span>

     

       
43
       
43
       
 
       
        </div>

     

       
44
       
44
       
 
       
      </div>

     

       
45
       
45
       
-
       
      <div class="text-center text-sm italic">

     

       
46
       
46
       
-
       
        Made by{" "}

     

       
47
       
47
       
-
       
        <a

     

       
48
       
48
       
-
       
          href="https://juli.ee"

     

       
49
       
49
       
-
       
          class="font-pecita relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-current after:transition-[width] after:duration-300 after:ease-out hover:after:w-full"

     

       
50
       
50
       
-
       
        >

     

       
51
       
51
       
-
       
          Juliet

     

       
52
       
52
       
-
       
        </a>{" "}

     

       
53
       
53
       
-
       
        with love

     

       
45
       
45
       
+
       
      <div class="text-center text-sm text-neutral-600 dark:text-neutral-400">

     

       
46
       
46
       
+
       
        <span class="italic">

     

       
47
       
47
       
+
       
          Made by{" "}

     

       
48
       
48
       
+
       
          <a

     

       
49
       
49
       
+
       
            href="https://juli.ee"

     

       
50
       
50
       
+
       
            class="font-pecita relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-current after:transition-[width] after:duration-300 after:ease-out hover:after:w-full"

     

       
51
       
51
       
+
       
          >

     

       
52
       
52
       
+
       
            Juliet

     

       
53
       
53
       
+
       
          </a>{" "}

     

       
54
       
54
       
+
       
          with love

     

       
55
       
55
       
+
       
        </span>

     

       
56
       
56
       
+
       
        <span> • {import.meta.env.VITE_APP_VERSION}</span>

     

       
54
       
57
       
 
       
      </div>

     

       
55
       
58
       
 
       
    </div>

     

       
56
       
59
       
 
       
  );

     

···

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

     

···

       
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]}`;

     

···

       
31
       
31
       
 
       
          "flex items-center gap-2 rounded-xl border px-3 py-2": true,

     

       
32
       
32
       
 
       
          "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":

     

       
33
       
33
       
 
       
            theme() === props.theme,

     

       
34
       
34
       
-
       
          "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-800":

     

       
34
       
34
       
+
       
          "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-200/30 dark:hover:bg-neutral-800":

     

       
35
       
35
       
 
       
            theme() !== props.theme,

     

       
36
       
36
       
 
       
        }}

     

       
37
       
37
       
 
       
        onclick={() => updateTheme(props.theme)}

     

···

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

     

···

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

     

···

       
10
       
10
       
 
       
  Show,

     

       
11
       
11
       
 
       
  useContext,

     

       
12
       
12
       
 
       
} from "solid-js";

     

       
13
       
13
       
+
       
import { Portal } from "solid-js/web";

     

       
13
       
14
       
 
       
import { addToClipboard } from "../utils/copy";

     

       
14
       
15
       
 
       


     

       
15
       
16
       
 
       
const MenuContext = createContext<{

     
···

       
102
       
103
       
 
       
  const ctx = useContext(MenuContext);

     

       
103
       
104
       
 
       
  const [menu, setMenu] = createSignal<HTMLDivElement>();

     

       
104
       
105
       
 
       
  const [menuButton, setMenuButton] = createSignal<HTMLButtonElement>();

     

       
106
       
106
       
+
       
  const [buttonRect, setButtonRect] = createSignal<DOMRect>();

     

       
105
       
107
       
 
       


     

       
106
       
108
       
 
       
  const clickEvent = (event: MouseEvent) => {

     

       
107
       
109
       
 
       
    const target = event.target as Node;

     

       
108
       
110
       
 
       
    if (!menuButton()?.contains(target) && !menu()?.contains(target)) ctx?.setShowMenu(false);

     

       
109
       
111
       
 
       
  };

     

       
110
       
112
       
 
       


     

       
111
       
111
       
-
       
  onMount(() => window.addEventListener("click", clickEvent));

     

       
112
       
112
       
-
       
  onCleanup(() => window.removeEventListener("click", clickEvent));

     

       
113
       
113
       
+
       
  const updatePosition = () => {

     

       
114
       
114
       
+
       
    const rect = menuButton()?.getBoundingClientRect();

     

       
115
       
115
       
+
       
    if (rect) setButtonRect(rect);

     

       
116
       
116
       
+
       
  };

     

       
117
       
117
       
+
       


     

       
118
       
118
       
+
       
  onMount(() => {

     

       
119
       
119
       
+
       
    window.addEventListener("click", clickEvent);

     

       
120
       
120
       
+
       
    window.addEventListener("scroll", updatePosition, true);

     

       
121
       
121
       
+
       
    window.addEventListener("resize", updatePosition);

     

       
122
       
122
       
+
       
  });

     

       
123
       
123
       
+
       


     

       
124
       
124
       
+
       
  onCleanup(() => {

     

       
125
       
125
       
+
       
    window.removeEventListener("click", clickEvent);

     

       
126
       
126
       
+
       
    window.removeEventListener("scroll", updatePosition, true);

     

       
127
       
127
       
+
       
    window.removeEventListener("resize", updatePosition);

     

       
128
       
128
       
+
       
  });

     

       
113
       
129
       
 
       


     

       
114
       
130
       
 
       
  return (

     

       
115
       
131
       
 
       
    <div class="relative">

     
···

       
119
       
135
       
 
       
          props.buttonClass

     

       
120
       
136
       
 
       
        }

     

       
121
       
137
       
 
       
        ref={setMenuButton}

     

       
122
       
122
       
-
       
        onClick={() => ctx?.setShowMenu(!ctx?.showMenu())}

     

       
138
       
138
       
+
       
        onClick={() => {

     

       
139
       
139
       
+
       
          updatePosition();

     

       
140
       
140
       
+
       
          ctx?.setShowMenu(!ctx?.showMenu());

     

       
141
       
141
       
+
       
        }}

     

       
123
       
142
       
 
       
      >

     

       
124
       
143
       
 
       
        <span class={"iconify " + props.icon}></span>

     

       
125
       
144
       
 
       
      </button>

     

       
126
       
145
       
 
       
      <Show when={ctx?.showMenu()}>

     

       
127
       
127
       
-
       
        <div

     

       
128
       
128
       
-
       
          ref={setMenu}

     

       
129
       
129
       
-
       
          class={

     

       
130
       
130
       
-
       
            "dark:bg-dark-300 dark:shadow-dark-700 absolute right-0 z-40 flex min-w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700 " +

     

       
131
       
131
       
-
       
            props.menuClass

     

       
132
       
132
       
-
       
          }

     

       
133
       
133
       
-
       
        >

     

       
134
       
134
       
-
       
          {props.children}

     

       
135
       
135
       
-
       
        </div>

     

       
146
       
146
       
+
       
        <Portal>

     

       
147
       
147
       
+
       
          <div

     

       
148
       
148
       
+
       
            ref={setMenu}

     

       
149
       
149
       
+
       
            style={{

     

       
150
       
150
       
+
       
              position: "fixed",

     

       
151
       
151
       
+
       
              top: `${(buttonRect()?.bottom ?? 0) + 4}px`,

     

       
152
       
152
       
+
       
              left: `${(buttonRect()?.right ?? 0) - 160}px`,

     

       
153
       
153
       
+
       
            }}

     

       
154
       
154
       
+
       
            class={

     

       
155
       
155
       
+
       
              "dark:bg-dark-300 dark:shadow-dark-700 z-50 flex min-w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-sm shadow-md dark:border-neutral-700 " +

     

       
156
       
156
       
+
       
              props.menuClass

     

       
157
       
157
       
+
       
            }

     

       
158
       
158
       
+
       
          >

     

       
159
       
159
       
+
       
            {props.children}

     

       
160
       
160
       
+
       
          </div>

     

       
161
       
161
       
+
       
        </Portal>

     

       
136
       
162
       
 
       
      </Show>

     

       
137
       
163
       
 
       
    </div>

     

       
138
       
164
       
 
       
  );

     

···

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

     

···

       
4
       
4
       
 
       
  "client_uri": "https://pdsls.dev",

     

       
5
       
5
       
 
       
  "logo_uri": "https://pdsls.dev/favicon.ico",

     

       
6
       
6
       
 
       
  "redirect_uris": ["https://pdsls.dev/"],

     

       
7
       
7
       
-
       
  "scope": "atproto transition:generic",

     

       
7
       
7
       
+
       
  "scope": "atproto repo:*?action=create repo:*?action=update repo:*?action=delete blob:*/*",

     

       
8
       
8
       
 
       
  "grant_types": ["authorization_code", "refresh_token"],

     

       
9
       
9
       
 
       
  "response_types": ["code"],

     

       
10
       
10
       
 
       
  "token_endpoint_auth_method": "none",

     

···

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

     

···

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

     

···

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

     

···

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

     

···

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

     

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

     

       
3
       
3
       
-
       
import {

     

       
4
       
4
       
-
       
  createAuthorizationUrl,

     

       
5
       
5
       
-
       
  deleteStoredSession,

     

       
6
       
6
       
-
       
  getSession,

     

       
7
       
7
       
-
       
  OAuthUserAgent,

     

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

     

       
9
       
9
       
-
       
import { A } from "@solidjs/router";

     

       
10
       
10
       
-
       
import { createSignal, For, onMount, Show } from "solid-js";

     

       
11
       
11
       
-
       
import { createStore, produce } from "solid-js/store";

     

       
12
       
12
       
-
       
import { resolveDidDoc } from "../utils/api.js";

     

       
13
       
13
       
-
       
import { ActionMenu, DropdownMenu, MenuProvider, NavMenu } from "./dropdown.jsx";

     

       
14
       
14
       
-
       
import { agent, Login, retrieveSession, Sessions, setAgent } from "./login.jsx";

     

       
15
       
15
       
-
       
import { Modal } from "./modal.jsx";

     

       
16
       
16
       
-
       


     

       
17
       
17
       
-
       
export const [sessions, setSessions] = createStore<Sessions>();

     

       
18
       
18
       
-
       


     

       
19
       
19
       
-
       
const AccountDropdown = (props: { did: Did }) => {

     

       
20
       
20
       
-
       
  const removeSession = async (did: Did) => {

     

       
21
       
21
       
-
       
    const currentSession = agent()?.sub;

     

       
22
       
22
       
-
       
    try {

     

       
23
       
23
       
-
       
      const session = await getSession(did, { allowStale: true });

     

       
24
       
24
       
-
       
      const agent = new OAuthUserAgent(session);

     

       
25
       
25
       
-
       
      await agent.signOut();

     

       
26
       
26
       
-
       
    } catch {

     

       
27
       
27
       
-
       
      deleteStoredSession(did);

     

       
28
       
28
       
-
       
    }

     

       
29
       
29
       
-
       
    setSessions(

     

       
30
       
30
       
-
       
      produce((accs) => {

     

       
31
       
31
       
-
       
        delete accs[did];

     

       
32
       
32
       
-
       
      }),

     

       
33
       
33
       
-
       
    );

     

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

     

       
35
       
35
       
-
       
    if (currentSession === did) setAgent(undefined);

     

       
36
       
36
       
-
       
  };

     

       
37
       
37
       
-
       


     

       
38
       
38
       
-
       
  return (

     

       
39
       
39
       
-
       
    <MenuProvider>

     

       
40
       
40
       
-
       
      <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-md p-2">

     

       
41
       
41
       
-
       
        <NavMenu href={`/at://${props.did}`} label="Go to repo" icon="lucide--user-round" />

     

       
42
       
42
       
-
       
        <ActionMenu

     

       
43
       
43
       
-
       
          icon="lucide--x"

     

       
44
       
44
       
-
       
          label="Remove account"

     

       
45
       
45
       
-
       
          onClick={() => removeSession(props.did)}

     

       
46
       
46
       
-
       
        />

     

       
47
       
47
       
-
       
      </DropdownMenu>

     

       
48
       
48
       
-
       
    </MenuProvider>

     

       
49
       
49
       
-
       
  );

     

       
50
       
50
       
-
       
};

     

       
51
       
51
       
-
       


     

       
52
       
52
       
-
       
export const AccountManager = () => {

     

       
53
       
53
       
-
       
  const [openManager, setOpenManager] = createSignal(false);

     

       
54
       
54
       
-
       
  const [avatars, setAvatars] = createStore<Record<Did, string>>();

     

       
55
       
55
       
-
       


     

       
56
       
56
       
-
       
  onMount(async () => {

     

       
57
       
57
       
-
       
    try {

     

       
58
       
58
       
-
       
      await retrieveSession();

     

       
59
       
59
       
-
       
    } catch {}

     

       
60
       
60
       
-
       


     

       
61
       
61
       
-
       
    const localSessions = localStorage.getItem("sessions");

     

       
62
       
62
       
-
       
    if (localSessions) {

     

       
63
       
63
       
-
       
      const storedSessions: Sessions = JSON.parse(localSessions);

     

       
64
       
64
       
-
       
      const sessionDids = Object.keys(storedSessions) as Did[];

     

       
65
       
65
       
-
       
      sessionDids.forEach(async (did) => {

     

       
66
       
66
       
-
       
        const doc = await resolveDidDoc(did);

     

       
67
       
67
       
-
       
        const alias = doc.alsoKnownAs?.find((alias) => alias.startsWith("at://"));

     

       
68
       
68
       
-
       
        if (alias) {

     

       
69
       
69
       
-
       
          setSessions(did, {

     

       
70
       
70
       
-
       
            signedIn: storedSessions[did].signedIn,

     

       
71
       
71
       
-
       
            handle: alias.replace("at://", ""),

     

       
72
       
72
       
-
       
          });

     

       
73
       
73
       
-
       
        }

     

       
74
       
74
       
-
       
      });

     

       
75
       
75
       
-
       
      sessionDids.forEach(async (did) => {

     

       
76
       
76
       
-
       
        const avatar = await getAvatar(did);

     

       
77
       
77
       
-
       
        if (avatar) setAvatars(did, avatar);

     

       
78
       
78
       
-
       
      });

     

       
79
       
79
       
-
       
    }

     

       
80
       
80
       
-
       
  });

     

       
81
       
81
       
-
       


     

       
82
       
82
       
-
       
  const resumeSession = async (did: Did) => {

     

       
83
       
83
       
-
       
    try {

     

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

     

       
85
       
85
       
-
       
      await retrieveSession();

     

       
86
       
86
       
-
       
    } catch {

     

       
87
       
87
       
-
       
      const authUrl = await createAuthorizationUrl({

     

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

     

       
89
       
89
       
-
       
        target: { type: "account", identifier: did },

     

       
90
       
90
       
-
       
      });

     

       
91
       
91
       
-
       


     

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

     

       
93
       
93
       
-
       


     

       
94
       
94
       
-
       
      location.assign(authUrl);

     

       
95
       
95
       
-
       
    }

     

       
96
       
96
       
-
       
  };

     

       
97
       
97
       
-
       


     

       
98
       
98
       
-
       
  const getAvatar = async (did: Did) => {

     

       
99
       
99
       
-
       
    const rpc = new Client({

     

       
100
       
100
       
-
       
      handler: new CredentialManager({ service: "https://public.api.bsky.app" }),

     

       
101
       
101
       
-
       
    });

     

       
102
       
102
       
-
       
    const res = await rpc.get("app.bsky.actor.getProfile", { params: { actor: did } });

     

       
103
       
103
       
-
       
    if (res.ok) {

     

       
104
       
104
       
-
       
      return res.data.avatar;

     

       
105
       
105
       
-
       
    }

     

       
106
       
106
       
-
       
    return undefined;

     

       
107
       
107
       
-
       
  };

     

       
108
       
108
       
-
       


     

       
109
       
109
       
-
       
  return (

     

       
110
       
110
       
-
       
    <>

     

       
111
       
111
       
-
       
      <Modal open={openManager()} onClose={() => setOpenManager(false)}>

     

       
112
       
112
       
-
       
        <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-18 left-[50%] w-88 -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">

     

       
113
       
113
       
-
       
          <div class="mb-2 px-1 font-semibold">

     

       
114
       
114
       
-
       
            <span>Manage accounts</span>

     

       
115
       
115
       
-
       
          </div>

     

       
116
       
116
       
-
       
          <div class="mb-3 max-h-80 overflow-y-auto md:max-h-100">

     

       
117
       
117
       
-
       
            <For each={Object.keys(sessions)}>

     

       
118
       
118
       
-
       
              {(did) => (

     

       
119
       
119
       
-
       
                <div class="flex w-full items-center justify-between">

     

       
120
       
120
       
-
       
                  <A

     

       
121
       
121
       
-
       
                    href={`/at://${did}`}

     

       
122
       
122
       
-
       
                    onClick={() => setOpenManager(false)}

     

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

     

       
124
       
124
       
-
       
                  >

     

       
125
       
125
       
-
       
                    <Show

     

       
126
       
126
       
-
       
                      when={avatars[did as Did]}

     

       
127
       
127
       
-
       
                      fallback={<span class="iconify lucide--user-round m-0.5 size-5"></span>}

     

       
128
       
128
       
-
       
                    >

     

       
129
       
129
       
-
       
                      <img

     

       
130
       
130
       
-
       
                        src={avatars[did as Did].replace("img/avatar/", "img/avatar_thumbnail/")}

     

       
131
       
131
       
-
       
                        class="size-6 rounded-full"

     

       
132
       
132
       
-
       
                      />

     

       
133
       
133
       
-
       
                    </Show>

     

       
134
       
134
       
-
       
                  </A>

     

       
135
       
135
       
-
       
                  <button

     

       
136
       
136
       
-
       
                    class="flex grow items-center justify-between gap-1 truncate rounded-md p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       
137
       
137
       
-
       
                    onclick={() => resumeSession(did as Did)}

     

       
138
       
138
       
-
       
                  >

     

       
139
       
139
       
-
       
                    <span class="truncate">

     

       
140
       
140
       
-
       
                      {sessions[did]?.handle ? sessions[did].handle : did}

     

       
141
       
141
       
-
       
                    </span>

     

       
142
       
142
       
-
       
                    <Show when={did === agent()?.sub && sessions[did].signedIn}>

     

       
143
       
143
       
-
       
                      <span class="iconify lucide--check shrink-0 text-green-500 dark:text-green-400"></span>

     

       
144
       
144
       
-
       
                    </Show>

     

       
145
       
145
       
-
       
                    <Show when={!sessions[did].signedIn}>

     

       
146
       
146
       
-
       
                      <span class="iconify lucide--circle-alert shrink-0 text-red-500 dark:text-red-400"></span>

     

       
147
       
147
       
-
       
                    </Show>

     

       
148
       
148
       
-
       
                  </button>

     

       
149
       
149
       
-
       
                  <AccountDropdown did={did as Did} />

     

       
150
       
150
       
-
       
                </div>

     

       
151
       
151
       
-
       
              )}

     

       
152
       
152
       
-
       
            </For>

     

       
153
       
153
       
-
       
          </div>

     

       
154
       
154
       
-
       
          <Login />

     

       
155
       
155
       
-
       
        </div>

     

       
156
       
156
       
-
       
      </Modal>

     

       
157
       
157
       
-
       
      <button

     

       
158
       
158
       
-
       
        onclick={() => setOpenManager(true)}

     

       
159
       
159
       
-
       
        class={`flex items-center rounded-lg ${agent() && avatars[agent()!.sub] ? "p-1.25" : "p-1.5"} hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`}

     

       
160
       
160
       
-
       
      >

     

       
161
       
161
       
-
       
        {agent() && avatars[agent()!.sub] ?

     

       
162
       
162
       
-
       
          <img

     

       
163
       
163
       
-
       
            src={avatars[agent()!.sub].replace("img/avatar/", "img/avatar_thumbnail/")}

     

       
164
       
164
       
-
       
            class="size-5 rounded-full"

     

       
165
       
165
       
-
       
          />

     

       
166
       
166
       
-
       
        : <span class="iconify lucide--circle-user-round text-lg"></span>}

     

       
167
       
167
       
-
       
      </button>

     

       
168
       
168
       
-
       
    </>

     

       
169
       
169
       
-
       
  );

     

       
170
       
170
       
-
       
};

     

···

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

     

···

       
1
       
1
       
 
       
import { ComAtprotoLabelDefs } from "@atcute/atproto";

     

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

     

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

     

       
3
       
3
       
 
       
import { isAtprotoDid } from "@atcute/identity";

     

       
4
       
4
       
 
       
import { Handle } from "@atcute/lexicons";

     

       
5
       
5
       
 
       
import { A, useSearchParams } from "@solidjs/router";

     
···

       
158
       
158
       
 
       
      await resolvePDS(did);

     

       
159
       
159
       
 
       
      if (!labelerCache[did]) throw new Error("Repository is not a labeler");

     

       
160
       
160
       
 
       
      rpc = new Client({

     

       
161
       
161
       
-
       
        handler: new CredentialManager({ service: labelerCache[did] }),

     

       
161
       
161
       
+
       
        handler: simpleFetchHandler({ service: labelerCache[did] }),

     

       
162
       
162
       
 
       
      });

     

       
163
       
163
       
 
       


     

       
164
       
164
       
 
       
      setSearchParams({ did, uriPatterns });

     

···

       
1
       
1
       
 
       
import { ComAtprotoServerDescribeServer, ComAtprotoSyncListRepos } from "@atcute/atproto";

     

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

     

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

     

       
3
       
3
       
 
       
import { InferXRPCBodyOutput } from "@atcute/lexicons";

     

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

     

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

     
···

       
23
       
23
       
 
       
  setPDS(params.pds);

     

       
24
       
24
       
 
       
  const pds =

     

       
25
       
25
       
 
       
    params.pds!.startsWith("localhost") ? `http://${params.pds}` : `https://${params.pds}`;

     

       
26
       
26
       
-
       
  const rpc = new Client({ handler: new CredentialManager({ service: pds }) });

     

       
26
       
26
       
+
       
  const rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });

     

       
27
       
27
       
 
       


     

       
28
       
28
       
 
       
  const getVersion = async () => {

     

       
29
       
29
       
 
       
    // @ts-expect-error: undocumented endpoint

     

···

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

     

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

     

       
2
       
2
       
 
       
import { DidDocument } from "@atcute/identity";

     

       
3
       
3
       
 
       
import { ActorIdentifier, Did, Handle, Nsid } from "@atcute/lexicons";

     

       
4
       
4
       
 
       
import { A, useLocation, useNavigate, useParams } from "@solidjs/router";

     
···

       
139
       
139
       
 
       
      return {};

     

       
140
       
140
       
 
       
    }

     

       
141
       
141
       
 
       


     

       
142
       
142
       
-
       
    rpc = new Client({ handler: new CredentialManager({ service: pds }) });

     

       
142
       
142
       
+
       
    rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });

     

       
143
       
143
       
 
       
    try {

     

       
144
       
144
       
 
       
      const res = await rpc.get("com.atproto.repo.describeRepo", {

     

       
145
       
145
       
 
       
        params: { repo: did as ActorIdentifier },

     

This is a binary file and will not be displayed.

This is a binary file and will not be displayed.

···

       
6
       
6
       
 
       


     

       
7
       
7
       
 
       
@custom-variant dark (&:where(.dark, .dark *));

     

       
8
       
8
       
 
       


     

       
9
       
9
       
+
       
@font-face {

     

       
10
       
10
       
+
       
  font-family: "Figtree";

     

       
11
       
11
       
+
       
  src: url("/fonts/Figtree[wght].woff2") format("woff2");

     

       
12
       
12
       
+
       
  font-display: swap;

     

       
13
       
13
       
+
       
}

     

       
14
       
14
       
+
       


     

       
9
       
15
       
 
       
@theme {

     

       
10
       
10
       
-
       
  --font-sans: "Inter", sans-serif;

     

       
16
       
16
       
+
       
  --font-sans: "Figtree", sans-serif;

     

       
11
       
17
       
 
       
  --font-mono: "Roboto Mono", monospace;

     

       
12
       
18
       
 
       
  --font-pecita: "Pecita", serif;

     

       
13
       
19
       
 
       


     

···

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

     

       
2
       
2
       
 
       
import { Nsid } from "@atcute/lexicons";

     

       
3
       
3
       
-
       
import { A, useLocation, useNavigate } from "@solidjs/router";

     

       
4
       
4
       
-
       
import { createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js";

     

       
3
       
3
       
+
       
import { A, useNavigate } from "@solidjs/router";

     

       
4
       
4
       
+
       
import {

     

       
5
       
5
       
+
       
  createEffect,

     

       
6
       
6
       
+
       
  createResource,

     

       
7
       
7
       
+
       
  createSignal,

     

       
8
       
8
       
+
       
  For,

     

       
9
       
9
       
+
       
  onCleanup,

     

       
10
       
10
       
+
       
  onMount,

     

       
11
       
11
       
+
       
  Show,

     

       
12
       
12
       
+
       
} from "solid-js";

     

       
5
       
13
       
 
       
import { isTouchDevice } from "../layout";

     

       
6
       
14
       
 
       
import { resolveLexiconAuthority } from "../utils/api";

     

       
7
       
15
       
 
       
import { appHandleLink, appList, appName, AppUrl } from "../utils/app-urls";

     
···

       
38
       
46
       
 
       


     

       
39
       
47
       
 
       
    if ((ev.ctrlKey || ev.metaKey) && ev.key == "k") {

     

       
40
       
48
       
 
       
      ev.preventDefault();

     

       
41
       
41
       
-
       
      setShowSearch(!showSearch());

     

       
49
       
49
       
+
       


     

       
50
       
50
       
+
       
      if (showSearch()) {

     

       
51
       
51
       
+
       
        const searchInput = document.querySelector("#input") as HTMLInputElement;

     

       
52
       
52
       
+
       
        if (searchInput && document.activeElement !== searchInput) {

     

       
53
       
53
       
+
       
          searchInput.focus();

     

       
54
       
54
       
+
       
        } else {

     

       
55
       
55
       
+
       
          setShowSearch(false);

     

       
56
       
56
       
+
       
        }

     

       
57
       
57
       
+
       
      } else {

     

       
58
       
58
       
+
       
        setShowSearch(true);

     

       
59
       
59
       
+
       
      }

     

       
42
       
60
       
 
       
    } else if (ev.key == "Escape") {

     

       
43
       
61
       
 
       
      ev.preventDefault();

     

       
44
       
62
       
 
       
      setShowSearch(false);

     
···

       
71
       
89
       
 
       
  });

     

       
72
       
90
       
 
       


     

       
73
       
91
       
 
       
  onMount(() => {

     

       
74
       
74
       
-
       
    if (useLocation().pathname !== "/") searchInput.focus();

     

       
75
       
75
       
-
       


     

       
76
       
92
       
 
       
    const handlePaste = (e: ClipboardEvent) => {

     

       
77
       
93
       
 
       
      if (e.target === searchInput) return;

     

       
78
       
94
       
 
       
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;

     
···

       
85
       
101
       
 
       
    onCleanup(() => window.removeEventListener("paste", handlePaste));

     

       
86
       
102
       
 
       
  });

     

       
87
       
103
       
 
       


     

       
104
       
104
       
+
       
  createEffect(() => {

     

       
105
       
105
       
+
       
    if (showSearch()) searchInput.focus();

     

       
106
       
106
       
+
       
  });

     

       
107
       
107
       
+
       


     

       
88
       
108
       
 
       
  const fetchTypeahead = async (input: string) => {

     

       
89
       
109
       
 
       
    const { prefix, query } = parsePrefix(input);

     

       
90
       
110
       
 
       


     

···

       
41
       
41
       
 
       
  return (

     

       
42
       
42
       
 
       
    <MenuProvider>

     

       
43
       
43
       
 
       
      <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-md p-2">

     

       
44
       
44
       
-
       
        <NavMenu href={`/at://${props.did}`} label="Go to repo" icon="lucide--user-round" />

     

       
44
       
44
       
+
       
        <NavMenu

     

       
45
       
45
       
+
       
          href={`/at://${props.did}`}

     

       
46
       
46
       
+
       
          label={agent()?.sub === props.did ? "Go to repo (g)" : "Go to repo"}

     

       
47
       
47
       
+
       
          icon="lucide--user-round"

     

       
48
       
48
       
+
       
        />

     

       
45
       
49
       
 
       
        <ActionMenu

     

       
46
       
50
       
 
       
          icon="lucide--settings"

     

       
47
       
51
       
 
       
          label="Edit permissions"

     

···

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