Reorder config sections

src/admin/AdminAppConfigurationClient.tsx

@@ -79,13 +79,6 @@ export default function AdminAppConfigurationClient({
   hasImageQuality,
   imageQuality,
   isBlurEnabled,
-  // Visual
-  hasDefaultTheme,
-  defaultTheme,
-  arePhotosMatted,
-  arePhotoMatteColorsConfigured,
-  matteColor,
-  matteColorDark,
   // Display
   categoryVisibility,
   hasCategoryVisibility,
@@ -103,6 +96,13 @@ export default function AdminAppConfigurationClient({
   hasGridAspectRatio,
   hasHighGridDensity,
   hasGridDensityPreference,
+  // Design
+  hasDefaultTheme,
+  defaultTheme,
+  arePhotosMatted,
+  arePhotoMatteColorsConfigured,
+  matteColor,
+  matteColorDark,
   // Settings
   isGeoPrivacyEnabled,
   arePublicDownloadsEnabled,
@@ -528,60 +528,6 @@ export default function AdminAppConfigurationClient({
             {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
           </ChecklistRow>
         </ChecklistGroup>
-        <ChecklistGroup
-          title="Visual"
-          icon={<PiPaintBrushHousehold size={19} />}
-          optional
-        >
-          <ChecklistRow
-            title={`Default theme: ${defaultTheme}`}
-            status={hasDefaultTheme}
-            optional
-          >
-            {'Set environment variable to \'light\' or \'dark\''}
-            {' '}
-            to configure initial theme
-            {' '}
-            (defaults to {'\'system\''}):
-            {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
-          </ChecklistRow>
-          <ChecklistRow
-            title="Photo matting"
-            status={arePhotosMatted}
-            optional
-          >
-            Set environment variable to {'"1"'} to constrain the size
-            {' '}
-            of each photo, and display a surrounding border:
-            <div className="pt-1 flex flex-col gap-1">
-              <EnvVar variable="NEXT_PUBLIC_MATTE_PHOTOS" />
-            </div>
-          </ChecklistRow>
-          <ChecklistRow
-            title="Custom photo matting colors"
-            status={arePhotoMatteColorsConfigured}
-            optional
-          >
-            Set environment variable hex values (e.g., #cccccc)
-            to override matte colors:
-            <div className="pt-1 flex flex-col gap-1">
-              <EnvVar
-                variable="NEXT_PUBLIC_MATTE_COLOR"
-                accessory={matteColor && <span
-                  className="size-[15px] border-medium rounded-sm ml-1"
-                  style={{ backgroundColor: matteColor }}
-                />}
-              />
-              <EnvVar
-                variable="NEXT_PUBLIC_MATTE_COLOR_DARK"
-                accessory={matteColorDark && <span
-                  className="size-[15px] border-medium rounded-sm ml-1"
-                  style={{ backgroundColor: matteColorDark }}
-                />}
-              />
-            </div>
-          </ChecklistRow>
-        </ChecklistGroup>
         <ChecklistGroup
           title="Display"
           icon={<BiHide size={18} />}
@@ -739,6 +685,60 @@ export default function AdminAppConfigurationClient({
             {renderEnvVars(['NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS'])}
           </ChecklistRow>
         </ChecklistGroup>
+        <ChecklistGroup
+          title="Design"
+          icon={<PiPaintBrushHousehold size={19} />}
+          optional
+        >
+          <ChecklistRow
+            title={`Default theme: ${defaultTheme}`}
+            status={hasDefaultTheme}
+            optional
+          >
+            {'Set environment variable to \'light\' or \'dark\''}
+            {' '}
+            to configure initial theme
+            {' '}
+            (defaults to {'\'system\''}):
+            {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Photo matting"
+            status={arePhotosMatted}
+            optional
+          >
+            Set environment variable to {'"1"'} to constrain the size
+            {' '}
+            of each photo, and display a surrounding border:
+            <div className="pt-1 flex flex-col gap-1">
+              <EnvVar variable="NEXT_PUBLIC_MATTE_PHOTOS" />
+            </div>
+          </ChecklistRow>
+          <ChecklistRow
+            title="Custom photo matting colors"
+            status={arePhotoMatteColorsConfigured}
+            optional
+          >
+            Set environment variable hex values (e.g., #cccccc)
+            to override matte colors:
+            <div className="pt-1 flex flex-col gap-1">
+              <EnvVar
+                variable="NEXT_PUBLIC_MATTE_COLOR"
+                accessory={matteColor && <span
+                  className="size-[15px] border-medium rounded-sm ml-1"
+                  style={{ backgroundColor: matteColor }}
+                />}
+              />
+              <EnvVar
+                variable="NEXT_PUBLIC_MATTE_COLOR_DARK"
+                accessory={matteColorDark && <span
+                  className="size-[15px] border-medium rounded-sm ml-1"
+                  style={{ backgroundColor: matteColorDark }}
+                />}
+              />
+            </div>
+          </ChecklistRow>
+        </ChecklistGroup>
         <ChecklistGroup
           title="Settings"
           icon={<HiOutlineCog size={17} className="translate-y-[0.5px]" />}

src/app/config.ts

@@ -240,21 +240,6 @@ export const IMAGE_QUALITY =
 export const BLUR_ENABLED =
   process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 
-// VISUAL
-
-export const DEFAULT_THEME =
-  process.env.NEXT_PUBLIC_DEFAULT_THEME === 'dark'
-    ? 'dark'
-    : process.env.NEXT_PUBLIC_DEFAULT_THEME === 'light'
-      ? 'light'
-      : 'system';
-export const MATTE_PHOTOS =
-  process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
-export const MATTE_COLOR =
-  process.env.NEXT_PUBLIC_MATTE_COLOR;
-export const MATTE_COLOR_DARK =
-  process.env.NEXT_PUBLIC_MATTE_COLOR_DARK;
-
 // DISPLAY
 
 export const CATEGORY_VISIBILITY = getOrderedCategoriesFromString(
@@ -302,6 +287,21 @@ export const HIGH_DENSITY_GRID =
   GRID_ASPECT_RATIO <= 1 &&
   !PREFERS_LOW_DENSITY_GRID;
 
+// DESIGN
+
+export const DEFAULT_THEME =
+process.env.NEXT_PUBLIC_DEFAULT_THEME === 'dark'
+  ? 'dark'
+  : process.env.NEXT_PUBLIC_DEFAULT_THEME === 'light'
+    ? 'light'
+    : 'system';
+export const MATTE_PHOTOS =
+process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
+export const MATTE_COLOR =
+process.env.NEXT_PUBLIC_MATTE_COLOR;
+export const MATTE_COLOR_DARK =
+process.env.NEXT_PUBLIC_MATTE_COLOR_DARK;
+
 // SETTINGS
 
 export const GEO_PRIVACY_ENABLED =
@@ -388,15 +388,6 @@ export const APP_CONFIGURATION = {
   hasImageQuality: Boolean(process.env.NEXT_PUBLIC_IMAGE_QUALITY),
   imageQuality: IMAGE_QUALITY,
   isBlurEnabled: BLUR_ENABLED,
-  // Visual
-  hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
-  defaultTheme: DEFAULT_THEME,
-  arePhotosMatted: MATTE_PHOTOS,
-  arePhotoMatteColorsConfigured:
-    Boolean(MATTE_COLOR) ||
-    Boolean(MATTE_COLOR_DARK),
-  matteColor: MATTE_COLOR,
-  matteColorDark: MATTE_COLOR_DARK,
   // Display
   hasCategoryVisibility:
     Boolean(process.env.NEXT_PUBLIC_CATEGORY_VISIBILITY),
@@ -416,6 +407,15 @@ export const APP_CONFIGURATION = {
   hasHighGridDensity: HIGH_DENSITY_GRID,
   hasGridDensityPreference:
     Boolean(process.env.NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS),
+  // Design
+  hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
+  defaultTheme: DEFAULT_THEME,
+  arePhotosMatted: MATTE_PHOTOS,
+  arePhotoMatteColorsConfigured:
+    Boolean(MATTE_COLOR) ||
+    Boolean(MATTE_COLOR_DARK),
+  matteColor: MATTE_COLOR,
+  matteColorDark: MATTE_COLOR_DARK,
   // Settings
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   arePublicDownloadsEnabled: ALLOW_PUBLIC_DOWNLOADS,