packages/app/src/components/session/session-sortable-terminal-tab.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import type { JSX } from "solid-js"
import { createSortable } from "@thisbeyond/solid-dnd"
import { IconButton } from "@opencode-ai/ui/icon-button"
import { Tabs } from "@opencode-ai/ui/tabs"
import { useTerminal, type LocalPTY } from "@/context/terminal"

export function SortableTerminalTab(props: { terminal: LocalPTY }): JSX.Element {
  const terminal = useTerminal()
  const sortable = createSortable(props.terminal.id)
  return (
    // @ts-ignore
    <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
      <div class="relative h-full">
        <Tabs.Trigger
          value={props.terminal.id}
          closeButton={
            terminal.tabs().length > 1 && (
              <IconButton icon="close" variant="ghost" onClick={() => terminal.closeTab(props.terminal.tabId)} />
            )
          }
        >
          {props.terminal.title}
        </Tabs.Trigger>
      </div>
    </div>
  )
}