Function Shell

packages/hotkeys-devtools/src/components/Shell.tsx:32–171

()

}

export function Shell() {
  const styles = useStyles()
  const state = useHotkeysDevtoolsState()
  const [selectedId, setSelectedId] = createSignal<string | null>(null)
  const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)
  const [isDragging, setIsDragging] = createSignal(false)
  const [shellRootEl, setShellRootEl] = createSignal<HTMLElement | null>(null)
  const [slotHeightPx, setSlotHeightPx] = createSignal<number | undefined>(
    undefined,
  )

  const selectedRegistration = createMemo(() => {
    const id = selectedId()
    if (!id) return null
    const hotkey = state.registrations().find((r) => r.id === id)
    if (hotkey) return hotkey
    const sequence = state.sequenceRegistrations().find((r) => r.id === id)
    return sequence ?? null
  })

  let dragStartX = 0
  let dragStartWidth = 0

  const handleMouseDown = (e: MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDragging(true)
    document.body.style.cursor = 'col-resize'
    document.body.style.userSelect = 'none'
    dragStartX = e.clientX
    dragStartWidth = leftPanelWidth()
  }

  const handleMouseMove = (e: MouseEvent) => {
    if (!isDragging()) return

    e.preventDefault()
    const deltaX = e.clientX - dragStartX
    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))
    setLeftPanelWidth(newWidth)
  }

  const handleMouseUp = () => {
    setIsDragging(false)
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
  }

  onMount(() => {
    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  })

  onCleanup(() => {
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  })