From 047964f7c665978ee736af5b58c8c9e5fe927ec7 Mon Sep 17 00:00:00 2001
From: Hariharan Mudaliar <hrhn.mudaliar251@gmail.com>
Date: Sun, 21 Dec 2025 11:11:31 +0530
Subject: [PATCH] Add ScrollHint

---
 DynamicIsland/Localizable.xcstrings           |  4 +++
 .../Settings/MusicSlotConfigurationView.swift | 25 ++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/DynamicIsland/Localizable.xcstrings b/DynamicIsland/Localizable.xcstrings
index 19e32d8..e8181da 100644
--- a/DynamicIsland/Localizable.xcstrings
+++ b/DynamicIsland/Localizable.xcstrings
@@ -16209,6 +16209,10 @@
         }
       }
     },
+    "Scroll" : {
+      "comment" : "A hint text that appears when scrolling horizontally in the control palette.",
+      "isCommentAutoGenerated" : true
+    },
     "Search clipboard..." : {
       "localizations" : {
         "fr" : {
diff --git a/DynamicIsland/components/Settings/MusicSlotConfigurationView.swift b/DynamicIsland/components/Settings/MusicSlotConfigurationView.swift
index 5cc98d4..66f0967 100644
--- a/DynamicIsland/components/Settings/MusicSlotConfigurationView.swift
+++ b/DynamicIsland/components/Settings/MusicSlotConfigurationView.swift
@@ -80,13 +80,17 @@ struct MusicSlotConfigurationView: View {
 
     private var palette: some View {
         VStack(alignment: .leading, spacing: 6) {
-            Text("Control Palette")
-                .font(.headline)
+            HStack(spacing: 8) {
+                Text("Control Palette")
+                    .font(.headline)
+                Spacer()
+                ScrollHintIndicator()
+            }
             Text("Drag a control onto a slot or tap to place it in the first empty slot.")
                 .font(.caption)
                 .foregroundStyle(.secondary)
 
-            ScrollView(.horizontal, showsIndicators: true) {
+            ScrollView(.horizontal, showsIndicators: false) {
                 HStack(spacing: 12) {
                     ForEach(pickerOptions, id: \.self) { control in
                         paletteItem(for: control)
@@ -97,6 +101,21 @@ struct MusicSlotConfigurationView: View {
         }
     }
 
+private struct ScrollHintIndicator: View {
+    var body: some View {
+        HStack(spacing: 2) {
+            Image(systemName: "chevron.left")
+            Text("Scroll")
+            Image(systemName: "chevron.right")
+        }
+        .font(.caption2.weight(.medium))
+        .foregroundStyle(.secondary)
+        .padding(.horizontal, 8)
+        .padding(.vertical, 4)
+        .background(Color.primary.opacity(0.08), in: Capsule())
+    }
+}
+
     private var resetButton: some View {
         HStack {
             Spacer()