commit bedb578d88257521c3309e5e40286a5eae2615dc · pdsls.dev/pdsls

+57 -47
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 { isTouchDevice } from "../layout";

     

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

     

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

     

       5
       6
        
       import Tooltip from "./tooltip";

     

       6
       7
        
       

     

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

     

       8
       9
        
       

     

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

     

       10
       10
       +
       const CopyButton = (props: { content: string; label: string }) => {

     

       10
       11
        
         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={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 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>

     

       12
       12
       +
           <Show when={!isTouchDevice}>

     

       13
       13
       +
             <Tooltip text={props.label}>

     

       14
       14
       +
               <button

     

       15
       15
       +
                 type="button"

     

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

     

       17
       17
       +
                   e.preventDefault();

     

       18
       18
       +
                   e.stopPropagation();

     

       19
       19
       +
                   addToClipboard(props.content);

     

       20
       20
       +
                 }}

     

       21
       21
       +
                 class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}

     

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

     

       23
       23
       +
               >

     

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

     

       25
       25
       +
               </button>

     

       26
       26
       +
             </Tooltip>

     

       27
       27
       +
           </Show>

     

       23
       28
        
         );

     

       24
       29
        
       };

     

       25
       30
        
       

     
···

       39
       44
        
         });

     

       40
       45
        
       

     

       41
       46
        
         return (

     

       42
       42
       -
           <nav class="flex w-full flex-col wrap-anywhere">

     

       47
       47
       +
           <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base">

     

       43
       48
        
             {/* PDS Level */}

     

       44
       49
        
             <div class="group relative flex items-center justify-between gap-1 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">

     

       45
       45
       -
               <div class="flex min-h-7 basis-full items-center gap-2">

     

       50
       50
       +
               <div class="flex min-h-6 basis-full items-center gap-2 sm:min-h-7">

     

       46
       51
        
                 <Tooltip text="PDS">

     

       47
       52
        
                   <span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       48
       53
        
                 </Tooltip>

     
···

       62
       67
        
                 </Show>

     

       63
       68
        
               </div>

     

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

     

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

     

       70
       70
       +
                 <CopyButton content={pds()!} label="Copy PDS" />

     

       66
       71
        
               </Show>

     

       67
       72
        
             </div>

     

       68
       73
        
       

     
···

       70
       75
        
               <Show when={props.params.repo}>

     

       71
       76
        
                 {/* Repository Level */}

     

       72
       77
        
                 <div class="group relative flex items-center justify-between gap-1 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">

     

       73
       73
       -
                   <div class="-ml-2 flex basis-full items-center">

     

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

     

       75
       75
       -
                       <button

     

       76
       76
       -
                         type="button"

     

       77
       77
       -
                         class="relative flex items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70"

     

       78
       78
       -
                         onclick={() => {

     

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

     

       80
       80
       -
                           setShowHandle(!showHandle());

     

       81
       81
       -
                         }}

     

       82
       82
       -
                         aria-label="Switch DID/Handle"

     

       83
       83
       -
                       >

     

       84
       84
       -
                         <span class="iconify lucide--book-user shrink-0 transition-opacity duration-200 group-hover:opacity-0"></span>

     

       85
       85
       -
                         <span

     

       86
       86
       -
                           class={`iconify absolute shrink-0 opacity-0 transition-all duration-200 group-hover:opacity-100 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

       87
       87
       -
                         ></span>

     

       88
       88
       -
                       </button>

     

       78
       78
       +
                   <div class="flex basis-full items-center gap-2">

     

       79
       79
       +
                     <Tooltip text="Repository">

     

       80
       80
       +
                       <span class="iconify lucide--book-user shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       89
       81
        
                     </Tooltip>

     

       90
       82
        
                     {props.params.collection || location.pathname.includes("/labels") ?

     

       91
       83
        
                       <A

     
···

       100
       92
        
                       </span>

     

       101
       93
        
                     }

     

       102
       94
        
                   </div>

     

       103
       103
       -
                   <CopyButton content={props.params.repo} />

     

       95
       95
       +
                   <div class="flex">

     

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

     

       97
       97
       +
                       <button

     

       98
       98
       +
                         type="button"

     

       99
       99
       +
                         class={`items-center rounded px-2 py-1 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 sm:py-1.5 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70 ${isTouchDevice ? "flex" : "hidden group-hover:flex"}`}

     

       100
       100
       +
                         onclick={() => {

     

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

     

       102
       102
       +
                           setShowHandle(!showHandle());

     

       103
       103
       +
                         }}

     

       104
       104
       +
                         aria-label="Switch DID/Handle"

     

       105
       105
       +
                       >

     

       106
       106
       +
                         <span

     

       107
       107
       +
                           class={`iconify shrink-0 duration-200 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

       108
       108
       +
                         ></span>

     

       109
       109
       +
                       </button>

     

       110
       110
       +
                     </Tooltip>

     

       111
       111
       +
                     <CopyButton content={props.params.repo} label="Copy DID" />

     

       112
       112
       +
                   </div>

     

       104
       113
        
                 </div>

     

       105
       114
        
               </Show>

     

       106
       115
        
       

     
···

       111
       120
        
                   (props.params.repo in labelerCache || location.pathname.endsWith("/labels"))

     

       112
       121
        
                 }

     

       113
       122
        
               >

     

       114
       114
       -
                 <div class="group flex items-center justify-between gap-2 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">

     

       115
       115
       -
                   <div class="flex basis-full items-center gap-2">

     

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

     

       117
       117
       -
                     <A

     

       118
       118
       -
                       end

     

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

     

       120
       120
       -
                       class="py-0.5"

     

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

     

       122
       122
       -
                     >

     

       123
       123
       -
                       labels

     

       124
       124
       -
                     </A>

     

       125
       125
       -
                   </div>

     

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

     

       123
       123
       +
                 <div class="group flex items-center gap-2 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">

     

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

     

       125
       125
       +
                   <A

     

       126
       126
       +
                     end

     

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

     

       128
       128
       +
                     class="py-0.5"

     

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

     

       130
       130
       +
                   >

     

       131
       131
       +
                     labels

     

       132
       132
       +
                   </A>

     

       127
       133
        
                 </div>

     

       128
       134
        
               </Show>

     

       129
       135
        
       

     
···

       147
       153
        
                       </A>

     

       148
       154
        
                     </Show>

     

       149
       155
        
                   </div>

     

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

     

       156
       156
       +
                   <CopyButton

     

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

     

       158
       158
       +
                     label="Copy AT URI"

     

       159
       159
       +
                   />

     

       151
       160
        
                 </div>

     

       152
       161
        
               </Show>

     

       153
       162
        
       

     
···

       162
       171
        
                   </div>

     

       163
       172
        
                   <CopyButton

     

       164
       173
        
                     content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}

     

       174
       174
       +
                     label="Copy AT URI"

     

       165
       175
        
                   />

     

       166
       176
        
                 </div>

     

       167
       177
        
               </Show>