Merge #710: update dependencies and fix type errors

c884ccd update dependencies and fix type errors (Graeme Byrne)

Pull request description:

  ## Summary

  This PR updates project dependencies to their latest compatible versions, ensuring that the project still builds and runs correctly. Care was taken to avoid versions that introduced breaking changes (e.g., Nuxt 3.17.4, which caused runtime errors).

  ## Changes

  - Updated `nuxt` and related dependencies to stable versions that do not break the project
  - Resolved type errors across the codebase introduced by dependency updates

ACKs for top commit:
  josecelano:
    ACK c884ccd

Tree-SHA512: e138e1cfc0e278d907b57dc053ca0b6f40ce58b1dd0aa0afe1f77469157e417e4ddd6abc7a17739a03a675cc925a19c8f631515ab801791892ef369f3d350a19

Author: josecelano

components/Markdown.vue

@@ -20,7 +20,8 @@ const sanitizedDescription = ref("");
 
 const options = {
   headerIds: false,
-  mangle: false
+  mangle: false,
+  async: true
 };
 
 const source = computed(() => props.source);
@@ -33,12 +34,12 @@ onMounted(() => {
   sanitizeDescription();
 });
 
-function convert_markdown_to_html (src: string) {
-  return marked(src, options);
+async function convert_markdown_to_html (src: string): Promise<string> {
+  return await marked(src, options);
 }
 
 async function sanitizeDescription () {
-  const html = convert_markdown_to_html(props.source);
+  const html = await convert_markdown_to_html(props.source); // await here
   sanitizedDescription.value = await sanitize(html);
 }
 </script>

components/Pagination.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col items-center justify-end flex-1 gap-3 md:flex-row sm:justify-between">
       <div class="flex items-center gap-3">
         <div>
-          <select :value="pageSize" class="px-2 py-1 bg-base-100" @change="(e) => updatePageSize(parseInt(e.target.value, 10))">
+          <select :value="pageSize" class="px-2 py-1 bg-base-100" @change="(e) => updatePageSize(parseInt((e.target as HTMLSelectElement).value, 10))">
             <option value="20">
               20
             </option>

components/authentication/AuthenticationForm.vue

@@ -62,7 +62,7 @@ async function login () {
         navigateTo("/torrents", { replace: true });
       }
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",

components/license/License.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-    <Markdown :source="file" class="prose-h1:text-center pt-2 pb-10 pb-5 px-40 max-w-none" />
+    <Markdown :source="file" class="prose-h1:text-center pt-2 pb-5 px-40 max-w-none" />
     </div>
 </template>
 <script setup lang="ts">

components/navigation/NavigationBar.vue

@@ -81,6 +81,10 @@ const user = useUser();
 
 const mobileCollapsed = ref(true);
 
+// Define the submitSearch function
+function submitSearch () {
+  // Add your search logic here
+}
 </script>
 
 <style scoped>

components/registration/RegistrationForm.vue

@@ -108,7 +108,7 @@ function signup () {
         text: "Your account was registered!"
       }, 4000); // 4s
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",

components/torrent/TorrentActionCard.vue

@@ -194,7 +194,7 @@ function deleteTorrent () {
     .then(() => {
       emit("deleted");
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",

components/torrent/TorrentCreationDateTab.vue

@@ -40,7 +40,10 @@ const props = defineProps({
   }
 });
 
-const formattedDateFromTimestamp = formatTimestamp(props.torrent.creation_date);
+const formattedDateFromTimestamp = (() => {
+  const result = formatTimestamp(props.torrent.creation_date);
+  return result instanceof Error ? "Invalid date" : result;
+})();
 
 </script>
 

components/torrent/TorrentDetails.vue

@@ -80,11 +80,11 @@ function getTorrentFromApi (infoHash: string) {
   loadingTorrent.value = true;
 
   rest.torrent.getTorrentInfo(infoHash)
-    .then((data) => {
+    .then((data: TorrentResponse) => {
       torrent.value = data;
       title.value = data.title;
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       loadingTorrent.value = false;
       notify({
         group: "error",

components/torrent/TorrentTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-full overflow-hidden rounded-lg border-base-content/20 rounded-2xl grow">
+  <div class="flex flex-col w-full overflow-hidden border-base-content/20 rounded-2xl grow">
     <div class="flex flex-col overflow-x-auto whitespace-nowrap">
       <table class="text-center table-auto bg-base-200">
         <thead>

components/user/ChangePasswordForm.vue

@@ -100,7 +100,7 @@ function changePassword (username: string) {
         text: "Your password was changed!"
       }, 4000); // 4s
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",

components/user/UserTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-full overflow-hidden rounded-lg border-base-content/20 rounded-2xl grow">
+  <div class="flex flex-col w-full overflow-hidden border-base-content/20 rounded-2xl grow">
     <div class="flex flex-col overflow-x-auto whitespace-nowrap">
       <table class="text-center table-auto bg-base-200 ">
         <thead>

composables/states.ts

@@ -6,15 +6,15 @@ import { useRuntimeConfig, useState } from "#imports";
 export const useRestApi = () => useState<Rest>("rest-api", () => new Rest(useRuntimeConfig().public.apiBase));
 export const useCategories = () => useState<Array<Category>>("categories", () => new Array<Category>());
 export const useTags = () => useState<Array<TorrentTag>>("tags", () => new Array<TorrentTag>());
-export const useSettings = () => useState<PublicSettings>("public-settings", () => null);
-export const useUser = () => useState<TokenResponse>("user", () => null);
+export const useSettings = (): Ref<PublicSettings | null> => useState<PublicSettings>("public-settings", (): PublicSettings | null => null);
+export const useUser = (): Ref<TokenResponse | null> => useState<TokenResponse>("user", (): TokenResponse | null => null);
 
 export function getSettings () {
   useRestApi().value.settings.getPublicSettings()
-    .then((publicSettings) => {
+    .then((publicSettings: PublicSettings) => {
       useSettings().value = publicSettings;
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",
@@ -25,10 +25,10 @@ export function getSettings () {
 
 export function getCategories () {
   useRestApi().value.category.getCategories()
-    .then((res) => {
+    .then((res: Category[]) => {
       useCategories().value = res;
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",
@@ -39,10 +39,10 @@ export function getCategories () {
 
 export function getTags () {
   useRestApi().value.tag.getTags()
-    .then((res) => {
+    .then((res: Category[]) => {
       useTags().value = res;
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",
@@ -57,11 +57,11 @@ export async function loginUser (login: string, password: string): Promise<boole
     login,
     password
   })
-    .then((user) => {
+    .then((user: TokenResponse) => {
       useUser().value = user;
       authenticated = true;
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",
@@ -83,10 +83,10 @@ export async function getUser () {
   }
 
   return await useRestApi().value.user.renewToken()
-    .then((user) => {
+    .then((user: TokenResponse) => {
       useUser().value = user;
     })
-    .catch((err) => {
+    .catch((err: Error) => {
       notify({
         group: "error",
         title: "Error",

cypress/e2e/contexts/category/specs/add.cy.ts

@@ -1,4 +1,4 @@
-import { RegistrationForm, random_user_registration_data } from "../../user/registration";
+import { type RegistrationForm, random_user_registration_data } from "../../user/registration";
 import { random_category_name } from "../fixtures";
 
 describe("The admin user", () => {

cypress/e2e/contexts/category/specs/delete.cy.ts

@@ -1,4 +1,4 @@
-import { RegistrationForm, random_user_registration_data } from "../../user/registration";
+import { type RegistrationForm, random_user_registration_data } from "../../user/registration";
 import { random_category_name } from "../fixtures";
 
 describe("The admin user", () => {

cypress/e2e/contexts/category/tasks.ts

@@ -1,6 +1,6 @@
 // Custom tasks for category context
 
-import { DatabaseConfig, DatabaseQuery, runDatabaseQuery } from "../../common/database";
+import { type DatabaseConfig, type DatabaseQuery, runDatabaseQuery } from "../../common/database";
 
 // Task to delete a category
 export const deleteCategory = async (name: string, db_config: DatabaseConfig): Promise<string> => {

cypress/e2e/contexts/tag/specs/add.cy.ts

@@ -1,4 +1,4 @@
-import { RegistrationForm, random_user_registration_data } from "../../user/registration";
+import { type RegistrationForm, random_user_registration_data } from "../../user/registration";
 import { randomTagName } from "../random_data";
 
 describe("The admin user", () => {

cypress/e2e/contexts/tag/specs/delete.cy.ts

@@ -1,4 +1,4 @@
-import { RegistrationForm, random_user_registration_data } from "../../user/registration";
+import { type RegistrationForm, random_user_registration_data } from "../../user/registration";
 import { randomTagName } from "../random_data";
 
 describe("The admin user", () => {

cypress/e2e/contexts/tag/tasks.ts

@@ -1,6 +1,6 @@
 // Custom tasks for tag context
 
-import { DatabaseConfig, DatabaseQuery, runDatabaseQuery } from "../../common/database";
+import { type DatabaseConfig, type DatabaseQuery, runDatabaseQuery } from "../../common/database";
 
 // Task to delete a tag
 export const deleteTags = async (db_config: DatabaseConfig): Promise<any> => {

nuxt.config.ts

@@ -15,6 +15,10 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode"
   ],
 
+  build: {
+    transpile: ["notiwind-ts"]
+  },
+
   colorMode: {
     preference: "dark", // default value of $colorMode.preference
     fallback: "dark", // fallback value if not system preference found