- {blur && finalLastBackgroundUrl && 
}
+
{finalBackgroundUrl ? ![]()
+ {
+ sub.close();
+ };
}, []);
return
diff --git a/src/mainview/components/AutoFocus.tsx b/src/mainview/components/AutoFocus.tsx
index 74c6da4..ae0bb33 100644
--- a/src/mainview/components/AutoFocus.tsx
+++ b/src/mainview/components/AutoFocus.tsx
@@ -1,5 +1,5 @@
import { doesFocusableExist, FocusDetails, getCurrentFocusKey } from "@noriginmedia/norigin-spatial-navigation";
-import { useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
export function AutoFocus (data: {
parentKey?: string;
@@ -8,11 +8,15 @@ export function AutoFocus (data: {
delay?: number;
})
{
- useLayoutEffect(() =>
+ useEffect(() =>
{
let delayTimeout: number | undefined;
- if (data.force || !getCurrentFocusKey() || getCurrentFocusKey() === data.parentKey || !doesFocusableExist(getCurrentFocusKey()))
+ const focusDoesntExist = !doesFocusableExist(getCurrentFocusKey());
+ const parentFocus = getCurrentFocusKey() === data.parentKey;
+ const noFocus = !getCurrentFocusKey();
+
+ if (data.force || noFocus || parentFocus || focusDoesntExist)
{
if (data.delay)
{
@@ -21,8 +25,8 @@ export function AutoFocus (data: {
{
data.focus({ instant: true });
}
-
}
+
return () =>
{
if (delayTimeout)
diff --git a/src/mainview/components/CardList.tsx b/src/mainview/components/CardList.tsx
index 5de871d..d311167 100644
--- a/src/mainview/components/CardList.tsx
+++ b/src/mainview/components/CardList.tsx
@@ -32,7 +32,7 @@ function LocalCardElement (data: { game: GameMetaExtra, i: number; } & FocusPara
oneShot('click');
};
- useShortcuts(data.game.focusKey, () => [{ label: "Select", button: GamePadButtonCode.A, action: event => handleAction({ event, focusKey: data.game.focusKey }) }]);
+ useShortcuts(data.game.focusKey, () => [{ label: "Details", button: GamePadButtonCode.A, action: event => handleAction({ event, focusKey: data.game.focusKey }) }]);
return (
0,
+ focusable: data.games.length > 0 || (!!data.finalElement && (Array.isArray(data.finalElement) ? data.finalElement.length > 0 : !!data.finalElement)),
preferredChildFocusKey: data.focus
});
diff --git a/src/mainview/components/Header.tsx b/src/mainview/components/Header.tsx
index b9bb9e3..cf36fe0 100644
--- a/src/mainview/components/Header.tsx
+++ b/src/mainview/components/Header.tsx
@@ -30,7 +30,7 @@ import { TwitchIcon } from "../scripts/brandIcons";
import { rommLoggedInQuery } from "../scripts/queries/romm";
import { twitchLoginVerificationQuery } from "../scripts/queries/settings";
import { SystemInfoContext } from "../scripts/contexts";
-import { useRouter } from "@tanstack/react-router";
+import { useNavigate, useRouter } from "@tanstack/react-router";
import { oneShot } from "../scripts/audio/audio";
import { hasUpdateQuery } from "../scripts/queries/system";
@@ -87,16 +87,24 @@ export interface HeaderAccount
function UpdateStatus ()
{
+ const handleSelect = () =>
+ {
+ navigate({ to: '/settings/about' });
+ };
const hasUnread = false;
- return
-
+
;
}
function NotificationStatus ()
{
const hasUnread = false;
- return
+ return
;
+ return
+ {
+ e.currentTarget.dataset.loaded = "true";
+ }}
+ >
+
+ ;
}
\ No newline at end of file
diff --git a/src/mainview/components/backgrounds/dots.tsx b/src/mainview/components/backgrounds/dots.tsx
index ce6e0af..5971082 100644
--- a/src/mainview/components/backgrounds/dots.tsx
+++ b/src/mainview/components/backgrounds/dots.tsx
@@ -1,8 +1,9 @@
+import { Ref, RefObject } from 'react';
import './dots.css';
-export default function DotsLoading ()
+export default function DotsLoading (data: { ref?: Ref; })
{
- return
@@ -267,7 +278,7 @@ export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElement
{!!data.buttons && }
diff --git a/src/mainview/components/ImageWithFallbacks.tsx b/src/mainview/components/ImageWithFallbacks.tsx
index 7954da3..6779b26 100644
--- a/src/mainview/components/ImageWithFallbacks.tsx
+++ b/src/mainview/components/ImageWithFallbacks.tsx
@@ -13,7 +13,20 @@ export default function ImageWithFallbacks (data: {
{
img.dataset.index = String(nextIndex);
img.src = data.src[nextIndex].href;
+
}
};
- return
+ return
diff --git a/src/mainview/components/game/MainActions.tsx b/src/mainview/components/game/MainActions.tsx
index c70369a..96a120f 100644
--- a/src/mainview/components/game/MainActions.tsx
+++ b/src/mainview/components/game/MainActions.tsx
@@ -109,7 +109,7 @@ export default function MainActions (data: { game?: FrontEndGameTypeDetailed, so
if (!cmd) return;
if (cmd.emulator === 'EMULATORJS')
{
- const params = new URLSearchParams(cmd.command);
+ const params = new URLSearchParams(Array.isArray(cmd.command) ? cmd.command[0] : cmd.command);
router.navigate({ to: '/embedded/$source/$id', params: { source: data.source, id: data.id }, search: Object.fromEntries(params.entries()) });
} else
{
@@ -120,14 +120,15 @@ export default function MainActions (data: { game?: FrontEndGameTypeDetailed, so
let mainButton: any | undefined = undefined;
if (status === 'installed')
{
- mainButton = handlePlay(validDefaultCommand)} tooltip={validDefaultCommand?.label ?? details}
- key="primary"
- type='primary'
- id="mainAction"
- >
- ;
}
-function GetStoreGamesCard ()
+function AdditionalCard (data: {
+ id: string,
+ route: keyof typeof Router.routesByPath,
+ title: string,
+ subTitle: string,
+ index: number,
+ actionLabel: string;
+ icon: LucideIcon | string;
+ badgeIcon?: LucideIcon;
+})
{
const router = useRouter();
- const handleNavigate = () =>
- {
- router.navigate({ to: '/store/tab/games' });
- };
- return
+ {typeof data.icon === 'string' ?
+ 
:
+ } focusKey={data.id} index={0} id={data.id} />;
}
function HomeList (data: {
@@ -197,8 +207,13 @@ function HomeList (data: {
id="games-list"
setBackground={bg.setBackground}
filters={{ limit: 12, orderBy: 'activity' }}
- finalElement={[
diff --git a/src/mainview/routes/settings/about.tsx b/src/mainview/routes/settings/about.tsx
index d30b291..3351ff5 100644
--- a/src/mainview/routes/settings/about.tsx
+++ b/src/mainview/routes/settings/about.tsx
@@ -1,8 +1,11 @@
-import { systemInfoQuery } from '@queries/system';
-import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/mainview/components/options/Button';
+import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
+import { checkUpdateMutation, hasUpdateQuery, systemInfoQuery, updateMutation } from '@queries/system';
+import { useMutation, useQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
+import { ArrowUpCircle, CircleFadingArrowUp, RefreshCcw } from 'lucide-react';
import prettyBytes from 'pretty-bytes';
export const Route = createFileRoute('/settings/about')({
@@ -12,58 +15,87 @@ export const Route = createFileRoute('/settings/about')({
function RouteComponent ()
{
const { data: systemInfo } = useQuery(systemInfoQuery);
- return
-
-
+
+
;
}
diff --git a/src/mainview/routes/settings/plugin.$source.tsx b/src/mainview/routes/settings/plugin.$source.tsx
index 78e0623..eedeada 100644
--- a/src/mainview/routes/settings/plugin.$source.tsx
+++ b/src/mainview/routes/settings/plugin.$source.tsx
@@ -1,4 +1,5 @@
import { AutoFocus } from '@/mainview/components/AutoFocus';
+import DotsLoading from '@/mainview/components/backgrounds/dots';
import { Button } from '@/mainview/components/options/Button';
import { OptionDropdown } from '@/mainview/components/options/OptionDropdown';
import { OptionInput } from '@/mainview/components/options/OptionInput';
@@ -7,16 +8,34 @@ import { RoundButton } from '@/mainview/components/RoundButton';
import { getAllPluginsQuery, getPluginDetailsQuery } from '@/mainview/scripts/queries/plugins';
import { getPluginActionsQuery, getPluginSettingQuery, getPluginSettingsDefinitionQuery, pluginActionMutation, setPluginSettingMutation } from '@/mainview/scripts/queries/settings';
import { GamePadButtonCode, useShortcuts } from '@/mainview/scripts/shortcuts';
+import { scrollIntoViewHandler } from '@/mainview/scripts/utils';
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import { JSONSchema7 } from 'json-schema';
import { ArrowLeft, CirclePlay, Play, Settings2, SettingsIcon } from 'lucide-react';
import toast from 'react-hot-toast';
export const Route = createFileRoute('/settings/plugin/$source')({
component: RouteComponent,
+ pendingComponent: Loading,
+ async loader (ctx)
+ {
+ const definitions = await ctx.context.queryClient.fetchQuery(getPluginSettingsDefinitionQuery(ctx.params.source));
+ const actions = await ctx.context.queryClient.fetchQuery(getPluginActionsQuery(ctx.params.source));
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return { definitions, actions };
+ },
});
+function Loading ()
+{
+ const { ref, focusSelf } = useFocusable({ focusKey: 'plugins' });
+ return <>
+
{!!definitions?.properties && Object.entries(Object.groupBy(Object.entries(definitions?.properties)
@@ -142,16 +165,19 @@ function RouteComponent ()
return
-
;
})}
+ (`${Route.to}-search`, undefined);
const navigator = useNavigate();
- const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "main-area", preferredChildFocusKey: focus });
+ const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "main-area", preferredChildFocusKey: focus ?? 'store-games' });
const [filter, setFilter] = useSessionStorage('store-games-filters', {});
const { data, fetchNextPage, isFetchingNextPage, isFetching } = useInfiniteQuery(storeGamesInfiniteQuery(filter));
const { data: gameFilters } = useQuery(gameFiltersQuery({ source: 'store' }));
@@ -80,7 +80,8 @@ function RouteComponent ()
if (isFetchingNextPage || isFetching)
return;
fetchNextPage();
- }} />} games={data?.pages.flatMap((page) => page.data.map((g) =>
+ }} />}
+ games={data?.pages.flatMap((page) => page.data.map((g) =>
{
const badges: JSX.Element[] = [];
if (g.id.source === 'local')
@@ -119,7 +120,8 @@ function RouteComponent ()
onFocus: (k, n, d) => handleFocus(k, n, d)
} satisfies GameMetaExtra as GameMetaExtra;
})
- ) ?? []} id={'store-games'} />
+ ) ?? []}
+ id={'store-games'} />
, "completed" | "ended", 'data'>) => void;
onCompleted?: (data: ExtractField, "completed" | "ended", 'data'>) => void;
onError?: (error: string) => void;
+ onClosed?: () => void;
},
deps?: DependencyList
)
@@ -289,6 +290,7 @@ export function useJobStatus init?.onClosed?.());
sub.subscribe(({ data }) =>
{
switch (data.type)
@@ -326,7 +328,7 @@ export function useJobStatus;
declare module "@emulators" {
const data: Record;
diff --git a/src/shared/types..d.ts b/src/shared/types..d.ts
index 2a03104..b715875 100644
--- a/src/shared/types..d.ts
+++ b/src/shared/types..d.ts
@@ -341,6 +341,7 @@ declare interface SaveFileChange
isGlob?: true;
cwd: string;
shared: boolean;
+ fixedSize?: boolean;
}
declare type SaveSlots = Record;
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 7029442..b396eae 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -102,7 +102,8 @@ export default defineConfig(({ command }) =>
},
define: {
__HOST__: JSON.stringify(host),
- __PUBLIC__: process.env.PUBLIC_ACCESS ? true : false
+ __PUBLIC__: process.env.PUBLIC_ACCESS ? true : false,
+ __FLATPAK__: process.env.FLATPAK_BUILD ? true : false
}
};
});
\ No newline at end of file
+ handlePlay(validDefaultCommand)} tooltip={validDefaultCommand?.label ?? details}
+ key="primary"
+ type='primary'
+ id="mainAction"
+ >
+
+
{validCommands.length > 1 &&
showAllCommands(true, 'allActionsBtn')}>
diff --git a/src/mainview/gen/static-icon-assets.gen.ts b/src/mainview/gen/static-icon-assets.gen.ts
index cb3fe1b..1d1a4aa 100644
--- a/src/mainview/gen/static-icon-assets.gen.ts
+++ b/src/mainview/gen/static-icon-assets.gen.ts
@@ -464,7 +464,7 @@ const assets = new Set([
]);
// Store basePath resolved from Vite config
-const BASE_PATH = "./";
+const BASE_PATH = "/";
/**
diff --git a/src/mainview/index.css b/src/mainview/index.css
index eb09eb3..532b330 100644
--- a/src/mainview/index.css
+++ b/src/mainview/index.css
@@ -7,7 +7,7 @@
@theme {
--breakpoint-sm: 0px;
- --breakpoint-md: 1280px;
+ --breakpoint-md: 1024px;
--page-scroll-bg: transparent;
--animation-size: 1;
diff --git a/src/mainview/routes/game/$source.$id.tsx b/src/mainview/routes/game/$source.$id.tsx
index 103d90f..d0a346e 100644
--- a/src/mainview/routes/game/$source.$id.tsx
+++ b/src/mainview/routes/game/$source.$id.tsx
@@ -166,7 +166,6 @@ function RouteComponent ()
return (
- setUpdate(v => v + 1)
}} >
@@ -214,6 +213,7 @@ function RouteComponent ()
| Agent | -{navigator.userAgent} | -
|---|---|
| Platform | -{navigator.platform} | -
| Resolution | -{screen.width}x{screen.height} | -
| Window | -{window.innerWidth}x{window.innerHeight} | -
| User | -{systemInfo?.data?.user} | -
| Architecture | -{systemInfo?.data?.arch} | -
| System | -{systemInfo?.data?.platform} | -
| Hostname | -{systemInfo?.data?.hostname} | -
| Machine | -{systemInfo?.data?.machine} | -
| Sizes | -Cache: {prettyBytes(systemInfo?.data?.cacheSize ?? 0)}, Store: {prettyBytes(systemInfo?.data?.storeSize ?? 0)} | -
| Source | -{systemInfo?.data?.source} | -
| Steam Deck | -{systemInfo?.data?.steamDeck ?? 'false'} | -
| Version | +{systemInfo?.data?.version} | +
|---|---|
| Update | ++ { + hasUpdate && hasUpdate.hasUpdate > 0 ? + : + + } + {} + | +
| Agent | +{navigator.userAgent} | +
| Platform | +{navigator.platform} | +
| Resolution | +{screen.width}x{screen.height} | +
| Window | +{window.innerWidth}x{window.innerHeight} | +
| User | +{systemInfo?.data?.user} | +
| Architecture | +{systemInfo?.data?.arch} | +
| System | +{systemInfo?.data?.platform} | +
| Hostname | +{systemInfo?.data?.hostname} | +
| Machine | +{systemInfo?.data?.machine} | +
| Sizes | +Cache: {prettyBytes(systemInfo?.data?.cacheSize ?? 0)}, Store: {prettyBytes(systemInfo?.data?.storeSize ?? 0)} | +
| Source | +{systemInfo?.data?.source} | +
| Steam Deck | +{systemInfo?.data?.steamDeck ?? 'false'} | +
+ 
{data?.displayName}
- {data?.keywords?.map((k, i) =>
- {k} )}
{data?.description}
-
- {
- e.currentTarget.dataset.loaded = "true";
- e.currentTarget.classList.toggle('scale-110', false);
- }}
- >
- {previewUrls?.map((u, i) =>
+
@@ -89,7 +81,7 @@ function Main (data: { games?: FrontEndGameTypeDetailed[]; })