retr0.id / pdsls
forked from pds.ls/pdsls
atproto explorer
fork atom

restyle navbar

handle.invalid c440ce3a 1cf8db5f

verified
+40 -28
unified split
+38 -26
src/components/navbar.tsx
··· 22 }); 23 24 return ( 25 - <nav class="flex w-full flex-col px-2 text-sm wrap-anywhere sm:text-base"> 26 - <div class="relative flex items-center justify-between gap-1"> 27 - <div class="flex min-h-5 basis-full items-center gap-2 sm:min-h-6"> 28 <Tooltip text="PDS"> 29 - <span class="iconify lucide--hard-drive shrink-0"></span> 30 </Tooltip> 31 <Show when={pds()}> 32 - <Show when={props.params.repo} fallback={<span>{pds()}</span>}> 33 <A 34 end 35 href={pds()!} 36 - inactiveClass="text-blue-400 w-full hover:underline active:underline" 37 > 38 {pds()} 39 </A> ··· 44 <MenuProvider> 45 <DropdownMenu 46 icon="lucide--copy" 47 - buttonClass="rounded p-0.5 sm:p-1 text-base" 48 - menuClass="top-6 p-2 text-xs" 49 > 50 <Show when={pds()}> 51 <CopyMenu copyContent={pds()!} label="Copy PDS" /> ··· 59 </MenuProvider> 60 </Show> 61 </div> 62 - <div class="flex flex-col flex-wrap"> 63 <Show when={props.params.repo}> 64 - <div class="relative flex items-center justify-between gap-1"> 65 - <div class="flex basis-full items-center gap-2"> 66 <Tooltip text="Repository"> 67 - <span class="iconify lucide--book-user"></span> 68 </Tooltip> 69 {props.params.collection || location.pathname.includes("/labels") ? 70 <A 71 end 72 href={`/at://${props.params.repo}`} 73 - inactiveClass="text-blue-400 hover:underline active:underline w-full" 74 > 75 {showHandle() ? handle() : props.params.repo} 76 </A> 77 - : <span>{showHandle() ? handle() : props.params.repo}</span>} 78 </div> 79 <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 80 <button 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" 82 onclick={() => { 83 localStorage.showHandle = !showHandle(); 84 setShowHandle(!showHandle()); 85 }} 86 > 87 <span 88 - class={`iconify shrink-0 transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 89 ></span> 90 </button> 91 </Tooltip> 92 </div> 93 </Show> 94 <Show 95 when={ 96 !props.params.collection && 97 (props.params.repo in labelerCache || location.pathname.endsWith("/labels")) 98 } 99 > 100 - <div class="flex items-center gap-2"> 101 - <span class="iconify lucide--tag"></span> 102 <A 103 end 104 href={`/at://${props.params.repo}/labels`} 105 - inactiveClass="text-blue-400 grow hover:underline active:underline" 106 > 107 labels 108 </A> 109 </div> 110 </Show> 111 <Show when={props.params.collection}> 112 - <div class="flex items-center gap-2"> 113 <Tooltip text="Collection"> 114 - <span class="iconify lucide--folder-open"></span> 115 </Tooltip> 116 - <Show when={props.params.rkey} fallback={<span>{props.params.collection}</span>}> 117 <A 118 end 119 href={`/at://${props.params.repo}/${props.params.collection}`} 120 - inactiveClass="text-blue-400 w-full hover:underline active:underline" 121 > 122 {props.params.collection} 123 </A> 124 </Show> 125 </div> 126 </Show> 127 <Show when={props.params.rkey}> 128 - <div class="flex items-center gap-2"> 129 <Tooltip text="Record"> 130 - <span class="iconify lucide--file-json"></span> 131 </Tooltip> 132 - <span>{props.params.rkey}</span> 133 </div> 134 </Show> 135 </div>
··· 22 }); 23 24 return ( 25 + <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base"> 26 + {/* PDS Level */} 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 + <div class="flex min-h-5 basis-full items-center gap-1.5 sm:min-h-6"> 29 <Tooltip text="PDS"> 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> 31 </Tooltip> 32 <Show when={pds()}> 33 + <Show when={props.params.repo} fallback={<span class="font-medium">{pds()}</span>}> 34 <A 35 end 36 href={pds()!} 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" 38 > 39 {pds()} 40 </A> ··· 45 <MenuProvider> 46 <DropdownMenu 47 icon="lucide--copy" 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 + menuClass="top-7 p-2 text-xs" 50 > 51 <Show when={pds()}> 52 <CopyMenu copyContent={pds()!} label="Copy PDS" /> ··· 60 </MenuProvider> 61 </Show> 62 </div> 63 + 64 + <div class="flex flex-col"> 65 <Show when={props.params.repo}> 66 + {/* Repository Level */} 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 + <div class="flex basis-full items-center gap-1.5"> 69 <Tooltip text="Repository"> 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> 71 </Tooltip> 72 {props.params.collection || location.pathname.includes("/labels") ? 73 <A 74 end 75 href={`/at://${props.params.repo}`} 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" 77 > 78 {showHandle() ? handle() : props.params.repo} 79 </A> 80 + : <span class="font-medium">{showHandle() ? handle() : props.params.repo}</span>} 81 </div> 82 <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 83 <button 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" 85 onclick={() => { 86 localStorage.showHandle = !showHandle(); 87 setShowHandle(!showHandle()); 88 }} 89 > 90 <span 91 + class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 92 ></span> 93 </button> 94 </Tooltip> 95 </div> 96 </Show> 97 + 98 + {/* Labels Level */} 99 <Show 100 when={ 101 !props.params.collection && 102 (props.params.repo in labelerCache || location.pathname.endsWith("/labels")) 103 } 104 > 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 + <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> 107 <A 108 end 109 href={`/at://${props.params.repo}/labels`} 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" 111 > 112 labels 113 </A> 114 </div> 115 </Show> 116 + 117 + {/* Collection Level */} 118 <Show when={props.params.collection}> 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"> 120 <Tooltip text="Collection"> 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> 122 </Tooltip> 123 + <Show 124 + when={props.params.rkey} 125 + fallback={<span class="font-medium">{props.params.collection}</span>} 126 + > 127 <A 128 end 129 href={`/at://${props.params.repo}/${props.params.collection}`} 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" 131 > 132 {props.params.collection} 133 </A> 134 </Show> 135 </div> 136 </Show> 137 + 138 + {/* Record Level */} 139 <Show when={props.params.rkey}> 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"> 141 <Tooltip text="Record"> 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> 143 </Tooltip> 144 + <span class="font-medium">{props.params.rkey}</span> 145 </div> 146 </Show> 147 </div>
+2 -2
src/layout.tsx
··· 66 </Show> 67 </MetaProvider> 68 <header 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%)]" : ""}`} 70 style={{ 71 "background-image": 72 props.params.repo in headers ? ··· 104 </MenuProvider> 105 </div> 106 </header> 107 - <div class="flex w-full flex-col items-center gap-4 text-pretty"> 108 <Show when={showSearch() || location.pathname === "/"}> 109 <Search /> 110 </Show>
··· 66 </Show> 67 </MetaProvider> 68 <header 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 style={{ 71 "background-image": 72 props.params.repo in headers ? ··· 104 </MenuProvider> 105 </div> 106 </header> 107 + <div class="flex w-full flex-col items-center gap-3 text-pretty"> 108 <Show when={showSearch() || location.pathname === "/"}> 109 <Search /> 110 </Show>