markupr 2.1.8 → 2.5.0

package/src/renderer/components/ProcessingOverlay.tsx

@@ -1,157 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { useTheme } from '../hooks/useTheme';
-
-interface ProcessingOverlayProps {
-  percent: number;
-  step: string;
-  onHide?: () => void;
-}
-
-export const ProcessingOverlay: React.FC<ProcessingOverlayProps> = ({
-  percent,
-  step,
-  onHide,
-}) => {
-  const { colors } = useTheme();
-  const boundedPercent = Math.max(0, Math.min(100, Math.round(percent)));
-
-  // Announce progress at 25% milestones for screen readers
-  const lastAnnouncedRef = useRef(0);
-  const [announcement, setAnnouncement] = useState('');
-  useEffect(() => {
-    const milestone = Math.floor(boundedPercent / 25) * 25;
-    if (milestone > lastAnnouncedRef.current && milestone > 0) {
-      lastAnnouncedRef.current = milestone;
-      setAnnouncement(`Processing ${milestone}% complete. ${step}`);
-    }
-  }, [boundedPercent, step]);
-
-  return (
-    <div
-      role="status"
-      aria-label={`Processing ${boundedPercent}% complete`}
-      style={{
-        position: 'fixed',
-        left: '50%',
-        top: 8,
-        transform: 'translateX(-50%)',
-        zIndex: 9999,
-        width: 'min(304px, calc(100vw - 16px))',
-        display: 'grid',
-        gap: 8,
-        padding: '8px 10px',
-        borderRadius: 12,
-        border: '1px solid rgba(160, 176, 206, 0.2)',
-        background:
-          'linear-gradient(150deg, rgba(14, 22, 36, 0.82), rgba(10, 17, 29, 0.74))',
-        boxShadow: '0 6px 20px rgba(0, 0, 0, 0.25)',
-        backdropFilter: 'blur(16px) saturate(1.12)',
-        WebkitBackdropFilter: 'blur(16px) saturate(1.12)',
-        WebkitAppRegion: 'no-drag',
-      } as React.CSSProperties & { WebkitAppRegion?: string }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 8,
-        }}
-      >
-        <span
-          style={{
-            fontSize: 11,
-            letterSpacing: '0.05em',
-            textTransform: 'uppercase',
-            color: 'rgba(178, 194, 218, 0.88)',
-            fontWeight: 700,
-          }}
-        >
-          Processing
-        </span>
-        {onHide && (
-          <button
-            type="button"
-            onClick={onHide}
-            style={{
-              border: '1px solid rgba(159, 173, 196, 0.28)',
-              background: 'rgba(153, 168, 190, 0.16)',
-              color: 'rgba(224, 233, 249, 0.95)',
-              borderRadius: 999,
-              padding: '2px 8px',
-              fontSize: 11,
-              fontWeight: 600,
-              cursor: 'pointer',
-            }}
-          >
-            Hide
-          </button>
-        )}
-      </div>
-
-      <div style={{ display: 'grid', gap: 5 }}>
-        <div
-          style={{
-            height: 6,
-            borderRadius: 999,
-            overflow: 'hidden',
-            background: 'rgba(81, 104, 136, 0.34)',
-          }}
-        >
-          <div
-            style={{
-              width: `${boundedPercent}%`,
-              height: '100%',
-              borderRadius: 999,
-              background: 'linear-gradient(90deg, var(--accent-default) 0%, var(--text-link) 100%)',
-              transition: 'width 460ms cubic-bezier(0.23, 1, 0.32, 1)',
-            }}
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 10,
-          }}
-        >
-          <span
-            style={{
-              fontFamily:
-                'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-              fontVariantNumeric: 'tabular-nums',
-              fontSize: 11,
-              color: colors.text.link,
-              fontWeight: 700,
-              minWidth: 40,
-            }}
-          >
-            {boundedPercent}%
-          </span>
-          <span
-            style={{
-              fontSize: 11,
-              color: 'rgba(204, 216, 237, 0.92)',
-              textAlign: 'right',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              flex: 1,
-            }}
-            title={step}
-          >
-            {step}
-          </span>
-        </div>
-      </div>
-
-      {/* Screen reader progress announcements at 25% milestones */}
-      <div aria-live="polite" aria-atomic="true" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
-        {announcement}
-      </div>
-    </div>
-  );
-};
-
-export default ProcessingOverlay;

package/src/renderer/components/RecordingOverlay.tsx

@@ -1,423 +0,0 @@
-/**
- * Recording Overlay Component
- *
- * A compact floating indicator showing:
- * - Recording duration (MM:SS)
- * - Pulsing red recording dot
- * - Stop button
- * - +1 badge animation on screenshot capture
- *
- * Design: Premium, subtle glass HUD that stays readable without feeling heavy
- * Position persists across sessions via localStorage
- */
-
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { CompactAudioIndicator } from './AudioWaveform';
-import { useTheme } from '../hooks/useTheme';
-
-interface RecordingOverlayProps {
-  duration: number; // seconds
-  screenshotCount: number;
-  onStop: () => void;
-  isDarkMode?: boolean;
-  audioLevel?: number;
-  isVoiceActive?: boolean;
-  isPaused?: boolean;
-  manualShortcut?: string;
-  toggleShortcut?: string;
-  pauseShortcut?: string;
-}
-
-const DEFAULT_WIDTH = 300;
-
-function formatCompactShortcut(accelerator: string, isMac: boolean): string {
-  if (!accelerator || accelerator.trim().length === 0) {
-    return isMac ? '⌘⇧?' : 'Ctrl+Shift+?';
-  }
-
-  const normalized = accelerator
-    .replace(/CommandOrControl/gi, isMac ? 'Command' : 'Control')
-    .replace(/CmdOrCtrl/gi, isMac ? 'Command' : 'Control');
-  const keys = normalized.split('+').map((part) => part.trim()).filter(Boolean);
-
-  if (!isMac) {
-    return keys
-      .map((key) => {
-        const lower = key.toLowerCase();
-        if (lower === 'control' || lower === 'ctrl') return 'Ctrl';
-        if (lower === 'alt' || lower === 'option') return 'Alt';
-        if (lower === 'shift') return 'Shift';
-        if (lower === 'command' || lower === 'cmd') return 'Ctrl';
-        return key.length === 1 ? key.toUpperCase() : key;
-      })
-      .join('+');
-  }
-
-  const symbolMap: Record<string, string> = {
-    command: '⌘',
-    cmd: '⌘',
-    control: '⌃',
-    ctrl: '⌃',
-    alt: '⌥',
-    option: '⌥',
-    shift: '⇧',
-    enter: '↩',
-    return: '↩',
-    space: '␣',
-  };
-
-  return keys
-    .map((key) => {
-      const lower = key.toLowerCase();
-      return symbolMap[lower] || (key.length === 1 ? key.toUpperCase() : key);
-    })
-    .join('');
-}
-
-export const RecordingOverlay: React.FC<RecordingOverlayProps> = ({
-  duration,
-  screenshotCount,
-  onStop,
-  isDarkMode = false,
-  audioLevel = 0,
-  isVoiceActive = false,
-  isPaused = false,
-  manualShortcut = 'CommandOrControl+Shift+S',
-  toggleShortcut = 'CommandOrControl+Shift+F',
-  pauseShortcut = 'CommandOrControl+Shift+P',
-}) => {
-  const [showBadge, setShowBadge] = useState(false);
-  const [badgeKey, setBadgeKey] = useState(0);
-  const [displayedMicPercent, setDisplayedMicPercent] = useState(0);
-
-  const prevCountRef = useRef(screenshotCount);
-  const micPercentTargetRef = useRef(0);
-  const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().includes('MAC');
-
-  // Format duration as MM:SS
-  const formatDuration = useCallback((seconds: number): string => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  }, []);
-
-  // Show +1 badge animation when screenshot count increases
-  useEffect(() => {
-    if (screenshotCount > prevCountRef.current) {
-      setShowBadge(true);
-      setBadgeKey((prev) => prev + 1); // Force re-render for animation
-      const timer = setTimeout(() => setShowBadge(false), 1200);
-      prevCountRef.current = screenshotCount;
-      return () => clearTimeout(timer);
-    }
-    prevCountRef.current = screenshotCount;
-  }, [screenshotCount]);
-
-  // Dynamic styles based on theme
-  const { colors } = useTheme();
-  const theme = {
-    bg: isDarkMode
-      ? 'rgba(12, 18, 30, 0.44)'
-      : 'rgba(244, 247, 252, 0.42)',
-    border: isDarkMode ? 'rgba(177, 192, 214, 0.22)' : 'rgba(95, 106, 121, 0.14)',
-    text: colors.text.primary,
-    textMuted: colors.text.secondary,
-    hintBg: isDarkMode ? 'rgba(67, 77, 97, 0.22)' : 'rgba(218, 225, 235, 0.24)',
-    stopBg: colors.status.error,
-    stopHover: '#d92f25',
-    pauseBg: isDarkMode ? 'rgba(255, 159, 10, 0.26)' : 'rgba(255, 159, 10, 0.2)',
-    badgeBg: colors.status.success,
-    recordingDot: colors.status.error,
-    micActive: colors.accent.default,
-    micIdle: colors.text.tertiary,
-  };
-  const manualShortcutText = formatCompactShortcut(manualShortcut, isMac);
-  const toggleShortcutText = formatCompactShortcut(toggleShortcut, isMac);
-  const pauseShortcutText = formatCompactShortcut(pauseShortcut, isMac);
-  const normalizedAudioLevel = Math.max(0, Math.min(1, audioLevel));
-  const visualAudioLevel = isPaused
-    ? 0
-    : isVoiceActive
-    ? Math.max(0.08, 1 - Math.exp(-normalizedAudioLevel * 2.4))
-    : normalizedAudioLevel * 0.35;
-  const micPercentTarget = !isPaused && isVoiceActive
-    ? Math.min(96, Math.max(8, Math.round(visualAudioLevel * 100)))
-    : 0;
-
-  useEffect(() => {
-    micPercentTargetRef.current = micPercentTarget;
-  }, [micPercentTarget]);
-
-  useEffect(() => {
-    let frame = 0;
-
-    const tick = () => {
-      setDisplayedMicPercent((previous) => {
-        const target = micPercentTargetRef.current;
-        const delta = target - previous;
-        if (Math.abs(delta) < 1) {
-          return target;
-        }
-        return previous + delta * 0.2;
-      });
-      frame = window.requestAnimationFrame(tick);
-    };
-
-    frame = window.requestAnimationFrame(tick);
-    return () => {
-      window.cancelAnimationFrame(frame);
-    };
-  }, []);
-
-  return (
-    <>
-      {/* pulseScale, badgeFloat keyframes provided by animations.css */}
-
-      <div
-        role="status"
-        aria-live="polite"
-        aria-label="Recording in progress"
-        style={{
-          position: 'fixed',
-          left: '50%',
-          top: 8,
-          transform: 'translateX(-50%)',
-          zIndex: 9999,
-          display: 'grid',
-          gap: 3,
-          width: `min(${DEFAULT_WIDTH}px, calc(100vw - 16px))`,
-          justifyItems: 'center',
-          userSelect: 'none',
-          transition: 'box-shadow 0.2s ease',
-          // Electron-specific: prevent window drag
-          WebkitAppRegion: 'no-drag',
-        } as React.CSSProperties & { WebkitAppRegion?: string }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 7,
-            width: '100%',
-            padding: '3px 7px',
-            background: theme.bg,
-            border: `1px solid ${theme.border}`,
-            borderRadius: 999,
-            boxShadow: '0 1px 2px rgba(8, 12, 19, 0.12)',
-            backdropFilter: 'blur(24px) saturate(1.05)',
-            WebkitBackdropFilter: 'blur(24px) saturate(1.05)',
-          }}
-        >
-          {/* Recording dot */}
-          <div
-            style={{
-              position: 'relative',
-              width: 10,
-              height: 10,
-            }}
-          >
-            <div
-              style={{
-                position: 'absolute',
-                inset: 0,
-                border: `2px solid ${theme.recordingDot}`,
-                borderRadius: '50%',
-                opacity: 0.25,
-              }}
-            />
-            <div
-              style={{
-                position: 'relative',
-                width: 10,
-                height: 10,
-                backgroundColor: theme.recordingDot,
-                borderRadius: '50%',
-                animation: 'pulseScale 1.5s ease-in-out infinite',
-              }}
-            />
-          </div>
-
-          {/* Duration display */}
-          <span
-            style={{
-              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-              fontSize: 11,
-              fontWeight: 600,
-              fontVariantNumeric: 'tabular-nums',
-              color: theme.text,
-              minWidth: 40,
-              textAlign: 'center',
-              letterSpacing: '0.02em',
-            }}
-          >
-            {formatDuration(duration)}
-          </span>
-
-          {/* Live microphone indicator */}
-          <div
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 5,
-              borderRadius: 999,
-              padding: '2px 5px',
-              background: isPaused ? theme.pauseBg : theme.hintBg,
-              color: theme.textMuted,
-              fontSize: 8,
-              fontWeight: 600,
-              minWidth: 78,
-            }}
-          >
-            <CompactAudioIndicator
-              audioLevel={visualAudioLevel}
-              isVoiceActive={isVoiceActive}
-              accentColor={theme.micActive}
-              inactiveColor={theme.micIdle}
-              barCount={11}
-              barWidth={2.6}
-              barGap={1.2}
-              meterHeight={16}
-              minBarHeight={4}
-              maxBarHeight={16}
-            />
-            <span
-              style={{
-                color: isPaused ? colors.status.warning : isVoiceActive ? theme.text : theme.textMuted,
-                fontVariantNumeric: 'tabular-nums',
-                minWidth: 36,
-                textAlign: 'right',
-              }}
-            >
-              {isPaused ? 'Paused' : isVoiceActive ? `${Math.round(displayedMicPercent)}%` : 'Mic'}
-            </span>
-          </div>
-
-          {/* Screenshot count */}
-          <span
-            style={{
-              marginLeft: 'auto',
-              fontSize: 8,
-              color: theme.textMuted,
-              borderRadius: 999,
-              padding: '2px 5px',
-              background: theme.hintBg,
-            }}
-            title="Manual shot markers confirmed in this session"
-          >
-            {screenshotCount} marked
-          </span>
-
-          {/* Stop button */}
-          <button
-            type="button"
-            onClick={onStop}
-            style={{
-              padding: '3px 6px',
-              backgroundColor: theme.stopBg,
-              border: 'none',
-              borderRadius: 9,
-              color: colors.text.inverse,
-              fontSize: 8.5,
-              fontWeight: 700,
-              cursor: 'pointer',
-              transition: 'all 0.15s ease',
-              outline: 'none',
-              letterSpacing: '0.01em',
-              whiteSpace: 'nowrap',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = theme.stopHover;
-              e.currentTarget.style.transform = 'translateY(-1px)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = theme.stopBg;
-              e.currentTarget.style.transform = 'scale(1)';
-            }}
-            onMouseDown={(e) => {
-              e.currentTarget.style.transform = 'translateY(0)';
-            }}
-            onMouseUp={(e) => {
-              e.currentTarget.style.transform = 'translateY(-1px)';
-            }}
-          >
-            Stop
-          </button>
-        </div>
-
-        {/* Shortcut reminders */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 5,
-            fontSize: 8,
-            color: theme.textMuted,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '100%',
-            justifyContent: 'center',
-          }}
-        >
-          <span
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                borderRadius: 999,
-                padding: '1px 5px',
-                background: theme.hintBg,
-              }}
-            >
-            <strong style={{ fontWeight: 700 }}>Mark {manualShortcutText}</strong>
-          </span>
-          <span
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                borderRadius: 999,
-                padding: '1px 5px',
-                background: theme.hintBg,
-              }}
-            >
-            <strong style={{ fontWeight: 700 }}>Stop {toggleShortcutText}</strong>
-          </span>
-          <span
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                borderRadius: 999,
-                padding: '1px 5px',
-                background: theme.hintBg,
-              }}
-            >
-            <strong style={{ fontWeight: 700 }}>Pause {pauseShortcutText}</strong>
-          </span>
-        </div>
-
-        {/* +1 Badge (animated, appears on screenshot) */}
-        {showBadge && (
-          <span
-            key={badgeKey}
-            style={{
-              position: 'absolute',
-              top: -8,
-              right: 50,
-              padding: '2px 6px',
-              backgroundColor: theme.badgeBg,
-              color: colors.text.inverse,
-              fontSize: 10,
-              fontWeight: 700,
-              borderRadius: 10,
-              animation: 'badgeFloat 1.2s ease-out forwards',
-              pointerEvents: 'none',
-            }}
-          >
-            +1
-          </span>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default RecordingOverlay;