Merge branch 'main' of https://github.com/hydralauncher/hydra

2025-03-09 15:40:26 +00:00 · 2024-05-04 12:07:44 +02:00 · 2024-05-04 12:07:44 +02:00 · 2b14b9dda0
commit 2b14b9dda0
parent 86a21ea2c2 4d32ff2ac2
29 changed files with 1212 additions and 1208 deletions
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -6,7 +6,7 @@
    <title>Hydra</title>
    <meta
      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com; media-src 'self' data: https://cdn2.steamgriddb.com;"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: hydra: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
    />
  </head>
  <body style="background-color: #1c1c1c">
--- a/src/renderer/src/components/sidebar/sidebar.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar.css.ts
@ -52,7 +52,7 @@ export const menu = style({
  listStyle: "none",
  padding: "0",
  margin: "0",
-  gap: `${SPACING_UNIT * 2}px`,
+  gap: `${SPACING_UNIT / 2}px`,
  display: "flex",
  flexDirection: "column",
  overflow: "hidden",
@ -64,16 +64,16 @@ export const menuItem = recipe({
    cursor: "pointer",
    textWrap: "nowrap",
    display: "flex",
-    opacity: "0.9",
    color: vars.color.muted,
+    borderRadius: "4px",
    ":hover": {
-      opacity: "1",
+      backgroundColor: "rgba(255, 255, 255, 0.15)",
    },
  },
  variants: {
    active: {
      true: {
-        opacity: "1",
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
        fontWeight: "bold",
      },
    },
@ -96,6 +96,7 @@ export const menuItemButton = style({
  cursor: "pointer",
  overflow: "hidden",
  width: "100%",
+  padding: `9px ${SPACING_UNIT}px`,
  selectors: {
    [`${menuItem({ active: true }).split(" ")[1]} &`]: {
      fontWeight: "bold",
@ -120,20 +121,12 @@ export const sectionTitle = style({
  fontWeight: "bold",
 });

-export const section = recipe({
-  base: {
-    padding: `${SPACING_UNIT * 2}px 0`,
-    gap: `${SPACING_UNIT * 2}px`,
-    display: "flex",
-    flexDirection: "column",
-  },
-  variants: {
-    hasBorder: {
-      true: {
-        borderBottom: `solid 1px ${vars.color.border}`,
-      },
-    },
-  },
+export const section = style({
+  padding: `${SPACING_UNIT * 2}px 0`,
+  gap: `${SPACING_UNIT * 2}px`,
+  display: "flex",
+  flexDirection: "column",
+  paddingBottom: `${SPACING_UNIT}px`,
 });

 export const sidebarFooter = style({
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@ -6,7 +6,6 @@ import type { Game } from "@types";

 import { AsyncImage, TextField } from "@renderer/components";
 import { useDownload, useLibrary } from "@renderer/hooks";
-import { SPACING_UNIT } from "../../theme.css";

 import { routes } from "./routes";

@ -94,7 +93,7 @@ export function Sidebar() {
  }, [library]);

  useEffect(() => {
-    window.onmousemove = (event) => {
+    window.onmousemove = (event: MouseEvent) => {
      if (isResizing) {
        const cursorXDelta = event.screenX - cursorPos.current.x;
        const newWidth = Math.max(
@ -128,7 +127,7 @@ export function Sidebar() {
      const isVerifying = GameStatus.isVerifying(gameDownloading.status);

      if (isVerifying)
-        return t(gameDownloading.status, {
+        return t(gameDownloading.status!, {
          title: game.title,
          percentage: progress,
        });
@ -163,11 +162,9 @@ export function Sidebar() {
          macos: window.electron.platform === "darwin",
        })}
      >
-        {window.electron.platform === "darwin" && (
-          <h2 style={{ marginBottom: SPACING_UNIT }}>Hydra</h2>
-        )}
+        {window.electron.platform === "darwin" && <h2>Hydra</h2>}

-        <section className={styles.section({ hasBorder: false })}>
+        <section className={styles.section}>
          <ul className={styles.menu}>
            {routes.map(({ nameKey, path, render }) => (
              <li
@ -189,7 +186,7 @@ export function Sidebar() {
          </ul>
        </section>

-        <section className={styles.section({ hasBorder: false })}>
+        <section className={styles.section}>
          <small className={styles.sectionTitle}>{t("my_library")}</small>

          <TextField
--- a/src/renderer/src/pages/game-details/game-details-skeleton.tsx
+++ b/src/renderer/src/pages/game-details/game-details-skeleton.tsx
@ -13,7 +13,7 @@ export function GameDetailsSkeleton() {
      <div className={styles.hero}>
        <Skeleton className={styles.heroImageSkeleton} />
      </div>
-      <div className={styles.descriptionHeader}>
+      <div className={styles.heroPanelSkeleton}>
        <section className={styles.descriptionHeaderInfo}>
          <Skeleton width={155} />
          <Skeleton width={135} />
--- a/src/renderer/src/pages/game-details/game-details.css.ts
+++ b/src/renderer/src/pages/game-details/game-details.css.ts
@ -174,7 +174,6 @@ export const descriptionHeader = style({
  justifyContent: "space-between",
  alignItems: "center",
  backgroundColor: vars.color.background,
-  borderBottom: `solid 1px ${vars.color.border}`,
  height: "72px",
 });

@ -233,6 +232,16 @@ export const randomizerButton = style({
  },
 });

+export const heroPanelSkeleton = style({
+  width: "100%",
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: vars.color.background,
+  height: "72px",
+  borderBottom: `solid 1px ${vars.color.border}`,
+});
+
 globalStyle(".bb_tag", {
  marginTop: `${SPACING_UNIT * 2}px`,
  marginBottom: `${SPACING_UNIT * 2}px`,
--- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
@ -10,7 +10,6 @@ export const panel = style({
  justifyContent: "space-between",
  transition: "all ease 0.2s",
  borderBottom: `solid 1px ${vars.color.border}`,
-  color: "#8e919b",
  boxShadow: "0px 0px 15px 0px #000000",
 });

--- a/src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.tsx
+++ b/src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.tsx
@ -21,7 +21,7 @@ export function DODIInstallationGuide({
 }: DODIInstallationGuideProps) {
  const { t } = useTranslation("game_details");

-  const [dontShowAgain, setDontShowAgain] = useState(true);
+  const [dontShowAgain, setDontShowAgain] = useState(false);

  const handleClose = () => {
    if (dontShowAgain) {
--- a/src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.tsx
+++ b/src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.tsx
@ -22,7 +22,7 @@ export function OnlineFixInstallationGuide({
  const [clipboardLocked, setClipboardLocked] = useState(false);
  const { t } = useTranslation("game_details");

-  const [dontShowAgain, setDontShowAgain] = useState(true);
+  const [dontShowAgain, setDontShowAgain] = useState(false);

  const handleCopyToClipboard = () => {
    setClipboardLocked(true);
--- a/src/renderer/src/pages/game-details/repacks-modal.tsx
+++ b/src/renderer/src/pages/game-details/repacks-modal.tsx
@ -44,12 +44,17 @@ export function RepacksModal({
  };

  const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const term = event.target.value.toLocaleLowerCase();
+
    setFilteredRepacks(
-      gameDetails.repacks.filter((repack) =>
-        repack.title
-          .toLowerCase()
-          .includes(event.target.value.toLocaleLowerCase())
-      )
+      gameDetails.repacks.filter((repack) => {
+        const lowerCaseTitle = repack.title.toLowerCase();
+        const lowerCaseRepacker = repack.repacker.toLowerCase();
+
+        return [lowerCaseTitle, lowerCaseRepacker].some((value) =>
+          value.includes(term)
+        );
+      })
    );
  };

--- a/src/renderer/src/pages/home/search-results.tsx
+++ b/src/renderer/src/pages/home/search-results.tsx
@ -4,7 +4,7 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import type { CatalogueEntry } from "@types";

 import type { DebouncedFunc } from "lodash";
-import { debounce } from "lodash-es";
+import { debounce } from "lodash";

 import { InboxIcon } from "@primer/octicons-react";
 import { clearSearch } from "@renderer/features";