From 05e58e9e147ec4a084116ac75c77f411329ea12e Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Tue, 4 Nov 2025 21:58:25 +0800
Subject: [PATCH] feat(usage): add selected state styling to template buttons

- Add visual feedback for currently selected template
- Use blue background and white text for selected button
- Apply gray styling with hover effect for unselected buttons
- Support dark mode with appropriate color variants
- Match the same styling pattern used in provider preset selector
---
 src/components/UsageScriptModal.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/UsageScriptModal.tsx b/src/components/UsageScriptModal.tsx
index 451ad14..5df0342 100644
--- a/src/components/UsageScriptModal.tsx
+++ b/src/components/UsageScriptModal.tsx
@@ -253,15 +253,22 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                   {t("usageScript.presetTemplate")}
                 </label>
                 <div className="flex gap-2">
-                  {Object.keys(PRESET_TEMPLATES).map((name) => (
-                    <button
-                      key={name}
-                      onClick={() => handleUsePreset(name)}
-                      className="px-3 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors"
-                    >
-                      {name}
-                    </button>
-                  ))}
+                  {Object.keys(PRESET_TEMPLATES).map((name) => {
+                    const isSelected = selectedTemplate === name;
+                    return (
+                      <button
+                        key={name}
+                        onClick={() => handleUsePreset(name)}
+                        className={`px-3 py-1.5 text-xs rounded transition-colors ${
+                          isSelected
+                            ? "bg-blue-500 text-white dark:bg-blue-600"
+                            : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                        }`}
+                      >
+                        {name}
+                      </button>
+                    );
+                  })}
                 </div>
               </div>