add searchTableSize limit

src/stores/settings/appearance.js

@@ -3,6 +3,15 @@ import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
+import {
+    APP_FONT_DEFAULT_KEY,
+    APP_FONT_FAMILIES,
+    SEARCH_LIMIT_MAX,
+    SEARCH_LIMIT_MIN,
+    TABLE_MAX_SIZE_MAX,
+    TABLE_MAX_SIZE_MIN,
+    THEME_CONFIG
+} from '../../shared/constants';
 import {
     HueToHex,
     applyAppFontFamily,
@@ -11,18 +20,12 @@ import {
     getThemeMode,
     updateTrustColorClasses
 } from '../../shared/utils/base/ui';
-import {
-    APP_FONT_DEFAULT_KEY,
-    APP_FONT_FAMILIES,
-    THEME_CONFIG
-} from '../../shared/constants';
 import { database } from '../../service/database';
 import { getNameColour } from '../../shared/utils';
 import { languageCodes } from '../../localization';
 import { loadLocalizedStrings } from '../../plugin';
 import { useFeedStore } from '../feed';
 import { useGameLogStore } from '../gameLog';
-import { useModalStore } from '../modal';
 import { useUiStore } from '../ui';
 import { useUserStore } from '../user';
 import { useVrStore } from '../vr';
@@ -42,9 +45,7 @@ export const useAppearanceSettingsStore = defineStore(
         const userStore = useUserStore();
         const router = useRouter();
         const uiStore = useUiStore();
-        const modalStore = useModalStore();
-
-        const { t, locale } = useI18n();
+        const { locale } = useI18n();
 
         const MAX_TABLE_PAGE_SIZE = 1000;
         const DEFAULT_TABLE_PAGE_SIZES = [10, 15, 20, 25, 50, 100];
@@ -106,6 +107,11 @@ export const useAppearanceSettingsStore = defineStore(
 
         const isDataTableStriped = ref(false);
         const showPointerOnHover = ref(false);
+        const tableLimitsDialog = ref({
+            visible: false,
+            maxTableSize: 500,
+            searchLimit: 5000
+        });
 
         const clampInt = (value, min, max) => {
             const n = parseInt(value, 10);
@@ -864,36 +870,67 @@ export const useAppearanceSettingsStore = defineStore(
             }
         }
 
-        function promptMaxTableSizeDialog() {
-            modalStore
-                .prompt({
-                    title: t('prompt.change_table_size.header'),
-                    description: t('prompt.change_table_size.description'),
-                    confirmText: t('prompt.change_table_size.save'),
-                    cancelText: t('prompt.change_table_size.cancel'),
-                    inputValue: vrcxStore.maxTableSize.toString(),
-                    pattern: /\d+$/,
-                    errorMessage: t('prompt.change_table_size.input_error')
-                })
-                .then(async ({ ok, value }) => {
-                    if (!ok) return;
-                    if (value) {
-                        // TODO
-                        let processedValue = Number(value);
-                        if (processedValue > 10000) {
-                            processedValue = 10000;
-                        }
-                        vrcxStore.maxTableSize = processedValue;
-                        await configRepository.setString(
-                            'VRCX_maxTableSize',
-                            vrcxStore.maxTableSize.toString()
-                        );
-                        database.setMaxTableSize(vrcxStore.maxTableSize);
-                        feedStore.feedTableLookup();
-                        gameLogStore.gameLogTableLookup();
-                    }
-                })
-                .catch(() => {});
+        const clampLimit = (value, min, max) => {
+            const n = Number.parseInt(value, 10);
+            if (!Number.isFinite(n)) {
+                return null;
+            }
+            if (n < min || n > max) {
+                return null;
+            }
+            return n;
+        };
+
+        function showTableLimitsDialog() {
+            tableLimitsDialog.value.maxTableSize = Number(
+                vrcxStore.maxTableSize ?? 500
+            );
+            tableLimitsDialog.value.searchLimit = Number(
+                vrcxStore.searchLimit ?? 5000
+            );
+            tableLimitsDialog.value.visible = true;
+        }
+
+        function closeTableLimitsDialog() {
+            tableLimitsDialog.value.visible = false;
+        }
+
+        async function saveTableLimitsDialog() {
+            const nextMaxTableSize = clampLimit(
+                tableLimitsDialog.value.maxTableSize,
+                TABLE_MAX_SIZE_MIN,
+                TABLE_MAX_SIZE_MAX
+            );
+            if (nextMaxTableSize === null) {
+                return;
+            }
+
+            const nextSearchLimit = clampLimit(
+                tableLimitsDialog.value.searchLimit,
+                SEARCH_LIMIT_MIN,
+                SEARCH_LIMIT_MAX
+            );
+            if (nextSearchLimit === null) {
+                return;
+            }
+
+            vrcxStore.maxTableSize = nextMaxTableSize;
+            await configRepository.setString(
+                'VRCX_maxTableSize',
+                vrcxStore.maxTableSize.toString()
+            );
+            database.setMaxTableSize(vrcxStore.maxTableSize);
+
+            vrcxStore.searchLimit = nextSearchLimit;
+            await configRepository.setInt(
+                'VRCX_searchLimit',
+                vrcxStore.searchLimit
+            );
+            database.setSearchTableSize(vrcxStore.searchLimit);
+
+            feedStore.feedTableLookup();
+            gameLogStore.gameLogTableLookup();
+            tableLimitsDialog.value.visible = false;
         }
 
         async function tryInitUserColours() {
@@ -952,6 +989,11 @@ export const useAppearanceSettingsStore = defineStore(
             isNavCollapsed,
             isDataTableStriped,
             showPointerOnHover,
+            tableLimitsDialog,
+            TABLE_MAX_SIZE_MIN,
+            TABLE_MAX_SIZE_MAX,
+            SEARCH_LIMIT_MIN,
+            SEARCH_LIMIT_MAX,
 
             setAppLanguage,
             setDisplayVRCPlusIconsAsAvatar,
@@ -986,7 +1028,9 @@ export const useAppearanceSettingsStore = defineStore(
             userColourInit,
             applyUserTrustLevel,
             changeAppLanguage,
-            promptMaxTableSizeDialog,
+            showTableLimitsDialog,
+            closeTableLimitsDialog,
+            saveTableLimitsDialog,
             setNotificationIconDot,
             applyTableDensity,
             setNavCollapsed,