From 45a19cf511ab3b026060cc87cdd498509f39c1b9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 4 Apr 2026 23:57:46 +0000
Subject: [PATCH 1/2] Fix segmented control text color not matching pill on
 initial render

When uploadType is INDIVIDUAL_TRACK (0), the selected value doesn't match
any option key in TracksPreview's SegmentedControl (which only has
INDIVIDUAL_TRACKS=1, ALBUM=3, PLAYLIST=2). The pill falls back to index 0
visually, but isSelected stays false for all options, making all text subdued.

Fix by mapping INDIVIDUAL_TRACK to INDIVIDUAL_TRACKS in TracksPreview, and
adding a fallback in SegmentedControl to select the first option when the
selected value doesn't match any option key.

https://claude.ai/code/session_01S8Yn3jaHMpAZ2LRKDoDPfA
---
 .../src/components/segmented-control/SegmentedControl.tsx  | 7 ++++++-
 .../web/src/pages/upload-page/components/TracksPreview.tsx | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/harmony/src/components/segmented-control/SegmentedControl.tsx b/packages/harmony/src/components/segmented-control/SegmentedControl.tsx
index 516aa3e0bcb..e0e0bf75fc3 100644
--- a/packages/harmony/src/components/segmented-control/SegmentedControl.tsx
+++ b/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
diff --git a/packages/web/src/pages/upload-page/components/TracksPreview.tsx b/packages/web/src/pages/upload-page/components/TracksPreview.tsx
index 2419a2190f0..92fcc78d89d 100644
--- a/packages/web/src/pages/upload-page/components/TracksPreview.tsx
+++ b/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' },

From cb3aa3a14325044f30ede71237af15535afab00c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 5 Apr 2026 00:01:47 +0000
Subject: [PATCH 2/2] Add changeset for segmented control text color fix

https://claude.ai/code/session_01S8Yn3jaHMpAZ2LRKDoDPfA
---
 .changeset/fix-segmented-control-text.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/fix-segmented-control-text.md

diff --git a/.changeset/fix-segmented-control-text.md b/.changeset/fix-segmented-control-text.md
new file mode 100644
index 00000000000..71f274e6541
--- /dev/null
+++ b/.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