refactor: moved queries to their own file

src/mainview/components/store/EmulatorsSection.tsx

@@ -12,6 +12,7 @@ import { Router } from "@/mainview";
 import { StoreEmulatorCard } from "./StoreEmulatorCard";
 import { FOCUS_KEYS } from "@/mainview/scripts/types";
 import { FrontEndEmulator } from "@/shared/constants";
+import Carousel from "../Carousel";
 
 function SeeAllCard (data: { id: string; onAction: () => void; onFocus?: (details: { node: HTMLElement, instant: boolean; }) => void; })
 {
@@ -34,7 +35,7 @@ function SeeAllCard (data: { id: string; onAction: () => void; onFocus?: (detail
 
 export function EmulatorsSection (data: {
     id: string;
-    emulators: FrontEndEmulator[];
+    emulators?: FrontEndEmulator[];
     onSelect?: (id: string, focusKey: string) => void;
     header?: any;
 } & FocusParams)
@@ -60,17 +61,19 @@ export function EmulatorsSection (data: {
                         </h2>
                     </>}
                 </div>
-                <div ref={containerRef} className="flex *:min-w-[18rem] overflow-y-hidden overflow-x-scroll scrollbar-none py-2 px-4 gap-4 select-none">
+
+                <Carousel scrollRef={containerRef} className="flex *:min-w-[18rem] overflow-y-hidden overflow-x-scroll scrollbar-none py-2 px-4 gap-4 select-none">
                     {data.emulators?.map((em) => (
                         <StoreEmulatorCard id={`${data.id}-${em.name}`} key={em.name} emulator={em} onSelect={(id, focusKey) => data.onSelect?.(em.name, focusKey)} onFocus={({ node, details }) =>
                         {
                             scrollIntoNearestParent(node, { behavior: details.instant ? 'instant' : 'smooth' });
                         }} />
-                    ))}
+                    )) ?? Array.from({ length: 8 }).map((_, i) => <div key={i} className="skeleton h-38 w-full rounded-4xl" />)}
                     <SeeAllCard id={`${FOCUS_KEYS.EMULATOR_SECTION}-see-all`} onAction={() => Router.navigate({ to: '/store/tab/emulators' })} onFocus={({ node, instant }) => scrollIntoNearestParent(node, { behavior: instant ? 'instant' : 'smooth' })} />
-                </div>
+                </Carousel>
+
             </section>
-            {!!data.emulators && <FocusDots elements={data.emulators.map(e => FOCUS_KEYS.EMULATOR_CARD(e.name))} />}
+            <FocusDots elements={data.emulators?.map(e => FOCUS_KEYS.EMULATOR_CARD(e.name))} />
         </FocusContext.Provider>
     );
 }

src/mainview/components/store/GamesSection.tsx

@@ -4,15 +4,16 @@ import
     useFocusable,
     FocusContext,
 } from "@noriginmedia/norigin-spatial-navigation";
-import { Gamepad2 } from "lucide-react";
+import { Gamepad2, Star } from "lucide-react";
 import { useDragScroll } from "@/mainview/scripts/utils";
 import FocusDots from "../FocusDots";
 import { FrontEndGameType, FrontEndId } from "@/shared/constants";
 import FrontEndGameCard from "../FrontEndGameCard";
 import { FOCUS_KEYS } from "@/mainview/scripts/types";
+import Carousel from "../Carousel";
 
 export function GamesSection ({ games, onSelect, onFocus }: {
-    games: FrontEndGameType[];
+    games?: FrontEndGameType[];
     onSelect?: (id: FrontEndId, focusKey: string) => void;
 } & FocusParams)
 {
@@ -33,17 +34,17 @@ export function GamesSection ({ games, onSelect, onFocus }: {
                     <h2 className="font-bold uppercase tracking-widest text-accent grow">
                         Featured Games
                     </h2>
-                    <div className="badge badge-xl badge-accent badge-soft">Curated picks</div>
+                    <div className="flex gap-2 bg-accent text-accent-content rounded-full py-1 px-4 font-semibold opacity-80"><Star />Creator Picks</div>
                 </div>
-                <div ref={containerRef} className="grid grid-flow-col auto-cols-[18rem] overflow-y-hidden overflow-x-auto hide-scrollbar p-4 gap-4 justify-center-safe">
-                    {games.map((g, i) => <FrontEndGameCard
+                <Carousel controlsClassName="z-20" scrollRef={containerRef} className="flex *:w-[18rem] *:min-w-[18rem] *:h-[21rem] overflow-y-hidden overflow-x-auto hide-scrollbar p-4 gap-4 justify-center-safe">
+                    {games?.map((g, i) => <FrontEndGameCard
                         key={g.id.id}
                         game={g}
                         onAction={() => onSelect?.(g.id, FOCUS_KEYS.GAME_CARD(g.id.id))}
-                        index={i} />)}
-                </div>
+                        index={i} />) ?? Array.from({ length: 8 }).map((_, i) => <div key={i} className="skeleton h-38 w-full" />)}
+                </Carousel>
             </section>
-            <FocusDots elements={games.map(e => FOCUS_KEYS.GAME_CARD(e.id.id))} />
+            <FocusDots elements={games?.map(e => FOCUS_KEYS.GAME_CARD(e.id.id)) ?? []} />
         </FocusContext.Provider>
     );
 }

src/mainview/components/store/StatsSection.tsx

@@ -1,4 +1,5 @@
-import { storeApi } from "@/mainview/scripts/clientApi";
+
+import queries from "@/mainview/scripts/queries";
 import { useQuery } from "@tanstack/react-query";
 import { Joystick, LibraryBig, Save, TriangleAlert } from "lucide-react";
 
@@ -14,14 +15,7 @@ export function StatsSection ({
 }: StatsSectionProps)
 {
 
-    const { data: stats } = useQuery({
-        queryKey: ['store', 'stats'], queryFn: async () =>
-        {
-            const { data, error } = await storeApi.api.store.stats.get();
-            if (error) throw error;
-            return data;
-        }
-    });
+    const { data: stats } = useQuery(queries.store.storeGetStatsQuery);
 
     return (
         <section className="px-6 pt-3 pb-4">