atmosphere explorer pds.ls
tool typescript atproto
434
fork

Configure Feed

Select the types of activity you want to include in your feed.

move record edit options to advanced modal

Juliet 3cc49604 09987bf0

+32 -32
+12 -20
src/components/create/confirm-submit.tsx
··· 1 - import { createSignal, For, Show } from "solid-js"; 1 + import { For, Show } from "solid-js"; 2 2 import { hasUserScope } from "../../auth/scope-utils"; 3 3 import { Button } from "../button.jsx"; 4 4 ··· 13 13 14 14 export const ConfirmSubmit = (props: { 15 15 isCreate: boolean; 16 - onConfirm: (validate: boolean | undefined, recreate: boolean) => void; 16 + validate: boolean | undefined; 17 + setValidate: (v: boolean | undefined) => void; 18 + recreate: boolean; 19 + setRecreate: (v: boolean) => void; 17 20 onClose: () => void; 18 21 }) => { 19 - const [validate, setValidate] = createSignal<boolean | undefined>(undefined); 20 - const [recreate, setRecreate] = createSignal(false); 21 - 22 22 return ( 23 23 <div class="flex flex-col gap-3 text-sm"> 24 - <h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2> 24 + <h2 class="font-semibold">Advanced options</h2> 25 25 26 26 <div class="flex flex-col gap-1.5"> 27 27 <div class="flex items-center justify-between gap-2"> ··· 31 31 {(opt) => ( 32 32 <button 33 33 type="button" 34 - onClick={() => setValidate(opt.value)} 35 - class={`border-r border-neutral-200 px-2.5 py-1.5 transition-colors last:border-r-0 dark:border-neutral-600 ${validate() === opt.value ? activeClass : inactiveClass}`} 34 + onClick={() => props.setValidate(opt.value)} 35 + class={`border-r border-neutral-200 px-2.5 py-1.5 transition-colors last:border-r-0 dark:border-neutral-600 ${props.validate === opt.value ? activeClass : inactiveClass}`} 36 36 > 37 37 {opt.label} 38 38 </button> ··· 53 53 > 54 54 <input 55 55 type="checkbox" 56 - checked={recreate()} 56 + checked={props.recreate} 57 57 disabled={!hasUserScope("create")} 58 - onChange={(e) => setRecreate(e.currentTarget.checked)} 58 + onChange={(e) => props.setRecreate(e.currentTarget.checked)} 59 59 class="h-3.5 w-3.5 accent-blue-500" 60 60 /> 61 61 Recreate{!hasUserScope("create") ? " (create permission needed)" : ""} ··· 66 66 </div> 67 67 </Show> 68 68 69 - <div class="flex justify-between gap-2"> 70 - <Button onClick={props.onClose}>Cancel</Button> 71 - <Button 72 - onClick={() => props.onConfirm(validate(), recreate())} 73 - classList={{ 74 - "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true, 75 - }} 76 - > 77 - Confirm 78 - </Button> 69 + <div class="flex justify-end gap-2"> 70 + <Button onClick={props.onClose}>Done</Button> 79 71 </div> 80 72 </div> 81 73 );
+20 -12
src/components/create/index.tsx
··· 45 45 const [openInsertMenu, setOpenInsertMenu] = createSignal(false); 46 46 const [openHandleDialog, setOpenHandleDialog] = createSignal(false); 47 47 const [openConfirmDialog, setOpenConfirmDialog] = createSignal(false); 48 + const [validate, setValidate] = createSignal<boolean | undefined>(undefined); 49 + const [recreate, setRecreate] = createSignal(false); 48 50 49 51 const hasPermission = () => !props.scope || hasUserScope(props.scope); 50 52 const [isMaximized, setIsMaximized] = createSignal(false); ··· 139 141 setNotice(`${res.data.error}: ${res.data.message}`); 140 142 return; 141 143 } 142 - setOpenConfirmDialog(false); 143 144 setOpenDialog(false); 144 145 const id = addNotification({ 145 146 message: "Record created", ··· 199 200 return; 200 201 } 201 202 } 202 - setOpenConfirmDialog(false); 203 203 setOpenDialog(false); 204 204 const id = addNotification({ 205 205 message: "Record edited", ··· 415 415 <Modal 416 416 open={openConfirmDialog()} 417 417 onClose={() => setOpenConfirmDialog(false)} 418 - closeOnClick={false} 419 418 contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[24rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700" 420 419 > 421 420 <ConfirmSubmit 422 421 isCreate={props.create} 423 - onConfirm={(validate, recreate) => { 424 - if (props.create) { 425 - createRecord(validate); 426 - } else { 427 - editRecord(validate, recreate); 428 - } 429 - }} 422 + validate={validate()} 423 + setValidate={setValidate} 424 + recreate={recreate()} 425 + setRecreate={setRecreate} 430 426 onClose={() => setOpenConfirmDialog(false)} 431 427 /> 432 428 </Modal> 433 429 <div class="flex items-center justify-end gap-2"> 434 - <Button onClick={() => setOpenConfirmDialog(true)}> 435 - {props.create ? "Create..." : "Edit..."} 430 + <Button onClick={() => setOpenConfirmDialog(true)}>Advanced</Button> 431 + <Button 432 + onClick={() => { 433 + if (props.create) { 434 + createRecord(validate()); 435 + } else { 436 + editRecord(validate(), recreate()); 437 + } 438 + }} 439 + classList={{ 440 + "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true, 441 + }} 442 + > 443 + {props.create ? "Create" : "Edit"} 436 444 </Button> 437 445 </div> 438 446 </div>