these too

frontend/src/components/map/MapPageSelectionPane.tsx

@@ -0,0 +1,72 @@
+import type { PointerEvent, ReactNode } from 'react';
+
+import { TabButton } from '../ui/TabButton';
+import { CloseIcon } from '../ui/icons/CloseIcon';
+
+interface ResizeHandlers {
+  onPointerDown: (event: PointerEvent) => void;
+  onPointerMove: (event: PointerEvent) => void;
+  onPointerUp: () => void;
+}
+
+interface MapPageSelectionPaneProps {
+  width: number;
+  resizeHandlers: ResizeHandlers;
+  tab: 'properties' | 'area';
+  onAreaTabClick: () => void;
+  onPropertiesTabClick: () => void;
+  onClose: () => void;
+  renderAreaPane: () => ReactNode;
+  renderPropertiesPane: () => ReactNode;
+}
+
+export function MapPageSelectionPane({
+  width,
+  resizeHandlers,
+  tab,
+  onAreaTabClick,
+  onPropertiesTabClick,
+  onClose,
+  renderAreaPane,
+  renderPropertiesPane,
+}: MapPageSelectionPaneProps) {
+  return (
+    <div
+      data-tutorial="right-pane"
+      className="flex bg-white dark:bg-navy-950 shadow-lg z-10"
+      style={{ width }}
+    >
+      <div
+        className="w-3 cursor-col-resize flex items-center justify-center group bg-warm-100 dark:bg-navy-800 hover:bg-warm-200 dark:hover:bg-navy-700 border-x border-warm-200 dark:border-navy-700"
+        {...resizeHandlers}
+      >
+        <div className="flex flex-col gap-1.5">
+          <div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
+          <div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
+          <div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
+        </div>
+      </div>
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex border-b border-warm-200 dark:border-navy-700 text-sm">
+          <TabButton label="Area" isActive={tab === 'area'} onClick={onAreaTabClick} />
+          <TabButton
+            label="Properties"
+            isActive={tab === 'properties'}
+            onClick={onPropertiesTabClick}
+          />
+          <button
+            onClick={onClose}
+            className="px-2 flex items-center text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
+            title="Close pane"
+          >
+            <CloseIcon className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-hidden">
+          {tab === 'properties' ? renderPropertiesPane() : renderAreaPane()}
+        </div>
+      </div>
+    </div>
+  );
+}