markupr 2.1.8

package/src/renderer/components/SettingsPanel.tsx

@@ -0,0 +1,217 @@
+/**
+ * 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

@@ -0,0 +1,347 @@
+/**
+ * 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

@@ -0,0 +1,86 @@
+/**
+ * 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;