From 0206d798a38229040a26f3b3ea50a9e93c34cdeb Mon Sep 17 00:00:00 2001
From: Andrew Davis <1709934+Savid@users.noreply.github.com>
Date: Thu, 3 Apr 2025 01:54:16 +1000
Subject: [PATCH] cleanup styles and macro list

---
 ui/src/index.css                              | 96 +------------------
 ui/src/routes/devices.$id.settings.macros.tsx | 70 +++++++++-----
 2 files changed, 49 insertions(+), 117 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index c41f5d3..c7865e0 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -202,35 +202,21 @@ video::-webkit-media-controls {
   display: none;
 }
 
-/* Macro Component Styles */
-@keyframes macroFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes macroScaleIn {
-  from { transform: scale(0.95); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
-}
-
-.macro-animate-fadeIn { animation: macroFadeIn 0.2s ease-out; }
-.macro-animate-scaleIn { animation: macroScaleIn 0.2s ease-out; }
-
-/* Base Macro Element Styles */
-.macro-sortable, .macro-step, [data-macro-item] {
+/* Macro list sortable */
+.macro-sortable, [data-macro-item] {
   transition: box-shadow 0.15s ease-out, background-color 0.2s ease-out, transform 0.1s, border-color 0.2s;
   position: relative;
   touch-action: none;
 }
 
-.macro-sortable.dragging, .macro-step.dragging, [data-macro-item].dragging {
+.macro-sortable.dragging, [data-macro-item].dragging {
   z-index: 10;
   opacity: 0.8;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   @apply bg-blue-500/10;
 }
 
-.macro-sortable.drop-target, .macro-step.drop-target, [data-macro-item].drop-target {
+.macro-sortable.drop-target, [data-macro-item].drop-target {
   @apply border-2 border-dashed border-blue-500 bg-blue-500/5;
 }
 
@@ -243,7 +229,6 @@ video::-webkit-media-controls {
   transform: none;
 }
 
-/* Drag Handle Styles */
 .drag-handle, .macro-sortable-handle {
   cursor: grab;
   touch-action: none;
@@ -255,78 +240,7 @@ video::-webkit-media-controls {
 }
 
 @media (hover: none) {
-  .macro-sortable, .macro-step, [data-macro-item] {
+  .macro-sortable, [data-macro-item] {
     user-select: none;
   }
 }
-
-/* Macro Form Elements */
-.macro-input {
-  @apply w-full rounded-md border border-slate-300 bg-white p-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white;
-}
-
-.macro-input-error {
-  @apply border-red-500 dark:border-red-500;
-}
-
-.macro-select, .macro-delay-select {
-  @apply w-full rounded-md border border-slate-300 bg-slate-50 p-2 text-sm shadow-sm 
-         focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 
-         dark:border-slate-600 dark:bg-slate-800 dark:text-white;
-}
-
-/* Macro Card Elements */
-.macro-card, .macro-step-card {
-  @apply rounded-md border border-slate-300 bg-white p-4 shadow-sm 
-         dark:border-slate-600 dark:bg-slate-800
-         transition-colors duration-200;
-}
-
-.macro-step-card:hover {
-  @apply border-blue-300 dark:border-blue-700;
-}
-
-/* Badge & Step Number Styles */
-.macro-key-badge, .macro-step-number {
-  @apply inline-flex items-center rounded-md bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200;
-}
-
-/* Section Styling Utilities */
-.macro-section {
-  @apply space-y-4 mt-2;
-}
-
-.macro-section-header {
-  @apply flex items-center justify-between;
-}
-
-.macro-section-title {
-  @apply text-sm font-medium text-slate-700 dark:text-slate-300;
-}
-
-.macro-section-subtitle {
-  @apply text-xs text-slate-500 dark:text-slate-400;
-}
-
-/* Error Styles */
-.macro-error {
-  @apply mb-4 rounded-md bg-red-50 p-3 dark:bg-red-900/30;
-}
-
-.macro-error-icon {
-  @apply h-5 w-5 text-red-400 dark:text-red-300;
-}
-
-.macro-error-text {
-  @apply text-sm font-medium text-red-800 dark:text-red-200;
-}
-
-/* Container Styles */
-.macro-modifiers-container {
-  @apply flex flex-wrap gap-2;
-}
-
-.macro-modifier-group {
-  @apply inline-flex flex-col rounded-md border border-slate-200 p-2 dark:border-slate-700;
-  min-width: fit-content;
-}
diff --git a/ui/src/routes/devices.$id.settings.macros.tsx b/ui/src/routes/devices.$id.settings.macros.tsx
index d876d60..583fa00 100644
--- a/ui/src/routes/devices.$id.settings.macros.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-import { LuPlus, LuTrash, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo, LuCopy, LuArrowUp, LuArrowDown } from "react-icons/lu";
+import { useState, useEffect, useRef, useCallback, Fragment } from "react";
+import { LuPlus, LuTrash, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo, LuCopy, LuArrowUp, LuArrowDown, LuMoveRight, LuCornerDownRight } from "react-icons/lu";
 
 import { KeySequence, useMacrosStore } from "@/hooks/stores";
 import { SettingsPageHeader } from "@/components/SettingsPageheader";
@@ -1239,37 +1239,55 @@ export default function SettingsMacrosRoute() {
                     <LuGripVertical className="h-4 w-4" />
                   </div>
                   
-                  <div className="flex-1 overflow-hidden">
-                    <h4 className="truncate text-sm font-medium text-black dark:text-white">
+                  <div className="pl-4 flex-1 overflow-hidden">
+                    <h3 className="truncate text-sm font-semibold text-black dark:text-white">
                       {macro.name}
-                    </h4>
-                    <p className="mt-1 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
-                      <span className="flex flex-wrap items-center">
-                        {macro.steps.slice(0, 3).map((step, stepIndex) => {
-                          const keysText = ensureArray(step.keys).length > 0 
-                            ? ensureArray(step.keys).map(key => keyDisplayMap[key] || key).join(' + ') 
-                            : '';
-                          const modifiersDisplayText = ensureArray(step.modifiers).length > 0
-                            ? ensureArray(step.modifiers).map(m => modifierDisplayMap[m] || m).join(' + ')
-                            : '';
-                          const combinedText = (modifiersDisplayText || keysText) 
-                            ? [modifiersDisplayText, keysText].filter(Boolean).join(' + ')
-                            : 'Delay only';
+                    </h3>
+                    <p className="mt-1 ml-2 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;
+
                           return (
-                            <span key={stepIndex} className="inline-flex items-center my-0.5">
-                              {stepIndex > 0 && <span className="mx-1 text-blue-400 dark:text-blue-500">→</span>}
-                              <span className="whitespace-nowrap">
-                                <span className="font-medium text-slate-600 dark:text-slate-300">{combinedText}</span>
+                            <span key={stepIndex} className="inline-flex items-center">
+                              <StepIcon className="mr-1 text-slate-400 dark:text-slate-500 h-3 w-3 flex-shrink-0" />
+                              <span className="bg-slate-50 dark:bg-slate-800 px-2 py-0.5 rounded-md border border-slate-200/50 dark:border-slate-700/50">
+                                {(ensureArray(step.modifiers).length > 0 || ensureArray(step.keys).length > 0) ? (
+                                  <>
+                                    {ensureArray(step.modifiers).map((modifier, idx) => (
+                                      <Fragment key={`mod-${idx}`}>
+                                        <span className="font-medium text-slate-600 dark:text-slate-200">
+                                          {modifierDisplayMap[modifier] || modifier}
+                                        </span>
+                                        {idx < ensureArray(step.modifiers).length - 1 && (
+                                          <span className="text-slate-400 dark:text-slate-600"> + </span>
+                                        )}
+                                      </Fragment>
+                                    ))}
+                                    
+                                    {ensureArray(step.modifiers).length > 0 && ensureArray(step.keys).length > 0 && (
+                                      <span className="text-slate-400 dark:text-slate-600"> + </span>
+                                    )}
+                                    
+                                    {ensureArray(step.keys).map((key, idx) => (
+                                      <Fragment key={`key-${idx}`}>
+                                        <span className="font-medium text-blue-600 dark:text-blue-200">
+                                          {keyDisplayMap[key] || key}
+                                        </span>
+                                        {idx < ensureArray(step.keys).length - 1 && (
+                                          <span className="text-slate-400 dark:text-slate-600"> + </span>
+                                        )}
+                                      </Fragment>
+                                    ))}
+                                  </>
+                                ) : (
+                                  <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>
                               </span>
                             </span>
                           );
                         })}
-                        {macro.steps.length > 3 && (
-                          <span className="ml-1 text-slate-400 dark:text-slate-500">
-                            + {macro.steps.length - 3} more steps
-                          </span>
-                        )}
                       </span>
                     </p>
                   </div>