fix: Navigation blocking now working with focuesed input fields

fix: Added warning to loging with lookup provider for better UX
feat: Added ROMM Client API Token in plugin settings

src/mainview/components/GamepadKeyboard.tsx

@@ -1,5 +1,5 @@
 import { createRef, JSX, RefObject, useEffect, useRef, useState } from "react";
-import useActiveControl from "../scripts/gamepads";
+import useActiveControl, { GamepadButtonEvent } from "../scripts/gamepads";
 import { oneShot } from "../scripts/audio/audio";
 import { ArrowLeft, ArrowRight, CornerDownLeft, Delete, Space } from "lucide-react";
 import { GamePadButtonCode } from "../scripts/shortcuts";
@@ -457,11 +457,26 @@ export function GamepadKeyboard ()
 
         if (!disposed && !hidden) requestAnimationFrame(update);
 
+        const gamepadButtonHandler = (e: Event) =>
+        {
+            if (!(e instanceof GamepadButtonEvent) || disposed || hidden) return;
+            if (e.button === GamePadButtonCode.L1 || e.button === GamePadButtonCode.R1 || e.button === GamePadButtonCode.L2 || e.button === GamePadButtonCode.R2)
+            {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
+
+        };
+        window.addEventListener('gamepadbuttondown', gamepadButtonHandler);
+        window.addEventListener('gamepadbuttonup', gamepadButtonHandler);
+
         return () =>
         {
             disposed = true;
             Object.values(buttonRepeatTimeout).forEach(v => clearTimeout(v));
             Object.values(actionRepeatTimeout).forEach(v => clearTimeout(v));
+            window.removeEventListener('gamepadbuttondown', gamepadButtonHandler);
+            window.removeEventListener('gamepadbuttonup', gamepadButtonHandler);
         };
     }, [focusedInput, elements, shift, characters, hidden]);
 

src/mainview/components/Header.tsx

@@ -230,14 +230,6 @@ export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
 
   const accounts: HeaderAccount[] = [];
   if (data.accounts) accounts.push(...data.accounts);
-  const router = useRouter();
-
-  const { ref } = useFocusable({
-    focusKey: 'accounts',
-    onEnterPress: handleSelect,
-    focusable: accounts.length > 0
-  });
-
   if (rommUser.data?.hasLogin || rommUser.isError)
   {
     accounts.push({
@@ -254,6 +246,16 @@ export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
       type: 'secondary'
     });
   }
+  const hasAccounts = accounts.length > 0;
+  const router = useRouter();
+
+  const { ref } = useFocusable({
+    focusKey: 'accounts',
+    onEnterPress: handleSelect,
+    focusable: hasAccounts
+  });
+
+
 
   return <div onClick={handleSelect} ref={ref} style={{ viewTimelineName: "header-accounts" }} className="avatar-group cursor-pointer -space-x-6 w-fit flex items-center gap-2 drop-shadow-sm overflow-visible rounded-3xl focusable focusable-primary focusable-hover ">
     {accounts?.map(a => <HeaderAvatar
@@ -316,17 +318,19 @@ export function HeaderUI (data: HeaderUIParams)
     router.navigate({ to: '/settings/accounts' });
   };
   return (
-    <FocusContext.Provider value={focusKey}>
-      <header
-        ref={ref}
-        className="flex items-center justify-between text-base-content"
-        style={{ viewTimelineName: 'header' }}
-      >
+
+    <header
+      ref={ref}
+      className="flex items-center justify-between text-base-content"
+      style={{ viewTimelineName: 'header' }}
+    >
+      <FocusContext value={focusKey}>
         <HeaderAccounts key={"header-accounts"} accounts={data.accounts} />
         {data.title}
         <HeaderStatusBar key={"header-status-bar"} buttonElements={data.buttonElements} buttons={[...data.buttons ?? [], { icon: <Settings />, id: "header-settings-btn", action: goToSettings, external: true }]} />
-      </header>
-    </FocusContext.Provider>
+
+      </FocusContext>
+    </header >
   );
 }
 

src/mainview/components/game/GameLookup.tsx

@@ -1,13 +1,15 @@
 
 import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
 import { useQuery } from "@tanstack/react-query";
-import { Check, Search } from "lucide-react";
+import { Check, Search, TriangleAlert } from "lucide-react";
 import HeaderSearchField from "../HeaderSearchField";
 import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
 import { scrollIntoViewHandler } from "@/mainview/scripts/utils";
 import { FOCUS_KEYS } from "@/mainview/scripts/types";
 import { FrontEndId, GameLookup } from "@/shared/types";
 import { gameLookupQuery } from "@/mainview/scripts/queries/romm";
+import { Button } from "../options/Button";
+import { useNavigate } from "@tanstack/react-router";
 
 function Result (data: {
     match: GameLookup;
@@ -65,18 +67,26 @@ export default function GameLookupElement (data: {
 })
 {
     const { data: lookups, isFetching } = useQuery({ ...gameLookupQuery(data.search), staleTime: 1000 * 60 * 60 });
+    const navigate = useNavigate();
 
     return <div>
         <SearchField setSearch={data.setSearch} search={data.search} />
         <div className="divider">{isFetching ? <span className="loading loading-spinner loading-lg"></span> : <Search className='size-10' />}Results</div>
         <ul className='flex flex-col gap-2 justify-center p-2 px-4'>
-            {lookups?.map((l, i) =>
-            {
-                return <Result key={i} selected={data.selected?.id === l.id && data.selected?.source === l.source} showPlatform={data.showPlatforms ?? false} match={l} onAction={(ctx) =>
+            {!Array.isArray(lookups) && <>
+
+                {!isFetching && !lookups?.hadMatchers && <div className="flex justify-center items-center text-2xl p-16 gap-2 text-warning">
+                    <Button onAction={e => navigate({ to: '/settings/accounts', search: { focus: 'twitch-login-space' } })} external className="gap-2" style="warning" id="setup-lookup-btn"><TriangleAlert /> Login With Lookup Provider</Button>
+                </div>}
+                {lookups?.matches.map((l, i) =>
                 {
-                    data.onSelect(l);
-                }} />;
-            })}
+                    return <Result key={i} selected={data.selected?.id === l.id && data.selected?.source === l.source} showPlatform={data.showPlatforms ?? false} match={l} onAction={(ctx) =>
+                    {
+                        data.onSelect(l);
+                    }} />;
+                })}
+
+            </>}
         </ul>
     </div>;
 }

src/mainview/components/options/Button.tsx

@@ -27,6 +27,7 @@ export function Button (data: {
     children?: any,
     className?: string,
     disabled?: boolean,
+    external?: boolean,
     type?: "reset" | "button" | "submit";
     style?: ButtonStyle,
     shortcutLabel?: string;
@@ -65,6 +66,7 @@ export function Button (data: {
             focused ? data.focusClassName : undefined,
             classNames({
                 "btn-accent": focused,
+                "focusable focusable-primary focusable-hover": data.external
             }, data.className))}
         type={data.type ?? 'button'}
     >

src/mainview/components/options/OptionInput.tsx

@@ -121,7 +121,7 @@ export function OptionInput (data: {
                 step={data.step}
                 data-focus={"input"}
                 name={data.name}
-                value={String(data.value)}
+                value={data.value === undefined ? undefined : String(data.value)}
                 defaultValue={typeof data.defaultValue === 'string' ? data.defaultValue : undefined}
                 type={data.type}
                 autoComplete={data.autocomplete}