@plannotator/ui 0.22.0

package/components/FloatingQuickLabelPicker.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { type QuickLabel, getQuickLabels } from '../utils/quickLabels';
+import { QuickLabelDropdown } from './QuickLabelDropdown';
+
+interface FloatingQuickLabelPickerProps {
+  anchorEl: HTMLElement;
+  /** Mouse coordinates at the moment of selection — picker appears here */
+  cursorHint?: { x: number; y: number };
+  onSelect: (label: QuickLabel) => void;
+  onDismiss: () => void;
+}
+
+const PICKER_WIDTH = 192;
+const GAP = 6;
+const VIEWPORT_PADDING = 12;
+
+function computePosition(
+  anchorEl: HTMLElement,
+  cursorHint?: { x: number; y: number },
+): { top: number; left: number; flipAbove: boolean } {
+  const rect = anchorEl.getBoundingClientRect();
+
+  // Vertical: use anchor rect for above/below decision + placement
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const flipAbove = spaceBelow < 220;
+  const top = flipAbove ? rect.top - GAP : rect.bottom + GAP;
+
+  // Horizontal: prefer cursor x, fallback to anchor right edge
+  let left: number;
+  if (cursorHint) {
+    // Anchor left edge of picker at cursor x, nudge left slightly so
+    // the first row's text is directly under the pointer
+    left = cursorHint.x - 28;
+  } else {
+    // Fallback: right edge of anchor (where selection likely ended)
+    left = rect.right - PICKER_WIDTH / 2;
+  }
+
+  // Clamp to viewport
+  left = Math.max(VIEWPORT_PADDING, Math.min(left, window.innerWidth - PICKER_WIDTH - VIEWPORT_PADDING));
+
+  return { top, left, flipAbove };
+}
+
+export const FloatingQuickLabelPicker: React.FC<FloatingQuickLabelPickerProps> = ({
+  anchorEl,
+  cursorHint,
+  onSelect,
+  onDismiss,
+}) => {
+  const [position, setPosition] = useState<{ top: number; left: number; flipAbove: boolean } | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const quickLabels = useMemo(() => getQuickLabels(), []);
+
+  // Position tracking
+  useEffect(() => {
+    const update = () => setPosition(computePosition(anchorEl, cursorHint));
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+    };
+  }, [anchorEl, cursorHint]);
+
+  // Keyboard: 1-9/0 or Alt+1-9/0 to apply label, Escape to dismiss
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onDismiss();
+        return;
+      }
+      // Accept bare digit or Alt+digit — picker is open so digits mean labels
+      const isDigit = (e.code >= 'Digit1' && e.code <= 'Digit9') || e.code === 'Digit0';
+      if (isDigit && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        const digit = parseInt(e.code.slice(5), 10);
+        const index = digit === 0 ? 9 : digit - 1;
+        if (index < quickLabels.length) {
+          onSelect(quickLabels[index]);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onDismiss, onSelect, quickLabels]);
+
+  // Click outside to dismiss
+  useEffect(() => {
+    const handlePointerDown = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onDismiss();
+      }
+    };
+    // Defer to avoid catching the triggering click
+    const timer = setTimeout(() => {
+      document.addEventListener('pointerdown', handlePointerDown, true);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, [onDismiss]);
+
+  if (!position) return null;
+
+  const animName = position.flipAbove ? 'qlp-in-above' : 'qlp-in-below';
+
+  return createPortal(
+    <div
+      ref={ref}
+      data-quick-label-picker
+      data-floating-picker="true"
+      className="fixed z-[100]"
+      style={{
+        top: position.top,
+        left: position.left,
+        width: PICKER_WIDTH,
+        ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
+        animation: `${animName} 0.12s ease-out`,
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <style>{`
+        @keyframes qlp-in-below {
+          from { opacity: 0; transform: translateY(-4px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes qlp-in-above {
+          from { opacity: 0; transform: translateY(-100%) translateY(4px); }
+          to   { opacity: 1; transform: translateY(-100%); }
+        }
+      `}</style>
+
+      <div className="bg-popover border border-border/60 rounded-lg shadow-xl overflow-hidden">
+        <QuickLabelDropdown labels={quickLabels} onSelect={onSelect} animate />
+      </div>
+    </div>,
+    document.body
+  );
+};

package/components/GitHubIcon.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const GitHubIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+    />
+  </svg>
+);

package/components/GitLabIcon.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+/**
+ * GitLab tanuki icon using official SVG paths.
+ * Uses currentColor + opacity layers for theme-adaptive rendering.
+ */
+export const GitLabIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="90 90 200 195"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M282.83 170.73l-.27-.69-26.14-68.22a6.81 6.81 0 00-2.69-3.24 7 7 0 00-8 .43 7 7 0 00-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 00-2.32-3.53 7 7 0 00-8-.43 6.87 6.87 0 00-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0016.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 009.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0016.08-56.04z"
+    />
+    <path
+      d="M282.83 170.73l-.27-.69a88.3 88.3 0 00-35.15 15.8L190 229.25c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 .1-.08a48.56 48.56 0 0016.1-56.08z"
+      opacity="0.7"
+    />
+    <path
+      d="M153.43 256.89l19.7 14.91 12 9.06a8.07 8.07 0 009.76 0l12-9.06 19.7-14.91s-17.04-12.89-36.59-27.64c-19.55 14.75-36.57 27.64-36.57 27.64z"
+      opacity="0.85"
+    />
+    <path
+      d="M132.58 185.84A88.19 88.19 0 0097.44 170l-.26.69a48.54 48.54 0 0016.1 56.1l.09.07.24.17 39.82 29.82s17-12.85 36.57-27.64z"
+      opacity="0.7"
+    />
+  </svg>
+);