chore: merge with main

src/renderer/src/components/header/auto-update-sub-header.tsx

@@ -0,0 +1,72 @@
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
+import { SyncIcon } from "@primer/octicons-react";
+import { Link } from "../link/link";
+import * as styles from "./header.css";
+import { AppUpdaterEvent } from "@types";
+
+export const releasesPageUrl =
+  "https://github.com/hydralauncher/hydra/releases/latest";
+
+const isMac = window.electron.platform === "darwin";
+
+export function AutoUpdateSubHeader() {
+  const [showUpdateSubheader, setShowUpdateSubheader] = useState(false);
+  const [newVersion, setNewVersion] = useState("");
+
+  const { t } = useTranslation("header");
+
+  const handleClickInstallUpdate = () => {
+    window.electron.restartAndInstallUpdate();
+  };
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onAutoUpdaterEvent(
+      (event: AppUpdaterEvent) => {
+        if (event.type == "update-available") {
+          setNewVersion(event.info.version);
+
+          if (isMac) {
+            setShowUpdateSubheader(true);
+          }
+        }
+
+        if (event.type == "update-downloaded") {
+          setShowUpdateSubheader(true);
+        }
+      }
+    );
+
+    window.electron.checkForUpdates();
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  if (!showUpdateSubheader) return null;
+
+  return (
+    <header className={styles.subheader}>
+      {isMac ? (
+        <Link to={releasesPageUrl} className={styles.newVersionLink}>
+          <SyncIcon size={12} />
+          <small>
+            {t("version_available_download", { version: newVersion })}
+          </small>
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={styles.newVersionButton}
+          onClick={handleClickInstallUpdate}
+        >
+          <SyncIcon size={12} />
+          <small>
+            {t("version_available_install", { version: newVersion })}
+          </small>
+        </button>
+      )}
+    </header>
+  );
+}

src/renderer/src/components/header/header.css.ts

@@ -157,9 +157,17 @@ export const newVersionButton = style({
   justifyContent: "center",
   gap: `${SPACING_UNIT}px`,
   color: vars.color.body,
-  borderBottom: "1px solid transparent",
+  fontSize: "13px",
   ":hover": {
-    borderBottom: `1px solid ${vars.color.body}`,
+    textDecoration: "underline",
     cursor: "pointer",
   },
 });
+
+export const newVersionLink = style({
+  display: "flex",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+  color: "#8e919b",
+  fontSize: "13px",
+});

src/renderer/src/components/header/header.tsx

@@ -1,18 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import {
-  ArrowLeftIcon,
-  SearchIcon,
-  SyncIcon,
-  XIcon,
-} from "@primer/octicons-react";
+import { ArrowLeftIcon, SearchIcon, XIcon } from "@primer/octicons-react";
 
 import { useAppDispatch, useAppSelector } from "@renderer/hooks";
 
 import * as styles from "./header.css";
 import { clearSearch } from "@renderer/features";
-import { AppUpdaterEvents } from "@types";
+import { AutoUpdateSubHeader } from "./auto-update-sub-header";
 
 export interface HeaderProps {
   onSearch: (query: string) => void;
@@ -40,9 +35,6 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
 
   const [isFocused, setIsFocused] = useState(false);
 
-  const [showUpdateSubheader, setShowUpdateSubheader] = useState(false);
-  const [newVersion, setNewVersion] = useState("");
-
   const { t } = useTranslation("header");
 
   const title = useMemo(() => {
@@ -58,30 +50,6 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
     }
   }, [location.pathname, search, dispatch]);
 
-  const handleClickRestartAndUpdate = () => {
-    window.electron.restartAndInstallUpdate();
-  };
-
-  useEffect(() => {
-    const unsubscribe = window.electron.onAutoUpdaterEvent(
-      (event: AppUpdaterEvents) => {
-        if (event.type == "update-available") {
-          setNewVersion(event.info.version || "");
-        }
-
-        if (event.type == "update-downloaded") {
-          setShowUpdateSubheader(true);
-        }
-      }
-    );
-
-    window.electron.checkForUpdates();
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   const focusInput = () => {
     setIsFocused(true);
     inputRef.current?.focus();
@@ -158,18 +126,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
           </div>
         </section>
       </header>
-      {showUpdateSubheader && (
-        <header className={styles.subheader}>
-          <button
-            type="button"
-            className={styles.newVersionButton}
-            onClick={handleClickRestartAndUpdate}
-          >
-            <SyncIcon size={12} />
-            <small>{t("version_available", { version: newVersion })}</small>
-          </button>
-        </header>
-      )}
+      <AutoUpdateSubHeader />
     </>
   );
 }

src/renderer/src/declaration.d.ts

@@ -1,5 +1,5 @@
 import type {
-  AppUpdaterEvents,
+  AppUpdaterEvent,
   CatalogueEntry,
   Game,
   LibraryGame,
@@ -102,7 +102,7 @@ declare global {
 
     /* Auto update */
     onAutoUpdaterEvent: (
-      cb: (event: AppUpdaterEvents) => void
+      cb: (event: AppUpdaterEvent) => void
     ) => () => Electron.IpcRenderer;
     checkForUpdates: () => Promise<void>;
     restartAndInstallUpdate: () => Promise<void>;