documentation-hub 5.7.2

package/src/components/common/SplashScreen.tsx

@@ -0,0 +1,81 @@
+/**
+ * SplashScreen Component
+ * Displays an animated loading screen while the application initializes
+ * Provides visual feedback during context provider initialization
+ */
+
+import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
+
+interface SplashScreenProps {
+  message?: string;
+}
+
+export function SplashScreen({ message = 'Initializing Documentation Hub...' }: SplashScreenProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.3 }}
+        className="flex flex-col items-center space-y-6"
+      >
+        {/* Logo/Brand */}
+        <motion.div
+          animate={{
+            scale: [1, 1.05, 1],
+          }}
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+          className="text-4xl font-bold text-primary"
+        >
+          Documentation Hub
+        </motion.div>
+
+        {/* Loading Spinner */}
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{
+            duration: 1,
+            repeat: Infinity,
+            ease: 'linear',
+          }}
+        >
+          <Loader2 className="h-12 w-12 text-primary" />
+        </motion.div>
+
+        {/* Loading Message */}
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          className="text-sm text-muted-foreground"
+        >
+          {message}
+        </motion.p>
+
+        {/* Progress Dots */}
+        <div className="flex space-x-2">
+          {[0, 1, 2].map((i) => (
+            <motion.div
+              key={i}
+              animate={{
+                scale: [1, 1.3, 1],
+                opacity: [0.3, 1, 0.3],
+              }}
+              transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                delay: i * 0.2,
+              }}
+              className="h-2 w-2 rounded-full bg-primary"
+            />
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/src/components/common/Toast.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { X, CheckCircle2, AlertCircle, Info } from 'lucide-react';
+import { cn } from '@/utils/cn';
+import { Toast as ToastType } from '@/hooks/useToast';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col gap-1 p-2 sm:max-w-72',
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & {
+    variant?: 'default' | 'destructive' | 'success';
+  }
+>(({ className, variant = 'default', ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(
+        'group pointer-events-auto relative flex w-full items-center gap-2 overflow-hidden rounded-md border py-2 px-3 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full',
+        variant === 'default' && 'border-border/50 bg-background/95 backdrop-blur-sm text-foreground',
+        variant === 'destructive' && 'border-red-200 bg-red-50/95 backdrop-blur-sm text-red-800 dark:border-red-800/50 dark:bg-red-950/95 dark:text-red-200',
+        variant === 'success' && 'border-green-200 bg-green-50/95 backdrop-blur-sm text-green-800 dark:border-green-800/50 dark:bg-green-950/95 dark:text-green-200',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+// Status icon component for variants
+const ToastIcon = ({ variant }: { variant?: 'default' | 'destructive' | 'success' }) => {
+  if (variant === 'success') {
+    return <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-green-600 dark:text-green-400" />;
+  }
+  if (variant === 'destructive') {
+    return <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-600 dark:text-red-400" />;
+  }
+  return <Info className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />;
+};
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'ml-auto shrink-0 rounded p-0.5 opacity-50 transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-3 w-3" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn('text-xs font-medium leading-tight', className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-[11px] opacity-75 leading-tight', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+  ToastIcon,
+};
+
+// Toaster component that renders all toasts
+// Minimal design: small, unobtrusive notifications in bottom-right corner
+interface ToasterProps {
+  toasts: ToastType[];
+  onDismiss: (id: string) => void;
+}
+
+export function Toaster({ toasts, onDismiss }: ToasterProps) {
+  // Only show the most recent 3 toasts to avoid clutter
+  const visibleToasts = toasts.slice(-3);
+
+  return (
+    <ToastProvider swipeDirection="right">
+      {visibleToasts.map((toast) => (
+        <Toast key={toast.id} variant={toast.variant} duration={toast.duration}>
+          <ToastIcon variant={toast.variant} />
+          <div className="flex-1 min-w-0">
+            <ToastTitle className="truncate">{toast.title}</ToastTitle>
+            {toast.description && (
+              <ToastDescription className="line-clamp-2">{toast.description}</ToastDescription>
+            )}
+          </div>
+          <ToastClose onClick={() => onDismiss(toast.id)} />
+        </Toast>
+      ))}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

package/src/components/common/Tooltip.tsx

@@ -0,0 +1,79 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/utils/cn';
+import { forwardRef } from 'react';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md',
+        'animate-in fade-in-0 zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=top]:slide-in-from-bottom-2',
+        'border border-border',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// Convenience wrapper component for simple tooltips
+interface SimpleTooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  delayDuration?: number;
+  className?: string;
+  shortcut?: string;
+}
+
+function SimpleTooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  delayDuration = 300,
+  className,
+  shortcut,
+}: SimpleTooltipProps) {
+  return (
+    <Tooltip delayDuration={delayDuration}>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side} align={align} className={className}>
+        <div className="flex items-center gap-2">
+          <span>{content}</span>
+          {shortcut && (
+            <kbd className="px-1.5 py-0.5 text-[10px] font-mono bg-muted rounded border border-border">
+              {shortcut}
+            </kbd>
+          )}
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  SimpleTooltip,
+};

package/src/components/common/UpdateNotification.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Download,
+  X,
+  FileArchive,
+  Info,
+  ExternalLink,
+  AlertTriangle,
+  AlertCircle,
+} from 'lucide-react';
+import { Button } from './Button';
+
+export function UpdateNotification() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [updateInfo, setUpdateInfo] = useState<{ version: string; fallbackUsed?: boolean } | null>(
+    null
+  );
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isDownloaded, setIsDownloaded] = useState(false);
+  const [isFallbackMode, setIsFallbackMode] = useState(false);
+  const [isExtracting, setIsExtracting] = useState(false);
+  const [statusMessage, setStatusMessage] = useState<string>('');
+  const [downloadError, setDownloadError] = useState(false);
+  const [errorCount, setErrorCount] = useState(0);
+
+  useEffect(() => {
+    // Safely check if electronAPI is available (may not be in browser-only mode)
+    if (typeof window.electronAPI === 'undefined') {
+      console.warn('UpdateNotification: electronAPI not available (running in browser mode?)');
+      return;
+    }
+
+    // Listen for update available
+    const unsubAvailable = window.electronAPI.onUpdateAvailable(
+      (info: { version: string; releaseDate: string; releaseNotes: string }) => {
+        setUpdateInfo(info);
+        setIsVisible(true);
+      }
+    );
+
+    // Listen for download progress
+    const unsubProgress = window.electronAPI.onUpdateDownloadProgress(
+      (progress: {
+        bytesPerSecond: number;
+        percent: number;
+        transferred: number;
+        total: number;
+      }) => {
+        setDownloadProgress(progress.percent);
+      }
+    );
+
+    // Listen for update downloaded
+    const unsubDownloaded = window.electronAPI.onUpdateDownloaded(
+      (info: { version: string; releaseNotes: string; fallbackUsed?: boolean }) => {
+        setIsDownloading(false);
+        setIsExtracting(false);
+        setIsDownloaded(true);
+        setUpdateInfo({ ...info, fallbackUsed: info.fallbackUsed });
+        if (info.fallbackUsed) {
+          setStatusMessage('Update ready to install (downloaded as compressed archive)');
+        }
+      }
+    );
+
+    // Listen for errors
+    const unsubError = window.electronAPI.onUpdateError((error: { message: string }) => {
+      setIsDownloading(false);
+      setIsExtracting(false);
+      setErrorCount((prev) => prev + 1);
+
+      // Check for specific error types
+      const isCertError =
+        error.message?.toLowerCase().includes('certificate') ||
+        error.message?.toLowerCase().includes('issuer') ||
+        error.message?.toLowerCase().includes('unable to verify');
+
+      const isMutualTLS =
+        error.message?.toLowerCase().includes('econnreset') ||
+        error.message?.toLowerCase().includes('connection reset') ||
+        error.message?.toLowerCase().includes('mutual');
+
+      const isProxyError =
+        error.message?.toLowerCase().includes('proxy') ||
+        error.message?.toLowerCase().includes('firewall') ||
+        error.message?.toLowerCase().includes('localhost:8005');
+
+      // Show error state after multiple failures or if fallback also failed
+      if (error.message?.includes('Fallback download failed') || errorCount >= 2) {
+        setDownloadError(true);
+
+        if (isMutualTLS) {
+          setStatusMessage(
+            'Enterprise network detected (Mutual TLS required). Your network requires special certificates. Please use manual download or contact IT.'
+          );
+        } else if (isCertError) {
+          setStatusMessage(
+            'Certificate validation failed. Your organization may use custom certificates. Please download manually.'
+          );
+        } else if (isProxyError) {
+          setStatusMessage(
+            'Corporate proxy/firewall blocking download. Please use manual download or check with IT.'
+          );
+        } else {
+          setStatusMessage('Unable to download automatically. Please try manual download.');
+        }
+      } else if (isMutualTLS) {
+        setStatusMessage('Enterprise network detected. Trying PowerShell download method...');
+      } else if (isCertError) {
+        setStatusMessage('Certificate issue detected. Attempting alternative download method...');
+      } else {
+        setStatusMessage(`Connection issue: Trying alternative method...`);
+      }
+    });
+
+    // Listen for fallback mode activation
+    const unsubFallback = window.electronAPI.onUpdateFallbackMode?.((data: { message: string }) => {
+      setIsFallbackMode(true);
+      setStatusMessage(data.message || 'Using alternative download method...');
+    });
+
+    // Listen for extraction status
+    const unsubExtracting = window.electronAPI.onUpdateExtracting?.((data: { message: string }) => {
+      setIsExtracting(true);
+      setStatusMessage(data.message || 'Extracting update...');
+    });
+
+    // Listen for general status updates
+    const unsubStatus = window.electronAPI.onUpdateStatus?.((data: { message: string }) => {
+      setStatusMessage(data.message || '');
+    });
+
+    return () => {
+      unsubAvailable();
+      unsubProgress();
+      unsubDownloaded();
+      unsubError();
+      unsubFallback?.();
+      unsubExtracting?.();
+      unsubStatus?.();
+    };
+  }, [errorCount]); // Add errorCount to dependencies to track error state
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    setDownloadError(false); // Reset error state when retrying
+    setErrorCount(0); // Reset error count
+    try {
+      await window.electronAPI?.downloadUpdate();
+    } catch (error) {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleInstall = () => {
+    window.electronAPI?.installUpdate();
+  };
+
+  const handleDismiss = () => {
+    setIsVisible(false);
+  };
+
+  const handleManualDownload = async () => {
+    try {
+      // Use the new IPC handler to open download in system browser
+      await window.electronAPI?.openUpdateInBrowser();
+    } catch (error) {
+      // Fallback to direct window.open if IPC fails
+      const releaseUrl = updateInfo?.version
+        ? `https://github.com/ItMeDiaTech/Documentation_Hub/releases/tag/v${updateInfo.version}`
+        : 'https://github.com/ItMeDiaTech/Documentation_Hub/releases/latest';
+      window.open(releaseUrl, '_blank');
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 50 }}
+          className="fixed bottom-4 right-4 z-50"
+        >
+          <div className="bg-background border border-border rounded-lg shadow-lg p-4 w-96">
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex items-center gap-2">
+                {isFallbackMode ? (
+                  <FileArchive className="w-5 h-5 text-primary" />
+                ) : (
+                  <AlertCircle className="w-5 h-5 text-primary" />
+                )}
+                <h3 className="font-semibold">Update Available</h3>
+              </div>
+              <button
+                onClick={handleDismiss}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            {updateInfo && (
+              <p className="text-sm text-muted-foreground mb-4">
+                Version {updateInfo.version} is now available
+              </p>
+            )}
+
+            {statusMessage && (
+              <div className="flex items-center gap-2 mb-3">
+                <Info className="w-4 h-4 text-blue-500" />
+                <p className="text-xs text-muted-foreground">{statusMessage}</p>
+              </div>
+            )}
+
+            {!isDownloading && !isDownloaded && (
+              <div className="flex gap-2">
+                <Button
+                  onClick={handleDownload}
+                  variant="default"
+                  size="sm"
+                  className="flex-1"
+                  icon={<Download className="w-4 h-4" />}
+                >
+                  Download
+                </Button>
+                <Button onClick={handleDismiss} variant="outline" size="sm">
+                  Later
+                </Button>
+              </div>
+            )}
+
+            {isDownloading && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span>
+                    {isExtracting
+                      ? 'Extracting...'
+                      : isFallbackMode
+                        ? 'Downloading compressed update...'
+                        : 'Downloading...'}
+                  </span>
+                  {!isExtracting && (
+                    <span className="text-muted-foreground">{Math.round(downloadProgress)}%</span>
+                  )}
+                </div>
+                <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
+                  <div
+                    className={`h-full ${isExtracting ? 'bg-blue-500' : 'bg-primary'} transition-all duration-300`}
+                    style={{ width: isExtracting ? '100%' : `${downloadProgress}%` }}
+                  />
+                </div>
+                {isFallbackMode && !isExtracting && (
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Using compressed download to bypass network restrictions
+                  </p>
+                )}
+              </div>
+            )}
+
+            {isDownloaded && (
+              <div className="flex gap-2">
+                <Button
+                  onClick={handleInstall}
+                  variant="default"
+                  size="sm"
+                  className="flex-1 bg-green-600 hover:bg-green-700"
+                >
+                  Install & Restart
+                </Button>
+                <Button onClick={handleDismiss} variant="outline" size="sm">
+                  Later
+                </Button>
+              </div>
+            )}
+
+            {downloadError && !isDownloading && !isDownloaded && (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
+                  <AlertTriangle className="w-4 h-4" />
+                  <p className="text-xs font-medium">Network Security Issue</p>
+                </div>
+                {statusMessage && <p className="text-xs text-muted-foreground">{statusMessage}</p>}
+                <div className="flex gap-2">
+                  <Button
+                    onClick={handleManualDownload}
+                    variant="default"
+                    size="sm"
+                    className="flex-1"
+                    icon={<ExternalLink className="w-4 h-4" />}
+                  >
+                    Download Manually
+                  </Button>
+                  <Button
+                    onClick={handleDownload}
+                    variant="outline"
+                    size="sm"
+                    icon={<Download className="w-4 h-4" />}
+                  >
+                    Retry
+                  </Button>
+                </div>
+                <div className="bg-muted/50 rounded p-2 text-xs space-y-1">
+                  <p className="font-medium">Troubleshooting Tips:</p>
+                  <ul className="list-disc list-inside text-muted-foreground space-y-0.5">
+                    <li>Disconnect from VPN if connected</li>
+                    <li>Check with IT about proxy settings</li>
+                    <li>Use manual download for immediate access</li>
+                  </ul>
+                </div>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}