commit 5dc95e8ca42b4456fd4ddba81a8b6a7e39b894f1 · pdsls.dev/pdsls

+1 -1

src/components/account.tsx

···

       68
        
         return (

     

       69
        
           <>

     

       70
        
             <Modal open={openManager()} onClose={() => setOpenManager(false)}>

     

       71
       -
               <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       72
        
                 <div class="mb-2 px-1 font-semibold">

     

       73
        
                   <span>Manage accounts</span>

     

       74
        
                 </div>

···

       68
        
         return (

     

       69
        
           <>

     

       70
        
             <Modal open={openManager()} onClose={() => setOpenManager(false)}>

     

       71
       +
               <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       72
        
                 <div class="mb-2 px-1 font-semibold">

     

       73
        
                   <span>Manage accounts</span>

     

       74
        
                 </div>

+1 -1

src/components/button.tsx

···

       13
        
             type="button"

     

       14
        
             class={

     

       15
        
               props.class ??

     

       16
       -
               "dark:hover:bg-dark-200 dark:shadow-dark-800 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"

     

       17
        
             }

     

       18
        
             classList={props.classList}

     

       19
        
             onClick={props.onClick}

···

       13
        
             type="button"

     

       14
        
             class={

     

       15
        
               props.class ??

     

       16
       +
               "dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"

     

       17
        
             }

     

       18
        
             classList={props.classList}

     

       19
        
             onClick={props.onClick}

+5 -5

src/components/create.tsx

···

       175
        
           };

     

       176
        
       

     

       177
        
           return (

     

       178
       -
             <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       179
        
               <h2 class="mb-2 font-semibold">Upload blob</h2>

     

       180
        
               <div class="flex flex-col gap-2 text-sm">

     

       181
        
                 <div class="flex flex-col gap-1">

     
···

       215
        
                   <Show when={!uploading()}>

     

       216
        
                     <Button

     

       217
        
                       onClick={uploadBlob}

     

       218
       -
                       class="dark:shadow-dark-800 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"

     

       219
        
                     >

     

       220
        
                       Upload

     

       221
        
                     </Button>

     
···

       229
        
         return (

     

       230
        
           <>

     

       231
        
             <Modal open={openDialog()} onClose={() => setOpenDialog(false)} closeOnClick={false}>

     

       232
       -
               <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-screen -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-xl lg:w-[48rem] dark:border-neutral-700 starting:opacity-0">

     

       233
        
                 <div class="mb-2 flex w-full justify-between">

     

       234
        
                   <div class="font-semibold">

     

       235
        
                     <span>{props.create ? "Creating" : "Editing"} record</span>

     
···

       274
        
                       <select

     

       275
        
                         name="validate"

     

       276
        
                         id="validate"

     

       277
       -
                         class="dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       278
        
                       >

     

       279
        
                         <option value="unset">Unset</option>

     

       280
        
                         <option value="true">True</option>

     
···

       296
        
                       <div class="text-sm text-red-500 dark:text-red-400">{notice()}</div>

     

       297
        
                     </Show>

     

       298
        
                     <div class="flex justify-between gap-2">

     

       299
       -
                       <div class="dark:hover:bg-dark-200 dark:shadow-dark-800 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">

     

       300
        
                         <input

     

       301
        
                           type="file"

     

       302
        
                           id="blob"

···

       175
        
           };

     

       176
        
       

     

       177
        
           return (

     

       178
       +
             <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       179
        
               <h2 class="mb-2 font-semibold">Upload blob</h2>

     

       180
        
               <div class="flex flex-col gap-2 text-sm">

     

       181
        
                 <div class="flex flex-col gap-1">

     
···

       215
        
                   <Show when={!uploading()}>

     

       216
        
                     <Button

     

       217
        
                       onClick={uploadBlob}

     

       218
       +
                       class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"

     

       219
        
                     >

     

       220
        
                       Upload

     

       221
        
                     </Button>

     
···

       229
        
         return (

     

       230
        
           <>

     

       231
        
             <Modal open={openDialog()} onClose={() => setOpenDialog(false)} closeOnClick={false}>

     

       232
       +
               <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-16 left-[50%] w-screen -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-xl lg:w-[48rem] dark:border-neutral-700 starting:opacity-0">

     

       233
        
                 <div class="mb-2 flex w-full justify-between">

     

       234
        
                   <div class="font-semibold">

     

       235
        
                     <span>{props.create ? "Creating" : "Editing"} record</span>

     
···

       274
        
                       <select

     

       275
        
                         name="validate"

     

       276
        
                         id="validate"

     

       277
       +
                         class="dark:bg-dark-100 dark:shadow-dark-700 rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       278
        
                       >

     

       279
        
                         <option value="unset">Unset</option>

     

       280
        
                         <option value="true">True</option>

     
···

       296
        
                       <div class="text-sm text-red-500 dark:text-red-400">{notice()}</div>

     

       297
        
                     </Show>

     

       298
        
                     <div class="flex justify-between gap-2">

     

       299
       +
                       <div class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">

     

       300
        
                         <input

     

       301
        
                           type="file"

     

       302
        
                           id="blob"

+1 -1

src/components/dropdown.tsx

···

       111
        
               <div

     

       112
        
                 ref={setMenu}

     

       113
        
                 class={

     

       114
       -
                   "dark:bg-dark-300 dark:shadow-dark-800 absolute right-0 z-40 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 shadow-md dark:border-neutral-700 " +

     

       115
        
                   props.menuClass

     

       116
        
                 }

     

       117
        
               >

···

       111
        
               <div

     

       112
        
                 ref={setMenu}

     

       113
        
                 class={

     

       114
       +
                   "dark:bg-dark-300 dark:shadow-dark-700 absolute right-0 z-40 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 shadow-md dark:border-neutral-700 " +

     

       115
        
                   props.menuClass

     

       116
        
                 }

     

       117
        
               >

+1 -1

src/components/editor.tsx

···

       57
        
         return (

     

       58
        
           <div

     

       59
        
             ref={editorDiv}

     

       60
       -
             class="dark:shadow-dark-800 border-[0.5px] border-neutral-300 shadow-xs dark:border-neutral-700"

     

       61
        
           ></div>

     

       62
        
         );

     

       63
        
       };

···

       57
        
         return (

     

       58
        
           <div

     

       59
        
             ref={editorDiv}

     

       60
       +
             class="dark:shadow-dark-700 border-[0.5px] border-neutral-300 shadow-xs dark:border-neutral-700"

     

       61
        
           ></div>

     

       62
        
         );

     

       63
        
       };

+1 -1

src/components/login.tsx

···

       61
        
               <label for="handle" class="hidden">

     

       62
        
                 Add account

     

       63
        
               </label>

     

       64
       -
               <div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">

     

       65
        
                 <label

     

       66
        
                   for="handle"

     

       67
        
                   class="iconify lucide--user-round-plus text-neutral-500 dark:text-neutral-400"

···

       61
        
               <label for="handle" class="hidden">

     

       62
        
                 Add account

     

       63
        
               </label>

     

       64
       +
               <div class="dark:bg-dark-100 dark:shadow-dark-700 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">

     

       65
        
                 <label

     

       66
        
                   for="handle"

     

       67
        
                   class="iconify lucide--user-round-plus text-neutral-500 dark:text-neutral-400"

+3 -3

src/components/search.tsx

···

       99
        
             <label for="input" class="hidden">

     

       100
        
               PDS URL, AT URI, or handle

     

       101
        
             </label>

     

       102
       -
             <div class="dark:bg-dark-100 dark:shadow-dark-800 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">

     

       103
        
               <label

     

       104
        
                 for="input"

     

       105
        
                 class="iconify lucide--search text-neutral-500 dark:text-neutral-400"

     
···

       125
        
               </Show>

     

       126
        
             </div>

     

       127
        
             <Show when={search()?.length && input()}>

     

       128
       -
               <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute z-30 mt-1 flex w-full flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       129
        
                 <For each={search()}>

     

       130
        
                   {(actor) => (

     

       131
        
                     <A

     
···

       159
        
         return (

     

       160
        
           <>

     

       161
        
             <Modal open={openList()} onClose={() => setOpenList(false)}>

     

       162
       -
               <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-[26rem] dark:border-neutral-700 starting:opacity-0">

     

       163
        
                 <div class="mb-2 flex items-center gap-1 font-semibold">

     

       164
        
                   <span class="iconify lucide--link"></span>

     

       165
        
                   <span>Supported URLs</span>

···

       99
        
             <label for="input" class="hidden">

     

       100
        
               PDS URL, AT URI, or handle

     

       101
        
             </label>

     

       102
       +
             <div class="dark:bg-dark-100 dark:shadow-dark-700 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">

     

       103
        
               <label

     

       104
        
                 for="input"

     

       105
        
                 class="iconify lucide--search text-neutral-500 dark:text-neutral-400"

     
···

       125
        
               </Show>

     

       126
        
             </div>

     

       127
        
             <Show when={search()?.length && input()}>

     

       128
       +
               <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute z-30 mt-1 flex w-full flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       129
        
                 <For each={search()}>

     

       130
        
                   {(actor) => (

     

       131
        
                     <A

     
···

       159
        
         return (

     

       160
        
           <>

     

       161
        
             <Modal open={openList()} onClose={() => setOpenList(false)}>

     

       162
       +
               <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-[26rem] dark:border-neutral-700 starting:opacity-0">

     

       163
        
                 <div class="mb-2 flex items-center gap-1 font-semibold">

     

       164
        
                   <span class="iconify lucide--link"></span>

     

       165
        
                   <span>Supported URLs</span>

+1 -1

src/components/text-input.tsx

···

       25
        
             disabled={props.disabled}

     

       26
        
             required={props.required}

     

       27
        
             class={

     

       28
       -
               "dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +

     

       29
        
               props.class

     

       30
        
             }

     

       31
        
             onInput={props.onInput}

···

       25
        
             disabled={props.disabled}

     

       26
        
             required={props.required}

     

       27
        
             class={

     

       28
       +
               "dark:bg-dark-100 dark:shadow-dark-700 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +

     

       29
        
               props.class

     

       30
        
             }

     

       31
        
             onInput={props.onInput}

+1 -1

src/components/tooltip.tsx

···

       7
        
           <Show when={!isTouchDevice}>

     

       8
        
             <span

     

       9
        
               style={`transform: translate(-50%, 28px)`}

     

       10
       -
               class={`dark:shadow-dark-800 pointer-events-none absolute left-[50%] z-20 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-neutral-50 p-1 text-center font-sans text-xs whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`}

     

       11
        
             >

     

       12
        
               {props.text}

     

       13
        
             </span>

···

       7
        
           <Show when={!isTouchDevice}>

     

       8
        
             <span

     

       9
        
               style={`transform: translate(-50%, 28px)`}

     

       10
       +
               class={`dark:shadow-dark-700 pointer-events-none absolute left-[50%] z-20 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-neutral-50 p-1 text-center font-sans text-xs whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200`}

     

       11
        
             >

     

       12
        
               {props.text}

     

       13
        
             </span>

+2 -2

src/layout.tsx

···

       66
        
               </Show>

     

       67
        
             </MetaProvider>

     

       68
        
             <header

     

       69
       -
               class={`dark:shadow-dark-800 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 ?

     
···

       127
        
             </div>

     

       128
        
             <Show when={notif().show}>

     

       129
        
               <button

     

       130
       -
                 class="dark:shadow-dark-800 dark:bg-dark-100 fixed bottom-10 z-50 flex items-center rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700"

     

       131
        
                 onClick={() => setNotif({ show: false })}

     

       132
        
               >

     

       133
        
                 <span class={`iconify ${notif().icon} mr-1`}></span>

···

       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 ?

     
···

       127
        
             </div>

     

       128
        
             <Show when={notif().show}>

     

       129
        
               <button

     

       130
       +
                 class="dark:shadow-dark-700 dark:bg-dark-100 fixed bottom-10 z-50 flex items-center rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700"

     

       131
        
                 onClick={() => setNotif({ show: false })}

     

       132
        
               >

     

       133
        
                 <span class={`iconify ${notif().icon} mr-1`}></span>

+3 -3

src/views/collection.tsx

···

       60
        
             <Show when={hover()}>

     

       61
        
               <span

     

       62
        
                 ref={previewRef}

     

       63
       -
                 class={`dark:bg-dark-300 dark:shadow-dark-800 pointer-events-none absolute left-[50%] z-25 block max-h-[20rem] w-max max-w-sm -translate-x-1/2 overflow-hidden rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-xs whitespace-pre-wrap shadow-md sm:max-h-[28rem] lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}

     

       64
        
               >

     

       65
        
                 <JSONValue

     

       66
        
                   data={props.record.record.value as JSONType}

     
···

       258
        
                         </Show>

     

       259
        
                       </div>

     

       260
        
                       <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       261
       -
                         <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       262
        
                           <h2 class="mb-2 font-semibold">

     

       263
        
                             {recreate() ? "Recreate" : "Delete"}{" "}

     

       264
        
                             {records.filter((r) => r.toDelete).length} records?

     
···

       267
        
                             <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       268
        
                             <Button

     

       269
        
                               onClick={deleteRecords}

     

       270
       -
                               class={`dark:shadow-dark-800 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500" : "bg-red-500 hover:bg-red-400 active:bg-red-400"}`}

     

       271
        
                             >

     

       272
        
                               {recreate() ? "Recreate" : "Delete"}

     

       273
        
                             </Button>

···

       60
        
             <Show when={hover()}>

     

       61
        
               <span

     

       62
        
                 ref={previewRef}

     

       63
       +
                 class={`dark:bg-dark-300 dark:shadow-dark-700 pointer-events-none absolute left-[50%] z-25 block max-h-[20rem] w-max max-w-sm -translate-x-1/2 overflow-hidden rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-xs whitespace-pre-wrap shadow-md sm:max-h-[28rem] lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}

     

       64
        
               >

     

       65
        
                 <JSONValue

     

       66
        
                   data={props.record.record.value as JSONType}

     
···

       258
        
                         </Show>

     

       259
        
                       </div>

     

       260
        
                       <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       261
       +
                         <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       262
        
                           <h2 class="mb-2 font-semibold">

     

       263
        
                             {recreate() ? "Recreate" : "Delete"}{" "}

     

       264
        
                             {records.filter((r) => r.toDelete).length} records?

     
···

       267
        
                             <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       268
        
                             <Button

     

       269
        
                               onClick={deleteRecords}

     

       270
       +
                               class={`dark:shadow-dark-700 rounded-lg px-2 py-1.5 text-xs text-white shadow-xs select-none ${recreate() ? "bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500" : "bg-red-500 hover:bg-red-400 active:bg-red-400"}`}

     

       271
        
                             >

     

       272
        
                               {recreate() ? "Recreate" : "Delete"}

     

       273
        
                             </Button>

+1 -1

src/views/labels.tsx

···

       78
        
                   spellcheck={false}

     

       79
        
                   rows={2}

     

       80
        
                   value={searchParams.uriPatterns ?? "*"}

     

       81
       -
                   class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       82
        
                 />

     

       83
        
                 <div class="flex justify-center">

     

       84
        
                   <Show when={!response.loading}>

···

       78
        
                   spellcheck={false}

     

       79
        
                   rows={2}

     

       80
        
                   value={searchParams.uriPatterns ?? "*"}

     

       81
       +
                   class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       82
        
                 />

     

       83
        
                 <div class="flex justify-center">

     

       84
        
                   <Show when={!response.loading}>

+1 -1

src/views/logs.tsx

···

       114
        
             <div class="flex items-center justify-between">

     

       115
        
               <div class="flex items-center gap-1">

     

       116
        
                 <div class="iconify lucide--filter" />

     

       117
       -
                 <div class="dark:shadow-dark-800 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-xs dark:border-neutral-700">

     

       118
        
                   <FilterButton icon="iconify lucide--at-sign" event="handle" />

     

       119
        
                   <FilterButton icon="iconify lucide--key-round" event="rotation_key" />

     

       120
        
                   <FilterButton icon="iconify lucide--hard-drive" event="service" />

···

       114
        
             <div class="flex items-center justify-between">

     

       115
        
               <div class="flex items-center gap-1">

     

       116
        
                 <div class="iconify lucide--filter" />

     

       117
       +
                 <div class="dark:shadow-dark-700 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-xs dark:border-neutral-700">

     

       118
        
                   <FilterButton icon="iconify lucide--at-sign" event="handle" />

     

       119
        
                   <FilterButton icon="iconify lucide--key-round" event="rotation_key" />

     

       120
        
                   <FilterButton icon="iconify lucide--hard-drive" event="service" />

+2 -2

src/views/pds.tsx

···

       74
        
                 <span class="iconify lucide--info"></span>

     

       75
        
               </button>

     

       76
        
               <Modal open={openInfo()} onClose={() => setOpenInfo(false)}>

     

       77
       -
                 <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-70 left-[50%] w-max max-w-full -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 break-words shadow-md transition-opacity duration-200 sm:max-w-[32rem] dark:border-neutral-700 starting:opacity-0">

     

       78
        
                   <div class="mb-1 flex justify-between gap-2">

     

       79
        
                     <div class="flex items-center gap-1">

     

       80
        
                       <span class="iconify lucide--info"></span>

     
···

       128
        
         return (

     

       129
        
           <Show when={repos() || response()}>

     

       130
        
             <div class="flex w-full flex-col">

     

       131
       -
               <div class="dark:shadow-dark-800 dark:bg-dark-300 mb-2 flex w-full justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700">

     

       132
        
                 <div class="flex gap-3">

     

       133
        
                   <Tab tab="repos" label="Repositories" />

     

       134
        
                   <Tab tab="info" label="Info" />

···

       74
        
                 <span class="iconify lucide--info"></span>

     

       75
        
               </button>

     

       76
        
               <Modal open={openInfo()} onClose={() => setOpenInfo(false)}>

     

       77
       +
                 <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-full -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 break-words shadow-md transition-opacity duration-200 sm:max-w-[32rem] dark:border-neutral-700 starting:opacity-0">

     

       78
        
                   <div class="mb-1 flex justify-between gap-2">

     

       79
        
                     <div class="flex items-center gap-1">

     

       80
        
                       <span class="iconify lucide--info"></span>

     
···

       128
        
         return (

     

       129
        
           <Show when={repos() || response()}>

     

       130
        
             <div class="flex w-full flex-col">

     

       131
       +
               <div class="dark:shadow-dark-700 dark:bg-dark-300 mb-2 flex w-full justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700">

     

       132
        
                 <div class="flex gap-3">

     

       133
        
                   <Tab tab="repos" label="Repositories" />

     

       134
        
                   <Tab tab="info" label="Info" />

+3 -3

src/views/record.tsx

···

       154
        
         return (

     

       155
        
           <Show when={record()} keyed>

     

       156
        
             <div class="flex w-full flex-col items-center">

     

       157
       -
               <div class="dark:shadow-dark-800 dark:bg-dark-300 mb-3 flex w-full justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700">

     

       158
        
                 <div class="flex gap-3">

     

       159
        
                   <RecordTab tab="record" label="Record" />

     

       160
        
                   <RecordTab tab="backlinks" label="Backlinks" />

     
···

       172
        
                       </button>

     

       173
        
                     </Tooltip>

     

       174
        
                     <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       175
       -
                       <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       176
        
                         <h2 class="mb-2 font-semibold">Delete this record?</h2>

     

       177
        
                         <div class="flex justify-end gap-2">

     

       178
        
                           <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       179
        
                           <Button

     

       180
        
                             onClick={deleteRecord}

     

       181
       -
                             class="dark:shadow-dark-800 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"

     

       182
        
                           >

     

       183
        
                             Delete

     

       184
        
                           </Button>

···

       154
        
         return (

     

       155
        
           <Show when={record()} keyed>

     

       156
        
             <div class="flex w-full flex-col items-center">

     

       157
       +
               <div class="dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700">

     

       158
        
                 <div class="flex gap-3">

     

       159
        
                   <RecordTab tab="record" label="Record" />

     

       160
        
                   <RecordTab tab="backlinks" label="Backlinks" />

     
···

       172
        
                       </button>

     

       173
        
                     </Tooltip>

     

       174
        
                     <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>

     

       175
       +
                       <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       176
        
                         <h2 class="mb-2 font-semibold">Delete this record?</h2>

     

       177
        
                         <div class="flex justify-end gap-2">

     

       178
        
                           <Button onClick={() => setOpenDelete(false)}>Cancel</Button>

     

       179
        
                           <Button

     

       180
        
                             onClick={deleteRecord}

     

       181
       +
                             class="dark:shadow-dark-700 rounded-lg bg-red-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-red-400 active:bg-red-400"

     

       182
        
                           >

     

       183
        
                             Delete

     

       184
        
                           </Button>

+1 -1

src/views/repo.tsx

···

       134
        
           <Show when={repo()}>

     

       135
        
             <div class="flex w-full flex-col gap-2 break-words">

     

       136
        
               <div

     

       137
       -
                 class={`dark:shadow-dark-800 dark:bg-dark-300 flex justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700`}

     

       138
        
               >

     

       139
        
                 <div class="flex gap-2 sm:gap-4">

     

       140
        
                   <Show when={!error()}>

···

       134
        
           <Show when={repo()}>

     

       135
        
             <div class="flex w-full flex-col gap-2 break-words">

     

       136
        
               <div

     

       137
       +
                 class={`dark:shadow-dark-700 dark:bg-dark-300 flex justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700`}

     

       138
        
               >

     

       139
        
                 <div class="flex gap-2 sm:gap-4">

     

       140
        
                   <Show when={!error()}>

+2 -2

src/views/stream.tsx

···

       183
        
                         spellcheck={false}

     

       184
        
                         placeholder="Comma-separated list of collections"

     

       185
        
                         value={searchParams.collections ?? ""}

     

       186
       -
                         class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       187
        
                       />

     

       188
        
                     </label>

     

       189
        
                   </Show>

     
···

       195
        
                         spellcheck={false}

     

       196
        
                         placeholder="Comma-separated list of DIDs"

     

       197
        
                         value={searchParams.dids ?? ""}

     

       198
       -
                         class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       199
        
                       />

     

       200
        
                     </label>

     

       201
        
                   </Show>

···

       183
        
                         spellcheck={false}

     

       184
        
                         placeholder="Comma-separated list of collections"

     

       185
        
                         value={searchParams.collections ?? ""}

     

       186
       +
                         class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       187
        
                       />

     

       188
        
                     </label>

     

       189
        
                   </Show>

     
···

       195
        
                         spellcheck={false}

     

       196
        
                         placeholder="Comma-separated list of DIDs"

     

       197
        
                         value={searchParams.dids ?? ""}

     

       198
       +
                         class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       199
        
                       />

     

       200
        
                     </label>

     

       201
        
                   </Show>