From c9c6d5ee4660245f8f8089eee2c64e331ec4c0ba Mon Sep 17 00:00:00 2001 From: Chubby Granny Chaser Date: Mon, 23 Dec 2024 00:05:27 +0000 Subject: [PATCH] fix: fixing download sources migration --- .../src/components/header/header.css.ts | 32 +++++--- src/renderer/src/components/header/header.tsx | 76 +++++++++++++++---- src/renderer/src/hooks/use-repacks.ts | 4 +- .../src/pages/catalogue/catalogue.scss | 54 ------------- .../src/pages/catalogue/catalogue.tsx | 45 ----------- 5 files changed, 86 insertions(+), 125 deletions(-) diff --git a/src/renderer/src/components/header/header.css.ts b/src/renderer/src/components/header/header.css.ts index 903f4a42..12855986 100644 --- a/src/renderer/src/components/header/header.css.ts +++ b/src/renderer/src/components/header/header.css.ts @@ -74,16 +74,28 @@ export const search = recipe({ }, }); -export const searchButton = recipe({ - base: { - WebkitAppRegion: "no-drag", - } as ComplexStyleRule, - variants: { - hidden: { - true: { - visibility: "hidden", - }, - }, +export const searchInput = style({ + backgroundColor: "transparent", + border: "none", + width: "100%", + height: "100%", + outline: "none", + color: "#DADBE1", + 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", }, }); diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index 2c79b1d4..97ecbdc2 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/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 = { "/": "home", @@ -17,6 +17,8 @@ const pathTitle: Record = { }; export function Header() { + const inputRef = useRef(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(() => { - return location.pathname.startsWith("/catalogue"); - }, [location.pathname]); + const focusInput = () => { + setIsFocused(true); + 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 ( <>
- +
+ + + handleSearch(event.target.value)} + onFocus={() => setIsFocused(true)} + onBlur={handleBlur} + /> + + {searchValue && ( + + )} +
diff --git a/src/renderer/src/hooks/use-repacks.ts b/src/renderer/src/hooks/use-repacks.ts index e55a2036..1c160be6 100644 --- a/src/renderer/src/hooks/use-repacks.ts +++ b/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]); diff --git a/src/renderer/src/pages/catalogue/catalogue.scss b/src/renderer/src/pages/catalogue/catalogue.scss index a066ab7f..e1ba3113 100644 --- a/src/renderer/src/pages/catalogue/catalogue.scss +++ b/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%; diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index e85e94b5..bb44801b 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -141,51 +141,6 @@ export default function Catalogue() { return (
-
-
- - - onSearch(event.target.value)} - onFocus={() => setFocused(true)} - onBlur={() => setFocused(false)} - /> - - {filters.title && ( - - )} -
-
-