atproto explorer

increase record toolbar hitslop

+35 -32
+10 -9
src/components/create.tsx
··· 277 277 </form> 278 278 </div> 279 279 </Modal> 280 - <button 281 - onclick={() => { 282 - createModel(); 283 - setOpenDialog(true); 284 - }} 285 - > 286 - <Tooltip text={`${props.create ? "Create" : "Edit"} record`}> 280 + <Tooltip text={`${props.create ? "Create" : "Edit"} record`}> 281 + <button 282 + class={props.create ? "" : "p-1"} 283 + onclick={() => { 284 + createModel(); 285 + setOpenDialog(true); 286 + }} 287 + > 287 288 <div class={props.create ? "i-lucide-square-pen text-xl" : "i-lucide-pencil"} /> 288 - </Tooltip> 289 - </button> 289 + </button> 290 + </Tooltip> 290 291 </> 291 292 ); 292 293 };
+25 -23
src/views/record.tsx
··· 145 145 Backlinks 146 146 </button> 147 147 </div> 148 - <div class="flex gap-3"> 148 + <div class="flex gap-1"> 149 149 <Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}> 150 150 <RecordEditor create={false} record={record()?.value} /> 151 - <div class="relative flex"> 152 - <Tooltip text="Delete"> 153 - <button onclick={() => setOpenDelete(true)}> 154 - <div class="i-lucide-trash-2" /> 155 - </button> 156 - </Tooltip> 157 - <Modal open={openDelete()} onClose={() => setOpenDelete(false)}> 158 - <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900/80 backdrop-blur-xs left-50% top-70 absolute -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200"> 159 - <h2 class="mb-2 font-bold">Delete this record?</h2> 160 - <div class="flex justify-end gap-2"> 161 - <Button onClick={() => setOpenDelete(false)}>Cancel</Button> 162 - <Button 163 - onClick={deleteRecord} 164 - class="dark:shadow-dark-900/80 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-sm hover:bg-red-400" 165 - > 166 - Delete 167 - </Button> 168 - </div> 151 + <Tooltip text="Delete"> 152 + <button class="p-1" onclick={() => setOpenDelete(true)}> 153 + <div class="i-lucide-trash-2" /> 154 + </button> 155 + </Tooltip> 156 + <Modal open={openDelete()} onClose={() => setOpenDelete(false)}> 157 + <div class="starting:opacity-0 dark:bg-dark-800/70 border-0.5 dark:shadow-dark-900/80 backdrop-blur-xs left-50% top-70 absolute -translate-x-1/2 rounded-lg border-neutral-300 bg-neutral-200/70 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200"> 158 + <h2 class="mb-2 font-bold">Delete this record?</h2> 159 + <div class="flex justify-end gap-2"> 160 + <Button onClick={() => setOpenDelete(false)}>Cancel</Button> 161 + <Button 162 + onClick={deleteRecord} 163 + class="dark:shadow-dark-900/80 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-sm hover:bg-red-400" 164 + > 165 + Delete 166 + </Button> 169 167 </div> 170 - </Modal> 171 - </div> 168 + </div> 169 + </Modal> 172 170 </Show> 173 171 <Tooltip text="Copy record"> 174 - <button onclick={() => addToClipboard(JSON.stringify(record()?.value, null, 2))}> 172 + <button 173 + class="p-1" 174 + onclick={() => addToClipboard(JSON.stringify(record()?.value, null, 2))} 175 + > 175 176 <div class="i-lucide-copy" /> 176 177 </button> 177 178 </Tooltip> 178 179 <Show when={externalLink()}> 179 180 {(externalLink) => ( 180 181 <Tooltip text={`Open on ${externalLink().label}`}> 181 - <a target="_blank" href={externalLink()?.link}> 182 + <a class="p-1" target="_blank" href={externalLink()?.link}> 182 183 <div class={`${externalLink().icon ?? "i-lucide-app-window"}`} /> 183 184 </a> 184 185 </Tooltip> ··· 186 187 </Show> 187 188 <Tooltip text="Record on PDS"> 188 189 <a 190 + class="p-1" 189 191 href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`} 190 192 target="_blank" 191 193 >