fix: logins now refresh on plugins load

feat: Added tar archive support
fix: Downloaded games and emulator execute permission now updated
fix: Fixed rclone for linux
fix: on screen keyaboard only now shows up when using a gamepad or touch

src/mainview/components/CardList.tsx

@@ -63,7 +63,7 @@ export function CardList (data: {
   onSelectGame?: (id: string) => void;
   focus?: string;
   className?: string;
-  finalElement?: JSX.Element;
+  finalElement?: JSX.Element | JSX.Element[];
   saveChildFocus?: 'session' | 'local';
 } & FocusParams)
 {

src/mainview/components/FilePicker.tsx

@@ -1,7 +1,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 { FocusEventHandler, useContext, useRef, useState } from "react";
 import path from "pathe";
 import { Check, File, Folder, FolderInput, FolderOutput, FolderPlus, HardDrive, Usb, X } from "lucide-react";
 import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
@@ -15,6 +15,7 @@ import toast from "react-hot-toast";
 import { FilePickerContext } from "../scripts/contexts";
 import useActiveControl from "../scripts/gamepads";
 import { createFolderMutation, drivesQuery, filesQuery } from "@queries/system";
+import { showKeyboardHandler } from "../scripts/utils";
 
 function List (data: {
     id: string,
@@ -87,15 +88,16 @@ function List (data: {
 function NewFolderInput (data: { id: string, name: string | undefined, setName: (name: string) => void; className?: string; })
 {
     const inputRef = useRef<HTMLInputElement>(null);
+    const { control } = useActiveControl();
     const { ref, focused, focusSelf } = useFocusable({
         focusKey: data.id,
         onEnterPress: () => inputRef.current?.focus(),
         onBlur: () => inputRef.current?.blur(),
     });
-    const handleFocus = () =>
+    const handleFocus: FocusEventHandler<HTMLInputElement> = (e) =>
     {
         focusSelf();
-        systemApi.api.system.show_keyboard.post();
+        showKeyboardHandler(control as any, e.target);
     };
     return <div className={data.className} ref={ref}>
         <input ref={inputRef}

src/mainview/components/GameList.tsx

@@ -17,7 +17,8 @@ export interface GameListParams extends FocusParams
     onGameSelect?: (id: FrontEndId, source: string | null, sourceId: string | null) => void;
     focus?: string;
     className?: string;
-    finalElement?: JSX.Element;
+    finalElement?: JSX.Element | JSX.Element[];
+    emptyElement?: JSX.Element | JSX.Element[];
     saveChildFocus?: "session" | "local";
 }
 
@@ -52,6 +53,25 @@ export function GameList (data: GameListParams)
         navigator({ to: '/game/$source/$id', params: { id: String(g.source_id ?? g.id.id), source: g.source ?? g.id.source } });
     };
 
+    const finalElement: JSX.Element[] = [];
+    if (!games.isFetching && !!games.data && games.data.games.length <= 0)
+    {
+        if (Array.isArray(data.emptyElement))
+        {
+            finalElement.push(...data.emptyElement);
+        } else if (data.emptyElement)
+        {
+            finalElement.push(data.emptyElement);
+        }
+    }
+    if (Array.isArray(data.finalElement))
+    {
+        finalElement.push(...data.finalElement);
+    } else if (data.finalElement)
+    {
+        finalElement.push(data.finalElement);
+    }
+
     return (
         <>
             <CardList
@@ -60,7 +80,7 @@ export function GameList (data: GameListParams)
                 grid={data.grid}
                 className={data.className}
                 onFocus={data.onFocus}
-                finalElement={data.finalElement}
+                finalElement={finalElement}
                 saveChildFocus={data.saveChildFocus}
                 focus={data.focus}
                 games={games.data?.games

src/mainview/components/Header.tsx

@@ -153,7 +153,7 @@ function WiFiStatus ()
   return systemContext && systemContext.wifiConnections.length > 0 ? <div>
     {systemContext.wifiConnections.map(w =>
     {
-      const className = "w-6 h-6";
+      const className = "w-10 h-10";
       let icon = <Wifi className={className} />;
       if (w.signalLevel >= -60)
         icon = <Wifi className={className} />;
@@ -164,7 +164,7 @@ function WiFiStatus ()
       else if (w.signalLevel >= -90)
         icon = <WifiZero className={className} />;
 
-      return <div className="tooltip" data-tip={w.signalLevel}>
+      return <div className="tooltip tooltip-bottom" data-tip={w.signalLevel}>
         {icon}
       </div>;
     })}

src/mainview/components/HeaderSearchField.tsx

@@ -1,10 +1,13 @@
 import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
-import { Ref, RefObject, useEffect, useRef, useState } from "react";
+import { FocusEventHandler, Ref, RefObject, useEffect, useRef, useState } from "react";
 import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
 import { oneShot } from "../scripts/audio/audio";
 import { Search } from "lucide-react";
 import { RoundButton } from "./RoundButton";
 import { useEventListener } from "usehooks-ts";
+import { systemApi } from "../scripts/clientApi";
+import { showKeyboardHandler } from "../scripts/utils";
+import useActiveControl from "../scripts/gamepads";
 
 function SearchInput (data: {
     id: string;
@@ -16,6 +19,7 @@ function SearchInput (data: {
     onSubmit: (search: string | undefined) => void;
 } & FocusParams)
 {
+    const { control } = useActiveControl();
     const { ref, focusKey } = useFocusable({
         onBlur: () => inputRef.current?.blur(),
         onFocus: (l, p, d) =>
@@ -59,6 +63,8 @@ function SearchInput (data: {
         data.onSubmit?.(undefined);
     }, inputRef as any);
 
+    const handlInputFocus: FocusEventHandler<HTMLInputElement> = e => showKeyboardHandler(control as any, e.target);
+
     return <label ref={ref} onFocus={data.onInputFocus} className='input rounded-full input-lg w-full max-w-xs has-focus:bg-base-300 ring-primary focused:ring-7 has-focus:ring-7 has-focus:ring-base-content'>
         <Search />
         <input
@@ -68,6 +74,7 @@ function SearchInput (data: {
                 setLocalSearch(data.search);
             }}
             autoFocus={data.compact}
+            onFocus={handlInputFocus}
             ref={inputRef}
             value={localSearch ?? ""}
             onChange={v => setLocalSearch(v.target.value)}

src/mainview/components/LoadMoreButton.tsx

@@ -2,7 +2,7 @@ import { setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation
 import { FOCUS_KEYS } from "../scripts/types";
 import { useIntersectionObserver } from "usehooks-ts";
 
-export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
+export default function LoadMoreButton (data: { isFetching: boolean; hidden?: boolean, lastId?: FrontEndId; } & FocusParams & InteractParams)
 {
     const handleAction = (event?: Event) =>
     {
@@ -12,7 +12,7 @@ export default function LoadMoreButton (data: { isFetching: boolean; lastId?: Fr
     };
 
     const { ref, focusKey, focused } = useFocusable({
-        focusable: !data.isFetching,
+        focusable: !data.isFetching && data.hidden !== true,
         focusKey: 'load-more-btn',
         onFocus: (_l, _p, details) => data.onFocus?.(focusKey, ref.current, details),
         onEnterPress: handleAction
@@ -34,5 +34,5 @@ export default function LoadMoreButton (data: { isFetching: boolean; lastId?: Fr
     {
         ref.current = r;
         intersct(r);
-    }} className='flex bg-base-100 game-card focusable focusable-accent focusable-hover text-2xl justify-center items-center cursor-pointer' onClick={e => handleAction(e.nativeEvent)} id='load-more-btn'>{data.isFetching ? <span className="loading loading-spinner loading-xl"></span> : "Load More"}</div>;
+    }} className='flex data-[hidden=true]:invisible bg-base-100 game-card focusable focusable-accent focusable-hover text-2xl justify-center items-center cursor-pointer' data-hidden={data.hidden} onClick={e => handleAction(e.nativeEvent)} id='load-more-btn'>{data.isFetching ? <span className="loading loading-spinner loading-xl"></span> : "Load More"}</div>;
 }

src/mainview/components/options/OptionInput.tsx

@@ -6,6 +6,8 @@ import { systemApi } from "../../scripts/clientApi";
 import { CheckIcon, X } from "lucide-react";
 import { oneShot } from "@/mainview/scripts/audio/audio";
 import { GamePadButtonCode, Shortcut, useShortcuts } from "@/mainview/scripts/shortcuts";
+import { showKeyboardHandler } from "@/mainview/scripts/utils";
+import useActiveControl from "@/mainview/scripts/gamepads";
 
 export function OptionInput (data: {
     name: string;
@@ -35,6 +37,7 @@ export function OptionInput (data: {
         }
         oneShot('click');
     };
+    const { control } = useActiveControl();
     const [inputFocused, setInputFocused] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
     const { ref, focusKey } = useFocusable({
@@ -99,20 +102,11 @@ export function OptionInput (data: {
         return shortcuts;
     }, [inputFocused, data.type]);
 
-    const handleInputFocus = () =>
+    const handleInputFocus: FocusEventHandler<HTMLInputElement> = (e) =>
     {
         option.focus();
         setInputFocused(true);
-        if (inputRef.current)
-        {
-            var rect = inputRef.current?.getBoundingClientRect();
-            systemApi.api.system.show_keyboard.post({
-                XPosition: rect.x,
-                YPosition: rect.y,
-                Width: rect.width,
-                Height: rect.height
-            });
-        }
+        showKeyboardHandler(control as any, e.target);
     };
 
     const handleInputBlur = (e: any) =>