feat: enhance UpdateNotification component with update checking and download functionality

src/app/components/update-notification/UpdateNotification.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, IconButton, Spinner, Text, Menu, PopOut, Button, config } from 'folds';
+import { Box, Spinner, Text, Menu, PopOut, Button, config } from 'folds';
 import * as css from './UpdateNotification.css';
 
 interface UpdateInfo {
@@ -14,6 +14,207 @@ interface DownloadProgress {
   total: number;
 }
 
+export function UpdateNotification() {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
+  const [downloading, setDownloading] = useState(false);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [checking, setChecking] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number; width: number; height: number } | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !(window as any).electron?.updater) {
+      return;
+    }
+
+    const { updater } = (window as any).electron;
+
+    updater.onUpdateAvailable((info: UpdateInfo) => {
+      console.log('Update available:', info.version);
+      setUpdateAvailable(true);
+      setUpdateInfo(info);
+      setDownloading(false);
+      setChecking(false);
+    });
+
+    updater.onUpdateDownloadProgress((progress: DownloadProgress) => {
+      setDownloadProgress(Math.round(progress.percent));
+    });
+  }, []);
+
+  const handleCheckForUpdates = async () => {
+    setChecking(true);
+    try {
+      const result = await (window as any).electron.updater.checkForUpdates();
+      console.log('Update check result:', result);
+      if (!result.success) {
+        console.warn('Update check failed:', result.error);
+        setChecking(false);
+        return;
+      }
+      setTimeout(() => {
+        if (!updateAvailable) {
+          setChecking(false);
+        }
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to check for updates:', error);
+      setChecking(false);
+    }
+  };
+
+  const handleUpdateAndRestart = async () => {
+    setDownloading(true);
+    setDownloadProgress(0);
+    setMenuAnchor(undefined);
+    try {
+      await (window as any).electron.updater.downloadAndInstallUpdate();
+    } catch (error) {
+      console.error('Failed to update:', error);
+      setDownloading(false);
+    }
+  };
+
+  const handleMenuToggle = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (menuAnchor) {
+      setMenuAnchor(undefined);
+    } else {
+      const rect = event.currentTarget.getBoundingClientRect();
+      setMenuAnchor({ x: rect.x, y: rect.y, width: rect.width, height: rect.height });
+    }
+  };
+
+  if (typeof window === 'undefined' || !(window as any).electron?.updater) {
+    return null;
+  }
+
+  if (!updateAvailable && !checking) {
+    return (
+      <div
+        className={css.CheckButtonContainer}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <button
+          className={css.CheckButton}
+          data-visible={isHovered}
+          onClick={handleCheckForUpdates}
+          aria-label="Check for updates"
+          title="Check for updates"
+          type="button"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 2V10M8 10L5 7M8 10L11 7"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M3 14H13"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      </div>
+    );
+  }
+
+  if (checking) {
+    return (
+      <button className={css.UpdateButton} disabled type="button">
+        <Spinner variant="Secondary" size="50" />
+      </button>
+    );
+  }
+
+  if (!updateAvailable) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        className={css.UpdateButton}
+        onClick={handleMenuToggle}
+        aria-label="Update available"
+        title="New version available"
+        type="button"
+      >
+        {downloading ? (
+          <Spinner variant="Secondary" size="50" />
+        ) : (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 2V10M8 10L5 7M8 10L11 7"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M3 14H13"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        )}
+      </button>
+
+      <PopOut
+        anchor={menuAnchor}
+        position="Bottom"
+        align="End"
+        offset={8}
+        content={
+          <Menu className={css.UpdateMenu}>
+            <Box direction="Column" gap="200" style={{ padding: config.space.S300 }}>
+              <Box direction="Column" gap="100">
+                <Text size="H5" priority="400">Update Available</Text>
+                {updateInfo && (
+                  <Text size="T200" priority="300">
+                    Version {updateInfo.version}
+                  </Text>
+                )}
+              </Box>
+              <Button
+                variant="Primary"
+                size="400"
+                onClick={handleUpdateAndRestart}
+                disabled={downloading}
+                fill="Solid"
+              >
+                <Text size="B400">
+                  {downloading ? `Downloading ${downloadProgress}%` : 'Update and Restart'}
+                </Text>
+              </Button>
+            </Box>
+          </Menu>
+        }
+      >
+        {null}
+      </PopOut>
+    </>
+  );
+}
+
+interface UpdateInfo {
+  version: string;
+  releaseNotes?: string;
+  releaseDate?: string;
+}
+
+interface DownloadProgress {
+  percent: number;
+  transferred: number;
+  total: number;
+}
+
 export function UpdateNotification() {
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);