chore: refactoring toast

src/renderer/src/app.tsx

@@ -29,6 +29,7 @@ import { downloadSourcesWorker } from "./workers";
 import { downloadSourcesTable } from "./dexie";
 import { useSubscription } from "./hooks/use-subscription";
 import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
+import { SPACING_UNIT } from "./theme.css";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -212,22 +213,22 @@ export function App() {
     const id = crypto.randomUUID();
     const channel = new BroadcastChannel(`download_sources:sync:${id}`);
 
-    channel.onmessage = (event: MessageEvent<number>) => {
+    channel.onmessage = async (event: MessageEvent<number>) => {
       const newRepacksCount = event.data;
       window.electron.publishNewRepacksNotification(newRepacksCount);
       updateRepacks();
 
-      downloadSourcesTable.toArray().then((downloadSources) => {
-        downloadSources
-          .filter((source) => !source.fingerprint)
-          .forEach((downloadSource) => {
-            window.electron
-              .putDownloadSource(downloadSource.objectIds)
-              .then(({ fingerprint }) => {
-                downloadSourcesTable.update(downloadSource.id, { fingerprint });
-              });
-          });
-      });
+      const downloadSources = await downloadSourcesTable.toArray();
+
+      downloadSources
+        .filter((source) => !source.fingerprint)
+        .forEach(async (downloadSource) => {
+          const { fingerprint } = await window.electron.putDownloadSource(
+            downloadSource.objectIds
+          );
+
+          downloadSourcesTable.update(downloadSource.id, { fingerprint });
+        });
     };
 
     downloadSourcesWorker.postMessage(["SYNC_DOWNLOAD_SOURCES", id]);
@@ -250,12 +251,22 @@ export function App() {
         </div>
       )}
 
-      <Toast
-        visible={toast.visible}
-        message={toast.message}
-        type={toast.type}
-        onClose={handleToastClose}
-      />
+      <div
+        style={{
+          position: "absolute",
+          bottom: `${26 + SPACING_UNIT * 2}px`,
+          right: "16px",
+          maxWidth: "420px",
+          width: "420px",
+        }}
+      >
+        <Toast
+          visible={toast.visible}
+          message={toast.message}
+          type={toast.type}
+          onClose={handleToastClose}
+        />
+      </div>
 
       <HydraCloudModal
         visible={isHydraCloudModalVisible}

src/renderer/src/components/toast/toast.css.ts

@@ -3,46 +3,54 @@ import { keyframes, style } from "@vanilla-extract/css";
 import { SPACING_UNIT, vars } from "../../theme.css";
 import { recipe } from "@vanilla-extract/recipes";
 
-const TOAST_HEIGHT = 80;
-
-export const slideIn = keyframes({
-  "0%": { transform: `translateY(${TOAST_HEIGHT + SPACING_UNIT * 2}px)` },
-  "100%": { transform: "translateY(0)" },
+export const enter = keyframes({
+  "0%": {
+    opacity: 0,
+    transform: "translateY(100%)",
+  },
+  "100%": {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
 });
 
-export const slideOut = keyframes({
-  "0%": { transform: `translateY(0)` },
-  "100%": { transform: `translateY(${TOAST_HEIGHT + SPACING_UNIT * 2}px)` },
+export const exit = keyframes({
+  "0%": {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
+  "100%": {
+    opacity: 0,
+    transform: "translateY(100%)",
+  },
 });
 
 export const toast = recipe({
   base: {
-    animationDuration: "0.2s",
+    animationDuration: "0.15s",
     animationTimingFunction: "ease-in-out",
-    maxHeight: TOAST_HEIGHT,
-    position: "fixed",
+    maxWidth: "420px",
+    position: "absolute",
     backgroundColor: vars.color.background,
     borderRadius: "4px",
     border: `solid 1px ${vars.color.border}`,
-    right: `${SPACING_UNIT * 2}px`,
-    /* Bottom panel height + 16px */
-    bottom: `${26 + SPACING_UNIT * 2}px`,
+    right: "0",
+    bottom: "0",
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
     zIndex: vars.zIndex.toast,
-    maxWidth: "500px",
   },
   variants: {
     closing: {
       true: {
-        animationName: slideOut,
-        transform: `translateY(${TOAST_HEIGHT + SPACING_UNIT * 2}px)`,
+        animationName: exit,
+        transform: "translateY(100%)",
       },
       false: {
-        animationName: slideIn,
-        transform: `translateY(0)`,
+        animationName: enter,
+        transform: "translateY(0)",
       },
     },
   },
@@ -58,7 +66,7 @@ export const toastContent = style({
 
 export const progress = style({
   width: "100%",
-  height: "5px",
+  height: "3px",
   "::-webkit-progress-bar": {
     backgroundColor: vars.color.darkBackground,
   },
@@ -70,8 +78,10 @@ export const progress = style({
 export const closeButton = style({
   color: vars.color.body,
   cursor: "pointer",
-  padding: "0",
-  margin: "0",
+  transition: "all ease 0.15s",
+  ":hover": {
+    color: vars.color.muted,
+  },
 });
 
 export const successIcon = style({

src/renderer/src/components/toast/toast.tsx

@@ -13,12 +13,19 @@ export interface ToastProps {
   visible: boolean;
   message: string;
   type: "success" | "error" | "warning";
+  duration?: number;
   onClose: () => void;
 }
 
 const INITIAL_PROGRESS = 100;
 
-export function Toast({ visible, message, type, onClose }: ToastProps) {
+export function Toast({
+  visible,
+  message,
+  type,
+  duration = 5000,
+  onClose,
+}: Readonly<ToastProps>) {
   const [isClosing, setIsClosing] = useState(false);
   const [progress, setProgress] = useState(INITIAL_PROGRESS);
 
@@ -31,7 +38,7 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
 
     closingAnimation.current = requestAnimationFrame(
       function animateClosing(time) {
-        if (time - zero <= 200) {
+        if (time - zero <= 150) {
           closingAnimation.current = requestAnimationFrame(animateClosing);
         } else {
           onClose();
@@ -43,17 +50,13 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
   useEffect(() => {
     if (visible) {
       const zero = performance.now();
-
       progressAnimation.current = requestAnimationFrame(
         function animateProgress(time) {
           const elapsed = time - zero;
-
-          const progress = Math.min(elapsed / 2500, 1);
+          const progress = Math.min(elapsed / duration, 1);
           const currentValue =
             INITIAL_PROGRESS + (0 - INITIAL_PROGRESS) * progress;
-
           setProgress(currentValue);
-
           if (progress < 1) {
             progressAnimation.current = requestAnimationFrame(animateProgress);
           } else {
@@ -70,34 +73,56 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
         setIsClosing(false);
       };
     }
-
     return () => {};
-  }, [startAnimateClosing, visible]);
+  }, [startAnimateClosing, duration, visible]);
 
   if (!visible) return null;
 
   return (
     <div className={styles.toast({ closing: isClosing })}>
       <div className={styles.toastContent}>
-        <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
-          {type === "success" && (
-            <CheckCircleFillIcon className={styles.successIcon} />
-          )}
-
-          {type === "error" && <XCircleFillIcon className={styles.errorIcon} />}
-
-          {type === "warning" && <AlertIcon className={styles.warningIcon} />}
-          <span style={{ fontWeight: "bold" }}>{message}</span>
-        </div>
-
-        <button
-          type="button"
-          className={styles.closeButton}
-          onClick={startAnimateClosing}
-          aria-label="Close toast"
+        <div
+          style={{
+            display: "flex",
+            gap: `${SPACING_UNIT}px`,
+            flexDirection: "column",
+          }}
         >
-          <XIcon />
-        </button>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: `${SPACING_UNIT}px`,
+            }}
+          >
+            {type === "success" && (
+              <CheckCircleFillIcon className={styles.successIcon} />
+            )}
+
+            {type === "error" && (
+              <XCircleFillIcon className={styles.errorIcon} />
+            )}
+
+            {type === "warning" && <AlertIcon className={styles.warningIcon} />}
+
+            <span style={{ fontWeight: "bold", flex: 1 }}>{message}</span>
+
+            <button
+              type="button"
+              className={styles.closeButton}
+              onClick={startAnimateClosing}
+              aria-label="Close toast"
+            >
+              <XIcon />
+            </button>
+          </div>
+
+          <p>
+            This is a really really long message that should wrap to the next
+            line
+          </p>
+        </div>
       </div>
 
       <progress className={styles.progress} value={progress} max={100} />