feat First implementation of plugins system

feat: Added PCSX2 integration feat: Revamped UI a bit made it look better on light mode
2026-03-25 21:51:10 +02:00 · 2026-03-25 21:51:10 +02:00 · a78e75335f
commit a78e75335f
parent d85268fad7
95 changed files with 2639 additions and 1259 deletions
--- a/src/mainview/components/AnimatedBackground.tsx
+++ b/src/mainview/components/AnimatedBackground.tsx
@ -119,16 +119,18 @@ export function AnimatedBackground (data: {

            >
                {!data.scrolling && <div className='absolute top-0 left-0 right-0 bottom-0 overflow-hidden'>
-                    <div className='fixed bg-base-100 top-0 left-0 right-0 bottom-0 -z-5'></div>
-                    {blur && finalLastBackgroundUrl && <img className='absolute w-full h-full object-cover object-center -z-4' src={finalLastBackgroundUrl.href}></img>}
+                    {blur && finalLastBackgroundUrl && <img className='absolute w-full h-full object-cover object-center -z-4 mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner' src={finalLastBackgroundUrl.href}></img>}
                    {finalBackgroundUrl ? <img
+                        loading="lazy"
+                        decoding="async"
                        key={finalBackgroundUrl?.href}
-                        className={'absolute w-full h-full object-cover object-center opacity-0 -z-3'}
+                        className={'absolute w-full h-full object-cover object-center opacity-0 -z-3 mask-radial-from-0'}
                        src={finalBackgroundUrl?.href}
                        onLoad={e => e.currentTarget.classList.add(blur ? "animate-bg-zoom-big" : "animate-bg-zoom")}
                    ></img> : <><div className='mobile:hidden bg-gradient'></div></>}
                    <div className='absolute top-0 left-0 right-0 bottom-0 bg-linear-to-b from-base-100/60 to-base-300/80 -z-2' />
                    <div className='mobile:hidden bg-noise'></div>
+                    <div className='mobile:hidden bg-dots'></div>
                </div>}
                {data.animated && animateBackground && <div className="fixed overflow-hidden top-0 left-0 right-0 bottom-0" style={{ zIndex: -1 }}>
                    {backgroundElements}
@ -147,6 +149,7 @@ export function AnimatedBackground (data: {
                        backgroundColor: "var(--color-base-300)",
                    } : {}}></div>
                    <div className='mobile:hidden bg-noise opacity-30 z-1'></div>
+                    <div className='mobile:hidden bg-dots opacity-30 z-1'></div>
                </>}
            </div>
        </AnimatedBackgroundContext >
--- a/src/mainview/components/CardElement.tsx
+++ b/src/mainview/components/CardElement.tsx
@ -25,6 +25,7 @@ export interface GameCardParams
  type?: string;
  subtitle: string | JSX.Element;
  preview?: string | JSX.Element | ((p: { focused: boolean; }) => JSX.Element);
+  srcset?: string;
  focusKey: string;
  index: number;
  id: string;
@ -64,7 +65,7 @@ export default function CardElement (data: GameCardParams & InteractParams)
        data.onAction?.();
      }}
      className={twMerge(
-        "relative game-card 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-xl 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",
+        "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",
        data.className
      )}
    >
@ -75,7 +76,7 @@ export default function CardElement (data: GameCardParams & InteractParams)
        classNames({ "h-full": typeof data.preview === "string" })
      )}>
        {typeof data.preview === "string" ? (
-          <img draggable={false} className={classNames("object-cover w-full h-full", data.previewClassName, { "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img>
+          <img draggable={false} srcSet={data.srcset} className={classNames("object-cover w-full h-full", data.previewClassName, { "animate-rotate-small": focused && !isPointer })} src={data.preview} loading="lazy" decoding="async" ></img>
        ) : (
          typeof data.preview === 'function' ? data.preview({ focused }) : data.preview
        )}
--- a/src/mainview/components/CardList.tsx
+++ b/src/mainview/components/CardList.tsx
@ -56,6 +56,7 @@ export function CardList (data: {
        data-index={i}
        title={g.title}
        subtitle={g.subtitle ?? ""}
+        srcset={g.previewSrcset}
        onFocus={(id, node, details) =>
        {
          g.onFocus?.(details);
--- a/src/mainview/components/CollectionList.tsx
+++ b/src/mainview/components/CollectionList.tsx
@ -34,7 +34,7 @@ export default function CollectionList (data: {
                    title: g.name,
                    focusKey: `collection-${g.id}`,
                    subtitle: g.owner_username,
-                    previewUrl: `${RPC_URL(__HOST__)}/api/romm/${g.path_covers_large[0]}`,
+                    previewUrl: `${RPC_URL(__HOST__)}/api/romm/${g.path_covers_small[0]}`,
                    badges: [
                        <span className="text-lg font-bold badge bg-base-100 shadow-md shadow-base-300 h-8 rounded-full mr-2">
                            {g.rom_count}
--- a/src/mainview/components/CollectionsDetail.tsx
+++ b/src/mainview/components/CollectionsDetail.tsx
@ -7,10 +7,8 @@ import { JSX, Suspense, useEffect } from 'react';
 import Shortcuts from './Shortcuts';
 import { AutoFocus } from './AutoFocus';
 import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/shortcuts';
-import { PopNavigateSource } from '../scripts/spatialNavigation';
 import { GameListFilterType } from '@/shared/constants';
 import { GameCardFocusHandler } from './CardElement';
-import { Router } from '..';
 import { HandleGoBack } from '../scripts/utils';

 export interface CollectionsDetailParams
--- a/src/mainview/components/ContextDialog.tsx
+++ b/src/mainview/components/ContextDialog.tsx
@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { X } from "lucide-react";
 import { GamePadButtonCode, Shortcut, useShortcuts } from "../scripts/shortcuts";
 import { ContextDialogContext } from "../scripts/contexts";
+import { FOCUS_KEYS } from "../scripts/types";

 export function ContextList (data: { options?: DialogEntry[]; className?: string; showCloseButton?: boolean; })
 {
@ -25,18 +26,18 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
    };
    const handleAction = data.action ? () => data.action?.({ close: context.close, focus: focusSelf }) : undefined;
    const { ref, focusSelf, focusKey } = useFocusable({
-        focusKey: `${context.id}-list-option-${data.id}`,
+        focusKey: FOCUS_KEYS.CONTEXT_DIALOG_OPTION(context.id, data.id),
        onEnterPress: data.shortcuts ? undefined : handleAction,
        onFocus: handleFocus,
        trackChildren: typeof data.content !== 'string'
    });
    const colors = {
-        primary: "active:bg-primary control-pointer:hover:bg-primary focused:bg-primary focused:text-primary-content in-focused:bg-primary in-focused:text-primary-content",
-        secondary: "active:bg-secondary control-pointer:hover:bg-secondary focused:bg-secondary focused:text-secondary-content in-focused:bg-secondary in-focused:text-secondary-content",
-        accent: "active:bg-accent control-pointer:hover:bg-accent focused:bg-accent focused:text-accent-content in-focused:bg-accent in-focused:text-accent-content",
-        info: "active:bg-info control-pointer:hover:bg-info focused:bg-info focused:text-info-content in-focused:bg-info in-focused:text-info-content",
-        warning: "active:bg-warning control-pointer:hover:bg-warning focused:bg-warning focused:text-warning-content in-focused:bg-warning in-focused:text-warning-content",
-        error: "active:bg-error control-pointer:hover:bg-error focused:bg-error focused:text-error-content in-focused:bg-error in-focused:text-error-content"
+        primary: "active:bg-primary control-pointer:hover:bg-primary control-pointer:hover:text-primary-content focused:bg-primary focused:text-primary-content in-focused:bg-primary in-focused:text-primary-content",
+        secondary: "active:bg-secondary control-pointer:hover:bg-secondary control-pointer:hover:text-secondary-content focused:bg-secondary focused:text-secondary-content in-focused:bg-secondary in-focused:text-secondary-content",
+        accent: "active:bg-accent control-pointer:hover:bg-accent control-pointer:hover:text-accent-content focused:bg-accent focused:text-accent-content in-focused:bg-accent in-focused:text-accent-content",
+        info: "active:bg-info control-pointer:hover:bg-info control-pointer:hover:text-info-content focused:bg-info focused:text-info-content in-focused:bg-info in-focused:text-info-content",
+        warning: "active:bg-warning control-pointer:hover:bg-warning control-pointer:hover:text-warning-content focused:bg-warning focused:text-warning-content in-focused:bg-warning in-focused:text-warning-content",
+        error: "active:bg-error control-pointer:hover:bg-error control-pointer:hover:text-error-content focused:bg-error focused:text-error-content in-focused:bg-error in-focused:text-error-content"
    };
    if (data.shortcuts)
    {
@ -47,9 +48,10 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
        className={
            twMerge("flex cursor-pointer sm:text-sm md:text-base")}>
        <FocusContext value={focusKey}>
-            <div className={twMerge("flex w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl transition-all gap-2  active:animate-scale in-focused:font-semibold",
+            <div className={twMerge("flex w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl transition-all gap-2 active:animate-scale in-focused:font-semibold",
                data.className,
-                colors[data.type])}>
+                colors[data.type],
+                "active:bg-base-content! active:text-base-300! active:transition-none")}>
                {data.icon}
                {data.content}
            </div>
@ -71,33 +73,34 @@ export function useContextDialog (id: string, data: { content?: JSX.Element; cla
 {
    const [open, setOpen] = useState(false);
    const [sourceFocusKey, setSourceFocusKey] = useState<string | undefined>(undefined);
-    const dialog = <ContextDialog id={id} open={open} close={() =>
+    const handleClose = (value: boolean, newSourceFocusKey?: string) =>
    {
-        setOpen(false);
-        data.onClose?.();
-    }} className={data.className} sourceFocusKey={sourceFocusKey} preferredChildFocusKey={data.preferredChildFocusKey}>
+        if (value === open) return;
+        if (value)
+        {
+            setOpen(true);
+            setSourceFocusKey(newSourceFocusKey);
+        } else
+        {
+            setOpen(false);
+            data.onClose?.();
+            if (newSourceFocusKey)
+            {
+                setFocus(newSourceFocusKey);
+            } else if (sourceFocusKey)
+            {
+                setFocus(sourceFocusKey);
+            }
+        }
+
+    };
+    const dialog = <ContextDialog id={id} open={open} close={handleClose} className={data.className} preferredChildFocusKey={data.preferredChildFocusKey}>
        {data.content}
    </ContextDialog>;
    return {
        dialog,
        open,
-        setOpen: (value: boolean, sourceFocusKey?: string) =>
-        {
-            if (value === open) return;
-            if (value)
-            {
-                setOpen(true);
-                setSourceFocusKey(sourceFocusKey);
-            } else
-            {
-                setOpen(false);
-                if (sourceFocusKey)
-                {
-                    setFocus(sourceFocusKey);
-                }
-            }
-
-        }
+        setOpen: handleClose
    };
 }

@ -108,7 +111,6 @@ export function ContextDialog (data: {
    close: (open: boolean) => void;
    className?: string;
    preferredChildFocusKey?: string;
-    sourceFocusKey?: string;
 })
 {
    const { ref, focusKey, focusSelf } = useFocusable({
@ -137,7 +139,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-brightness-50 duration-300 ease-in-out transition-all text-base-content",
+        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",
            classNames({ "opacity-0": !data.open }))
    }
        onClick={handleClose}>
@ -145,7 +147,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",
+                        "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",
                        data.open ? "animate-scale-delayed" : "opacity-0",
                        data.className)
                    }
--- a/src/mainview/components/Error.tsx
+++ b/src/mainview/components/Error.tsx
@ -29,6 +29,7 @@ export default function Error (data: ErrorComponentProps)
            <Button className="text-2xl! focusable focusable-primary" id="return" onAction={handleReturn}><Home />Return Home</Button>
            <div className="mobile:hidden bg-gradient"></div>
            <div className="mobile:hidden bg-noise"></div>
+            <div className="mobile:hidden bg-dots"></div>
            <div className="flex justify-end fixed bottom-4 left-4 right-4"><Shortcuts shortcuts={shortcuts} /></div>
        </FocusContext>
    </div>;
--- a/src/mainview/components/FilePicker.tsx
+++ b/src/mainview/components/FilePicker.tsx
@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { ContextList, DialogEntry } from "./ContextDialog";
 import { systemApi } from "../scripts/clientApi";
 import { useContext, useRef, useState } from "react";
-import path, { dirname } from "pathe";
+import path from "pathe";
 import { Check, Folder, FolderInput, FolderOutput, FolderPlus, HardDrive, Usb, X } from "lucide-react";
 import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { DirType } from "@/shared/constants";
--- a/src/mainview/components/FocusDots.tsx
+++ b/src/mainview/components/FocusDots.tsx
@ -2,7 +2,7 @@ import { setFocus } from "@noriginmedia/norigin-spatial-navigation";
 import classNames from "classnames";
 import { twMerge } from "tailwind-merge";
 import { useGlobalFocus } from "../scripts/spatialNavigation";
-import { JSX, RefObject, useMemo, useState } from "react";
+import { RefObject, useMemo, useState } from "react";
 import { useEventListener } from "usehooks-ts";

 function ScrollDot (data: { index: number; parent: RefObject<HTMLElement | null>, peers: HTMLElement[]; })
--- a/src/mainview/components/FocusTooltip.tsx
+++ b/src/mainview/components/FocusTooltip.tsx
@ -0,0 +1,36 @@
+import { Ref, RefObject, useEffect, useState } from "react";
+import { useFocusEventListener } from "../scripts/spatialNavigation";
+import useActiveControl from "../scripts/gamepads";
+import { twMerge } from "tailwind-merge";
+
+export default function FocusTooltip (data: { parentRef: RefObject<any>; visible?: boolean; })
+{
+    const [hoverText, setHoverText] = useState<string | undefined>(undefined);
+    const [hoverTextType, setHoverTextType] = useState<string>('accent');
+
+    const handleTooltipSet = (e: HTMLElement) =>
+    {
+        const dataTooltip = e.getAttribute('data-tooltip');
+        setHoverText(dataTooltip ?? undefined);
+        setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
+    };
+
+    const { isPointer } = useActiveControl();
+
+    useFocusEventListener('focuschanged', (e) =>
+    {
+        if (e.target instanceof HTMLElement)
+        {
+            handleTooltipSet(e.target);
+        }
+
+    }, data.parentRef);
+
+    const tooltipStyles = {
+        base: 'bg-base-100 text-base-content',
+        accent: 'bg-accent text-accent-content',
+        error: 'bg-error text-error-content'
+    };
+
+    return !!hoverText && (data.visible ?? true) && !isPointer && <p className={twMerge("flex sm:hidden md:inline py-1 md:py-2 md:px-4 rounded-4xl text-wrap wrap-anywhere text-base", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>;
+}
--- a/src/mainview/components/FrontEndGameCard.tsx
+++ b/src/mainview/components/FrontEndGameCard.tsx
@ -1,4 +1,4 @@
-import { FrontEndGameType, FrontEndId, RPC_URL } from "@/shared/constants";
+import { RPC_URL } from "@/shared/constants";
 import CardElement from "./CardElement";
 import { Router } from "..";
 import { FileQuestion, HardDrive, Store } from "lucide-react";
@ -57,7 +57,7 @@ export default function FrontEndGameCard (data: { index: number, game: FrontEndG
        subtitle={subtitle}
        focusKey={FOCUS_KEYS.GAME_CARD(data.game.id)}
        className={data.game.id.source === 'local' ? 'ring-offset-info/40 ring-offset-2' : ""}
-        previewClassName={data.game.id.source === 'local' ? "not-in-focused:opacity-40" : ""}
+        previewClassName={data.game.id.source === 'local' ? "dark:not-in-focused:opacity-40 light:not-in-focus:opacity-60" : ""}
        index={data.index}
        id={`game-${data.game.id.source}-${data.game.id.id}`}
    />;
--- a/src/mainview/components/GameList.tsx
+++ b/src/mainview/components/GameList.tsx
@ -1,8 +1,8 @@
-import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { GameMetaExtra, CardList } from "./CardList";
-import { FrontEndGameType, FrontEndId, GameListFilterType, RPC_URL } from "@shared/constants";
+import { GameListFilterType, RPC_URL } from "@shared/constants";
 import { useNavigate } from "@tanstack/react-router";
-import { FileQuestion, HardDrive, Store } from "lucide-react";
+import { HardDrive } from "lucide-react";
 import { JSX, useContext } from "react";
 import { GameCardFocusHandler } from "./CardElement";
 import { useLocalSetting } from "../scripts/utils";
@ -75,7 +75,7 @@ export function GameList (data: GameListParams)

                            const previewUrl = new URL(`${RPC_URL(__HOST__)}${g.path_cover}`);
                            previewUrl.searchParams.delete('ts');
-                            previewUrl.searchParams.set('width', "16");
+
                            const platformUrl = new URL(`${RPC_URL(__HOST__)}${g.path_platform_cover}`);
                            platformUrl.searchParams.set('width', "64");

--- a/src/mainview/components/Header.tsx
+++ b/src/mainview/components/Header.tsx
@ -14,7 +14,7 @@ import
  Bell,
  Bluetooth,
  Clock,
-  User,
+  Settings,
  Wifi,
  WifiHigh,
  WifiLow,
@ -22,70 +22,44 @@ import
 } from "lucide-react";
 import { RoundButton } from "./RoundButton";
 import { useQuery } from "@tanstack/react-query";
-import { getCurrentUserApiUsersMeGetOptions, statsApiStatsGetOptions } from "@clients/romm/@tanstack/react-query.gen";
 import { RPC_URL } from "../../shared/constants";
-import { JSX, Ref, RefObject, useEffect, useRef, useState } from "react";
+import { JSX, RefObject, useEffect, useRef, useState } from "react";
 import { systemApi } from "../scripts/clientApi";
 import { Router } from "..";
 import { useStickyDataAttr } from "../scripts/utils";
+import { twMerge } from "tailwind-merge";
+import { TwitchIcon } from "../scripts/brandIcons";
+import { rommUserQuery } from "../scripts/queries/romm";
+import { twitchLoginVerificationQuery } from "../scripts/queries/settings";

 function HeaderAvatar (data: {
  id: string;
-  imageSrc?: string | string[];
+  preview?: string | JSX.Element;
  className?: string;
  active?: boolean;
-  status?: HeaderAccount['status'];
  locked?: boolean;
-  type?: HeaderAccount['type'];
  onSelect?: () => void;
 })
 {
-  const { ref, focused } = useFocusable({ focusKey: data.id, onEnterPress: data.onSelect });
-  const bgColors = {
-    primary: " text-primary-content",
-    secondary: " text-secondary-content",
-    accent: " text-accent-content",
-    base: "bg-base-100",
-    none: undefined,
-  };

  return (
    <div
      id={data.id}
-      ref={ref}
      onClick={data.onSelect}
      style={{ viewTransitionName: `header-account-${data.id}` }}
-      className={classNames(
-        `avatar indicator ring-offset-base-100 sm:size-8 md:size-14 rounded-full flex items-center justify-center`,
-        bgColors[data.type ?? "none"],
-        "text-base-content cursor-pointer transition-all drop-shadow-md",
-        "hover:ring-primary hover:ring-7 focusable focusable-primary focused:ring-offset-base-100",
-        {
-          "ring-5 hover:ring-offset-5": data.active,
-          "ring-offset-5": focused && data.active,
-        },
+      className={twMerge(
+        `avatar overflow-visible bg-base-100 indicator border-7 sm:size-8 md:size-14 rounded-full flex items-center justify-center drop-shadow-md`,
        data.className,
      )}
    >
-      {data.imageSrc ? (
+      {typeof data.preview === 'string' ? (
        <div className="overflow rounded-full w-full h-full">
          <picture>
-            {typeof data.imageSrc === 'string' && <img key={"og-image"} src={data.imageSrc}></img>}
-            {Array.isArray(data.imageSrc) && data.imageSrc.map((s, i) =>
-            {
-              if (i === (data.imageSrc!.length - 1))
-              {
-                return <img key={'fallback-image'} src={s}></img>;
-              }
-              return <source key={`alt-img-${i}`} srcSet={s}></source>;
-            })}
+            <img key={"og-image"} src={data.preview}></img>
+
          </picture>
        </div>
-      ) : (
-        <User />
-      )}
-      <span className={classNames("indicator-item status md:left-1 top-1 sm:ring-2 md:ring-3 ring-base-100 z-1", data.status)}></span>
-
+      ) : data.preview}
    </div>
  );
 }
@ -101,7 +75,7 @@ export interface HeaderButton
 export interface HeaderAccount
 {
  id: string;
-  previewUrl?: string | string[];
+  preview?: string | JSX.Element;
  status?: "status-error" | "status-success" | "status-neutral";
  type?: "base" | "primary" | "secondary" | "accent";
  locked?: boolean;
@ -228,32 +202,52 @@ function BatteryStatus ()

 export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
 {
-  const user = useQuery({
-    ...getCurrentUserApiUsersMeGetOptions(),
+  const rommUser = useQuery({
+    ...rommUserQuery(),
    refetchOnWindowFocus: false,
    retry: 1
  });
+  const twitchStatus = useQuery({
+    ...twitchLoginVerificationQuery, refetchOnWindowFocus: false,
+    retry: 1
+  });

-  const accounts: HeaderAccount[] = [{
-    id: 'romm', previewUrl: [
-      `${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`,
-    ],
-    action: () =>
-    {
-      Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
-    },
-    status: user.data ? "status-success" : 'status-error',
-    type: 'secondary'
-  }, ...data.accounts ?? []];
+  const { ref } = useFocusable({ focusKey: 'accounts' });

-  return <div className="flex items-center gap-2 drop-shadow-sm">
+  const accounts: HeaderAccount[] = [];
+  if (data.accounts) accounts.push(...data.accounts);
+
+  if (rommUser.data)
+  {
+    accounts.push({
+      id: 'romm', preview: `${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`,
+      action: () =>
+      {
+        Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
+      },
+      status: rommUser.data ? "status-success" : 'status-error',
+      type: 'secondary'
+    });
+  }
+
+  if (twitchStatus.data)
+  {
+    accounts.push({
+      id: 'twitch', preview: TwitchIcon,
+      action: () =>
+      {
+        Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
+      },
+      type: 'secondary'
+    });
+  }
+
+  return <div ref={ref} 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 ">
    {accounts?.map(a => <HeaderAvatar
      key={`header-avatar-${a.id}`}
-      type={a.type}
      id={`account-${a.id}`}
-      status={a.status}
      locked={a.locked}
-      imageSrc={a.previewUrl}
+      preview={a.preview}
      onSelect={a.action}
    />)}
  </div>;
@ -273,7 +267,7 @@ export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElement
    <div className="flex gap-2">
      {data.buttonElements ?? data.buttons?.map(b => <RoundButton
        key={b.id}
-        className="header-icon sm:size-10 md:size-16"
+        className="header-icon sm:size-10 md:size-14"
        id={b.id}
        external={b.external}
        cssStyle={{ viewTransitionName: `header-button-${b.id}` }}
@ -296,6 +290,10 @@ interface HeaderUIParams
 export function HeaderUI (data: HeaderUIParams)
 {
  const { ref, focusKey } = useFocusable({ focusKey: "header-elements", focusable: data.focusable, preferredChildFocusKey: data.preferredChildFocusKey });
+  const goToSettings = () =>
+  {
+    Router.navigate({ to: '/settings/accounts' });
+  };
  return (
    <FocusContext.Provider value={focusKey}>
      <header
@ -305,7 +303,7 @@ export function HeaderUI (data: HeaderUIParams)
      >
        <HeaderAccounts accounts={data.accounts} />
        {data.title}
-        <HeaderStatusBar buttonElements={data.buttonElements} buttons={data.buttons} />
+        <HeaderStatusBar buttonElements={data.buttonElements} buttons={[...data.buttons ?? [], { icon: <Settings />, id: "settings", action: goToSettings, external: true }]} />
      </header>
    </FocusContext.Provider>
  );
--- a/src/mainview/components/LoadMoreButton.tsx
+++ b/src/mainview/components/LoadMoreButton.tsx
@ -1,7 +1,6 @@
 import { setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { FOCUS_KEYS } from "../scripts/types";
 import { useIntersectionObserver } from "usehooks-ts";
-import { FrontEndId } from "@/shared/constants";

 export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
 {
--- a/src/mainview/components/NotFound.tsx
+++ b/src/mainview/components/NotFound.tsx
@ -25,6 +25,7 @@ export default function NotFound ()
            <Button className="text-2xl! p-6! focusable focusable-primary" id="return" onAction={handleReturn}><Home />Return Home</Button>
            <div className="mobile:hidden bg-gradient"></div>
            <div className="mobile:hidden bg-noise"></div>
+            <div className="mobile:hidden bg-dots"></div>
            <div className="flex justify-end fixed bottom-4 left-4 right-4"><Shortcuts shortcuts={shortcuts} /></div>
        </FocusContext>
    </div>;
--- a/src/mainview/components/Notifications.tsx
+++ b/src/mainview/components/Notifications.tsx
@ -1,4 +1,4 @@
-import { Notification, RPC_URL } from "@/shared/constants";
+import { RPC_URL } from "@/shared/constants";
 import { useEffect } from "react";
 import toast, { ToastOptions } from "react-hot-toast";

@ -9,7 +9,7 @@ export default function Notifications (data: {})
        const es = new EventSource(`${RPC_URL(__HOST__)}/api/system/notifications`);
        es.addEventListener('notification', (e) =>
        {
-            const notification = JSON.parse(e.data) as Notification;
+            const notification = JSON.parse(e.data) as FrontendNotification;
            const options: ToastOptions = { removeDelay: notification.duration };
            if (notification.type === 'error')
            {
--- a/src/mainview/components/Screenshots.tsx
+++ b/src/mainview/components/Screenshots.tsx
@ -22,7 +22,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" />
+        <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>;
 }
--- a/src/mainview/components/Shortcuts.tsx
+++ b/src/mainview/components/Shortcuts.tsx
@ -3,48 +3,48 @@ import { GamePadButtonCode, Shortcut } from '../scripts/shortcuts';
 import ShortcutPrompt from './ShortcutPrompt';
 import { IconType } from './SvgIcon';

-const iconMap: Record<GamePadButtonCode, IconType> = {
-    [GamePadButtonCode.A]: 'steamdeck_button_a',
-    [GamePadButtonCode.B]: 'steamdeck_button_b',
-    [GamePadButtonCode.X]: 'steamdeck_button_x',
-    [GamePadButtonCode.Y]: 'steamdeck_button_y',
-    [GamePadButtonCode.L1]: 'steamdeck_button_l1',
-    [GamePadButtonCode.R1]: 'steamdeck_button_r1',
-    [GamePadButtonCode.L2]: 'steamdeck_button_l2',
-    [GamePadButtonCode.R2]: 'steamdeck_button_r2',
-    [GamePadButtonCode.Select]: 'steamdeck_button_guide',
-    [GamePadButtonCode.Start]: 'steamdeck_button_options',
-    [GamePadButtonCode.LJoy]: 'steamdeck_stick_l_press',
-    [GamePadButtonCode.RJoy]: 'steamdeck_stick_r_press',
-    [GamePadButtonCode.Up]: 'steamdeck_dpad_up',
-    [GamePadButtonCode.Down]: 'steamdeck_dpad_down',
-    [GamePadButtonCode.Left]: 'steamdeck_dpad_left',
-    [GamePadButtonCode.Right]: 'steamdeck_dpad_right',
-    [GamePadButtonCode.Steam]: 'steamdeck_button_quickaccess'
-};
-
-const keyboardMap: Record<GamePadButtonCode, string> = {
-    [GamePadButtonCode.A]: 'ENTER',
-    [GamePadButtonCode.B]: 'ESC',
-    [GamePadButtonCode.X]: 'BACKSPACE',
-    [GamePadButtonCode.Y]: 'SPACE',
-    [GamePadButtonCode.L1]: 'Q',
-    [GamePadButtonCode.R1]: 'E',
-    [GamePadButtonCode.L2]: '',
-    [GamePadButtonCode.R2]: '',
-    [GamePadButtonCode.Select]: '',
-    [GamePadButtonCode.Start]: '',
-    [GamePadButtonCode.LJoy]: '',
-    [GamePadButtonCode.RJoy]: '',
-    [GamePadButtonCode.Up]: '',
-    [GamePadButtonCode.Down]: '',
-    [GamePadButtonCode.Left]: '',
-    [GamePadButtonCode.Right]: '',
-    [GamePadButtonCode.Steam]: ''
-};
-
 export default function Shortcuts (data: { shortcuts?: Shortcut[]; })
 {
+    const iconMap: Record<GamePadButtonCode, IconType> = {
+        [GamePadButtonCode.A]: 'steamdeck_button_a',
+        [GamePadButtonCode.B]: 'steamdeck_button_b',
+        [GamePadButtonCode.X]: 'steamdeck_button_x',
+        [GamePadButtonCode.Y]: 'steamdeck_button_y',
+        [GamePadButtonCode.L1]: 'steamdeck_button_l1',
+        [GamePadButtonCode.R1]: 'steamdeck_button_r1',
+        [GamePadButtonCode.L2]: 'steamdeck_button_l2',
+        [GamePadButtonCode.R2]: 'steamdeck_button_r2',
+        [GamePadButtonCode.Select]: 'steamdeck_button_guide',
+        [GamePadButtonCode.Start]: 'steamdeck_button_options',
+        [GamePadButtonCode.LJoy]: 'steamdeck_stick_l_press',
+        [GamePadButtonCode.RJoy]: 'steamdeck_stick_r_press',
+        [GamePadButtonCode.Up]: 'steamdeck_dpad_up',
+        [GamePadButtonCode.Down]: 'steamdeck_dpad_down',
+        [GamePadButtonCode.Left]: 'steamdeck_dpad_left',
+        [GamePadButtonCode.Right]: 'steamdeck_dpad_right',
+        [GamePadButtonCode.Steam]: 'steamdeck_button_quickaccess'
+    };
+
+    const keyboardMap: Record<GamePadButtonCode, string> = {
+        [GamePadButtonCode.A]: 'ENTER',
+        [GamePadButtonCode.B]: 'ESC',
+        [GamePadButtonCode.X]: 'BACKSPACE',
+        [GamePadButtonCode.Y]: 'SPACE',
+        [GamePadButtonCode.L1]: 'Q',
+        [GamePadButtonCode.R1]: 'E',
+        [GamePadButtonCode.L2]: '',
+        [GamePadButtonCode.R2]: '',
+        [GamePadButtonCode.Select]: '',
+        [GamePadButtonCode.Start]: '',
+        [GamePadButtonCode.LJoy]: '',
+        [GamePadButtonCode.RJoy]: '',
+        [GamePadButtonCode.Up]: '',
+        [GamePadButtonCode.Down]: '',
+        [GamePadButtonCode.Left]: '',
+        [GamePadButtonCode.Right]: '',
+        [GamePadButtonCode.Steam]: ''
+    };
+
    const { control } = useActiveControl();
    const showKeyboard = control === 'keyboard' || control === 'mouse';
    return (
--- a/src/mainview/components/game/Achievements.tsx
+++ b/src/mainview/components/game/Achievements.tsx
@ -1,4 +1,4 @@
-import { FrontEndGameTypeDetailed, FrontEndGameTypeDetailedAchievement } from "@/shared/constants";
+
 import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { Medal } from "lucide-react";

--- a/src/mainview/components/game/ActionButton.tsx
+++ b/src/mainview/components/game/ActionButton.tsx
@ -0,0 +1,42 @@
+import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
+import classNames from "classnames";
+import { JSX } from "react";
+import { twMerge } from "tailwind-merge";
+
+export default function ActionButton (data: {
+    id: string,
+    icon?: JSX.Element,
+    children?: any | any[];
+    className?: string;
+    type: "primary" | 'base' | "accent" | 'error';
+    square?: boolean,
+    onFocus?: () => void;
+    tooltip?: string,
+    tooltip_type?: 'accent' | 'error';
+    onAction?: () => void;
+    disabled?: boolean;
+})
+{
+    const { ref } = useFocusable({ focusKey: data.id, onFocus: data.onFocus, onEnterPress: data.onAction, 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",
+        accent: "bg-accent text-accent-content focusable focusable-primary focusable:bg-base-content focusable:text-base-300",
+        error: "bg-error text-error-content focused:bg-error focused:text-error-content",
+    };
+    return (
+        <div className="tooltip tooltip-accent tooltip-right" data-tip={data.tooltip}>
+            <button
+                disabled={data.disabled}
+                ref={ref}
+                onClick={data.onAction}
+                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",
+                    "hover:ring-7 hover:ring-primary", styles[data.type], classNames({ "rounded-full sm:size-14 md:size-21 hover:bg-base-content hover:text-base-300 hover:ring-7 hover:ring-primary": !data.square }), data.className)}>
+                {data.icon}
+                {data.children}
+            </button>
+        </div>
+    );
+}
--- a/src/mainview/components/game/ActionButtons.tsx
+++ b/src/mainview/components/game/ActionButtons.tsx
@ -0,0 +1,84 @@
+import { deleteGameMutation } from "@/mainview/scripts/queries/romm";
+import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
+import { useMutation } from "@tanstack/react-query";
+import { ContextList, DialogEntry, useContextDialog } from "../ContextDialog";
+import { getErrorMessage } from "react-error-boundary";
+import toast from "react-hot-toast";
+import { Settings, Trash, Trophy } from "lucide-react";
+import MainActions from "./MainActions";
+import ActionButton from "./ActionButton";
+import { useLocalStorage } from "usehooks-ts";
+import FocusTooltip from "../FocusTooltip";
+
+function AchievementsInfo (data: { game: FrontEndGameTypeDetailed; } & InteractParams)
+{
+    if (!data.game.achievements)
+    {
+        return false;
+    }
+
+    return <ActionButton key="achievements" square tooltip="Achievements" type="base" className="sm:rounded-2xl md:rounded-3xl" id="achievements" onAction={data.onAction} >
+        <div className="flex flex-col sm:gap-0 md:gap-2 items-center sm:text-xl md:text-2xl sm:px-4 sm:py-2 md:p-0">
+            <div className="flex flex-row items-center gap-1">
+                <Trophy />
+                {`${data.game.achievements.unlocked}/${data.game.achievements.total}`}
+            </div>
+            <progress className="progress progress-secondary w-full" value={data.game.achievements.unlocked / data.game.achievements.total} max="1"></progress>
+        </div>
+    </ActionButton>;
+}
+
+export default function ActionButtons (data: { game: FrontEndGameTypeDetailed, source: string, id: string; })
+{
+    const [, setDetailsSection] = useLocalStorage('details-section', 'screenshots');
+
+    const { ref, focusKey, hasFocusedChild } = useFocusable({ focusKey: 'actions', trackChildren: true });
+    const deleteMutation = useMutation({
+        ...deleteGameMutation(data.game.id),
+        onSuccess: () =>
+        {
+            location.reload();
+            console.log("Deleted");
+        },
+        onError (error)
+        {
+            toast.error(getErrorMessage(error) ?? "Error While Deleting");
+        }
+    });
+
+    const contextOptions: DialogEntry[] = [];
+    if (data.game.local)
+    {
+        contextOptions.push({
+            id: 'delete',
+            action: () =>
+            {
+                deleteMutation.mutate();
+            },
+            icon: <Trash />,
+            content: "Delete",
+            type: 'error'
+        });
+    }
+
+    const { setOpen, dialog: settingsDialog } = useContextDialog("settings-context", { content: <ContextList options={contextOptions} /> });
+
+    return <div ref={ref} className="flex sm:gap-2 md:gap-4 sm:h-16 md:h-32 overflow-hidden p-2 items-center shrink-0">
+        <FocusContext value={focusKey}>
+            <MainActions game={data.game} source={data.source} id={data.id} />
+            <AchievementsInfo game={data.game} onAction={() =>
+            {
+                setDetailsSection("achievements");
+                if (data.game.achievements?.entires[0])
+                {
+                    setFocus(data.game.achievements.entires[0].id);
+                }
+
+            }} />
+            <ActionButton tooltip="Settings" onAction={() => setOpen(true, 'settings')} type="base" id="settings" icon={<Settings />} >
+            </ActionButton >
+            {settingsDialog}
+            <FocusTooltip visible={hasFocusedChild} parentRef={ref} />
+        </FocusContext>
+    </div>;
+}
--- a/src/mainview/components/game/Details.tsx
+++ b/src/mainview/components/game/Details.tsx
@ -0,0 +1,95 @@
+import { scrollIntoViewHandler } from "@/mainview/scripts/utils";
+import { RPC_URL } from "@/shared/constants";
+import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
+import classNames from "classnames";
+import { Clock, CloudDownload, HardDrive, Store, TriangleAlert } from "lucide-react";
+import prettyBytes from "pretty-bytes";
+import { JSX } from "react";
+import ActionButtons from "./ActionButtons";
+
+
+export function DetailElement (data: { icon: JSX.Element; children?: any | any[]; })
+{
+    return (
+        <div className="flex gap-2 items-center">
+            {data.icon}
+            {data.children}
+        </div>
+    );
+}
+
+export default function Details (data: {
+    game?: FrontEndGameTypeDetailed,
+    source: string,
+    id: string;
+})
+{
+    const { ref, focusKey } = useFocusable({
+        focusKey: 'main-details',
+        onFocus: (l, p, d) => scrollIntoViewHandler({ block: 'end', behavior: 'smooth' })(focusKey, ref.current, d),
+        preferredChildFocusKey: "play-btn",
+        saveLastFocusedChild: false
+    });
+
+    const platformCoverImg = data.game?.path_platform_cover ? new URL(`${RPC_URL(__HOST__)}${data.game?.path_platform_cover}`) : undefined;
+    if (platformCoverImg)
+        platformCoverImg.searchParams.set("width", "64");
+    const gameCoverImg = data.game?.path_cover ? `${RPC_URL(__HOST__)}${data.game?.path_cover}` : undefined;
+
+    let fileSizeIcon: JSX.Element | undefined;
+    if (!data.game)
+    {
+        fileSizeIcon = <span className="loading loading-spinner loading-lg"></span>;
+    } else if (data.game.missing)
+    {
+        fileSizeIcon = <TriangleAlert />;
+    } else if (data.game.local)
+    {
+        fileSizeIcon = <HardDrive />;
+    } else
+    {
+        fileSizeIcon = <CloudDownload />;
+    }
+
+    return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
+        <FocusContext value={focusKey}>
+            <section className="flex portrait:flex-col my-4 sm:p-0 md:px-12 md:pb-8 pt-4 sm:gap-8 md:gap-12 portrait:w-full h-full min-h-0 rounded-4xl flex-1 z-0 sm:text-sm md:text-base">
+                <div className="flex gap-6 overflow-hidden bg-base-100 justify-end portrait:w-full rounded-3xl aspect-3/4 portrait:h-24 p-4">
+                    {gameCoverImg ?
+                        <img className="drop-shadow-2xl drop-shadow-base-300/40 w-full object-cover rounded-2xl" src={gameCoverImg}></img> :
+                        <div className="skeleton w-full h-full"></div>
+                    }
+                </div>
+                <div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
+                    <div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
+                        <DetailElement icon={<Clock />} >{data.game?.last_played ? new Date(data.game.last_played).toDateString() : "Never"}</DetailElement>
+                        {!!data.game && (data.game.fs_size_bytes !== null || data.game.missing) &&
+                            <div className={classNames({ "text-error": data.game.missing })}>
+                                <div className="tooltip" data-tip={data.game.path_fs}>
+                                    <DetailElement icon={fileSizeIcon} >{data.game.missing ? 'Missing' : prettyBytes(data.game.fs_size_bytes!)}</DetailElement>
+                                </div>
+                            </div>}
+                        <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>
+                        <DetailElement icon={
+                            <Store />
+                        } >
+                            {data.game?.source ?? data.game?.id.source}
+                            {data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</DetailElement>
+                    </div>
+                    <div className="md:hidden divider divider-vertical m-0"></div>
+                    <div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
+                        {data.game?.summary ?? <div className="flex flex-col gap-4 w-full">
+                            <div className="skeleton h-4 w-[30%]"></div>
+                            <div className="skeleton h-4 w-[80%]"></div>
+                            <div className="skeleton h-4 w-full"></div>
+                            <div className="skeleton h-4 w-[60%]"></div>
+                            <div className="skeleton h-4 w-full"></div>
+                            <div className="skeleton h-4 w-[80%]"></div>
+                        </div>}
+                    </div>
+                    {!!data.game && <ActionButtons source={data.source} id={data.id} game={data.game} key="actions" />}
+                </div>
+            </section>
+        </FocusContext>
+    </main>;
+}
--- a/src/mainview/components/game/MainActions.tsx
+++ b/src/mainview/components/game/MainActions.tsx
@ -0,0 +1,207 @@
+import { Router } from "@/mainview";
+import { rommApi } from "@/mainview/scripts/clientApi";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { JSX, useEffect, useRef, useState } from "react";
+import { getErrorMessage } from "react-error-boundary";
+import toast from "react-hot-toast";
+import { useLocalStorage } from "usehooks-ts";
+import { ContextList, DialogEntry, useContextDialog } from "../ContextDialog";
+import { Clock, Download, EllipsisVertical, PackageOpen, Play, TriangleAlert } from "lucide-react";
+import { installMutation, playMutation } from "@/mainview/scripts/queries/romm";
+import ActionButton from "./ActionButton";
+
+export default function MainActions (data: { game: FrontEndGameTypeDetailed, source: string, id: string; })
+{
+    const installMut = useMutation(installMutation(data.source, data.id));
+    const playMut = useMutation({
+        ...playMutation, onError (error)
+        {
+            toast.error(error.message);
+        },
+        onSuccess (data, { source, id }, onMutateResult, context)
+        {
+            Router.navigate({ to: '/launcher/$source/$id', params: { source: source, id: id }, replace: true });
+        },
+    });
+    const ws = useRef<{ send: (data: string) => void; }>(undefined);
+    const [progress, setProgress] = useState<number | undefined>(undefined);
+    const [status, setStatus] = useState<string | undefined>(undefined);
+    const [error, setError] = useState<string | undefined>(undefined);
+    const [details, setDetails] = useState<string | undefined>(undefined);
+    const [commands, setCommands] = useState<CommandEntry[] | undefined>(undefined);
+    const [preferredCommand, setPreferredCommand] = useLocalStorage<string | number | undefined>(`${data.game.source ?? data.game.id.source}-${data.game.source_id ?? data.game.id.id}-preferred-command`, undefined);
+    const queryClient = useQueryClient();
+    const validCommands = commands ? commands.filter(c => c.valid) : [];
+    const validDefaultCommand = commands?.find(c =>
+    {
+        if (!c.valid) return false;
+        if (preferredCommand && c.id !== preferredCommand) return false;
+        return true;
+    });
+
+    useEffect(() =>
+    {
+        const sub = rommApi.api.romm.status({ source: data.game.id.source })({ id: data.game.id.id }).subscribe();
+        ws.current = sub.ws;
+
+        sub.subscribe((e) =>
+        {
+            setStatus(e.data.status);
+            setProgress((e.data as any).progress);
+            setDetails((e.data as any).details);
+            setCommands((e.data as any).commands);
+
+            if (e.data.status === 'refresh')
+            {
+                queryClient.invalidateQueries({ queryKey: ['game', data.id] });
+                Router.navigate({ to: '/game/$source/$id', params: { id: data.id, source: data.source }, replace: true });
+            } else if (e.data.status === 'error')
+            {
+                const errorMessage = getErrorMessage(e.data.error);
+                if (!errorMessage) return;
+                toast.error(errorMessage);
+                setError(errorMessage);
+            }
+        });
+
+        return () =>
+        {
+            sub.close();
+            ws.current = undefined;
+        };
+    }, [data.game.id]);
+
+    let progressIcon: JSX.Element | undefined = undefined;
+    switch (status)
+    {
+        case 'download':
+            progressIcon = <Download />;
+            break;
+        case 'queued':
+            progressIcon = <Clock />;
+            break;
+        case 'extract':
+            progressIcon = <PackageOpen />;
+            break;
+    }
+
+    const showProgress = progress !== null && !!progressIcon;
+    useEffect(() =>
+    {
+        if (showProgress) return;
+        showInstallOptions(false);
+    }, [showProgress]);
+
+    const handlePlay = (cmd?: CommandEntry) =>
+    {
+        if (!cmd) return;
+        if (cmd.emulator === 'EMULATORJS')
+        {
+            const params = new URLSearchParams(cmd.command);
+            Router.navigate({ to: '/embedded/$source/$id', params: { source: data.source, id: data.id }, search: Object.fromEntries(params.entries()), replace: true });
+        } else
+        {
+            playMut.mutate({ source: data.game.id.source, id: data.game.id.id, command_id: cmd.id });
+        }
+    };
+
+    let mainButton: any | undefined = undefined;
+    if (status === 'installed')
+    {
+        mainButton = <div className="flex gap-2"><ActionButton onAction={() => handlePlay(validDefaultCommand)} tooltip={validDefaultCommand?.label ?? details}
+            key="primary"
+            type='primary'
+            id="mainAction"
+        >
+            <Play />
+
+        </ActionButton>
+
+            {validCommands.length > 1 &&
+                <ActionButton className="size-11! header-icon-small" tooltip={"All Commands"} type="base" id="allActionsBtn" onAction={() => showAllCommands(true, 'allActionsBtn')}>
+                    <EllipsisVertical />
+                </ActionButton>}</div>;
+    }
+    else if (error)
+    {
+        mainButton = <ActionButton
+            key="error"
+            tooltip={error}
+            tooltip_type="error"
+            type='error'
+            onAction={() =>
+            {
+                if (status === 'missing-emulator')
+                {
+                    Router.navigate({ to: '/settings/directories' });
+                }
+            }}
+            id="mainAction">
+            <TriangleAlert />
+        </ActionButton>;
+    }
+    else
+    {
+        mainButton = <ActionButton
+            key={status ?? 'unknown'}
+            disabled={installMut.isPending}
+            onAction={() =>
+            {
+                if (status === 'install')
+                {
+                    installMut.mutate();
+                }
+            }}
+            tooltip={details ?? status}
+            type='primary'
+            id="mainAction">
+            {status === 'install' ? <Download /> : <span className="loading loading-spinner loading-lg"></span>}
+        </ActionButton>;
+    }
+
+    const { dialog: allCommandDialog, setOpen: showAllCommands } = useContextDialog('all-commands-dialog', {
+        content: <ContextList options={validCommands.map(c =>
+        {
+            const commands: DialogEntry = {
+                id: String(c.id),
+                content: c.label ?? "",
+                type: 'primary',
+                action (ctx)
+                {
+                    setPreferredCommand(c.id);
+                    handlePlay(c);
+                },
+            };
+            return commands;
+        })} />,
+        preferredChildFocusKey: String(preferredCommand)
+    });
+
+    const { dialog: installOptionsDialog, setOpen: showInstallOptions } = useContextDialog('install-options-dialog', {
+        content: <ContextList options={[{
+            id: 'cancel',
+            content: "Cancel",
+            action (ctx)
+            {
+                ws.current?.send('cancel');
+                ctx.close();
+            },
+            type: 'primary'
+        }]} />
+    });
+
+    return <div className="flex gap-2">
+        {mainButton}
+        <div className="divider divider-horizontal m-0"></div>
+        {showProgress && <ActionButton onAction={() => showInstallOptions(true, "progress")} key="progress" square tooltip={details} type="base" id="progress" >
+            <div key={`install-${status}`} data-tooltip={details ?? status} className="flex flex-col gap-2 w-16 items-center text-2xl">
+                <div className="flex flex-row">
+                    {progressIcon}
+                </div>
+                <progress className="progress progress-secondary w-full" value={progress} max="100"></progress>
+            </div>
+        </ActionButton>}
+        {installOptionsDialog}
+        {allCommandDialog}
+    </div>;
+}
--- a/src/mainview/components/options/Button.tsx
+++ b/src/mainview/components/options/Button.tsx
@ -11,14 +11,14 @@ import { CSSProperties } from "react";
 export type ButtonStyle = 'base' | 'accent' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';

 const styles = {
-    base: 'bg-base-200 text-base-content active:bg-base-300! active:text-base-content! active:ring-offset-base-content',
-    accent: "bg-accent text-accent-content active:bg-base-content! active:text-base-content active:ring-offset-accent",
-    primary: "bg-primary text-primary-content active:bg-base-content! active:text-base-content! active:ring-offset-primary",
-    secondary: "bg-secondary text-secondary-content active:bg-base-content! active:text-base-content! active:ring-offset-secondary",
-    info: "bg-info text-info-content active:bg-base-content! active:text-base-content! active:ring-offset-info",
-    success: "bg-success text-success-content active:bg-base-content! active:text-base-content! active:ring-offset-success",
-    warning: "bg-warning text-warning-content active:bg-base-content! active:text-base-content! active:ring-offset-warning",
-    error: "bg-error text-error-content active:bg-base-content! active:text-base-content! active:ring-offset-error",
+    base: 'dark:bg-base-200 light:bg-base-300 text-base-content active:not-disabled:bg-base-300! active:not-disabled:text-base-content! active:not-disabled:ring-offset-base-content',
+    accent: "bg-accent text-accent-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:ring-offset-accent",
+    primary: "bg-primary text-primary-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-primary",
+    secondary: "bg-secondary text-secondary-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-secondary",
+    info: "bg-info text-info-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-info",
+    success: "bg-success text-success-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-success",
+    warning: "bg-warning text-warning-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-warning",
+    error: "bg-error text-error-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-error",
 };

 export function Button (data: {
@ -31,6 +31,8 @@ export function Button (data: {
    shortcutLabel?: string;
    focusClassName?: string;
    cssStyle?: CSSProperties;
+    tooltip?: string;
+    tooltipType?: "base" | "accent" | "error";
 } & InteractParams & FocusParams)
 {
    const { ref, focused, focusKey } = useFocusable({
@ -49,8 +51,10 @@ export function Button (data: {
        ref={ref}
        onClick={e => data.onAction?.(e.nativeEvent)}
        disabled={data.disabled}
+        data-tooltip={data.tooltip}
+        data-tooltip_type={data.tooltipType}
        style={data.cssStyle}
-        className={twMerge("flex items-center justify-center px-4 py-2 disabled:bg-base-200/40 disabled:text-base-content/40 cursor-pointer rounded-3xl md:text-lg not-control-mouse:focused:drop-shadow-lg border border-base-content/5 not-control-mouse:focused:bg-base-content not-control-mouse:focused:text-base-100 control-mouse:hover:bg-base-content control-mouse:hover:text-base-100 active:transition-none active:ring-offset-4",
+        className={twMerge("flex items-center justify-center px-4 py-2 disabled:bg-base-200/40 disabled:text-base-content/40 not-disabled:cursor-pointer rounded-3xl md:text-lg not-control-mouse:focused:drop-shadow-lg border border-base-content/5 not-control-mouse:focused:bg-base-content not-control-mouse:focused:text-base-100 control-mouse:hover:not-disabled:bg-base-content control-mouse:hover:not-disabled:text-base-100 active:not-disabled:transition-none active:not-disabled:ring-offset-4",
            styles[data.style ?? 'base'],
            focused ? data.focusClassName : undefined,
            classNames({
--- a/src/mainview/components/options/OptionDropdown.tsx
+++ b/src/mainview/components/options/OptionDropdown.tsx
@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { ContextDialog, ContextList, DialogEntry } from "../ContextDialog";
 import { ChevronDown } from "lucide-react";
+import { FOCUS_KEYS } from "@/mainview/scripts/types";

 export function OptionDropdown (data: {
    name: string;
@ -38,7 +39,7 @@ export function OptionDropdown (data: {
                    setOpen(true);
                }} className={'flex items-center justify-center border h-10 border-base-content/30 px-4 py-2 rounded-full cursor-pointer grow not-in-focused:bg-base-200 focusable focusable-accent hover:border-base-content hover:bg-base-content hover:text-base-300'}>{data.value}<ChevronDown /></button>
            </label>
-            {open && <ContextDialog id={`${data.name}-context`} open={true} close={handleClose}>
+            {open && <ContextDialog id={`${data.name}-context`} preferredChildFocusKey={FOCUS_KEYS.CONTEXT_DIALOG_OPTION(`${data.name}-context`, String(data.values.indexOf(data.value ?? '')))} open={true} close={handleClose}>
                <ContextList options={data.values.map((v, i) => ({
                    content: v,
                    id: String(i),
--- a/src/mainview/components/options/OptionInput.tsx
+++ b/src/mainview/components/options/OptionInput.tsx
@ -11,7 +11,7 @@ export function OptionInput (data: {
    className?: string;
    placeholder?: string;
    icon?: JSX.Element;
-    value?: string;
+    value?: string | boolean;
    defaultValue?: string | boolean;
    autocomplete?: HTMLInputAutoCompleteAttribute;
    onBlur?: FocusEventHandler<HTMLInputElement>;
@ -58,7 +58,7 @@ export function OptionInput (data: {
                id={data.name}
                data-focus={"input"}
                name={data.name}
-                value={data.value}
+                value={String(data.value)}
                defaultValue={typeof data.defaultValue === 'string' ? data.defaultValue : undefined}
                type={data.type}
                autoComplete={data.autocomplete}
@ -68,24 +68,22 @@ export function OptionInput (data: {
                onBlur={data.onBlur}
                defaultChecked={typeof data.defaultValue === 'boolean' ? data.defaultValue : undefined}
                className={twMerge(
-                    "flex text-base-content px-4 py-2 items-center justify-center border border-base-content/20 grow rounded-full focus:ring-base-content in-focused:bg-base-200 focusable focusable-accent focus:not-focused:ring-7 control-mouse:ring-0! hover:border-base-content",
+                    "flex text-base-content px-4 py-2 items-center justify-center border bg-base-200 border-base-content/20 grow rounded-full focus:ring-base-content in-focused:bg-base-100 focusable focusable-accent focus:not-focused:ring-7 control-mouse:ring-0! hover:border-base-content",
                    data.className
                )}
            />}
-            {data.type === 'checkbox' && <div className="toggle toggle-xl before:size-6 h-8 border-base-content/30 rounded-full before:rounded-full text-base-content not-in-focus:bg-base-200 focused-child:border-0 ml-1 ring-7 hover:border-base-content focusable focusable-accent">
+            {data.type === 'checkbox' && <div className="toggle toggle-xl toggle-success before:size-6 h-8 border-base-content/30 rounded-full before:bg-base-100 before:rounded-full text-base-content not-in-focus:bg-base-200 focused-child:border-0 ml-1 ring-7 hover:border-base-content focusable has-checked:bg-success not-has-checked:bg-error">
                <input
                    ref={inputRef}
                    id={data.name}
                    name={data.name}
-                    value={data.value}
-                    defaultValue={typeof data.defaultValue === 'string' ? data.defaultValue : undefined}
+                    checked={Boolean(data.value)}
                    type={data.type}
                    autoComplete={data.autocomplete}
                    onFocus={handleFocus}
                    placeholder={data.placeholder}
-                    onChange={e => data.onChange?.(typeof data.defaultValue === 'boolean' ? e.target.checked : e.target.value)}
+                    onChange={e => data.onChange?.(e.target.checked)}
                    onBlur={data.onBlur}
-                    defaultChecked={typeof data.defaultValue === 'boolean' ? data.defaultValue : undefined}
                    className={twMerge(
                        data.className
                    )}
--- a/src/mainview/components/options/PathSettingsOption.tsx
+++ b/src/mainview/components/options/PathSettingsOption.tsx
@ -10,10 +10,6 @@ import FilePicker from "../FilePicker";
 import { setFocus } from "@noriginmedia/norigin-spatial-navigation";
 import { getSettingQuery, setSettingMutation } from "@queries/settings";

-type KeysWithValueAssignableTo<T, Value> = {
-    [K in keyof T]: Exclude<T[K], undefined> extends Value ? K : never;
-}[keyof T];
-
 export interface PathSettingsOptionParams
 {
    label: string;
@ -68,11 +64,8 @@ export function PathSettingsOptionBase (data: PathSettingsOptionParams & {

    useEffect(() =>
    {
-        if (!data.isDirty)
-        {
-            data.setLocalValue(String(defaultValue));
-        }
-    }, [data.isDirty, defaultValue]);
+        data.setLocalValue(String(defaultValue));
+    }, [defaultValue]);

    const handleSelectPath = (path: string) =>
    {
--- a/src/mainview/components/options/SettingsOption.tsx
+++ b/src/mainview/components/options/SettingsOption.tsx
@ -1,17 +1,13 @@
-import { HTMLInputTypeAttribute, JSX, useCallback, useState } from "react";
+import { HTMLInputTypeAttribute, JSX, useCallback, useEffect, useState } from "react";
 import { SettingsType } from "../../../shared/constants";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { OptionSpace } from "./OptionSpace";
 import { OptionInput } from "./OptionInput";
 import { getSettingQuery, setSettingMutation } from "@queries/settings";

-type KeysWithValueAssignableTo<T, Value> = {
-    [K in keyof T]: Exclude<T[K], undefined> extends Value ? K : never;
-}[keyof T];
-
 export function SettingsOption (data: {
    label: string;
-    id: KeysWithValueAssignableTo<SettingsType, string>;
+    id: KeysWithValueAssignableTo<SettingsType, string | boolean>;
    type: HTMLInputTypeAttribute;
    placeholder?: string;
    icon?: JSX.Element;
@ -19,10 +15,16 @@ export function SettingsOption (data: {
 })
 {
    const [dirty, setDirty] = useState(false);
-    const [localValue, setLocalValue] = useState<string | undefined>();
-    useQuery(getSettingQuery(data.id));
+    const [localValue, setLocalValue] = useState<string | boolean | undefined>();
+    const { data: serverValue } = useQuery(getSettingQuery(data.id));
    const setMutation = useMutation(setSettingMutation(data.id));

+    useEffect(() =>
+    {
+        setLocalValue(serverValue as any);
+        setDirty(false);
+    }, [serverValue]);
+
    const handleSave = useCallback(() =>
    {
        if (dirty)
@ -43,7 +45,14 @@ export function SettingsOption (data: {
                onChange={(v) =>
                {
                    setLocalValue(v);
-                    setDirty(true);
+
+                    if (data.type === 'checkbox')
+                    {
+                        setMutation.mutate(v);
+                    } else
+                    {
+                        setDirty(true);
+                    }
                }}
                value={localValue}
            />
--- a/src/mainview/components/store/EmulatorsSection.tsx
+++ b/src/mainview/components/store/EmulatorsSection.tsx
@ -11,7 +11,6 @@ import FocusDots from "../FocusDots";
 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; })
@ -51,18 +50,18 @@ export function EmulatorsSection (data: {

    return (
        <FocusContext.Provider value={focusKey}>
-            <section ref={ref} className="px-2 py-4">
+            <section ref={ref} className="px-2 py-4 pb-0">
                <div className="flex items-center gap-3 px-4 mb-4 text-info">
                    {data.header ?? <>
-                        <div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
-                        <Joystick />
-                        <h2 className="font-bold uppercase tracking-widest">
+                        <div className="w-2 h-5 rounded-full bg-info shadow-sm" />
+                        <Joystick className="shadow-sm" />
+                        <h2 className="font-bold uppercase tracking-widest text-shadow-sm">
                            Recommended Emulators
                        </h2>
                    </>}
                </div>

-                <Carousel scrollRef={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 pb-4 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 }) =>
                        {
--- a/src/mainview/components/store/GamesSection.tsx
+++ b/src/mainview/components/store/GamesSection.tsx
@ -1,4 +1,4 @@
-import { CSSProperties, Ref, RefObject, useEffect, useRef } from "react";
+import { Ref, useEffect, useRef } from "react";
 import
 {
    useFocusable,
@ -6,7 +6,6 @@ import
 } from "@noriginmedia/norigin-spatial-navigation";
 import { scrollIntoNearestParent, 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";
--- a/src/mainview/components/store/MissingEmulatorsSection.tsx
+++ b/src/mainview/components/store/MissingEmulatorsSection.tsx
@ -7,7 +7,7 @@ import { Button } from "../options/Button";
 import useActiveControl from "@/mainview/scripts/gamepads";
 import { ChevronRight, CircleQuestionMark, SearchAlert } from "lucide-react";
 import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
-import { FrontEndEmulator, RPC_URL } from "@/shared/constants";
+import { RPC_URL } from "@/shared/constants";
 import { FOCUS_KEYS } from "@/mainview/scripts/types";

 // ── Single missing-emulator card ───────────────────────────────────────────
--- a/src/mainview/components/store/StoreEmulatorCard.tsx
+++ b/src/mainview/components/store/StoreEmulatorCard.tsx
@ -1,11 +1,11 @@

 import { twMerge } from "tailwind-merge";
-import { FrontEndEmulator, RPC_URL } from "@/shared/constants";
+import { RPC_URL } from "@/shared/constants";
 import { Button } from "../options/Button";
 import useActiveControl from "@/mainview/scripts/gamepads";
 import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
-import { ChevronRight, EllipsisVertical, FileQuestion, IceCream2, Package, Store } from "lucide-react";
+import { BadgeCheck, ChevronRight, EllipsisVertical, FileQuestion, IceCream2, Package, Sparkles, Store, WandSparkles } from "lucide-react";
 import { FOCUS_KEYS } from "@/mainview/scripts/types";
 import { FlatpackIcon } from "@/mainview/scripts/brandIcons";
 import { JSX } from "react";
@ -54,14 +54,13 @@ export function StoreEmulatorCard (data: {
                    <div className="flex gap-2">
                        <div className="flex items-start">
                            <div
-                                data-installed={!!data.emulator.validSource}
-                                className={`size-14 p-2 rounded-full bg-info flex items-center justify-center text-xl shadow-lg data-[installed=true]:bg-success`}
+                                className={`size-14 p-2 rounded-full bg-info flex items-center justify-center text-xl shadow-lg in-data-[installed=true]:bg-success`}
                            >
                                <img draggable={false} src={data.emulator.logo}></img>
                            </div>
                        </div>
                        <div>
-                            <p data-installed={!!data.emulator.validSource} className="font-bold text-base-content text-xl leading-snug data-[installed=true]:text-success">{data.emulator.name}</p>
+                            <p className="font-bold text-base-content text-xl leading-snug in-data-[installed=true]:text-success">{data.emulator.name}</p>
                            <ul className="flex flex-wrap gap-1">
                                {data.emulator.systems.map(({ id, name, icon }) =>
                                {
@ -75,15 +74,15 @@ export function StoreEmulatorCard (data: {
                    </div>
                </div>

-                <div className="flex gap-0.5 mt-1 h-10 items-center">
+                <div className="flex gap-1 mt-1 h-10 items-center">
+                    {!!data.emulator.integration && data.emulator.validSource?.type === 'store' && <div className="tooltip tooltip-primary" data-tip="Has Integration">
+                        <div className="bg-primary text-primary-content rounded-full p-1"><WandSparkles /></div>
+                    </div>}
                    {!!data.emulator.validSource && <div className="tooltip" data-tip={data.emulator.validSource.type}>
-                        <div className="flex items-center justify-center rounded-full p-1 size-8 bg-success text-success-content">
+                        <div data-source={data.emulator.validSource?.type} className="flex items-center justify-center rounded-full p-1 size-8 bg-warning text-warning-content data-[source=store]:bg-success data-[source=store]:text-success-content">
                            {emulatorStatusIcons[data.emulator.validSource?.type ?? '']}
                        </div>
                    </div>}
-                    {data.emulator.gameCount > 0 && <div className="tooltip" data-tip="Game Count">
-                        <div className="flex items-center justify-center rounded-full font-semibold size-9 p-2 bg-base-200 text-base-content/40">{data.emulator.gameCount}</div>
-                    </div>}
                    {isMouse && <>
                        <Button onAction={handleSelect} style="base" className="grow text-base-content/40" id={`${data.emulator.name}-details`} >Details<ChevronRight /></Button>
                        <Button className="bg-transparent border-none shadow-none w-6 p-0" id={`${data.emulator.name}-options`} ><EllipsisVertical /></Button>
--- a/src/mainview/emulatorjs/emulator.ts
+++ b/src/mainview/emulatorjs/emulator.ts
@ -61,4 +61,4 @@ const moduleUrls = import.meta.glob
 // emulatorjs expects basenames instead of paths for some reason
 window.EJS_paths = Object.fromEntries(await Promise.all(Object.entries(moduleUrls).map(async ([key, value]) => [basename(key), await value()])));

-await import('@emulatorjs/emulatorjs/data/loader.js');
+await import('@emulatorjs/emulatorjs/data/loader.js' as any);
--- a/src/mainview/gen/routeTree.gen.ts
+++ b/src/mainview/gen/routeTree.gen.ts
@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './../routes/__root'
 import { Route as GamesRouteImport } from './../routes/games'
 import { Route as SettingsRouteRouteImport } from './../routes/settings/route'
 import { Route as IndexRouteImport } from './../routes/index'
+import { Route as SettingsPluginsRouteImport } from './../routes/settings/plugins'
 import { Route as SettingsInterfaceRouteImport } from './../routes/settings/interface'
 import { Route as SettingsEmulatorsRouteImport } from './../routes/settings/emulators'
 import { Route as SettingsDirectoriesRouteImport } from './../routes/settings/directories'
@ -43,6 +44,11 @@ const IndexRoute = IndexRouteImport.update({
  path: '/',
  getParentRoute: () => rootRouteImport,
 } as any)
+const SettingsPluginsRoute = SettingsPluginsRouteImport.update({
+  id: '/plugins',
+  path: '/plugins',
+  getParentRoute: () => SettingsRouteRoute,
+} as any)
 const SettingsInterfaceRoute = SettingsInterfaceRouteImport.update({
  id: '/interface',
  path: '/interface',
@ -130,6 +136,7 @@ export interface FileRoutesByFullPath {
  '/settings/directories': typeof SettingsDirectoriesRoute
  '/settings/emulators': typeof SettingsEmulatorsRoute
  '/settings/interface': typeof SettingsInterfaceRoute
+  '/settings/plugins': typeof SettingsPluginsRoute
  '/embedded/$source/$id': typeof EmbeddedSourceIdRoute
  '/game/$source/$id': typeof GameSourceIdRoute
  '/launcher/$source/$id': typeof LauncherSourceIdRoute
@ -149,6 +156,7 @@ export interface FileRoutesByTo {
  '/settings/directories': typeof SettingsDirectoriesRoute
  '/settings/emulators': typeof SettingsEmulatorsRoute
  '/settings/interface': typeof SettingsInterfaceRoute
+  '/settings/plugins': typeof SettingsPluginsRoute
  '/embedded/$source/$id': typeof EmbeddedSourceIdRoute
  '/game/$source/$id': typeof GameSourceIdRoute
  '/launcher/$source/$id': typeof LauncherSourceIdRoute
@ -170,6 +178,7 @@ export interface FileRoutesById {
  '/settings/directories': typeof SettingsDirectoriesRoute
  '/settings/emulators': typeof SettingsEmulatorsRoute
  '/settings/interface': typeof SettingsInterfaceRoute
+  '/settings/plugins': typeof SettingsPluginsRoute
  '/embedded/$source/$id': typeof EmbeddedSourceIdRoute
  '/game/$source/$id': typeof GameSourceIdRoute
  '/launcher/$source/$id': typeof LauncherSourceIdRoute
@ -192,6 +201,7 @@ export interface FileRouteTypes {
    | '/settings/directories'
    | '/settings/emulators'
    | '/settings/interface'
+    | '/settings/plugins'
    | '/embedded/$source/$id'
    | '/game/$source/$id'
    | '/launcher/$source/$id'
@ -211,6 +221,7 @@ export interface FileRouteTypes {
    | '/settings/directories'
    | '/settings/emulators'
    | '/settings/interface'
+    | '/settings/plugins'
    | '/embedded/$source/$id'
    | '/game/$source/$id'
    | '/launcher/$source/$id'
@ -231,6 +242,7 @@ export interface FileRouteTypes {
    | '/settings/directories'
    | '/settings/emulators'
    | '/settings/interface'
+    | '/settings/plugins'
    | '/embedded/$source/$id'
    | '/game/$source/$id'
    | '/launcher/$source/$id'
@ -277,6 +289,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/settings/plugins': {
+      id: '/settings/plugins'
+      path: '/plugins'
+      fullPath: '/settings/plugins'
+      preLoaderRoute: typeof SettingsPluginsRouteImport
+      parentRoute: typeof SettingsRouteRoute
+    }
    '/settings/interface': {
      id: '/settings/interface'
      path: '/interface'
@ -391,6 +410,7 @@ interface SettingsRouteRouteChildren {
  SettingsDirectoriesRoute: typeof SettingsDirectoriesRoute
  SettingsEmulatorsRoute: typeof SettingsEmulatorsRoute
  SettingsInterfaceRoute: typeof SettingsInterfaceRoute
+  SettingsPluginsRoute: typeof SettingsPluginsRoute
 }

 const SettingsRouteRouteChildren: SettingsRouteRouteChildren = {
@ -399,6 +419,7 @@ const SettingsRouteRouteChildren: SettingsRouteRouteChildren = {
  SettingsDirectoriesRoute: SettingsDirectoriesRoute,
  SettingsEmulatorsRoute: SettingsEmulatorsRoute,
  SettingsInterfaceRoute: SettingsInterfaceRoute,
+  SettingsPluginsRoute: SettingsPluginsRoute,
 }

 const SettingsRouteRouteWithChildren = SettingsRouteRoute._addFileChildren(
--- a/src/mainview/index.css
+++ b/src/mainview/index.css
@ -3,6 +3,7 @@
@plugin "daisyui";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant light (&:where([data-theme=light], [data-theme=light] *));

@theme {
    --breakpoint-sm: 0px;
@ -194,6 +195,7 @@ html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
+    background-color: var(--color-base-100);
 }

 body {
@ -344,18 +346,21 @@ body {
        width: 100%;
        height: 100%;
        z-index: -1;
+        background-repeat: repeat;
        --bg-gradient-opacity: 15%;

-        background:
-            radial-gradient(at 10% 20%, rgb(from var(--color-error) r g b / var(--bg-gradient-opacity)), transparent 60%),
-            radial-gradient(at 80% 30%, rgb(from var(--color-info) r g b / var(--bg-gradient-opacity)), transparent 60%),
-            radial-gradient(at 40% 90%, rgb(from var(--color-success) r g b / var(--bg-gradient-opacity)), transparent 60%),
-            radial-gradient(at 90% 80%, rgb(from var(--color-warning) r g b / var(--bg-gradient-opacity)), transparent 60%);
+        @variant dark {
+            background:
+                radial-gradient(at 10% 20%, rgb(from var(--color-error) r g b / var(--bg-gradient-opacity)), transparent 60%),
+                radial-gradient(at 80% 30%, rgb(from var(--color-info) r g b / var(--bg-gradient-opacity)), transparent 60%),
+                radial-gradient(at 40% 90%, rgb(from var(--color-success) r g b / var(--bg-gradient-opacity)), transparent 60%),
+                radial-gradient(at 90% 80%, rgb(from var(--color-warning) r g b / var(--bg-gradient-opacity)), transparent 60%);
+            background-color: var(--color-base-100);
+        }

-        background-blend-mode: lighten;
-        background-repeat: repeat;
-        background-color: var(--color-base-100);
-        @apply mobile:hidden;
+        @variant light {
+            background-color: var(--color-base-300);
+        }
    }

    .bg-noise {
@ -368,6 +373,26 @@ body {
        opacity: 0.1;
    }

+    .bg-dots {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-image: radial-gradient(var(--color-neutral) 0.1rem, transparent 0.1rem);
+        background-size: 2rem 2rem;
+        background-position: -1rem -1rem;
+
+        @variant dark {
+            opacity: 0.5;
+            @apply mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner;
+        }
+
+        @variant light {
+            opacity: 0.3;
+            @apply mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner;
+        }
+    }
+
    .bg-gradient-back {

        --bg-opacity: 90%;
@ -407,22 +432,22 @@ body {
    html:active-view-transition-type(zoom-in) {

        &::view-transition-old(root) {
-            animation: fade-out 300ms ease-in forwards;
+            animation: fade-out 200ms ease-in forwards;
        }

        &::view-transition-new(root) {
-            animation: zoom-in-fade-in 300ms ease-in-out forwards;
+            animation: zoom-in-fade-in 200ms ease-out forwards;
        }
    }

    html:active-view-transition-type(zoom-out) {

        &::view-transition-old(root) {
-            animation: zoom-out-fade-out 300ms ease-in-out forwards;
+            animation: zoom-out-fade-out 200ms ease-out forwards;
        }

        &::view-transition-new(root) {
-            animation: zoom-start-small-in-fade-in 300ms ease-in-out forwards;
+            animation: zoom-start-small-in-fade-in 200ms ease-out forwards;
        }
    }

--- a/src/mainview/index.html
+++ b/src/mainview/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html data-theme="dark" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
--- a/src/mainview/routes/__root.tsx
+++ b/src/mainview/routes/__root.tsx
@ -4,6 +4,7 @@ import Notifications from "../components/Notifications";
 import { Toaster } from "react-hot-toast";
 import { mobileCheck, useLocalSetting } from "../scripts/utils";
 import useActiveControl from "../scripts/gamepads";
+import { useEffect } from "react";

 export const Route = createRootRouteWithContext<RouterContext>()({
  component: RootComponent,
@ -14,9 +15,24 @@ function RootComponent ()
  const isMobile = mobileCheck();
  const theme = useLocalSetting('theme');
  const { control } = useActiveControl();
+  useEffect(() =>
+  {
+    if (theme === 'auto')
+    {
+      const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+      window.document.documentElement.dataset.theme = preferred;
+    } else
+    {
+      window.document.documentElement.dataset.theme = theme;
+    }
+
+  }, [theme]);

  return (
-    <div data-theme={theme === 'auto' ? undefined : theme} data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
+    <div data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
      <Outlet />
      <Notifications />
      <Toaster containerStyle={{ viewTimelineName: 'toasters' }} />
--- a/src/mainview/routes/game/$source.$id.tsx
+++ b/src/mainview/routes/game/$source.$id.tsx
@ -1,23 +1,16 @@
 import { createFileRoute, ErrorComponentProps } from "@tanstack/react-router";
-import { CommandEntry, RPC_URL } from "@shared/constants";
-import { twMerge } from "tailwind-merge";
-import { JSX, RefObject, useEffect, useRef, useState } from "react";
+import { RPC_URL } from "@shared/constants";
+import { useEffect, useRef, useState } from "react";
 import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
-import classNames from "classnames";
-import { Calendar, Clock, CloudDownload, Download, EllipsisVertical, Folder, Gamepad2, HardDrive, Image, Info, PackageOpen, Play, Settings, Store, Trash, TriangleAlert, Trophy } from "lucide-react";
+import { Calendar, Clock, Folder, Gamepad2, Image, Info, Store, TriangleAlert, Trophy } from "lucide-react";
 import { HeaderUI } from "../../components/Header";
-import prettyBytes from 'pretty-bytes';
-import { useFocusEventListener } from "../../scripts/spatialNavigation";
 import { AnimatedBackground } from "../../components/AnimatedBackground";
-import toast from "react-hot-toast";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Router } from "../..";
-import { ContextDialog, ContextList, DialogEntry, useContextDialog } from "../../components/ContextDialog";
 import Shortcuts from "../../components/Shortcuts";
 import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";
 import Screenshots from "@/mainview/components/Screenshots";
 import { HandleGoBack, scrollIntoViewHandler, useStickyDataAttr } from "@/mainview/scripts/utils";
-import useActiveControl from "@/mainview/scripts/gamepads";
 import { FilterUI } from "@/mainview/components/Filters";
 import StatList, { StatEntry } from "@/mainview/components/StatList";
 import { useIntersectionObserver, useLocalStorage } from "usehooks-ts";
@ -25,19 +18,17 @@ import { EmulatorsSection } from "@/mainview/components/store/EmulatorsSection";
 import { zodValidator } from "@tanstack/zod-adapter";
 import z from "zod";
 import Achievements from "@/mainview/components/game/Achievements";
-import { getErrorMessage } from "react-error-boundary";
 import { GameDetailsContext } from "@/mainview/scripts/contexts";
-import { rommApi } from "@/mainview/scripts/clientApi";
-import { deleteGameMutation, gameQuery, gamesRecommendedBasedOnGameQuery, installMutation, playMutation } from "@queries/romm";
+import { gameQuery, gamesRecommendedBasedOnGameQuery } from "@queries/romm";
 import { GamesSection } from "@/mainview/components/store/GamesSection";
+import Details, { DetailElement } from "@/mainview/components/game/Details";

 export const Route = createFileRoute("/game/$source/$id")({
  loader: async ({ params, context }) =>
  {
-    const data = await context.queryClient.fetchQuery(gameQuery(params.source, params.id));
-    return { data };
+    context.queryClient.prefetchQuery(gameQuery(params.source, params.id));
  },
-  component: GameDetailsUI,
+  component: RouteComponent,
  pendingComponent: GameDetailsUIPending,
  errorComponent: Error,
  validateSearch: zodValidator(z.object({ focus: z.string().optional() }))
@ -92,13 +83,13 @@ function MainDetailsPending ()
      </div>
      <div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
        <div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
-          <Detail icon={<Clock />} ></Detail>
-          <Detail icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></Detail>
-          <Detail icon={
+          <DetailElement icon={<Clock />} ></DetailElement>
+          <DetailElement icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></DetailElement>
+          <DetailElement icon={
            <Store />
          } >

-          </Detail>
+          </DetailElement>
        </div>
        <div className="md:hidden divider divider-vertical m-0"></div>
        <div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
@ -155,9 +146,8 @@ function GameDetailsUIPending ()
  </AnimatedBackground>;
 }

-function MoreDetails (data: {})
+function MoreDetails (data: { game: FrontEndGameTypeDetailed | undefined; })
 {
-  const { data: game } = Route.useLoaderData();
  const [details] = useDetailsSection();
  const { ref, focusKey, hasFocusedChild } = useFocusable({
    focusKey: "game-more-details-section",
@ -167,456 +157,41 @@ function MoreDetails (data: {})

  return <div ref={ref} className="scroll-mt-[15vh]">
    <FocusContext value={focusKey}>
-      <Divider rootFocusKey={focusKey} showShortcuts={hasFocusedChild} />
+      <Divider game={data.game} rootFocusKey={focusKey} showShortcuts={hasFocusedChild} />
      <div className="bg-base-200 py-12 min-h-[80vh]">
        <div key={details} className="h-full animate-slide-up">
-          {details === 'screenshots' && <div className="h-[60vh]"><Screenshots screenshots={game.paths_screenshots} /></div>}
-          {details === 'stats' && <Stats />}
-          {details === 'achievements' && <Achievements game={game} />}
+          {details === 'screenshots' && !!data.game && <div className="h-[60vh]"><Screenshots screenshots={data.game.paths_screenshots} /></div>}
+          {details === 'stats' && <Stats game={data.game} />}
+          {details === 'achievements' && !!data.game && <Achievements game={data.game} />}
        </div>
      </div>
    </FocusContext>
  </div>;
 }

-function Details (data: { mainAreaRef: RefObject<HTMLDivElement | null>; })
+function Stats (data: { game: FrontEndGameTypeDetailed | undefined; })
 {
-  const { data: game } = Route.useLoaderData();
-  const { ref, focusKey } = useFocusable({
-    focusKey: 'main-details',
-    onFocus: (l, p, d) => scrollIntoViewHandler({ block: 'end', behavior: 'smooth' })(focusKey, ref.current, d),
-    preferredChildFocusKey: "play-btn",
-    saveLastFocusedChild: false
-  });
-
-  const platformCoverImg = new URL(`${RPC_URL(__HOST__)}${game?.path_platform_cover ?? ''}`);
-  platformCoverImg.searchParams.set("width", "64");
-  const gameCoverImg = game?.path_cover ? `${RPC_URL(__HOST__)}${game?.path_cover}` : undefined;
-
-  let fileSizeIcon: JSX.Element | undefined;
-  if (!game)
-  {
-    fileSizeIcon = <span className="loading loading-spinner loading-lg"></span>;
-  } else if (game.missing)
-  {
-    fileSizeIcon = <TriangleAlert />;
-  } else if (game.local)
-  {
-    fileSizeIcon = <HardDrive />;
-  } else
-  {
-    fileSizeIcon = <CloudDownload />;
-  }
-
-  return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
-    <FocusContext value={focusKey}>
-      <section className="flex portrait:flex-col my-4 sm:p-0 md:px-12 md:pb-8 pt-4 sm:gap-8 md:gap-12 portrait:w-full h-full min-h-0 rounded-4xl flex-1 z-0 sm:text-sm md:text-base">
-        <div className="flex gap-6 overflow-hidden bg-base-100 justify-end portrait:w-full rounded-3xl aspect-3/4 portrait:h-24 p-4">
-          {gameCoverImg ?
-            <img className="drop-shadow-2xl drop-shadow-base-300/40 w-full object-cover rounded-2xl" src={gameCoverImg}></img> :
-            <div className="skeleton w-full h-full"></div>
-          }
-        </div>
-        <div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
-          <div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
-            <Detail icon={<Clock />} >{game?.last_played ? new Date(game.last_played).toDateString() : "Never"}</Detail>
-            {!!game && (game.fs_size_bytes !== null || game.missing) &&
-              <div className={classNames({ "text-error": game.missing })}>
-                <div className="tooltip" data-tip={game.path_fs}>
-                  <Detail icon={fileSizeIcon} >{game.missing ? 'Missing' : prettyBytes(game.fs_size_bytes!)}</Detail>
-                </div>
-              </div>}
-            <Detail icon={<img className="size-6" src={platformCoverImg.href}></img>} >{game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</Detail>
-            <Detail icon={
-              <Store />
-            } >
-              {game?.source ?? game?.id.source}
-              {game?.local && <small className="text-base-content/60 font-semibold">local</small>}</Detail>
-          </div>
-          <div className="md:hidden divider divider-vertical m-0"></div>
-          <div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
-            {game?.summary ?? <div className="flex flex-col gap-4 w-full">
-              <div className="skeleton h-4 w-[30%]"></div>
-              <div className="skeleton h-4 w-[80%]"></div>
-              <div className="skeleton h-4 w-full"></div>
-              <div className="skeleton h-4 w-[60%]"></div>
-              <div className="skeleton h-4 w-full"></div>
-              <div className="skeleton h-4 w-[80%]"></div>
-            </div>}
-          </div>
-          {!!game && <ActionButtons key="actions" />}
-        </div>
-      </section>
-    </FocusContext>
-  </main>;
-}
-
-function AchievementsInfo (data: InteractParams)
-{
-  const { data: game } = Route.useLoaderData();
-  if (!game.achievements)
-  {
-    return false;
-  }
-
-  return <ActionButton key="achievements" square tooltip="Achievements" type="base" className="sm:rounded-2xl md:rounded-3xl" id="achievements" onAction={data.onAction} >
-    <div className="flex flex-col sm:gap-0 md:gap-2 items-center sm:text-xl md:text-2xl sm:px-4 sm:py-2 md:p-0">
-      <div className="flex flex-row items-center gap-1">
-        <Trophy />
-        {`${game.achievements.unlocked}/${game.achievements.total}`}
-      </div>
-      <progress className="progress progress-secondary w-full" value={game.achievements.unlocked / game.achievements.total} max="1"></progress>
-    </div>
-  </ActionButton>;
-}
-
-function MainActions ()
-{
-  const { data } = Route.useLoaderData();
-  const { source, id } = Route.useParams();
-  const installMut = useMutation(installMutation(source, id));
-  const playMut = useMutation({
-    ...playMutation, onError (error)
-    {
-      toast.error(error.message);
-    },
-  });
-  const ws = useRef<{ send: (data: string) => void; }>(undefined);
-  const [progress, setProgress] = useState<number | undefined>(undefined);
-  const [status, setStatus] = useState<string | undefined>(undefined);
-  const [error, setError] = useState<string | undefined>(undefined);
-  const [details, setDetails] = useState<string | undefined>(undefined);
-  const [commands, setCommands] = useState<CommandEntry[] | undefined>(undefined);
-  const [preferredCommand, setPreferredCommand] = useLocalStorage<string | number | undefined>(`${data.source ?? data.id.source}-${data.source_id ?? data.id.id}-preferred-command`, undefined);
-  const queryClient = useQueryClient();
-  const validCommands = commands ? commands.filter(c => c.valid) : [];
-  const validDefaultCommand = commands?.find(c =>
-  {
-    if (!c.valid) return false;
-    if (preferredCommand && c.id !== preferredCommand) return false;
-    return true;
-  });
-
-  useEffect(() =>
-  {
-    const sub = rommApi.api.romm.status({ source: data.id.source })({ id: data.id.id }).subscribe();
-    ws.current = sub.ws;
-
-    sub.subscribe((e) =>
-    {
-      setStatus(e.data.status);
-      setProgress((e.data as any).progress);
-      setDetails((e.data as any).details);
-      setCommands((e.data as any).commands);
-
-      if (e.data.status === 'refresh')
-      {
-        queryClient.invalidateQueries({ queryKey: ['game', data.id] });
-        Router.navigate({ to: '/game/$source/$id', params: { id, source }, replace: true });
-      } else if (e.data.status === 'error')
-      {
-        const errorMessage = getErrorMessage(e.data.error);
-        if (!errorMessage) return;
-        toast.error(errorMessage);
-        setError(errorMessage);
-      }
-    });
-
-    return () =>
-    {
-      sub.close();
-      ws.current = undefined;
-    };
-  }, [data.id]);
-
-  let progressIcon: JSX.Element | undefined = undefined;
-  switch (status)
-  {
-    case 'download':
-      progressIcon = <Download />;
-      break;
-    case 'queued':
-      progressIcon = <Clock />;
-      break;
-    case 'extract':
-      progressIcon = <PackageOpen />;
-      break;
-  }
-
-  const showProgress = progress !== null && !!progressIcon;
-  useEffect(() =>
-  {
-    if (showProgress) return;
-    showInstallOptions(false);
-  }, [showProgress]);
-
-  const handlePlay = (cmd?: CommandEntry) =>
-  {
-    if (!cmd) return;
-    if (cmd.emulator === 'EMULATORJS')
-    {
-      const params = new URLSearchParams(cmd.command);
-      Router.navigate({ to: '/embedded/$source/$id', params: { source, id }, search: Object.fromEntries(params.entries()), replace: true });
-    } else
-    {
-      playMut.mutate({ source: data.id.source, id: data.id.id, command_id: cmd.id });
-      Router.navigate({ to: '/launcher/$source/$id', params: { source, id }, replace: true });
-    }
-  };
-
-  let mainButton: any | undefined = undefined;
-  if (status === 'installed')
-  {
-    mainButton = <div className="flex gap-2"><ActionButton onAction={() => handlePlay(validDefaultCommand)} tooltip={validDefaultCommand?.label ?? details}
-      key="primary"
-      type='primary'
-      id="mainAction"
-    >
-      <Play />
-
-    </ActionButton>
-
-      {validCommands.length > 1 &&
-        <ActionButton className="size-11! header-icon-small" tooltip={"All Commands"} type="base" id="allActionsBtn" onAction={() => showAllCommands(true, 'allActionsBtn')}>
-          <EllipsisVertical />
-        </ActionButton>}</div>;
-  }
-  else if (error)
-  {
-    mainButton = <ActionButton
-      key="error"
-      tooltip={error}
-      tooltip_type="error"
-      type='error'
-      onAction={() =>
-      {
-        if (status === 'missing-emulator')
-        {
-          Router.navigate({ to: '/settings/directories' });
-        }
-      }}
-      id="mainAction">
-      <TriangleAlert />
-    </ActionButton>;
-  }
-  else
-  {
-    mainButton = <ActionButton
-      key={status ?? 'unknown'}
-      disabled={installMut.isPending}
-      onAction={() =>
-      {
-        if (status === 'install')
-        {
-          installMut.mutate();
-        }
-      }}
-      tooltip={details ?? status}
-      type='primary'
-      id="mainAction">
-      {status === 'install' ? <Download /> : <span className="loading loading-spinner loading-lg"></span>}
-    </ActionButton>;
-  }
-
-  const { dialog: allCommandDialog, setOpen: showAllCommands } = useContextDialog('all-commands-dialog', {
-    content: <ContextList options={validCommands.map(c =>
-    {
-      const commands: DialogEntry = {
-        id: String(c.id),
-        content: c.label ?? "",
-        type: 'primary',
-        action (ctx)
-        {
-          setPreferredCommand(c.id);
-          handlePlay(c);
-        },
-      };
-      return commands;
-    })} />,
-    preferredChildFocusKey: String(preferredCommand)
-  });
-
-  const { dialog: installOptionsDialog, setOpen: showInstallOptions } = useContextDialog('install-options-dialog', {
-    content: <ContextList options={[{
-      id: 'cancel',
-      content: "Cancel",
-      action (ctx)
-      {
-        ws.current?.send('cancel');
-        ctx.close();
-      },
-      type: 'primary'
-    }]} />
-  });
-
-  return <div className="flex gap-2">
-    {mainButton}
-    <div className="divider divider-horizontal m-0"></div>
-    {showProgress && <ActionButton onAction={() => showInstallOptions(true, "progress")} key="progress" square tooltip={details} type="base" id="progress" >
-      <div key={`install-${status}`} data-tooltip={details ?? status} className="flex flex-col gap-2 w-16 items-center text-2xl">
-        <div className="flex flex-row">
-          {progressIcon}
-        </div>
-        <progress className="progress progress-secondary w-full" value={progress} max="100"></progress>
-      </div>
-    </ActionButton>}
-    {installOptionsDialog}
-    {allCommandDialog}
-  </div>;
-}
-
-function ActionButtons (data: {})
-{
-  const [, setDetailsSection] = useDetailsSection();
-  const { data: game } = Route.useLoaderData();
-  const [hoverText, setHoverText] = useState<string | undefined>(undefined);
-  const [hoverTextType, setHoverTextType] = useState<string>('accent');
-  const { ref, focusKey } = useFocusable({ focusKey: 'actions', onBlur: () => setHoverText(undefined) });
-  const [open, setOpen] = useState(false);
-  const deleteMutation = useMutation({
-    ...deleteGameMutation(game.id),
-    onSuccess: () =>
-    {
-      location.reload();
-      console.log("Deleted");
-    },
-    onError (error)
-    {
-      toast.error(getErrorMessage(error) ?? "Error While Deleting");
-    }
-  });
-
-  const contextOptions: DialogEntry[] = [];
-  if (game.local)
-  {
-    contextOptions.push({
-      id: 'delete',
-      action: () =>
-      {
-        deleteMutation.mutate();
-      },
-      icon: <Trash />,
-      content: "Delete",
-      type: 'error'
-    });
-  }
-
-  const handleTooltipSet = (e: HTMLElement) =>
-  {
-    const dataTooltip = e.getAttribute('data-tooltip');
-    setHoverText(dataTooltip ?? undefined);
-    setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
-  };
-
-  useFocusEventListener('focuschanged', (e) =>
-  {
-    if (e.target instanceof HTMLElement)
-    {
-      handleTooltipSet(e.target);
-    }
-
-  }, ref);
-
-  const { isPointer } = useActiveControl();
-
-  const tooltipStyles = {
-    base: 'bg-base-100 text-base-content',
-    accent: 'bg-accent text-accent-content',
-    error: 'bg-error text-error-content'
-  };
-
-  return <div ref={ref} className="flex sm:gap-2 md:gap-4 sm:h-16 md:h-32 overflow-hidden p-2 items-center shrink-0">
-    <FocusContext value={focusKey}>
-      <MainActions />
-      <AchievementsInfo onAction={() =>
-      {
-        setDetailsSection("achievements");
-        if (game.achievements?.entires[0])
-        {
-          setFocus(game.achievements.entires[0].id);
-        }
-
-      }} />
-      <ActionButton tooltip="Settings" onAction={() => setOpen(true)} type="base" id="settings" icon={<Settings />} >
-
-      </ActionButton >
-      <ContextDialog sourceFocusKey="settings" id="settings-context" open={open} close={setOpen}>
-        <ContextList options={contextOptions} />
-      </ContextDialog>
-      {!!hoverText && !isPointer && <p className={twMerge("flex sm:hidden md:inline py-1 md:py-2 md:px-4 rounded-4xl text-wrap wrap-anywhere text-base", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>}
-    </FocusContext>
-  </div>;
-}
-
-function Detail (data: { icon: JSX.Element; children?: any | any[]; })
-{
-  return (
-    <div className="flex gap-2">
-      {data.icon}
-      {data.children}
-    </div>
-  );
-}
-
-function ActionButton (data: {
-  id: string,
-  icon?: JSX.Element,
-  children?: any | any[];
-  className?: string;
-  type: "primary" | 'base' | "accent" | 'error';
-  square?: boolean,
-  onFocus?: () => void;
-  tooltip?: string,
-  tooltip_type?: 'accent' | 'error';
-  onAction?: () => void;
-  disabled?: boolean;
-})
-{
-  const { ref } = useFocusable({ focusKey: data.id, onFocus: data.onFocus, onEnterPress: data.onAction, 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",
-    accent: "bg-accent text-accent-content focusable focusable-primary focusable:bg-base-content focusable:text-base-300",
-    error: "bg-error text-error-content focused:bg-error focused:text-error-content",
-  };
-  return (
-    <div className="tooltip tooltip-accent tooltip-right" data-tip={data.tooltip}>
-      <button
-        disabled={data.disabled}
-        ref={ref}
-        onClick={data.onAction}
-        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",
-          "hover:ring-7 hover:ring-primary", styles[data.type], classNames({ "rounded-full sm:size-14 md:size-21 hover:bg-base-content hover:text-base-300 hover:ring-7 hover:ring-primary": !data.square }), data.className)}>
-        {data.icon}
-        {data.children}
-      </button>
-    </div>
-  );
-}
-
-function Stats ()
-{
-  const { data } = Route.useLoaderData();
  const stats: StatEntry[] = [];
-  if (data.path_fs)
-    stats.push({ label: "Location", content: data.path_fs, icon: <Folder /> });
-  if (data.companies)
-    stats.push({ label: "Companies", content: data.companies });
-  if (data.genres)
-    stats.push({ label: 'Genres', content: data.genres });
-  if (data.release_date)
-    stats.push({ label: "Release Date", content: data.release_date.toLocaleDateString(), icon: <Calendar /> });
-  if (data.emulators)
-    stats.push({ label: "Emulators", content: data.emulators.map(e => e.name) });
-  return <StatList elementClassName="bg-base-300" stats={stats} />;
+  if (data.game)
+  {
+    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.emulators)
+      stats.push({ label: "Emulators", content: data.game.emulators.map(e => e.name) });
+  }
+
+  return <StatList elementClassName="bg-base-300" stats={stats} id="game-detail-stats" />;
 }

-function Divider (data: { rootFocusKey: string; showShortcuts: boolean; })
+function Divider (data: { rootFocusKey: string; showShortcuts: boolean; game: FrontEndGameTypeDetailed | undefined; })
 {
  const [details, setDetails] = useDetailsSection();
-  const { data: game } = Route.useLoaderData();
  const { ref, focusKey } = useFocusable({
    focusKey: "details-divider",
    onFocus: (l, p, d) => scrollIntoViewHandler({ block: 'nearest', behavior: 'smooth' })(focusKey, ref.current, d),
@ -625,7 +200,7 @@ function Divider (data: { rootFocusKey: string; showShortcuts: boolean; })
    stats: { label: "Stats", selected: details === 'stats', icon: <Info /> },
    screenshots: { label: "Screenshots", selected: details === 'screenshots', icon: <Image /> },
  };
-  if (game.achievements)
+  if (data.game?.achievements)
  {
    detailFilter.achievements = { label: "Achievements", selected: details === 'achievements', icon: <Trophy /> };
  }
@ -637,18 +212,18 @@ function Divider (data: { rootFocusKey: string; showShortcuts: boolean; })
  </div>;
 }

-export default function GameDetailsUI ()
+function RouteComponent ()
 {
  const [recommendedGamesVisible, setRecommendedGamesVisible] = useState(false);
-  const { data } = Route.useLoaderData();
+  const { source, id } = Route.useParams();
+  const { data } = useQuery(gameQuery(source, id));
  const { focus } = Route.useSearch();
  const [, setUpdate] = useState(0);
  const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details" });
  const headerRef = useRef(null);
  const sentinelRef = useRef(null);
-  const backgroundImage = data.path_cover ? new URL(`${RPC_URL(__HOST__)}${data?.path_cover}`) : undefined;
-  const mainAreaRef = useRef<HTMLDivElement>(null);
-  const { data: recommendedGames } = useQuery({ ...gamesRecommendedBasedOnGameQuery(data.id.source, data.id.id), enabled: recommendedGamesVisible });
+  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 });

  useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
  const { shortcuts } = useShortcutContext();
@ -666,7 +241,7 @@ export default function GameDetailsUI ()
  }, []);

  useStickyDataAttr(headerRef, sentinelRef, ref);
-  const recommendedEmulators = data.emulators?.filter(e => e.store_exists);
+  const recommendedEmulators = data?.emulators?.filter(e => e.validSource);

  const { ref: intersct } = useIntersectionObserver({
    onChange: (isIntersecting, entry) =>
@ -686,13 +261,14 @@ export default function GameDetailsUI ()
            <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>
-            <div className="flex flex-col h-[calc(100vh-12rem)] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40" ref={mainAreaRef}>
-              <Details mainAreaRef={mainAreaRef} />
+            <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>
-            <MoreDetails />
-            <div className="relative bg-base-300">
+            <MoreDetails game={data} />
+            <div className="relative">
+              <div className="bg-dots"></div>
              {!!recommendedEmulators && recommendedEmulators.length > 0 && <EmulatorsSection
-                id={`${data.id.id}-recommended`}
+                id={`${data?.id.id}-recommended`}
                header={<><div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
                  <h2 className="font-bold uppercase tracking-widest">
                    Related Emulators
@ -703,6 +279,7 @@ export default function GameDetailsUI ()
                  Router.navigate({ to: '/store/details/emulator/$id', params: { id } });
                }}
                emulators={recommendedEmulators} />}
+
            </div>
            <div className="bg-base-100">
              <div className="px-6 py-3">
--- a/src/mainview/routes/index.tsx
+++ b/src/mainview/routes/index.tsx
@ -1,4 +1,4 @@
-import { JSX, Suspense, useContext, useEffect, useState } from "react";
+import { JSX, Suspense, useContext, useState } from "react";
 import
 {
  Gamepad2,
@ -14,7 +14,6 @@ import
 import
 {
  createFileRoute,
-  useNavigate,
 } from "@tanstack/react-router";
 import { useMutation } from "@tanstack/react-query";
 import
@ -25,7 +24,7 @@ import
 } from "@noriginmedia/norigin-spatial-navigation";
 import classNames from "classnames";
 import { useEventListener } from "usehooks-ts";
-import { HeaderAccounts, HeaderStatusBar } from "../components/Header";
+import { HeaderAccounts, HeaderButton, HeaderStatusBar } from "../components/Header";
 import { FilterUI } from "../components/Filters";
 import { AnimatedBackground } from "../components/AnimatedBackground";
 import { GameList } from "../components/GameList";
@ -43,7 +42,6 @@ import CollectionList from "../components/CollectionList";
 import { zodValidator } from '@tanstack/zod-adapter';
 import { mobileCheck, useDragScroll } from "../scripts/utils";
 import { AnimatedBackgroundContext } from "../scripts/contexts";
-import { FrontEndId } from "@/shared/constants";
 import Carousel from "../components/Carousel";
 import { closeMutation } from "@queries/system";

@ -301,10 +299,14 @@ export default function ConsoleHomeUI ()
  const setFilter = (filter: string) => Router.navigate({ to: '/', search: { filter }, viewTransition: false, replace: true });

  const { shortcuts } = useShortcutContext();
-  const headerButtons = [];
+  const headerButtons: HeaderButton[] = [];
  if (mobileCheck())
    headerButtons.push({ id: "fullscreen", icon: <Maximize />, action: handleFullscreen });
-  headerButtons.push({ id: "search", icon: <Search /> }, { id: "power-button", icon: <Power />, external: true, action: () => close.mutate() });
+  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" }) }
+  );

  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">
--- a/src/mainview/routes/launcher.$source.$id.tsx
+++ b/src/mainview/routes/launcher.$source.$id.tsx
@ -1,6 +1,5 @@
 import { AnimatedBackground } from '@/mainview/components/AnimatedBackground';
 import { createFileRoute } from '@tanstack/react-router';
-import { GameInstallProgress, RPC_URL } from '@/shared/constants';
 import DotsLoading from '../components/backgrounds/dots';
 import { Router } from '..';
 import { useEffect } from 'react';
@ -9,6 +8,7 @@ import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/
 import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';
 import Shortcuts from '../components/Shortcuts';
 import { gameQuery } from '@queries/romm';
+import { rommApi } from '../scripts/clientApi';

 export const Route = createFileRoute('/launcher/$source/$id')({
  component: RouteComponent,
@ -30,30 +30,22 @@ function RouteComponent ()

  useEffect(() =>
  {
-    const es = new EventSource(`${RPC_URL(__HOST__)}/api/romm/status/${source}/${id}`);
+    if (!data) return;
+    const sub = rommApi.api.romm.status({ source: data.id.source })({ id: data.id.id }).subscribe();

-    es.onmessage = ({ data }) =>
+    sub.subscribe((e) =>
    {
-      const stats = JSON.parse(data) as GameInstallProgress;
-      if (stats.status !== 'playing')
+      if (e.data.status !== 'playing')
      {
        HandleGoBack();
      }
-    };
-
-    es.addEventListener('refresh', () =>
-    {
-      HandleGoBack();
    });

-    es.onerror = () =>
+    return () =>
    {
-      HandleGoBack();
+      sub.close();
    };
-
-    return () => es.close();
-  }, []);
-
+  }, [data?.id]);

  return <AnimatedBackground ref={ref} backgroundKey='game-details'>
    <div className='flex shadow-2xs shadow-black flex-col absolute w-screen h-screen overflow-hidden justify-center items-center gap-4'>
--- a/src/mainview/routes/settings/directories.tsx
+++ b/src/mainview/routes/settings/directories.tsx
@ -2,7 +2,6 @@ import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-naviga
 import { Block, createFileRoute } from '@tanstack/react-router';
 import DownloadDirectoryOption from '@/mainview/components/options/DownloadDirectoryOption';
 import { useIsMutating, useMutation, useQuery } from '@tanstack/react-query';
-import { DownloadsDrive } from '@/shared/constants';
 import prettyBytes from 'pretty-bytes';
 import classNames from 'classnames';
 import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
@ -13,6 +12,7 @@ import { Button } from '@/mainview/components/options/Button';
 import { systemApi } from '@/mainview/scripts/clientApi';
 import useActiveControl from '@/mainview/scripts/gamepads';
 import { changeDownloadsMutation } from '@queries/settings';
+import { downloadDrivesQuery } from '@/mainview/scripts/queries/system';

 export const Route = createFileRoute('/settings/directories')({
  component: RouteComponent,
@ -79,8 +79,8 @@ function RouteComponent ()
    preferredChildFocusKey: focus
  });

-  const isMoving = useIsMutating(queries.settings.changeDownloadsMutation);
-  const { data: drives, refetch } = useQuery({ ...queries.system.downloadDrivesQuery, refetchInterval: isMoving > 0 ? 1000 : undefined });
+  const isMoving = useIsMutating(changeDownloadsMutation);
+  const { data: drives, refetch } = useQuery({ ...downloadDrivesQuery, refetchInterval: isMoving > 0 ? 1000 : undefined });

  return <FocusContext value={focusKey}>
    <Block shouldBlockFn={() => isMoving > 0} withResolver={false} />
--- a/src/mainview/routes/settings/emulators.tsx
+++ b/src/mainview/routes/settings/emulators.tsx
@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { OptionSpace } from '../../components/options/OptionSpace';
 import { OptionInput } from '../../components/options/OptionInput';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Button } from '../../components/options/Button';
 import { Check, ChevronDown, FolderSearch, SearchAlert, Trash, TriangleAlert } from 'lucide-react';
 import { ContextDialog, ContextList, DialogEntry, OptionElement } from '../../components/ContextDialog';
@ -15,6 +15,10 @@ import { GamePadButtonCode, useShortcuts } from '@/mainview/scripts/shortcuts';
 import FilePicker from '@/mainview/components/FilePicker';
 import { dirname } from 'pathe';
 import { autoEmulatorsQuery, customEmulatorAddMutation, customEmulatorDeleteMutation, customEmulatorRemoveValueQuery, customEmulatorsQuery, setCustomEmulatorMutation } from '@queries/settings';
+import Carousel from '@/mainview/components/Carousel';
+import { FOCUS_KEYS } from '@/mainview/scripts/types';
+import { scrollIntoNearestParent, scrollIntoViewHandler, useDragScroll } from '@/mainview/scripts/utils';
+import { SettingsOption } from '@/mainview/components/options/SettingsOption';

 export const Route = createFileRoute('/settings/emulators')({
  component: RouteComponent,
@ -99,6 +103,7 @@ function EmulatorPath (data: { id: string; })
  const [dirty, setDirty] = useState(false);
  const [localValue, setLocalValue] = useState<string | undefined>();
  const { data: remoteValue } = useQuery(customEmulatorRemoveValueQuery(data.id));
+  useEffect(() => { setLocalValue(remoteValue); }, [remoteValue]);
  const setSettingMutation = useMutation(setCustomEmulatorMutation(data.id, (v) =>
  {
    setLocalValue(v);
@ -128,7 +133,7 @@ function EmulatorPath (data: { id: string; })
  };

  return (
-    <OptionSpace id={`${data.id}-space`} label={
+    <OptionSpace id={FOCUS_KEYS.EMULATOR_CUSTOM_PATH(data.id)} label={
      focus => <>
        <p className='font-semibold'>{data.id}</p>
        <small className='opacity-40'>{emulators[data.id]}</small>
@ -140,7 +145,6 @@ function EmulatorPath (data: { id: string; })
          type="text"
          onBlur={handleSave}
          autocomplete="off"
-          defaultValue={remoteValue}
          onChange={(v) =>
          {
            setLocalValue(v);
@ -187,22 +191,22 @@ function EmulatorBadge (data: {
  isCritical: boolean;
  pathCover?: string;
  addOverride: (emulator: string) => void;
-})
+} & FocusParams)
 {
  const { focusKey, ref, focused } = useFocusable({
-    focusKey: `badge-${data.emulator}`, onFocus: () =>
-    {
-      (ref.current as HTMLElement).scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    }
+    focusKey: FOCUS_KEYS.EMULATOR_CARD(data.emulator),
+    onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
  });

  useShortcuts(focusKey, () => [{
-    label: 'Add Override', button: GamePadButtonCode.A, action: () =>
+    label: 'Add Override',
+    button: GamePadButtonCode.A,
+    action: () =>
      data.addOverride(data.emulator)
  }], [data.addOverride]);

-  return <div className={classNames("tooltip tooltip-primary", { "tooltip-open": focused })} data-tip={`${emulators[data.emulator]}`}>
-    <div ref={ref} className={
+  return <div ref={ref} className={classNames("tooltip tooltip-primary tooltip-right", { "tooltip-open": focused })} data-tip={`${emulators[data.emulator]}`}>
+    <div className={
      twMerge('flex flex-col rounded-3xl bg-base-300 justify-center items-center p-4 overflow-hidden h-full',
        classNames({
          "bg-base-200": !data.path,
@ -221,15 +225,38 @@ function EmulatorBadge (data: {
  </div>;
 }

-function EmulatorBadges (data: { path?: string; addOverride: (emulator: string) => void; })
+function EmulatorBadges (data: { path?: string; addOverride: (emulator: string) => void; } & FocusParams)
 {
-  const { data: autoEmulators } = useQuery(autoEmulatorsQuery);
-  const { ref, focusKey } = useFocusable({ focusKey: `emulator-badges`, focusable: !!autoEmulators && autoEmulators.length > 0 });
-  return <div ref={ref} className='grid grid-cols-[repeat(auto-fit,14rem)] auto-rows-[4rem] gap-2 justify-center-safe'>
+  const { data: autoEmulators } = useQuery({
+    ...autoEmulatorsQuery,
+    select (data)
+    {
+      return data.toSorted((a, b) =>
+      {
+        const sourceCompare = (b.validSource ? 1 : 0) - (a.validSource ? 1 : 0);
+        if (sourceCompare !== 0)
+        {
+          return sourceCompare;
+        } else
+        {
+          return b.name.localeCompare(b.name);
+        }
+      });
+    }
+  });
+  const { ref, focusKey } = useFocusable({
+    focusKey: `emulator-badges`,
+    focusable: !!autoEmulators && autoEmulators.length > 0,
+    onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
+  });
+  useDragScroll(ref);
+  return <Carousel scrollRef={ref} className='grid grid-flow-col overflow-x-scroll auto-cols-[16rem] grid-rows-[repeat(3,4rem)] gap-2 justify-center-safe py-4 no-scrollbar'>
+
    <FocusContext value={focusKey}>
-      {autoEmulators?.map(e => <EmulatorBadge key={e.name} isCritical={e.isCritical} addOverride={data.addOverride} pathCover={e.logo} path={e.validSource?.binPath} exists={!!e.validSource} emulator={e.name} />)}
+      {autoEmulators?.map(e => <EmulatorBadge onFocus={(k, n, d) => scrollIntoNearestParent(n)} key={e.name} isCritical={e.isCritical} addOverride={data.addOverride} pathCover={e.logo} path={e.validSource?.binPath} exists={!!e.validSource} emulator={e.name} />)}
+
    </FocusContext>
-  </div>;
+  </Carousel>;
 }

 function RouteComponent ()
@ -242,11 +269,19 @@ function RouteComponent ()

  const { data: customEmulators } = useQuery(customEmulatorsQuery);

-  const addOverrideMutation = useMutation(customEmulatorAddMutation);
+  const addOverrideMutation = useMutation({
+    ...customEmulatorAddMutation, async onSuccess (data, variables, onMutateResult, context)
+    {
+      await context.client.invalidateQueries({ queryKey: ['custom-emulators'] });
+      setFocus(FOCUS_KEYS.EMULATOR_CUSTOM_PATH(variables));
+    },
+  });

  return <FocusContext value={focusKey}>
    <ul ref={ref} className="list rounded-box gap-2">
-      <EmulatorBadges addOverride={addOverrideMutation.mutate} />
+      <EmulatorBadges addOverride={addOverrideMutation.mutate} onFocus={scrollIntoViewHandler({ block: 'center' })} />
+      <div className="divider text-base-content/40">Preferences</div>
+      <SettingsOption label="Launch In Fullscreen" id="launchInFullscreen" type="checkbox" />
      <div className="divider text-base-content/40">Overrides</div>
      <NewEmulatorPath isAddingOverride={addOverrideMutation.isPending} addOverride={addOverrideMutation.mutate} />
      {!!customEmulators && customEmulators.map((key) => <EmulatorPath key={key} id={key} />)}
--- a/src/mainview/routes/settings/plugins.tsx
+++ b/src/mainview/routes/settings/plugins.tsx
@ -0,0 +1,55 @@
+import { Button } from '@/mainview/components/options/Button';
+import { OptionInput } from '@/mainview/components/options/OptionInput';
+import { OptionSpace } from '@/mainview/components/options/OptionSpace';
+import { enablePluginMutation, getAllPluginsQuery } from '@/mainview/scripts/queries/plugins';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { Puzzle, Search } from 'lucide-react';
+
+export const Route = createFileRoute('/settings/plugins')({
+    component: RouteComponent,
+    loader (ctx)
+    {
+        ctx.context.queryClient.prefetchQuery(getAllPluginsQuery);
+    },
+});
+
+function Plugin (data: {
+    plugin: FrontendPlugin,
+    setEnabled: (enabled: boolean) => void;
+})
+{
+    return <OptionSpace label={<div className='flex gap-4 items-center'>
+        <div className='flex bg-accent text-accent-content rounded-full size-12 p-2 items-center justify-center'>
+            {data.plugin.icon ? <img src={data.plugin.icon}></img> : <Puzzle />}
+        </div>
+        <div className='flex flex-col'>
+            <div>{data.plugin.displayName}</div>
+            <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" />
+        <Button id={`${data.plugin.name}-details`} ><Search /> Details</Button>
+    </OptionSpace>;
+}
+
+function RouteComponent ()
+{
+    const { data: plugins, refetch: refetchPlugins } = useQuery(getAllPluginsQuery);
+    const pluginMutation = useMutation({
+        ...enablePluginMutation, onSuccess (data, variables, onMutateResult, context)
+        {
+            refetchPlugins();
+        },
+    });
+
+    return <>
+        {!!plugins && Object.entries(Object.groupBy(plugins, p => p.source)).map(([source, plugins]) =>
+        {
+            return <>
+                <div className="divider">{source === 'builtin' ? "Built In" : "Store"}</div>
+                {plugins.map(p => <Plugin key={p.name} plugin={p} setEnabled={(v) => pluginMutation.mutate({ id: p.name, enabled: v })} />)}
+            </>;
+        })}
+    </>;
+}
--- a/src/mainview/routes/settings/route.tsx
+++ b/src/mainview/routes/settings/route.tsx
@ -19,6 +19,7 @@ import
  Info,
  Joystick,
  MonitorCog,
+  Puzzle,
 } from "lucide-react";
 import { JSX, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
@ -141,6 +142,12 @@ function SettingsMenu (data: {})
        label="Directories"
        icon={<HardDrive />}
      />
+      <MenuItem
+        focusSelect
+        route="/settings/plugins"
+        label="Plugins"
+        icon={<Puzzle />}
+      />
      <MenuItem
        focusSelect
        route="/settings/about"
--- a/src/mainview/routes/store/details.emulator.$id.tsx
+++ b/src/mainview/routes/store/details.emulator.$id.tsx
@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import
 {
    useFocusable,
@ -11,9 +11,9 @@ import Shortcuts from "@/mainview/components/Shortcuts";
 import { AnimatedBackground } from "@/mainview/components/AnimatedBackground";
 import { systemApi } from "@/mainview/scripts/clientApi";
 import { Button } from "@/mainview/components/options/Button";
-import { ChevronDown, Download, Gamepad2, Info, Settings, Trash2, TriangleAlert } from "lucide-react";
+import { ChevronDown, Cpu, Download, Gamepad2, Info, Settings, Trash2, TriangleAlert, WandSparkles } from "lucide-react";
 import { ContextList, DialogEntry, useContextDialog } from "@/mainview/components/ContextDialog";
-import { FrontEndEmulatorDetailed, RPC_URL } from "@/shared/constants";
+import { RPC_URL } from "@/shared/constants";
 import Screenshots from "@/mainview/components/Screenshots";
 import { StickyHeaderUI } from "@/mainview/components/Header";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@ -24,8 +24,9 @@ import { getErrorMessage } from "react-error-boundary";
 import { emulatorStatusIcons } from "@/mainview/components/store/StoreEmulatorCard";
 import StatList, { StatEntry } from "@/mainview/components/StatList";
 import { GamesSection } from "@/mainview/components/store/GamesSection";
-import { installEmulatorMutation, storeEmulatorDeleteMutation, storeEmulatorDetailsQuery, storeEmulatorsRecommendedQuery } from "@queries/store";
+import { deleteBiosMutation, downloadBiosMutation, installEmulatorMutation, storeEmulatorDeleteMutation, storeEmulatorDetailsQuery, storeEmulatorsRecommendedQuery } from "@queries/store";
 import { gamesRecommendedBasedOnEmulatorQuery } from "@queries/romm";
+import FocusTooltip from "@/mainview/components/FocusTooltip";

 export const Route = createFileRoute('/store/details/emulator/$id')({
    component: RouteComponent,
@ -42,7 +43,7 @@ function HomePageLink (data: { homepage?: string; })
    const { ref } = useFocusable({ focusKey: 'homepage-link' });
    return <a
        ref={ref}
-        className="text-lg text-info cursor-pointer focusable focusable-accent focusable-hover bg-base-200 rounded-full px-4 py-1"
+        className="text-lg text-info cursor-pointer focusable focusable-accent focusable-hover bg-base-200 rounded-full px-4 py-1 not-mobile:shadow-2xl"
        onClick={() =>
        {
            if (data.homepage) systemApi.api.system.open.post({ url: data.homepage });
@ -58,10 +59,44 @@ function TitleArea (data: {
 {
    const queryClient = useQueryClient();
    const deleteMutation = useMutation({
-        ...storeEmulatorDeleteMutation, onSuccess: (data, variables, onMutateResult, context) => context.client.refetchQueries(storeEmulatorDetailsQuery(variables)),
+        ...storeEmulatorDeleteMutation,
+        onSuccess (data, variables, onMutateResult, context)
+        {
+            context.client.refetchQueries(storeEmulatorDetailsQuery(variables));
+        },
+    });
+    const downloadBios = useMutation(downloadBiosMutation(data.emulator?.name ?? ''));
+    const deleteBios = useMutation({
+        ...deleteBiosMutation,
+        onSuccess (data, variables, onMutateResult, context)
+        {
+            context.client.refetchQueries(storeEmulatorDetailsQuery(variables));
+            toast.success("BIOS Deleted", { icon: <Trash2 /> });
+        },
    });
    const installProgressRef = useRef<HTMLProgressElement>(null);
-    const { data: installJob, status: installStatus } = useJobStatus('download-emulator', {
+    const { data: biosInstallJob, state: biosDownloadState } = useJobStatus('bios-download-job', {
+        query: { id: data.emulator?.name },
+        onError (error)
+        {
+            console.log(error);
+            toast.error(getErrorMessage(error) ?? "Error During Bios Download");
+        },
+        onProgress (process)
+        {
+            if (installProgressRef.current)
+                installProgressRef.current.value = process;
+        },
+        onCompleted (data)
+        {
+            toast.success("BIOS Downloaded", { icon: <Download /> });
+        },
+        onEnded (data)
+        {
+            queryClient.refetchQueries(storeEmulatorDetailsQuery(data.emulator));
+        },
+    });
+    const { data: installJob, state: installState } = useJobStatus('download-emulator', {
        onError (error)
        {
            console.log(error);
@ -80,12 +115,13 @@ function TitleArea (data: {
        },
    });

-    const isInstalling = !!installJob;
+    const isInstalling = !!installJob || !!biosInstallJob;

    const options: DialogEntry[] = [];
+    const installedFromStore = !!data.emulator?.sources.find(s => s.type === 'store' && s.exists);
    if (data.emulator)
    {
-        if (!isInstalling && !data.emulator?.validSource)
+        if (!isInstalling && !installedFromStore)
        {
            options.push(...data.emulator.downloads.map(d =>
            {
@ -101,7 +137,7 @@ function TitleArea (data: {
                };
                return entry;
            }));
-        } else if (data.emulator.sources.find(s => s.type === 'store' && s.exists))
+        } else if (installedFromStore)
        {
            options.push({
                content: "Delete",
@ -114,12 +150,43 @@ function TitleArea (data: {
                },
                id: "delete"
            });
+
+            if (!data.emulator.bios || data.emulator.bios.length <= 0)
+            {
+                options.push({
+                    content: "Download BIOS",
+                    type: "primary",
+                    icon: <Download />,
+                    action (ctx)
+                    {
+                        downloadBios.mutate();
+                        ctx.close();
+                    },
+                    id: "download-bios"
+                });
+            } else
+            {
+                options.push({
+                    content: "Delete BIOS",
+                    type: "error",
+                    icon: <Trash2 />,
+                    action (ctx)
+                    {
+                        if (!data.emulator) return;
+                        deleteBios.mutate(data.emulator.name);
+                        ctx.close();
+                    },
+                    id: "download-bios"
+                });
+            }
+
        }
    }

-    const { ref, focusKey } = useFocusable({
+    const { ref, focusKey, hasFocusedChild } = useFocusable({
        focusKey: 'title-area',
        preferredChildFocusKey: "install-btn",
+        trackChildren: true,
        onFocus: () => { (ref.current as HTMLElement).scrollIntoView({ behavior: "smooth", block: 'end' }); }
    });

@ -131,7 +198,16 @@ function TitleArea (data: {
    }
    else if (isInstalling)
    {
-        installButtonContent = <><span className="loading loading-spinner loading-lg"></span>{installStatus}</>;
+        const status: any = {
+            bios: {
+                download: "Downloading BIOS"
+            },
+            install: {
+                download: "Downloading",
+                extract: "Extracting"
+            }
+        };
+        installButtonContent = <><span className="loading loading-spinner loading-lg"></span>{installState ? status.install[installState] : biosDownloadState ? status.bios[biosDownloadState] : undefined}</>;
    } else if (data.emulator.validSource)
    {
        installButtonContent = <><Settings /> Options</>;
@ -155,25 +231,37 @@ function TitleArea (data: {

    return <div ref={ref} className="flex flex-wrap gap-4 sm:portrait:justify-center md:justify-normal items-center">
        <FocusContext value={focusKey}>
-            {data.emulator ? <img className="size-32" src={data.emulator.logo}></img> : <div className="skeleton h-32 w-32" />}
+            {data.emulator ? <img className="size-32 rounded-full shadow-lg bg-base-200 ring-7 ring-base-200" src={data.emulator.logo}></img> : <div className="skeleton h-32 w-32" />}
            <div className="flex flex-col grow gap-1 sm:portrait:items-center md:items-start">
-                <h1 className="text-4xl font-semibold">{data.emulator?.name ?? <div className="skeleton h-10 w-84" />}</h1>
+                <h1 className="text-4xl font-semibold text-shadow-md">{data.emulator?.name ?? <div className="skeleton h-10 w-84" />}</h1>
                <div className="flex gap-2">
                    {data.emulator?.systems.map(({ id, name, icon }) =>
                    {
                        return <div key={id} className="flex gap-1 items-center text-base-content/35 mt-0.5">
                            {!!icon && <img className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${icon}`} />}
-                            <p className="text-nowrap text-ellipsis overflow-hidden">{name}</p>
+                            <p className="text-nowrap text-ellipsis overflow-hidden dark:text-shadow-lg">{name}</p>
                        </div>;
                    }) ?? <><div className="skeleton h-4 w-48" /><div className="skeleton h-4 w-32" /></>}
                </div>
                <div className="flex pt-2 gap-1">
                    <HomePageLink homepage={data.emulator?.homepage} />
+                    <div className="divider divider-horizontal m-0"></div>
+                    {!!data.emulator?.bios?.[0] && <div className="tooltip" data-tip="Has BIOS">
+                        <div className="flex items-center justify-center bg-base-200 p-2 rounded-full"><Cpu className="size-5" /></div>
+                    </div>}
+                    {data.emulator && !!data.emulator.integration && data.emulator.validSource?.type === 'store' && <div className="tooltip" data-tip="Has Integration">
+                        <div className="bg-base-200 rounded-full p-2"><WandSparkles className="size-5" /></div>
+                    </div>}
                </div>
            </div>
-            <div className="flex relative sm:portrait:grow md:grow-0 justify-center gap-4">
-                <Button style="accent" id="install-btn" className="px-8 py-3 rounded-4xl focusable focusable-accent sm:portrait:grow flex-col gap-2" onAction={handleOptionsOpen} >
+            <div className="flex relative sm:portrait:grow md:grow-0 justify-center gap-4 items-center">
+                <FocusTooltip visible={hasFocusedChild} parentRef={ref} />
+                {(!data.emulator?.bios || data.emulator.bios.length <= 0) && (data.emulator?.biosRequirement === 'required') && installedFromStore && <div className="tooltip tooltip-error" data-tip="Missing BIOS">
+                    <Button id="bios-warning-bt" tooltipType="error" tooltip="Missing BIOS" style="error" className="rounded-full size-14 focusable focusable-error shadow-lg" onAction={() => setOpen(true, 'bios-warning-bt')}><TriangleAlert /></Button>
+                </div>}
+                <Button style="accent" id="install-btn" className="px-8 py-3 rounded-4xl focusable focusable-accent sm:portrait:grow flex-col gap-2 light:ring-offset-7 light:ring-offset-base-100 light:focused:ring-offset-0  shadow-lg" onAction={handleOptionsOpen} >
                    <div className="flex gap-4">
+
                        {installButtonContent}
                        <div className="divider divider-horizontal divider-neutral m-0 opacity-20"></div>
                        <ChevronDown />
@ -189,11 +277,11 @@ function TitleArea (data: {
 function Description (data: { emulator?: FrontEndEmulatorDetailed; })
 {
    return <div className="flex-col sm:px-8 md:px-16 pt-8 sm:pb-8 md:pb-12 bg-base-100">
-        <p>{data.emulator?.description ?? <div className="flex flex-col gap-4 w-full">
+        <div>{data.emulator?.description ?? <div className="flex flex-col gap-4 w-full">
            <div className="skeleton h-4 w-[40%]"></div>
            <div className="skeleton h-4 w-[80%]"></div>
            <div className="skeleton h-4 w-full"></div>
-        </div>}</p>
+        </div>}</div>
    </div>;
 }

@ -236,6 +324,14 @@ export function RouteComponent ()
            stats.push({ label: "Tags", content: emulator.keywords });
        stats.push({ label: "Systems", content: emulator.systems.map(s => s.name) });
        stats.push(...emulator.sources.flatMap(s => [{ label: "Source", content: s.type, icon: emulatorStatusIcons[s.type] }, { label: "Location", content: s.binPath }]));
+        if (emulator.bios)
+            stats.push({
+                label: "Bios", content: emulator.bios && emulator.bios.length > 0 ? emulator.bios : <div className="text-warning font-semibold">Missing</div>
+            });
+        if (emulator.integration)
+        {
+            stats.push({ label: "Integration", content: `${emulator.integration.name} (${emulator.integration.version})` });
+        }
    }

    return (
@ -248,6 +344,7 @@ export function RouteComponent ()

                        <div className='mobile:hidden left-0 top-0 absolute bg-gradient'></div>
                        <div className='mobile:hidden left-0 top-0 absolute bg-noise'></div>
+                        <div className='mobile:hidden left-0 top-0 absolute bg-dots'></div>
                    </div>
                    <div className="flex flex-col bg-base-100 gap-4 pt-4 h-[50vh] min-h-128 grow text-lg">
                        {isEmulatorPending || (!!emulator && emulator?.screenshots.length > 0) && <Screenshots className="grow bg-base-200" screenshots={emulator?.screenshots} onFocus={scrollIntoViewHandler({ block: 'end' })} />}
@ -258,6 +355,7 @@ export function RouteComponent ()
                    <div className="divider"> <Info className="size-12" /> Stats</div>
                    <StatList id="emulator-details-stats" stats={stats} onFocus={scrollIntoViewHandler({ block: 'center' })} />
                    {recommendedEmulators && <div className="relative bg-base-200">
+                        <div className="bg-dots z-0"></div>
                        <EmulatorsSection
                            id={`${id}-recommended`}
                            header={<><div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
--- a/src/mainview/routes/store/tab/index.tsx
+++ b/src/mainview/routes/store/tab/index.tsx
@ -4,7 +4,7 @@ import { MissingEmulatorsSection } from "../../../components/store/MissingEmulat
 import { EmulatorsSection } from "../../../components/store/EmulatorsSection";
 import { GamesSection } from "../../../components/store/GamesSection";
 import { StatsSection } from "../../../components/store/StatsSection";
-import { FrontEndGameTypeDetailed, RPC_URL } from '@/shared/constants';
+import { RPC_URL } from '@/shared/constants';
 import { useContext, useEffect, useRef, useState } from 'react';
 import { scrollIntoViewHandler } from '@/mainview/scripts/utils';
 import { StoreContext } from '@/mainview/scripts/contexts';
@ -53,18 +53,18 @@ function Main (data: { games?: FrontEndGameTypeDetailed[]; })
    const previewUrl = data.games ? new URL(`${RPC_URL(__HOST__)}${data.games[selectedGame].path_cover}`) : undefined;
    previewUrl?.searchParams.set('blur', '16');

-    return <div ref={ref} className='flex sm:flex-wrap md:flex-nowrap group-focusable p-4 mt-4 gap-4'>
+    return <div ref={ref} className='flex sm:flex-wrap md:flex-nowrap group-focusable md:px-12 p-4 mt-4 gap-6'>

        <FocusContext value={focusKey}>
-            {game ? <div key={selectedGame} className="flex transition-all duration-500 flex-col rounded-3xl overflow-hidden shadow-black/5 shadow-xl w-full">
+            {game ? <div key={selectedGame} className="flex transition-all duration-500 flex-col rounded-3xl overflow-hidden shadow-black/5 shadow-lg w-full ring-6 ring-base-200 border-6 border-base-200">
                <div className='flex relative h-full overflow-hidden'>
                    <div className='absolute w-full h-full z-0  bg-base-200'>
                        <img key={selectedGame}
-                            className='w-full h-full object-cover transition-all duration-500 ease-out scale-110 opacity-0 z-0 mask-l-from-0'
+                            className='w-full h-full object-cover transition-all duration-500 ease-out scale-110 opacity-0 light:data-loaded:opacity-40 dark:data-loaded:opacity-100 z-0 mask-l-from-0'
                            src={previewUrl?.href}
                            onLoad={(e) =>
                            {
-                                e.currentTarget.classList.toggle('opacity-0', false);
+                                e.currentTarget.dataset.loaded = "true";
                                e.currentTarget.classList.toggle('scale-110', false);
                            }}
                        />
@ -140,9 +140,9 @@ export function RouteComponent ()

                <div className="px-6 py-3">
                    <div className="flex items-center gap-3 mb-4">
-                        <div className="w-2 h-5 rounded-full bg-accent shadow-sm shadow-error/40" />
-                        <Gamepad2 className="text-accent" />
-                        <h2 className="font-bold uppercase tracking-widest text-accent grow">
+                        <div className="w-2 h-5 rounded-full bg-accent shadow-sm shadow-sm" />
+                        <Gamepad2 className="text-accent text-shadow-sm" />
+                        <h2 className="font-bold uppercase tracking-widest text-accent grow text-shadow-sm">
                            Featured Games
                        </h2>
                        <div className="flex gap-2 bg-accent text-accent-content rounded-full py-1 px-4 font-semibold opacity-80"><Star />Creator Picks</div>
--- a/src/mainview/routes/store/tab/route.tsx
+++ b/src/mainview/routes/store/tab/route.tsx
@ -4,9 +4,8 @@ import { HeaderUI } from '@/mainview/components/Header';
 import Shortcuts from '@/mainview/components/Shortcuts';
 import { StoreContext } from '@/mainview/scripts/contexts';
 import { GamePadButtonCode, useShortcutContext, useShortcuts } from '@/mainview/scripts/shortcuts';
-import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
 import { mobileCheck, useStickyDataAttr } from '@/mainview/scripts/utils';
-import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
+import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
 import { useMatchRoute } from '@tanstack/react-router';
 import { createFileRoute, Outlet } from '@tanstack/react-router';
 import { zodValidator } from '@tanstack/zod-adapter';
@ -111,11 +110,6 @@ function RouteComponent ()

  };

-  const goToSettings = () =>
-  {
-    Router.navigate({ to: '/settings' });
-  };
-
  const isMobile = mobileCheck();
  useStickyDataAttr(headerRef, sentinelRef, ref);

@ -125,7 +119,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 buttons={[{ icon: <Settings />, id: "settings", action: goToSettings, external: true }]} />
+            <HeaderUI />
          </div>
          <TopArea filters={filters} />
          <StoreOutlet />
@ -135,6 +129,7 @@ function RouteComponent ()
          {!isMobile && <>
            <div className='bg-gradient'></div>
            <div className='bg-noise'></div>
+            <div className='bg-dots'></div>
          </>}
        </div>
      </FocusContext.Provider>
--- a/src/mainview/scripts/clientApi.ts
+++ b/src/mainview/scripts/clientApi.ts
@ -1,5 +1,5 @@
 import { Treaty, treaty } from "@elysiajs/eden";
-import { JobsAPIType, RommAPIType, SettingsAPIType, StoreAPIType, SystemAPIType } from "../../bun/api/rpc";
+import { JobsAPIType, PluginsAPIType, RommAPIType, SettingsAPIType, StoreAPIType, SystemAPIType } from "../../bun/api/rpc";
 import { RPC_URL } from "../../shared/constants";

 const options: Treaty.Config = {
@ -13,4 +13,5 @@ export const rommApi = treaty<RommAPIType>(RPC_URL(__HOST__), options);
 export const settingsApi = treaty<SettingsAPIType>(RPC_URL(__HOST__), options);
 export const systemApi = treaty<SystemAPIType>(RPC_URL(__HOST__), options);
 export const storeApi = treaty<StoreAPIType>(RPC_URL(__HOST__), options);
-export const jobsApi = treaty<JobsAPIType>(RPC_URL(__HOST__), options);
+export const jobsApi = treaty<JobsAPIType>(RPC_URL(__HOST__), options);
+export const pluginsApi = treaty<PluginsAPIType>(RPC_URL(__HOST__), options);
--- a/src/mainview/scripts/contexts.ts
+++ b/src/mainview/scripts/contexts.ts
@ -1,4 +1,3 @@
-import { Drive } from "@/shared/constants";
 import { FocusDetails } from "@noriginmedia/norigin-spatial-navigation";
 import { createContext } from "react";

--- a/src/mainview/scripts/queries/plugins.ts
+++ b/src/mainview/scripts/queries/plugins.ts
@ -0,0 +1,21 @@
+import { mutationOptions, queryOptions } from "@tanstack/react-query";
+import { pluginsApi } from "../clientApi";
+
+export const getAllPluginsQuery = queryOptions({
+    queryKey: ['plugins', 'all'], queryFn: async () =>
+    {
+        const { data, error } = await pluginsApi.plugins.get();
+        if (error) throw error;
+        return data;
+
+    }
+});
+
+export const enablePluginMutation = mutationOptions({
+    mutationKey: ['plugin', 'enable'],
+    mutationFn: async (vars: { id: string, enabled: boolean; }) =>
+    {
+        const { error } = await pluginsApi.plugins({ id: vars.id }).post({ enabled: vars.enabled });
+        if (error) throw error;
+    }
+});
--- a/src/mainview/scripts/queries/romm.ts
+++ b/src/mainview/scripts/queries/romm.ts
@ -1,4 +1,4 @@
-import { DefaultRommStaleTime, FrontEndId, GameListFilterType, RommLoginDataSchema, RPC_URL } from "@/shared/constants";
+import { DefaultRommStaleTime, GameListFilterType, RommLoginDataSchema } from "@/shared/constants";
 import { rommApi, settingsApi } from "../clientApi";
 import { mutationOptions, queryOptions } from "@tanstack/react-query";
 import z from "zod";
@ -45,7 +45,7 @@ export const rommLoginMutation = mutationOptions({
 });
 export const rommUserQuery = () => queryOptions({
    ...getCurrentUserApiUsersMeGetOptions(),
-    queryKey: ['romm', 'auth', "login"],
+    queryKey: ['romm', 'auth', "login"] as any,
    refetchOnWindowFocus: false,
    retry: 0
 });
--- a/src/mainview/scripts/queries/settings.ts
+++ b/src/mainview/scripts/queries/settings.ts
@ -74,8 +74,7 @@ export const customEmulatorAddMutation = mutationOptions({
        const { data, error } = await settingsApi.api.settings.emulators.custom({ id }).put({ value: '' });
        if (error) throw error;
        return data;
-    },
-    onSuccess: (d, v, r, ctx) => ctx.client.invalidateQueries({ queryKey: ['custom-emulators'] })
+    }
 });
 export const customEmulatorDeleteMutation = (id: string) => mutationOptions({
    mutationKey: ["emulator", id, 'delete'],
--- a/src/mainview/scripts/queries/store.ts
+++ b/src/mainview/scripts/queries/store.ts
@ -1,6 +1,5 @@
 import { infiniteQueryOptions, mutationOptions, queryOptions } from "@tanstack/react-query";
 import { rommApi, storeApi } from "../clientApi";
-import { FrontEndGameType } from "@/shared/constants";


 export const storeEmulatorsQuery = queryOptions({
@ -71,4 +70,19 @@ export const installEmulatorMutation = (id: string) => mutationOptions({
        if (error) throw error;
        return data;
    }
+});
+export const downloadBiosMutation = (id: string) => mutationOptions({
+    mutationKey: ["download", 'bios', id],
+    mutationFn: async () =>
+    {
+        const { error } = await storeApi.api.store.download.bios({ id }).post();
+        if (error) throw error;
+    }
+});
+export const deleteBiosMutation = mutationOptions({
+    mutationKey: ["delete", "bios"], mutationFn: async (id: string) =>
+    {
+        const { error } = await storeApi.api.store.bios({ id }).delete();
+        if (error) throw error;
+    }
 });
--- a/src/mainview/scripts/types.ts
+++ b/src/mainview/scripts/types.ts
@ -1,11 +1,11 @@
-import { FrontEndId } from "@/shared/constants";
-
 export const FOCUS_KEYS = {
    NAV_CATEGORIES: "NAV_CATEGORIES",
    NAV_CATEGORY: (cat: string) => `NAV_CAT_${cat}`,
    MISSING_SECTION: "MISSING_SECTION",
    MISSING_CARD: (id: string) => `MISSING_${id}`,
    EMULATOR_SECTION: (id: string) => `EMULATOR_SECTION_${id}`,
+    EMULATOR_CUSTOM_PATH: (id: string) => `EMULATOR_CUSTOM_PATH_${id}`,
+    CONTEXT_DIALOG_OPTION: (contextId: string, id: string) => `${contextId}_LIST_OPTION${id}`,
    EMULATOR_CARD: (id: string) => `EMULATOR_${id}`,
    GAME_SECTION: "GAME_SECTION",
    GAME_CARD: (id: FrontEndId) => `GAME_${id.source}_${id.id}`,
--- a/src/mainview/scripts/utils.ts
+++ b/src/mainview/scripts/utils.ts
@ -1,11 +1,13 @@
 import { LocalSettingsSchema, LocalSettingsType } from "@/shared/constants";
-import { doesFocusableExist, FocusableComponentLayout, FocusDetails, getCurrentFocusKey } from "@noriginmedia/norigin-spatial-navigation";
+import { doesFocusableExist, getCurrentFocusKey } from "@noriginmedia/norigin-spatial-navigation";
 import { RefObject, useEffect, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { jobsApi } from "./clientApi";
 import { JobsAPIType } from "@/bun/api/rpc";
 import { Router } from "..";
-import data from "@emulators";
+import Elysia from "elysia";
+import { Prettify } from "elysia/types";
+import z from "zod";

 export function selfFocusSmart (shouldFocus: boolean, focusSelf: () => void)
 {
@ -70,10 +72,10 @@ export function mobileCheck ()
  return check;
 };

-export function useLocalSetting (key: keyof LocalSettingsType)
+export function useLocalSetting<TKey extends keyof LocalSettingsType> (key: TKey)
 {
  const [localValue] = useLocalStorage(key, LocalSettingsSchema.shape[key].parse(undefined), { deserializer: (value) => LocalSettingsSchema.shape[key].parse(JSON.parse(value)) });
-  return localValue;
+  return localValue as LocalSettingsType[TKey];
 }

 export function useAsyncGenerator<T> (
@ -268,8 +270,10 @@ type JobResponse<JOB extends keyof JobsAPIType['~Routes']['api']['jobs']> =
 export function useJobStatus<const JOB extends keyof JobsAPIType['~Routes']['api']['jobs']> (
  id: JOB,
  init?: {
-    onProgress?: (process: number, data: ExtractField<JobResponse<JOB>, "data" | "started" | "progress", 'data'>) => void,
+    query?: Record<string, any>,
+    onProgress?: (process: number, data: ExtractField<JobResponse<JOB>, "data" | "started" | "progress" | "completed" | "ended", 'data'>) => void,
    onEnded?: (data: ExtractField<JobResponse<JOB>, "completed" | "ended", 'data'>) => void;
+    onCompleted?: (data: ExtractField<JobResponse<JOB>, "completed" | "ended", 'data'>) => void;
    onError?: (error: string) => void;
  }
 )
@ -279,12 +283,12 @@ export function useJobStatus<const JOB extends keyof JobsAPIType['~Routes']['api

  const ref = useRef<ReturnType<typeof jobsApi.api.jobs[JOB]['subscribe']>>(null);
  const [data, setData] = useState<DataPayload>();
-  const [status, setStatus] = useState<string>();
+  const [state, setState] = useState<string>();
  const [error, setError] = useState<string>();

  useEffect(() =>
  {
-    const sub = jobsApi.api.jobs[id].subscribe();
+    const sub = jobsApi.api.jobs[id].subscribe({ query: init?.query });
    ref.current = sub as any;

    sub.subscribe(({ data }) =>
@ -293,23 +297,24 @@ export function useJobStatus<const JOB extends keyof JobsAPIType['~Routes']['api
      {
        case 'error':
          setError(data.error);
-          setStatus(status);
+          setState(undefined);
          setData(undefined);
          init?.onError?.(data.error);
          break;
        case 'ended':
-          setStatus(status);
+          setState(undefined);
          setData(undefined);
          init?.onEnded?.(data.data as any);
          break;
        case 'completed':
-          setStatus(status);
+          setState(undefined);
          setData(undefined);
+          init?.onCompleted?.(data.data as any);
          break;
        default:
          setData(data.data as DataPayload);
-          setStatus(status);
-          init?.onProgress?.(data.progress, data.data);
+          setState(data.state);
+          init?.onProgress?.(data.progress, data.data as any);
      }
    });

@ -318,9 +323,9 @@ export function useJobStatus<const JOB extends keyof JobsAPIType['~Routes']['api
      sub.close();
      ref.current = null;
    };
-  }, []);
+  }, [id, init?.query, init?.onEnded, init?.onCompleted, init?.onProgress, init?.onError]);

-  return { data, status, error, wsRef: ref };
+  return { data, state, error, wsRef: ref };
 }

 export function HandleGoBack ()
--- a/src/mainview/types.d.ts
+++ b/src/mainview/types.d.ts
@ -6,9 +6,9 @@ declare module "@emulators" {
  export default data;
 }

-global
+declare global
 {
-  declare module "react" {
+  module "react" {
    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T>
    {
      // extends React's HTMLAttributes
@ -18,17 +18,17 @@ global
  }
 }

-interface FocusParams
+declare interface FocusParams
 {
  onFocus?: (focusKey: string, node: HTMLElement, details: Record<string, any>) => void;
 }

-interface InteractParams
+declare interface InteractParams
 {
  onAction?: (e?: Event) => void;
 }

-interface FilterOption extends FocusParams, InteractParams
+declare interface FilterOption extends FocusParams, InteractParams
 {
  label: string;
  selected: boolean;