Window Management

// Close the menu window
window.electron.closeMenu();

function MenuPanel() {
  const handleCancel = () => {
    window.electron.closeMenu();
  };

  return (
    <button onClick={handleCancel}>
      Close
    </button>
  );
}

// Resize to specific dimensions
window.electron.resizeWindow({ width: 800, height: 600 });

// Only change width
window.electron.resizeWindow({ width: 1000 });

// Only change height
window.electron.resizeWindow({ height: 400 });

function ResizablePanel() {
  const handleResize = (expanded: boolean) => {
    if (expanded) {
      window.electron.resizeWindow({ width: 1200, height: 800 });
    } else {
      window.electron.resizeWindow({ width: 600, height: 400 });
    }
  };

  return (
    <button onClick={() => handleResize(true)}>
      Expand
    </button>
  );
}

// Move window 100px to the right and 50px down
window.electron.moveWindow({ x: 100, y: 50 });

// Move window to the left and up
window.electron.moveWindow({ x: -50, y: -30 });

function DraggableWindow() {
  const handleDrag = (deltaX: number, deltaY: number) => {
    window.electron.moveWindow({ x: deltaX, y: deltaY });
  };

  return (
    <div
      onMouseMove={(e) => {
        if (e.buttons === 1) { // Left mouse button
          handleDrag(e.movementX, e.movementY);
        }
      }}
    >
      Drag to move
    </div>
  );
}

// Open settings window
window.electron.openSettings();

function AppMenu() {
  return (
    <nav>
      <button onClick={() => window.electron.openSettings()}>
        Settings
      </button>
    </nav>
  );
}

// Toggle brain panel on/off
window.electron.toggleBrainPanel();

function BrainPanelToggle() {
  const handleToggle = () => {
    window.electron.toggleBrainPanel();
  };

  return (
    <button onClick={handleToggle}>
      Toggle Brain Panel
    </button>
  );
}

// Collapse brain panel to icon
window.electron.setBrainPanelCollapsed(true);

// Expand brain panel to full size
window.electron.setBrainPanelCollapsed(false);

function BrainPanel() {
  const [collapsed, setCollapsed] = useState(false);

  const handleToggleSize = () => {
    const newState = !collapsed;
    setCollapsed(newState);
    window.electron.setBrainPanelCollapsed(newState);
  };

  return (
    <div>
      <button onClick={handleToggleSize}>
        {collapsed ? 'Expand' : 'Collapse'}
      </button>
    </div>
  );
}

// Open documentation in browser
window.electron.openExternal("https://docs.tabbyml.com");

function ExternalLink({ href, children }: { href: string; children: React.ReactNode }) {
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    window.electron.openExternal(href);
  };

  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
}

// Usage
<ExternalLink href="https://github.com/TabbyML/tabby">
  View on GitHub
</ExternalLink>