commit c440ce3afa5800d0240fee2ea239b860c2a922a0 · pdsls.dev/pdsls

+38 -26

src/components/navbar.tsx

···

       22
       22
        
         });

     

       23
       23
        
       

     

       24
       24
        
         return (

     

       25
       25
       -
           <nav class="flex w-full flex-col px-2 text-sm wrap-anywhere sm:text-base">

     

       26
       26
       -
             <div class="relative flex items-center justify-between gap-1">

     

       27
       27
       -
               <div class="flex min-h-5 basis-full items-center gap-2 sm:min-h-6">

     

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

     

       26
       26
       +
             {/* PDS Level */}

     

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

     

       28
       28
       +
               <div class="flex min-h-5 basis-full items-center gap-1.5 sm:min-h-6">

     

       28
       29
        
                 <Tooltip text="PDS">

     

       29
       29
       -
                   <span class="iconify lucide--hard-drive shrink-0"></span>

     

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

     

       30
       31
        
                 </Tooltip>

     

       31
       32
        
                 <Show when={pds()}>

     

       32
       32
       -
                   <Show when={props.params.repo} fallback={<span>{pds()}</span>}>

     

       33
       33
       +
                   <Show when={props.params.repo} fallback={<span class="font-medium">{pds()}</span>}>

     

       33
       34
        
                     <A

     

       34
       35
        
                       end

     

       35
       36
        
                       href={pds()!}

     

       36
       36
       -
                       inactiveClass="text-blue-400 w-full hover:underline active:underline"

     

       37
       37
       +
                       inactiveClass="text-blue-500 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300"

     

       37
       38
        
                     >

     

       38
       39
        
                       {pds()}

     

       39
       40
        
                     </A>

     
···

       44
       45
        
                 <MenuProvider>

     

       45
       46
        
                   <DropdownMenu

     

       46
       47
        
                     icon="lucide--copy"

     

       47
       47
       -
                     buttonClass="rounded p-0.5 sm:p-1 text-base"

     

       48
       48
       -
                     menuClass="top-6 p-2 text-xs"

     

       48
       48
       +
                     buttonClass="rounded 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"

     

       49
       49
       +
                     menuClass="top-7 p-2 text-xs"

     

       49
       50
        
                   >

     

       50
       51
        
                     <Show when={pds()}>

     

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

     
···

       59
       60
        
                 </MenuProvider>

     

       60
       61
        
               </Show>

     

       61
       62
        
             </div>

     

       62
       62
       -
             <div class="flex flex-col flex-wrap">

     

       63
       63
       +
       

     

       64
       64
       +
             <div class="flex flex-col">

     

       63
       65
        
               <Show when={props.params.repo}>

     

       64
       64
       -
                 <div class="relative flex items-center justify-between gap-1">

     

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

     

       66
       66
       +
                 {/* Repository Level */}

     

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

     

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

     

       66
       69
        
                     <Tooltip text="Repository">

     

       67
       67
       -
                       <span class="iconify lucide--book-user"></span>

     

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

     

       68
       71
        
                     </Tooltip>

     

       69
       72
        
                     {props.params.collection || location.pathname.includes("/labels") ?

     

       70
       73
        
                       <A

     

       71
       74
        
                         end

     

       72
       75
        
                         href={`/at://${props.params.repo}`}

     

       73
       73
       -
                         inactiveClass="text-blue-400 hover:underline active:underline w-full"

     

       76
       76
       +
                         inactiveClass="text-blue-500 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300"

     

       74
       77
        
                       >

     

       75
       78
        
                         {showHandle() ? handle() : props.params.repo}

     

       76
       79
        
                       </A>

     

       77
       77
       -
                     : <span>{showHandle() ? handle() : props.params.repo}</span>}

     

       80
       80
       +
                     : <span class="font-medium">{showHandle() ? handle() : props.params.repo}</span>}

     

       78
       81
        
                   </div>

     

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

     

       80
       83
        
                     <button

     

       81
       81
       -
                       class="flex items-center rounded p-0.5 text-base hover:bg-neutral-200 active:bg-neutral-300 sm:p-1 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       84
       84
       +
                       class="flex items-center rounded 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"

     

       82
       85
        
                       onclick={() => {

     

       83
       86
        
                         localStorage.showHandle = !showHandle();

     

       84
       87
        
                         setShowHandle(!showHandle());

     

       85
       88
        
                       }}

     

       86
       89
        
                     >

     

       87
       90
        
                       <span

     

       88
       88
       -
                         class={`iconify shrink-0 transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

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

     

       89
       92
        
                       ></span>

     

       90
       93
        
                     </button>

     

       91
       94
        
                   </Tooltip>

     

       92
       95
        
                 </div>

     

       93
       96
        
               </Show>

     

       97
       97
       +
       

     

       98
       98
       +
               {/* Labels Level */}

     

       94
       99
        
               <Show

     

       95
       100
        
                 when={

     

       96
       101
        
                   !props.params.collection &&

     

       97
       102
        
                   (props.params.repo in labelerCache || location.pathname.endsWith("/labels"))

     

       98
       103
        
                 }

     

       99
       104
        
               >

     

       100
       100
       -
                 <div class="flex items-center gap-2">

     

       101
       101
       -
                   <span class="iconify lucide--tag"></span>

     

       105
       105
       +
                 <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">

     

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

     

       102
       107
        
                   <A

     

       103
       108
        
                     end

     

       104
       109
        
                     href={`/at://${props.params.repo}/labels`}

     

       105
       105
       -
                     inactiveClass="text-blue-400 grow hover:underline active:underline"

     

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

     

       106
       111
        
                   >

     

       107
       112
        
                     labels

     

       108
       113
        
                   </A>

     

       109
       114
        
                 </div>

     

       110
       115
        
               </Show>

     

       116
       116
       +
       

     

       117
       117
       +
               {/* Collection Level */}

     

       111
       118
        
               <Show when={props.params.collection}>

     

       112
       112
       -
                 <div class="flex items-center gap-2">

     

       119
       119
       +
                 <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">

     

       113
       120
        
                   <Tooltip text="Collection">

     

       114
       114
       -
                     <span class="iconify lucide--folder-open"></span>

     

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

     

       115
       122
        
                   </Tooltip>

     

       116
       116
       -
                   <Show when={props.params.rkey} fallback={<span>{props.params.collection}</span>}>

     

       123
       123
       +
                   <Show

     

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

     

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

     

       126
       126
       +
                   >

     

       117
       127
        
                     <A

     

       118
       128
        
                       end

     

       119
       129
        
                       href={`/at://${props.params.repo}/${props.params.collection}`}

     

       120
       120
       -
                       inactiveClass="text-blue-400 w-full hover:underline active:underline"

     

       130
       130
       +
                       inactiveClass="text-blue-500 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300"

     

       121
       131
        
                     >

     

       122
       132
        
                       {props.params.collection}

     

       123
       133
        
                     </A>

     

       124
       134
        
                   </Show>

     

       125
       135
        
                 </div>

     

       126
       136
        
               </Show>

     

       137
       137
       +
       

     

       138
       138
       +
               {/* Record Level */}

     

       127
       139
        
               <Show when={props.params.rkey}>

     

       128
       128
       -
                 <div class="flex items-center gap-2">

     

       140
       140
       +
                 <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">

     

       129
       141
        
                   <Tooltip text="Record">

     

       130
       130
       -
                     <span class="iconify lucide--file-json"></span>

     

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

     

       131
       143
        
                   </Tooltip>

     

       132
       132
       -
                   <span>{props.params.rkey}</span>

     

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

     

       133
       145
        
                 </div>

     

       134
       146
        
               </Show>

     

       135
       147
        
             </div>

+2 -2

src/layout.tsx

···

       66
       66
        
               </Show>

     

       67
       67
        
             </MetaProvider>

     

       68
       68
        
             <header

     

       69
       69
       -
               class={`dark:shadow-dark-700 dark:bg-dark-300 mb-4 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`}

     

       69
       69
       +
               class={`dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`}

     

       70
       70
        
               style={{

     

       71
       71
        
                 "background-image":

     

       72
       72
        
                   props.params.repo in headers ?

     
···

       104
       104
        
                 </MenuProvider>

     

       105
       105
        
               </div>

     

       106
       106
        
             </header>

     

       107
       107
       -
             <div class="flex w-full flex-col items-center gap-4 text-pretty">

     

       107
       107
       +
             <div class="flex w-full flex-col items-center gap-3 text-pretty">

     

       108
       108
        
               <Show when={showSearch() || location.pathname === "/"}>

     

       109
       109
        
                 <Search />

     

       110
       110
        
               </Show>