1// Jev at work, under the editor: the booth (a cell per section, with "is it
2// art?" and today's Jev budget, JevBudget.jsx, in its title row) above the mixer, and beside them Jev's request
3// log, newest on top (JevLog.jsx; it replaced the popups). Always shown
4// beside the code (ReplEditor.jsx), so it is the one piece of jevstrudel
5// outside the jev panel; before a song with a jev() plays, the booth and
6// mixer show their skeletons, 8 empty sections and an idle desk. It takes
7// at most 45% of the column, so the editor keeps the rest; its height is the
8// booth and mixer's, and the log scrolls within it (below lg the log sits
9// under the mixer).
10import { JevBooth } from './JevBooth.jsx';
11import { JevBudget } from './JevBudget.jsx';
12import { JevLog } from './JevLog.jsx';
13import { JevMixer } from './JevMixer.jsx';
14import { ArtCheck } from './JevPicks.jsx';
15
16export function JevPane({ context }) {
17  return (
18    <div
19      className="shrink-0 max-h-[45%] flex flex-col lg:flex-row min-h-0 border-t border-muted bg-lineHighlight"
20      data-testid="jev-pane"
21    >
22      <div className="min-w-0 grow overflow-y-auto">
23        <JevBooth
24          context={context}
25          extra={
26            <>
27              <ArtCheck context={context} />
28              <JevBudget />
29            </>
30          }
31        />
32        <JevMixer context={context} />
33      </div>
34      {/* beside the booth, the log takes the booth and mixer's height and scrolls
35          within it (absolute), never growing the pane past them */}
36      <div className="shrink-0 lg:w-96 h-40 lg:h-auto lg:relative border-t lg:border-t-0 lg:border-l border-muted">
37        <div className="h-full lg:absolute lg:inset-0">
38          <JevLog />
39        </div>
40      </div>
41    </div>
42  );
43}