Extract templates, replace pagination format

public/script.js

@@ -1426,30 +1426,26 @@ function getBackBlock() {
     return template;
 }
 
-function getEmptyBlock() {
+async function getEmptyBlock() {
     const icons = ['fa-dragon', 'fa-otter', 'fa-kiwi-bird', 'fa-crow', 'fa-frog'];
     const texts = [t`Here be dragons`, t`Otterly empty`, t`Kiwibunga`, t`Pump-a-Rum`, t`Croak it`];
     const roll = new Date().getMinutes() % icons.length;
-    const emptyBlock = `
+    const params = {
-    <div class="text_block empty_block">
+        text: texts[roll],
-        <i class="fa-solid ${icons[roll]} fa-4x"></i>
+        icon: icons[roll],
-        <h1>${texts[roll]}</h1>
+    };
-        <p>` + t`There are no items to display.` + `</p>
+    const emptyBlock = await renderTemplateAsync('emptyBlock', params);
-    </div>`;
     return $(emptyBlock);
 }
 
 /**
  * @param {number} hidden Number of hidden characters
  */
-function getHiddenBlock(hidden) {
+async function getHiddenBlock(hidden) {
-    const hiddenBlock = `
+    const params = {
-    <div class="text_block hidden_block">
+        text: (hidden > 1 ? t`${hidden} characters hidden.` : t`${hidden} character hidden.`),
-        <small>
+    };
-            <p>` + (hidden > 1 ? t`${hidden} characters hidden.` : t`${hidden} character hidden.`) + `</p>
+    const hiddenBlock = await renderTemplateAsync('hiddenBlock', params);
-            <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Characters and groups hidden by filters or closed folders" title="Characters and groups hidden by filters or closed folders"></div>
-        </small>
-    </div>`;
     return $(hiddenBlock);
 }
 
@@ -1542,13 +1538,14 @@ export async function printCharacters(fullRefresh = false) {
         nextText: '>',
         formatNavigator: PAGINATION_TEMPLATE,
         showNavigator: true,
-        callback: function (/** @type {Entity[]} */ data) {
+        callback: async function (/** @type {Entity[]} */ data) {
             $(listId).empty();
             if (power_user.bogus_folders && isBogusFolderOpen()) {
                 $(listId).append(getBackBlock());
             }
             if (!data.length) {
-                $(listId).append(getEmptyBlock());
+                const emptyBlock = await getEmptyBlock();
+                $(listId).append(emptyBlock);
             }
             let displayCount = 0;
             for (const i of data) {
@@ -1569,7 +1566,8 @@ export async function printCharacters(fullRefresh = false) {
 
             const hidden = (characters.length + groups.length) - displayCount;
             if (hidden > 0 && entitiesFilter.hasAnyFilter()) {
-                $(listId).append(getHiddenBlock(hidden));
+                const hiddenBlock = await getHiddenBlock(hidden);
+                $(listId).append(hiddenBlock);
             }
             localizePagination($('#rm_print_characters_pagination'));
 

public/scripts/templates/emptyBlock.html

@@ -0,0 +1,7 @@
+<div class="text_block empty_block">
+    <i class="fa-solid {{icon}} fa-4x"></i>
+    <h1>{{text}}</h1>
+    <p data-i18n="There are no items to display.">
+        There are no items to display.
+    </p>
+</div>

public/scripts/templates/hiddenBlock.html

@@ -0,0 +1,6 @@
+<div class="text_block hidden_block">
+    <small>
+        <p>{{text}}</p>
+        <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Characters and groups hidden by filters or closed folders" title="Characters and groups hidden by filters or closed folders"></div>
+    </small>
+</div>

public/scripts/textgen-models.js

@@ -5,9 +5,9 @@ import { textgenerationwebui_settings as textgen_settings, textgen_types } from
 import { tokenizers } from './tokenizers.js';
 import { renderTemplateAsync } from './templates.js';
 import { POPUP_TYPE, callGenericPopup } from './popup.js';
-import { t, translate } from './i18n.js';
+import { t } from './i18n.js';
 import { accountStorage } from './util/AccountStorage.js';
-import { localizePagination } from './utils.js';
+import { localizePagination, PAGINATION_TEMPLATE } from './utils.js';
 
 let mancerModels = [];
 let togetherModels = [];
@@ -362,18 +362,7 @@ export async function loadFeatherlessModels(data) {
             showSizeChanger: false,
             prevText: '<',
             nextText: '>',
-            formatNavigator: function (currentPage, totalPage) {
+            formatNavigator: PAGINATION_TEMPLATE,
-                let translated_of;
-                try {
-                    translated_of = translate('pagination_of');
-                    if (translated_of == 'pagination_of') {
-                        translated_of = 'of';
-                    }
-                } catch (e) {
-                    translated_of = 'of';
-                }
-                return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ` ${translated_of} ` + totalPage * perPage;
-            },
             showNavigator: true,
             callback: function (modelsOnPage, pagination) {
                 modelCardBlock.innerHTML = '';

public/scripts/utils.js

@@ -18,21 +18,8 @@ import { getCurrentLocale, t, translate } from './i18n.js';
 
 /**
  * Function returning pagination status string template.
- * @type {function}
  */
-export const PAGINATION_TEMPLATE = function() {
+export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>';
-    let translated_of;
-    try {
-        translated_of = translate('pagination_of');
-        if (translated_of == 'pagination_of') {
-            translated_of = 'of';
-        }
-    } catch (e) {
-        console.error(e);
-        translated_of = 'of';
-    }
-    return `<%= rangeStart %>-<%= rangeEnd %> ${translated_of} <%= totalNumber %>`;
-};
 
 export const localizePagination = function(container) {
     let options = container.find('option');