Add reorderable tabs with global persistence (#347)

src-web/components/DropMarker.tsx

@@ -5,19 +5,28 @@ import { memo } from 'react';
 interface Props {
   className?: string;
   style?: CSSProperties;
+  orientation?: 'horizontal' | 'vertical';
 }
 
 export const DropMarker = memo(
-  function DropMarker({ className, style }: Props) {
+  function DropMarker({ className, style, orientation = 'horizontal' }: Props) {
     return (
       <div
         style={style}
         className={classNames(
           className,
-          'relative w-full h-0 overflow-visible pointer-events-none',
+          'absolute pointer-events-none z-50',
+          orientation === 'horizontal' && 'w-full',
+          orientation === 'vertical' && 'w-0 top-0 bottom-0',
         )}
       >
-        <div className="absolute z-50 left-2 right-2 -bottom-[0.1rem] h-[0.2rem] bg-primary rounded-full" />
+        <div
+          className={classNames(
+            'absolute bg-primary rounded-full',
+            orientation === 'horizontal' && 'left-2 right-2 -bottom-[0.1rem] h-[0.2rem]',
+            orientation === 'vertical' && '-left-[0.1rem] top-0 bottom-0 w-[0.2rem]',
+          )}
+        />
       </div>
     );
   },

src-web/components/GrpcRequestPane.tsx

@@ -270,6 +270,7 @@ export function GrpcRequestPane({
         onChangeValue={setActiveTab}
         tabs={tabs}
         tabListClassName="mt-1 !mb-1.5"
+        storageKey="grpc_request_tabs_order"
       >
         <TabContent value="message">
           <GrpcEditor

src-web/components/HttpRequestPane.tsx

@@ -359,6 +359,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
             onChangeValue={setActiveTab}
             tabs={tabs}
             tabListClassName="mt-1 mb-1.5"
+            storageKey="http_request_tabs_order"
           >
             <TabContent value={TAB_AUTH}>
               <HttpAuthenticationEditor model={activeRequest} />

src-web/components/HttpResponsePane.tsx

@@ -211,6 +211,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
               label="Response"
               className="ml-3 mr-3 mb-3 min-h-0 flex-1"
               tabListClassName="mt-0.5"
+              storageKey="http_response_tabs_order"
             >
               <TabContent value={TAB_BODY}>
                 <ErrorBoundary name="Http Response Viewer">

src-web/components/WebsocketRequestPane.tsx

@@ -234,6 +234,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
             onChangeValue={setActiveTab}
             tabs={tabs}
             tabListClassName="mt-1 !mb-1.5"
+            storageKey="websocket_request_tabs_order"
           >
             <TabContent value={TAB_AUTH}>
               <HttpAuthenticationEditor model={activeRequest} />

src-web/components/core/Dropdown.tsx

@@ -177,18 +177,23 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
 
   const child = useMemo(() => {
     const existingChild = Children.only(children);
+    const originalOnClick = existingChild.props?.onClick;
     const props: HTMLAttributes<HTMLButtonElement> & { ref: RefObject<HTMLButtonElement | null> } =
       {
         ...existingChild.props,
         ref: buttonRef,
         'aria-haspopup': 'true',
-        onClick:
-          existingChild.props?.onClick ??
-          ((e: MouseEvent<HTMLButtonElement>) => {
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          // Call original onClick first if it exists
+          originalOnClick?.(e);
+
+          // Only toggle dropdown if event wasn't prevented
+          if (!e.defaultPrevented) {
             e.preventDefault();
             e.stopPropagation();
             handleSetIsOpen((o) => !o); // Toggle dropdown
-          }),
+          }
+        },
       };
     return cloneElement(existingChild, props);
   }, [children, handleSetIsOpen]);

src-web/components/core/PairEditor.tsx

@@ -224,7 +224,7 @@ export function PairEditor({
 
       const side = computeSideForDragMove(overPair.id, e);
       const overIndex = pairs.findIndex((p) => p.id === overId);
-      const hoveredIndex = overIndex + (side === 'above' ? 0 : 1);
+      const hoveredIndex = overIndex + (side === 'before' ? 0 : 1);
 
       setHoveredIndex(hoveredIndex);
     },

src-web/components/core/Tabs/Tabs.tsx

@@ -1,6 +1,20 @@
+import type { DragEndEvent, DragMoveEvent, DragStartEvent } from '@dnd-kit/core';
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
-import { memo, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useKeyValue } from '../../../hooks/useKeyValue';
+import { computeSideForDragMove } from '../../../lib/dnd';
+import { DropMarker } from '../../DropMarker';
 import { ErrorBoundary } from '../../ErrorBoundary';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';
@@ -33,6 +47,7 @@ interface Props {
   children: ReactNode;
   addBorders?: boolean;
   layout?: 'horizontal' | 'vertical';
+  storageKey?: string | string[];
 }
 
 export function Tabs({
@@ -40,13 +55,62 @@ export function Tabs({
   onChangeValue,
   label,
   children,
-  tabs,
+  tabs: originalTabs,
   className,
   tabListClassName,
   addBorders,
   layout = 'vertical',
+  storageKey,
 }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
+  const reorderable = !!storageKey;
+
+  // Use key-value storage for persistence if storageKey is provided
+  const { value: savedOrder, set: setSavedOrder } = useKeyValue<string[]>({
+    namespace: 'global',
+    key: storageKey ?? ['tabs_order', 'default'],
+    fallback: [],
+  });
+
+  // State for ordered tabs
+  const [orderedTabs, setOrderedTabs] = useState<TabItem[]>(originalTabs);
+  const [isDragging, setIsDragging] = useState<TabItem | null>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  // Reorder tabs based on saved order when tabs or savedOrder changes
+  useEffect(() => {
+    if (!storageKey || savedOrder == null || savedOrder.length === 0) {
+      setOrderedTabs(originalTabs);
+      return;
+    }
+
+    // Create a map of tab values to tab items
+    const tabMap = new Map(originalTabs.map((tab) => [tab.value, tab]));
+
+    // Reorder based on saved order, adding any new tabs at the end
+    const reordered: TabItem[] = [];
+    const seenValues = new Set<string>();
+
+    // Add tabs in saved order
+    for (const value of savedOrder) {
+      const tab = tabMap.get(value);
+      if (tab) {
+        reordered.push(tab);
+        seenValues.add(value);
+      }
+    }
+
+    // Add any new tabs that weren't in the saved order
+    for (const tab of originalTabs) {
+      if (!seenValues.has(tab.value)) {
+        reordered.push(tab);
+      }
+    }
+
+    setOrderedTabs(reordered);
+  }, [originalTabs, savedOrder, storageKey]);
+
+  const tabs = storageKey ? orderedTabs : originalTabs;
 
   value = value ?? tabs[0]?.value;
 
@@ -70,6 +134,149 @@ export function Tabs({
     }
   }, [value]);
 
+  // Drag and drop handlers
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+
+  const onDragStart = useCallback(
+    (e: DragStartEvent) => {
+      const tab = tabs.find((t) => t.value === e.active.id);
+      setIsDragging(tab ?? null);
+    },
+    [tabs],
+  );
+
+  const onDragMove = useCallback(
+    (e: DragMoveEvent) => {
+      const overId = e.over?.id as string | undefined;
+      if (!overId) return setHoveredIndex(null);
+
+      const overTab = tabs.find((t) => t.value === overId);
+      if (overTab == null) return setHoveredIndex(null);
+
+      // For vertical layout, tabs are arranged horizontally (side-by-side)
+      const orientation = layout === 'vertical' ? 'horizontal' : 'vertical';
+      const side = computeSideForDragMove(overTab.value, e, orientation);
+
+      // If computeSideForDragMove returns null (shouldn't happen but be safe), default to null
+      if (side === null) return setHoveredIndex(null);
+
+      const overIndex = tabs.findIndex((t) => t.value === overId);
+      const hoveredIndex = overIndex + (side === 'before' ? 0 : 1);
+
+      setHoveredIndex(hoveredIndex);
+    },
+    [tabs, layout],
+  );
+
+  const onDragCancel = useCallback(() => {
+    setIsDragging(null);
+    setHoveredIndex(null);
+  }, []);
+
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      setIsDragging(null);
+      setHoveredIndex(null);
+
+      const activeId = e.active.id as string | undefined;
+      const overId = e.over?.id as string | undefined;
+      if (!activeId || !overId || activeId === overId) return;
+
+      const from = tabs.findIndex((t) => t.value === activeId);
+      const baseTo = tabs.findIndex((t) => t.value === overId);
+      const to = hoveredIndex ?? (baseTo === -1 ? from : baseTo);
+
+      if (from !== -1 && to !== -1 && from !== to) {
+        const newTabs = [...tabs];
+        const [moved] = newTabs.splice(from, 1);
+        if (moved === undefined) return;
+        newTabs.splice(to > from ? to - 1 : to, 0, moved);
+
+        setOrderedTabs(newTabs);
+
+        // Save order to storage
+        setSavedOrder(newTabs.map((t) => t.value)).catch(console.error);
+      }
+    },
+    [tabs, hoveredIndex, setSavedOrder],
+  );
+
+  const tabButtons = useMemo(() => {
+    const items: ReactNode[] = [];
+    tabs.forEach((t, i) => {
+      if ('hidden' in t && t.hidden) {
+        return;
+      }
+
+      const isActive = t.value === value;
+      const showDropMarkerBefore = hoveredIndex === i;
+
+      if (showDropMarkerBefore) {
+        items.push(
+          <div
+            key={`marker-${t.value}`}
+            className={classNames(
+              'relative',
+              layout === 'vertical' ? 'w-0' : 'h-0',
+            )}
+          >
+            <DropMarker orientation={layout === 'vertical' ? 'vertical' : 'horizontal'} />
+          </div>
+        );
+      }
+
+      items.push(
+        <TabButton
+          key={t.value}
+          tab={t}
+          isActive={isActive}
+          addBorders={addBorders}
+          layout={layout}
+          reorderable={reorderable}
+          isDragging={isDragging?.value === t.value}
+          onChangeValue={onChangeValue}
+        />
+      );
+    });
+    return items;
+  }, [tabs, value, addBorders, layout, reorderable, isDragging, onChangeValue, hoveredIndex]);
+
+  const tabList = (
+    <div
+      role="tablist"
+      aria-label={label}
+      className={classNames(
+        tabListClassName,
+        addBorders && layout === 'horizontal' && 'pl-3 -ml-1',
+        addBorders && layout === 'vertical' && 'ml-0 mb-2',
+        'flex items-center hide-scrollbars',
+        layout === 'horizontal' && 'h-full overflow-auto p-2',
+        layout === 'vertical' && 'overflow-x-auto overflow-y-visible ',
+        // Give space for button focus states within overflow boundary.
+        !addBorders && layout === 'vertical' && 'py-1 pl-3 -ml-5 pr-1',
+      )}
+    >
+      <div
+        className={classNames(
+          layout === 'horizontal' && 'flex flex-col w-full pb-3 mb-auto',
+          layout === 'vertical' && 'flex flex-row flex-shrink-0 w-full',
+        )}
+      >
+        {tabButtons}
+        {hoveredIndex === tabs.length && (
+          <div
+            className={classNames(
+              'relative',
+              layout === 'vertical' ? 'w-0' : 'h-0',
+            )}
+          >
+            <DropMarker orientation={layout === 'vertical' ? 'vertical' : 'horizontal'} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <div
       ref={ref}
@@ -81,104 +288,168 @@ export function Tabs({
         layout === 'vertical' && 'grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
       )}
     >
-      <div
-        role="tablist"
-        aria-label={label}
-        className={classNames(
-          tabListClassName,
-          addBorders && layout === 'horizontal' && 'pl-3 -ml-1',
-          addBorders && layout === 'vertical' && 'ml-0 mb-2',
-          'flex items-center hide-scrollbars',
-          layout === 'horizontal' && 'h-full overflow-auto p-2',
-          layout === 'vertical' && 'overflow-x-auto overflow-y-visible ',
-          // Give space for button focus states within overflow boundary.
-          !addBorders && layout === 'vertical' && 'py-1 pl-3 -ml-5 pr-1',
-        )}
-      >
-        <div
-          className={classNames(
-            layout === 'horizontal' && 'flex flex-col w-full pb-3 mb-auto',
-            layout === 'vertical' && 'flex flex-row flex-shrink-0 gap-2 w-full',
-          )}
+      {reorderable ? (
+        <DndContext
+          autoScroll
+          sensors={sensors}
+          onDragMove={onDragMove}
+          onDragEnd={onDragEnd}
+          onDragStart={onDragStart}
+          onDragCancel={onDragCancel}
+          collisionDetection={closestCenter}
         >
-          {tabs.map((t) => {
-            if ('hidden' in t && t.hidden) {
-              return null;
-            }
-
-            const isActive = t.value === value;
-
-            const btnProps: Partial<ButtonProps> = {
-              color: 'custom',
-              justify: layout === 'horizontal' ? 'start' : 'center',
-              onClick: isActive ? undefined : () => onChangeValue(t.value),
-              className: classNames(
-                'flex items-center rounded whitespace-nowrap',
-                '!px-2 ml-[1px]',
-                'outline-none',
-                'ring-none',
-                'focus-visible-or-class:outline-2',
-                addBorders && 'border focus-visible:bg-surface-highlight',
-                isActive ? 'text-text' : 'text-text-subtle',
-                isActive && addBorders
-                  ? 'border-surface-active bg-surface-active'
-                  : layout === 'vertical'
-                    ? 'border-border-subtle'
-                    : 'border-transparent',
-                layout === 'horizontal' && 'min-w-[10rem]',
-              ),
-            };
-
-            if ('options' in t) {
-              const option = t.options.items.find(
-                (i) => 'value' in i && i.value === t.options?.value,
-              );
-              return (
-                <RadioDropdown
-                  key={t.value}
-                  items={t.options.items}
-                  itemsAfter={t.options.itemsAfter}
-                  itemsBefore={t.options.itemsBefore}
-                  value={t.options.value}
-                  onChange={t.options.onChange}
-                >
-                  <Button
-                    leftSlot={t.leftSlot}
-                    rightSlot={
-                      <div className="flex items-center">
-                        {t.rightSlot}
-                        <Icon
-                          size="sm"
-                          icon="chevron_down"
-                          className={classNames(
-                            'ml-1',
-                            isActive ? 'text-text-subtle' : 'text-text-subtlest',
-                          )}
-                        />
-                      </div>
-                    }
-                    {...btnProps}
-                  >
-                    {option && 'shortLabel' in option && option.shortLabel
-                      ? option.shortLabel
-                      : (option?.label ?? 'Unknown')}
-                  </Button>
-                </RadioDropdown>
-              );
-            }
-            return (
-              <Button key={t.value} leftSlot={t.leftSlot} rightSlot={t.rightSlot} {...btnProps}>
-                {t.label}
-              </Button>
-            );
-          })}
-        </div>
-      </div>
+          {tabList}
+          <DragOverlay dropAnimation={null}>
+            {isDragging && (
+              <TabButton
+                tab={isDragging}
+                isActive={isDragging.value === value}
+                addBorders={addBorders}
+                layout={layout}
+                reorderable={false}
+                isDragging={false}
+                onChangeValue={onChangeValue}
+                overlay
+              />
+            )}
+          </DragOverlay>
+        </DndContext>
+      ) : (
+        tabList
+      )}
       {children}
     </div>
   );
 }
 
+interface TabButtonProps {
+  tab: TabItem;
+  isActive: boolean;
+  addBorders?: boolean;
+  layout: 'horizontal' | 'vertical';
+  reorderable: boolean;
+  isDragging: boolean;
+  onChangeValue: (value: string) => void;
+  overlay?: boolean;
+}
+
+function TabButton({
+  tab,
+  isActive,
+  addBorders,
+  layout,
+  reorderable,
+  isDragging,
+  onChangeValue,
+  overlay = false,
+}: TabButtonProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+  } = useDraggable({
+    id: tab.value,
+    disabled: !reorderable,
+  });
+  const { setNodeRef: setDroppableRef } = useDroppable({
+    id: tab.value,
+    disabled: !reorderable,
+  });
+
+  const handleSetWrapperRef = useCallback(
+    (n: HTMLDivElement | null) => {
+      if (reorderable) {
+        setDraggableRef(n);
+        setDroppableRef(n);
+      }
+    },
+    [reorderable, setDraggableRef, setDroppableRef],
+  );
+
+  const btnProps: Partial<ButtonProps> = {
+    color: 'custom',
+    justify: layout === 'horizontal' ? 'start' : 'center',
+    onClick: isActive ? undefined : () => onChangeValue(tab.value),
+    className: classNames(
+      'flex items-center rounded whitespace-nowrap',
+      '!px-2 ml-[1px]',
+      'outline-none',
+      'ring-none',
+      'focus-visible-or-class:outline-2',
+      addBorders && 'border focus-visible:bg-surface-highlight',
+      isActive ? 'text-text' : 'text-text-subtle',
+      isActive && addBorders
+        ? 'border-surface-active bg-surface-active'
+        : layout === 'vertical'
+          ? 'border-border-subtle'
+          : 'border-transparent',
+      layout === 'horizontal' && 'min-w-[10rem]',
+      isDragging && 'opacity-50',
+      overlay && 'opacity-80',
+    ),
+  };
+
+  const buttonContent = (() => {
+    if ('options' in tab) {
+      const option = tab.options.items.find((i) => 'value' in i && i.value === tab.options.value);
+      return (
+        <RadioDropdown
+          key={tab.value}
+          items={tab.options.items}
+          itemsAfter={tab.options.itemsAfter}
+          itemsBefore={tab.options.itemsBefore}
+          value={tab.options.value}
+          onChange={tab.options.onChange}
+        >
+          <Button
+            leftSlot={tab.leftSlot}
+            rightSlot={
+              <div className="flex items-center">
+                {tab.rightSlot}
+                <Icon
+                  size="sm"
+                  icon="chevron_down"
+                  className={classNames(
+                    'ml-1',
+                    isActive ? 'text-text-subtle' : 'text-text-subtlest',
+                  )}
+                />
+              </div>
+            }
+            {...btnProps}
+          >
+            {option && 'shortLabel' in option && option.shortLabel
+              ? option.shortLabel
+              : (option?.label ?? 'Unknown')}
+          </Button>
+        </RadioDropdown>
+      );
+    }
+    return (
+      <Button
+        leftSlot={tab.leftSlot}
+        rightSlot={tab.rightSlot}
+        {...btnProps}
+      >
+        {'label' in tab && tab.label ? tab.label : tab.value}
+      </Button>
+    );
+  })();
+
+  // Apply drag handlers to wrapper, not button
+  const wrapperProps = reorderable && !overlay ? { ...attributes, ...listeners } : {};
+
+  return (
+    <div
+      ref={handleSetWrapperRef}
+      className={classNames('relative', layout === 'vertical' && 'mr-2')}
+      {...wrapperProps}
+    >
+      {buttonContent}
+    </div>
+  );
+}
+
 interface TabContentProps {
   value: string;
   children: ReactNode;

src-web/components/core/tree/Tree.tsx

@@ -486,11 +486,11 @@ function TreeInner<T extends { id: string }>(
       let hoveredParent = node.parent;
       const dragIndex = selectableItems.findIndex((n) => n.node.item.id === item.id) ?? -1;
       const hovered = selectableItems[dragIndex]?.node ?? null;
-      const hoveredIndex = dragIndex + (side === 'above' ? 0 : 1);
-      let hoveredChildIndex = overSelectableItem.index + (side === 'above' ? 0 : 1);
+      const hoveredIndex = dragIndex + (side === 'before' ? 0 : 1);
+      let hoveredChildIndex = overSelectableItem.index + (side === 'before' ? 0 : 1);
 
-      // Move into the folder if it's open and we're moving below it
-      if (hovered?.children != null && side === 'below') {
+      // Move into the folder if it's open and we're moving after it
+      if (hovered?.children != null && side === 'after') {
         hoveredParent = hovered;
         hoveredChildIndex = 0;
       }

src-web/components/core/tree/TreeDropMarker.tsx

@@ -29,7 +29,7 @@ export const TreeDropMarker = memo(function TreeDropMarker<T extends { id: strin
   if (collapsed || node?.children?.length === 0) return null;
 
   return (
-    <div className="drop-marker" style={{ paddingLeft: `${parentDepth}rem` }}>
+    <div className="drop-marker relative" style={{ paddingLeft: `${parentDepth}rem` }}>
       <DropMarker className={classNames(className)} />
     </div>
   );

src-web/components/core/tree/TreeItem.tsx

@@ -208,7 +208,7 @@ function TreeItem_<T extends { id: string }>({
       const isFolder = node.children != null;
       const hasChildren = (node.children?.length ?? 0) > 0;
       const isCollapsed = jotaiStore.get(isCollapsedFamily({ treeId, itemId: node.item.id }));
-      if (isCollapsed && isFolder && hasChildren && side === 'below') {
+      if (isCollapsed && isFolder && hasChildren && side === 'after') {
         setDropHover('animate');
         clearTimeout(startedHoverTimeout.current);
         startedHoverTimeout.current = setTimeout(() => {
@@ -221,7 +221,7 @@ function TreeItem_<T extends { id: string }>({
             );
           });
         }, HOVER_CLOSED_FOLDER_DELAY);
-      } else if (isFolder && !hasChildren && side === 'below') {
+      } else if (isFolder && !hasChildren && side === 'after') {
         setDropHover('drop');
       } else {
         clearDropHover();

src-web/lib/dnd.ts

@@ -1,20 +1,39 @@
 import type { DragMoveEvent } from '@dnd-kit/core';
 
-export function computeSideForDragMove(id: string, e: DragMoveEvent): 'above' | 'below' | null {
+export function computeSideForDragMove(
+  id: string,
+  e: DragMoveEvent,
+  orientation: 'vertical' | 'horizontal' = 'vertical',
+): 'before' | 'after' | null {
   if (e.over == null || e.over.id !== id) {
     return null;
   }
   if (e.active.rect.current.initial == null) return null;
 
   const overRect = e.over.rect;
-  const activeTop =
-    e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
-  const pointerY = activeTop + e.active.rect.current.initial.height / 2;
 
-  const hoverTop = overRect.top;
-  const hoverBottom = overRect.bottom;
-  const hoverMiddleY = (hoverBottom - hoverTop) / 2;
-  const hoverClientY = pointerY - hoverTop;
+  if (orientation === 'horizontal') {
+    // For horizontal layouts (tabs side-by-side), use left/right logic
+    const activeLeft =
+      e.active.rect.current.translated?.left ?? e.active.rect.current.initial.left + e.delta.x;
+    const pointerX = activeLeft + e.active.rect.current.initial.width / 2;
 
-  return hoverClientY < hoverMiddleY ? 'above' : 'below';
+    const hoverLeft = overRect.left;
+    const hoverRight = overRect.right;
+    const hoverMiddleX = hoverLeft + (hoverRight - hoverLeft) / 2;
+
+    return pointerX < hoverMiddleX ? 'before' : 'after'; // 'before' = left, 'after' = right
+  } else {
+    // For vertical layouts, use top/bottom logic
+    const activeTop =
+      e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
+    const pointerY = activeTop + e.active.rect.current.initial.height / 2;
+
+    const hoverTop = overRect.top;
+    const hoverBottom = overRect.bottom;
+    const hoverMiddleY = (hoverBottom - hoverTop) / 2;
+    const hoverClientY = pointerY - hoverTop;
+
+    return hoverClientY < hoverMiddleY ? 'before' : 'after';
+  }
 }