feat: Implemented dolphin integration

src/mainview/routes/game/$source.$id.tsx

@@ -3,7 +3,7 @@ import { RPC_URL } from "@shared/constants";
 import { useEffect, useRef, useState } from "react";
 import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { Calendar, Folder, Gamepad2, Image, Info, TriangleAlert, Trophy } from "lucide-react";
-import { HeaderUI } from "../../components/Header";
+import { HeaderUI, StickyHeaderUI } from "../../components/Header";
 import { AnimatedBackground } from "../../components/AnimatedBackground";
 import { useQuery } from "@tanstack/react-query";
 import Shortcuts from "../../components/Shortcuts";
@@ -146,7 +146,6 @@ function RouteComponent ()
   const [, setUpdate] = useState(0);
   const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details", forceFocus: true });
   const headerRef = useRef(null);
-  const sentinelRef = useRef(null);
   const backgroundImage = data ? new URL(`${RPC_URL(__HOST__)}${data.path_cover}`) : undefined;
   const { data: recommendedGames } = useQuery({ ...gamesRecommendedBasedOnGameQuery(data?.id.source ?? source, data?.id.id ?? id), enabled: !!data && recommendedGamesVisible });
 
@@ -158,7 +157,6 @@ function RouteComponent ()
 
   const { shortcuts } = useShortcutContext();
 
-  useStickyDataAttr(headerRef, sentinelRef, ref);
   const recommendedEmulators = data?.emulators?.filter(e => e.validSources.some(em => em.exists));
 
   const { ref: intersct } = useIntersectionObserver({
@@ -176,10 +174,7 @@ function RouteComponent ()
       }} >
         <div className="z-10">
           <FocusContext value={focusKey}>
-            <div ref={sentinelRef} className="h-0" />
-            <div ref={headerRef} className="sticky group top-0 bg-base-100/40 group p-2 z-15 transition-colors data-stuck:backdrop-blur-3xl">
-              <HeaderUI />
-            </div>
+            <StickyHeaderUI ref={headerRef} className="not-data-stuck:bg-base-200/40" />
             <div className="flex flex-col h-[calc(100vh-12rem)] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40">
               <Details game={data} id={id} source={source} />
             </div>

src/mainview/routes/index.tsx

@@ -315,8 +315,8 @@ export default function ConsoleHomeUI ()
     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() },
-    { id: "settings-header-button", icon: <Settings />, external: true, action: () => Router.navigate({ to: "/settings/accounts" }) }
+    { 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" }) }
   );
 
   return (

src/mainview/routes/store/tab/emulators.tsx

@@ -1,7 +1,7 @@
 
 
-import { createFileRoute, useSearch } from '@tanstack/react-router';
-import { Joystick } from 'lucide-react';
+import { createFileRoute, ErrorComponentProps, useSearch } from '@tanstack/react-router';
+import { Joystick, TriangleAlert } from 'lucide-react';
 import { useContext, useEffect } from 'react';
 import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
 import { StoreEmulatorCard } from '@/mainview/components/store/StoreEmulatorCard';
@@ -9,9 +9,11 @@ import { StoreContext } from '@/mainview/scripts/contexts';
 import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
 import { useQuery } from '@tanstack/react-query';
 import { storeEmulatorsQuery } from '@queries/store';
+import InvalidStoreError from '@/mainview/components/store/InvalidStoreError';
 
 export const Route = createFileRoute('/store/tab/emulators')({
   component: RouteComponent,
+  errorComponent: InvalidStoreError
 });
 
 function RouteComponent ()
@@ -22,7 +24,7 @@ function RouteComponent ()
     preferredChildFocusKey: focus
   });
   const storeContext = useContext(StoreContext);
-  const { data: emulators } = useQuery(storeEmulatorsQuery);
+  const { data: emulators } = useQuery({ ...storeEmulatorsQuery, retry: false, throwOnError: true });
 
   useEffect(() =>
   {

src/mainview/routes/store/tab/games.tsx

@@ -8,9 +8,11 @@ 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';
 
 export const Route = createFileRoute('/store/tab/games')({
-  component: RouteComponent
+  component: RouteComponent,
+  errorComponent: InvalidStoreError
 });
 
 function RouteComponent ()