[Feature] File picker improvements (#454)

* First iteration for internationalization of the loader * First iteration for internationalization of the loader * Cleanup node mess * Cleanup node mess pt2 * Additional touches * Latest decky changed merged into i18n and updated translation. * Styling fixes * Initial backend hosting implementation * Added correct url path of the loopback server. * Added correct url path of the loopback server. * Some better namespaced text. * Added whitelist for locales path. * Refactor languages and fix hooks logic bugs. * Small typo in language translation structure. * Working backend, automatically swtich languages with steam and language fixes. * Fix to languages * Key fixes * Additional language fixes. * Additional json changes * Final text revision and added a vscode tasks to automatically extract text from code. * Typo in the middleware * Remove unused imports * Cleanup whitespaces. * Import changes * Revert "Import changes" This reverts commit 8e8231950f. * Update index.d.ts * Clean up unused imports * Delete pnpm-lock.yaml * Update rollup.config.js * Update PluginInstallModal.tsx * Update index.tsx * Update plugin-loader.tsx * Update plugin-loader.tsx * Revert "Delete pnpm-lock.yaml" This reverts commit 3a39f36f21. * Additional strings reworks. * Fixes for issues coming from github merge. * Fixes for master * Styling fixes * Styling pt2 * Missed a few strings in master, * Styling fixes * Additional master merge fixes. * Final cleanup and adaptation to master. * Final empty language cleanup and few string added * Small changes to italian translation * Disabled translation on a few components inside plugin-loader for missing react hooks. * Fixed passing tag to translation. * Disable debug output for reducing console spam. * Return correct content type * Small italian language change * Added support for country code * Fixed missing translation for uninstall popup. * Fix class name shenanigans for toast notification * Update dependencies * Fixed github workflow to include the new locales folder * Update dependencies to latest version (unless it's React) and fixed the new small errors that cropped up * Missed a file name change * Updated dev dependencies to latest version * Missed a few dev dependencies * Revert "Update dependencies to latest version (unless it's React) and fixed the new small errors that cropped up" Messed up merge with a different main branch * Messed up deletion of rollup config. * Fix broken pnpm lock file * Missed a localized string during the merge * Fixed a parameter mistake in the uninstall text parameter * Fix pnpm random issues * Small italian language tweaks * Fix wrong parameter passed to the uninstall function call * Another fix on a wrong function parameter * Additional translation text on the store and branch selection channels * Changed the default type passed to map to being able to index the two arrays. * Reverted and reworked the last changes * Distinguish events in UI for installing vs reinstalling plugins * Additional fixes for reinstall prompt * Revert the use of intevalPlural since the parser doesn't seem to support that. * Missed a routing path in the backend * Small bugfixes * Small fixes * Correctly adding the parameter to the request headers. * Refactoring of the UI popup modal * Fix pnpm shenanigans * Final fixes for the install UI localization * Clean up unnedeed backend code * Small rework on text selection. * Cleaned up parser configuration * Removed extracttext dependency to pnpmsetup * Merged translation and cleaned up parser * Fixed JSON structure after manual merge. * Added translation to the file picker * First iteration for merging the new filepicker. * Revert changes to PluginInstallModal * Reworked the text modal for the final time * Missed the proper linted text * Missed the backend change * Final branch cleanup * First iteration for porting the new file picker * Hotfix for i18n where the detector was overriding localStorage * Please, pnpm, cooperate * Small fix regarding the backend getting hammered when switching to not supported languages plus a small english typo * Initial working upstream iteration for file picker * Typo on translation variable * File picker final improvements * Stylistic fixes and fix on wrong bool passed to fp * Fixup merge from main * Other merge errors fixed * Minor cleanups * Fixed missing padding under text label extension * Implement pagination backend side * First draft for filtering backend side * Implemented matching on file names. * Fix for unable to order per size on folders. * Hard checking a return value * Added a missing import. * Implemented show more as a frontend button * Whoops, python typo * Fixed python backend * Rendering bug fix and small qol improvement * Added missing parameter to openFilePicker call * Fixed path on windows and unknown error on wrong path * Small backend fixes * Extension fix * Simplified extension logic * Less string conversions. * Optimize backend code and removed additional components. * Take correctly into account the max value The button will now respect the actual maximum desired number of entries. * Bugfix for ordering logic and ignore cases during sorting * Regex call was missing an argument * Fixed issues with filtering extensions * Rollback testing changes * Minor cleanup and attempt at fixing the not updating multimodal. * Cleanup variable types. * Mantains the same api format from the original source code. * Removing hardcoded paths in the code * Additional fixes for resolving the user path * Cleanup useless modifications * Final fixes for avoid path hardcoding * Update lockfile and i18next version
2026-06-13 12:15:09 +03:00 · 2023-06-19 15:23:27 +02:00
parent bd87cc852b
commit 57f4555350
14 changed files with 1069 additions and 491 deletions
@@ -159,4 +159,4 @@ async def stop_systemd_unit(unit_name: str) -> bool:
    return await localplatform.service_stop(unit_name)

 async def start_systemd_unit(unit_name: str) -> bool:
-    return await localplatform.service_start(unit_name)
+    return await localplatform.service_start(unit_name)
@@ -12,9 +12,37 @@
        "disabling": "Disabling React DevTools",
        "enabling": "Enabling React DevTools"
    },
+  "DropdownMultiselect": {
+    "button": {
+      "back": "Back"
+    }
+  },
+  "FilePickerError": {
+    "errors": {
+      "file_not_found": "The path specified is not valid. Please check it and reenter it correctly.",
+      "unknown": "An unknown error occurred. The raw error is: {{raw_error}}"
+    }
+  },
    "FilePickerIndex": {
-        "folder": {
-            "select": "Use this folder"
+    "files": {
+      "all_files": "All Files",
+      "file_type": "File Type",
+      "show_hidden": "Show Hidden Files"
+    },
+    "filter": {
+      "created_asce": "Created (Oldest)",
+      "created_desc": "Created (Newest)",
+      "modified_asce": "Modified (Oldest)",
+      "modified_desc": "Modified (Newest)",
+      "name_asce": "Z-A",
+      "name_desc": "A-Z",
+      "size_asce": "Size (Smallest)",
+      "size_desc": "Size (Largest)"
+    },
+      "folder": {
+      "label": "Folder",
+      "select": "Use this folder",
+      "show_more": "Show more files"
        }
    },
    "PluginView": {
@@ -12,9 +12,37 @@
        "disabling": "Disabilito i tools di React",
        "enabling": "Abilito i tools di React"
    },
+  "DropdownMultiselect": {
+    "button": {
+      "back": "Indietro"
+    }
+  },
+  "FilePickerError": {
+    "errors": {
+      "file_not_found": "Il percorso specificato non è valido. Controllalo e prova a reinserirlo di nuovo.",
+      "unknown": "È avvenuto un'errore sconosciuto. L'errore segnalato è {{raw_error}}"
+    }
+  },
    "FilePickerIndex": {
+    "files": {
+      "all_files": "Tutti i file",
+      "file_type": "Tipo di file",
+      "show_hidden": "Mostra nascosti"
+    },
+    "filter": {
+      "created_asce": "Creazione (meno recente)",
+      "created_desc": "Creazione (più recente)",
+      "modified_asce": "Modifica (meno recente)",
+      "modified_desc": "Modifica (più recente)",
+      "name_asce": "Z-A",
+      "name_desc": "A-Z",
+      "size_asce": "Dimensione (più piccolo)",
+      "size_desc": "Dimensione (più grande)"
+    },
        "folder": {
-            "select": "Usa questa cartella"
+      "label": "Cartella",
+            "select": "Usa questa cartella",
+      "show_more": "Mostra più file"
        }
    },
    "PluginCard": {
@@ -1,16 +1,21 @@
 import uuid
 import os
 from json.decoder import JSONDecodeError
+from os.path import splitext
+import re
 from traceback import format_exc
+from stat import FILE_ATTRIBUTE_HIDDEN

 from asyncio import sleep, start_server, gather, open_connection
 from aiohttp import ClientSession, web

 from logging import getLogger
 from injector import inject_to_tab, get_gamepadui_tab, close_old_tabs, get_tab
+from pathlib import Path
+from localplatform import ON_WINDOWS
 import helpers
 import subprocess
-from localplatform import service_stop, service_start
+from localplatform import service_stop, service_start, get_home_path, get_username

 class Utilities:
    def __init__(self, context) -> None:
@@ -33,7 +38,8 @@ class Utilities:
            "filepicker_ls": self.filepicker_ls,
            "disable_rdt": self.disable_rdt,
            "enable_rdt": self.enable_rdt,
-            "get_tab_id": self.get_tab_id
+            "get_tab_id": self.get_tab_id,
+            "get_user_info": self.get_user_info,
        }

        self.logger = getLogger("Utilities")
@@ -189,31 +195,82 @@ class Utilities:
        await service_stop(helpers.REMOTE_DEBUGGER_UNIT)
        return True

-    async def filepicker_ls(self, path, include_files=True):
-        # def sorter(file): # Modification time
-        #     if os.path.isdir(os.path.join(path, file)) or os.path.isfile(os.path.join(path, file)):
-        #         return os.path.getmtime(os.path.join(path, file))
-        #     return 0
-        # file_names = sorted(os.listdir(path), key=sorter, reverse=True) # TODO provide more sort options
-        file_names = sorted(os.listdir(path)) # Alphabetical
+    async def filepicker_ls(self, 
+                            path : str | None = None, 
+                            include_files: bool = True,
+                            include_folders: bool = True,
+                            include_ext: list[str] = [],
+                            include_hidden: bool = False,
+                            order_by: str = "name_asc",
+                            filter_for: str | None = None,
+                            page: int = 1,
+                            max: int = 1000):
+        
+        if path == None:
+            path = get_home_path()

-        files = []
+        path = Path(path).resolve()

-        for file in file_names:
-            full_path = os.path.join(path, file)
-            is_dir = os.path.isdir(full_path)
+        files, folders = [], []

-            if is_dir or include_files:
-                files.append({
-                    "isdir": is_dir,
-                    "name": file,
-                    "realpath": os.path.realpath(full_path)
-                })
+        #Resolving all files/folders in the requested directory
+        for file in path.iterdir():
+            if file.exists():
+                filest = file.stat()
+                is_hidden = file.name.startswith('.')
+                if ON_WINDOWS and not is_hidden:
+                    is_hidden = bool(filest.st_file_attributes & FILE_ATTRIBUTE_HIDDEN)
+                if include_folders and file.is_dir():
+                    if (is_hidden and include_hidden) or not is_hidden:
+                        folders.append({"file": file, "filest": filest, "is_dir": True})
+                elif include_files:
+                    # Handle requested extensions if present
+                    if 'all_files' in include_ext or splitext(file.name)[1].lstrip('.') in include_ext:
+                        if (is_hidden and include_hidden) or not is_hidden:
+                            files.append({"file": file, "filest": filest, "is_dir": False})
+        # Filter logic
+        if filter_for is not None:
+            try:
+                if re.compile(filter_for):
+                    files = filter(lambda file: re.search(filter_for, file.name) != None, files)
+            except re.error:
+                files = filter(lambda file: file.name.find(filter_for) != -1, files)
+        
+        # Ordering logic
+        ord_arg = order_by.split("_")
+        ord = ord_arg[0]
+        rev = True if ord_arg[1] == "asc" else False
+        match ord:
+            case 'name':
+                files.sort(key=lambda x: x['file'].name.casefold(), reverse = rev)
+                folders.sort(key=lambda x: x['file'].name.casefold(), reverse = rev)
+            case 'modified':
+                files.sort(key=lambda x: x['filest'].st_mtime, reverse = not rev)
+                folders.sort(key=lambda x: x['filest'].st_mtime, reverse = not rev)
+            case 'created':
+                files.sort(key=lambda x: x['filest'].st_ctime, reverse = not rev)
+                folders.sort(key=lambda x: x['filest'].st_ctime, reverse = not rev)
+            case 'size':
+                files.sort(key=lambda x: x['filest'].st_size, reverse = not rev)
+                # Folders has no file size, order by name instead
+                folders.sort(key=lambda x: x['file'].name.casefold())
+        
+        #Constructing the final file list, folders first
+        all =   [{
+                    "isdir": x['is_dir'],
+                    "name": str(x['file'].name),
+                    "realpath": str(x['file']),
+                    "size": x['filest'].st_size,
+                    "modified": x['filest'].st_mtime,
+                    "created": x['filest'].st_ctime,
+                } for x in folders + files ]

        return {
-            "realpath": os.path.realpath(path),
-            "files": files
+            "realpath": str(path),
+            "files": all[(page-1)*max:(page)*max],
+            "total": len(all),
        }
+        

    # Based on https://stackoverflow.com/a/46422554/13174603
    def start_rdt_proxy(self, ip, port):
@@ -289,5 +346,11 @@ class Utilities:
        await tab.evaluate_js("location.reload();", False, True, False)
        self.logger.info("React DevTools disabled")

+    async def get_user_info(self) -> dict:
+        return {
+            "username": get_username(),
+            "path": get_home_path()
+        }
+    
    async def get_tab_id(self, name):
        return (await get_tab(name)).id
@@ -22,7 +22,7 @@
    "@types/react-router": "5.1.18",
    "@types/webpack": "^5.28.1",
    "husky": "^8.0.3",
-    "i18next-parser": "^7.9.0",
+    "i18next-parser": "^8.0.0",
    "import-sort-style-module": "^6.0.0",
    "inquirer": "^8.2.5",
    "prettier": "^2.8.8",
@@ -33,8 +33,8 @@
    "rollup-plugin-delete": "^2.0.0",
    "rollup-plugin-external-globals": "^0.6.1",
    "rollup-plugin-polyfill-node": "^0.10.2",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "tslib": "^2.5.2",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "tslib": "^2.5.3",
    "typescript": "^4.9.5"
  },
  "importSort": {
@@ -45,11 +45,12 @@
  },
  "dependencies": {
    "decky-frontend-lib": "3.21.1",
-    "i18next": "^22.5.0",
+    "filesize": "^10.0.7",
+    "i18next": "^23.1.0",
    "i18next-http-backend": "^2.2.1",
    "react-file-icon": "^1.3.0",
    "react-i18next": "^12.3.1",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.9.0",
    "react-markdown": "^8.0.7",
    "remark-gfm": "^3.0.1"
  }
@@ -13,6 +13,12 @@ interface PublicDeckyState {
  hasLoaderUpdate?: boolean;
  isLoaderUpdating: boolean;
  versionInfo: VerInfo | null;
+  userInfo: UserInfo | null;
+}
+
+export interface UserInfo {
+  username: string;
+  path: string;
 }

 export class DeckyState {
@@ -24,6 +30,7 @@ export class DeckyState {
  private _hasLoaderUpdate: boolean = false;
  private _isLoaderUpdating: boolean = false;
  private _versionInfo: VerInfo | null = null;
+  private _userInfo: UserInfo | null = null;

  public eventBus = new EventTarget();

@@ -37,6 +44,7 @@ export class DeckyState {
      hasLoaderUpdate: this._hasLoaderUpdate,
      isLoaderUpdating: this._isLoaderUpdating,
      versionInfo: this._versionInfo,
+      userInfo: this._userInfo,
    };
  }

@@ -85,6 +93,11 @@ export class DeckyState {
    this.notifyUpdate();
  }

+  setUserInfo(userInfo: UserInfo) {
+    this._userInfo = userInfo;
+    this.notifyUpdate();
+  }
+
  private notifyUpdate() {
    this.eventBus.dispatchEvent(new Event('update'));
  }
@@ -0,0 +1,121 @@
+import {
+  DialogButton,
+  DialogCheckbox,
+  DialogCheckboxProps,
+  Marquee,
+  Menu,
+  MenuItem,
+  findModuleChild,
+  showContextMenu,
+} from 'decky-frontend-lib';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaChevronDown } from 'react-icons/fa';
+
+const dropDownControlButtonClass = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (const prop in m) {
+    if (m[prop]?.toString()?.includes('gamepaddropdown_DropDownControlButton')) {
+      return m[prop];
+    }
+  }
+});
+
+const DropdownMultiselectItem: FC<
+  {
+    value: any;
+    onSelect: (checked: boolean, value: any) => void;
+    checked: boolean;
+  } & DialogCheckboxProps
+> = ({ value, onSelect, checked: defaultChecked, ...rest }) => {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  useEffect(() => {
+    onSelect?.(checked, value);
+  }, [checked, onSelect, value]);
+
+  return (
+    <MenuItem bInteractableItem onClick={() => setChecked((x) => !x)}>
+      <DialogCheckbox
+        style={{ marginBottom: 0, padding: 0 }}
+        className="decky_DropdownMultiselectItem_DialogCheckbox"
+        bottomSeparator="none"
+        {...rest}
+        onClick={() => setChecked((x) => !x)}
+        onChange={(checked) => setChecked(checked)}
+        controlled
+        checked={checked}
+      />
+    </MenuItem>
+  );
+};
+
+const DropdownMultiselect: FC<{
+  items: {
+    label: string;
+    value: string;
+  }[];
+  selected: string[];
+  onSelect: (selected: any[]) => void;
+  label: string;
+}> = ({ label, items, selected, onSelect }) => {
+  const [itemsSelected, setItemsSelected] = useState<any>(selected);
+  const { t } = useTranslation();
+
+  const handleItemSelect = useCallback((checked, value) => {
+    setItemsSelected((x: any) =>
+      checked ? [...x.filter((y: any) => y !== value), value] : x.filter((y: any) => y !== value),
+    );
+  }, []);
+
+  useEffect(() => {
+    onSelect(itemsSelected);
+  }, [itemsSelected, onSelect]);
+
+  return (
+    <DialogButton
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        maxWidth: '100%',
+      }}
+      className={dropDownControlButtonClass}
+      onClick={(evt) => {
+        evt.preventDefault();
+        showContextMenu(
+          <Menu label={label} cancelText={t('DropdownMultiselect.button.back') as string}>
+            <style>
+              {`
+              /* Inherit color from ".basiccontextmenu" */
+              .decky_DropdownMultiselectItem_DialogCheckbox > .DialogToggle_Label {
+                color: inherit;
+              }
+              `}
+            </style>
+            <div style={{ marginTop: '10px' }}>{/*FIXME: Hack for missing padding under label menu*/}</div>
+            {items.map((x) => (
+              <DropdownMultiselectItem
+                key={x.value}
+                label={x.label}
+                value={x.value}
+                checked={itemsSelected.includes(x.value)}
+                onSelect={handleItemSelect}
+              />
+            ))}
+          </Menu>,
+          evt.currentTarget ?? window,
+        );
+      }}
+    >
+      <Marquee>
+        {selected.length > 0
+          ? selected.map((x: any) => items[items.findIndex((v) => v.value === x)].label).join(', ')
+          : '…'}
+      </Marquee>
+      <div style={{ flexGrow: 1, minWidth: '1ch' }} />
+      <FaChevronDown style={{ height: '1em', flex: '0 0 1em' }} />
+    </DialogButton>
+  );
+};
+
+export default DropdownMultiselect;
@@ -0,0 +1,51 @@
+import { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconContext } from 'react-icons';
+import { FaExclamationTriangle, FaQuestionCircle } from 'react-icons/fa';
+
+export enum FileErrorTypes {
+  FileNotFound,
+  Unknown,
+  None,
+}
+
+interface FilePickerErrorProps {
+  error: FileErrorTypes;
+  rawError?: string;
+}
+
+const FilePickerError: FC<FilePickerErrorProps> = ({ error, rawError = null }) => {
+  const [icon, setIcon] = useState<JSX.Element>(<FaQuestionCircle />);
+  const [text, setText] = useState<string | null>(null);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    switch (error) {
+      case FileErrorTypes.FileNotFound:
+        setText(t('FilePickerError.errors.file_not_found'));
+        setIcon(<FaExclamationTriangle />);
+        break;
+      case FileErrorTypes.Unknown:
+        setText(t('FilePickerError.errors.unknown', { raw_error: rawError }));
+        setIcon(<FaQuestionCircle />);
+        break;
+      case FileErrorTypes.None:
+        setText(null);
+        setIcon(<div></div>);
+        break;
+    }
+  }, [error]);
+
+  return (
+    <>
+      <div style={{ paddingTop: '50px', textAlign: 'center', height: '100%' }}>
+        <IconContext.Provider value={{ className: 'fileError', size: '128px' }}>
+          <div style={{ alignSelf: 'center', alignContent: 'center' }}>{icon}</div>
+        </IconContext.Provider>
+        <p style={{ height: '32px', paddingTop: '25px', alignSelf: 'flex-start', textAlign: 'center' }}>{text}</p>
+      </div>
+    </>
+  );
+};
+
+export default FilePickerError;
@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { Translation } from 'react-i18next';
+
+export enum SortOptions {
+  name_desc = 'name_desc',
+  name_asc = 'name_asc',
+  modified_desc = 'modified_desc',
+  modified_asc = 'modified_asc',
+  created_desc = 'created_desc',
+  created_asc = 'created_asc',
+  size_desc = 'size_desc',
+  size_asc = 'size_asc',
+}
+
+interface TSortOptionsProps {
+  trans_part: SortOptions;
+}
+
+const TSortOptions: FC<TSortOptionsProps> = ({ trans_part }) => {
+  return (
+    <Translation>
+      {(t, {}) => {
+        switch (trans_part) {
+          case SortOptions.name_desc:
+            return t('FilePickerIndex.filter.name_desc');
+          case SortOptions.name_asc:
+            return t('FilePickerIndex.filter.name_asce');
+          case SortOptions.modified_desc:
+            return t('FilePickerIndex.filter.modified_desc');
+          case SortOptions.modified_asc:
+            return t('FilePickerIndex.filter.modified_asce');
+          case SortOptions.created_desc:
+            return t('FilePickerIndex.filter.created_desc');
+          case SortOptions.created_asc:
+            return t('FilePickerIndex.filter.created_asce');
+          case SortOptions.size_desc:
+            return t('FilePickerIndex.filter.size_desc');
+          case SortOptions.size_asc:
+            return t('FilePickerIndex.filter.size_asce');
+        }
+      }}
+    </Translation>
+  );
+};
+
+export default TSortOptions;
@@ -38,7 +38,7 @@ const imageStyle = {
  color: '#d18f00',
 };

-const imageExtList = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tif', 'tiff'];
+const imageExtList = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tif', 'tiff', 'apng', 'tga'];

 styleDef.push([imageStyle, imageExtList]);

@@ -1,11 +1,26 @@
-import { DialogButton, Focusable, SteamSpinner, TextField } from 'decky-frontend-lib';
-import { useEffect } from 'react';
-import { FunctionComponent, useState } from 'react';
+import {
+  ControlsList,
+  DialogBody,
+  DialogButton,
+  DialogControlsSection,
+  DialogFooter,
+  Dropdown,
+  Focusable,
+  Marquee,
+  SteamSpinner,
+  TextField,
+  ToggleField,
+} from 'decky-frontend-lib';
+import { filesize } from 'filesize';
+import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { FileIcon, defaultStyles } from 'react-file-icon';
 import { useTranslation } from 'react-i18next';
 import { FaArrowUp, FaFolder } from 'react-icons/fa';

 import Logger from '../../../logger';
+import DropdownMultiselect from '../DropdownMultiselect';
+import FilePickerError, { FileErrorTypes } from './FilePickerError';
+import TSortOption, { SortOptions } from './i18n/TSortOptions';
 import { styleDefObj } from './iconCustomizations';

 const logger = new Logger('FilePicker');
@@ -13,27 +28,89 @@ const logger = new Logger('FilePicker');
 export interface FilePickerProps {
  startPath: string;
  includeFiles?: boolean;
-  regex?: RegExp;
+  includeFolders?: boolean;
+  filter?: RegExp | ((file: File) => boolean);
+  validFileExtensions?: string[];
+  allowAllFiles?: boolean;
+  defaultHidden?: boolean;
+  max?: number;
  onSubmit: (val: { path: string; realpath: string }) => void;
  closeModal?: () => void;
 }

-interface File {
+export interface File {
  isdir: boolean;
+  ishidden: boolean;
  name: string;
  realpath: string;
+  size: number;
+  modified: number;
+  created: number;
 }

 interface FileListing {
  realpath: string;
  files: File[];
+  total: number;
 }

+const sortOptions = [
+  {
+    data: SortOptions.name_desc,
+    label: <TSortOption trans_part={SortOptions.name_desc} />,
+  },
+  {
+    data: SortOptions.name_asc,
+    label: <TSortOption trans_part={SortOptions.name_asc} />,
+  },
+  {
+    data: SortOptions.modified_desc,
+    label: <TSortOption trans_part={SortOptions.modified_desc} />,
+  },
+  {
+    data: SortOptions.modified_asc,
+    label: <TSortOption trans_part={SortOptions.modified_asc} />,
+  },
+  {
+    data: SortOptions.created_desc,
+    label: <TSortOption trans_part={SortOptions.created_desc} />,
+  },
+  {
+    data: SortOptions.created_asc,
+    label: <TSortOption trans_part={SortOptions.created_asc} />,
+  },
+  {
+    data: SortOptions.size_desc,
+    label: <TSortOption trans_part={SortOptions.size_desc} />,
+  },
+  {
+    data: SortOptions.size_asc,
+    label: <TSortOption trans_part={SortOptions.size_asc} />,
+  },
+];
+
 function getList(
  path: string,
-  includeFiles: boolean = true,
+  includeFiles: boolean,
+  includeFolders: boolean = true,
+  includeExt: string[] | null = null,
+  includeHidden: boolean = false,
+  orderBy: SortOptions = SortOptions.name_desc,
+  filterFor: RegExp | ((file: File) => boolean) | null = null,
+  pageNumber: number = 1,
+  max: number = 1000,
 ): Promise<{ result: FileListing | string; success: boolean }> {
-  return window.DeckyPluginLoader.callServerMethod('filepicker_ls', { path, include_files: includeFiles });
+  return window.DeckyPluginLoader.callServerMethod('filepicker_ls', {
+    path,
+    include_files: includeFiles,
+    include_folders: includeFolders,
+    include_ext: includeExt ? includeExt : [],
+    include_hidden: includeHidden,
+    order_by: orderBy,
+    filter_for: filterFor,
+    page: pageNumber,
+    max: max,
+  });
 }

 const iconStyles = {
@@ -44,126 +121,240 @@ const iconStyles = {
 const FilePicker: FunctionComponent<FilePickerProps> = ({
  startPath,
  includeFiles = true,
-  regex,
+  filter = undefined,
+  includeFolders = true,
+  validFileExtensions = undefined,
+  allowAllFiles = true,
+  defaultHidden = false, // false by default makes sense for most users
+  max = 1000,
  onSubmit,
  closeModal,
 }) => {
  const { t } = useTranslation();
-  if (startPath.endsWith('/')) startPath = startPath.substring(0, startPath.length - 1); // remove trailing path
+
+  if (startPath !== '/' && startPath.endsWith('/')) startPath = startPath.substring(0, startPath.length - 1); // remove trailing path
  const [path, setPath] = useState<string>(startPath);
-  const [listing, setListing] = useState<FileListing>({ files: [], realpath: path });
-  const [error, setError] = useState<string | null>(null);
+  const [listing, setListing] = useState<FileListing>({ files: [], realpath: path, total: 0 });
+  const [files, setFiles] = useState<File[]>([]);
+  const [error, setError] = useState<FileErrorTypes>(FileErrorTypes.None);
+  const [rawError, setRawError] = useState<string | null>(null);
+  const [page, setPage] = useState<number>(1);
  const [loading, setLoading] = useState<boolean>(true);
+  const [showHidden, setShowHidden] = useState<boolean>(defaultHidden);
+  const [sort, setSort] = useState<SortOptions>(SortOptions.name_desc);
+  const [selectedExts, setSelectedExts] = useState<string[] | undefined>(validFileExtensions);
+
+  const validExtsOptions = useMemo(() => {
+    let validExt: { label: string; value: string }[] = [];
+    if (validFileExtensions) {
+      if (allowAllFiles) {
+        validExt.push({ label: t('FilePickerIndex.files.all_files'), value: 'all_files' });
+      }
+      validExt.push(...validFileExtensions.map((x) => ({ label: x, value: x })));
+    }
+    return validExt;
+  }, [validFileExtensions, allowAllFiles]);
+
+  function isSelectionValid(validExts: string[], selection: string[]) {
+    if (validExts.some((el) => selection.includes(el))) return true;
+    return false;
+  }
+
+  const handleExtsSelect = useCallback((val: any) => {
+    // unselect other options if "All Files" is checked
+    if (allowAllFiles && val.includes('all_files')) {
+      setSelectedExts(['all_files']);
+    } else if (validFileExtensions && isSelectionValid(validFileExtensions, val)) {
+      // If at least one extension is still selected, then assign this selection to the selected values
+      setSelectedExts(val);
+    } else {
+      // Else do nothing
+      setSelectedExts(selectedExts);
+    }
+  }, []);

  useEffect(() => {
    (async () => {
-      if (error) setError(null);
      setLoading(true);
-      const listing = await getList(path, includeFiles);
+      const listing = await getList(
+        path,
+        includeFiles,
+        includeFolders,
+        selectedExts,
+        showHidden,
+        sort,
+        filter,
+        page,
+        max,
+      );
      if (!listing.success) {
-        setListing({ files: [], realpath: path });
+        setListing({ files: [], realpath: path, total: 0 });
        setLoading(false);
-        setError(listing.result as string);
-        logger.error(listing.result);
+        const theError = listing.result as string;
+        switch (theError) {
+          case theError.match(/\[Errno\s2.*/i)?.input:
+          case theError.match(/\[WinError\s3.*/i)?.input:
+            setError(FileErrorTypes.FileNotFound);
+            break;
+          default:
+            setRawError(theError);
+            setError(FileErrorTypes.Unknown);
+            break;
+        }
+        logger.debug(theError);
        return;
+      } else {
+        setRawError(null);
+        setError(FileErrorTypes.None);
+        setFiles((listing.result as FileListing).files);
      }
      setLoading(false);
      setListing(listing.result as FileListing);
      logger.log('reloaded', path, listing);
    })();
-  }, [path]);
+  }, [error, path, includeFiles, includeFolders, showHidden, sort, selectedExts, page]);

  return (
-    <div className="deckyFilePicker">
-      <Focusable style={{ display: 'flex', flexDirection: 'row', paddingBottom: '10px' }}>
-        <DialogButton
-          style={{
-            minWidth: 'unset',
-            width: '40px',
-            flexGrow: '0',
-            borderRadius: 'unset',
-            margin: '0',
-            padding: '10px',
-          }}
-          onClick={() => {
-            const newPathArr = path.split('/');
-            newPathArr.pop();
-            let newPath = newPathArr.join('/');
-            if (newPath == '') newPath = '/';
-            setPath(newPath);
-          }}
-        >
-          <FaArrowUp />
-        </DialogButton>
-        <div style={{ flexGrow: '1', width: '100%' }}>
-          <TextField
-            value={path}
-            onChange={(e) => {
-              e.target.value && setPath(e.target.value);
-            }}
-            style={{ height: '100%' }}
-          />
-        </div>
-      </Focusable>
-      <Focusable style={{ display: 'flex', flexDirection: 'column', height: '60vh', overflow: 'scroll' }}>
-        {loading && <SteamSpinner style={{ height: '100%' }} />}
-        {!loading &&
-          listing.files
-            .filter((file) => (includeFiles || file.isdir) && (!regex || regex.test(file.name)))
-            .map((file) => {
-              let extension = file.realpath.split('.').pop() as string;
-              return (
-                <DialogButton
-                  style={{ borderRadius: 'unset', margin: '0', padding: '10px' }}
-                  onClick={() => {
-                    const fullPath = `${path}${path.endsWith('/') ? '' : '/'}${file.name}`;
-                    if (file.isdir) setPath(fullPath);
-                    else {
-                      onSubmit({ path: fullPath, realpath: file.realpath });
-                      closeModal?.();
-                    }
-                  }}
-                >
-                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
-                    {file.isdir ? (
-                      <FaFolder style={iconStyles} />
-                    ) : (
-                      <div style={iconStyles}>
-                        {file.realpath.includes('.') ? (
-                          <FileIcon {...defaultStyles[extension]} {...styleDefObj[extension]} extension={''} />
-                        ) : (
-                          <FileIcon />
-                        )}
-                      </div>
-                    )}
-                    <span
+    <>
+      <DialogBody className="deckyFilePicker">
+        <DialogControlsSection>
+          <Focusable flow-children="right" style={{ display: 'flex', marginBottom: '1em' }}>
+            <DialogButton
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: 'unset',
+                width: '40px',
+                borderRadius: 'unset',
+                margin: '0',
+                padding: '10px',
+              }}
+              onClick={() => {
+                const newPathArr = path.split('/');
+                const lastPath = newPathArr.pop();
+                //If I have a single / with spaces, pop the array twice
+                if (lastPath?.match(/^\/\s*$/) != null) newPathArr.pop();
+                let newPath = newPathArr.join('/');
+                if (newPath == '') newPath = '/';
+                setPath(newPath);
+              }}
+            >
+              <FaArrowUp />
+            </DialogButton>
+            <div style={{ width: '100%' }}>
+              <TextField
+                value={path}
+                onChange={(e) => {
+                  e.target.value && setPath(e.target.value);
+                }}
+                style={{ height: '100%' }}
+              />
+            </div>
+          </Focusable>
+          <ControlsList alignItems="center" spacing="standard">
+            <ToggleField
+              highlightOnFocus={false}
+              label={t('FilePickerIndex.files.show_hidden')}
+              bottomSeparator="none"
+              checked={showHidden}
+              onChange={() => setShowHidden((x) => !x)}
+            />
+            <Dropdown rgOptions={sortOptions} selectedOption={sort} onChange={(x) => setSort(x.data)} />
+            {validFileExtensions && (
+              <DropdownMultiselect
+                label={t('FilePickerIndex.files.file_type')}
+                items={validExtsOptions}
+                selected={selectedExts ? selectedExts : []}
+                onSelect={handleExtsSelect}
+              />
+            )}
+          </ControlsList>
+        </DialogControlsSection>
+        <DialogControlsSection style={{ marginTop: '1em' }}>
+          <Focusable
+            style={{ display: 'flex', gap: '.25em', flexDirection: 'column', height: '60vh', overflow: 'scroll' }}
+          >
+            {loading && error === FileErrorTypes.None && <SteamSpinner style={{ height: '100%' }} />}
+            {!loading &&
+              error === FileErrorTypes.None &&
+              files.map((file) => {
+                const extension = file.realpath.split('.').pop() as string;
+                return (
+                  <DialogButton
+                    key={`${file.realpath}${file.name}`}
+                    style={{ borderRadius: 'unset', margin: '0', padding: '10px' }}
+                    onClick={() => {
+                      const fullPath = `${path}${path.endsWith('/') ? '' : '/'}${file.name}`;
+                      if (file.isdir) setPath(fullPath);
+                      else {
+                        onSubmit({ path: fullPath, realpath: file.realpath });
+                        closeModal?.();
+                      }
+                    }}
+                  >
+                    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
+                      {file.isdir ? (
+                        <FaFolder style={iconStyles} />
+                      ) : (
+                        <div style={iconStyles}>
+                          {file.realpath.includes('.') ? (
+                            <FileIcon {...defaultStyles[extension]} {...styleDefObj[extension]} extension={''} />
+                          ) : (
+                            <FileIcon />
+                          )}
+                        </div>
+                      )}
+                      <Marquee>{file.name}</Marquee>
+                    </div>
+                    <div
                      style={{
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
+                        display: 'flex',
+                        opacity: 0.5,
+                        fontSize: '.6em',
                        textAlign: 'left',
+                        lineHeight: 1,
+                        marginTop: '.5em',
                      }}
                    >
-                      {file.name}
-                    </span>
-                  </div>
-                </DialogButton>
-              );
-            })}
-        {error}
-      </Focusable>
+                      {file.isdir ? t('FilePickerIndex.folder.label') : filesize(file.size, { standard: 'iec' })}
+                      <span style={{ marginLeft: 'auto' }}>{new Date(file.modified * 1000).toLocaleString()}</span>
+                    </div>
+                  </DialogButton>
+                );
+              })}
+            {error !== FileErrorTypes.None && <FilePickerError error={error} rawError={rawError ? rawError : ''} />}
+          </Focusable>
+        </DialogControlsSection>
+      </DialogBody>
      {!loading && !error && !includeFiles && (
-        <DialogButton
-          className="Primary"
-          style={{ marginTop: '10px', alignSelf: 'flex-end' }}
-          onClick={() => {
-            onSubmit({ path, realpath: listing.realpath });
-            closeModal?.();
-          }}
-        >
-          {t('FilePickerIndex.folder.select')}
-        </DialogButton>
+        <DialogFooter>
+          <DialogButton
+            className="Primary"
+            style={{ marginTop: '10px', alignSelf: 'flex-end' }}
+            onClick={() => {
+              onSubmit({ path, realpath: listing.realpath });
+              closeModal?.();
+            }}
+          >
+            {t('FilePickerIndex.folder.select')}
+          </DialogButton>
+        </DialogFooter>
      )}
-    </div>
+      {page * max < listing.total && (
+        <DialogFooter>
+          <DialogButton
+            className="Primary"
+            style={{ marginTop: '10px', alignSelf: 'flex-end' }}
+            onClick={() => {
+              setPage(page + 1);
+            }}
+          >
+            {t('FilePickerIndex.folder.show_more')}
+          </DialogButton>
+        </DialogFooter>
+      )}
+    </>
  );
 };

@@ -13,26 +13,24 @@ import { useTranslation } from 'react-i18next';
 import { FaFileArchive, FaLink, FaReact, FaSteamSymbol, FaTerminal } from 'react-icons/fa';

 import { setShouldConnectToReactDevTools, setShowValveInternal } from '../../../../developer';
+import Logger from '../../../../logger';
 import { installFromURL } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
+import { getSetting } from '../../../../utils/settings';
 import RemoteDebuggingSettings from '../general/RemoteDebugging';

-const installFromZip = () => {
-  window.DeckyPluginLoader.openFilePicker('/home/deck', true).then((val) => {
+const logger = new Logger('DeveloperIndex');
+
+const installFromZip = async () => {
+  const path = await getSetting<string>('user_info.user_home', '');
+  if (path === '') {
+    logger.error('The default path has not been found!');
+    return;
+  }
+  window.DeckyPluginLoader.openFilePicker(path, true, undefined, true, ['zip', 'rar'], false, true).then((val) => {
    const url = `file://${val.path}`;
    console.log(`Installing plugin locally from ${url}`);
-
-    if (url.endsWith('.zip')) {
-      installFromURL(url);
-    } else {
-      window.DeckyPluginLoader.toaster.toast({
-        //title: t('SettingsDeveloperIndex.toast_zip.title'),
-        title: 'Decky',
-        //body: t('SettingsDeveloperIndex.toast_zip.body'),
-        body: 'Installation failed! Only ZIP files are supported.',
-        onClick: installFromZip,
-      });
-    }
+    installFromURL(url);
  });
 };

@@ -12,8 +12,9 @@ import {
 import { FC, lazy } from 'react';
 import { FaExclamationCircle, FaPlug } from 'react-icons/fa';

-import { DeckyState, DeckyStateContextProvider, useDeckyState } from './components/DeckyState';
+import { DeckyState, DeckyStateContextProvider, UserInfo, useDeckyState } from './components/DeckyState';
 import LegacyPlugin from './components/LegacyPlugin';
+import { File } from './components/modals/filepicker';
 import { deinitFilepickerPatches, initFilepickerPatches } from './components/modals/filepicker/patches';
 import MultiplePluginsInstallModal from './components/modals/MultiplePluginsInstallModal';
 import PluginInstallModal from './components/modals/PluginInstallModal';
@@ -31,7 +32,7 @@ import TabsHook from './tabs-hook';
 import OldTabsHook from './tabs-hook.old';
 import Toaster from './toaster';
 import { VerInfo, callUpdaterMethod } from './updater';
-import { getSetting } from './utils/settings';
+import { getSetting, setSetting } from './utils/settings';
 import TranslationHelper, { TranslationClass } from './utils/TranslationHelper';

 const StorePage = lazy(() => import('./components/store/Store'));
@@ -99,9 +100,17 @@ class PluginLoader extends Logger {

    initFilepickerPatches();

+    this.getUserInfo();
+
    this.updateVersion();
  }

+  public async getUserInfo() {
+    const userInfo = (await this.callServerMethod('get_user_info')).result as UserInfo;
+    setSetting('user_info.user_name', userInfo.username);
+    setSetting('user_info.user_home', userInfo.path);
+  }
+
  public async updateVersion() {
    const versionInfo = (await callUpdaterMethod('get_version')).result as VerInfo;
    this.deckyState.setVersionInfo(versionInfo);
@@ -268,6 +277,7 @@ class PluginLoader extends Logger {
        Authentication: window.deckyAuthToken,
      },
    });
+
    if (res.ok) {
      try {
        let plugin_export = await eval(await res.text());
@@ -352,7 +362,12 @@ class PluginLoader extends Logger {
  openFilePicker(
    startPath: string,
    includeFiles?: boolean,
-    regex?: RegExp,
+    filter?: RegExp | ((file: File) => boolean),
+    includeFolders?: boolean,
+    extensions?: string[],
+    showHiddenFiles?: boolean,
+    allowAllFiles?: boolean,
+    max?: number,
  ): Promise<{ path: string; realpath: string }> {
    return new Promise((resolve, reject) => {
      const Content = ({ closeModal }: { closeModal?: () => void }) => (
@@ -367,9 +382,14 @@ class PluginLoader extends Logger {
            <FilePicker
              startPath={startPath}
              includeFiles={includeFiles}
-              regex={regex}
+              includeFolders={includeFolders}
+              filter={filter}
+              validFileExtensions={extensions}
+              allowAllFiles={allowAllFiles}
+              defaultHidden={showHiddenFiles}
              onSubmit={resolve}
              closeModal={closeModal}
+              max={max}
            />
          </WithSuspense>
        </ModalRoot>