Move category visibility to top of display

README.md

@@ -125,12 +125,12 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and displays a surrounding border (potentially useful for photos with tall aspect ratios)
 
 #### Display
+- `NEXT_PUBLIC_CATEGORY_VISIBILITY` controls which photos sets appear in the grid sidebar and CMD-K menu, and in what order. Default value is `tags,cameras,recipes,films`. As an example, you could move cameras above tags, and hide film simulations, by updating this value to `cameras,tags,recipes`.
 - `NEXT_PUBLIC_HIDE_EXIF_DATA = 1` hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)
 - `NEXT_PUBLIC_HIDE_ZOOM_CONTROLS = 1` hides fullscreen photo zoom controls
 - `NEXT_PUBLIC_HIDE_TAKEN_AT_TIME = 1` hides taken at time from photo meta
 - `NEXT_PUBLIC_HIDE_SOCIAL = 1` removes X (formerly Twitter) button from share modal
 - `NEXT_PUBLIC_HIDE_REPO_LINK = 1` removes footer link to repo
-- `NEXT_PUBLIC_CATEGORY_VISIBILITY` controls which photos sets appear in the grid sidebar and CMD-K menu, and in what order. Default value is `tags,cameras,recipes,films`. As an example, you could move cameras above tags, and hide film simulations, by updating this value to `cameras,tags,recipes`.
 
 #### Grid
 - `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage

src/admin/AdminAppConfigurationClient.tsx

@@ -71,13 +71,13 @@ export default function AdminAppConfigurationClient({
   defaultTheme,
   arePhotosMatted,
   // Display
+  categoryVisibility,
+  hasCategoryVisibility,
   showExifInfo,
   showZoomControls,
   showTakenAtTimeHidden,
   showSocial,
   showRepoLink,
-  hasCategoryVisibility,
-  categoryVisibility,
   // Grid
   isGridHomepageEnabled,
   gridAspectRatio,
@@ -483,6 +483,44 @@ export default function AdminAppConfigurationClient({
           icon={<BiHide size={18} />}
           optional
         >
+          <ChecklistRow
+            title={hasCategoryVisibility
+              ? `Category visibility: ${categoryVisibility.join(',')}`
+              : 'Category visibility'}
+            status={hasCategoryVisibility}
+            optional
+          >
+            <div className="my-1">
+              {categoryVisibility.map((category, index) =>
+                <Fragment key={category}>
+                  {renderSubStatus(
+                    'checked',
+                    <>
+                      {index + 1}
+                      {'.'}
+                      {capitalize(category)}
+                    </>,
+                  )}
+                </Fragment>)}
+              {getHiddenDefaultCategories(categoryVisibility)
+                .map((category, index) =>
+                  <Fragment key={category}>
+                    {renderSubStatus(
+                      'optional',
+                      <span className="text-dim">
+                        {categoryVisibility.length + index + 1}
+                        {'.'}
+                        {capitalize(category)}
+                      </span>,
+                    )}
+                  </Fragment>)}
+            </div>
+            Configure order and visibility of categories
+            (seen in grid sidebar and CMD-K results)
+            by storing comma-separated values
+            (default: {`"${DEFAULT_CATEGORY_KEYS.join(',')}"`}):
+            {renderEnvVars(['NEXT_PUBLIC_CATEGORY_VISIBILITY'])}
+          </ChecklistRow>
           <ChecklistRow
             title="Show EXIF data"
             status={showExifInfo}
@@ -527,44 +565,6 @@ export default function AdminAppConfigurationClient({
             Set environment variable to {'"1"'} to hide footer link:
             {renderEnvVars(['NEXT_PUBLIC_HIDE_REPO_LINK'])}
           </ChecklistRow>
-          <ChecklistRow
-            title={hasCategoryVisibility
-              ? `Category visibility: ${categoryVisibility.join(',')}`
-              : 'Category visibility'}
-            status={hasCategoryVisibility}
-            optional
-          >
-            <div className="my-1">
-              {categoryVisibility.map((category, index) =>
-                <Fragment key={category}>
-                  {renderSubStatus(
-                    'checked',
-                    <>
-                      {index + 1}
-                      {'.'}
-                      {capitalize(category)}
-                    </>,
-                  )}
-                </Fragment>)}
-              {getHiddenDefaultCategories(categoryVisibility)
-                .map((category, index) =>
-                  <Fragment key={category}>
-                    {renderSubStatus(
-                      'optional',
-                      <span className="text-dim">
-                        {categoryVisibility.length + index + 1}
-                        {'.'}
-                        {capitalize(category)}
-                      </span>,
-                    )}
-                  </Fragment>)}
-            </div>
-            Configure order and visibility of categories
-            (seen in grid sidebar and CMD-K results)
-            by storing comma-separated values
-            (default: {`"${DEFAULT_CATEGORY_KEYS.join(',')}"`}):
-            {renderEnvVars(['NEXT_PUBLIC_CATEGORY_VISIBILITY'])}
-          </ChecklistRow>
         </ChecklistGroup>
         <ChecklistGroup
           title="Grid"