set default label for delay

ui/src/components/MacroStepCard.tsx

@@ -5,7 +5,7 @@ import { Combobox } from "@/components/Combobox";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import Card from "@/components/Card";
 import { keys, modifiers, keyDisplayMap } from "@/keyboardMappings";
-import { MAX_KEYS_PER_STEP } from "@/constants/macros";
+import { MAX_KEYS_PER_STEP, DEFAULT_DELAY } from "@/constants/macros";
 import FieldLabel from "@/components/FieldLabel";
 
 // Filter out modifier keys since they're handled in the modifiers section
@@ -30,7 +30,7 @@ const groupedModifiers: Record<string, typeof modifierOptions> = {
   Meta: modifierOptions.filter(mod => mod.value.startsWith('Meta')),
 };
 
-const PRESET_DELAYS = [
+const basePresetDelays = [
   { value: "50", label: "50ms" },
   { value: "100", label: "100ms" },
   { value: "200", label: "200ms" },
@@ -42,6 +42,13 @@ const PRESET_DELAYS = [
   { value: "2000", label: "2000ms" },
 ];
 
+const PRESET_DELAYS = basePresetDelays.map(delay => {
+  if (parseInt(delay.value, 10) === DEFAULT_DELAY) {
+    return { ...delay, label: "Default" };
+  }
+  return delay;
+});
+
 interface MacroStep {
   keys: string[];
   modifiers: string[];

ui/src/routes/devices.$id.settings.macros.edit.tsx

@@ -100,8 +100,9 @@ export default function SettingsMacrosEditRoute() {
         />
         <Button
           size="SM"
-          theme="danger"
+          theme="light"
           text="Delete Macro"
+          className="text-red-500 dark:text-red-400"
           LeadingIcon={LuTrash2}
           onClick={() => setShowDeleteConfirm(true)}
           disabled={isDeleting}

ui/src/routes/devices.$id.settings.macros.tsx

@@ -7,7 +7,7 @@ import { SettingsPageHeader } from "@/components/SettingsPageheader";
 import { Button } from "@/components/Button";
 import EmptyCard from "@/components/EmptyCard";
 import Card from "@/components/Card";
-import { MAX_TOTAL_MACROS, COPY_SUFFIX } from "@/constants/macros";
+import { MAX_TOTAL_MACROS, COPY_SUFFIX, DEFAULT_DELAY } from "@/constants/macros";
 import { keyDisplayMap, modifierDisplayMap } from "@/keyboardMappings";
 import notifications from "@/notifications";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
@@ -190,7 +190,9 @@ export default function SettingsMacrosRoute() {
                           ) : (
                             <span className="font-medium text-slate-500 dark:text-slate-400">Delay only</span>
                           )}
-                          <span className="ml-1 text-slate-400 dark:text-slate-500">({step.delay}ms)</span>
+                          {step.delay !== DEFAULT_DELAY && (
+                             <span className="ml-1 text-slate-400 dark:text-slate-500">({step.delay}ms)</span>
+                          )}
                         </span>
                       </span>
                     );
@@ -252,26 +254,24 @@ export default function SettingsMacrosRoute() {
 
   return (
     <div className="space-y-4">
-      {macros.length > 0 && (
-        <div className="flex items-center justify-between">
-          <SettingsPageHeader
-            title="Keyboard Macros"
-            description={`Combine keystrokes into a single action for faster workflows.`}
-          />
-          { macros.length > 0 && (
-            <div className="flex items-center pl-2">
-              <Button
-                size="SM"
-                theme="primary"
-                text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
-                onClick={() => navigate("add")}
-                disabled={isMaxMacrosReached}
-                aria-label="Add new macro"
-              />
-            </div>
-          )}
-        </div>
-      )}
+      <div className="flex items-center justify-between">
+        <SettingsPageHeader
+          title="Keyboard Macros"
+          description={`Combine keystrokes into a single action for faster workflows.`}
+        />
+        { macros.length > 0 && (
+          <div className="flex items-center pl-2">
+            <Button
+              size="SM"
+              theme="primary"
+              text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
+              onClick={() => navigate("add")}
+              disabled={isMaxMacrosReached}
+              aria-label="Add new macro"
+            />
+          </div>
+        )}
+      </div>
 
       <div className="space-y-4">
         {loading && macros.length === 0 ? (
@@ -288,7 +288,6 @@ export default function SettingsMacrosRoute() {
           <EmptyCard
             IconElm={LuCommand}
             headline="Create Your First Macro"
-            description="Combine keystrokes into a single action for faster workflows."
             BtnElm={
               <Button
                 size="SM"