Move package "de.grimsi.gameyfin" to "org.gameyfin"

2026-06-16 08:15:48 +00:00 · 2025-06-14 19:23:12 +02:00
parent be0ba28c54
commit d3d46b6b01
328 changed files with 710 additions and 678 deletions
@@ -0,0 +1,62 @@
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
+import {CaretRight, MagnifyingGlass} from "@phosphor-icons/react";
+import {useSnapshot} from "valtio/react";
+import {gameState} from "Frontend/state/GameState";
+import GameDto from "Frontend/generated/org/gameyfin/app/games/dto/GameDto";
+import {useNavigate} from "react-router";
+import {GameCover} from "Frontend/components/general/covers/GameCover";
+
+export default function SearchBar() {
+
+    const navigate = useNavigate();
+    const state = useSnapshot(gameState);
+    const games = state.recentlyUpdated as GameDto[];
+
+    return <Autocomplete
+        aria-label="Search for games"
+        classNames={{
+            selectorButton: "text-default-500",
+            endContentWrapper: "display-none"
+        }}
+        defaultItems={games}
+        inputProps={{
+            classNames: {
+                input: "text-small w-96",
+                inputWrapper: "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20"
+            },
+        }}
+        listboxProps={{
+            hideSelectedIcon: true,
+            itemClasses: {
+                base: [
+                    "text-default-500",
+                    "transition-opacity",
+                    "data-[hover=true]:text-foreground",
+                    "dark:data-[hover=true]:bg-default-50",
+                    "data-[pressed=true]:opacity-70",
+                    "data-[hover=true]:bg-default-200",
+                    "data-[selectable=true]:focus:bg-default-100",
+                    "data-[focus-visible=true]:ring-default-500",
+                ],
+            },
+        }}
+        placeholder="Type to search..."
+        startContent={<MagnifyingGlass/>}
+        isVirtualized={true}
+        maxListboxHeight={300}
+        itemHeight={91} // 75px (cover) + 16px (margin top/bottom) = 91px
+    >
+        {(item) => (
+            <AutocompleteItem key={item.id} textValue={item.title} onPress={() => navigate("/game/" + item.id)}>
+                <div className="flex flex-row gap-4 items-center">
+                    <GameCover game={item} size={75}/>
+                    <div className="flex flex-col flex-1 gap-2">
+                        <p><b>{item.title}</b> ({item.release && new Date(item.release).getFullYear()})</p>
+                        <p className="text-default-500">{item.developers && [...item.developers].sort().join(" / ")}</p>
+                    </div>
+                    <CaretRight/>
+                </div>
+            </AutocompleteItem>
+        )}
+    </Autocomplete>
+}