add hitslop to icons · vielle.dev/pdsls@24677c4

+13 -10

src/components/json.tsx

··· 146 146 <VideoPlayer did={repo} cid={blob.ref.$link} /> 147 147 </Show> 148 148 <span 149 - classList={{ "flex items-center justify-between gap-2": true, "flex-col": !hide() }} 149 + classList={{ "flex items-center justify-between gap-1": true, "flex-col": !hide() }} 150 150 > 151 151 <Show when={blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4"}> 152 152 <Tooltip text={hide() ? "Show" : "Hide"}> 153 - <button onclick={() => setHide(!hide())} class="flex items-center"> 153 + <button 154 + onclick={() => setHide(!hide())} 155 + class={`${!hide() ? "-mt-1 -ml-0.5" : ""} flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`} 156 + > 154 157 <span 155 158 class={`iconify text-base ${hide() ? "lucide--eye-off" : "lucide--eye"}`} 156 159 ></span> ··· 158 161 </Tooltip> 159 162 </Show> 160 163 <Show when={pds()}> 161 - <a 162 - href={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${repo}&cid=${blob.ref.$link}`} 163 - target="_blank" 164 - class="size-fit" 165 - > 166 - <Tooltip text="Blob PDS link"> 164 + <Tooltip text="Blob PDS link"> 165 + <a 166 + href={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${repo}&cid=${blob.ref.$link}`} 167 + target="_blank" 168 + class={`${!hide() ? "-mb-1 -ml-0.5" : ""} flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`} 169 + > 167 170 <span class="iconify lucide--external-link text-base"></span> 168 - </Tooltip> 169 - </a> 171 + </a> 172 + </Tooltip> 170 173 </Show> 171 174 </span> 172 175 </span>

+10 -7

src/views/collection.tsx

··· 183 183 <Show when={records.length || response()}> 184 184 <div class="-mt-2 flex w-full flex-col items-center"> 185 185 <StickyOverlay> 186 - <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]"> 186 + <div class="flex w-[22rem] items-center gap-1 sm:w-[24rem]"> 187 187 <Show when={agent() && agent()?.sub === did}> 188 - <div class="flex items-center gap-x-2"> 188 + <div class="flex items-center"> 189 189 <Tooltip 190 190 text={batchDelete() ? "Cancel" : "Delete"} 191 191 children={ ··· 199 199 setLastSelected(undefined); 200 200 setBatchDelete(!batchDelete()); 201 201 }} 202 - class="flex items-center" 202 + class="-ml-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 203 203 > 204 204 <span 205 205 class={`iconify text-lg ${batchDelete() ? "lucide--circle-x" : "lucide--trash-2"} `} ··· 211 211 <Tooltip 212 212 text="Select all" 213 213 children={ 214 - <button onclick={() => selectAll()} class="flex items-center"> 214 + <button 215 + onclick={() => selectAll()} 216 + class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 217 + > 215 218 <span class="iconify lucide--copy-check text-lg"></span> 216 219 </button> 217 220 } ··· 224 227 setRecreate(true); 225 228 setOpenDelete(true); 226 229 }} 227 - class="flex items-center" 230 + class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 228 231 > 229 232 <span class="iconify lucide--recycle text-lg text-green-500 dark:text-green-400"></span> 230 233 </button> ··· 238 241 setRecreate(false); 239 242 setOpenDelete(true); 240 243 }} 241 - class="flex items-center" 244 + class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 242 245 > 243 246 <span class="iconify lucide--trash-2 text-lg text-red-500 dark:text-red-400"></span> 244 247 </button> ··· 267 270 <Tooltip text="Jetstream"> 268 271 <A 269 272 href={`/jetstream?collections=${params.collection}&dids=${params.repo}`} 270 - class="flex items-center" 273 + class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 271 274 > 272 275 <span class="iconify lucide--radio-tower text-lg"></span> 273 276 </A>

+7 -4

src/views/repo.tsx

··· 121 121 <a 122 122 href={`${localStorage.plcDirectory ?? "https://plc.directory"}/${props.did}/log/audit`} 123 123 target="_blank" 124 - class="flex items-center" 124 + class="-mr-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 125 125 > 126 126 <span class="iconify lucide--external-link"></span> 127 127 </a> ··· 308 308 </ErrorBoundary> 309 309 </Show> 310 310 <Show when={nsids() && (!location.hash || location.hash === "#collections")}> 311 - <div class="flex items-center gap-2"> 311 + <div class="flex items-center gap-1"> 312 312 <Tooltip text="Jetstream"> 313 - <A href={`/jetstream?dids=${params.repo}`} class="flex items-center"> 313 + <A 314 + href={`/jetstream?dids=${params.repo}`} 315 + class="-ml-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 316 + > 314 317 <span class="iconify lucide--radio-tower text-lg"></span> 315 318 </A> 316 319 </Tooltip> ··· 393 396 : `https://${did.split("did:web:")[1]}/.well-known/did.json` 394 397 } 395 398 target="_blank" 396 - class="flex items-center" 399 + class="-mr-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 397 400 > 398 401 <span class="iconify lucide--external-link"></span> 399 402 </a>

Configure Feed

Configure Feed