Refactor AI dom editor

Author: MrBlankCoding

src/ai_dom_editor/editor/ai_dom_editor.html

@@ -13,34 +13,21 @@
       <h2 class="header-title">AI DOM Editor</h2>
       <div class="header-actions">
         <button class="tool-btn" id="clearChatBtn" title="Clear conversation">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="3 6 5 6 21 6"></polyline>
-            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-          </svg>
+          <i data-feather="trash-2" width="18" height="18"></i>
         </button>
         <button class="tool-btn" id="headerSettingsBtn" title="Settings">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="3"></circle>
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 5 15.4a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09A1.65 1.65 0 0 0 16 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.22.36.34.78.34 1.21s-.12.85-.34 1.21z"></path>
-          </svg>
+          <i data-feather="settings" width="18" height="18"></i>
         </button>
         <button class="close-btn" id="closeBtn" title="Close AI Editor">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
+          <i data-feather="x" width="18" height="18"></i>
         </button>
       </div>
     </div>
 
     <!-- Configuration Banner (shown if API not configured) -->
     <div class="config-banner" id="configBanner" style="display: none;">
       <div class="banner-content">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="10"></circle>
-          <line x1="12" y1="8" x2="12" y2="12"></line>
-          <line x1="12" y1="16" x2="12.01" y2="16"></line>
-        </svg>
+        <i data-feather="alert-circle" width="20" height="20"></i>
         <span>API not configured. Please configure your AI provider in settings.</span>
       </div>
       <button class="btn-primary" id="openSettingsBtn">Configure</button>
@@ -50,10 +37,7 @@ <h2 class="header-title">AI DOM Editor</h2>
     <div class="chat-container" id="chatContainer">
       <div class="welcome-message" id="welcomeMessage">
         <div class="welcome-icon">
-          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
-            <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
-          </svg>
+          <i data-feather="layers" width="48" height="48"></i>
         </div>
         <h2>Ai Editor</h2>
         <p>Whats your idea?</p>
@@ -68,9 +52,7 @@ <h2>Ai Editor</h2>
 
     <!-- Element Selector Indicator -->
     <div class="selector-active" id="selectorActive" style="display: none;">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-      </svg>
+      <i data-feather="target" width="16" height="16"></i>
       <span>Click an element on the page</span>
       <button class="btn-text" id="cancelSelector">Cancel</button>
     </div>
@@ -84,20 +66,15 @@ <h2>Ai Editor</h2>
       </div>
       <div class="input-wrapper">
         <button class="tool-btn" id="elementSelectorBtn" title="Select element on page">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-          </svg>
+          <i data-feather="target" width="18" height="18"></i>
         </button>
         <textarea 
           id="userInput" 
           placeholder="Describe what you want to change on this page..."
           rows="1"
         ></textarea>
         <button class="send-btn" id="sendBtn" disabled>
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="22" y1="2" x2="11" y2="13"></line>
-            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-          </svg>
+          <i data-feather="send" width="20" height="20"></i>
         </button>
       </div>
     </div>