markupr 2.1.8 → 2.5.0

package/src/renderer/components/SettingsPanel.tsx

@@ -1,217 +0,0 @@
-/**
- * markupr Settings Panel
- *
- * Thin composition shell. State lives in useSettingsPanel hook,
- * primitives in ./primitives/, tabs in ./settings/.
- */
-
-import React, { useMemo } from 'react';
-import { useTheme } from '../hooks/useTheme';
-import { DonateButton } from './DonateButton';
-import { GeneralTab, RecordingTab, AppearanceTab, HotkeysTab, AdvancedTab, TABS } from './settings';
-import type { SettingsTab } from './settings';
-import { styles } from './settings/settingsStyles';
-import { useSettingsPanel } from './settings/useSettingsPanel';
-
-interface SettingsPanelProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialTab?: SettingsTab;
-}
-
-export const SettingsPanel: React.FC<SettingsPanelProps> = ({
-  isOpen,
-  onClose,
-  initialTab = 'general',
-}) => {
-  const { colors } = useTheme();
-  const s = useSettingsPanel(isOpen, onClose, initialTab);
-
-  const renderTabContent = useMemo(() => {
-    switch (s.activeTab) {
-      case 'general':
-        return <GeneralTab settings={s.settings} onSettingChange={s.handleSettingChange} onResetSection={s.resetGeneralSection} />;
-      case 'recording':
-        return <RecordingTab settings={s.settings} audioDevices={s.audioDevices} onSettingChange={s.handleSettingChange} onResetSection={s.resetRecordingSection} />;
-      case 'appearance':
-        return <AppearanceTab settings={s.settings} onSettingChange={s.handleSettingChange} onResetSection={s.resetAppearanceSection} />;
-      case 'hotkeys':
-        return <HotkeysTab settings={s.settings} onHotkeyChange={s.handleHotkeyChange} onResetSection={s.resetHotkeysSection} />;
-      case 'advanced':
-        return (
-          <AdvancedTab
-            settings={s.settings}
-            openAiApiKey={s.openAiApiKey}
-            anthropicApiKey={s.anthropicApiKey}
-            onSettingChange={s.handleSettingChange}
-            onOpenAiApiKeyChange={s.handleOpenAiApiKeyChange}
-            onToggleOpenAiApiKeyVisibility={s.handleToggleOpenAiApiKeyVisibility}
-            onTestOpenAiApiKey={s.handleTestOpenAiApiKey}
-            onAnthropicApiKeyChange={s.handleAnthropicApiKeyChange}
-            onToggleAnthropicApiKeyVisibility={s.handleToggleAnthropicApiKeyVisibility}
-            onTestAnthropicApiKey={s.handleTestAnthropicApiKey}
-            onClearAllData={s.handleClearAllData}
-            onExportSettings={s.handleExportSettings}
-            onImportSettings={s.handleImportSettings}
-            onResetSection={s.resetAdvancedSection}
-          />
-        );
-      default:
-        return null;
-    }
-  }, [
-    s.activeTab, s.settings, s.audioDevices, s.openAiApiKey, s.anthropicApiKey,
-    s.handleSettingChange, s.handleHotkeyChange,
-    s.handleOpenAiApiKeyChange, s.handleToggleOpenAiApiKeyVisibility, s.handleTestOpenAiApiKey,
-    s.handleAnthropicApiKeyChange, s.handleToggleAnthropicApiKeyVisibility, s.handleTestAnthropicApiKey,
-    s.handleClearAllData, s.handleExportSettings, s.handleImportSettings,
-    s.resetGeneralSection, s.resetRecordingSection, s.resetAppearanceSection, s.resetHotkeysSection, s.resetAdvancedSection,
-  ]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div style={styles.overlay}>
-      <div style={styles.backdrop} onClick={onClose} />
-
-      <div
-        ref={s.panelRef}
-        style={{
-          ...styles.panel,
-          opacity: s.isAnimating ? 0 : 1,
-          transform: s.isAnimating ? 'scale(0.95) translateY(10px)' : 'scale(1) translateY(0)',
-        }}
-      >
-        {/* Header */}
-        <div style={styles.header}>
-          <div style={styles.headerTitleWrap}>
-            <h2 style={styles.headerTitle}>Settings</h2>
-            {!s.hasRequiredByokKeys && (
-              <button
-                type="button"
-                style={styles.byokBadge}
-                onClick={() => s.setActiveTab('advanced')}
-                title="Open BYOK key setup"
-              >
-                BYOK Setup Required
-              </button>
-            )}
-          </div>
-          <button style={styles.closeButton} onClick={onClose} aria-label="Close settings">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M5 5l10 10M15 5l-10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Content */}
-        <div style={{ ...styles.content, flexDirection: s.isCompact ? 'column' : 'row' }}>
-          <nav style={{ ...styles.sidebar, ...(s.isCompact ? styles.sidebarCompact : {}) }}>
-            {TABS.map((tab) => (
-              <button
-                key={tab.id}
-                style={{
-                  ...styles.tabButton,
-                  ...(s.isCompact ? styles.tabButtonCompact : {}),
-                  backgroundColor: s.activeTab === tab.id ? 'rgba(10, 132, 255, 0.16)' : 'transparent',
-                  color: s.activeTab === tab.id ? colors.text.link : colors.text.tertiary,
-                  borderColor: s.activeTab === tab.id ? 'rgba(10, 132, 255, 0.32)' : 'transparent',
-                }}
-                onClick={() => s.setActiveTab(tab.id)}
-                aria-selected={s.activeTab === tab.id}
-              >
-                {tab.icon}
-                <span style={styles.tabLabel}>{tab.label}</span>
-              </button>
-            ))}
-          </nav>
-
-          <div style={{ ...styles.tabPanel, ...(s.isCompact ? styles.tabPanelCompact : {}) }}>
-            {renderTabContent}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div style={styles.footer}>
-          <div style={styles.footerLeft}>
-            <span style={styles.footerText}>
-              markupr {s.appVersion ? `v${s.appVersion}` : ''} {s.hasChanges && <span style={styles.savedIndicator}>Changes saved</span>}
-            </span>
-            <DonateButton />
-          </div>
-          <button
-            style={styles.resetAllButton}
-            onClick={async () => {
-              await s.resetGeneralSection();
-              await s.resetRecordingSection();
-              await s.resetAppearanceSection();
-              await s.resetHotkeysSection();
-              await s.resetAdvancedSection();
-            }}
-          >
-            Reset All to Defaults
-          </button>
-        </div>
-      </div>
-
-      {/* spin keyframe provided by animations.css; form element styles below */}
-      <style>
-        {`
-          input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: var(--accent-default);
-            cursor: pointer;
-            border: 2px solid var(--bg-primary);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          }
-
-          input[type="range"]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 4px;
-            background: rgba(124, 137, 160, 0.4);
-            border-radius: 2px;
-          }
-
-          select {
-            -webkit-appearance: none;
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238f9db5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 12px center;
-            padding-right: 36px;
-          }
-
-          select:focus {
-            outline: none;
-            border-color: var(--accent-default);
-          }
-
-          input[type="color"] {
-            -webkit-appearance: none;
-            appearance: none;
-            border: none;
-            width: 32px;
-            height: 32px;
-            padding: 0;
-            cursor: pointer;
-          }
-
-          input[type="color"]::-webkit-color-swatch-wrapper {
-            padding: 0;
-          }
-
-          input[type="color"]::-webkit-color-swatch {
-            border: none;
-            border-radius: 50%;
-          }
-        `}
-      </style>
-    </div>
-  );
-};
-
-export default SettingsPanel;

package/src/renderer/components/Skeleton.tsx

@@ -1,347 +0,0 @@
-/**
- * Skeleton Loading Components
- *
- * Premium shimmer-effect loading placeholders that match the markupr design system.
- * Use these to indicate loading states while maintaining visual hierarchy.
- */
-
-import React from 'react';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface SkeletonProps {
-  /** Width of the skeleton (CSS value) */
-  width?: string | number;
-  /** Height of the skeleton (CSS value) */
-  height?: string | number;
-  /** Border radius (CSS value or true for default 8px) */
-  rounded?: boolean | string | number;
-  /** Use circular shape */
-  circle?: boolean;
-  /** Animation type */
-  animation?: 'shimmer' | 'pulse' | 'none';
-  /** Additional CSS class */
-  className?: string;
-  /** Additional inline styles */
-  style?: React.CSSProperties;
-}
-
-interface SkeletonTextProps {
-  /** Number of lines to render */
-  lines?: number;
-  /** Width of the last line (creates natural variation) */
-  lastLineWidth?: string | number;
-  /** Gap between lines */
-  gap?: number;
-  /** Animation type */
-  animation?: 'shimmer' | 'pulse' | 'none';
-}
-
-interface SkeletonCardProps {
-  /** Show thumbnail placeholder */
-  showThumbnail?: boolean;
-  /** Number of text lines */
-  lines?: number;
-  /** Show avatar */
-  showAvatar?: boolean;
-  /** Animation type */
-  animation?: 'shimmer' | 'pulse' | 'none';
-}
-
-// ============================================================================
-// Base Skeleton Component
-// ============================================================================
-
-export const Skeleton: React.FC<SkeletonProps> = ({
-  width,
-  height,
-  rounded = true,
-  circle = false,
-  animation = 'shimmer',
-  className = '',
-  style = {},
-}) => {
-  const getBorderRadius = () => {
-    if (circle) return '50%';
-    if (rounded === true) return 8;
-    if (rounded === false) return 0;
-    return rounded;
-  };
-
-  const animationClass =
-    animation === 'shimmer'
-      ? 'ff-skeleton'
-      : animation === 'pulse'
-      ? 'ff-skeleton-pulse'
-      : '';
-
-  return (
-    <div
-      className={`${animationClass} ${className}`}
-      style={{
-        width: width ?? '100%',
-        height: height ?? 16,
-        borderRadius: getBorderRadius(),
-        backgroundColor: 'rgba(55, 65, 81, 0.3)',
-        ...style,
-      }}
-    />
-  );
-};
-
-// ============================================================================
-// Skeleton Text (Multiple lines)
-// ============================================================================
-
-export const SkeletonText: React.FC<SkeletonTextProps> = ({
-  lines = 3,
-  lastLineWidth = '70%',
-  gap = 8,
-  animation = 'shimmer',
-}) => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap }}>
-      {Array.from({ length: lines }).map((_, index) => (
-        <Skeleton
-          key={index}
-          width={index === lines - 1 ? lastLineWidth : '100%'}
-          height={16}
-          animation={animation}
-          style={{
-            animationDelay: `${index * 100}ms`,
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-// ============================================================================
-// Skeleton Avatar
-// ============================================================================
-
-export const SkeletonAvatar: React.FC<{
-  size?: number;
-  animation?: 'shimmer' | 'pulse' | 'none';
-}> = ({ size = 40, animation = 'shimmer' }) => {
-  return <Skeleton width={size} height={size} circle animation={animation} />;
-};
-
-// ============================================================================
-// Skeleton Thumbnail
-// ============================================================================
-
-export const SkeletonThumbnail: React.FC<{
-  width?: string | number;
-  aspectRatio?: string;
-  animation?: 'shimmer' | 'pulse' | 'none';
-}> = ({ width = '100%', aspectRatio = '16/9', animation = 'shimmer' }) => {
-  return (
-    <Skeleton
-      width={width}
-      height="auto"
-      rounded={8}
-      animation={animation}
-      style={{
-        aspectRatio,
-      }}
-    />
-  );
-};
-
-// ============================================================================
-// Skeleton Button
-// ============================================================================
-
-export const SkeletonButton: React.FC<{
-  width?: string | number;
-  height?: number;
-  animation?: 'shimmer' | 'pulse' | 'none';
-}> = ({ width = 120, height = 40, animation = 'shimmer' }) => {
-  return <Skeleton width={width} height={height} rounded={8} animation={animation} />;
-};
-
-// ============================================================================
-// Skeleton Card (Composite)
-// ============================================================================
-
-export const SkeletonCard: React.FC<SkeletonCardProps> = ({
-  showThumbnail = true,
-  lines = 2,
-  showAvatar = false,
-  animation = 'shimmer',
-}) => {
-  return (
-    <div style={styles.card}>
-      {showThumbnail && (
-        <SkeletonThumbnail animation={animation} />
-      )}
-      <div style={styles.cardContent}>
-        {showAvatar && (
-          <div style={styles.avatarRow}>
-            <SkeletonAvatar size={32} animation={animation} />
-            <div style={{ flex: 1 }}>
-              <Skeleton width="60%" height={14} animation={animation} />
-            </div>
-          </div>
-        )}
-        <Skeleton
-          width="80%"
-          height={18}
-          animation={animation}
-          style={{ marginBottom: 8 }}
-        />
-        <SkeletonText lines={lines} animation={animation} />
-      </div>
-    </div>
-  );
-};
-
-// ============================================================================
-// Skeleton List Item
-// ============================================================================
-
-export const SkeletonListItem: React.FC<{
-  showIcon?: boolean;
-  showAction?: boolean;
-  animation?: 'shimmer' | 'pulse' | 'none';
-}> = ({ showIcon = true, showAction = false, animation = 'shimmer' }) => {
-  return (
-    <div style={styles.listItem}>
-      {showIcon && <SkeletonAvatar size={24} animation={animation} />}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <Skeleton width="70%" height={14} animation={animation} />
-        <Skeleton width="40%" height={12} animation={animation} />
-      </div>
-      {showAction && <SkeletonButton width={80} height={32} animation={animation} />}
-    </div>
-  );
-};
-
-// ============================================================================
-// Skeleton Feedback Item (markupr specific)
-// ============================================================================
-
-export const SkeletonFeedbackItem: React.FC<{
-  showThumbnail?: boolean;
-  animation?: 'shimmer' | 'pulse' | 'none';
-}> = ({ showThumbnail = true, animation = 'shimmer' }) => {
-  return (
-    <div style={styles.feedbackItem}>
-      {/* Drag handle */}
-      <div style={styles.dragHandle}>
-        <Skeleton width={12} height={20} rounded={2} animation={animation} />
-      </div>
-
-      {/* Content */}
-      <div style={{ flex: 1 }}>
-        {/* Header with tags */}
-        <div style={styles.feedbackHeader}>
-          <Skeleton width={60} height={16} animation={animation} />
-          <Skeleton width={50} height={20} rounded={6} animation={animation} />
-          <Skeleton width={50} height={20} rounded={6} animation={animation} />
-        </div>
-
-        {/* Transcription */}
-        <SkeletonText lines={2} lastLineWidth="60%" gap={6} animation={animation} />
-
-        {/* Thumbnails */}
-        {showThumbnail && (
-          <div style={styles.thumbnailRow}>
-            <Skeleton width={60} height={45} rounded={6} animation={animation} />
-            <Skeleton width={60} height={45} rounded={6} animation={animation} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// ============================================================================
-// Skeleton Window Source (Window Selector specific)
-// ============================================================================
-
-export const SkeletonWindowSource: React.FC<{
-  animation?: 'shimmer' | 'pulse' | 'none';
-}> = ({ animation = 'shimmer' }) => {
-  return (
-    <div style={styles.windowSource}>
-      <Skeleton width={104} height={64} rounded={8} animation={animation} />
-      <Skeleton width="80%" height={11} animation={animation} />
-      <Skeleton width={12} height={12} circle animation={animation} />
-    </div>
-  );
-};
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles: Record<string, React.CSSProperties> = {
-  card: {
-    backgroundColor: 'rgba(31, 41, 55, 0.6)',
-    borderRadius: 12,
-    border: '1px solid rgba(75, 85, 99, 0.3)',
-    overflow: 'hidden',
-  },
-  cardContent: {
-    padding: 16,
-  },
-  avatarRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-    marginBottom: 12,
-  },
-  listItem: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-    padding: '12px 16px',
-    backgroundColor: 'rgba(31, 41, 55, 0.4)',
-    borderRadius: 8,
-  },
-  feedbackItem: {
-    display: 'flex',
-    gap: 12,
-    padding: 16,
-    backgroundColor: 'rgba(31, 41, 55, 0.6)',
-    borderRadius: 12,
-    border: '1px solid rgba(75, 85, 99, 0.3)',
-  },
-  dragHandle: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 20,
-  },
-  feedbackHeader: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-    marginBottom: 10,
-  },
-  thumbnailRow: {
-    display: 'flex',
-    gap: 8,
-    marginTop: 12,
-  },
-  windowSource: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    border: '2px solid transparent',
-    backgroundColor: 'rgba(255, 255, 255, 0.04)',
-    gap: 8,
-  },
-};
-
-// ============================================================================
-// Exports
-// ============================================================================
-
-export default Skeleton;

package/src/renderer/components/StatusIndicator.tsx

@@ -1,86 +0,0 @@
-/**
- * Status Indicator Component
- *
- * Shows the current recording/processing status with visual feedback
- */
-
-import React from 'react';
-import type { SessionStatus } from '../../shared/types';
-import { useTheme } from '../hooks/useTheme';
-
-interface StatusIndicatorProps {
-  status: SessionStatus;
-  error?: string | null;
-}
-
-const StatusIndicator: React.FC<StatusIndicatorProps> = ({ status, error }) => {
-  const { colors } = useTheme();
-
-  const getColor = (): string => {
-    switch (status) {
-      case 'recording':
-        return colors.status.error;
-      case 'processing':
-        return colors.status.warning;
-      case 'complete':
-        return colors.status.success;
-      case 'error':
-        return colors.status.error;
-      default:
-        return '#8e8e93';
-    }
-  };
-
-  const getText = (): string => {
-    switch (status) {
-      case 'recording':
-        return 'Recording...';
-      case 'processing':
-        return 'Processing...';
-      case 'complete':
-        return 'Copied to clipboard!';
-      case 'error':
-        return error || 'Error occurred';
-      default:
-        return 'Ready';
-    }
-  };
-
-  const color = getColor();
-
-  return (
-    <div style={styles.container} role="status" aria-live={status === 'error' ? 'assertive' : 'polite'}>
-      <div
-        style={{
-          ...styles.dot,
-          backgroundColor: color,
-          boxShadow: status === 'recording' ? `0 0 8px ${color}` : 'none',
-          animation: status === 'recording' ? 'pulse 1.5s ease-in-out infinite' : 'none',
-        }}
-      />
-      <span style={styles.text}>{getText()}</span>
-      {/* pulse keyframe provided by animations.css */}
-    </div>
-  );
-};
-
-const styles: Record<string, React.CSSProperties> = {
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-  },
-  dot: {
-    width: 10,
-    height: 10,
-    borderRadius: '50%',
-    transition: 'all 0.2s ease',
-  },
-  text: {
-    color: '#eef3ff',
-    fontSize: 13,
-    fontWeight: 500,
-  },
-};
-
-export default StatusIndicator;