wip

src/components/TopBar.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { useState } from 'react';
 import { $appSettings, updateAppSettings } from '../stores/appSettings';
-import { VALUE_MODES, ValueMode } from '../utils/constants';
+import { VALUE_MODES, ValueMode, RENDER_MODES } from '../utils/constants';
 import {
   uiState,
   toggleMobileMenu,
@@ -16,29 +16,13 @@ import { useAudio } from '../hooks/useAudio';
 import { LucideIcon } from '../hooks/useLucideIcon';
 
 function getValueModeLabel(mode: string): string {
-  const labels: Record<string, string> = {
-    integer: 'Integer (0-255)',
-    float: 'Float (0.0-1.0)',
-    polar: 'Polar (angle-based)',
-    distance: 'Distance (radial)',
-    wave: 'Wave (ripple)',
-    fractal: 'Fractal (recursive)',
-    cellular: 'Cellular (automata)',
-    noise: 'Noise (perlin-like)',
-    warp: 'Warp (space deformation)',
-    flow: 'Flow (fluid dynamics)',
-    spiral: 'Spiral (logarithmic)',
-    turbulence: 'Turbulence (chaos)',
-    crystal: 'Crystal (lattice)',
-    marble: 'Marble (veining)',
-    quantum: 'Quantum (uncertainty)',
-    logarithmic: 'Logarithmic (scaling)',
-    mirror: 'Mirror (symmetrical)',
-    rings: 'Rings (interference)',
-    mesh: 'Mesh (grid rotation)',
-    glitch: 'Glitch (corruption)',
-  };
-  return labels[mode] || mode;
+  // Automatically generate human-readable labels from mode names
+  return mode.charAt(0).toUpperCase() + mode.slice(1).replace(/_/g, ' ');
+}
+
+function getRenderModeLabel(mode: string): string {
+  // Automatically generate human-readable labels from render mode names
+  return mode.charAt(0).toUpperCase() + mode.slice(1).replace(/_/g, ' ');
 }
 
 export function TopBar() {
@@ -198,27 +182,11 @@ export function TopBar() {
               marginRight: '10px',
             }}
           >
-            <option value="classic">Classic</option>
-            <option value="grayscale">Grayscale</option>
-            <option value="red">Red Channel</option>
-            <option value="green">Green Channel</option>
-            <option value="blue">Blue Channel</option>
-            <option value="rainbow">Rainbow</option>
-            <option value="thermal">Thermal</option>
-            <option value="neon">Neon</option>
-            <option value="sunset">Sunset</option>
-            <option value="ocean">Ocean</option>
-            <option value="forest">Forest</option>
-            <option value="copper">Copper</option>
-            <option value="dithered">Dithered</option>
-            <option value="palette">Palette</option>
-            <option value="vintage">Vintage</option>
-            <option value="infrared">Infrared</option>
-            <option value="fire">Fire</option>
-            <option value="ice">Ice</option>
-            <option value="plasma">Plasma</option>
-            <option value="xray">X-Ray</option>
-            <option value="spectrum">Spectrum</option>
+            {RENDER_MODES.map((mode) => (
+              <option key={mode} value={mode}>
+                {getRenderModeLabel(mode)}
+              </option>
+            ))}
           </select>
 
           <input