markupr 2.1.8

package/src/renderer/components/Tooltip.tsx

@@ -0,0 +1,370 @@
+/**
+ * Premium Tooltip Component
+ *
+ * Animated tooltip with multiple placement options and arrow indicators.
+ * Uses CSS animations for smooth enter/exit transitions.
+ */
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  /** Tooltip content */
+  content: React.ReactNode;
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Placement relative to trigger */
+  placement?: TooltipPlacement;
+  /** Delay before showing (ms) */
+  showDelay?: number;
+  /** Delay before hiding (ms) */
+  hideDelay?: number;
+  /** Offset from trigger (px) */
+  offset?: number;
+  /** Disable the tooltip */
+  disabled?: boolean;
+  /** Show arrow indicator */
+  showArrow?: boolean;
+  /** Maximum width */
+  maxWidth?: number;
+  /** Custom z-index */
+  zIndex?: number;
+}
+
+// ============================================================================
+// Tooltip Component
+// ============================================================================
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  placement = 'top',
+  showDelay = 200,
+  hideDelay = 0,
+  offset = 8,
+  disabled = false,
+  showArrow = true,
+  maxWidth = 240,
+  zIndex = 1000,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  const triggerRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const showTimeoutRef = useRef<NodeJS.Timeout>();
+  const hideTimeoutRef = useRef<NodeJS.Timeout>();
+
+  // Calculate tooltip position
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - offset;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + offset;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - offset;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + offset;
+        break;
+    }
+
+    // Keep tooltip within viewport
+    const padding = 8;
+    left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
+    top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
+
+    setPosition({ top, left });
+  }, [placement, offset]);
+
+  // Show tooltip
+  const handleShow = useCallback(() => {
+    if (disabled) return;
+
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+
+    showTimeoutRef.current = setTimeout(() => {
+      setIsAnimatingOut(false);
+      setIsVisible(true);
+    }, showDelay);
+  }, [disabled, showDelay]);
+
+  // Hide tooltip
+  const handleHide = useCallback(() => {
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+    }
+
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsAnimatingOut(true);
+      setTimeout(() => {
+        setIsVisible(false);
+        setIsAnimatingOut(false);
+      }, 100); // Match exit animation duration
+    }, hideDelay);
+  }, [hideDelay]);
+
+  // Update position when visible
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+      // Update on scroll/resize
+      window.addEventListener('scroll', updatePosition, true);
+      window.addEventListener('resize', updatePosition);
+      return () => {
+        window.removeEventListener('scroll', updatePosition, true);
+        window.removeEventListener('resize', updatePosition);
+      };
+    }
+  }, [isVisible, updatePosition]);
+
+  // Cleanup timeouts
+  useEffect(() => {
+    return () => {
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+
+  // Get arrow styles based on placement
+  const getArrowStyles = (): React.CSSProperties => {
+    const base: React.CSSProperties = {
+      position: 'absolute',
+      width: 8,
+      height: 8,
+      backgroundColor: 'rgba(17, 24, 39, 0.95)',
+      transform: 'rotate(45deg)',
+    };
+
+    switch (placement) {
+      case 'top':
+        return { ...base, bottom: -4, left: '50%', marginLeft: -4 };
+      case 'bottom':
+        return { ...base, top: -4, left: '50%', marginLeft: -4 };
+      case 'left':
+        return { ...base, right: -4, top: '50%', marginTop: -4 };
+      case 'right':
+        return { ...base, left: -4, top: '50%', marginTop: -4 };
+    }
+  };
+
+  // Clone child with event handlers
+  const trigger = React.cloneElement(children, {
+    ref: triggerRef,
+    onMouseEnter: (e: React.MouseEvent) => {
+      handleShow();
+      children.props.onMouseEnter?.(e);
+    },
+    onMouseLeave: (e: React.MouseEvent) => {
+      handleHide();
+      children.props.onMouseLeave?.(e);
+    },
+    onFocus: (e: React.FocusEvent) => {
+      handleShow();
+      children.props.onFocus?.(e);
+    },
+    onBlur: (e: React.FocusEvent) => {
+      handleHide();
+      children.props.onBlur?.(e);
+    },
+  });
+
+  return (
+    <>
+      {trigger}
+      {isVisible && (
+        <div
+          ref={tooltipRef}
+          role="tooltip"
+          style={{
+            ...styles.tooltip,
+            top: position.top,
+            left: position.left,
+            maxWidth,
+            zIndex,
+          }}
+          className={isAnimatingOut ? 'ff-tooltip-exit' : `ff-tooltip-enter${placement === 'bottom' ? '' : '-top'}`}
+        >
+          {content}
+          {showArrow && <div style={getArrowStyles()} />}
+        </div>
+      )}
+    </>
+  );
+};
+
+// ============================================================================
+// Hotkey Tooltip (for keyboard shortcuts)
+// ============================================================================
+
+export interface HotkeyTooltipProps extends Omit<TooltipProps, 'content'> {
+  /** Action description */
+  action: string;
+  /** Keyboard shortcut keys */
+  keys: string[];
+}
+
+export const HotkeyTooltip: React.FC<HotkeyTooltipProps> = ({
+  action,
+  keys,
+  children,
+  ...props
+}) => {
+  const content = (
+    <div style={styles.hotkeyContent}>
+      <span style={styles.hotkeyAction}>{action}</span>
+      <div style={styles.hotkeyKeys}>
+        {keys.map((key, index) => (
+          <React.Fragment key={key}>
+            <kbd style={styles.kbd}>{key}</kbd>
+            {index < keys.length - 1 && <span style={styles.keySeparator}>+</span>}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <Tooltip content={content} {...props}>
+      {children}
+    </Tooltip>
+  );
+};
+
+// ============================================================================
+// Status Tooltip (colored based on status)
+// ============================================================================
+
+export type TooltipStatus = 'info' | 'success' | 'warning' | 'error';
+
+export interface StatusTooltipProps extends Omit<TooltipProps, 'content'> {
+  /** Tooltip message */
+  message: string;
+  /** Status type for color */
+  status?: TooltipStatus;
+}
+
+const STATUS_COLORS: Record<TooltipStatus, string> = {
+  info: 'var(--status-info)',
+  success: 'var(--status-success)',
+  warning: 'var(--status-warning)',
+  error: 'var(--status-error)',
+};
+
+export const StatusTooltip: React.FC<StatusTooltipProps> = ({
+  message,
+  status = 'info',
+  children,
+  ...props
+}) => {
+  const content = (
+    <div style={styles.statusContent}>
+      <div
+        style={{
+          ...styles.statusDot,
+          backgroundColor: STATUS_COLORS[status],
+        }}
+      />
+      <span>{message}</span>
+    </div>
+  );
+
+  return (
+    <Tooltip content={content} {...props}>
+      {children}
+    </Tooltip>
+  );
+};
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles: Record<string, React.CSSProperties> = {
+  tooltip: {
+    position: 'fixed',
+    padding: '8px 12px',
+    backgroundColor: 'rgba(17, 24, 39, 0.95)',
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    fontWeight: 500,
+    borderRadius: 8,
+    boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+    backdropFilter: 'blur(8px)',
+    WebkitBackdropFilter: 'blur(8px)',
+    pointerEvents: 'none',
+    whiteSpace: 'nowrap',
+  },
+  hotkeyContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+  },
+  hotkeyAction: {
+    color: 'var(--text-secondary)',
+  },
+  hotkeyKeys: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+  },
+  kbd: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 20,
+    padding: '2px 6px',
+    backgroundColor: 'rgba(55, 65, 81, 0.8)',
+    borderRadius: 4,
+    fontSize: 11,
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+    fontWeight: 600,
+    color: 'var(--text-primary)',
+    border: '1px solid rgba(75, 85, 99, 0.5)',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+  },
+  keySeparator: {
+    color: 'var(--text-tertiary)',
+    fontSize: 10,
+  },
+  statusContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+    flexShrink: 0,
+  },
+};
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export default Tooltip;

package/src/renderer/components/TranscriptionPreview.tsx

@@ -0,0 +1,183 @@
+/**
+ * Transcript Results Viewer
+ *
+ * Displays completed transcript segments after post-processing.
+ * This replaces the previous real-time subtitle overlay with a static
+ * display of finalized transcript content.
+ *
+ * Features:
+ * - Static display of completed transcript segments
+ * - Scrollable container for long transcripts
+ * - Position options retained for layout flexibility
+ * - Premium typography with optional dark mode
+ */
+
+import React, { useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme';
+
+const MAX_RENDER_SEGMENTS = 100;
+
+export interface TranscriptSegment {
+  /** Unique identifier for the segment */
+  id: string;
+  /** The transcribed text */
+  text: string;
+  /** Start time in milliseconds (relative to session start) */
+  startTime: number;
+  /** End time in milliseconds (relative to session start) */
+  endTime: number;
+  /** Transcription confidence (0-1) */
+  confidence: number;
+}
+
+export interface TranscriptionPreviewProps {
+  /** Completed transcript segments to display */
+  segments: TranscriptSegment[];
+  /** Whether the component is visible */
+  isVisible: boolean;
+  /** Callback when user toggles visibility */
+  onToggle?: () => void;
+  /** Whether to use dark mode styling */
+  isDarkMode?: boolean;
+  /** Maximum height before scrolling (px) */
+  maxHeight?: number;
+}
+
+function formatTimestamp(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+}
+
+export const TranscriptionPreview: React.FC<TranscriptionPreviewProps> = ({
+  segments,
+  isVisible,
+  onToggle,
+  isDarkMode = false,
+  maxHeight = 300,
+}) => {
+  const { colors } = useTheme();
+  const visibleSegments = useMemo(
+    () => (segments.length > MAX_RENDER_SEGMENTS ? segments.slice(-MAX_RENDER_SEGMENTS) : segments),
+    [segments]
+  );
+
+  const theme = useMemo(
+    () => ({
+      bg: isDarkMode ? 'rgba(0, 0, 0, 0.80)' : 'rgba(255, 255, 255, 0.94)',
+      text: colors.text.primary,
+      textMuted: colors.text.secondary,
+      border: isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(60, 60, 67, 0.15)',
+      timestampBg: isDarkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(120, 120, 128, 0.08)',
+    }),
+    [isDarkMode]
+  );
+
+  if (!isVisible || segments.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        borderRadius: 12,
+        border: `1px solid ${theme.border}`,
+        backgroundColor: theme.bg,
+        overflow: 'hidden',
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      }}
+      role="region"
+      aria-label="Transcript results"
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '10px 14px',
+          borderBottom: `1px solid ${theme.border}`,
+        }}
+      >
+        <span
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+            color: theme.textMuted,
+          }}
+        >
+          Transcript ({segments.length} segment{segments.length !== 1 ? 's' : ''})
+          {segments.length > visibleSegments.length && ` · showing latest ${visibleSegments.length}`}
+        </span>
+        {onToggle && (
+          <button
+            type="button"
+            onClick={onToggle}
+            style={{
+              fontSize: 11,
+              color: theme.textMuted,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '2px 6px',
+            }}
+          >
+            Hide
+          </button>
+        )}
+      </div>
+
+      <div
+        style={{
+          maxHeight,
+          overflowY: 'auto',
+          padding: '8px 14px 12px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+        }}
+      >
+        {visibleSegments.map((segment) => (
+          <div key={segment.id} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+            <span
+              style={{
+                fontSize: 10,
+                fontWeight: 500,
+                color: theme.textMuted,
+                fontVariantNumeric: 'tabular-nums',
+                whiteSpace: 'nowrap',
+                padding: '3px 6px',
+                borderRadius: 4,
+                backgroundColor: theme.timestampBg,
+                flexShrink: 0,
+                marginTop: 2,
+              }}
+            >
+              {formatTimestamp(segment.startTime)}
+            </span>
+            <p
+              style={{
+                fontSize: 13,
+                lineHeight: 1.45,
+                color: theme.text,
+                margin: 0,
+              }}
+            >
+              {segment.text}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Legacy alias - TranscriptionPreviewAnimated is no longer used.
+ * Kept as a re-export of the static viewer for backwards compatibility
+ * with any imports that reference it.
+ */
+export const TranscriptionPreviewAnimated = TranscriptionPreview;
+
+export default TranscriptionPreview;