cleanup settings menu

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from "react";
-import { LuPlus, LuTrash, LuSave, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo } from "react-icons/lu";
+import { LuPlus, LuTrash, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo } from "react-icons/lu";
 import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
 
 import { KeySequence, useMacrosStore } from "../hooks/stores";
@@ -8,6 +8,7 @@ import { Button } from "../components/Button";
 import { keys, modifiers } from "../keyboardMappings";
 import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
+import { SettingsItem } from "../routes/devices.$id.settings";
 
 const DEFAULT_DELAY = 50;
 
@@ -956,26 +957,22 @@ export default function SettingsMacrosRoute() {
       )}
 
       <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-4">
+        <SettingsItem 
-          <div className="text-sm text-slate-600 dark:text-slate-400">
+          title="Macros"
-            <span className={macros.length >= MAX_TOTAL_MACROS ? "font-semibold text-amber-600 dark:text-amber-400" : ""}>
+          description={`${macros.length}/${MAX_TOTAL_MACROS}`}
-              Macros: {macros.length}/{MAX_TOTAL_MACROS}
+        >
-            </span>
+          <div className="flex items-center gap-2">
-            {macros.length >= MAX_TOTAL_MACROS && (
-              <span className="ml-2 text-xs text-amber-600 dark:text-amber-400">(maximum reached)</span>
-            )}
-          </div>
             {!showAddMacro && (
               <Button
-              size="XS"
+                size="SM"
                 theme="primary"
-              text={isMaxMacrosReached ? `Max (${MAX_TOTAL_MACROS})` : "Add New"}
+                text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
-              LeadingIcon={LuPlus}
                 onClick={() => setShowAddMacro(true)}
                 disabled={isMaxMacrosReached}
               />
             )}
           </div>
+        </SettingsItem>
       </div>
 
       {loading && (
@@ -1127,6 +1124,14 @@ export default function SettingsMacrosRoute() {
                       />
                     </div>
                   ) : (
+                    <div className="flex gap-x-2">
+                      <Button
+                        size="SM"
+                        theme="primary"
+                        text={isSaving ? "Saving..." : "Save Macro"}
+                        onClick={handleAddMacro}
+                        disabled={isSaving}
+                      />
                       <Button
                         size="SM"
                         theme="light"
@@ -1141,15 +1146,8 @@ export default function SettingsMacrosRoute() {
                           }
                         }}
                       />
+                    </div>
                   )}
-                  <Button
-                    size="SM"
-                    theme="primary"
-                    text={isSaving ? "Saving..." : "Save Macro"}
-                    LeadingIcon={isSaving ? LuLoader : LuSave}
-                    onClick={handleAddMacro}
-                    disabled={isSaving}
-                  />
                 </div>
               </div>
             </div>
@@ -1157,7 +1155,6 @@ export default function SettingsMacrosRoute() {
         )}
         {macros.length > 0 && (
           <div className="space-y-2">
-            <h3 className="text-sm font-medium text-slate-900 dark:text-white">Saved Macros</h3>
             
             {macros.length === 0 ? (
               <p className="text-center text-sm text-slate-500 dark:text-slate-400 py-4">
@@ -1284,6 +1281,14 @@ export default function SettingsMacrosRoute() {
                         </div>
                         
                         <div className="mt-4 flex items-center justify-between border-t border-slate-200 pt-4 dark:border-slate-700">
+                          <div className="flex gap-x-2">
+                            <Button
+                              size="SM"
+                              theme="primary"
+                              text={isUpdating ? "Saving..." : "Save Changes"}
+                              onClick={handleUpdateMacro}
+                              disabled={isUpdating}
+                            />
                             <Button
                               size="SM"
                               theme="light"
@@ -1294,14 +1299,7 @@ export default function SettingsMacrosRoute() {
                                 setErrors({});
                               }}
                             />
-                          <Button
+                          </div>
-                            size="SM"
-                            theme="primary"
-                            text={isUpdating ? "Saving..." : "Save Changes"}
-                            LeadingIcon={isUpdating ? LuLoader : LuSave}
-                            onClick={handleUpdateMacro}
-                            disabled={isUpdating}
-                          />
                         </div>
                       </div>
                     </div>