commit a10f177b380557fd016b4a69d20c684d8377d20c · pdsls.dev/pdsls

+2 -2

src/components/dropdown.tsx

···

       24
       24
        
         return <MenuContext.Provider value={value}>{props.children}</MenuContext.Provider>;

     

       25
       25
        
       };

     

       26
       26
        
       

     

       27
       27
       -
       export const CopyMenu = (props: { copyContent: string; label: string; icon?: string }) => {

     

       27
       27
       +
       export const CopyMenu = (props: { content: string; label: string; icon?: string }) => {

     

       28
       28
        
         const ctx = useContext(MenuContext);

     

       29
       29
        
       

     

       30
       30
        
         return (

     

       31
       31
        
           <button

     

       32
       32
        
             onClick={() => {

     

       33
       33
       -
               addToClipboard(props.copyContent);

     

       33
       33
       +
               addToClipboard(props.content);

     

       34
       34
        
               ctx?.setShowMenu(false);

     

       35
       35
        
             }}

     

       36
       36
        
             class="flex items-center gap-1.5 rounded-lg p-1 whitespace-nowrap hover:bg-neutral-200/50 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

+77 -61

src/components/navbar.tsx

···

       1
       1
        
       import { A, Params, useLocation } from "@solidjs/router";

     

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

     

       3
       3
        
       import { didDocCache, labelerCache } from "../utils/api";

     

       4
       4
       -
       import { CopyMenu, DropdownMenu, MenuProvider } from "./dropdown";

     

       4
       4
       +
       import { addToClipboard } from "../utils/copy";

     

       5
       5
        
       import Tooltip from "./tooltip";

     

       6
       6
        
       

     

       7
       7
        
       export const [pds, setPDS] = createSignal<string>();

     

       8
       8
       +
       

     

       9
       9
       +
       const CopyButton = (props: { content: string }) => {

     

       10
       10
       +
         return (

     

       11
       11
       +
           <button

     

       12
       12
       +
             type="button"

     

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

     

       14
       14
       +
               e.preventDefault();

     

       15
       15
       +
               e.stopPropagation();

     

       16
       16
       +
               addToClipboard(props.content);

     

       17
       17
       +
             }}

     

       18
       18
       +
             class={`hidden items-center rounded p-0.5 text-base text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 sm:p-1 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}

     

       19
       19
       +
             aria-label="Copy to clipboard"

     

       20
       20
       +
           >

     

       21
       21
       +
             <span class="iconify lucide--link"></span>

     

       22
       22
       +
           </button>

     

       23
       23
       +
         );

     

       24
       24
       +
       };

     

       8
       25
        
       

     

       9
       26
        
       export const NavBar = (props: { params: Params }) => {

     

       10
       27
        
         const location = useLocation();

     
···

       44
       61
        
                   </Show>

     

       45
       62
        
                 </Show>

     

       46
       63
        
               </div>

     

       47
       47
       -
               <Show when={props.params.repo}>

     

       48
       48
       -
                 <MenuProvider>

     

       49
       49
       -
                   <DropdownMenu

     

       50
       50
       -
                     icon="lucide--copy"

     

       51
       51
       -
                     buttonClass="rounded p-0.5 sm:p-1 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70"

     

       52
       52
       -
                     menuClass="top-7 p-2 text-xs"

     

       53
       53
       -
                   >

     

       54
       54
       -
                     <Show when={pds()}>

     

       55
       55
       -
                       <CopyMenu copyContent={pds()!} label="Copy PDS" />

     

       56
       56
       -
                     </Show>

     

       57
       57
       -
                     <CopyMenu copyContent={props.params.repo} label="Copy DID" />

     

       58
       58
       -
                     <CopyMenu

     

       59
       59
       -
                       copyContent={`at://${props.params.repo}${props.params.collection ? `/${props.params.collection}` : ""}${props.params.rkey ? `/${props.params.rkey}` : ""}`}

     

       60
       60
       -
                       label="Copy AT URI"

     

       61
       61
       -
                     />

     

       62
       62
       -
                   </DropdownMenu>

     

       63
       63
       -
                 </MenuProvider>

     

       64
       64
       +
               <Show when={pds()}>

     

       65
       65
       +
                 <CopyButton content={pds()!} />

     

       64
       66
        
               </Show>

     

       65
       67
        
             </div>

     

       66
       68
        
       

     
···

       85
       87
        
                       </span>

     

       86
       88
        
                     }

     

       87
       89
        
                   </div>

     

       88
       88
       -
                   <Tooltip text={showHandle() ? "Show DID" : "Show handle"}>

     

       89
       89
       -
                     <button

     

       90
       90
       -
                       class="flex items-center rounded p-0.5 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 sm:p-1 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70"

     

       91
       91
       -
                       onclick={() => {

     

       92
       92
       -
                         localStorage.showHandle = !showHandle();

     

       93
       93
       -
                         setShowHandle(!showHandle());

     

       94
       94
       -
                       }}

     

       95
       95
       -
                     >

     

       96
       96
       -
                       <span

     

       97
       97
       -
                         class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

       98
       98
       -
                       ></span>

     

       99
       99
       -
                     </button>

     

       100
       100
       -
                   </Tooltip>

     

       90
       90
       +
                   <div class="flex items-center gap-0.5">

     

       91
       91
       +
                     <CopyButton content={`at://${props.params.repo}`} />

     

       92
       92
       +
                     <Tooltip text={showHandle() ? "Show DID" : "Show handle"}>

     

       93
       93
       +
                       <button

     

       94
       94
       +
                         class="flex items-center rounded p-0.5 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 sm:p-1 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70"

     

       95
       95
       +
                         onclick={() => {

     

       96
       96
       +
                           localStorage.showHandle = !showHandle();

     

       97
       97
       +
                           setShowHandle(!showHandle());

     

       98
       98
       +
                         }}

     

       99
       99
       +
                       >

     

       100
       100
       +
                         <span

     

       101
       101
       +
                           class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

       102
       102
       +
                         ></span>

     

       103
       103
       +
                       </button>

     

       104
       104
       +
                     </Tooltip>

     

       105
       105
       +
                   </div>

     

       101
       106
        
                 </div>

     

       102
       107
        
               </Show>

     

       103
       108
        
       

     
···

       108
       113
        
                   (props.params.repo in labelerCache || location.pathname.endsWith("/labels"))

     

       109
       114
        
                 }

     

       110
       115
        
               >

     

       111
       111
       -
                 <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       112
       112
       -
                   <span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       113
       113
       -
                   <A

     

       114
       114
       -
                     end

     

       115
       115
       -
                     href={`/at://${props.params.repo}/labels`}

     

       116
       116
       -
                     class="py-0.5"

     

       117
       117
       -
                     inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       118
       118
       -
                   >

     

       119
       119
       -
                     labels

     

       120
       120
       -
                   </A>

     

       116
       116
       +
                 <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       117
       117
       +
                   <div class="flex basis-full items-center gap-1.5">

     

       118
       118
       +
                     <span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       119
       119
       +
                     <A

     

       120
       120
       +
                       end

     

       121
       121
       +
                       href={`/at://${props.params.repo}/labels`}

     

       122
       122
       +
                       class="py-0.5"

     

       123
       123
       +
                       inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       124
       124
       +
                     >

     

       125
       125
       +
                       labels

     

       126
       126
       +
                     </A>

     

       127
       127
       +
                   </div>

     

       128
       128
       +
                   <CopyButton content={`at://${props.params.repo}/labels`} />

     

       121
       129
        
                 </div>

     

       122
       130
        
               </Show>

     

       123
       131
        
       

     

       124
       132
        
               {/* Collection Level */}

     

       125
       133
        
               <Show when={props.params.collection}>

     

       126
       126
       -
                 <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       127
       127
       -
                   <Tooltip text="Collection">

     

       128
       128
       -
                     <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       129
       129
       -
                   </Tooltip>

     

       130
       130
       -
                   <Show

     

       131
       131
       -
                     when={props.params.rkey}

     

       132
       132
       -
                     fallback={<span class="py-0.5 font-medium">{props.params.collection}</span>}

     

       133
       133
       -
                   >

     

       134
       134
       -
                     <A

     

       135
       135
       -
                       end

     

       136
       136
       -
                       href={`/at://${props.params.repo}/${props.params.collection}`}

     

       137
       137
       -
                       inactiveClass="text-blue-400 grow py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       134
       134
       +
                 <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       135
       135
       +
                   <div class="flex basis-full items-center gap-1.5">

     

       136
       136
       +
                     <Tooltip text="Collection">

     

       137
       137
       +
                       <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       138
       138
       +
                     </Tooltip>

     

       139
       139
       +
                     <Show

     

       140
       140
       +
                       when={props.params.rkey}

     

       141
       141
       +
                       fallback={<span class="py-0.5 font-medium">{props.params.collection}</span>}

     

       138
       142
        
                     >

     

       139
       139
       -
                       {props.params.collection}

     

       140
       140
       -
                     </A>

     

       141
       141
       -
                   </Show>

     

       143
       143
       +
                       <A

     

       144
       144
       +
                         end

     

       145
       145
       +
                         href={`/at://${props.params.repo}/${props.params.collection}`}

     

       146
       146
       +
                         inactiveClass="text-blue-400 grow py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       147
       147
       +
                       >

     

       148
       148
       +
                         {props.params.collection}

     

       149
       149
       +
                       </A>

     

       150
       150
       +
                     </Show>

     

       151
       151
       +
                   </div>

     

       152
       152
       +
                   <CopyButton content={`at://${props.params.repo}/${props.params.collection}`} />

     

       142
       153
        
                 </div>

     

       143
       154
        
               </Show>

     

       144
       155
        
       

     

       145
       156
        
               {/* Record Level */}

     

       146
       157
        
               <Show when={props.params.rkey}>

     

       147
       147
       -
                 <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       148
       148
       -
                   <Tooltip text="Record">

     

       149
       149
       -
                     <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       150
       150
       -
                   </Tooltip>

     

       151
       151
       -
                   <span class="font-medium">{props.params.rkey}</span>

     

       158
       158
       +
                 <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       159
       159
       +
                   <div class="flex basis-full items-center gap-1.5">

     

       160
       160
       +
                     <Tooltip text="Record">

     

       161
       161
       +
                       <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       162
       162
       +
                     </Tooltip>

     

       163
       163
       +
                     <span class="font-medium">{props.params.rkey}</span>

     

       164
       164
       +
                   </div>

     

       165
       165
       +
                   <CopyButton

     

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

     

       167
       167
       +
                   />

     

       152
       168
        
                 </div>

     

       153
       169
        
               </Show>

     

       154
       170
        
             </div>

+1 -1

src/views/pds.tsx

···

       139
       139
        
                     buttonClass="rounded-sm p-1"

     

       140
       140
        
                     menuClass="top-8 p-2 text-sm"

     

       141
       141
        
                   >

     

       142
       142
       -
                     <CopyMenu copyContent={params.pds} label="Copy PDS" icon="lucide--copy" />

     

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

     

       143
       143
        
                     <NavMenu

     

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

     

       145
       145
        
                       label="Firehose"

+7 -2

src/views/record.tsx

···

       222
       222
        
                       menuClass="top-8 p-2 text-sm"

     

       223
       223
        
                     >

     

       224
       224
        
                       <CopyMenu

     

       225
       225
       -
                         copyContent={JSON.stringify(record()?.value, null, 2)}

     

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

     

       226
       226
        
                         label="Copy record"

     

       227
       227
        
                         icon="lucide--copy"

     

       228
       228
        
                       />

     

       229
       229
       +
                       <CopyMenu

     

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

     

       231
       231
       +
                         label="Copy AT URI"

     

       232
       232
       +
                         icon="lucide--copy"

     

       233
       233
       +
                       />

     

       229
       234
        
                       <Show when={record()?.cid}>

     

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

     

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

     

       231
       236
        
                       </Show>

     

       232
       237
        
                       <Show when={externalLink()}>

     

       233
       238
        
                         {(externalLink) => (

+8 -1

src/views/repo.tsx

···

       14
       14
        
       } from "solid-js";

     

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

     

       16
       16
        
       import { Backlinks } from "../components/backlinks.jsx";

     

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

     

       17
       17
       +
       import {

     

       18
       18
       +
         ActionMenu,

     

       19
       19
       +
         CopyMenu,

     

       20
       20
       +
         DropdownMenu,

     

       21
       21
       +
         MenuProvider,

     

       22
       22
       +
         NavMenu,

     

       23
       23
       +
       } from "../components/dropdown.jsx";

     

       18
       24
        
       import { TextInput } from "../components/text-input.jsx";

     

       19
       25
        
       import Tooltip from "../components/tooltip.jsx";

     

       20
       26
        
       import {

     
···

       209
       215
        
                         label="Jetstream"

     

       210
       216
        
                         icon="lucide--radio-tower"

     

       211
       217
        
                       />

     

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

     

       212
       219
        
                       <NavMenu

     

       213
       220
        
                         href={

     

       214
       221
        
                           did.startsWith("did:plc") ?