refactor: migrate UpdateToast styles to CSS and update component layout

Author: grantiguess

src/components/UpdateToast.css

@@ -0,0 +1,60 @@
+.update-toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 99999;
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  padding: 14px 18px;
+  border-radius: 12px;
+  font-family: 'EmOne', sans-serif;
+  pointer-events: auto;
+  min-width: 220px;
+  will-change: transform, opacity;
+  transform: translateY(calc(100% + 30px));
+  opacity: 0;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
+
+  background-color: #260000;
+  border: 1px solid rgba(138, 0, 0, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.update-toast.visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.update-toast.dismissing {
+  transition: transform 0.25s ease-in, opacity 0.25s ease-in;
+}
+
+.update-toast-text {
+  flex: 1;
+}
+
+.update-toast-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #DEDADA;
+  white-space: nowrap;
+  user-select: none;
+  line-height: 1.3;
+}
+
+.update-toast-subtitle {
+  font-size: 12px;
+  font-weight: 400;
+  color: #BDB5B5;
+  user-select: none;
+  margin-top: 3px;
+  line-height: 1.3;
+}
+
+.update-toast-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}

src/components/UpdateToast.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { RotateCcw, X } from 'lucide-react';
 import PanelIconButton from './shared/PanelIconButton.jsx';
-import { useTheme } from '../hooks/useTheme.js';
+import './UpdateToast.css';
 
 /**
  * UpdateToast — bottom-right notification shown when an Electron auto-update
@@ -11,13 +11,12 @@ export default function UpdateToast() {
   const [updateInfo, setUpdateInfo] = useState(null);
   const [dismissed, setDismissed] = useState(false);
   const [visible, setVisible] = useState(false);
-  const theme = useTheme();
+  const [dismissing, setDismissing] = useState(false);
 
   useEffect(() => {
     if (!window.electron?.updater?.onUpdateReady) return;
     window.electron.updater.onUpdateReady((info) => {
       setUpdateInfo(info);
-      // Trigger slide-in on next frame
       requestAnimationFrame(() => setVisible(true));
     });
   }, []);
@@ -29,69 +28,43 @@ export default function UpdateToast() {
   };
 
   const handleDismiss = () => {
+    setDismissing(true);
     setVisible(false);
-    // Wait for slide-out animation before unmounting
     setTimeout(() => setDismissed(true), 250);
   };
 
-  const containerStyle = {
-    position: 'fixed',
-    bottom: 20,
-    right: 20,
-    zIndex: 99999,
-    display: 'flex',
-    alignItems: 'center',
-    gap: 10,
-    padding: '10px 14px',
-    borderRadius: 10,
-    backgroundColor: theme.darkMode ? '#1a1616' : '#f5f0f0',
-    border: `1px solid ${theme.canvas.border}`,
-    boxShadow: theme.darkMode
-      ? '0 4px 20px rgba(0,0,0,0.5)'
-      : '0 4px 20px rgba(0,0,0,0.15)',
-    transform: visible ? 'translateY(0)' : 'translateY(calc(100% + 30px))',
-    opacity: visible ? 1 : 0,
-    transition: 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease',
-    fontFamily: "'EmOne', sans-serif",
-    pointerEvents: 'auto',
-  };
-
-  const textStyle = {
-    fontSize: 13,
-    fontWeight: 600,
-    color: theme.canvas.textPrimary,
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-  };
-
-  const versionStyle = {
-    fontSize: 11,
-    color: theme.canvas.textSecondary,
-    marginLeft: 2,
-  };
+  const className = [
+    'update-toast',
+    visible && 'visible',
+    dismissing && 'dismissing',
+  ].filter(Boolean).join(' ');
 
   return (
-    <div style={containerStyle}>
-      <span style={textStyle}>
-        Restart to Update
-        {updateInfo.version && (
-          <span style={versionStyle}>v{updateInfo.version}</span>
-        )}
-      </span>
-      <PanelIconButton
-        icon={RotateCcw}
-        size={15}
-        onClick={handleRestart}
-        title="Restart and install update"
-        variant="outline"
-      />
-      <PanelIconButton
-        icon={X}
-        size={15}
-        onClick={handleDismiss}
-        title="Dismiss"
-        variant="ghost"
-      />
+    <div className={className}>
+      <div className="update-toast-text">
+        <div className="update-toast-title">
+          Version {updateInfo.version || 'update'} released
+        </div>
+        <div className="update-toast-subtitle">
+          Restart to update
+        </div>
+      </div>
+      <div className="update-toast-actions">
+        <PanelIconButton
+          icon={RotateCcw}
+          size={15}
+          onClick={handleRestart}
+          title="Restart and install update"
+          variant="outline"
+        />
+        <PanelIconButton
+          icon={X}
+          size={15}
+          onClick={handleDismiss}
+          title="Dismiss"
+          variant="ghost"
+        />
+      </div>
     </div>
   );
 }