vibecodingmachine-core 1.0.0

package/src/ui/ButtonComponents.js

@@ -0,0 +1,247 @@
+/**
+ * Shared UI Button Components
+ * Used by both electron app and VSCode extension
+ */
+
+// Button component for autonomous mode
+export function createAutonomousButton({
+  autonomousMode = false,
+  isPaused = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `autonomous-button ${autonomousMode ? 'active' : ''} ${className}`;
+  button.textContent = autonomousMode ? '🤖 Stop Auto' : '🤖 Start Auto';
+  button.disabled = isPaused;
+  button.title = autonomousMode ? 'Stop autonomous development' : 'Start autonomous feature implementation';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: autonomousMode ? '#d83b01' : '#68217a',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: isPaused ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s',
+    fontWeight: '500',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for pause/resume
+export function createPauseButton({
+  isPaused = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `pause-button ${isPaused ? 'paused' : ''} ${className}`;
+  button.textContent = isPaused ? '▶️ Resume' : '⏸️ Pause (Esc)';
+  button.title = isPaused ? 'Resume autonomous development' : 'Pause autonomous development (Esc)';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isPaused ? '#28a745' : '#ffc107',
+    color: isPaused ? 'white' : '#000',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for stop
+export function createStopButton({
+  autonomousMode = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `stop-button ${className}`;
+  button.textContent = '🛑 Stop';
+  button.disabled = !autonomousMode;
+  button.title = 'Stop autonomous development completely';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: autonomousMode ? '#dc3545' : '#6c757d',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: autonomousMode ? 'pointer' : 'not-allowed',
+    transition: 'all 0.2s',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for check quota
+export function createCheckQuotaButton({
+  isCheckingQuota = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `check-quota-button ${className}`;
+  button.textContent = isCheckingQuota ? 'Checking...' : '🔍 Check Quota';
+  button.disabled = isCheckingQuota;
+  button.title = 'Check for quota warnings and switch to available IDE';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isCheckingQuota ? '#6c757d' : '#17a2b8',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: isCheckingQuota ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for open IDE
+export function createOpenIdeButton({
+  isOpeningIde = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `open-ide-button ${className}`;
+  button.textContent = isOpeningIde ? 'Opening...' : 'Open IDE';
+  button.disabled = isOpeningIde;
+  button.title = isOpeningIde ? 'Opening IDE...' : 'Open IDE (dev mode)';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isOpeningIde ? '#6c757d' : '#28a745',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: isOpeningIde ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// IDE selector button
+export function createIdeButton({
+  ide,
+  isActive = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `ide-button ${isActive ? 'active' : ''} ${className}`;
+  button.textContent = ide === 'vscode' ? 'VS Code' : ide.charAt(0).toUpperCase() + ide.slice(1);
+  button.dataset.ide = ide;
+  button.title = `Select ${ide}`;
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isActive ? '#68217a' : '#007acc',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+    margin: '0 5px',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Container for control buttons
+export function createControlButtonContainer({
+  className = '',
+  style = {}
+}) {
+  const container = document.createElement('div');
+  container.className = `control-buttons ${className}`;
+
+  // Apply shared styles
+  Object.assign(container.style, {
+    display: 'flex',
+    gap: '10px',
+    marginTop: '10px',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    ...style
+  });
+
+  return container;
+}
+
+// Update button states
+export function updateAutonomousButton(button, autonomousMode, isPaused) {
+  button.textContent = autonomousMode ? '🤖 Stop Auto' : '🤖 Start Auto';
+  button.className = `autonomous-button ${autonomousMode ? 'active' : ''}`;
+  button.disabled = isPaused;
+  button.style.backgroundColor = autonomousMode ? '#d83b01' : '#68217a';
+  button.style.cursor = isPaused ? 'not-allowed' : 'pointer';
+}
+
+export function updatePauseButton(button, isPaused) {
+  button.textContent = isPaused ? '▶️ Resume' : '⏸️ Pause (Esc)';
+  button.className = `pause-button ${isPaused ? 'paused' : ''}`;
+  button.style.backgroundColor = isPaused ? '#28a745' : '#ffc107';
+  button.style.color = isPaused ? 'white' : '#000';
+}
+
+export function updateStopButton(button, autonomousMode) {
+  button.disabled = !autonomousMode;
+  button.style.backgroundColor = autonomousMode ? '#dc3545' : '#6c757d';
+  button.style.cursor = autonomousMode ? 'pointer' : 'not-allowed';
+}
+
+export function updateCheckQuotaButton(button, isCheckingQuota) {
+  button.textContent = isCheckingQuota ? 'Checking...' : '🔍 Check Quota';
+  button.disabled = isCheckingQuota;
+  button.style.backgroundColor = isCheckingQuota ? '#6c757d' : '#17a2b8';
+  button.style.cursor = isCheckingQuota ? 'not-allowed' : 'pointer';
+}
+
+export function updateOpenIdeButton(button, isOpeningIde) {
+  button.textContent = isOpeningIde ? 'Opening...' : 'Open IDE';
+  button.disabled = isOpeningIde;
+  button.style.backgroundColor = isOpeningIde ? '#6c757d' : '#28a745';
+  button.style.cursor = isOpeningIde ? 'not-allowed' : 'pointer';
+}