simeonradivoev/gameflow-deck
simeonradivoev/gameflow-deck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Implemented filtering and searching

Browse source
This commit is contained in:
Simeon Radivoev 2026-04-12 22:19:24 +03:00
parent 4806f3487a
commit 444d8c4c27
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
49 changed files with 841 additions and 290 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/mainview/components/CardElement.tsx
View file

@ -18,9 +18,7 @@ export function GameCardSkeleton ()
);
}
export type GameCardFocusHandler = (id: string, node: HTMLElement, details: FocusDetails) => void;
export interface GameCardParams
export interface GameCardParams extends FocusParams
{
title: string;
subtitle: string | JSX.Element;
@ -31,7 +29,6 @@ export interface GameCardParams
id: string;
badges?: JSX.Element[];
className?: string;
onFocus?: GameCardFocusHandler;
onBlur?: (id: string) => void;
clickFocuses?: boolean;
previewClassName?: string;
@ -39,14 +36,14 @@ export interface GameCardParams
export default function CardElement (data: GameCardParams & InteractParams)
{
const handleAction = () =>
const handleAction = (event?: Event) =>
{
data.onAction?.();
data.onAction?.({ event, focusKey });
oneShot('click');
};
const { ref, focused, focusSelf } = useFocusable({
const { ref, focused, focusSelf, focusKey } = useFocusable({
focusKey: data.focusKey,
onFocus: (l, p, details) => data.onFocus?.(data.id, ref.current as any, details),
onFocus: (l, p, details) => data.onFocus?.(focusKey, ref.current as any, details),
onEnterPress: handleAction,
onBlur: () => data.onBlur?.(data.id),
});
@ -63,10 +60,10 @@ export default function CardElement (data: GameCardParams & InteractParams)
scrollSnapAlign: isPointer ? "center" : "none"
}}
onFocus={focusSelf}
onClick={() =>
onClick={(e) =>
{
focusSelf();
handleAction();
handleAction(e.nativeEvent);
}}
className={twMerge(
"relative game-card light:bg-base-100 dark:bg-base-300 flex flex-col z-5 overflow-hidden transition-all duration-200 not-mobile:drop-shadow-lg cursor-pointer focusable focusable-primary focusable-hover select-none focused focused:not-control-mouse:animate-wiggle focused:not-control-mouse:bg-base-content focused:not-control-mouse:text-base-300 focused:not-control-mouse:drop-shadow-lg focused:not-control-mouse:drop-shadow-black/30 focused:not-control-mouse:scale-102 focused:not-control-mouse:z-10 group control-mouse:hover:bg-base-200 h-full [--tw-border-style:inset] border-2 border-base-content/5 backdrop-opacity-0 active:bg-base-content! active:text-base-100 active:transition-none",

26
src/mainview/components/CardList.tsx
View file

@ -4,12 +4,11 @@ import
useFocusable,
} from "@noriginmedia/norigin-spatial-navigation";
import { GameMeta } from "../../shared/constants";
import CardElement, { GameCardFocusHandler, GameCardParams } from "./CardElement";
import CardElement, { GameCardParams } from "./CardElement";
import { JSX } from "react";
import { twMerge } from "tailwind-merge";
import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
import { oneShot } from "../scripts/audio/audio";
import { GamepadButtonEvent } from "../scripts/gamepads";
export interface GameMetaExtra extends GameMeta
{
@ -26,13 +25,14 @@ function LocalCardElement (data: { game: GameMetaExtra, i: number; } & FocusPara
preview = data.game.previewUrl;
}
const handleAction = (e?: Event) =>
const handleAction = (ctx: InteractParamsArgs) =>
{
data.game.onSelect?.();
data.onAction?.();
data.onAction?.({ event, focusKey: data.game.focusKey });
oneShot('click');
};
useShortcuts(data.game.focusKey, () => [{ label: "Select", button: GamePadButtonCode.A, action: handleAction }]);
useShortcuts(data.game.focusKey, () => [{ label: "Select", button: GamePadButtonCode.A, action: event => handleAction({ event, focusKey: data.game.focusKey }) }]);
return (
<CardElement
@ -42,10 +42,10 @@ function LocalCardElement (data: { game: GameMetaExtra, i: number; } & FocusPara
title={data.game.title}
subtitle={data.game.subtitle ?? ""}
srcset={data.game.previewSrcset}
onFocus={(id, node, details) =>
onFocus={(focusKey, node, details) =>
{
data.game.onFocus?.(details);
data.onFocus?.(id, node, details);
data.game.onFocus?.(focusKey, node, details);
data.onFocus?.(focusKey, node, details);
}}
onAction={handleAction}
preview={preview}
@ -61,16 +61,18 @@ export function CardList (data: {
games: GameMetaExtra[];
grid?: boolean;
onSelectGame?: (id: string) => void;
onGameFocus?: GameCardFocusHandler;
focus?: string;
className?: string;
finalElement?: JSX.Element;
saveChildFocus?: 'session' | 'local';
})
} & FocusParams)
{
const { ref, focusKey } = useFocusable({
focusKey: data.id,
forceFocus: true,
autoRestoreFocus: true
autoRestoreFocus: true,
focusable: data.games.length > 0,
preferredChildFocusKey: data.focus
});
return (
@ -92,7 +94,7 @@ export function CardList (data: {
>
<FocusContext.Provider value={focusKey}>
{data.games.map((g, i) => <LocalCardElement
key={g.id} onFocus={data.onGameFocus} game={g} onAction={() => data.onSelectGame?.(g.id)} i={i} />)}
key={g.id} onFocus={data.onFocus} game={g} onAction={() => data.onSelectGame?.(g.id)} i={i} />)}
{data.finalElement}
</FocusContext.Provider>
</ul>

1
src/mainview/components/CollectionList.tsx
View file

@ -1,7 +1,6 @@
import { RPC_URL } from "@/shared/constants";
import { useSuspenseQuery } from "@tanstack/react-query";
import { CardList, GameMetaExtra } from "./CardList";
import { GameCardFocusHandler } from "./CardElement";
import { getCollectionsQuery } from "@queries/romm";
import { useRouter } from "@tanstack/react-router";

67
src/mainview/components/CollectionsDetail.tsx
View file

@ -1,44 +1,50 @@
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { StickyHeaderUI } from './Header';
import { HeaderButton, StickyHeaderUI } from './Header';
import { GameList } from './GameList';
import { Search, Settings2 } from 'lucide-react';
import { JSX, Suspense } from 'react';
import { ArrowDownAz, CalendarArrowDown, ClockArrowDown, Drama, Filter, FunnelX, HardDrive, Rocket, Search, Settings2, SortDesc, Store, Tags, User, UserLock } from 'lucide-react';
import { JSX, Suspense, useRef, useState } from 'react';
import { FloatingShortcuts } from './Shortcuts';
import { AutoFocus } from './AutoFocus';
import { GamePadButtonCode, useShortcuts } from '../scripts/shortcuts';
import { GameListFilterType } from '@/shared/constants';
import { GameCardFocusHandler } from './CardElement';
import { GameListFilterSchema, GameListFilterType } from '@/shared/constants';
import { HandleGoBack } from '../scripts/utils';
import LoadingCardList from './LoadingCardList';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { gameQuery } from '../scripts/queries/romm';
import { useRouter } from '@tanstack/react-router';
import { useNavigate, useRouter } from '@tanstack/react-router';
import SelectMenu from './SelectMenu';
import { RoundButton } from './RoundButton';
import { ContextList, DialogEntry, useContextDialog } from './ContextDialog';
import classNames from 'classnames';
import { sourceIconMap } from './Constants';
import { stat } from 'fs-extra';
import { FilterUI } from './Filters';
import SideFilters from './SideFilters';
export interface CollectionsDetailParams
{
id?: string;
setBackground?: (url: string) => void;
filters?: GameListFilterType;
builder?: () => Promise<{ filter?: GameListFilterType, title?: JSX.Element; }>;
setLocalFilter: (filter: GameListFilterType) => void,
localFilter: GameListFilterType,
headerTitle?: JSX.Element;
headerChildren?: any;
title?: JSX.Element;
footer?: JSX.Element;
focus?: string;
countHit?: number;
countHint?: number;
headerButtons?: HeaderButton[];
headerButtonElements?: JSX.Element | JSX.Element[];
}
export function CollectionsDetail (data: CollectionsDetailParams)
{
const router = useRouter();
const builtData = useQuery({
queryKey: ['filter', data.id], queryFn: async () =>
{
return data.builder?.() ?? { filter: data.filters, title: data.title };
}
});
const [filterValues, setFilterValues] = useState<FrontEndFilterLists>();
const queryClient = useQueryClient();
const focusKey = `game-list-${data.id}-${data?.filters ? Object.values(data?.filters).map(f => String(f)).join(",") : ''}`;
const finalFilter = { ...data.localFilter, ...data.filters };
const focusKey = `game-list-${data.id}`;
const { ref, focusSelf } = useFocusable({
focusKey,
preferredChildFocusKey: `${focusKey}-list`
@ -46,9 +52,8 @@ export function CollectionsDetail (data: CollectionsDetailParams)
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: (e) => HandleGoBack(router, e) }], [router]);
const handleScroll: GameCardFocusHandler = (cardId, node, details) =>
const handleScroll: FocusParams['onFocus'] = (cardId, node, details) =>
{
const [source, id] = cardId.split('@');
queryClient.prefetchQuery(gameQuery(source, id));
@ -61,22 +66,27 @@ export function CollectionsDetail (data: CollectionsDetailParams)
return (
<FocusContext value={focusKey}>
<div ref={ref} className='absolute w-screen h-screen overflow-y-scroll'>
<StickyHeaderUI title={data.headerTitle} buttons={[{ id: "search", icon: <Search /> }, { id: "filter", icon: <Settings2 /> }]} ref={ref} />
<div className="w-full grow rounded-2xl justify-center mask-alpha sm:portrait:mask-t-from-transparent md:landscape:mask-t-from-transparent mask-t-to-20 mask-t-to-black">
<div className="relative h-fit w-full md:px-6 pt-4 pb-32">
{builtData.data?.filter && data.title}
{(builtData.data?.filter || (!data.filters && !data.builder)) && <Suspense fallback={<LoadingCardList grid placeholderCount={data.countHit ?? 8} id={`${focusKey}-list`} />}>
<StickyHeaderUI title={data.headerTitle} buttonElements={data.headerButtonElements} buttons={data.headerButtons} ref={ref} >
{data.headerChildren}
</StickyHeaderUI>
<div className="w-full grow justify-center mask-alpha sm:portrait:mask-t-from-transparent md:landscape:mask-t-from-transparent mask-t-to-20 mask-t-to-black">
<div className="relative h-fit w-full md:pr-6 pt-4 pb-32 pl-16">
<div className='absolute top-0 bottom-0 left-0 right-0 bg-radial from-base-100 to-base-300 -z-1'></div>
<div className='mobile:hidden bg-noise'></div>
<div className='mobile:hidden bg-dots'></div>
{finalFilter && data.title}
{<Suspense fallback={<LoadingCardList grid placeholderCount={data.countHint ?? 8} id={`${focusKey}-list`} />}>
<GameList
key={`${data.id}-${JSON.stringify(finalFilter)}`}
grid
filters={builtData.data?.filter}
setFilterValues={setFilterValues}
filters={finalFilter}
onFocus={handleScroll}
focus={data.focus}
id={`${focusKey}-list`}>
</GameList>
<AutoFocus parentKey={focusKey} focus={focusSelf} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={100} />
</Suspense>}
<div className='absolute top-0 bottom-0 left-0 right-0 bg-radial from-base-100 to-base-300'></div>
<div className='mobile:hidden bg-noise z-1'></div>
<div className='mobile:hidden bg-dots z-1'></div>
</div>
</div>
<footer className="px-2 pb-2 fixed bottom-0 w-full h-12 flex items-center justify-between">
@ -85,6 +95,9 @@ export function CollectionsDetail (data: CollectionsDetailParams)
</div>
<FloatingShortcuts />
</footer>
<div className='fixed left-2 top-24 bottom-0 sm:w-10 md:w-14'>
<SideFilters id='filter-btns' localFilter={data.localFilter} setLocalFilter={data.setLocalFilter} filterValues={filterValues} filters={data.filters} />
</div>
</div>
<SelectMenu rootFocusKey={focusKey} />
</FocusContext>

7
src/mainview/components/Constants.tsx Normal file
View file

@ -0,0 +1,7 @@
import { Gamepad2, HardDrive, Store } from "lucide-react";
export const sourceIconMap: Record<string, any> = {
store: <Store />,
local: <HardDrive />,
romm: <Gamepad2 />
};

17
src/mainview/components/ContextDialog.tsx
View file

@ -35,7 +35,7 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
const handleAction = () =>
{
if (data.disabled === true) return;
data.action?.({ close: context.close, focus: focusSelf });
data.action?.({ close: context.close, focus: focusSelf, selected: data.selected });
oneShot('click');
};
const { ref, focusSelf, focusKey } = useFocusable({
@ -82,7 +82,7 @@ export interface DialogEntry
icon?: string | JSX.Element;
type: 'primary' | 'secondary' | 'accent' | 'info' | 'warning' | 'error';
selected?: boolean;
action?: (ctx: { close: () => void, focus: (focusDetails?: FocusDetails | undefined) => void; }) => void;
action?: (ctx: { close: () => void, focus: (focusDetails?: FocusDetails | undefined) => void; selected?: boolean; }) => void;
shortcuts?: Shortcut[];
}
@ -102,6 +102,7 @@ export function useContextDialog (id: string, data: { content?: JSX.Element; cla
{
setOpen(false);
data.onClose?.();
oneShot('closeContext');
if (newSourceFocusKey)
{
setFocus(newSourceFocusKey, { instant: true });
@ -118,7 +119,12 @@ export function useContextDialog (id: string, data: { content?: JSX.Element; cla
return {
dialog,
open,
setOpen: handleClose
setOpen: handleClose,
setToggle: (focNewSourceFocusKey?: string | undefined) =>
{
if (open) handleClose(false, focNewSourceFocusKey);
else handleClose(true, focNewSourceFocusKey);
}
};
}
@ -142,7 +148,6 @@ export function ContextDialog (data: {
const handleClose = () =>
{
data.close(false);
oneShot('closeContext');
};
useEffect(() =>
{
@ -161,7 +166,7 @@ export function ContextDialog (data: {
}] : [], [data.open]);
return <dialog ref={ref} open={data.open} closedby="any" className={
twMerge("fixed modal cursor-pointer bg-base-300/80 backdrop-blur-md backdrop-brightness-50 duration-300 ease-in-out transition-all text-base-content",
twMerge("fixed modal cursor-pointer bg-base-300/80 not-mobile:backdrop-blur-md backdrop-brightness-50 duration-300 ease-in-out transition-all text-base-content",
classNames({ "opacity-0": !data.open }), data.backdropClassName)
}
onClick={handleClose}>
@ -169,7 +174,7 @@ export function ContextDialog (data: {
<ContextDialogContext value={{ id: data.id, close: handleClose }} >
<div
className={twMerge(
"bg-base-100/80 delay-200 rounded-4xl sm:p-4 md:p-6 sm:min-w-[80vw] md:min-w-[20vw] cursor-auto backdrop-blur-2xl",
"bg-base-100/80 delay-200 rounded-4xl sm:p-4 md:p-6 sm:min-w-[80vw] md:min-w-[20vw] max-h-[80vh] overflow-y-auto cursor-auto not-mobile:backdrop-blur-2xl",
data.open ? "animate-scale-delayed" : "opacity-0",
data.className)
}

18
src/mainview/components/GameList.tsx
View file

@ -3,28 +3,28 @@ import { GameMetaExtra, CardList } from "./CardList";
import { DefaultRommStaleTime, GameListFilterType, RPC_URL } from "@shared/constants";
import { useNavigate } from "@tanstack/react-router";
import { HardDrive } from "lucide-react";
import { JSX, useContext } from "react";
import { GameCardFocusHandler } from "./CardElement";
import { JSX, Ref, useContext, useEffect } from "react";
import { useLocalSetting } from "../scripts/utils";
import { AnimatedBackgroundContext } from "../scripts/contexts";
import { allGamesQuery } from "@queries/romm";
export interface GameListParams
export interface GameListParams extends FocusParams
{
id: string,
filters?: GameListFilterType,
grid?: boolean,
setBackground?: (url: string) => void;
onGameSelect?: (id: FrontEndId, source: string | null, sourceId: string | null) => void;
onFocus?: GameCardFocusHandler;
focus?: string;
className?: string;
finalElement?: JSX.Element;
saveChildFocus?: "session" | "local";
setFilterValues?: (filters: FrontEndFilterLists) => void;
}
export function GameList (data: GameListParams)
{
const games = useSuspenseQuery({ ...allGamesQuery(data.filters), staleTime: DefaultRommStaleTime });
const games = useSuspenseQuery({ ...allGamesQuery(data.filters), queryKey: ['games', data.filters ?? 'all'], staleTime: DefaultRommStaleTime });
const navigator = useNavigate();
const blur = useLocalSetting('backgroundBlur');
const backgroundContext = useContext(AnimatedBackgroundContext);
@ -48,6 +48,11 @@ export function GameList (data: GameListParams)
}
};
useEffect(() =>
{
data.setFilterValues?.(games.data.filters);
}, [games.data.filters]);
function handleDefaultSelect (g: FrontEndGameType)
{
navigator({ to: '/game/$source/$id', params: { id: String(g.source_id ?? g.id.id), source: g.source ?? g.id.source } });
@ -60,9 +65,10 @@ export function GameList (data: GameListParams)
type="game"
grid={data.grid}
className={data.className}
onGameFocus={data.onFocus}
onFocus={data.onFocus}
finalElement={data.finalElement}
saveChildFocus={data.saveChildFocus}
focus={data.focus}
games={games.data?.games
.map(
(g) =>

8
src/mainview/components/Header.tsx
View file

@ -234,7 +234,7 @@ export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
});
}
return <div onClick={handleSelect} ref={ref} style={{ viewTimelineName: "header-accounts" }} className="avatar-group cursor-pointer -space-x-6 w-fit flex items-center gap-2 drop-shadow-sm overflow-visible rounded-3xl focusable focusable-hover ">
return <div onClick={handleSelect} ref={ref} style={{ viewTimelineName: "header-accounts" }} className="avatar-group cursor-pointer -space-x-6 w-fit flex items-center gap-2 drop-shadow-sm overflow-visible rounded-3xl focusable focusable-primary focusable-hover ">
{accounts?.map(a => <HeaderAvatar
key={`header-avatar-${a.id}`}
id={`account-${a.id}`}
@ -260,7 +260,8 @@ export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElement
</div>
{!!data.buttons && <div className="divider divider-horizontal mx-0"></div>}
<div className="flex gap-2">
{data.buttonElements ?? data.buttons?.map(b => <RoundButton
{data.buttonElements}
{data.buttons?.map(b => <RoundButton
key={b.id}
className={twMerge("header-icon sm:size-10 md:size-14", b.className)}
id={b.id}
@ -306,7 +307,7 @@ export function HeaderUI (data: HeaderUIParams)
);
}
export function StickyHeaderUI (data: { ref: RefObject<any>; className?: string; } & HeaderUIParams)
export function StickyHeaderUI (data: { ref: RefObject<any>; className?: string; children?: any; } & HeaderUIParams)
{
const [isStuck, setIsStuck] = useState(false);
const headerRef = useRef(null);
@ -317,6 +318,7 @@ export function StickyHeaderUI (data: { ref: RefObject<any>; className?: string;
<div ref={sentinelRef} className="h-0" />
<div ref={headerRef} className={twMerge('sticky not-mobile:data-stuck:backdrop-blur-xl transition-all top-0 px-2 p-2 not-data-stuck:bg-base-200 mobile:bg-base-300 z-15', data.className)}>
<HeaderUI focusable={!isStuck} {...data} />
{data.children}
</div>
</>;
}

102
src/mainview/components/HeaderSearchField.tsx Normal file
View file

@ -0,0 +1,102 @@
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import { Ref, RefObject, useEffect, useRef, useState } from "react";
import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
import { oneShot } from "../scripts/audio/audio";
import { Search } from "lucide-react";
import { RoundButton } from "./RoundButton";
import { useEventListener } from "usehooks-ts";
function SearchInput (data: {
id: string;
autoSearch?: boolean;
search: string | undefined;
compact: boolean | undefined;
onInputFocus: () => void;
setShowInput: (show: boolean) => void;
onSubmit: (search: string | undefined) => void;
} & FocusParams)
{
const { ref, focusKey } = useFocusable({
onBlur: () => inputRef.current?.blur(),
onFocus: (l, p, d) =>
{
data.onFocus?.(focusKey, ref.current, { ...d, inputRef });
if (data.autoSearch) inputRef.current?.focus();
},
focusKey: data.id,
onEnterPress: () =>
{
if (document.activeElement === inputRef.current)
{
if (inputRef.current)
data.onSubmit?.(inputRef.current.value);
} else
{
inputRef.current?.focus();
}
}
});
const inputRef = useRef<HTMLInputElement>(null);
const [localSearch, setLocalSearch] = useState(data.search);
useEffect(() =>
{
setLocalSearch(data.search ?? "");
}, [data.search]);
useShortcuts(focusKey, () => document.activeElement === inputRef.current ? [{
label: "Cancel",
button: GamePadButtonCode.B, action (e)
{
inputRef.current?.blur();
oneShot('returnGeneric');
},
}] : [], [inputRef.current, document.activeElement]);
useEventListener('search' as any, e =>
{
data.onSubmit?.(undefined);
}, inputRef as any);
return <label ref={ref} onFocus={data.onInputFocus} className='input rounded-full input-lg w-full max-w-xs has-focus:bg-base-300 ring-primary focused:ring-7 has-focus:ring-7 has-focus:ring-base-content'>
<Search />
<input
onBlur={e =>
{
data.setShowInput(false);
setLocalSearch(data.search);
}}
autoFocus={data.compact}
ref={inputRef}
value={localSearch ?? ""}
onChange={v => setLocalSearch(v.target.value)}
type='search'
placeholder='Search'
/>
</label>;
}
export default function HeaderSearchField (data: {
id: string;
autoSearch?: boolean;
search: string | undefined,
onSubmit: (search: string | undefined) => void;
compact?: boolean;
} & FocusParams)
{
const [showInput, setShowInput] = useState(false);
const { ref, focusKey, focusSelf } = useFocusable({
focusKey: data.id,
focusBoundaryDirections: ['left', "right"],
isFocusBoundary: data.compact && showInput
});
return <div ref={ref} className='flex items-center'>
<FocusContext value={focusKey}>
{(!data.compact || showInput) && <SearchInput autoSearch={data.autoSearch} onFocus={data.onFocus} id={`${data.id}-field`} search={data.search} onSubmit={data.onSubmit} compact={data.compact} setShowInput={setShowInput} onInputFocus={focusSelf} />}
{data.compact && !showInput && <RoundButton onAction={e => setShowInput(true)} className="header-icon sm:size-10 md:size-14" id={`${data.id}-field`} ><Search /></RoundButton>}
</FocusContext>
</div>;
}

6
src/mainview/components/LoadMoreButton.tsx
View file

@ -4,9 +4,9 @@ import { useIntersectionObserver } from "usehooks-ts";
export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
{
const handleAction = (e?: Event) =>
const handleAction = (event?: Event) =>
{
data.onAction?.(e);
data.onAction?.({ event, focusKey });
if (data.lastId && focused)
setFocus(FOCUS_KEYS.GAME_CARD(data.lastId));
};
@ -18,8 +18,6 @@ export default function LoadMoreButton (data: { isFetching: boolean; lastId?: Fr
onEnterPress: handleAction
});
const { ref: intersct } = useIntersectionObserver({
initialIsIntersecting: true,
rootMargin: "20%",

6
src/mainview/components/PlatformsList.tsx
View file

@ -5,7 +5,6 @@ import { CardList, GameMetaExtra } from "./CardList";
import { rommApi } from "../scripts/clientApi";
import { JSX, useMemo } from "react";
import { HardDrive } from "lucide-react";
import { GameCardFocusHandler } from "./CardElement";
import { mobileCheck } from "../scripts/utils";
import { twMerge } from "tailwind-merge";
@ -13,11 +12,10 @@ export function PlatformsList (data: {
id: string,
setBackground: (url: string) => void;
className?: string;
onFocus?: GameCardFocusHandler;
grid?: boolean;
onSelect?: (source: string, id: string) => void;
saveChildFocus?: "session" | "local";
})
} & FocusParams)
{
const isMobile = mobileCheck();
const navigate = useNavigate();
@ -88,7 +86,7 @@ export function PlatformsList (data: {
id={data.id}
grid={data.grid}
className={twMerge('*:aspect-8/10! md:py-12', data.className)}
onGameFocus={data.onFocus}
onFocus={data.onFocus}
games={platformsMapped}
onSelectGame={(id) =>
{

6
src/mainview/components/Screenshots.tsx
View file

@ -12,9 +12,9 @@ import { twMerge } from "tailwind-merge";
function Screenshot (data: { path: string; index: number; setFocused?: (index: number) => void; } & InteractParams)
{
const imageRef = useRef<HTMLImageElement>(null);
const { ref, focusSelf } = useFocusable({
const { ref, focusSelf, focusKey } = useFocusable({
focusKey: `screenshot-${data.index}`,
onEnterPress: () => data.onAction?.(),
onEnterPress: () => data.onAction?.({ focusKey }),
onFocus: (e, p, details) =>
{
data.setFocused?.(data.index);
@ -23,7 +23,7 @@ function Screenshot (data: { path: string; index: number; setFocused?: (index: n
}); 4096;
return <div ref={ref} className="group relative flex min-w-fit aspect-video max-h-[60vh] rounded-3xl focusable focusable-accent not-focused:cursor-pointer overflow-hidden">
<img ref={imageRef} draggable={false} className="object-cover w-full h-full" onClick={e => focusSelf({ nativeEvent: e.nativeEvent })} src={`${RPC_URL(__HOST__)}${data.path}`} loading="lazy" decoding="async" />
<div className="absolute flex justify-center items-center bottom-2 right-2 size-10 rounded-full bg-base-100 hover:bg-base-content hover:text-base-300 cursor-pointer opacity-60 not-control-mouse:hidden invisible group-has-hover:visible" onClick={e => data.onAction?.(e.nativeEvent)}> <Fullscreen /> </div>
<div className="absolute flex justify-center items-center bottom-2 right-2 size-10 rounded-full bg-base-100 hover:bg-base-content hover:text-base-300 cursor-pointer opacity-60 not-control-mouse:hidden invisible group-has-hover:visible" onClick={e => data.onAction?.({ event: e.nativeEvent, focusKey })}> <Fullscreen /> </div>
</div>;
}

3
src/mainview/components/SelectMenu.tsx
View file

@ -9,7 +9,6 @@ import { FOCUS_KEYS } from "../scripts/types";
export default function SelectMenu (data: { rootFocusKey: string; })
{
const navigate = useNavigate();
const routeState = useRouterState();
const matchRoute = useMatchRoute();
const options: DialogEntry[] = [
@ -85,7 +84,7 @@ export default function SelectMenu (data: { rootFocusKey: string; })
];
const { dialog, setOpen, open } = useContextDialog('select-menu', {
content: <ContextList showCloseButton={false} options={options} />,
className: 'absolute flex flex-col justify-center left-0 top-0 bottom-0 rounded-none',
className: 'absolute flex flex-col justify-center left-0 top-0 bottom-0 rounded-none max-h-screen',
preferredChildFocusKey: FOCUS_KEYS.CONTEXT_DIALOG_OPTION('select-menu', options.find(o => o.selected)?.id ?? '')
});
useShortcuts(data.rootFocusKey, () => [{

147
src/mainview/components/SideFilters.tsx Normal file
View file

@ -0,0 +1,147 @@
import { GameListFilterType } from "@/shared/constants";
import { RoundButton } from "./RoundButton";
import classNames from "classnames";
import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
import { useFocusable, FocusContext } from "@noriginmedia/norigin-spatial-navigation";
import { ArrowDownAz, ClockArrowDown, CalendarArrowDown, Rocket, HardDrive, SortDesc, User, Drama, FunnelX, Store } from "lucide-react";
import { sourceIconMap } from "./Constants";
import { useContextDialog, ContextList, DialogEntry } from "./ContextDialog";
function FilterButton (data: {
id: string,
filters?: GameListFilterType,
tooltip: string,
icon: any;
dialog: {
setToggle: (focNewSourceFocusKey?: string | undefined) => void;
};
isActive: boolean;
})
{
const handleAction = () => data.dialog.setToggle(data.id);
useShortcuts(data.id, () => [{ label: data.tooltip, action: handleAction, button: GamePadButtonCode.A }]);
return <div className="tooltip tooltip-right" data-tip={data.tooltip}>
<RoundButton
id={data.id}
onAction={handleAction}
className={classNames('sm:p-2 md:p-3 drop-shadow-md!', { "border-4 border-primary": data.isActive })}
>
{data.icon}
</RoundButton>
</div>;
}
export default function SideFilters (data: {
id: string,
filters?: GameListFilterType;
setLocalFilter: (filter: GameListFilterType) => void,
localFilter: GameListFilterType,
filterValues: FrontEndFilterLists | undefined;
})
{
const { ref, focusKey } = useFocusable({ focusKey: data.id });
const orderByDialog = useContextDialog('order-by-dialog', {
content: <ContextList options={([
{ stat: "name", icon: <ArrowDownAz /> },
{ stat: "activity", icon: <ClockArrowDown /> },
{ stat: "added", icon: <CalendarArrowDown /> },
{ stat: "release", icon: <Rocket /> },
] satisfies { stat: GameListFilterType['orderBy'], icon?: any; }[])
.map(o => ({
content: o.stat,
icon: o.icon,
selected: data.localFilter.orderBy === o.stat,
id: `sort-by-${o.stat}`,
type: 'primary',
action (ctx)
{
data.setLocalFilter({ ...data.localFilter, orderBy: o.stat });
ctx.close();
},
}))} />,
preferredChildFocusKey: `sort-by-${data.localFilter.orderBy}`
});
const sourceFilterDialog = useContextDialog('source-filter-dialog', {
content: <ContextList options={["romm"]
.map<DialogEntry>(o => ({
content: o,
icon: sourceIconMap[o],
selected: data.localFilter.source === o,
id: `source-filter-${o}`,
type: 'primary',
action (ctx)
{
if (ctx.selected) data.setLocalFilter({ ...data.localFilter, source: undefined });
else data.setLocalFilter({ ...data.localFilter, source: o });
ctx.close();
},
})).concat({
content: "Local Only",
icon: <HardDrive />,
selected: data.localFilter.localOnly === true,
id: `source-filter-local`,
type: 'primary',
action (ctx)
{
if (ctx.selected) data.setLocalFilter({ ...data.localFilter, localOnly: undefined });
else data.setLocalFilter({ ...data.localFilter, localOnly: true });
ctx.close();
},
})} />,
preferredChildFocusKey: `source-filter-${data.localFilter.source}`
});
const genreFilterDialog = useContextDialog('genre-filter-dialog', {
content: <ContextList options={data.filterValues?.genres.map(g => ({
content: g,
selected: data.localFilter.genres?.includes(g),
id: `genre-filter-${g}`,
type: 'primary',
action (ctx)
{
if (ctx.selected) data.setLocalFilter({ ...data.localFilter, genres: [...data.localFilter.genres?.filter(genre => genre !== g) ?? []] });
else data.setLocalFilter({ ...data.localFilter, genres: [...data.localFilter.genres ?? [], g] });
ctx.close();
},
}))} />
});
const ageRatingFilterDialog = useContextDialog('age-rating-filter-dialog', {
content: <ContextList options={data.filterValues?.age_ratings.map(a => ({
content: a,
selected: data.localFilter.age_ratings?.includes(a),
id: `age-rating-filter-${a}`,
type: 'primary',
action (ctx)
{
if (ctx.selected) data.setLocalFilter({ ...data.localFilter, age_ratings: [...data.localFilter.age_ratings?.filter(age => age !== a) ?? []] });
else data.setLocalFilter({ ...data.localFilter, age_ratings: [...data.localFilter.age_ratings ?? [], a] });
ctx.close();
},
}))} />
});
return <div className='flex flex-col gap-2' ref={ref}>
<FocusContext value={focusKey} >
<FilterButton tooltip='Sorting' id='filter-order-by' dialog={orderByDialog} isActive={!!data.localFilter.orderBy} icon={<SortDesc />} />
<FilterButton tooltip='Age Rating' id='filter-age-ratings' dialog={ageRatingFilterDialog} isActive={!!data.localFilter.age_ratings && data.localFilter.age_ratings.length > 0} icon={<User />} />
<FilterButton tooltip='Genre' id='filter-genre' dialog={genreFilterDialog} isActive={!!data.localFilter.genres && data.localFilter.genres.length > 0} icon={<Drama />} />
{!data.filters?.source &&
<FilterButton tooltip='Source' id='filter-source' dialog={sourceFilterDialog} isActive={!!data.localFilter.source || data.localFilter.localOnly !== undefined} icon={<Store />} />
}
{Object.values(data.localFilter).some(v => v !== undefined) &&
<>
<div className="divider m-0"></div>
<RoundButton id={'filter-clear'} onAction={() => data.setLocalFilter({})} className='p-3 drop-shadow-md!' > <FunnelX /> </RoundButton>
</>
}
{orderByDialog.dialog}
{sourceFilterDialog.dialog}
{genreFilterDialog.dialog}
{ageRatingFilterDialog.dialog}
</FocusContext>
</div>;
}

2
src/mainview/components/StatList.tsx
View file

@ -37,7 +37,7 @@ export default function StatList (data: {
content = <div key={`label-items-${i}`} className="flex flex-wrap gap-2">{s.content.map((c, ci) => <span key={`label-items-${i}-${ci}`} className={twMerge("rounded-3xl bg-base-200 px-3 py-1", data.elementClassName)}>{c}</span>)}</div>;
} else
{
content = <div key={`label-element-${i}`} className={twMerge("flex gap-2 rounded-2xl bg-base-200 px-3 py-2", data.elementClassName)}>{s.icon}{s.content}</div>;
content = <div key={`label-element-${i}`} className={twMerge("flex break-after-all gap-2 rounded-2xl bg-base-200 px-3 py-2", data.elementClassName)}>{s.icon}{s.content}</div>;
}
return [<Label key={`label-${i}`} id={`${data.id}-label-${i}`} label={s.label} />, <div key={`content-${i}`}>{content}</div>];
})}

7
src/mainview/components/game/ActionButton.tsx
View file

@ -13,11 +13,10 @@ export default function ActionButton (data: {
onFocus?: () => void;
tooltip?: string,
tooltip_type?: 'accent' | 'error';
onAction?: () => void;
disabled?: boolean;
})
} & InteractParams)
{
const { ref } = useFocusable({ focusKey: data.id, onFocus: data.onFocus, onEnterPress: data.onAction, focusable: data.disabled !== true });
const { ref, focusKey } = useFocusable({ focusKey: data.id, onFocus: data.onFocus, onEnterPress: () => data.onAction?.({ focusKey }), focusable: data.disabled !== true });
const styles = {
primary: "bg-primary text-primary-content focused:bg-base-content focused:text-base-300 focusable focusable-primary",
base: " text-base-content border-dashed border-base-content/20 border-2 focused:bg-base-content focused:text-base-300 focusable focusable-primary",
@ -29,7 +28,7 @@ export default function ActionButton (data: {
<button
disabled={data.disabled}
ref={ref}
onClick={data.onAction}
onClick={e => data.onAction?.({ event: e.nativeEvent, focusKey })}
data-tooltip={data.tooltip}
data-tooltip-type={data.tooltip_type}
className={twMerge("header-icon flex flex-col gap-2 md:px-5 md:py-4 rounded-3xl md:text-2xl justify-center items-center cursor-pointer disabled:opacity-30 active:bg-base-100 active:transition-none active:text-base-content",

9
src/mainview/components/game/Details.tsx
View file

@ -9,6 +9,7 @@ import ActionButtons from "./ActionButtons";
import prettyMilliseconds from 'pretty-ms';
import { useQuery } from "@tanstack/react-query";
import { validateSourceQuery } from "@/mainview/scripts/queries/romm";
import { sourceIconMap } from "../Constants";
export function DetailElement (data: { icon: JSX.Element; tooltip?: string | null, children?: any | any[]; })
{
@ -20,12 +21,6 @@ export function DetailElement (data: { icon: JSX.Element; tooltip?: string | nul
);
}
const sourceIconMap: Record<string, any> = {
store: <Store />,
local: <HardDrive />,
romm: <Gamepad2 />
};
export default function Details (data: {
game?: FrontEndGameTypeDetailed,
source: string,
@ -81,7 +76,7 @@ export default function Details (data: {
<DetailElement icon={platformCoverImg ? <img className="size-6" src={platformCoverImg.href}></img> : <div className="skeleton size-6 rounded-full shrink-0"></div>} >{data.game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</DetailElement>
{data.game?.emulators?.some(e => e.integrations.some(i => i.capabilities?.includes('saves'))) && <DetailElement tooltip={"Save Backup"} icon={<CloudUpload />} />}
<DetailElement tooltip={validation?.reason} icon={
validation ? validation.valid ? sourceIconMap[data.game?.source ?? ''] : <TriangleAlert className="text-error" /> : <span className="loading loading-spinner loading-lg"></span>
validation ? validation.valid ? sourceIconMap[data.game?.source ?? data.game?.id.source ?? ''] : <TriangleAlert className="text-error" /> : <span className="loading loading-spinner loading-lg"></span>
} >
{data.game?.source ?? data.game?.id.source}
{data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</DetailElement>

8
src/mainview/components/options/Button.tsx
View file

@ -36,9 +36,9 @@ export function Button (data: {
tooltipType?: "base" | "accent" | "error" | "warning";
} & InteractParams & FocusParams)
{
const handleAction = (e?: any) =>
const handleAction = (event?: Event) =>
{
data.onAction?.(e);
data.onAction?.({ event, focusKey });
oneShot('click');
};
const { ref, focused, focusKey } = useFocusable({
@ -50,12 +50,12 @@ export function Button (data: {
if (data.shortcutLabel)
{
useShortcuts(focusKey, () => [{ label: data.shortcutLabel, action: data.onAction, button: GamePadButtonCode.A }], [data.shortcutLabel]);
useShortcuts(focusKey, () => [{ label: data.shortcutLabel, action: handleAction, button: GamePadButtonCode.A }], [data.shortcutLabel]);
}
return <button
ref={ref}
onClick={handleAction}
onClick={e => handleAction(e.nativeEvent)}
disabled={data.disabled}
data-tooltip={data.tooltip}
data-tooltip-type={data.tooltipType}

2
src/mainview/components/options/PathSettingsOption.tsx
View file

@ -101,7 +101,7 @@ export function PathSettingsOptionBase (data: PathSettingsOptionParams & {
onBlur={handleInputBlur}
onChange={(e) =>
{
data.setLocalValue(e);
data.setLocalValue(String(e));
}}
value={data.localValue}
/>

2
src/mainview/components/options/SettingsAppForm.tsx
View file

@ -29,7 +29,7 @@ function FormOption (data: { type: HTMLInputTypeAttribute, icon?: JSX.Element; l
name={field.name}
value={field.state.value}
type={data.type}
onChange={v => field.handleChange(v)}
onChange={v => field.handleChange(String(v))}
placeholder={data.placeholder}
className={classNames({ " flex-3 ring-4 ring-accent": field.getMeta().isDirty })}
/>

2
src/mainview/components/options/SettingsOption.tsx
View file

@ -15,7 +15,7 @@ export function SettingsOption (data: {
})
{
const [dirty, setDirty] = useState(false);
const [localValue, setLocalValue] = useState<string | boolean | undefined>();
const [localValue, setLocalValue] = useState<string | number | boolean | undefined>();
const { data: serverValue } = useQuery(getSettingQuery(data.id));
const setMutation = useMutation(setSettingMutation(data.id));

6
src/mainview/components/store/EmulatorsSection.tsx
View file

@ -4,7 +4,7 @@ import
useFocusable,
FocusContext,
} from "@noriginmedia/norigin-spatial-navigation";
import { ChevronRight, Joystick } from "lucide-react";
import { ChevronRight, Joystick, LayoutGrid } from "lucide-react";
import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
import { scrollIntoNearestParent, useDragScroll } from "@/mainview/scripts/utils";
import FocusDots from "../FocusDots";
@ -26,9 +26,9 @@ function SeeAllCard (data: { id: string; onAction: () => void; onFocus?: (detail
role="button"
tabIndex={0}
onClick={data.onAction}
className={"flex focusable focusable-info bg-base-100 rounded-4xl transition-shadow focused:animate-scale-small p-4 justify-center items-center min-w-2xs gap-2 hover:bg-base-300 cursor-pointer"}
className={"flex focusable focusable-hover focusable-info bg-base-100 rounded-4xl transition-shadow focused:animate-scale-small p-4 justify-center items-center min-w-2xs gap-2 cursor-pointer"}
>
See All Emulators <ChevronRight />
<LayoutGrid /> See All Emulators <ChevronRight />
</div>;
}

4
src/mainview/components/store/StoreEmulatorCard.tsx
View file

@ -95,9 +95,9 @@ export function StoreEmulatorCard (data: {
>
<div className="bg-primary in-data-[full-support=false]:bg-warning in-data-[full-support=false]:text-warning-content in-aria-disabled:bg-base-200 in-aria-disabled:text-base-content text-primary-content rounded-full p-1.5"><WandSparkles className="size-5" /></div>
</div>}
{data.emulator.validSources.slice(0, 3).map(s =>
{data.emulator.validSources.slice(0, 3).map((s, i) =>
{
return <div className="tooltip" data-tip={s.type}>
return <div key={i} className="tooltip" data-tip={s.type}>
<div data-source={s.type} className="flex items-center justify-center rounded-full p-1 size-8 bg-base-300 text-base-content data-[source=store]:bg-success data-[source=store]:text-success-content">
{emulatorStatusIcons[s.type]}
</div>

13
src/mainview/routes/__root.tsx
View file

@ -6,6 +6,8 @@ import { mobileCheck, useLocalSetting } from "../scripts/utils";
import useActiveControl from "../scripts/gamepads";
import { useEffect } from "react";
import AppCommunication from "../components/AppCommunication";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
export const Route = createRootRouteWithContext<RouterContext>()({
component: RootComponent,
@ -32,6 +34,9 @@ function RootComponent ()
}, [theme]);
const queryDevOptions = useLocalSetting('showQueryDevOptions');
const routerDevOptions = useLocalSetting('showRouterDevOptions');
return (
<div data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
<AppCommunication>
@ -39,12 +44,8 @@ function RootComponent ()
</AppCommunication>
<Notifications />
<Toaster containerStyle={{ viewTimelineName: 'toasters', viewTransitionName: 'notifications' }} />
{/*import.meta.env.DEV && !isMobile &&
<>
<TanStackRouterDevtools position="top-left" />
<ReactQueryDevtools buttonPosition="top-right" />
</>
*/}
{queryDevOptions && <ReactQueryDevtools buttonPosition="top-right" />}
{routerDevOptions && <TanStackRouterDevtools position="top-left" />}
</div >
);
}

16
src/mainview/routes/collection.$source.$id.tsx
View file

@ -6,10 +6,14 @@ import { AnimatedBackgroundContext } from '../scripts/contexts';
import { getCollectionQuery } from '@queries/romm';
import { zodValidator } from '@tanstack/zod-adapter';
import z from 'zod';
import { GameListFilterType } from '@/shared/constants';
import { useLocalStorage } from 'usehooks-ts';
export const Route = createFileRoute('/collection/$source/$id')({
component: RouteComponent,
validateSearch: zodValidator(z.object({ countHint: z.number().optional() }))
validateSearch: zodValidator(z.object({
countHint: z.number().optional()
}))
});
function RouteComponent ()
@ -18,8 +22,16 @@ function RouteComponent ()
const { countHint } = Route.useSearch();
const { data: collection } = useQuery(getCollectionQuery(source, id));
const animatedBgContext = useContext(AnimatedBackgroundContext);
const [filter, setFilter] = useLocalStorage<GameListFilterType>("collection-filter", {});
return (
<CollectionsDetail countHit={countHint} setBackground={animatedBgContext.setBackground} title={<div className="divider font-semibold text-2xl">{collection?.name}</div>} filters={{ collection_id: Number(id), collection_source: source }} />
<CollectionsDetail
localFilter={filter}
setLocalFilter={setFilter}
countHint={countHint}
setBackground={animatedBgContext.setBackground}
title={<div className="divider font-semibold text-2xl">{collection?.name}</div>}
filters={{ collection_id: Number(id), collection_source: source }}
/>
);
}

13
src/mainview/routes/game/$source.$id.tsx
View file

@ -23,7 +23,6 @@ import { GamesSection } from "@/mainview/components/store/GamesSection";
import Details from "@/mainview/components/game/Details";
import { AutoFocus } from "@/mainview/components/AutoFocus";
import SelectMenu from "@/mainview/components/SelectMenu";
import { stat } from "node:fs";
export const Route = createFileRoute("/game/$source/$id")({
loader: async ({ params, context }) =>
@ -97,12 +96,12 @@ function Stats (data: { game: FrontEndGameTypeDetailed | undefined; })
{
if (data.game.path_fs)
stats.push({ label: "Location", content: data.game.path_fs, icon: <Folder /> });
if (data.game.companies)
stats.push({ label: "Companies", content: data.game.companies });
if (data.game.genres)
stats.push({ label: 'Genres', content: data.game.genres });
if (data.game.release_date)
stats.push({ label: "Release Date", content: data.game.release_date.toLocaleDateString(), icon: <Calendar /> });
if (data.game.metadata.companies)
stats.push({ label: "Companies", content: data.game.metadata.companies });
if (data.game.metadata.genres)
stats.push({ label: 'Genres', content: data.game.metadata.genres });
if (data.game.metadata.first_release_date)
stats.push({ label: "Release Date", content: data.game.metadata.first_release_date.toLocaleDateString(), icon: <Calendar /> });
if (data.game.emulators)
stats.push({ label: "Emulators", content: data.game.emulators.map(e => e.name) });
if (data.game.source)

25
src/mainview/routes/games.tsx
View file

@ -2,15 +2,36 @@ import { createFileRoute } from '@tanstack/react-router';
import { CollectionsDetail } from '../components/CollectionsDetail';
import { zodValidator } from '@tanstack/zod-adapter';
import z from 'zod';
import { GameListFilterType } from '@/shared/constants';
import { useSessionStorage } from 'usehooks-ts';
import HeaderSearchField from '../components/HeaderSearchField';
import { useEffect, useState } from 'react';
import { setFocus } from '@noriginmedia/norigin-spatial-navigation';
export const Route = createFileRoute('/games')({
component: RouteComponent,
validateSearch: zodValidator(z.object({ focus: z.string().optional() }))
validateSearch: zodValidator(z.object({
focus: z.string().optional(),
search: z.string().optional()
}))
});
function RouteComponent ()
{
const { focus } = Route.useSearch();
const { search } = Route.useSearch();
const [filter, setFilter] = useSessionStorage<GameListFilterType>('all-games-filters', {});
return <CollectionsDetail focus={focus} id='all-games' />;
useEffect(() =>
{
setFilter(v => ({ ...v, search }));
}, [search]);
return <CollectionsDetail
headerButtonElements={<HeaderSearchField onSubmit={v => setFilter({ ...filter, search: v })} search={filter.search} id='search-filter' />}
localFilter={filter}
setLocalFilter={setFilter}
focus={focus}
id='all-games'
/>;
}

18
src/mainview/routes/index.tsx
View file

@ -47,6 +47,7 @@ import { gameQuery } from "../scripts/queries/romm";
import { oneShot } from "../scripts/audio/audio";
import { FloatingShortcuts } from "../components/Shortcuts";
import SelectMenu from "../components/SelectMenu";
import HeaderSearchField from "../components/HeaderSearchField";
export const Route = createFileRoute("/")({
component: ConsoleHomeUI,
@ -232,13 +233,13 @@ function MainMenu ()
>
<FocusContext.Provider value={focusKey}>
<CircleIcon
onAction={(e) => router.navigate({ to: "/games", state: { eventType: e?.type } })}
onAction={(e) => router.navigate({ to: "/games", state: { eventType: e?.event?.type } })}
icon={<Gamepad2 />}
label="Home"
type="secondary"
/>
<CircleIcon icon={<MessageSquare />} label="News" />
<CircleIcon type="info" icon={<Store />} onAction={(e) => router.navigate({ to: "/store/tab", state: { eventType: e?.type } })} label="Shop" />
<CircleIcon type="info" icon={<Store />} onAction={(e) => router.navigate({ to: "/store/tab", state: { eventType: e?.event?.type } })} label="Shop" />
<CircleIcon icon={<Image />} label="Album" />
<CircleIcon
icon={<Gamepad2 />}
@ -247,7 +248,7 @@ function MainMenu ()
<CircleIcon
onAction={(e) =>
{
router.navigate({ to: '/settings/accounts', state: { eventType: e?.type } });
router.navigate({ to: '/settings/accounts', state: { eventType: e?.event?.type } });
}}
icon={<Settings />}
label="Settings"
@ -264,9 +265,9 @@ function CircleIcon (data: {
icon?: JSX.Element;
} & InteractParams)
{
const handleAction = (e?: Event) =>
const handleAction = (event?: Event) =>
{
data.onAction?.(e);
data.onAction?.({ event, focusKey });
oneShot('click');
};
const { ref, focusKey } = useFocusable({
@ -313,10 +314,13 @@ export default function ConsoleHomeUI ()
if (mobileCheck())
headerButtons.push({ id: "fullscreen", icon: <Maximize />, action: handleFullscreen });
headerButtons.push(
{ id: "search-header-button", icon: <Search /> },
{ id: "power-button", icon: <Power />, external: true, action: () => close.mutate(), className: "focusable-error!" },
{ id: "settings-header-button", icon: <Settings />, external: true, action: () => router.navigate({ to: "/settings/accounts" }) }
);
const handleSearch = (search: string | undefined) =>
{
router.navigate({ to: '/games', search: { search } });
};
return (
<AnimatedBackground animated ref={ref} backgroundKey="home-background" className="grid grid-cols-3 sm:landscape:grid-rows-[3rem_minmax(var(--game-card-height-safe),1fr)_4rem] md:landscape:grid-rows-[5rem_4rem_minmax(var(--game-card-height-safe),1fr)_6rem_6rem] gap-1 portrait:grid-rows-[3rem_4rem_minmax(var(--game-card-height-safe),1fr)] max-h-screen overflow-clip">
@ -334,7 +338,7 @@ export default function ConsoleHomeUI ()
/>
</div>
<div className="flex sm:landscape:col-span-2 sm:portrait:col-start-2 sm:portrait:col-span-2 sm:portrait:row-start-1 md:col-start-3 md:col-span-1 justify-end md:pr-2 md:pt-2">
<HeaderStatusBar buttons={headerButtons} />
<HeaderStatusBar buttons={headerButtons} buttonElements={<HeaderSearchField compact id={"header-search-field"} search={undefined} onSubmit={handleSearch} />} />
</div>
<div className="col-span-3 min-h-0 landscape:flex landscape:items-center-safe">
<HomeList

12
src/mainview/routes/platform.$source.$id.tsx
View file

@ -1,14 +1,17 @@
import { createFileRoute } from "@tanstack/react-router";
import { CollectionsDetail } from "../components/CollectionsDetail";
import { useQuery } from "@tanstack/react-query";
import { RPC_URL } from "../../shared/constants";
import { GameListFilterSchema, GameListFilterType, RPC_URL } from "../../shared/constants";
import { platformQuery } from "@queries/romm";
import { zodValidator } from "@tanstack/zod-adapter";
import z from "zod";
import { useLocalStorage } from "usehooks-ts";
export const Route = createFileRoute("/platform/$source/$id")({
component: RouteComponent,
validateSearch: zodValidator(z.object({ countHint: z.number().optional() }))
validateSearch: zodValidator(z.object({
countHint: z.number().optional()
}))
});
function PlatformTitle (data: {})
@ -29,11 +32,14 @@ function RouteComponent ()
{
const { source, id } = Route.useParams();
const { countHint } = Route.useSearch();
const [filter, setFilter] = useLocalStorage<GameListFilterType>("platforms-filters", {});
return (
<div className="w-full h-full">
<CollectionsDetail
countHit={countHint}
localFilter={filter}
setLocalFilter={setFilter}
countHint={countHint}
title={<PlatformTitle />}
filters={{ platform_id: Number(id), platform_source: source }}
/>

2
src/mainview/routes/settings/emulators.tsx
View file

@ -148,7 +148,7 @@ function EmulatorPath (data: { id: string; })
autocomplete="off"
onChange={(v) =>
{
setLocalValue(v);
setLocalValue(v as string);
setDirty(true);
}}
value={localValue}

6
src/mainview/routes/settings/interface.tsx
View file

@ -1,6 +1,7 @@
import { LocalOption } from '@/mainview/components/options/LocalOption';
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { createFileRoute } from '@tanstack/react-router';
import { Terminal } from 'lucide-react';
export const Route = createFileRoute('/settings/interface')({
component: RouteComponent,
@ -22,6 +23,11 @@ function RouteComponent ()
<LocalOption id='soundEffects' label="Sounds" type='checkbox'></LocalOption>
<LocalOption id='soundEffectsVolume' min={0} max={100} step={10} label="Sounds" type='range'></LocalOption>
<LocalOption id='hapticsEffects' label="Haptics" type='checkbox'></LocalOption>
{import.meta.env.DEV && <>
<div className="divider">Dev Settings<Terminal /></div>
<LocalOption id='showQueryDevOptions' label="Show Query Options" type='checkbox'></LocalOption>
<LocalOption id='showRouterDevOptions' label="Show Router Options" type='checkbox'></LocalOption>
</>}
</FocusContext>
</ul>;
}

2
src/mainview/routes/settings/plugins.tsx
View file

@ -28,7 +28,7 @@ function Plugin (data: {
<div className='text-sm text-base-content/40'>{data.plugin.name} ({data.plugin.version})</div>
</div>
</div>} className='flex p-4 bg-base-200 rounded-3xl'>
<OptionInput onChange={data.setEnabled} value={data.plugin.enabled} name={data.plugin.name} type="checkbox" />
<OptionInput onChange={v => data.setEnabled(!!v)} value={data.plugin.enabled} name={data.plugin.name} type="checkbox" />
<Button id={`${data.plugin.name}-details`} ><Search /> Details</Button>
</OptionSpace>;
}

34
src/mainview/routes/store/details.emulator.$id.tsx
View file

@ -356,40 +356,6 @@ export function RouteComponent ()
});
const stats: StatEntry[] = [];
if (emulator)
{
if (emulator.keywords)
stats.push({ label: "Tags", content: emulator.keywords });
if (emulator.storeDownloadInfo)
stats.push({ label: "Version", content: `${emulator.storeDownloadInfo.version ?? "Unknown"} (${emulator.storeDownloadInfo.type})` });
stats.push({ label: "Systems", content: emulator.systems.map(s => s.name) });
stats.push(...emulator.validSources.flatMap(s => [{
label: "Source", content: <div className="flex flex-col grow">
<div className="flex grow flex-wrap justify-between gap-1">
<div className="flex gap-1">{emulatorStatusIcons[s.type]}{s.type}</div>
<div className="text-base-content/40">{s.binPath}</div>
</div>
{emulator.integrations.some(i => i.source?.type === s.type) && <div className="divider m-0"></div>}
{emulator.integrations.filter(i => i.source?.type === s.type).map(i =>
{
return <div key={i.id} className="flex flex-wrap justify-between gap-1">
<div className="flex gap-2">
<Puzzle />
<div>{i.id}</div>
</div>
<div className="flex flex-wrap text-base-content/40">
{i.capabilities?.map(c => <><div className="divider divider-horizontal"></div><div className="flex gap-1">{capabilityIconMap[c]}{c}</div></>)}
</div>
</div>;
})}
</div>
}]));
if (emulator.bios)
stats.push({
label: "Bios", content: emulator.bios && emulator.bios.length > 0 ? emulator.bios : <div className="text-warning font-semibold">Missing</div>
});
}
return (
<AnimatedBackground ref={ref} className="" scrolling>

6
src/mainview/routes/store/tab/emulators.tsx
View file

@ -10,6 +10,7 @@ import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
import { useQuery } from '@tanstack/react-query';
import { storeEmulatorsQuery } from '@queries/store';
import InvalidStoreError from '@/mainview/components/store/InvalidStoreError';
import { useSessionStorage } from 'usehooks-ts';
export const Route = createFileRoute('/store/tab/emulators')({
component: RouteComponent,
@ -18,13 +19,14 @@ export const Route = createFileRoute('/store/tab/emulators')({
function RouteComponent ()
{
const { focus } = useSearch({ from: '/store/tab' });
const { focus } = Route.useSearch();
const [search] = useSessionStorage<string | undefined>(`${Route.to}-search`, undefined);
const { ref, focusKey, focusSelf } = useFocusable({
focusKey: "main-area",
preferredChildFocusKey: focus
});
const storeContext = useContext(StoreContext);
const { data: emulators } = useQuery({ ...storeEmulatorsQuery, retry: false, throwOnError: true });
const { data: emulators } = useQuery({ ...storeEmulatorsQuery({ search }), retry: false, throwOnError: true });
useEffect(() =>
{

87
src/mainview/routes/store/tab/games.tsx
View file

@ -1,27 +1,43 @@
import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { createFileRoute, useSearch } from '@tanstack/react-router';
import { Gamepad2 } from 'lucide-react';
import { useContext, useEffect } from 'react';
import { useInfiniteQuery } from '@tanstack/react-query';
import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router';
import { Gamepad2, HardDrive } from 'lucide-react';
import { JSX, useContext, useEffect, useState } from 'react';
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
import FrontEndGameCard from '@/mainview/components/FrontEndGameCard';
import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
import LoadMoreButton from '@/mainview/components/LoadMoreButton';
import { storeGamesInfiniteQuery } from '@queries/store';
import { StoreContext } from '@/mainview/scripts/contexts';
import InvalidStoreError from '@/mainview/components/store/InvalidStoreError';
import { CardList, GameMetaExtra } from '@/mainview/components/CardList';
import { GameListFilterType, RPC_URL } from '@/shared/constants';
import { useSessionStorage } from 'usehooks-ts';
import { zodValidator } from '@tanstack/zod-adapter';
import z from 'zod';
import SideFilters from '@/mainview/components/SideFilters';
export const Route = createFileRoute('/store/tab/games')({
component: RouteComponent,
errorComponent: InvalidStoreError
errorComponent: InvalidStoreError,
validateSearch: zodValidator(z.object({
search: z.string().optional()
}))
});
function RouteComponent ()
{
const { focus } = useSearch({ from: '/store/tab' });
const { focus } = Route.useSearch();
const [search] = useSessionStorage<string | undefined>(`${Route.to}-search`, undefined);
const navigator = useNavigate();
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "main-area", preferredChildFocusKey: focus });
const [filter, setFilter] = useSessionStorage<GameListFilterType>('store-games-filters', {});
const { data, fetchNextPage, isFetchingNextPage, isFetching } = useInfiniteQuery(storeGamesInfiniteQuery(filter));
const [filterValues, setFilterValues] = useState<FrontEndFilterLists>();
const { data, fetchNextPage, isFetchingNextPage, isFetching } = useInfiniteQuery(storeGamesInfiniteQuery);
const storeContext = useContext(StoreContext);
useEffect(() =>
{
setFilter(v => ({ ...v, search }));
}, [search]);
useEffect(() =>
{
@ -38,6 +54,11 @@ function RouteComponent ()
node.scrollIntoView({ behavior: details.instant ? 'instant' : 'smooth', block: 'center' });
};
function handleDefaultSelect (g: FrontEndGameType)
{
navigator({ to: '/game/$source/$id', params: { id: g.id.id, source: g.id.source } });
};
return <>
<section ref={ref} className="px-6 py-4 animate-slide-up">
<FocusContext value={focusKey}>
@ -47,19 +68,8 @@ function RouteComponent ()
Games
</h2>
</div>
<div className="grid grid-cols-[repeat(auto-fill,18rem)] auto-rows-[21rem] py-2 md:px-4 gap-4 justify-center-safe">
{data?.pages.flatMap((page) => (
page.data.map((g, i) => <FrontEndGameCard onFocus={(k, n, d) =>
{
storeContext.prefetchDetails('game', g.id.source, g.id.id);
handleFocus(k, n, d);
}} key={g.id.id} game={g} index={i} />))
) ?? Array.from({ length: 20 }).map((_, i) => <div key={i} className="flex flex-col gap-4">
<div className="skeleton grow w-full"></div>
<div className="skeleton h-4 w-[80%]"></div>
<div className="skeleton h-4 w-[40%]"></div>
</div>)}
<LoadMoreButton
<div className="pl-12">
<CardList grid finalElement={<LoadMoreButton
lastId={data?.pages.at(-1)?.data.at(-1)?.id}
onFocus={handleFocus}
isFetching={isFetchingNextPage || isFetching}
@ -68,7 +78,40 @@ function RouteComponent ()
if (isFetchingNextPage || isFetching)
return;
fetchNextPage();
}} />
}} />} games={data?.pages.flatMap((page) => page.data.map((g) =>
{
const badges: JSX.Element[] = [];
if (g.id.source === 'local')
{
badges.push(<HardDrive className="sm:size-4 md:size-8 md:p-1 m-1" />);
}
const previewUrl = new URL(`${RPC_URL(__HOST__)}${g.path_cover}`);
previewUrl.searchParams.delete('ts');
const platformUrl = new URL(`${RPC_URL(__HOST__)}${g.path_platform_cover}`);
platformUrl.searchParams.set('width', "64");
return {
id: `${g.id.source}@${g.id.id}`,
focusKey: `${g.id.source}@${g.id.id}`,
title: g.name ?? "",
subtitle: (
<div className="flex gap-1 items-center">
{!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={platformUrl.href} />}
<p className="opacity-80">{g.platform_display_name}</p>
</div>
),
previewUrl: previewUrl.href,
badges: badges,
onSelect: () => handleDefaultSelect(g),
onFocus: (k, n, d) => handleFocus(k, n, d)
} satisfies GameMetaExtra as GameMetaExtra;
})
) ?? []} id={'store-games'} />
</div>
<div className='fixed left-2 top-52 bottom-0 sm:w-10 md:w-14 z-10'>
<SideFilters id='filter-btns' localFilter={filter} setLocalFilter={setFilter} filterValues={filterValues} filters={{ source: 'store' }} />
</div>
</FocusContext>
</section>

21
src/mainview/routes/store/tab/route.tsx
View file

@ -1,6 +1,7 @@
import { AutoFocus } from '@/mainview/components/AutoFocus';
import { FilterUI } from '@/mainview/components/Filters';
import { HeaderUI } from '@/mainview/components/Header';
import HeaderSearchField from '@/mainview/components/HeaderSearchField';
import SelectMenu from '@/mainview/components/SelectMenu';
import Shortcuts, { FloatingShortcuts } from '@/mainview/components/Shortcuts';
import { StoreContext } from '@/mainview/scripts/contexts';
@ -13,7 +14,8 @@ import { useQueryClient } from '@tanstack/react-query';
import { useMatchRoute, useRouter } from '@tanstack/react-router';
import { createFileRoute, Outlet } from '@tanstack/react-router';
import { zodValidator } from '@tanstack/zod-adapter';
import { useRef } from 'react';
import { useRef, useState } from 'react';
import { useSessionStorage } from 'usehooks-ts';
import z from 'zod';
export const Route = createFileRoute('/store/tab')({
@ -95,6 +97,8 @@ function RouteComponent ()
emulators: { label: "Emulators", selected: useIsSettings('emulators') },
games: { label: "Games", selected: useIsSettings('games') }
};
const [search, setSearch] = useSessionStorage<string | undefined>(`${router.history.location.pathname}-search`, undefined);
const [, setGamesSearch] = useSessionStorage<string | undefined>(`/store/tab/games-search`, undefined);
const handleDetails = (type: string, source: string, id: string, focus: string) =>
{
@ -120,6 +124,19 @@ function RouteComponent ()
}
};
const handleSearch = (search: string | undefined) =>
{
if (filters['home'].selected)
{
setGamesSearch(search);
router.navigate({ to: '/store/tab/games', replace: true, viewTransition: { types: ['slide-up'] } });
} else
{
setSearch(search);
}
};
const isMobile = mobileCheck();
useStickyDataAttr(headerRef, sentinelRef, ref);
@ -129,7 +146,7 @@ function RouteComponent ()
<div className="relative flex flex-col min-h-screen text-base-content z-10" >
<div ref={sentinelRef} className="h-0" />
<div ref={headerRef} className='sticky p-2 group top-0 not-mobile:data-stuck:backdrop-blur-xl z-15 mobile:data-stuck:bg-base-300'>
<HeaderUI />
<HeaderUI buttonElements={<HeaderSearchField compact={useIsSettings('')} id={'store-search'} search={search} onSubmit={handleSearch} />} />
</div>
<TopArea filters={filters} />
<StoreOutlet />

13
src/mainview/scripts/queries/store.ts
View file

@ -1,11 +1,12 @@
import { infiniteQueryOptions, mutationOptions, queryOptions } from "@tanstack/react-query";
import { rommApi, storeApi } from "../clientApi";
import { GameListFilterType } from "@/shared/constants";
export const storeEmulatorsQuery = queryOptions({
queryKey: ['store-emulators'], queryFn: async () =>
export const storeEmulatorsQuery = (filters: { search?: string; }) => queryOptions({
queryKey: ['store-emulators', filters], queryFn: async () =>
{
const { data, error } = await storeApi.api.store.emulators.get();
const { data, error } = await storeApi.api.store.emulators.get({ query: { search: filters.search } });
if (error) throw new Error(JSON.stringify(error.value));
return data;
}
@ -42,14 +43,14 @@ export const storeEmulatorDeleteMutation = mutationOptions({
if (error) throw error;
}
});
export const storeGamesInfiniteQuery = infiniteQueryOptions<{ data: FrontEndGameType[], nextPage: number; }>({
export const storeGamesInfiniteQuery = (filter: GameListFilterType) => infiniteQueryOptions<{ data: FrontEndGameType[], nextPage: number; }>({
initialPageParam: 0,
queryKey: ['store-games'],
queryKey: ['store-games', filter],
getNextPageParam: (lastPage, pages) => lastPage.nextPage,
queryFn: async (data) =>
{
const pageParam = data.pageParam as number;
const { data: games, error } = await rommApi.api.romm.games.get({ query: { source: 'store', offset: pageParam * 10, limit: 10 } });
const { data: games, error } = await rommApi.api.romm.games.get({ query: { ...filter, source: 'store', offset: pageParam * 10, limit: 10 } });
if (error) throw error;
return { data: games.games, nextPage: pageParam + 1 };
}

4
src/mainview/scripts/shortcuts.ts
View file

@ -191,7 +191,7 @@ export function useShortcutContext ()
return { shortcuts: array };
}
export function useShortcuts (focusKey: string, build: () => Shortcut[], ...deps: DependencyList)
export function useShortcuts (focusKey: string, build: () => Shortcut[], deps?: DependencyList)
{
useEffect(() =>
{
@ -211,6 +211,6 @@ export function useShortcuts (focusKey: string, build: () => Shortcut[], ...deps
markDirtyThrottled();
};
}, [...deps, focusKey]);
}, [focusKey, ...deps ?? []]);
}

8
src/mainview/types.d.ts vendored
View file

@ -50,9 +50,15 @@ declare interface FocusParams
onFocus?: (focusKey: string, node: HTMLElement, details: Record<string, any>) => void;
}
declare interface InteractParamsArgs
{
event?: Event,
focusKey?: string;
}
declare interface InteractParams
{
onAction?: (e?: Event) => void;
onAction?: (ctx: InteractParamsArgs) => void;
}
declare interface FilterOption extends FocusParams, InteractParams