fix: Fixed issues on windows

feat: Implemented mouse and gamepad automatic switching
fix: Made touch screen work better on the steam deck

src/bun/api/drives.ts

@@ -32,7 +32,7 @@ export async function getDevices (): Promise<Drive[]>
 {
     const blockDevicesRaw = await si.blockDevices();
     const layout = await si.diskLayout();
-    const blockDevices = blockDevicesRaw.filter(l => l.device && l.type === 'part' && l.mount);
+    const blockDevices = blockDevicesRaw.filter(l => l.device && (l.type === 'part' || l.type === 'disk') && l.mount);
     const fsSizes = await si.fsSize();
     const sizes = new Map(fsSizes.map(s => [s.mount, s]));
     const layoutMap = new Map(layout.map(l => [l.device, l]));
@@ -65,6 +65,8 @@ export async function getDevicesCurated (): Promise<Drive[]>
     const devices = await getDevices();
     drives.push(...devices.filter(d => d.hasWriteAccess));
 
+    if (process.platform !== 'win32')
+    {
         const homeDir = os.homedir();
         const homeDirDevice = devices.filter(d => d.mountPoint).reverse()
             .find(d => homeDir.startsWith(d.mountPoint!));
@@ -86,6 +88,7 @@ export async function getDevicesCurated (): Promise<Drive[]>
                 hasWriteAccess
             });
         }
+    }
 
     return drives;
 }

src/bun/api/system.ts

@@ -12,7 +12,6 @@ import { getDevices, getDevicesCurated } from "./drives";
 import getFolderSize from "get-folder-size";
 import si from 'systeminformation';
 
-// steam://open/keyboard?XPosition=%i&YPosition=%i&Width=%i&Height=%i&Mode=%d
 export const system = new Elysia({ prefix: '/api/system' })
     .post('/show_keyboard', async ({ body: { XPosition, YPosition, Width, Height } }) =>
     {
@@ -67,12 +66,23 @@ export const system = new Elysia({ prefix: '/api/system' })
     .get('/drives', async () =>
     {
         const drives = await getDevices();
+        if (process.platform === 'win32')
+            return drives.map(d =>
+            {
+                d.mountPoint += '/';
+                return d;
+            });
         return drives;
     })
+    // Drives that are vaiable for downloads
     .get('/drives/download', async () =>
     {
         const drives = await getDevicesCurated();
-        const downloadsPath = config.get('downloadPath');
+        let downloadsPath = config.get('downloadPath');
+        if (!path.isAbsolute(downloadsPath))
+        {
+            downloadsPath = path.resolve(process.cwd(), downloadsPath);
+        }
         const currentDownloadsSize = await getFolderSize(downloadsPath);
         let used = false;
         const drivesDownload: DownloadsDrive[] = drives
@@ -115,6 +125,7 @@ export const system = new Elysia({ prefix: '/api/system' })
             drives: drivesDownload,
         };
     })
+    // Create Folder
     .put('/dirs', async ({ body: { dirname, name } }) =>
     {
         await fs.mkdir(path.join(dirname, name));
@@ -123,7 +134,11 @@ export const system = new Elysia({ prefix: '/api/system' })
     })
     .get('/dirs', async ({ query: { path: startingPath } }) =>
     {
-        const currentPath = startingPath ?? dirname(Bun.main);
+        let currentPath = startingPath ?? dirname(process.cwd());
+        if (!path.isAbsolute(currentPath))
+        {
+            currentPath = path.resolve(process.cwd(), currentPath);
+        }
         const paths = await fs.readdir(currentPath, { withFileTypes: true });
         return {
             name: path.basename(currentPath),

src/mainview/components/AnimatedBackground.tsx

@@ -48,7 +48,7 @@ export function AnimatedBackground (data: {
     let backgroundElements: JSX.Element | undefined = undefined;
     if (true)
     {
-        backgroundElements = <div id="container">
+        backgroundElements = <div id="container" className='md:visible sm:invisible'>
             <div id="container-inside">
                 <div className={bgColor} id="circle-small"></div>
                 <div className={bgColor} id="circle-medium"></div>
@@ -66,7 +66,7 @@ export function AnimatedBackground (data: {
             >
                 {!!lastBackgroundUrl && <div className='absolute w-full h-full' style={{ background: backgroundStyle(lastBackgroundUrl), zIndex: -4 }}></div>}
                 {!!backgroundUrl && <div key={backgroundUrl} className='absolute w-full h-full animate__animated animate__fadeIn' style={{ background: backgroundStyle(backgroundUrl), zIndex: -3 }}></div>}
-                {blurBackground && <div className={"absolute w-full h-full backdrop-blur-3xl"} style={{ zIndex: -2 }}></div>}
+                {blurBackground && <div className={"absolute w-full h-full backdrop-blur-3xl md:visible sm:invisible"} style={{ zIndex: -2 }}></div>}
                 {data.animated && animateBackground && <div className="absolute overflow-hidden w-full h-full" style={{ zIndex: -1 }}>
                     {backgroundElements}
                 </div>}

src/mainview/components/CardList.tsx

@@ -1,10 +1,11 @@
 import
 {
   FocusContext,
+  FocusDetails,
   useFocusable,
 } from "@noriginmedia/norigin-spatial-navigation";
 import { GameMeta } from "../../shared/constants";
-import GameCard, { GameCardParams } from "./GameCard";
+import GameCard, { GameCardFocusHandler, GameCardParams } from "./GameCard";
 import { JSX } from "react";
 import { twMerge } from "tailwind-merge";
 import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
@@ -22,7 +23,7 @@ export function CardList (data: {
   games: GameMetaExtra[];
   grid?: boolean;
   onSelectGame?: (id: string) => void;
-  onGameFocus?: (id: string, node: HTMLElement) => void;
+  onGameFocus?: GameCardFocusHandler;
   className?: string;
 })
 {
@@ -54,10 +55,10 @@ export function CardList (data: {
         data-index={i}
         title={g.title}
         subtitle={g.subtitle ?? ""}
-        onFocus={(id, node) =>
+        onFocus={(id, node, details) =>
         {
-          g.onFocus?.();
+          g.onFocus?.(details);
-          data.onGameFocus?.(id, node);
+          data.onGameFocus?.(id, node, details);
         }}
         onAction={handleAction}
         preview={preview}
@@ -74,7 +75,7 @@ export function CardList (data: {
       ref={ref}
       save-child-focus="session"
       className={twMerge("my-6 items-center justify-center-safe h-(--game-card-height) ",
-        data.grid ? "card-grid h-fit gap-5" : 'card-list gap-6',
+        data.grid ? "card-grid h-fit gap-5" : 'card-list md:gap-6 sm:gap-2',
         data.className
       )}
       onKeyDown={(e) =>

src/mainview/components/CollectionList.tsx

@@ -4,12 +4,13 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { CardList, GameMetaExtra } from "./CardList";
 import { SaveSource } from "../scripts/spatialNavigation";
+import { GameCardFocusHandler } from "./GameCard";
 
 export default function CollectionList (data: {
     id: string,
     setBackground: (url: string) => void;
     className?: string;
-    onFocus?: (node: HTMLElement) => void;
+    onFocus?: GameCardFocusHandler;
 })
 {
     const navigate = useNavigate();
@@ -42,12 +43,12 @@ export default function CollectionList (data: {
                 SaveSource('game-list');
                 navigate({ to: `/collection/${id}`, viewTransition: { types: ['zoom-in'] } });
             }}
-            onGameFocus={(id, node) =>
+            onGameFocus={(id, node, details) =>
             {
                 data.setBackground(
                     `https://picsum.photos/id/${10 + (id ?? 0)}/1920/1080.webp`,
                 );
-                data.onFocus?.(node);
+                data.onFocus?.(id, node, details);
             }}
         />
     );

src/mainview/components/CollectionsDetail.tsx

@@ -10,6 +10,7 @@ import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/
 import { Router } from '..';
 import { PopSource } from '../scripts/spatialNavigation';
 import { GameListFilterType } from '@/shared/constants';
+import { GameCardFocusHandler } from './GameCard';
 
 export interface CollectionsDetailParams
 {
@@ -42,6 +43,14 @@ export function CollectionsDetail (data: CollectionsDetailParams)
     useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
     const { shortcuts } = useShortcutContext();
 
+    const handleScroll: GameCardFocusHandler = (id, node, details) =>
+    {
+        if (!(details.nativeEvent instanceof MouseEvent))
+        {
+            node.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        }
+    };
+
     return (
         <FocusContext value={focusKey}>
             <AnimatedBackground animated ref={ref} backgroundKey="home-background" className='flex'>
@@ -56,7 +65,7 @@ export function CollectionsDetail (data: CollectionsDetailParams)
                                 grid
                                 setBackground={data.setBackground}
                                 filters={data.filters}
-                                onFocus={(node) => node.scrollIntoView({ block: 'center', behavior: 'smooth' })}
+                                onFocus={handleScroll}
                                 id={`${focusKey}-list`}>
 
                             </GameList>

src/mainview/components/ContextDialog.tsx

@@ -30,7 +30,7 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
     const handleAction = data.action ? () => data.action?.({ close: context.close, focus: focusSelf }) : undefined;
     const { ref, focused, focusSelf, focusKey, hasFocusedChild } = useFocusable({
         focusKey: `${context.id}-list-option-${data.id}`,
-        onEnterPress: handleAction,
+        onEnterPress: data.shortcuts ? handleAction : undefined,
         onFocus: handleFocus,
         trackChildren: typeof data.content !== 'string'
     });

src/mainview/components/FilePicker.tsx

@@ -36,7 +36,7 @@ function List (data: {
     const { setCurrentPath, startingPath, allowNewFolderCreation, currentPath, isDirectoryPicker } = useContext(FilePickerContext);
     const { ref, focusKey } = useFocusable({ focusKey: data.id, preferredChildFocusKey: `${data.id}...` });
     const handleReturn = () => setCurrentPath(data.parentPath);
-    useShortcuts(focusKey, () => [{ label: "Directoy Up", button: GamePadButtonCode.L1, action: handleReturn }], [handleReturn]);
+    useShortcuts(focusKey, () => [{ label: "Directory Up", button: GamePadButtonCode.L1, action: handleReturn }], [handleReturn]);
     return <div ref={ref}>
         <FocusContext value={focusKey}>
             <ContextList showCloseButton={false}
@@ -62,21 +62,25 @@ function List (data: {
                             icon = <></>;
                         }
                         const shortcuts: Shortcut[] = [];
+                        let action: () => void;
                         if (f.isDirectory)
                         {
                             shortcuts.push({ label: "Enter", button: GamePadButtonCode.A, action: () => setCurrentPath(fullPath) });
+                            action = () => setCurrentPath(fullPath);
                             if (isDirectoryPicker)
                                 shortcuts.push({ label: "Select", button: GamePadButtonCode.X, action: () => data.select(fullPath) });
                         } else
                         {
                             shortcuts.push({ label: "Select", button: GamePadButtonCode.A, action: () => data.select(fullPath) });
+                            action = () => data.select(fullPath);
                         }
                         const entry: DialogEntry = {
                             content: f.name,
                             id: `${data.id}-${f.name}`,
                             type: 'primary',
                             icon,
-                            shortcuts
+                            shortcuts,
+                            action
                         };
                         return entry;
                     }), ...(allowNewFolderCreation && currentPath ? [{
@@ -157,7 +161,7 @@ function DriveElement (data: { id: string, isActive: boolean, label: string; onS
 {
     const { ref, focused } = useFocusable({ focusKey: data.id, onEnterPress: data.onSelect });
     return <li ref={ref} onClick={data.onSelect} className={twMerge(
-        "flex bg-base-200 text-base-content rounded-full gap-2 items-center p-2 overflow-hidden max-w-xs",
+        "flex bg-base-200 text-base-content rounded-full gap-2 items-center p-2 px-4 overflow-hidden max-w-xs cursor-pointer text-nowrap hover:bg-primary/40",
         classNames({
             "bg-primary text-primary-content": data.isActive,
             "ring-7 ring-base-content": focused
@@ -238,8 +242,8 @@ export default function FilePicker (data: {
 {
     const [currentPath, setCurrentPath] = useState<string | undefined>(data.startingPath);
 
-    const { data: files, refetch: refetchFiles } = useQuery(filesQuery(currentPath, data.id));
+    const { data: files, refetch: refetchFiles, isLoading: filesLoading } = useQuery(filesQuery(currentPath, data.id));
-    const { data: drives } = useQuery(drivesQuery);
+    const { data: drives, isLoading: drivesLoading } = useQuery(drivesQuery);
 
     const fullPath = files ? path.join(files.parentPath, files.name) : '';
     const activeDrive = drives?.filter(d => !!d.mountPoint).sort((a, b) => b.mountPoint!.length - a.mountPoint!.length).filter(d => fullPath.startsWith(d.mountPoint!))[0];
@@ -268,6 +272,7 @@ export default function FilePicker (data: {
                             }>{p}</a>
                         </li>)}
                     </ul>
+                    {(filesLoading || drivesLoading) && <span className="loading loading-spinner loading-lg"></span>}
                 </div>}
 
             <ListWithDrives

src/mainview/components/Filters.tsx

@@ -7,6 +7,7 @@ import SvgIcon from "./SvgIcon";
 import classNames from "classnames";
 import { useSearch } from "@tanstack/react-router";
 import { useEffect } from "react";
+import useActiveControl from "../scripts/gamepads";
 
 function FilterCat (
   data: {
@@ -33,16 +34,19 @@ function FilterCat (
     }
   }, [filter]);
 
+  const { isMouse } = useActiveControl();
+
   return (
     <li
       ref={ref}
       onClick={focusSelf}
       className={classNames(
-        "flex px-4 h-12 items-center justify-center rounded-full transition-all",
+        "flex md:px-4 items-center justify-center rounded-full transition-all md:text-lg",
+        "sm:text-xs sm:px-2",
         {
           "bg-base-content px-3 text-base-300 drop-shadow cursor-default":
             focused || data.active,
-          "ring-primary ring-7": focused,
+          "ring-primary ring-7": focused && !isMouse,
           "hover:bg-base-content/40 cursor-pointer": !focused,
         },
       )}
@@ -70,13 +74,13 @@ export function FilterUI (data: {
   return (
     <div
       ref={ref}
-      className="flex items-center justify-center gap-2"
+      className="flex items-center sm:justify-start md:justify-center sm:ml-[15%] md:ml-0 gap-2"
       save-child-focus="session"
     >
       <FocusContext.Provider value={focusKey}>
-        <ul className="flex flex-row bg-base-100 rounded-full p-1 drop-shadow-sm">
+        <ul className="flex flex-row bg-base-100 rounded-full p-1 drop-shadow-sm md:h-14 sm:h-8">
-          <li className=" flex px-4 h-12 items-center justify-center rounded-full">
+          <li className=" flex px-4 items-center justify-center rounded-full">
-            <SvgIcon className="size-8" icon="steamdeck_button_l1_outline" />
+            <SvgIcon className="sm:size-4 md:size-8" icon="steamdeck_button_l1_outline" />
           </li>
           {Object.entries(data.options)?.map(([id, option]) => (
             <FilterCat
@@ -88,8 +92,8 @@ export function FilterUI (data: {
               {...option}
             />
           ))}
-          <li className=" flex px-4 h-12 items-center justify-center rounded-full">
+          <li className="flex px-4 items-center justify-center rounded-full">
-            <SvgIcon className="size-8" icon="steamdeck_button_r1_outline" />
+            <SvgIcon className="sm:size-4 md:size-8" icon="steamdeck_button_r1_outline" />
           </li>
         </ul>
       </FocusContext.Provider>

src/mainview/components/GameCard.tsx

@@ -1,7 +1,8 @@
-import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
+import { FocusDetails, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import classNames from "classnames";
-import { JSX, useEffect } from "react";
+import { JSX } from "react";
 import { twMerge } from "tailwind-merge";
+import useActiveControl from "../scripts/gamepads";
 
 export function GameCardSkeleton ()
 {
@@ -16,6 +17,8 @@ export function GameCardSkeleton ()
   );
 }
 
+export type GameCardFocusHandler = (id: string, node: HTMLElement, details: FocusDetails) => void;
+
 export interface GameCardParams
 {
   title: string;
@@ -27,7 +30,7 @@ export interface GameCardParams
   id: string;
   badges?: JSX.Element[];
   className?: string;
-  onFocus?: (id: string, node: HTMLElement) => void;
+  onFocus?: GameCardFocusHandler;
   onBlur?: (id: string) => void;
   onAction?: () => void;
   clickFocuses?: boolean;
@@ -37,10 +40,11 @@ export default function GameCard (data: GameCardParams)
 {
   const { ref, focused, focusSelf } = useFocusable({
     focusKey: data.focusKey,
-    onFocus: () => data.onFocus?.(data.id, ref.current as any),
+    onFocus: (l, p, detals) => data.onFocus?.(data.id, ref.current as any, detals),
     onEnterPress: () => data.onAction?.(),
     onBlur: () => data.onBlur?.(data.id)
   });
+  const { isPointer } = useActiveControl();
 
   return (
     <li
@@ -60,21 +64,24 @@ export default function GameCard (data: GameCardParams)
         data.onAction?.();
       }}
       className={twMerge(
-        `game-card game-card-height flex flex-col justify-end z-5`,
+        `game-card bg-base-300 game-card-height flex flex-col justify-end z-5 ring-primary`,
         'max-h-(--game-card-height) min-w-(--game-card-width) w-(--game-card-width)',
         "overflow-hidden transition-all duration-200 drop-shadow-lg cursor-pointer",
-        focused ?
-          `focused animate-wiggle ring-7 bg-base-content text-base-300 ring-primary drop-shadow-xl drop-shadow-black/30 scale-102 z-10` :
-          "bg-base-300 hover:bg-base-100 hover:scale-102 text-base-content",
         classNames({
+          "focused animate-wiggle ring-7 bg-base-content text-base-300 drop-shadow-xl drop-shadow-black/30 scale-102 z-10": focused && !isPointer,
+          "group hover:focused hover:animate-wiggle hover:ring-7 hover:bg-base-content hover:text-base-300 hover:drop-shadow-xl hover:drop-shadow-black/30 hover:scale-102 hover:z-10": isPointer,
           "h-(--game-card-height)": typeof data.preview === "string"
         }),
         data.className
       )}
     >
-      <div className={twMerge("overflow-hidden bg-base-400 h-full rounded-t-xl rounded-b-md transition-all", focused ? "mt-2 mx-2" : "mt-2 mx-2")}>
+      <div className={twMerge(
+        "overflow-hidden bg-base-400 h-full rounded-t-xl rounded-b-md transition-all",
+        focused ? "md:mt-2 md:mx-2" : "md:mt-2 md:mx-2",
+        focused ? "sm:mt-1 sm:mx-1" : "sm:mt-1 sm:mx-1",
+      )}>
         {typeof data.preview === "string" ? (
-          <img className={classNames({ "animate-rotate-small": focused })} src={data.preview} ></img>
+          <img className={classNames({ "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img>
         ) : (
           typeof data.preview === 'function' ? data.preview({ focused }) : data.preview
         )}</div>
@@ -83,18 +90,21 @@ export default function GameCard (data: GameCardParams)
         {data.badges?.map((b, i) =>
           <div key={i}
             className={
-              twMerge("bg-base-100 text-base-content drop-shadow-lg overflow-hidden rounded-full p-1 last:mr-4 transition-colors",
+              twMerge("bg-base-100 text-base-content drop-shadow-lg overflow-hidden rounded-full p-1 md:last:mr-4 transition-colors",
-                classNames({ "bg-primary text-primary-content": focused }))}
+                classNames({
+                  "bg-primary text-primary-content": focused && !isPointer,
+                  "group-hover:bg-primary group-hover:text-primary-content": isPointer
+                }))}
           >
             {b}
           </div>)
         }
       </div>
-      <div className="flex flex-col p-4">
+      <div className="flex flex-col md:p-4 sm:p-2">
-        <div className="text-xl font-bold text-nowrap text-ellipsis overflow-hidden">
+        <div className="md:text-xl sm:text-sm font-bold text-nowrap text-ellipsis overflow-hidden">
           {data.title}
         </div>
-        <div className="text-s">{data.subtitle}</div>
+        <div className="sm:text-xs md:text-sm text-nowrap">{data.subtitle}</div>
       </div>
     </li >
   );

src/mainview/components/GameList.tsx

@@ -6,6 +6,7 @@ import { SaveSource } from "../scripts/spatialNavigation";
 import { rommApi } from "../scripts/clientApi";
 import { HardDrive } from "lucide-react";
 import { JSX } from "react";
+import { GameCardFocusHandler } from "./GameCard";
 
 export interface GameListParams
 {
@@ -14,7 +15,7 @@ export interface GameListParams
     grid?: boolean,
     setBackground?: (url: string) => void;
     onGameSelect?: (id: FrontEndId) => void;
-    onFocus?: (node: HTMLElement) => void;
+    onFocus?: GameCardFocusHandler;
     className?: string;
 }
 
@@ -52,7 +53,7 @@ export function GameList (data: GameListParams)
                 type="game"
                 grid={data.grid}
                 className={data.className}
-                onGameFocus={(id, node) => data.onFocus?.(node)}
+                onGameFocus={data.onFocus}
                 games={games.data?.games
                     .map(
                         (g) =>
@@ -69,7 +70,7 @@ export function GameList (data: GameListParams)
                                 title: g.name ?? "",
                                 subtitle: (
                                     <div className="flex gap-1 items-center">
-                                        {!!g.path_platform_cover && <img className="size-4" src={`${RPC_URL(__HOST__)}${g.path_platform_cover}`} />}
+                                        {!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={`${RPC_URL(__HOST__)}${g.path_platform_cover}`} />}
                                         <p className="opacity-80">{g.platform_display_name}</p>
                                     </div>
                                 ),

src/mainview/components/Header.tsx

@@ -14,10 +14,6 @@ import
   Bell,
   Bluetooth,
   Clock,
-  Lock,
-  Power,
-  ShieldAlert,
-  Sun,
   User,
   Wifi,
   WifiHigh,
@@ -29,9 +25,10 @@ import { useQuery } from "@tanstack/react-query";
 import { getCurrentUserApiUsersMeGetOptions, statsApiStatsGetOptions } from "../../clients/romm/@tanstack/react-query.gen";
 import { RPC_URL } from "../../shared/constants";
 import { JSX, useEffect, useRef } from "react";
-import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { SaveSource } from "../scripts/spatialNavigation";
 import { systemApi } from "../scripts/clientApi";
+import { twMerge } from "tailwind-merge";
 
 function HeaderAvatar (data: {
   id: string;
@@ -116,7 +113,7 @@ function NotificationStatus ()
 {
   const hasUnread = false;
   return <div className={classNames("p-2 rounded-full", { "bg-warning text-warning-content": hasUnread })}>
-    <Bell className="w-6 h-6" />
+    <Bell className="md:size-6 sm:size-4" />
   </div>;
 }
 
@@ -170,13 +167,13 @@ function BluetoothStatus ()
 
 function WiFiStatus ()
 {
-  const { data: wifi } = useQuery({
+  const { data: wifi, isLoading } = useQuery({
     queryKey: ['wifi'],
     queryFn: () => systemApi.api.system.info.wifi.get().then(d => d.data),
     refetchInterval: 3000
   });
 
-  return <div>
+  return (!!wifi && wifi.length > 0) || isLoading ? <div>
     {wifi?.map(w =>
     {
       const className = "w-6 h-6";
@@ -195,7 +192,7 @@ function WiFiStatus ()
       </div>;
     })}
 
-  </div>;
+  </div> : undefined;
 }
 
 function BatteryStatus ()
@@ -224,7 +221,7 @@ function BatteryStatus ()
       batteryIcon = <BatteryMedium className={batteryClassName} />;
     }
   }
-  return <div className="flex gap-2 items-center">
+  return !!battery && battery.hasBattery && <div className="flex gap-2 items-center">
     {batteryIcon}
     <span className="font-semibold">{battery?.percent} %</span>
   </div>;
@@ -271,7 +268,9 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
     <FocusContext.Provider value={focusKey}>
       <header
         ref={ref}
-        className="h-14 mt-2 flex items-center justify-between text-white"
+        className={twMerge("md:relative md:h-14 md:mt-2 flex items-center justify-between text-white",
+          "sm:absolute sm:top-0 sm:right-0 sm:left-0"
+        )}
       >
         <div className="flex items-center gap-2 drop-shadow-sm">
           {accounts?.map(a => <HeaderAvatar
@@ -285,8 +284,8 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
           />)}
           {data.title}
         </div>
-        <div className="flex items-center gap-2 text drop-shadow-sm">
+        <div className="flex items-center md:gap-2 sm:gap-1 text drop-shadow-sm">
-          <div className="flex gap-5  items-center">
+          <div className="flex md:gap-5 sm:gap-2 items-center">
             <ClockStatus />
             <WiFiStatus />
             <BluetoothStatus />
@@ -297,7 +296,7 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
           <div className="flex gap-2">
             {data.buttonElements ?? data.buttons?.map(b => <RoundButton
               key={b.id}
-              className="header-icon size-16"
+              className="header-icon md:size-16 sm:size-10"
               id={b.id}
               icon={b.icon}
               external={b.external}

src/mainview/components/PlatformsList.tsx

@@ -7,8 +7,9 @@ import { rommApi } from "../scripts/clientApi";
 import { SaveSource } from "../scripts/spatialNavigation";
 import { JSX } from "react";
 import { HardDrive } from "lucide-react";
+import { GameCardFocusHandler } from "./GameCard";
 
-export function PlatformsList (data: { id: string, setBackground: (url: string) => void; className?: string; onFocus?: (node: HTMLElement) => void; })
+export function PlatformsList (data: { id: string, setBackground: (url: string) => void; className?: string; onFocus?: GameCardFocusHandler; })
 {
     const navigate = useNavigate();
     const { data: platforms } = useSuspenseQuery(
@@ -29,7 +30,7 @@ export function PlatformsList (data: { id: string, setBackground: (url: string)
             type="platform"
             id={data.id}
             className={data.className}
-            onGameFocus={(id, node) => data.onFocus?.(node)}
+            onGameFocus={data.onFocus}
             games={platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
                 .map((g) =>
                 {

src/mainview/components/ShortcutPrompt.tsx

@@ -1,11 +1,11 @@
-import React, { MouseEventHandler } from "react";
+import { MouseEventHandler } from "react";
 import SvgIcon, { IconType } from "./SvgIcon";
 import classNames from "classnames";
 import { twMerge } from "tailwind-merge";
 
 export default function ShortcutPrompt (data: {
   id: string;
-  icon: IconType;
+  icon?: IconType;
   label?: string;
   className?: string;
   onClick?: MouseEventHandler;
@@ -17,14 +17,15 @@ export default function ShortcutPrompt (data: {
       style={{ viewTransitionName: data.id }}
       className={twMerge(
         "flex md:gap-2 bg-base-100 text-base-content neutral-content md:pl-2 md:pr-3 md:py-1.5 rounded-full items-center md:text-lg drop-shadow-sm ring-[1px] ring-base-content/10 drop-shadow-black/30",
-        "sm:text-sm",
+        "sm:text-sm sm:p-1",
+        "xs:text-xs sm:p-1",
         data.className,
         classNames({
           "hover:bg-base-300 cursor-pointer": !!data.onClick,
         })
       )}
     >
-      <SvgIcon className="md:size-8 sm:size-6" icon={data.icon} />
+      {data.icon && <SvgIcon className="md:size-8 sm:size-6 xs:size-2" icon={data.icon} />}
       {data.label}
     </div>
   );

src/mainview/components/Shortcuts.tsx

@@ -1,4 +1,4 @@
-import { GamepadButtonEvent } from '../scripts/gamepads';
+import useActiveControl, { GamepadButtonEvent } from '../scripts/gamepads';
 import { GamePadButtonCode, Shortcut } from '../scripts/shortcuts';
 import ShortcutPrompt from './ShortcutPrompt';
 import { IconType } from './SvgIcon';
@@ -23,16 +23,38 @@ const iconMap: Record<GamePadButtonCode, IconType> = {
     [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 { control } = useActiveControl();
+    const showKeyboard = control === 'keyboard' || control === 'mouse';
     return (
         <div className="flex gap-2 z-1000">
             {data.shortcuts?.filter(s => !!s.label).map((s, i) => <ShortcutPrompt
                 key={s.button}
                 id={`shortcut-${s.button}`}
                 onClick={e => s.action?.(new GamepadButtonEvent('gamepadbuttondown', { button: s.button, isClick: true }))}
-                icon={iconMap[s.button]}
+                icon={showKeyboard ? undefined : iconMap[s.button]}
-                label={s.label} />
+                label={showKeyboard ? `${keyboardMap[s.button]} | ${s.label}` : s.label} />
             )}
         </div>
     );

src/mainview/components/options/Button.tsx

@@ -12,7 +12,7 @@ export function Button (data: {
     children?: any,
     className?: string,
     disabled?: boolean,
-    type: "reset" | "button" | "submit" | undefined;
+    type?: "reset" | "button" | "submit";
     shortcutLabel?: string;
     focusClassName?: string;
 } & InteractParams & FocusParams)

src/mainview/components/options/DownloadDirectoryOption.tsx

@@ -22,6 +22,7 @@ export default function DownloadDirectoryOption (data: PathSettingsOptionParams)
         type={data.type}
         save={setSettingMutation.mutate}
         allowNewFolderCreation={data.allowNewFolderCreation}
+        requireConfirmation={data.requireConfirmation}
         isDirectoryPicker={true}
         localValue={localValue}
         setLocalValue={(v) =>

src/mainview/index.css

@@ -3,8 +3,7 @@
 @plugin "daisyui";
 
 @theme {
-    --game-card-height: calc(var(--spacing) * 100);
+    --breakpoint-xs: 20rem;
-    --game-card-width: calc(var(--spacing) * 64);
 
     --animate-wiggle: wiggle 0.3s ease-in-out 1;
     --animate-rotate: rotate 0.3s ease-in-out 1 0.2s;
@@ -107,6 +106,24 @@
     }
 }
 
+@layer base {
+    @variant sm {
+        :root {
+            --game-card-height: calc(var(--spacing) * 55);
+            --game-card-width: calc(var(--spacing) * 35.2);
+        }
+    }
+}
+
+@layer base {
+    @variant md {
+        :root {
+            --game-card-height: calc(var(--spacing) * 100);
+            --game-card-width: calc(var(--spacing) * 64);
+        }
+    }
+}
+
 symbol path {
     fill: var(--color-base-content) !important;
 }
@@ -135,7 +152,7 @@ html {
     }
 
     .menu-icon svg {
-        @apply sm:size-7 md:size-9 transition-all;
+        @apply sm:size-6 md:size-9 transition-all;
     }
 
     .menu-icon.focus svg {
@@ -143,7 +160,8 @@ html {
     }
 
     .header-icon svg {
-        @apply w-8 h-8 min-w-8 min-h-8;
+        @apply md:w-8 md:h-8 md:min-w-8 md:min-h-8;
+        @apply sm:w-5 sm:h-5 sm:min-w-5 sm:min-h-5;
     }
 
     .header-icon-small svg {

src/mainview/routes/index.tsx

@@ -9,6 +9,7 @@ import
   Search,
   Power,
   OctagonAlert,
+  Maximize,
 } from "lucide-react";
 import
 {
@@ -19,6 +20,7 @@ import { useMutation } from "@tanstack/react-query";
 import
 {
   FocusContext,
+  FocusDetails,
   useFocusable,
 } from "@noriginmedia/norigin-spatial-navigation";
 import classNames from "classnames";
@@ -79,9 +81,14 @@ function HomeList (data: {
     preferredChildFocusKey: `${data.selectedFilter}-list`
   });
 
-  const handleNodeFocus = (node: HTMLElement) =>
+  const handleNodeFocus = (id: string, node: HTMLElement, details: FocusDetails) =>
   {
-    node.scrollIntoView({ inline: 'center', behavior: initFocus ? 'smooth' : 'instant' });
+    const isMounseEvent = details.nativeEvent instanceof MouseEvent;
+    if (!isMounseEvent)
+    {
+      node?.scrollIntoView({ inline: 'center', behavior: initFocus ? 'smooth' : 'instant' });
+    }
+
     setInitFocus(true);
   };
 
@@ -101,7 +108,7 @@ function HomeList (data: {
       (ref.current as HTMLElement)?.scrollBy({
         top: 0,
         left: deltaY,
-        behavior: 'auto'
+        behavior: 'instant'
       });
 
     } else
@@ -109,7 +116,7 @@ function HomeList (data: {
       (ref.current as HTMLElement)?.scrollBy({
         top: 0,
         left: deltaY,
-        behavior: 'auto'
+        behavior: 'instant'
       });
     }
   });
@@ -145,7 +152,9 @@ function MainMenu (data: {})
     <ul
       ref={ref}
       save-child-focus="session"
-      className="flex items-center justify-center gap-3"
+      className={twMerge("md:relative flex items-center justify-center md:gap-3",
+        "sm:gap-1 sm:absolute sm:bottom-2 sm:left-0 sm:right-0"
+      )}
     >
       <FocusContext.Provider value={focusKey}>
         <CircleIcon
@@ -199,7 +208,7 @@ function CircleIcon (data: {
       onClick={data.action}
       className={twMerge(
         `menu-icon text-base-300 md:w-20 md:h-20 rounded-full flex items-center justify-center drop-shadow-lg cursor-pointer transition-all`,
-        'sm:w-14 sm:h-14',
+        'sm:w-14 sm:h-10',
         typeClasses[data.type ?? "none"], classNames(
           {
             "focus ring-7 ring-primary drop-shadow-2xl animate-scale": focused,
@@ -263,18 +272,19 @@ export default function ConsoleHomeUI ()
       <FocusContext.Provider value={focusKey}>
         <div className="px-3 w-full pt-2">
           <HeaderUI buttons={[
+            { id: "fullscreen", icon: <Maximize />, action: () => document.documentElement.requestFullscreen() },
             { id: "search", icon: <Search /> },
             { id: "power-button", icon: <Power />, external: true, action: () => closeMutation.mutate() }
           ]} />
         </div>
-        <div className="flex w-full flex-col grow justify-evenly">
+        <div className="flex w-full flex-col grow justify-evenly md:pt-0">
           <FilterUI
             id="home"
             options={filters}
             selected={filter ? filter : 'games'}
             setSelected={setFilter}
           />
-          <div className="-mb-1">
+          <div className="md:-mb-1">
             <HomeList
               selectedFilter={filter}
             />
@@ -283,7 +293,9 @@ export default function ConsoleHomeUI ()
             <MainMenu />
           </div>
         </div>
-        <footer className="px-2 pb-2 flex items-center justify-between h-12">
+        <footer className={twMerge("md:relative px-2 md:pb-2 flex items-center justify-between h-12",
+          "sm:absolute bottom-0 left-0 right-0"
+        )}>
           <div className="flex gap-2 text-sm">
           </div>
           <Shortcuts shortcuts={shortcuts} />

src/mainview/routes/settings/directories.tsx

@@ -1,5 +1,5 @@
 import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
-import { Block, createFileRoute, useBlocker } from '@tanstack/react-router';
+import { Block, createFileRoute } from '@tanstack/react-router';
 import DownloadDirectoryOption from '@/mainview/components/options/DownloadDirectoryOption';
 import { useIsMutating, useMutation, useQuery } from '@tanstack/react-query';
 import { changeDownloadsMutation, downloadDrivesQuery } from '@/mainview/scripts/queries';
@@ -7,12 +7,12 @@ import { DownloadsDrive } from '@/shared/constants';
 import prettyBytes from 'pretty-bytes';
 import classNames from 'classnames';
 import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
-import { Download, FolderOpen, HardDrive, Usb } from 'lucide-react';
+import { Download, FolderOpen, HardDrive, Save, Usb } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 import { OptionSpace } from '@/mainview/components/options/OptionSpace';
-import data from '@emulators';
 import { Button } from '@/mainview/components/options/Button';
 import { systemApi } from '@/mainview/scripts/clientApi';
+import useActiveControl from '@/mainview/scripts/gamepads';
 
 export const Route = createFileRoute('/settings/directories')({
   component: RouteComponent,
@@ -20,27 +20,33 @@ export const Route = createFileRoute('/settings/directories')({
 
 function DriveComponent (data: { drive: DownloadsDrive; downloadsSize: number; refetchDrives: () => void; })
 {
-  const { ref, focused, focusKey } = useFocusable({ focusKey: data.drive.device });
+  const { ref, focused, focusKey } = useFocusable({
+    focusKey: data.drive.device,
+    onFocus: () => (ref.current as HTMLElement)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  });
   const isMoving = useIsMutating(changeDownloadsMutation);
   const usedWithoutDownlods = data.drive.used - (data.drive.isCurrentlyUsed ? data.downloadsSize : 0);
   const usedPercent = usedWithoutDownlods / data.drive.size;
   const usedPercentRaw = data.drive.used / data.drive.size;
   const changeDownloads = useMutation({ ...changeDownloadsMutation, onSuccess: data.refetchDrives }); data.drive.unusableReason;
   const shortcuts: Shortcut[] = [];
-  if (!data.drive.unusableReason && isMoving <= 0)
+  const valid = !data.drive.unusableReason && isMoving <= 0;
+  const handleAction = () => changeDownloads.mutate(data.drive.mountPoint);
+  if (valid)
   {
-    shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: () => changeDownloads.mutate(data.drive.mountPoint) });
+    shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: handleAction });
   }
   useShortcuts(focusKey, () => shortcuts, [shortcuts]);
+  const { isMouse } = useActiveControl();
 
-
+  return <li ref={ref} className={twMerge('flex flex-row p-4 bg-base-300 rounded-2xl gap-1 items-end',
-  return <li ref={ref} className={twMerge('flex flex-col p-4 bg-base-300 rounded-2xl gap-1',
     classNames({
       "ring-7": focused,
-      "border-dashed border-primary border-7": data.drive.isCurrentlyUsed,
+      "border-dashed border-primary border-4": data.drive.isCurrentlyUsed,
       "border-solid": data.drive.unusableReason === 'already_used',
       "ring-error": data.drive.unusableReason === 'not_enough_space',
     }))}>
+    <div className='flex flex-col grow gap-1'>
       <div className='flex gap-2 font-semibold'>{data.drive.isRemovable ? <Usb /> : <HardDrive />}{data.drive.label}</div>
       <small className='opacity-60'>{data.drive.mountPoint}</small>
       <div className='flex gap-2'>
@@ -60,6 +66,8 @@ function DriveComponent (data: { drive: DownloadsDrive; downloadsSize: number; r
         }))} style={{ width: usedPercent.toLocaleString('en-US', { style: 'percent' }) }}></div>
         {!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>}
       </div>
+    </div>
+    {valid && isMouse && <Button type="button" className='btn-circle' onAction={handleAction} id={`${data.drive.mountPoint}-select`}><Save /></Button>}
   </li>;
 }
 
@@ -77,7 +85,7 @@ function RouteComponent ()
     <Block shouldBlockFn={() => isMoving} withResolver={false} />
     <ul ref={ref} className="list rounded-box gap-2">
       <div className="divider text-2xl mt-0 md:mt-4">
-        <Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : '?'})
+        <Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : <span className="loading loading-spinner loading-lg size-6"></span>})
       </div>
       <ul className='p-2 grid grid-cols-2 gap-3'>
         {drives?.drives.filter(d => d.mountPoint).map(d => <DriveComponent refetchDrives={refetch} downloadsSize={drives.downloadsSize} drive={d} />)}

src/mainview/routes/settings/route.tsx

@@ -29,6 +29,7 @@ import { PopSource } from "../../scripts/spatialNavigation";
 import { Router } from "../..";
 import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";
 import Shortcuts from "@/mainview/components/Shortcuts";
+import useActiveControl from "@/mainview/scripts/gamepads";
 
 export const Route = createFileRoute("/settings")({
   component: SettingsUI,
@@ -68,6 +69,7 @@ function MenuItem (data: {
         ? handleNonFocusSelect
         : undefined,
   });
+  const { isMouse } = useActiveControl();
   return (
     <li
       ref={ref}
@@ -81,13 +83,13 @@ function MenuItem (data: {
           "group rounded-full p-3 pl-5 text-base-content/80",
           classNames({
             "bg-primary text-primary-content": acitve,
-            "font-semibold ring-7 ring-primary-content": focused,
+            "font-semibold ring-7 ring-primary-content": focused && !isMouse,
             "bg-secondary text-secondary-content ring-primary": data.return && focused,
           }),
           data.linkClassName,
         )}
       >
-        <div className={twMerge("flex gap-2 items-center transition-all group-hover:scale-110", classNames({
+        <div className={twMerge("flex gap-2 items-center transition-all", classNames({
           "scale-110": focused || acitve
         }))}>
           {data.icon}

src/mainview/scripts/gamepads.ts

@@ -1,7 +1,13 @@
-import { getCurrentFocusKey, navigateByDirection, SpatialNavigation } from "@noriginmedia/norigin-spatial-navigation";
+import { getCurrentFocusKey, navigateByDirection } from "@noriginmedia/norigin-spatial-navigation";
-import { dispatchFocusedEvent, GetFocusedElement } from "./spatialNavigation";
+import { GetFocusedElement } from "./spatialNavigation";
+import { useEffect, useState } from "react";
 
 let loopStarted = false;
+let isTouching = false;
+type ActiveControlType = 'keyboard' | 'gamepad' | 'mouse' | 'touch' | undefined;
+let activeControls: ActiveControlType = undefined;
+let mouseUpdateTimeout: any | undefined = undefined;
+let touchStopTimeout: any | undefined = undefined;
 
 const handleLoop = () =>
 {
@@ -11,8 +17,70 @@ const handleLoop = () =>
         loopStarted = true;
     }
 };
+
+// Mouse needs to be delayed so that touch events can cancel it.
+// This is to prevent both touch and mouse events triggering as they do on the steam deck.
+const handleMouseMove = (e: MouseEvent) =>
+{
+    if (!mouseUpdateTimeout && !isTouching)
+    {
+        mouseUpdateTimeout = setTimeout(() =>
+        {
+            focusControl('mouse');
+            mouseUpdateTimeout = undefined;
+        }, 300);
+    }
+};
+
+function clearMouseUpdate ()
+{
+    if (mouseUpdateTimeout)
+        clearTimeout(mouseUpdateTimeout);
+    mouseUpdateTimeout = undefined;
+};
+
+const handleKeyDown = () =>
+{
+    focusControl('keyboard');
+};
+
+const handleTouchStart = (e: TouchEvent) =>
+{
+    isTouching = true;
+    focusControl('touch');
+    clearMouseUpdate();
+};
+
+const handleTouchEnd = (e: TouchEvent) =>
+{
+    setTimeout(() => isTouching = false, 10);
+};
+
+window.addEventListener('touchstart', handleTouchStart);
+window.addEventListener('touchend', handleTouchEnd);
+window.addEventListener('touchcancel', handleTouchEnd);
 window.addEventListener("gamepadconnected", handleLoop);
-import.meta.hot.dispose(() => window.addEventListener('gamepaddisconnected', handleLoop));
+window.addEventListener('mousemove', handleMouseMove);
+window.addEventListener('keydown', handleKeyDown);
+import.meta.hot.dispose(() => window.removeEventListener('gamepaddisconnected', handleLoop));
+import.meta.hot.dispose(() => window.removeEventListener('mousemove', handleMouseMove));
+import.meta.hot.dispose(() => window.removeEventListener('keydown', handleKeyDown));
+import.meta.hot.dispose(() => window.removeEventListener('touchstart', handleTouchStart));
+import.meta.hot.dispose(() => window.removeEventListener('touchend', handleTouchEnd));
+import.meta.hot.dispose(() => window.removeEventListener('touchcancel', handleTouchEnd));
+
+export default function useActiveControl ()
+{
+    const [c, setC] = useState<typeof activeControls>(activeControls);
+    useEffect(() =>
+    {
+        const handler = (e: Event) => setC((e as CustomEvent).detail);
+        window.addEventListener('activecontrolschange', handler);
+        return () => window.removeEventListener('activecontrolschange', handler);
+    });
+
+    return { isMouse: c === 'mouse', isPointer: c === 'mouse' || c === 'touch', control: c };
+}
 
 const throttleMap = new Map<string, number>();
 const throttleAcceleration = new Map<string, number>();
@@ -32,6 +100,19 @@ function throttleNav (key: string, dir: string, event: Event)
     }
 }
 
+function focusControl (control: typeof activeControls)
+{
+    if (activeControls != control)
+    {
+        activeControls = control;
+        window.dispatchEvent(new CustomEvent('activecontrolschange', { detail: control }));
+        if (control !== 'mouse')
+        {
+            clearMouseUpdate();
+        }
+    }
+}
+
 /*window.addEventListener('keydown', e =>
 {
     if (e.key === 'Escape')
@@ -74,6 +155,7 @@ function updateStatus ()
                 if (!throttleMap.has(key))
                 {
                     window.dispatchEvent(new GamepadButtonEvent('gamepadbuttondown', { button: i, gamepad: gamepad }));
+                    focusControl('gamepad');
                     throttleMap.set(key, 0);
                 }
             } else
@@ -81,6 +163,7 @@ function updateStatus ()
                 if (throttleMap.delete(key))
                 {
                     window.dispatchEvent(new GamepadButtonEvent('gamepadbuttonup', { button: i, gamepad: gamepad }));
+                    focusControl('gamepad');
                 }
             }
         }

src/shared/constants.ts

@@ -1,4 +1,5 @@
 
+import { FocusDetails } from '@noriginmedia/norigin-spatial-navigation';
 import { JSX } from 'react';
 import * as z from 'zod';
 
@@ -14,7 +15,7 @@ export interface GameMeta
 {
     id: string,
     onSelect?: () => void,
-    onFocus?: () => void,
+    onFocus?: (details: FocusDetails) => void,
     title: string,
     subtitle: string | JSX.Element,
     previewUrl?: string;

vite.config.ts

@@ -7,7 +7,7 @@ import path from "node:path";
 import staticAssetsPlugin from 'vite-static-assets-plugin';
 import os from 'node:os';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { host } from "@/bun/utils/host";
+import { host } from "./src/bun/utils/host";
 
 export default defineConfig(() =>
 {