yaak-mountain-loop/src-web/components/WorkspaceHeader.tsx

import classNames from 'classnames';
import React, { memo } from 'react';
import { Icon } from './core/Icon';
import { HStack } from './core/Stacks';
import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
import { RecentRequestsDropdown } from './RecentRequestsDropdown';
import { SettingsDropdown } from './SettingsDropdown';
import { SidebarActions } from './SidebarActions';
import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
import { useOsInfo } from '../hooks/useOsInfo';
import { Button } from './core/Button';
import { appWindow } from '@tauri-apps/api/window';

interface Props {
  className?: string;
}

export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
  const osInfo = useOsInfo();
  return (
    <HStack
      space={2}
      justifyContent="center"
      alignItems="center"
      className={classNames(className, 'w-full h-full')}
    >
      <HStack space={0.5} className="flex-1 pointer-events-none" alignItems="center">
        <SidebarActions />
        <HStack alignItems="center">
          <WorkspaceActionsDropdown />
          <Icon icon="chevronRight" className="text-gray-900 text-opacity-disabled" />
          <EnvironmentActionsDropdown className="w-auto pointer-events-auto" />
        </HStack>
      </HStack>
      <div className="pointer-events-none">
        <RecentRequestsDropdown />
      </div>
      <div className="flex-1 flex justify-end -mr-2 pointer-events-none">
        <SettingsDropdown />
      </div>
      {osInfo?.osType !== 'Darwin' && (
        <HStack className="ml-3" space={1} alignItems="center">
          <Button size="sm" onClick={() => appWindow.minimize()}>
            -
          </Button>
          <Button size="sm" onClick={() => appWindow.toggleMaximize()}>
            o
          </Button>
          <Button size="sm" onClick={() => appWindow.close()}>
            x
          </Button>
        </HStack>
      )}
    </HStack>
  );
});