Allow about photos to be cleared

src/about/AdminAboutEditPage.tsx

@@ -47,7 +47,7 @@ export default function AdminAboutEditPage({
           <FieldsetPhotoChooser
             id="photoIdAvatar"
             label="Avatar"
-            value={aboutForm?.photoIdAvatar || photoAvatar?.id || ''}
+            value={aboutForm?.photoIdAvatar ?? photoAvatar?.id ?? ''}
             onChange={photoIdAvatar => setAboutForm(form =>
               ({ ...form, photoIdAvatar }))}
             photo={photoAvatar}

src/photo/form/FieldsetPhotoChooser.tsx

@@ -164,8 +164,14 @@ export default function FieldsetPhotoChooser({
               'z-20 rounded-2xl pb-0 overflow-auto',
             )}
           >
+            <div className={clsx(
+              'flex items-center',
+              'pt-1 pb-2',
+              photo
+                ? 'justify-between pl-1.5 pr-3'
+                : 'justify-center',
+            )}>
               <SegmentMenu
-              className="pt-1 pb-2 px-1.5"
                 items={[{
                   value: 'all',
                 }, {
@@ -188,6 +194,24 @@ export default function FieldsetPhotoChooser({
                   }
                 }}
               />
+              {photo && <button
+                type="button"
+                className={clsx(
+                  'link',
+                  'font-sans',
+                  'text-xs text-medium font-medium uppercase tracking-wider',
+                  'py-1',
+                  'select-none',
+                )}
+                onClick={() => {
+                  setPhoto(undefined);
+                  props.onChange?.('');
+                  setIsOpen(false);
+                }}
+              >
+                Clear
+              </button>}
+            </div>
             <div
               ref={refContainer}
               className={clsx(
@@ -198,18 +222,15 @@ export default function FieldsetPhotoChooser({
               <div className={clsx(
                 'flex items-center transition-all overflow-hidden',
                 showQuery ? 'h-12 opacity-100' : 'h-0 opacity-0',
+                'border-t border-medium',
               )}>
-                <div className="w-full px-1.5">
+                <div className="w-full px-0.5">
                   <input
                     id="query"
                     ref={refInput}
                     type="text"
                     placeholder="Search for a photo"
-                    className={clsx(
+                    className="block w-full m-0 outline-none border-none"
-                      'block w-full m-0 outline-none',
-                      'rounded-full border border-dim',
-                      'mb-2',
-                    )}
                     value={query}
                     onChange={e => setQuery(e.target.value)}
                   />