···

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

     

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

     

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

     

       
0
       
 
       

     

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

     

       
14
       
 
       
import { Modal } from "./modal.jsx";

     

       
15
       
 
       


     

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

     

       
17
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
18
       
 
       
export const AccountManager = () => {

     

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

     

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

     
···

       
61
       
 
       
    }

     

       
62
       
 
       
  };

     

       
63
       
 
       


     

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

     

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

     

       
66
       
-
       
    try {

     

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

     

       
68
       
-
       
      const agent = new OAuthUserAgent(session);

     

       
69
       
-
       
      await agent.signOut();

     

       
70
       
-
       
    } catch {

     

       
71
       
-
       
      deleteStoredSession(did);

     

       
72
       
-
       
    }

     

       
73
       
-
       
    setSessions(

     

       
74
       
-
       
      produce((accs) => {

     

       
75
       
-
       
        delete accs[did];

     

       
76
       
-
       
      }),

     

       
77
       
-
       
    );

     

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

     

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

     

       
80
       
-
       
  };

     

       
81
       
-
       


     

       
82
       
 
       
  const getAvatar = async (did: Did) => {

     

       
83
       
 
       
    const rpc = new Client({

     

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

     
···

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

     

       
131
       
 
       
                    </Show>

     

       
132
       
 
       
                  </button>

     

       
133
       
-
       
                  <button

     

       
134
       
-
       
                    onclick={() => removeSession(did as Did)}

     

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

     

       
136
       
-
       
                  >

     

       
137
       
-
       
                    <span class="iconify lucide--x"></span>

     

       
138
       
-
       
                  </button>

     

       
139
       
 
       
                </div>

     

       
140
       
 
       
              )}

     

       
141
       
 
       
            </For>

     

···

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

     

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

     

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

     

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

     

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

     

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

     

       
16
       
 
       


     

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

     

       
18
       
 
       


     

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

     

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

     

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

     

       
22
       
+
       
    try {

     

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

     

       
24
       
+
       
      const agent = new OAuthUserAgent(session);

     

       
25
       
+
       
      await agent.signOut();

     

       
26
       
+
       
    } catch {

     

       
27
       
+
       
      deleteStoredSession(did);

     

       
28
       
+
       
    }

     

       
29
       
+
       
    setSessions(

     

       
30
       
+
       
      produce((accs) => {

     

       
31
       
+
       
        delete accs[did];

     

       
32
       
+
       
      }),

     

       
33
       
+
       
    );

     

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

     

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

     

       
36
       
+
       
  };

     

       
37
       
+
       


     

       
38
       
+
       
  return (

     

       
39
       
+
       
    <MenuProvider>

     

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

     

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

     

       
42
       
+
       
        <ActionMenu

     

       
43
       
+
       
          icon="lucide--x"

     

       
44
       
+
       
          label="Remove account"

     

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

     

       
46
       
+
       
        />

     

       
47
       
+
       
      </DropdownMenu>

     

       
48
       
+
       
    </MenuProvider>

     

       
49
       
+
       
  );

     

       
50
       
+
       
};

     

       
51
       
+
       


     

       
52
       
 
       
export const AccountManager = () => {

     

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

     

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

     
···

       
95
       
 
       
    }

     

       
96
       
 
       
  };

     

       
97
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

       
99
       
 
       
    const rpc = new Client({

     

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

     
···

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

     

       
147
       
 
       
                    </Show>

     

       
148
       
 
       
                  </button>

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
150
       
 
       
                </div>

     

       
151
       
 
       
              )}

     

       
152
       
 
       
            </For>

     

···

       
10
       
 
       
  Show,

     

       
11
       
 
       
  useContext,

     

       
12
       
 
       
} from "solid-js";

     

       
0
       
 
       

     

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

     

       
14
       
 
       


     

       
15
       
 
       
const MenuContext = createContext<{

     
···

       
102
       
 
       
  const ctx = useContext(MenuContext);

     

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

     

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

     

       
0
       
 
       

     

       
105
       
 
       


     

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

     

       
107
       
 
       
    const target = event.target as Node;

     

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

     

       
109
       
 
       
  };

     

       
110
       
 
       


     

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

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
113
       
 
       


     

       
114
       
 
       
  return (

     

       
115
       
 
       
    <div class="relative">

     
···

       
119
       
 
       
          props.buttonClass

     

       
120
       
 
       
        }

     

       
121
       
 
       
        ref={setMenuButton}

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
123
       
 
       
      >

     

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

     

       
125
       
 
       
      </button>

     

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

     

       
127
       
-
       
        <div

     

       
128
       
-
       
          ref={setMenu}

     

       
129
       
-
       
          class={

     

       
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
       
-
       
            props.menuClass

     

       
132
       
-
       
          }

     

       
133
       
-
       
        >

     

       
134
       
-
       
          {props.children}

     

       
135
       
-
       
        </div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
136
       
 
       
      </Show>

     

       
137
       
 
       
    </div>

     

       
138
       
 
       
  );

     

···

       
10
       
 
       
  Show,

     

       
11
       
 
       
  useContext,

     

       
12
       
 
       
} from "solid-js";

     

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

     

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

     

       
15
       
 
       


     

       
16
       
 
       
const MenuContext = createContext<{

     
···

       
103
       
 
       
  const ctx = useContext(MenuContext);

     

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

     

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

     

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

     

       
107
       
 
       


     

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

     

       
109
       
 
       
    const target = event.target as Node;

     

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

     

       
111
       
 
       
  };

     

       
112
       
 
       


     

       
113
       
+
       
  const updatePosition = () => {

     

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

     

       
115
       
+
       
    if (rect) setButtonRect(rect);

     

       
116
       
+
       
  };

     

       
117
       
+
       


     

       
118
       
+
       
  onMount(() => {

     

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

     

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

     

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

     

       
122
       
+
       
  });

     

       
123
       
+
       


     

       
124
       
+
       
  onCleanup(() => {

     

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

     

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

     

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

     

       
128
       
+
       
  });

     

       
129
       
 
       


     

       
130
       
 
       
  return (

     

       
131
       
 
       
    <div class="relative">

     
···

       
135
       
 
       
          props.buttonClass

     

       
136
       
 
       
        }

     

       
137
       
 
       
        ref={setMenuButton}

     

       
138
       
+
       
        onClick={() => {

     

       
139
       
+
       
          updatePosition();

     

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

     

       
141
       
+
       
        }}

     

       
142
       
 
       
      >

     

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

     

       
144
       
 
       
      </button>

     

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

     

       
146
       
+
       
        <Portal>

     

       
147
       
+
       
          <div

     

       
148
       
+
       
            ref={setMenu}

     

       
149
       
+
       
            style={{

     

       
150
       
+
       
              position: "fixed",

     

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

     

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

     

       
153
       
+
       
            }}

     

       
154
       
+
       
            class={

     

       
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
       
+
       
              props.menuClass

     

       
157
       
+
       
            }

     

       
158
       
+
       
          >

     

       
159
       
+
       
            {props.children}

     

       
160
       
+
       
          </div>

     

       
161
       
+
       
        </Portal>

     

       
162
       
 
       
      </Show>

     

       
163
       
 
       
    </div>

     

       
164
       
 
       
  );

     

···

       
36
       
 
       


     

       
37
       
 
       
export const NotificationContainer = () => {

     

       
38
       
 
       
  return (

     

       
39
       
-
       
    <div class="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">

     

       
40
       
 
       
      <For each={notifications}>

     

       
41
       
 
       
        {(notification) => (

     

       
42
       
 
       
          <div

     

···

       
36
       
 
       


     

       
37
       
 
       
export const NotificationContainer = () => {

     

       
38
       
 
       
  return (

     

       
39
       
+
       
    <div class="pointer-events-none fixed bottom-4 left-4 z-60 flex flex-col gap-2">

     

       
40
       
 
       
      <For each={notifications}>

     

       
41
       
 
       
        {(notification) => (

     

       
42
       
 
       
          <div

     

···

       
139
       
 
       
          </Show>

     

       
140
       
 
       
          <AccountManager />

     

       
141
       
 
       
          <MenuProvider>

     

       
142
       
-
       
            <DropdownMenu

     

       
143
       
-
       
              icon="lucide--menu text-lg"

     

       
144
       
-
       
              buttonClass="rounded-lg p-1.5"

     

       
145
       
-
       
              menuClass="top-11 text-sm"

     

       
146
       
-
       
            >

     

       
147
       
 
       
              <NavMenu href="/jetstream" label="Jetstream" icon="lucide--radio-tower" />

     

       
148
       
 
       
              <NavMenu href="/firehose" label="Firehose" icon="lucide--droplet" />

     

       
149
       
 
       
              <NavMenu href="/labels" label="Labels" icon="lucide--tags" />

     

···

       
139
       
 
       
          </Show>

     

       
140
       
 
       
          <AccountManager />

     

       
141
       
 
       
          <MenuProvider>

     

       
142
       
+
       
            <DropdownMenu icon="lucide--menu text-lg" buttonClass="rounded-lg p-1.5">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
143
       
 
       
              <NavMenu href="/jetstream" label="Jetstream" icon="lucide--radio-tower" />

     

       
144
       
 
       
              <NavMenu href="/firehose" label="Firehose" icon="lucide--droplet" />

     

       
145
       
 
       
              <NavMenu href="/labels" label="Labels" icon="lucide--tags" />

     

···

       
145
       
 
       
            <Tab tab="info" label="Info" />

     

       
146
       
 
       
          </div>

     

       
147
       
 
       
          <MenuProvider>

     

       
148
       
-
       
            <DropdownMenu

     

       
149
       
-
       
              icon="lucide--ellipsis-vertical"

     

       
150
       
-
       
              buttonClass="rounded-sm p-1.5"

     

       
151
       
-
       
              menuClass="top-9 text-sm"

     

       
152
       
-
       
            >

     

       
153
       
 
       
              <CopyMenu content={params.pds!} label="Copy PDS" icon="lucide--copy" />

     

       
154
       
 
       
              <NavMenu

     

       
155
       
 
       
                href={`/firehose?instance=wss://${params.pds}`}

     

···

       
145
       
 
       
            <Tab tab="info" label="Info" />

     

       
146
       
 
       
          </div>

     

       
147
       
 
       
          <MenuProvider>

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
149
       
 
       
              <CopyMenu content={params.pds!} label="Copy PDS" icon="lucide--copy" />

     

       
150
       
 
       
              <NavMenu

     

       
151
       
 
       
                href={`/firehose?instance=wss://${params.pds}`}

     

···

       
414
       
 
       
              </Modal>

     

       
415
       
 
       
            </Show>

     

       
416
       
 
       
            <MenuProvider>

     

       
417
       
-
       
              <DropdownMenu

     

       
418
       
-
       
                icon="lucide--ellipsis-vertical"

     

       
419
       
-
       
                buttonClass="rounded-sm p-1.5"

     

       
420
       
-
       
                menuClass="top-9 text-sm"

     

       
421
       
-
       
              >

     

       
422
       
 
       
                <CopyMenu

     

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

     

       
424
       
 
       
                  label="Copy record"

     

···

       
414
       
 
       
              </Modal>

     

       
415
       
 
       
            </Show>

     

       
416
       
 
       
            <MenuProvider>

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
418
       
 
       
                <CopyMenu

     

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

     

       
420
       
 
       
                  label="Copy record"

     

···

       
303
       
 
       
              </Tooltip>

     

       
304
       
 
       
            </Show>

     

       
305
       
 
       
            <MenuProvider>

     

       
306
       
-
       
              <DropdownMenu

     

       
307
       
-
       
                icon="lucide--ellipsis-vertical"

     

       
308
       
-
       
                buttonClass="rounded-sm p-1.5"

     

       
309
       
-
       
                menuClass="top-9 text-sm"

     

       
310
       
-
       
              >

     

       
311
       
 
       
                <CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />

     

       
312
       
 
       
                <NavMenu

     

       
313
       
 
       
                  href={`/jetstream?dids=${params.repo}`}

     

···

       
303
       
 
       
              </Tooltip>

     

       
304
       
 
       
            </Show>

     

       
305
       
 
       
            <MenuProvider>

     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
307
       
 
       
                <CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />

     

       
308
       
 
       
                <NavMenu

     

       
309
       
 
       
                  href={`/jetstream?dids=${params.repo}`}