🔧 Update VS Code and project configurations (#796)

- ♻️ Refactor `file` state to use `undefined` instead of `null`
- ✨ Add support for WebP image uploads in CommentForm
- ➕ Add "/apps/mockup/tests/external-links.txt" to ignore list
- 🏷️ Adjust type of $state in HTMLElement
- 🔥 Remove unused app.d.ts file
- 🔧 Enable TypeScript plugin for Svelte
- 🔧 Update cspell.json configuration

.vscode/settings.json

@@ -11,6 +11,7 @@
   "eslint.workingDirectories": [{ "mode": "auto" }],
   "eslint.useFlatConfig": true,
   "eslint.validate": ["svelte"],
+  "svelte.enable-ts-plugin": true,
   "tailwindCSS.experimental.classRegex": [
     ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ]

apps/web/src/lib/features/comment/commentStore.svelte.ts

@@ -53,7 +53,7 @@ export class CommentStore {
     this.#isLoading = false;
   }
 
-  async insertComment({ text, file }: { text: string; file: File | null }): Promise<{
+  async insertComment({ text, file }: { text: string; file?: File }): Promise<{
     error: PostgrestError | Error | null;
   }> {
     if (!userStore.user) {

apps/web/src/routes/CommentForm.svelte

@@ -7,10 +7,10 @@
   import { buttonVariants } from '$lib/variants/buttonVariants';
   import { sectionFrameVariants } from '$lib/variants/sectionFrameVariants';
 
-  let textAreaEl: HTMLTextAreaElement | null = $state(null);
+  let textAreaEl = $state<HTMLTextAreaElement>();
   let isSending = $state(false);
   let text = $state('');
-  let file: File | null = $state(null);
+  let file = $state<File>();
 
   /**
    * Send the comment
@@ -41,7 +41,7 @@
     isSending = false;
 
     text = '';
-    file = null;
+    file = undefined;
 
     await tick();
     textAreaEl?.focus();
@@ -55,7 +55,7 @@
 
   function handleFileChange(event: Event): void {
     const target = event.target as HTMLInputElement;
-    file = target.files?.[0] ?? null;
+    file = target.files?.[0] ?? undefined;
 
     target.value = '';
   }
@@ -75,7 +75,7 @@
       <label>
         <input
           type="file"
-          accept="image/png, image/jpeg"
+          accept="image/png, image/jpeg, image/webp"
           class="peer sr-only"
           onchange={handleFileChange}
           disabled={isSending}

apps/web/src/routes/admin/AdminHeaderMessage.svelte

@@ -5,7 +5,7 @@
   import { defaultDE } from '$lib/easing';
   import { ROUTE } from '$lib/routes';
 
-  let el: HTMLElement | null = $state(null);
+  let el = $state<HTMLElement>();
   let height = $state(0);
   let innerWidth = $state(0);
 

cspell.json

@@ -23,6 +23,7 @@
     "/apps/backend/supabase/config.toml",
     "/apps/backend/supabase/migrations",
     "/apps/mockup/public/styles.css",
+    "/apps/mockup/tests/external-links.txt",
     "/apps/web/build",
     "/apps/web/src/lib/$generated"
   ]