feat: preline select box for table pagination

package.json

@@ -37,8 +37,10 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
     "@preline/datatable": "^3.0.0",
     "@preline/dropdown": "^3.0.1",
+    "@preline/select": "^3.0.0",
     "@prisma/client": "^6.6.0",
     "@tailwindcss/forms": "^0.5.10",
     "datatables.net-dt": "^2.2.2",

src/client/public/css/main.css

@@ -76,6 +76,31 @@
     @apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap;
 }
 
+/* Select Box */
+
+.cj-select-toggle {
+    @apply form-select hs-select-disabled:pointer-events-none
+        hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full
+        cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm
+        text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
+        before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700
+        dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800;
+}
+
+.cj-select-dropdown {
+    @apply mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200
+        rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2
+        [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100
+        [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700
+        dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900
+        dark:border-neutral-700;
+}
+
+.cj-select-option {
+    @apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100
+        rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900
+        dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800;
+}
 
 /* Layout Sidebar */
 

src/client/typescript/guild/feeds.ts

@@ -1,11 +1,15 @@
-import "preline";
 import $ from "jquery";
 import DataTable from "datatables.net";
 import HSDropdown from "@preline/dropdown";
+import HSSelect, { ISelectOptions } from "@preline/select";
 import HSDataTable, { IDataTableOptions } from "@preline/datatable";
 import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
+import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
 import { formatTimestamp } from "../main";
 
+// #region DataTable
+//
+
 // Fix dependency bugs with preline
 (window as any).DataTable = DataTable;
 (window as any).$hsDataTableCollection = [];
@@ -178,4 +182,41 @@ const tableOptions: IDataTableOptions = {
 const table: HSDataTable = new HSDataTable(
     $("#table").get(0),
     tableOptions
-);
+);
+
+// #endregion
+
+// #region Page Size Select Box
+// https://preline.co/plugins/html/advanced-select.html
+
+(window as any).$hsSelectCollection = [];
+(window as any)["FloatingUIDOM"] = {
+    computePosition: computePosition,
+    autoUpdate: autoUpdate,
+    offset: offset
+};
+
+const pageSelectOptions: ISelectOptions = {
+    toggleTag: "<button type=\"button\" aria-expanded=\"false\"></button>",
+    optionTemplate: `
+        <div class=\"flex justify-between items-center w-full\">
+            <span data-title></span>
+            <span class=\"hidden hs-selected:block\">
+                <svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>
+            </span>
+        </div>`,
+    toggleClasses: "cj-select-toggle",
+    optionClasses: "cj-select-option",
+    dropdownClasses: `cj-select-dropdown`,
+    dropdownSpace: 5,
+    dropdownScope: "window",
+    dropdownPlacement: null,
+    dropdownVerticalFixedPlacement: null
+};
+
+const pageSizeSelect: HSSelect = new HSSelect(
+    $("#selectPageSize-js").get(0),
+    pageSelectOptions
+);
+
+// #endregion

src/client/views/guild/feeds.ejs

@@ -103,7 +103,13 @@
 
                      <div class="cj-table-footer">
                         <div class="max-w-sm space-y-3">
-                            select
+                            <select id="selectPageSize-js" data-hs-datatable-page-entities="">
+                                <option value="1">1</option>
+                                <option value="2">2</option>
+                                <option value="3">3</option>
+                                <option value="4">4</option>
+                                <option value="5">5</option>
+                            </select>
                         </div>
                         <div class="sm:inline-flex items-center gap-x-2" data-hs-datatable-info="">
                             <p class="text-sm text-gray dark:text-neutral-400">