build: update to node 22 and pnpm (#3616)

This commit brings the project to support node 22 which became LTS and
fixes broken builds with typescript 5.7+ until vue-tsc is updated and
replaces npm with pnpm.

- Update tsconfig for node 22
- Pin typescript to 5.6.x to not break vue-tsc
- Replace npm with pnpm (corepack recommended)
- Update Makefile and main workflow for pnpm
- Migrate to eslint 9 flat config
- Fix broken imports
- Exclude non-TS vue files for vue-tsc

frontend/src/components/Shell.vue

@@ -50,7 +50,7 @@ import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 
 import { commands } from "@/api";
-import { throttle } from "lodash";
+import { throttle } from "lodash-es";
 import { theme } from "@/utils/constants";
 
 export default {

frontend/src/components/files/ExtendedImage.vue

@@ -14,15 +14,15 @@
   </div>
 </template>
 <script setup lang="ts">
-import throttle from "lodash/throttle";
+import { throttle } from "lodash-es";
 import UTIF from "utif";
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 interface IProps {
   src: string;
-  moveDisabledTime: number;
-  classList: any[];
-  zoomStep: number;
+  moveDisabledTime?: number;
+  classList?: any[];
+  zoomStep?: number;
 }
 
 const props = withDefaults(defineProps<IProps>(), {

frontend/src/components/files/VideoPlayer.vue

@@ -120,7 +120,7 @@ const subLabel = (subUrl: string) => {
   let url: URL;
   try {
     url = new URL(subUrl);
-  } catch (_) {
+  } catch {
     // treat it as a relative url
     // we only need this for filename
     url = new URL(subUrl, window.location.origin);

frontend/src/components/settings/Themes.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { SelectHTMLAttributes } from "vue";
+import type { SelectHTMLAttributes } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();

frontend/src/main.ts

@@ -4,7 +4,7 @@ import VueNumberInput from "@chenfengyuan/vue-number-input";
 import VueLazyload from "vue-lazyload";
 import { createVfm } from "vue-final-modal";
 import Toast, { POSITION, useToast } from "vue-toastification";
-import {
+import type {
   ToastOptions,
   PluginOptions,
 } from "vue-toastification/dist/types/types";

frontend/src/router/index.ts

@@ -1,4 +1,5 @@
-import { RouteLocation, createRouter, createWebHistory } from "vue-router";
+import type { RouteLocation } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import Login from "@/views/Login.vue";
 import Layout from "@/views/Layout.vue";
 import Files from "@/views/Files.vue";

frontend/src/stores/index.ts

@@ -1,6 +1,6 @@
 import { createPinia as _createPinia } from "pinia";
 import { markRaw } from "vue";
-import { Router } from "vue-router";
+import type { Router } from "vue-router";
 
 export default function createPinia(router: Router) {
   const pinia = _createPinia();

frontend/src/stores/upload.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { useFileStore } from "./file";
 import { files as api } from "@/api";
-import throttle from "lodash/throttle";
+import { throttle } from "lodash-es";
 import buttons from "@/utils/buttons";
 
 // TODO: make this into a user setting

frontend/src/utils/auth.ts

@@ -1,6 +1,7 @@
 import { useAuthStore } from "@/stores/auth";
 import router from "@/router";
-import { JwtPayload, jwtDecode } from "jwt-decode";
+import type { JwtPayload } from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 import { baseURL, noAuth } from "./constants";
 import { StatusError } from "@/api/utils";
 

frontend/src/views/files/FileListing.vue

@@ -285,7 +285,7 @@ import { users, files as api } from "@/api";
 import { enableExec } from "@/utils/constants";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
-import throttle from "lodash/throttle";
+import { throttle } from "lodash-es";
 import { Base64 } from "js-base64";
 
 import HeaderBar from "@/components/header/HeaderBar.vue";

frontend/src/views/files/Preview.vue

@@ -168,7 +168,7 @@ import { files as api } from "@/api";
 import { createURL } from "@/api/utils";
 import { resizePreview } from "@/utils/constants";
 import url from "@/utils/url";
-import throttle from "lodash/throttle";
+import { throttle } from "lodash-es";
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import ExtendedImage from "@/components/files/ExtendedImage.vue";

frontend/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />