chore: refactoring toast

src/main/events/user-preferences/update-user-preferences.ts

@@ -3,6 +3,7 @@ import { registerEvent } from "../register-event";
 import type { UserPreferences } from "@types";
 import i18next from "i18next";
 import { db, levelKeys } from "@main/level";
+import { Crypto } from "@main/services";
 
 const updateUserPreferences = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -21,6 +22,12 @@ const updateUserPreferences = async (
     i18next.changeLanguage(preferences.language);
   }
 
+  if (preferences.realDebridApiToken) {
+    preferences.realDebridApiToken = Crypto.encrypt(
+      preferences.realDebridApiToken
+    );
+  }
+
   await db.put<string, UserPreferences>(
     levelKeys.userPreferences,
     {

src/main/services/download/download-manager.ts

@@ -25,17 +25,20 @@ export class DownloadManager {
   ) {
     PythonRPC.spawn(
       download?.status === "active"
-        ? await this.getDownloadPayload(download).catch(() => undefined)
+        ? await this.getDownloadPayload(download).catch((err) => {
+            logger.error("Error getting download payload", err);
+            return undefined;
+          })
         : undefined,
       downloadsToSeed?.map((download) => ({
-        game_id: `${download.shop}-${download.objectId}`,
+        game_id: levelKeys.game(download.shop, download.objectId),
         url: download.uri,
         save_path: download.downloadPath,
       }))
     );
 
     if (download) {
-      this.downloadingGameId = `${download.shop}-${download.objectId}`;
+      this.downloadingGameId = levelKeys.game(download.shop, download.objectId);
     }
   }
 

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} />

src/stories/button.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@renderer/components";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// Primary button (default)
+export const Primary: Story = {
+  args: {
+    children: "Primary Button",
+    theme: "primary",
+  },
+};
+
+// Outline variant
+export const Outline: Story = {
+  args: {
+    children: "Outline Button",
+    theme: "outline",
+  },
+};
+
+// Dark variant
+export const Dark: Story = {
+  args: {
+    children: "Dark Button",
+    theme: "dark",
+  },
+};
+
+// Danger variant
+export const Danger: Story = {
+  args: {
+    children: "Danger Button",
+    theme: "danger",
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    children: "Disabled Button",
+    disabled: true,
+  },
+};
+
+// Button with icon example
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <span>🚀</span>
+        <span>Button with Icon</span>
+      </>
+    ),
+  },
+};
+
+// Different sizes example using className
+export const CustomClassName: Story = {
+  args: {
+    children: "Custom Class Button",
+    className: "custom-class",
+  },
+};

src/stories/toast.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toast } from "@renderer/components";
+import { useState } from "react";
+
+const meta = {
+  title: "Components/Toast",
+  component: Toast,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof Toast>;
+
+// Base stories for each variant
+export const Success: Story = {
+  args: {
+    visible: true,
+    message: "Operation completed successfully",
+    type: "success",
+    onClose: () => {},
+  },
+};
+
+export const Error: Story = {
+  args: {
+    visible: true,
+    message: "An error occurred",
+    type: "error",
+    onClose: () => {},
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    visible: true,
+    message: "Please review before proceeding",
+    type: "warning",
+    onClose: () => {},
+  },
+};
+
+// Interactive story with toggle functionality
+const InteractiveToastTemplate = () => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <button onClick={() => setVisible(true)} style={{ marginBottom: "20px" }}>
+        Show Toast
+      </button>
+
+      <div
+        style={{
+          position: "absolute",
+          bottom: "16px",
+          right: "16px",
+          maxWidth: "420px",
+          width: "420px",
+        }}
+      >
+        <Toast
+          visible={visible}
+          message="This is an interactive toast"
+          type="success"
+          onClose={() => setVisible(false)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveToastTemplate />,
+};
+
+// Long message example
+export const LongMessage: Story = {
+  args: {
+    visible: true,
+    message:
+      "This is a very long message that demonstrates how the toast component handles text wrapping and content overflow in cases where the message is extensive",
+    type: "success",
+    onClose: () => {},
+  },
+};
+
+// Story with auto-close behavior
+const AutoCloseToastTemplate = () => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <button
+        onClick={() => setVisible(true)}
+        style={{ marginBottom: "20px" }}
+        disabled={visible}
+      >
+        Show Toast Again
+      </button>
+      <Toast
+        visible={visible}
+        message="This toast will auto-close in 2.5 seconds"
+        type="success"
+        onClose={() => setVisible(false)}
+      />
+    </div>
+  );
+};
+
+export const AutoClose: Story = {
+  render: () => <AutoCloseToastTemplate />,
+};