Panel code refactor and TS6 compatibility

.vscode/settings.json

@@ -4,4 +4,7 @@
     "prettier.useEditorConfig": true,
     "prettier.embeddedLanguageFormatting": "off",
     "stylelint.configBasedir": "./panel",
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

panel/eslint.config.js

@@ -18,7 +18,6 @@ export default defineConfig([
         ignores: ["*.min.js"],
         rules: {
             "arrow-body-style": ["error", "as-needed"],
-            curly: ["error", "all"],
             eqeqeq: ["error", "always"],
             "no-console": ["warn"],
             "no-else-return": ["error"],
@@ -68,4 +67,9 @@ export default defineConfig([
         },
     },
     eslintConfigPrettier,
+    {
+        rules: {
+            curly: ["error", "all"],
+        },
+    },
 ]);

panel/package.json

@@ -67,8 +67,8 @@
         "stylelint-config-standard-scss": "^17.0.0",
         "stylelint-order": "^8.1.1",
         "stylelint-scss": "^7.0.0",
-        "typescript": "^5.9.3",
-        "typescript-eslint": "^8.58.0"
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.59.4"
     },
-    "packageManager": "pnpm@10.30.2+sha512.36cdc707e7b7940a988c9c1ecf88d084f8514b5c3f085f53a2e244c2921d3b2545bc20dd4ebe1fc245feec463bb298aecea7a63ed1f7680b877dc6379d8d0cb4"
+    "packageManager": "pnpm@11.2.2+sha512.36e6621fad506178936455e70247b8808ef4ec25797a9f437a93281a020484e2607f6a469a22e982987c3dbb8866e3071514ab10a4a1749e06edcd1ec118436f"
 }

panel/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@parcel/watcher': false
+  esbuild: false

panel/src/ts/app.ts

@@ -11,23 +11,34 @@ import { Tooltips } from "./components/tooltips";
 
 import { Backups } from "./components/views/backups";
 import { Dashboard } from "./components/views/dashboard";
+import type { DateInputOptions } from "./components/inputs/date-input";
+import type { DurationInputOptions } from "./components/inputs/duration-input";
+import type { EditorInputOptions } from "./components/inputs/editor-input";
 import { Login } from "./components/views/login";
 import { Pages } from "./components/views/pages";
 import { Plugins } from "./components/views/plugins";
+import type { SelectInputOptions } from "./components/inputs/select-input";
 import { Statistics } from "./components/views/statistics";
+import type { TagsInputOptions } from "./components/inputs/tags-input";
 import { Updates } from "./components/views/updates";
 
+interface BackupsConfig {
+    labels: {
+        now: string;
+    };
+}
+
 interface AppConfig {
     siteUri: string;
     baseUri: string;
-    csrfToken?: string;
+    csrfToken: string;
     colorScheme?: string;
-    DateInput?: any;
-    DurationInput?: any;
-    EditorInput?: any;
-    SelectInput?: any;
-    TagsInput?: any;
-    Backups?: any;
+    DateInput?: DateInputOptions;
+    DurationInput?: DurationInputOptions;
+    EditorInput?: EditorInputOptions;
+    SelectInput?: SelectInputOptions;
+    TagsInput?: TagsInputOptions;
+    Backups?: BackupsConfig;
 }
 
 interface Component {
@@ -42,6 +53,7 @@ class App {
     config: AppConfig = {
         siteUri: "/",
         baseUri: "/",
+        csrfToken: "",
     };
 
     modals: Modals = {};
@@ -80,15 +92,10 @@ class App {
     }
 
     loadConfig(config: AppConfig) {
-        Object.assign(this.config, config);
+        this.config = { ...this.config, ...config };
     }
 
-    loadComponent(
-        component: Component,
-        options: ComponentConfig = {
-            globalAlias: undefined,
-        },
-    ) {
+    loadComponent(component: Component, options: ComponentConfig = {}) {
         const instance = new component(this);
         const { globalAlias } = options;
         if (globalAlias) {

panel/src/ts/components/color-scheme.ts

@@ -22,6 +22,8 @@ export class ColorScheme {
             document.documentElement.classList.add(`color-scheme-${colorScheme}`);
         };
 
+        const darkColorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
         const setPreferredColorScheme = (change = false) => {
             const cookies = getCookies();
             const cookieName = "formwork_preferred_color_scheme";
@@ -30,7 +32,7 @@ export class ColorScheme {
 
             if (window.matchMedia("(prefers-color-scheme: light)").matches) {
                 colorScheme = "light";
-            } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            } else if (darkColorSchemeMediaQuery.matches) {
                 colorScheme = "dark";
             }
 
@@ -49,7 +51,7 @@ export class ColorScheme {
 
         window.addEventListener("beforeunload", () => setPreferredColorScheme());
         window.addEventListener("pagehide", () => setPreferredColorScheme());
-        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => setPreferredColorScheme(true));
+        darkColorSchemeMediaQuery.addEventListener("change", () => setPreferredColorScheme(true));
 
         if (getSupportedColorSchemes() === "light dark") {
             setPreferredColorScheme(true);

panel/src/ts/components/dropdowns.ts

@@ -11,7 +11,7 @@ export class Dropdowns {
                 const button = (event.target as HTMLDivElement).closest(".dropdown-button") as HTMLButtonElement;
 
                 if (button) {
-                    const dropdown = document.getElementById(button.dataset.dropdown as string) as HTMLElement;
+                    const dropdown = document.getElementById(button.dataset.dropdown ?? "") as HTMLElement;
                     const isVisible = getComputedStyle(dropdown).display !== "none";
                     event.preventDefault();
 

panel/src/ts/components/files.ts

@@ -26,7 +26,7 @@ export class Files {
                 renameFileModal.onOpen((modal, trigger) => {
                     if (trigger) {
                         const input = $('[id="renameFileModal.filename"]', modal.element) as HTMLInputElement;
-                        input.value = trigger.dataset.filename as string;
+                        input.value = trigger.dataset.filename ?? "";
                         input.setSelectionRange(0, input.value.lastIndexOf("."));
                     }
                 });
@@ -38,19 +38,19 @@ export class Files {
                 replaceFileCommand.addEventListener("click", () => {
                     const form = document.createElement("form");
                     form.hidden = true;
-                    form.action = replaceFileCommand.dataset.action as string;
+                    form.action = replaceFileCommand.dataset.action ?? "";
                     form.method = "post";
                     form.enctype = "multipart/form-data";
 
                     const fileInput = document.createElement("input");
                     fileInput.name = "file";
                     fileInput.type = "file";
-                    fileInput.accept = replaceFileCommand.dataset.extension as string;
+                    fileInput.accept = replaceFileCommand.dataset.extension ?? "";
                     form.appendChild(fileInput);
 
                     const csrfInput = document.createElement("input");
                     csrfInput.name = "csrf-token";
-                    csrfInput.value = app.config.csrfToken as string;
+                    csrfInput.value = app.config.csrfToken;
                     form.appendChild(csrfInput);
 
                     fileInput.click();