first commit

src/renderer/components/sidebar/sidebar.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import type { Game } from "@types";
+
+import { useDownload, useLibrary } from "@renderer/hooks";
+import { AsyncImage, TextField } from "@renderer/components";
+import { SPACING_UNIT } from "@renderer/theme.css";
+
+import * as styles from "./sidebar.css";
+import { routes } from "./routes";
+
+const SIDEBAR_MIN_WIDTH = 200;
+const SIDEBAR_INITIAL_WIDTH = 250;
+const SIDEBAR_MAX_WIDTH = 450;
+
+const initialSidebarWidth = window.localStorage.getItem("sidebarWidth");
+
+export function Sidebar() {
+  const { t } = useTranslation("sidebar");
+  const { library, updateLibrary } = useLibrary();
+  const navigate = useNavigate();
+
+  const [filteredLibrary, setFilteredLibrary] = useState<Game[]>([]);
+
+  const [isResizing, setIsResizing] = useState(false);
+  const [sidebarWidth, setSidebarWidth] = useState(
+    initialSidebarWidth ? Number(initialSidebarWidth) : SIDEBAR_INITIAL_WIDTH
+  );
+
+  const location = useLocation();
+
+  const { game: gameDownloading, progress } = useDownload();
+
+  useEffect(() => {
+    updateLibrary();
+  }, [gameDownloading?.id, updateLibrary]);
+
+  const isDownloading = library.some((game) =>
+    ["downloading", "checking_files", "downloading_metadata"].includes(
+      game.status
+    )
+  );
+
+  const sidebarRef = useRef<HTMLElement>(null);
+
+  const cursorPos = useRef({ x: 0 });
+  const sidebarInitialWidth = useRef(0);
+
+  const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (
+    event
+  ) => {
+    setIsResizing(true);
+    cursorPos.current.x = event.screenX;
+    sidebarInitialWidth.current =
+      sidebarRef.current?.clientWidth || SIDEBAR_INITIAL_WIDTH;
+  };
+
+  const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    setFilteredLibrary(
+      library.filter((game) =>
+        game.title
+          .toLowerCase()
+          .includes(event.target.value.toLocaleLowerCase())
+      )
+    );
+  };
+
+  useEffect(() => {
+    setFilteredLibrary(library);
+  }, [library]);
+
+  useEffect(() => {
+    window.onmousemove = (event) => {
+      if (isResizing) {
+        const cursorXDelta = event.screenX - cursorPos.current.x;
+        const newWidth = Math.max(
+          SIDEBAR_MIN_WIDTH,
+          Math.min(
+            sidebarInitialWidth.current + cursorXDelta,
+            SIDEBAR_MAX_WIDTH
+          )
+        );
+
+        setSidebarWidth(newWidth);
+        window.localStorage.setItem("sidebarWidth", String(newWidth));
+      }
+    };
+
+    window.onmouseup = () => {
+      if (isResizing) setIsResizing(false);
+    };
+
+    return () => {
+      window.onmouseup = null;
+      window.onmousemove = null;
+    };
+  }, [isResizing]);
+
+  const getGameTitle = (game: Game) => {
+    if (game.status === "paused") return t("paused", { title: game.title });
+
+    if (gameDownloading?.id === game.id) {
+      const isVerifying = ["downloading_metadata", "checking_files"].includes(
+        gameDownloading?.status
+      );
+
+      if (isVerifying)
+        return t(gameDownloading.status, {
+          title: game.title,
+          percentage: progress,
+        });
+
+      return t("downloading", {
+        title: game.title,
+        percentage: progress,
+      });
+    }
+
+    return game.title;
+  };
+
+  const handleSidebarItemClick = (path: string) => {
+    if (path !== location.pathname) {
+      navigate(path);
+    }
+  };
+
+  return (
+    <aside
+      ref={sidebarRef}
+      className={styles.sidebar({ resizing: isResizing })}
+      style={{
+        width: sidebarWidth,
+        minWidth: sidebarWidth,
+        maxWidth: sidebarWidth,
+      }}
+    >
+      <div
+        className={styles.content({
+          macos: window.electron.platform === "darwin",
+        })}
+      >
+        {window.electron.platform === "darwin" && (
+          <h2 style={{ marginBottom: SPACING_UNIT }}>Hydra</h2>
+        )}
+
+        <section className={styles.section({ hasBorder: false })}>
+          <ul className={styles.menu}>
+            {routes.map(({ nameKey, path, render }) => (
+              <li
+                key={nameKey}
+                className={styles.menuItem({
+                  active: location.pathname === path,
+                })}
+              >
+                <button
+                  type="button"
+                  className={styles.menuItemButton}
+                  onClick={() => handleSidebarItemClick(path)}
+                >
+                  {render(isDownloading)}
+                  <span>{t(nameKey)}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className={styles.section({ hasBorder: false })}>
+          <small className={styles.sectionTitle}>{t("my_library")}</small>
+
+          <TextField
+            placeholder={t("filter")}
+            onChange={handleFilter}
+            theme="dark"
+          />
+
+          <ul className={styles.menu}>
+            {filteredLibrary.map((game) => (
+              <li
+                key={game.id}
+                className={styles.menuItem({
+                  active:
+                    location.pathname === `/game/${game.shop}/${game.objectID}`,
+                  muted: game.status === null || game.status === "cancelled",
+                })}
+              >
+                <button
+                  type="button"
+                  className={styles.menuItemButton}
+                  onClick={() =>
+                    handleSidebarItemClick(
+                      `/game/${game.shop}/${game.objectID}`
+                    )
+                  }
+                >
+                  <AsyncImage className={styles.gameIcon} src={game.iconUrl} />
+                  <span className={styles.menuItemButtonLabel}>
+                    {getGameTitle(game)}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
+
+      <button
+        type="button"
+        className={styles.handle}
+        onMouseDown={handleMouseDown}
+      />
+    </aside>
+  );
+}