chore: refactoring toast

.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     "plugin:jsx-a11y/recommended",
     "@electron-toolkit/eslint-config-ts/recommended",
     "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   rules: {
     "@typescript-eslint/explicit-function-return-type": "off",

.gitignore

@@ -14,3 +14,5 @@ aria2/
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+*storybook.log

.storybook/app.css.ts

@@ -0,0 +1,85 @@
+import { createContainer, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../src/renderer/src/theme.css";
+
+export const appContainer = createContainer();
+
+globalStyle("*", {
+  boxSizing: "border-box",
+});
+
+globalStyle("::-webkit-scrollbar", {
+  width: "9px",
+  backgroundColor: vars.color.darkBackground,
+});
+
+globalStyle("::-webkit-scrollbar-track", {
+  backgroundColor: "rgba(255, 255, 255, 0.03)",
+});
+
+globalStyle("::-webkit-scrollbar-thumb", {
+  backgroundColor: "rgba(255, 255, 255, 0.08)",
+  borderRadius: "24px",
+});
+
+globalStyle("::-webkit-scrollbar-thumb:hover", {
+  backgroundColor: "rgba(255, 255, 255, 0.16)",
+});
+
+globalStyle("html, body, #root, main", {
+  height: "100%",
+});
+
+globalStyle("body", {
+  userSelect: "none",
+  fontFamily: "Noto Sans, sans-serif",
+  fontSize: vars.size.body,
+  color: vars.color.body,
+  margin: "0",
+});
+
+globalStyle("button", {
+  padding: "0",
+  backgroundColor: "transparent",
+  border: "none",
+  fontFamily: "inherit",
+});
+
+globalStyle("h1, h2, h3, h4, h5, h6, p", {
+  margin: 0,
+});
+
+globalStyle("p", {
+  lineHeight: "20px",
+});
+
+globalStyle("#root, main", {
+  display: "flex",
+});
+
+globalStyle("#root", {
+  flexDirection: "column",
+});
+
+globalStyle(
+  "input::-webkit-outer-spin-button, input::-webkit-inner-spin-button",
+  {
+    WebkitAppearance: "none",
+    margin: "0",
+  }
+);
+
+globalStyle("label", {
+  fontSize: vars.size.body,
+});
+
+globalStyle("input[type=number]", {
+  MozAppearance: "textfield",
+});
+
+globalStyle("img", {
+  WebkitUserDrag: "none",
+} as Record<string, string>);
+
+globalStyle("progress[value]", {
+  WebkitAppearance: "none",
+});

.storybook/main.ts

@@ -0,0 +1,31 @@
+import { resolve } from "path";
+import type { StorybookConfig } from "@storybook/react-vite";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal: (config) => {
+    return {
+      ...config,
+      resolve: {
+        alias: {
+          "@renderer": resolve("src/renderer/src"),
+          "@locales": resolve("src/locales"),
+          "@shared": resolve("src/shared"),
+        },
+      },
+      plugins: [...config.plugins, vanillaExtractPlugin()],
+    };
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from "@storybook/react";
+
+import "@fontsource/noto-sans/400.css";
+import "@fontsource/noto-sans/500.css";
+import "@fontsource/noto-sans/700.css";
+
+import "react-loading-skeleton/dist/skeleton.css";
+
+import "./app.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -29,7 +29,9 @@
     "build:mac": "electron-vite build && electron-builder --mac",
     "build:linux": "electron-vite build && electron-builder --linux",
     "prepare": "husky",
-    "knex:migrate:make": "knex --knexfile src/main/knexfile.ts migrate:make --esm"
+    "knex:migrate:make": "knex --knexfile src/main/knexfile.ts migrate:make --esm",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
@@ -82,11 +84,19 @@
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.705.0",
+    "@chromatic-com/storybook": "^3.2.4",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",
     "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-onboarding": "^8.5.1",
+    "@storybook/blocks": "^8.5.1",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-vite": "^8.5.1",
+    "@storybook/test": "^8.5.1",
     "@swc/core": "^1.4.16",
     "@types/auto-launch": "^5.0.5",
     "@types/color": "^3.0.6",
@@ -109,11 +119,13 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "husky": "^9.1.7",
     "prettier": "^3.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass-embedded": "^1.80.6",
+    "storybook": "^8.5.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",

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 />,
+};

tsconfig.web.json

@@ -6,7 +6,9 @@
     "src/renderer/src/**/*.tsx",
     "src/preload/*.d.ts",
     "src/locales/index.ts",
-    "src/shared/**/*"
+    "src/shared/**/*",
+    "src/stories/**/*",
+    ".storybook/**/*"
   ],
   "compilerOptions": {
     "composite": true,