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

@@ -253,15 +253,22 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                   {t("usageScript.presetTemplate")}
                 </label>
                 <div className="flex gap-2">
-                  {Object.keys(PRESET_TEMPLATES).map((name) => (
+                  {Object.keys(PRESET_TEMPLATES).map((name) => {
-                    <button
+                    const isSelected = selectedTemplate === name;
-                      key={name}
+                    return (
-                      onClick={() => handleUsePreset(name)}
+                      <button
-                      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"
+                        key={name}
-                    >
+                        onClick={() => handleUsePreset(name)}
-                      {name}
+                        className={`px-3 py-1.5 text-xs rounded transition-colors ${
-                    </button>
+                          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>