fix: fixing download sources migration

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

@@ -74,16 +74,28 @@ export const search = recipe({
   },
 });
 
-export const searchButton = recipe({
+export const searchInput = style({
-  base: {
+  backgroundColor: "transparent",
-    WebkitAppRegion: "no-drag",
+  border: "none",
-  } as ComplexStyleRule,
+  width: "100%",
-  variants: {
+  height: "100%",
-    hidden: {
+  outline: "none",
-      true: {
+  color: "#DADBE1",
-        visibility: "hidden",
+  cursor: "default",
-      },
+  fontFamily: "inherit",
-    },
+  textOverflow: "ellipsis",
+  ":focus": {
+    cursor: "text",
+  },
+});
+
+export const actionButton = style({
+  color: "inherit",
+  cursor: "pointer",
+  transition: "all ease 0.2s",
+  padding: `${SPACING_UNIT}px`,
+  ":hover": {
+    color: "#DADBE1",
   },
 });
 

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

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { ArrowLeftIcon, SearchIcon } from "@primer/octicons-react";
+import { ArrowLeftIcon, SearchIcon, XIcon } from "@primer/octicons-react";
 
-import { useAppSelector } from "@renderer/hooks";
+import { useAppDispatch, useAppSelector } from "@renderer/hooks";
 
 import * as styles from "./header.css";
 import { AutoUpdateSubHeader } from "./auto-update-sub-header";
-import { Button } from "../button/button";
+import { setSearch } from "@renderer/features";
 
 const pathTitle: Record<string, string> = {
   "/": "home",
@@ -17,6 +17,8 @@ const pathTitle: Record<string, string> = {
 };
 
 export function Header() {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -24,6 +26,14 @@ export function Header() {
     (state) => state.window
   );
 
+  const searchValue = useAppSelector(
+    (state) => state.catalogueSearch.value.title
+  );
+
+  const dispatch = useAppDispatch();
+
+  const [isFocused, setIsFocused] = useState(false);
+
   const { t } = useTranslation("header");
 
   const title = useMemo(() => {
@@ -35,14 +45,27 @@ export function Header() {
     return t(pathTitle[location.pathname]);
   }, [location.pathname, headerTitle, t]);
 
-  const showSearchButton = useMemo(() => {
+  const focusInput = () => {
-    return location.pathname.startsWith("/catalogue");
+    setIsFocused(true);
-  }, [location.pathname]);
+    inputRef.current?.focus();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
 
   const handleBackButtonClick = () => {
     navigate(-1);
   };
 
+  const handleSearch = (value: string) => {
+    dispatch(setSearch({ title: value }));
+
+    if (!location.pathname.startsWith("/catalogue")) {
+      navigate("/catalogue");
+    }
+  };
+
   return (
     <>
       <header
@@ -73,14 +96,37 @@ export function Header() {
         </section>
 
         <section className={styles.section}>
-          <Button
+          <div className={styles.search({ focused: isFocused })}>
-            theme="outline"
+            <button
-            className={styles.searchButton({ hidden: showSearchButton })}
+              type="button"
-            onClick={() => navigate("/catalogue?search=true")}
+              className={styles.actionButton}
-          >
+              onClick={focusInput}
-            <SearchIcon />
+            >
-            {t("search")}
+              <SearchIcon />
-          </Button>
+            </button>
+
+            <input
+              ref={inputRef}
+              type="text"
+              name="search"
+              placeholder={t("search")}
+              value={searchValue}
+              className={styles.searchInput}
+              onChange={(event) => handleSearch(event.target.value)}
+              onFocus={() => setIsFocused(true)}
+              onBlur={handleBlur}
+            />
+
+            {searchValue && (
+              <button
+                type="button"
+                onClick={() => dispatch(setSearch({ title: "" }))}
+                className={styles.actionButton}
+              >
+                <XIcon />
+              </button>
+            )}
+          </div>
         </section>
       </header>
       <AutoUpdateSubHeader />

src/renderer/src/hooks/use-repacks.ts

@@ -18,7 +18,9 @@ export function useRepacks() {
 
   const updateRepacks = useCallback(() => {
     repacksTable.toArray().then((repacks) => {
-      dispatch(setRepacks(repacks));
+      dispatch(
+        setRepacks(repacks.filter((repack) => Array.isArray(repack.objectIds)))
+      );
     });
   }, [dispatch]);
 

src/renderer/src/pages/catalogue/catalogue.scss

@@ -19,60 +19,6 @@
   width: 100%;
   padding: 16px;
 
-  &__search-container {
-    background-color: globals.$dark-background-color;
-    display: inline-flex;
-    transition: all ease 0.2s;
-    width: 200px;
-    align-items: center;
-    border-radius: 8px;
-    border: 1px solid globals.$border-color;
-    height: 40px;
-
-    &:hover {
-      border-color: rgba(255, 255, 255, 0.5);
-    }
-
-    &--focused {
-      width: 250px;
-      border-color: #dadbe1;
-    }
-  }
-
-  &__search-icon-button {
-    color: inherit;
-    cursor: pointer;
-    transition: all ease 0.2s;
-    padding: 8px;
-
-    &:hover {
-      color: #dadbe1;
-    }
-  }
-
-  &__search-clear-button {
-    color: inherit;
-    cursor: pointer;
-    transition: all ease 0.2s;
-    padding: 8px;
-
-    &:hover {
-      color: #dadbe1;
-    }
-  }
-
-  &__search-input {
-    background-color: transparent;
-    border: none;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    color: #dadbe1;
-    cursor: default;
-    font-family: inherit;
-    text-overflow: ellipsis;
-  }
-
   &__game-item {
     background-color: globals.$dark-background-color;
     width: 100%;

src/renderer/src/pages/catalogue/catalogue.tsx

@@ -141,51 +141,6 @@ export default function Catalogue() {
 
   return (
     <div className="catalogue">
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-start",
-        }}
-      >
-        <div
-          className={cn("catalogue__search-container", {
-            ["catalogue__search-container--focused"]:
-              focused || !!filters.title,
-          })}
-        >
-          <button
-            type="button"
-            className="catalogue__search-icon-button"
-            onClick={focusInput}
-          >
-            <SearchIcon />
-          </button>
-
-          <input
-            ref={inputRef}
-            type="text"
-            name="search"
-            placeholder={t("search")}
-            value={filters.title}
-            className="catalogue__search-input"
-            onChange={(event) => onSearch(event.target.value)}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-          />
-
-          {filters.title && (
-            <button
-              type="button"
-              onClick={() => dispatch(setSearch({ title: "" }))}
-              className="catalogue__search-clear-button"
-            >
-              <XIcon />
-            </button>
-          )}
-        </div>
-      </div>
-
       <div
         style={{
           display: "flex",