From 54d011897dc5c7069095baf7f28792cf222bcfa6 Mon Sep 17 00:00:00 2001
From: Andrew Davis <1709934+Savid@users.noreply.github.com>
Date: Thu, 3 Apr 2025 18:18:21 +1000
Subject: [PATCH] cleanup macrobar

---
 ui/src/components/MacroBar.tsx                |  4 ++-
 ui/src/components/MacroForm.tsx               | 12 ++++-----
 ui/src/components/WebRTCVideo.tsx             | 22 ++++++++-------
 ui/src/routes/devices.$id.settings.macros.tsx | 27 ++++++++++---------
 4 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/ui/src/components/MacroBar.tsx b/ui/src/components/MacroBar.tsx
index 107d8de..066c21f 100644
--- a/ui/src/components/MacroBar.tsx
+++ b/ui/src/components/MacroBar.tsx
@@ -27,7 +27,9 @@ export default function MacroBar() {
   return (
     <Container className="bg-white dark:bg-slate-900 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
       <div className="flex items-center gap-x-2 py-1.5">
-        <LuCommand className="h-4 w-4 text-slate-500 mr-1" />
+        <div className="absolute -ml-5">
+          <LuCommand className="h-4 w-4 text-slate-500" />
+        </div>
         <div className="flex flex-wrap gap-2">
           {macros.map(macro => (
             <Button
diff --git a/ui/src/components/MacroForm.tsx b/ui/src/components/MacroForm.tsx
index c482f7b..b7768a0 100644
--- a/ui/src/components/MacroForm.tsx
+++ b/ui/src/components/MacroForm.tsx
@@ -336,6 +336,12 @@ export function MacroForm({
               </div>
 
               <div className="flex justify-end gap-x-2">
+                <Button
+                  size="SM"
+                  theme="blank"
+                  text="Cancel"
+                  onClick={() => setShowDeleteConfirm(false)}
+                />
                 <Button
                   size="SM"
                   theme="danger"
@@ -346,12 +352,6 @@ export function MacroForm({
                   }}
                   disabled={isDeleting}
                 />
-                <Button
-                  size="SM"
-                  theme="light"
-                  text="Cancel"
-                  onClick={() => setShowDeleteConfirm(false)}
-                />
               </div>
             </div>
           </div>
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index f169553..8e46a5e 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -528,16 +528,18 @@ export default function WebRTCVideo() {
   return (
     <div className="grid h-full w-full grid-rows-layout">
       <div className="min-h-[39.5px] flex flex-col">
-        <fieldset disabled={peerConnectionState !== "connected"}>
-          <Actionbar
-            requestFullscreen={async () =>
-              videoElm.current?.requestFullscreen({
-                navigationUI: "show",
-              })
-            }
-          />
-          <MacroBar />
-        </fieldset>
+        <div className="flex flex-col">
+          <fieldset disabled={peerConnectionState !== "connected"} className="contents">
+            <Actionbar
+              requestFullscreen={async () =>
+                videoElm.current?.requestFullscreen({
+                  navigationUI: "show",
+                })
+              }
+            />
+            <MacroBar />
+          </fieldset>
+        </div>
       </div>
 
       <div
diff --git a/ui/src/routes/devices.$id.settings.macros.tsx b/ui/src/routes/devices.$id.settings.macros.tsx
index 7ba7f20..6986dab 100644
--- a/ui/src/routes/devices.$id.settings.macros.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.tsx
@@ -126,7 +126,7 @@ export default function SettingsMacrosRoute() {
               <h3 className="truncate text-sm font-semibold text-black dark:text-white">
                 {macro.name}
               </h3>
-              <p className="mt-1 ml-2 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
+              <p className="mt-1 ml-4 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
                 <span className="flex flex-col items-start gap-1">
                   {macro.steps.map((step, stepIndex) => {
                     const StepIcon = stepIndex === 0 ? LuMoveRight : LuCornerDownRight;
@@ -154,7 +154,7 @@ export default function SettingsMacrosRoute() {
 
                               {Array.isArray(step.keys) && step.keys.map((key, idx) => (
                                 <Fragment key={`key-${idx}`}>
-                                  <span className="font-medium text-blue-600 dark:text-blue-200">
+                                  <span className="font-medium text-blue-600 dark:text-blue-400">
                                     {keyDisplayMap[key] || key}
                                   </span>
                                   {idx < step.keys.length - 1 && (
@@ -210,16 +210,18 @@ export default function SettingsMacrosRoute() {
           title="Macros"
           description={`${loading ? '?' : macros.length}/${MAX_TOTAL_MACROS}`}
         >
-          <div className="flex items-center gap-2">
-            <Button
-              size="SM"
-              theme="primary"
-              text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
-              onClick={() => navigate("add")}
-              disabled={isMaxMacrosReached}
-              aria-label="Add new macro"
-            />
-          </div>
+          { macros.length > 0 && (
+            <div className="flex items-center gap-2">
+              <Button
+                size="SM"
+                theme="primary"
+                text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
+                onClick={() => navigate("add")}
+                disabled={isMaxMacrosReached}
+                aria-label="Add new macro"
+              />
+            </div>
+          )}
         </SettingsItem>
       </div>
 
@@ -235,7 +237,6 @@ export default function SettingsMacrosRoute() {
         ) : macros.length === 0 ? (
           <EmptyCard
             headline="No macros created yet"
-            description="Create keyboard macros to automate repetitive tasks"
             BtnElm={
               <Button
                 size="SM"