Fix SegmentedControl to handle invalid selected values gracefully (#14059)

## Summary
This PR adds validation to the SegmentedControl component to gracefully
handle cases where the selected value doesn't match any available
option, and fixes a bug in TracksPreview where an invalid enum value was
being passed.

## Key Changes
- **SegmentedControl**: Added fallback logic to validate that the
selected value exists in the options list. If the selected value is
invalid, it falls back to the first available option instead of
rendering an unmatched state.
- **TracksPreview**: Fixed a bug where `UploadType.INDIVIDUAL_TRACK`
(singular) was being passed to SegmentedControl, but the available
options only included `UploadType.INDIVIDUAL_TRACKS` (plural). Added a
mapping to convert the singular enum value to the plural one that
matches the available options.

## Implementation Details
- The SegmentedControl now performs an `options.some()` check to verify
the selected value exists before using it
- If validation fails, it safely falls back to `options[0]?.key` or the
raw selected value as a last resort
- This prevents UI inconsistencies and ensures the component always
renders in a valid state

https://claude.ai/code/session_01S8Yn3jaHMpAZ2LRKDoDPfA

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: dylanjeffers

.changeset/fix-segmented-control-text.md

@@ -0,0 +1,6 @@
+---
+"@audius/harmony": patch
+"@audius/web": patch
+---
+
+Fix SegmentedControl text color being subdued on initial render when selected value doesn't match any option key

packages/harmony/src/components/segmented-control/SegmentedControl.tsx

@@ -42,7 +42,12 @@ export const SegmentedControl = <T extends string>(
   const [localSelected, setLocalSelected] = useState(options[0]?.key ?? '')
   const [maxOptionWidth, setMaxOptionWidth] = useState(0)
 
-  const selectedOption = selected ?? localSelected
+  const rawSelectedOption = selected ?? localSelected
+  // If the selected value doesn't match any option, fall back to the first option
+  const selectedOption =
+    options.some((option) => option.key === rawSelectedOption)
+      ? rawSelectedOption
+      : options[0]?.key ?? rawSelectedOption
 
   const onSetSelected = (option: T) => {
     // Call props function if controlled

packages/web/src/pages/upload-page/components/TracksPreview.tsx

@@ -59,7 +59,11 @@ export const TracksPreview = (props: TracksPreviewProps) => {
         <SegmentedControl
           label={messages.releaseType}
           onSelectOption={handleOptionSelect}
-          selected={String(uploadType)}
+          selected={String(
+            uploadType === UploadType.INDIVIDUAL_TRACK
+              ? UploadType.INDIVIDUAL_TRACKS
+              : uploadType
+          )}
           options={[
             { key: String(UploadType.INDIVIDUAL_TRACKS), text: 'Tracks' },
             { key: String(UploadType.ALBUM), text: 'Album' },