fix: fixing css issues

.eslintrc.cjs

@@ -7,7 +7,6 @@ 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",

.storybook/app.css.ts

@@ -1,85 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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,9 +29,7 @@
     "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",
@@ -84,19 +82,11 @@
   },
   "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",
@@ -119,13 +109,11 @@
     "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/renderer/src/pages/settings/settings-behavior.tsx

@@ -28,13 +28,15 @@ export function SettingsBehavior() {
   useEffect(() => {
     if (userPreferences) {
       setForm({
-        preferQuitInsteadOfHiding: userPreferences.preferQuitInsteadOfHiding,
+        preferQuitInsteadOfHiding:
-        runAtStartup: userPreferences.runAtStartup,
+          userPreferences.preferQuitInsteadOfHiding ?? false,
-        startMinimized: userPreferences.startMinimized,
+        runAtStartup: userPreferences.runAtStartup ?? false,
-        disableNsfwAlert: userPreferences.disableNsfwAlert,
+        startMinimized: userPreferences.startMinimized ?? false,
-        seedAfterDownloadComplete: userPreferences.seedAfterDownloadComplete,
+        disableNsfwAlert: userPreferences.disableNsfwAlert ?? false,
+        seedAfterDownloadComplete:
+          userPreferences.seedAfterDownloadComplete ?? false,
         showHiddenAchievementsDescription:
-          userPreferences.showHiddenAchievementsDescription,
+          userPreferences.showHiddenAchievementsDescription ?? false,
       });
     }
   }, [userPreferences]);

src/renderer/src/pages/settings/settings-general.tsx

@@ -65,18 +65,20 @@ export function SettingsGeneral() {
           (language) => language === userPreferences.language
         ) ??
         languageKeys.find((language) => {
-          return language.startsWith(userPreferences.language.split("-")[0]);
+          return language.startsWith(
+            userPreferences.language?.split("-")[0] ?? "en"
+          );
         });
 
       setForm((prev) => ({
         ...prev,
         downloadsPath: userPreferences.downloadsPath ?? defaultDownloadsPath,
         downloadNotificationsEnabled:
-          userPreferences.downloadNotificationsEnabled,
+          userPreferences.downloadNotificationsEnabled ?? false,
         repackUpdatesNotificationsEnabled:
-          userPreferences.repackUpdatesNotificationsEnabled,
+          userPreferences.repackUpdatesNotificationsEnabled ?? false,
         achievementNotificationsEnabled:
-          userPreferences.achievementNotificationsEnabled,
+          userPreferences.achievementNotificationsEnabled ?? false,
         language: language ?? "en",
       }));
     }

src/stories/button.stories.tsx

@@ -1,74 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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 />,
-};