feat(ui): enhance project action buttons with SVG icons and improved styles

Added SVG icons to the project action buttons for better visual representation of actions such as "Open," "Stop," "Start," "Restart," and "Delete." Additionally, updated button styles, including hover effects and color adjustments for a more cohesive and modern appearance across different themes. These changes aim to improve user experience and clarity in button functionality.

Author: Frederik Wystup

frontend/app.js

@@ -961,21 +961,35 @@ class XaresAICoder {
         } else if (isRunning && project.workspaceUrl) {
             buttons += `
                 <button class="btn-open" onclick="app.openWorkspace('${project.projectId}', '${project.workspaceUrl}')">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+                        <path d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+                    </svg>
                     Open Workspace
                 </button>
                 <button class="btn-warning" onclick="app.stopProject('${project.projectId}')">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/>
+                    </svg>
                     Stop
                 </button>
             `;
         } else if (isStopped) {
             buttons += `
                 <button class="btn-success" onclick="app.startProject('${project.projectId}')">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
+                    </svg>
                     Start
                 </button>
             `;
         } else if (isError) {
             buttons += `
                 <button class="btn-success" onclick="app.startProject('${project.projectId}')">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
+                        <path d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
+                    </svg>
                     Restart
                 </button>
             `;
@@ -985,6 +999,10 @@ class XaresAICoder {
         if (!isCreating) {
             buttons += `
                 <button class="btn-danger" onclick="app.deleteProject('${project.projectId}', '${this.escapeHtml(project.projectName)}')">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                    </svg>
                     Delete
                 </button>
             `;

frontend/style.css

@@ -671,12 +671,12 @@ body {
     border-color: var(--vscode-text-accent);
 }
 
-/* Project Action Buttons */
+/* Project Action Buttons - Unified Professional Theme */
 .btn-open {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 6px;
     padding: 8px 16px;
     background: var(--vscode-button-bg);
     color: white;
@@ -698,11 +698,11 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 6px;
     padding: 8px 16px;
-    background: var(--vscode-success);
-    color: white;
-    border: none;
+    background: rgba(79, 195, 247, 0.15);
+    color: var(--vscode-text-accent);
+    border: 1px solid rgba(79, 195, 247, 0.3);
     border-radius: 6px;
     font-size: 13px;
     font-weight: 500;
@@ -711,28 +711,32 @@ body {
 }
 
 .btn-success:hover {
-    background: #75c172;
+    background: rgba(79, 195, 247, 0.25);
+    border-color: var(--vscode-text-accent);
     transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
+    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.2);
 }
 
 :root[data-theme="light"] .btn-success {
-    background: #28a745;
+    background: rgba(3, 102, 214, 0.08);
+    color: #0366d6;
+    border-color: rgba(3, 102, 214, 0.3);
 }
 
 :root[data-theme="light"] .btn-success:hover {
-    background: #218838;
+    background: rgba(3, 102, 214, 0.15);
+    border-color: #0366d6;
 }
 
 .btn-warning {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 6px;
     padding: 8px 16px;
-    background: var(--vscode-warning);
-    color: #1e1e1e;
-    border: none;
+    background: rgba(133, 133, 133, 0.15);
+    color: #a0a0a0;
+    border: 1px solid rgba(133, 133, 133, 0.3);
     border-radius: 6px;
     font-size: 13px;
     font-weight: 500;
@@ -741,28 +745,34 @@ body {
 }
 
 .btn-warning:hover {
-    background: #b8960a;
+    background: rgba(133, 133, 133, 0.25);
+    border-color: #a0a0a0;
+    color: #b8b8b8;
     transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
+    box-shadow: 0 2px 8px rgba(133, 133, 133, 0.2);
 }
 
 :root[data-theme="light"] .btn-warning {
-    background: #ffc107;
+    background: rgba(88, 96, 105, 0.08);
+    color: #586069;
+    border-color: rgba(88, 96, 105, 0.3);
 }
 
 :root[data-theme="light"] .btn-warning:hover {
-    background: #e0a800;
+    background: rgba(88, 96, 105, 0.15);
+    border-color: #586069;
+    color: #24292e;
 }
 
 .btn-danger {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 6px;
     padding: 8px 16px;
-    background: var(--vscode-error);
-    color: white;
-    border: none;
+    background: rgba(244, 135, 113, 0.12);
+    color: #f48771;
+    border: 1px solid rgba(244, 135, 113, 0.3);
     border-radius: 6px;
     font-size: 13px;
     font-weight: 500;
@@ -771,24 +781,30 @@ body {
 }
 
 .btn-danger:hover {
-    background: #e65c4a;
+    background: rgba(244, 135, 113, 0.2);
+    border-color: #f48771;
+    color: #ff9580;
     transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
+    box-shadow: 0 2px 8px rgba(244, 135, 113, 0.25);
 }
 
 :root[data-theme="light"] .btn-danger {
-    background: #dc3545;
+    background: rgba(215, 58, 73, 0.08);
+    color: #d73a49;
+    border-color: rgba(215, 58, 73, 0.3);
 }
 
 :root[data-theme="light"] .btn-danger:hover {
-    background: #c82333;
+    background: rgba(215, 58, 73, 0.15);
+    border-color: #d73a49;
+    color: #cb2431;
 }
 
 .btn-open:disabled,
 .btn-success:disabled,
 .btn-warning:disabled,
 .btn-danger:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;