commit d813d59013df8577aba5bb929f6ca2a8c9123789 · pdsls.dev/pdsls

+35 -24

src/components/account.tsx

···

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

     

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

     

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

     

       15
       16
        
       

     

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

     

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

     

       18
       52
        
       export const AccountManager = () => {

     

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

     

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

     
···

       61
       95
        
           }

     

       62
       96
        
         };

     

       63
       97
        
       

     

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

     

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

     

       66
       66
       -
           try {

     

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

     

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

     

       69
       69
       -
             await agent.signOut();

     

       70
       70
       -
           } catch {

     

       71
       71
       -
             deleteStoredSession(did);

     

       72
       72
       -
           }

     

       73
       73
       -
           setSessions(

     

       74
       74
       -
             produce((accs) => {

     

       75
       75
       -
               delete accs[did];

     

       76
       76
       -
             }),

     

       77
       77
       -
           );

     

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

     

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

     

       80
       80
       -
         };

     

       81
       81
       -
       

     

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

     

       83
       99
        
           const rpc = new Client({

     

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

     
···

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

     

       131
       147
        
                           </Show>

     

       132
       148
        
                         </button>

     

       133
       133
       -
                         <button

     

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

     

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

     

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

     

       138
       138
       -
                         </button>

     

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

     

       139
       150
        
                       </div>

     

       140
       151
        
                     )}

     

       141
       152
        
                   </For>

+38 -12

src/components/dropdown.tsx

···

       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

src/components/notification.tsx

···

       36
       36
        
       

     

       37
       37
        
       export const NotificationContainer = () => {

     

       38
       38
        
         return (

     

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

     

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

     

       40
       40
        
             <For each={notifications}>

     

       41
       41
        
               {(notification) => (

     

       42
       42
        
                 <div

+1 -5

src/layout.tsx

···

       139
       139
        
                 </Show>

     

       140
       140
        
                 <AccountManager />

     

       141
       141
        
                 <MenuProvider>

     

       142
       142
       -
                   <DropdownMenu

     

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

     

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

     

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

     

       146
       146
       -
                   >

     

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

     

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

     

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

     

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

+1 -5

src/views/pds.tsx

···

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

     

       146
       146
        
                 </div>

     

       147
       147
        
                 <MenuProvider>

     

       148
       148
       -
                   <DropdownMenu

     

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

     

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

     

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

     

       152
       152
       -
                   >

     

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

     

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

     

       154
       150
        
                     <NavMenu

     

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

+1 -5

src/views/record.tsx

···

       414
       414
        
                     </Modal>

     

       415
       415
        
                   </Show>

     

       416
       416
        
                   <MenuProvider>

     

       417
       417
       -
                     <DropdownMenu

     

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

     

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

     

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

     

       421
       421
       -
                     >

     

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

     

       422
       418
        
                       <CopyMenu

     

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

     

       424
       420
        
                         label="Copy record"

+1 -5

src/views/repo.tsx

···

       303
       303
        
                     </Tooltip>

     

       304
       304
        
                   </Show>

     

       305
       305
        
                   <MenuProvider>

     

       306
       306
       -
                     <DropdownMenu

     

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

     

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

     

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

     

       310
       310
       -
                     >

     

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

     

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

     

       312
       308
        
                       <NavMenu

     

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