strudel/website/src/repl/components/panel/Panel.jsx

import cx from '@src/cx.mjs';
import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
import { ConsoleTab } from './ConsoleTab';
import { FilesTab } from './FilesTab';
import { Reference } from './Reference';
import { SettingsTab } from './SettingsTab';
import { SoundsTab } from './SoundsTab';
import { useLogger } from '../useLogger';
import { WelcomeTab } from './WelcomeTab';
import { PatternsTab } from './PatternsTab';
import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';

const TAURI = typeof window !== 'undefined' && window.__TAURI__;

export function HorizontalPanel({ context }) {
  const settings = useSettings();
  const { isPanelOpen, activeFooter: tab } = settings;

  return (
    <PanelNav
      settings={settings}
      className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}
    >
      {isPanelOpen && (
        <div className="flex h-full overflow-auto pr-10 ">
          <PanelContent context={context} tab={tab} />
        </div>
      )}

      <div className="absolute right-4 pt-4">
        <PanelActionButton settings={settings} />
      </div>

      <div className="flex  justify-between min-h-12 max-h-12 grid-cols-2 items-center">
        <Tabs setTab={setTab} tab={tab} />
      </div>
    </PanelNav>
  );
}

export function VerticalPanel({ context }) {
  const settings = useSettings();
  const { activeFooter: tab, isPanelOpen } = settings;

  return (
    <PanelNav
      settings={settings}
      className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
    >
      {isPanelOpen ? (
        <div className={cx('flex flex-col h-full')}>
          <div className="flex justify-between w-full ">
            <Tabs setTab={setTab} tab={tab} />
            <PanelActionButton settings={settings} />
          </div>

          <div className="overflow-auto h-full">
            <PanelContent context={context} tab={tab} />
          </div>
        </div>
      ) : (
        <button
          onClick={(e) => {
            setIsPanelOpened(true);
          }}
          aria-label="open menu panel"
          className={cx(
            'flex flex-col hover:bg-lineBackground items-center cursor-pointer justify-center w-full  h-full',
          )}
        >
          <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
        </button>
      )}
    </PanelNav>
  );
}

const tabNames = {
  welcome: 'intro',
  patterns: 'patterns',
  sounds: 'sounds',
  reference: 'reference',
  console: 'console',
  settings: 'settings',
};
if (TAURI) {
  tabNames.files = 'files';
}

function PanelNav({ children, className, settings, ...props }) {
  const isHoverBehavior = settings.togglePanelTrigger === 'hover';
  return (
    <nav
      onClick={() => {
        if (!settings.isPanelOpen) {
          setIsPanelOpened(true);
        }
      }}
      onMouseEnter={() => {
        if (isHoverBehavior && !settings.isPanelOpen) {
          setIsPanelOpened(true);
        }
      }}
      onMouseLeave={() => {
        if (isHoverBehavior && !settings.isPanelPinned) {
          setIsPanelOpened(false);
        }
      }}
      aria-label="Menu Panel"
      className={cx('bg-lineHighlight group overflow-x-auto', className)}
      {...props}
    >
      {children}
    </nav>
  );
}

function PanelContent({ context, tab }) {
  useLogger();
  switch (tab) {
    case tabNames.patterns:
      return <PatternsTab context={context} />;
    case tabNames.console:
      return <ConsoleTab />;
    case tabNames.sounds:
      return <SoundsTab />;
    case tabNames.reference:
      return <Reference />;
    case tabNames.settings:
      return <SettingsTab started={context.started} />;
    case tabNames.files:
      return <FilesTab />;
    default:
      return <WelcomeTab context={context} />;
  }
}

function PanelTab({ label, isSelected, onClick }) {
  return (
    <>
      <button
        onClick={onClick}
        className={cx(
          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
          isSelected ? 'border-foreground' : 'border-transparent',
        )}
      >
        {label}
      </button>
    </>
  );
}
function Tabs({ setTab, tab, className }) {
  return (
    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
      {Object.keys(tabNames).map((key) => {
        const val = tabNames[key];
        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
      })}
    </div>
  );
}

function PanelActionButton({ settings }) {
  const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings;
  const isHoverBehavior = togglePanelTrigger === 'hover';
  if (!isPanelOpen) {
    return;
  }

  if (isHoverBehavior) {
    return <PinButton pinned={isPanelPinned} />;
  }
  return <CloseButton onClick={() => setIsPanelOpened(false)} />;
}

function PinButton({ pinned }) {
  return (
    <button
      onClick={() => setPanelPinned(!pinned)}
      className={cx(
        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
        pinned ? 'flex' : 'hidden',
      )}
      aria-label="Pin Menu Panel"
    >
      <svg
        stroke="currentColor"
        fill={'currentColor'}
        strokeWidth="0"
        className="w-full h-full"
        opacity={pinned ? 1 : '.3'}
        viewBox="0 0 16 16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"></path>
      </svg>
    </button>
  );
}

function CloseButton({ onClick }) {
  return (
    <button
      onClick={onClick}
      className={cx(
        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
      )}
      aria-label="Close Menu"
    >
      <XMarkIcon />
    </button>
  );
}