ansxor.ca / pdsls
forked from pds.ls/pdsls
atmosphere explorer
fork atom

show collection favicon when hovering

handle.invalid f6bca7fb 7e608433

verified
+25 -2
unified split
+25 -2
src/components/navbar.tsx
··· 5 5 import { didDocCache } from "../utils/api"; 6 6 import { addToClipboard } from "../utils/copy"; 7 7 import { localDateFromTimestamp } from "../utils/date"; 8 + import { Favicon } from "./favicon"; 8 9 import Tooltip from "./tooltip"; 9 10 10 11 export const [pds, setPDS] = createSignal<string>(); ··· 35 36 const [repoHovered, setRepoHovered] = createSignal(false); 36 37 const [hasHoveredRepo, setHasHoveredRepo] = createSignal(false); 37 38 const [faviconLoaded, setFaviconLoaded] = createSignal(false); 39 + const [collectionHovered, setCollectionHovered] = createSignal(false); 38 40 const isCustomDomain = () => handle() && !handle()!.endsWith(".bsky.social"); 39 41 40 42 createEffect(() => { ··· 183 185 184 186 {/* Collection Level */} 185 187 <Show when={props.params.collection}> 186 - <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"> 188 + <div 189 + 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" 190 + onMouseEnter={() => { 191 + if (canHover) setCollectionHovered(true); 192 + }} 193 + onMouseLeave={() => { 194 + if (canHover) setCollectionHovered(false); 195 + }} 196 + > 187 197 <div class="flex basis-full items-center gap-2"> 188 198 <Tooltip text="Collection"> 189 - <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> 199 + <div class="relative flex h-5 w-3.5 shrink-0 items-center justify-center sm:w-4"> 200 + <Show 201 + when={collectionHovered()} 202 + fallback={ 203 + <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> 204 + } 205 + > 206 + {(() => { 207 + const parts = props.params.collection!.split("."); 208 + const authority = `${parts[0]}.${parts[1]}`; 209 + return <Favicon authority={authority} wrapper={(c) => c} />; 210 + })()} 211 + </Show> 212 + </div> 190 213 </Tooltip> 191 214 <Show 192 215 when={props.params.rkey}