markupr 2.1.8 → 2.5.0

package/src/renderer/components/UpdateNotification.tsx

@@ -1,377 +0,0 @@
-/**
- * markupr - Update Notification Component
- *
- * Shows update status notifications to the user with:
- * - Update available banner with release notes
- * - Download progress indicator
- * - Ready to install prompt
- *
- * User controls when to download and when to restart.
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import type { UpdateStatusPayload, UpdateStatusType } from '../../shared/types';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-interface UpdateState {
-  status: UpdateStatusType;
-  version?: string;
-  releaseNotes?: string | null;
-  percent?: number;
-  message?: string;
-}
-
-// =============================================================================
-// Component
-// =============================================================================
-
-export function UpdateNotification(): React.ReactElement | null {
-  const [update, setUpdate] = useState<UpdateState>({ status: 'idle' });
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isDismissed, setIsDismissed] = useState(false);
-
-  // Subscribe to update status events
-  useEffect(() => {
-    let isMounted = true;
-    let unsubscribe: (() => void) | undefined;
-
-    const init = async (): Promise<void> => {
-      try {
-        const checkForUpdates = await window.markupr.settings.get('checkForUpdates');
-        if (!checkForUpdates || !isMounted) {
-          setIsDismissed(true);
-          return;
-        }
-      } catch {
-        // If settings can't be read, keep default behavior.
-      }
-
-      unsubscribe = window.markupr.updates.onStatus((status: UpdateStatusPayload) => {
-        // Local/manual builds may not ship updater metadata; suppress that noisy non-actionable state.
-        if (
-          status.status === 'error' &&
-          typeof status.message === 'string' &&
-          /(app-update\.yml|latest\.yml|enoent)/i.test(status.message)
-        ) {
-          setUpdate({ status: 'not-available' });
-          setIsDismissed(true);
-          return;
-        }
-
-        setUpdate({
-          status: status.status,
-          version: status.version,
-          releaseNotes: status.releaseNotes,
-          percent: status.percent,
-          message: status.message,
-        });
-
-        // Auto-expand for important states
-        if (status.status === 'available' || status.status === 'ready') {
-          setIsExpanded(true);
-          setIsDismissed(false);
-        }
-      });
-
-      window.markupr.updates.check();
-    };
-
-    void init();
-
-    return () => {
-      isMounted = false;
-      unsubscribe?.();
-    };
-  }, []);
-
-  // Handle download button click
-  const handleDownload = useCallback(() => {
-    window.markupr.updates.download();
-  }, []);
-
-  // Handle install/restart button click
-  const handleInstall = useCallback(() => {
-    window.markupr.updates.install();
-  }, []);
-
-  // Handle dismiss (Later button)
-  const handleDismiss = useCallback(() => {
-    setIsDismissed(true);
-  }, []);
-
-  // Handle toggle expand/collapse
-  const handleToggleExpand = useCallback(() => {
-    setIsExpanded((prev) => !prev);
-  }, []);
-
-  // Don't render if idle, checking, not-available, or dismissed
-  if (
-    update.status === 'idle' ||
-    update.status === 'checking' ||
-    update.status === 'not-available' ||
-    (update.status === 'error' && !update.message) ||
-    isDismissed
-  ) {
-    return null;
-  }
-
-  return (
-    <div className="fixed bottom-4 right-4 max-w-sm z-50 animate-slide-up">
-      {/* Update Available State */}
-      {update.status === 'available' && (
-        <div className="bg-gradient-to-br from-blue-600 to-blue-700 text-white p-4 rounded-xl shadow-2xl border border-blue-500/30">
-          {/* Header */}
-          <div className="flex items-start justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                  />
-                </svg>
-              </div>
-              <div>
-                <h4 className="font-semibold text-sm">Update Available</h4>
-                <p className="text-xs text-white/80">Version {update.version}</p>
-              </div>
-            </div>
-            <button
-              onClick={handleToggleExpand}
-              className="p-1 hover:bg-white/10 rounded transition-colors"
-              aria-label={isExpanded ? 'Collapse' : 'Expand'}
-            >
-              <svg
-                className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </button>
-          </div>
-
-          {/* Release Notes (Expandable) */}
-          {isExpanded && update.releaseNotes && (
-            <div className="mt-3 p-3 bg-black/20 rounded-lg text-sm max-h-32 overflow-y-auto">
-              <h5 className="font-medium text-xs text-white/70 uppercase tracking-wide mb-2">
-                {"What's New"}
-              </h5>
-              <div
-                className="prose prose-sm prose-invert max-w-none text-white/90"
-                dangerouslySetInnerHTML={{ __html: formatReleaseNotes(update.releaseNotes) }}
-              />
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="mt-4 flex gap-2">
-            <button
-              onClick={handleDownload}
-              className="flex-1 bg-white text-blue-600 px-4 py-2 rounded-lg font-medium text-sm hover:bg-blue-50 transition-colors"
-            >
-              Download Now
-            </button>
-            <button
-              onClick={handleDismiss}
-              className="px-4 py-2 text-white/70 hover:text-white text-sm transition-colors"
-            >
-              Later
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Downloading State */}
-      {update.status === 'downloading' && (
-        <div className="bg-gradient-to-br from-slate-800 to-slate-900 text-white p-4 rounded-xl shadow-2xl border border-slate-700/50">
-          <div className="flex items-center gap-3 mb-3">
-            <div className="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
-              <svg
-                className="w-5 h-5 text-blue-400 animate-pulse"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                />
-              </svg>
-            </div>
-            <div>
-              <h4 className="font-semibold text-sm">Downloading Update...</h4>
-              <p className="text-xs text-slate-400">Please wait</p>
-            </div>
-          </div>
-
-          {/* Progress Bar */}
-          <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
-            <div
-              className="h-full bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-300 ease-out"
-              style={{ width: `${update.percent || 0}%` }}
-            />
-          </div>
-          <p className="text-xs text-slate-400 mt-2 text-right">
-            {Math.round(update.percent || 0)}% complete
-          </p>
-        </div>
-      )}
-
-      {/* Ready to Install State */}
-      {update.status === 'ready' && (
-        <div className="bg-gradient-to-br from-green-600 to-emerald-700 text-white p-4 rounded-xl shadow-2xl border border-green-500/30">
-          <div className="flex items-center gap-3 mb-3">
-            <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-            </div>
-            <div>
-              <h4 className="font-semibold text-sm">Update Ready!</h4>
-              <p className="text-xs text-white/80">Version {update.version} is ready to install</p>
-            </div>
-          </div>
-
-          <p className="text-sm text-white/90 mb-4">
-            Restart markupr to apply the update. Your work will be saved.
-          </p>
-
-          <button
-            onClick={handleInstall}
-            className="w-full bg-white text-green-600 px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-green-50 transition-colors flex items-center justify-center gap-2"
-          >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-              />
-            </svg>
-            Restart Now
-          </button>
-        </div>
-      )}
-
-      {/* Error State */}
-      {update.status === 'error' && update.message && (
-        <div className="bg-gradient-to-br from-red-600 to-red-700 text-white p-4 rounded-xl shadow-2xl border border-red-500/30">
-          <div className="flex items-center gap-3 mb-2">
-            <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-            </div>
-            <div>
-              <h4 className="font-semibold text-sm">Update Failed</h4>
-              <p className="text-xs text-white/80">{update.message}</p>
-            </div>
-          </div>
-
-          <div className="flex gap-2 mt-3">
-            <button
-              onClick={() => window.markupr.updates.check()}
-              className="flex-1 bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg font-medium text-sm transition-colors"
-            >
-              Try Again
-            </button>
-            <button
-              onClick={handleDismiss}
-              className="px-4 py-2 text-white/70 hover:text-white text-sm transition-colors"
-            >
-              Dismiss
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// =============================================================================
-// Helper Functions
-// =============================================================================
-
-/**
- * Format release notes for display
- * Handles markdown-like formatting and converts to safe HTML
- */
-function formatReleaseNotes(notes: string): string {
-  // Simple markdown-like formatting
-  return notes
-    // Escape HTML
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    // Convert markdown headers
-    .replace(/^### (.+)$/gm, '<h3 class="font-semibold mt-2">$1</h3>')
-    .replace(/^## (.+)$/gm, '<h2 class="font-semibold mt-2 text-base">$1</h2>')
-    .replace(/^# (.+)$/gm, '<h1 class="font-bold mt-2 text-lg">$1</h1>')
-    // Convert bold
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    // Convert italic
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    // Convert bullet points
-    .replace(/^[-*] (.+)$/gm, '<li class="ml-4">$1</li>')
-    // Convert newlines to breaks
-    .replace(/\n/g, '<br />');
-}
-
-// =============================================================================
-// CSS Animation (add to your global styles or Tailwind config)
-// =============================================================================
-
-// Add this to your CSS or tailwind.config.js:
-// .animate-slide-up {
-//   animation: slideUp 0.3s ease-out;
-// }
-// @keyframes slideUp {
-//   from { opacity: 0; transform: translateY(20px); }
-//   to { opacity: 1; transform: translateY(0); }
-// }
-
-export default UpdateNotification;