Merge pull request #167 from C4illin/release-please--branches--main--components--convertx-frontend

issue #163

.deepsource.toml

@@ -1,7 +0,0 @@
-version = 1
-
-[[analyzers]]
-name = "javascript"
-
-  [analyzers.meta]
-  environment = ["nodejs"]

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.8.1](https://github.com/C4illin/ConvertX/compare/v0.8.0...v0.8.1) (2024-10-05)
+
+
+### Bug Fixes
+
+* disable convert button when input is empty ([78844d7](https://github.com/C4illin/ConvertX/commit/78844d7bd55990789ed07c81e49043e688cbe656)), closes [#151](https://github.com/C4illin/ConvertX/issues/151)
+* resize to fit for ico ([b4e53db](https://github.com/C4illin/ConvertX/commit/b4e53dbb8e70b3a95b44e5b756759d16117a87e1)), closes [#157](https://github.com/C4illin/ConvertX/issues/157)
+* treat jfif as jpeg ([339b79f](https://github.com/C4illin/ConvertX/commit/339b79f786131deb93f0d5683e03178fdcab1ef5)), closes [#163](https://github.com/C4illin/ConvertX/issues/163)
+
 ## [0.8.0](https://github.com/C4illin/ConvertX/compare/v0.7.0...v0.8.0) (2024-09-30)
 
 

eslint.config.js

@@ -1,27 +1,23 @@
-import comments from "@eslint-community/eslint-plugin-eslint-comments/configs";
 import { fixupPluginRules } from "@eslint/compat";
-import js from "@eslint/js";
+import eslint from "@eslint/js";
 import deprecationPlugin from "eslint-plugin-deprecation";
-import importPlugin from "eslint-plugin-import";
+import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";
 import simpleImportSortPlugin from "eslint-plugin-simple-import-sort";
 import tailwind from "eslint-plugin-tailwindcss";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  js.configs.recommended,
-  importPlugin.flatConfigs.recommended,
-  comments.recommended,
+  eslint.configs.recommended,
   ...tseslint.configs.recommended,
   ...tailwind.configs["flat/recommended"],
   {
     plugins: {
-      "@typescript-eslint": tseslint.plugin,
       deprecation: fixupPluginRules(deprecationPlugin),
-      import: fixupPluginRules(importPlugin),
       "simple-import-sort": simpleImportSortPlugin,
+      "readable-tailwind": eslintPluginReadableTailwind,
     },
-    ignores: ["**/node_modules/**", "**/public/**"],
+    ignores: ["**/node_modules/**"],
     languageOptions: {
       parserOptions: {
         projectService: true,
@@ -32,14 +28,23 @@ export default tseslint.config(
       },
       globals: {
         ...globals.node,
+        ...globals.browser,
       },
     },
-    files: ["**/*.{js,mjs,cjs}"],
+    files: ["**/*.{js,mjs,cjs,tsx,ts}"],
     rules: {
-      "tailwindcss/no-custom-classname": [
-        "error",
+      ...eslintPluginReadableTailwind.configs.warning.rules,
+      "tailwindcss/classnames-order": "off",
+      "readable-tailwind/multiline": [
+        "warn",
+        {
+          group: "newLine",
+          printWidth: 100,
+        },
+      ],
+      "tailwindcss/no-custom-classname": [
+        "warn",
         {
-          config: "./tailwind.config.js",
           whitelist: [
             "select_container",
             "convert_to_popup",
@@ -49,7 +54,6 @@ export default tseslint.config(
           ],
         },
       ],
-      "import/no-named-as-default": "off",
     },
   },
 );

package.json

@@ -1,15 +1,15 @@
 {
   "name": "convertx-frontend",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "scripts": {
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
-    "format": "biome format --write ./src",
-    "build": "postcss  ./src/main.css -o ./src/public/generated.css",
+    "format": "eslint --fix .",
+    "build": "postcss ./src/main.css -o ./src/public/generated.css",
     "lint": "run-p 'lint:*'",
     "lint:tsc": "tsc --noEmit",
     "lint:knip": "knip",
-    "lint:biome": "biome lint --error-on-warnings ./src"
+    "lint:eslint": "eslint ."
   },
   "dependencies": {
     "@elysiajs/cookie": "^0.8.0",
@@ -24,13 +24,10 @@
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.2",
-    "@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
     "@eslint/compat": "^1.1.1",
-    "@eslint/js": "^9.11.1",
+    "@eslint/js": "^9.12.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@kitajs/ts-html-plugin": "^4.1.0",
-    "@picocss/pico": "^2.0.6",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/bun": "^1.1.10",
     "@types/eslint": "^9.6.1",
@@ -41,12 +38,12 @@
     "@typescript-eslint/parser": "^8.7.0",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
-    "eslint": "^9.11.1",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-isaacscript": "^4.0.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-readable-tailwind": "^1.8.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "globals": "^15.9.0",
@@ -59,9 +56,6 @@
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2",
-    "typescript-eslint": "^8.7.0"
-  },
-  "trustedDependencies": [
-    "@biomejs/biome"
-  ]
+    "typescript-eslint": "^8.8.0"
+  }
 }

postcss.config.cjs

@@ -1,9 +1,9 @@
-// eslint-disable-next-line no-undef
+ 
 module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-    // eslint-disable-next-line no-undef
+     
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
   }
 }

renovate.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
-    "config:recommended"
+    "config:recommended",
+    ":disableDependencyDashboard"
   ]
-}
+}

src/components/header.tsx

@@ -5,17 +5,23 @@ export const Header = ({
   let rightNav: JSX.Element;
   if (loggedIn) {
     rightNav = (
-      <ul class="flex gap-4 ">
+      <ul class="flex gap-4">
         <li>
           <a
-            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
             href="/history">
             History
           </a>
         </li>
         <li>
           <a
-            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
             href="/logoff">
             Logout
           </a>
@@ -27,7 +33,10 @@ export const Header = ({
       <ul class="flex gap-4">
         <li>
           <a
-            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
             href="/login">
             Login
           </a>
@@ -35,7 +44,10 @@ export const Header = ({
         {accountRegistration ? (
           <li>
             <a
-              class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+              class={`
+                text-accent-600 transition-all
+                hover:text-accent-500 hover:underline
+              `}
               href="/register">
               Register
             </a>

src/converters/assimp.ts

@@ -116,8 +116,8 @@ export async function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   // let command = "ffmpeg";
 
@@ -137,7 +137,7 @@ export async function convert(
         console.error(`stderr: ${stderr}`);
       }
 
-      resolve("success");
+      resolve("Done");
     });
   });
 }

src/converters/ffmpeg.ts

@@ -1,6 +1,5 @@
 import { exec } from "node:child_process";
 
-
 // This could be done dynamically by running `ffmpeg -formats` and parsing the output
 export const properties = {
   from: {
@@ -689,10 +688,19 @@ export async function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
-  const command = `ffmpeg -i "${filePath}" "${targetPath}"`;
+  let extra = "";
+  let message = "Done";
+
+  if (convertTo === "ico") {
+    // make sure image is 256x256 or smaller
+    extra = `-filter:v "scale='min(256,iw)':min'(256,ih)':force_original_aspect_ratio=decrease"`;
+    message = "Done: resized to 256x256";
+  }
+
+  const command = `ffmpeg -i "${filePath}" ${extra} "${targetPath}"`;
 
   return new Promise((resolve, reject) => {
     exec(command, (error, stdout, stderr) => {
@@ -708,7 +716,7 @@ export async function convert(
         console.error(`stderr: ${stderr}`);
       }
 
-      resolve("success");
+      resolve(message);
     });
   });
-}
+}

src/converters/graphicsmagick.ts

@@ -313,8 +313,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     exec(
@@ -332,7 +332,7 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });

src/converters/libjxl.ts

@@ -39,8 +39,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   let tool = "";
   if (fileType === "jxl") {
@@ -65,7 +65,7 @@ export function convert(
         console.error(`stderr: ${stderr}`);
       }
 
-      resolve("success");
+      resolve("Done");
     });
   });
 }

src/converters/main.ts

@@ -1,67 +1,44 @@
-import { 
-  convert as convertImage,
-  properties as propertiesImage
-} from "./vips";
-
-import {
-  convert as convertPandoc,
-  properties as propertiesPandoc,
-} from "./pandoc";
-
-import {
-  convert as convertFFmpeg,
-  properties as propertiesFFmpeg,
-} from "./ffmpeg";
-
-import {
-  convert as convertGraphicsmagick,
-  properties as propertiesGraphicsmagick,
-} from "./graphicsmagick";
-
-import {
-  convert as convertxelatex,
-  properties as propertiesxelatex,
-} from "./xelatex";
-
-import {
-  convert as convertLibjxl,
-  properties as propertiesLibjxl,
-} from "./libjxl";
-
-import {
-  convert as convertresvg,
-  properties as propertiesresvg,
-} from "./resvg";
-
-import {
-  convert as convertassimp,
-  properties as propertiesassimp,
-} from "./assimp";
-
 import { normalizeFiletype } from "../helpers/normalizeFiletype";
+import { convert as convertassimp, properties as propertiesassimp } from "./assimp";
+import { convert as convertFFmpeg, properties as propertiesFFmpeg } from "./ffmpeg";
+import { convert as convertGraphicsmagick, properties as propertiesGraphicsmagick } from "./graphicsmagick";
+import { convert as convertLibjxl, properties as propertiesLibjxl } from "./libjxl";
+import { convert as convertPandoc, properties as propertiesPandoc } from "./pandoc";
+import { convert as convertresvg, properties as propertiesresvg } from "./resvg";
+import { convert as convertImage, properties as propertiesImage } from "./vips";
+import { convert as convertxelatex, properties as propertiesxelatex } from "./xelatex";
+
 
 // This should probably be reconstructed so that the functions are not imported instead the functions hook into this to make the converters more modular
 
-const properties: Record<string, {
+const properties: Record<
+  string,
+  {
     properties: {
       from: Record<string, string[]>;
       to: Record<string, string[]>;
-      options?: Record<string, Record<string, {
+      options?: Record<
+        string,
+        Record<
+          string,
+          {
             description: string;
             type: string;
             default: number;
-          }>>;
+          }
+        >
+      >;
     };
     converter: (
       filePath: string,
       fileType: string,
       convertTo: string,
       targetPath: string,
-      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-      options?: any,
-      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    ) => any;
-  }> = {
+
+      options?: unknown,
+    ) => unknown;
+  }
+> = {
   libjxl: {
     properties: propertiesLibjxl,
     converter: convertLibjxl,
@@ -99,24 +76,19 @@ const properties: Record<string, {
 export async function mainConverter(
   inputFilePath: string,
   fileTypeOriginal: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  convertTo: any,
+  convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  options?: unknown,
   converterName?: string,
 ) {
   const fileType = normalizeFiletype(fileTypeOriginal);
 
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  let converterFunc: any;
-  // let converterName = converterName;
+  let converterFunc: typeof properties["libjxl"]["converter"] | undefined;
 
   if (converterName) {
     converterFunc = properties[converterName]?.converter;
   } else {
     // Iterate over each converter in properties
-    // biome-ignore lint/style/noParameterAssign: <explanation>
     for (converterName in properties) {
       const converterObj = properties[converterName];
 
@@ -144,7 +116,7 @@ export async function mainConverter(
   }
 
   try {
-    await converterFunc(
+    const result = await converterFunc(
       inputFilePath,
       fileType,
       convertTo,
@@ -154,7 +126,13 @@ export async function mainConverter(
 
     console.log(
       `Converted ${inputFilePath} from ${fileType} to ${convertTo} successfully using ${converterName}.`,
+      result,
     );
+
+    if (typeof result === "string") {
+      return result;
+    }
+
     return "Done";
   } catch (error) {
     console.error(
@@ -190,9 +168,7 @@ for (const converterName in properties) {
   }
 }
 
-export const getPossibleTargets = (
-  from: string,
-): Record<string, string[]> => {
+export const getPossibleTargets = (from: string): Record<string, string[]> => {
   const fromClean = normalizeFiletype(from);
 
   return possibleTargets[fromClean] || {};
@@ -216,6 +192,7 @@ for (const converterName in properties) {
 }
 possibleInputs.sort();
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getPossibleInputs = () => {
   return possibleInputs;
 };
@@ -287,4 +264,4 @@ export const getAllInputs = (converter: string) => {
 // }
 
 // // print the number of unique Inputs and Outputs
-// console.log(`Unique Formats: ${uniqueFormats.size}`);
+// console.log(`Unique Formats: ${uniqueFormats.size}`);

src/converters/pandoc.ts

@@ -124,8 +124,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   // set xelatex here
   const xelatex = ["pdf", "latex"];
@@ -149,7 +149,7 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });

src/converters/resvg.ts

@@ -14,8 +14,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     exec(`resvg "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {
@@ -31,7 +31,7 @@ export function convert(
         console.error(`stderr: ${stderr}`);
       }
 
-      resolve("success");
+      resolve("Done");
     });
   });
 }

src/converters/vips.ts

@@ -1,5 +1,6 @@
 import { exec } from "node:child_process";
 
+
 // declare possible conversions
 export const properties = {
   from: {
@@ -94,8 +95,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   // if (fileType === "svg") {
   //   const scale = options.scale || 1;
@@ -134,8 +135,8 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });
-}
+}

src/converters/xelatex.ts

@@ -14,8 +14,8 @@ export function convert(
   fileType: string,
   convertTo: string,
   targetPath: string,
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  options?: any,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: unknown,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     // const fileName: string = (targetPath.split("/").pop() as string).replace(".pdf", "")
@@ -39,7 +39,7 @@ export function convert(
           console.error(`stderr: ${stderr}`);
         }
 
-        resolve("success");
+        resolve("Done");
       },
     );
   });

src/helpers/normalizeFiletype.ts

@@ -2,6 +2,7 @@ export const normalizeFiletype = (filetype: string): string => {
   const lowercaseFiletype = filetype.toLowerCase();
 
   switch (lowercaseFiletype) {
+    case "jfif":
     case "jpg":
       return "jpeg";
     case "htm":

src/index.tsx

@@ -141,7 +141,9 @@ const app = new Elysia({
         <main class="mx-auto w-full max-w-4xl px-4">
           <h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
           <article class="article p-0">
-            <header class="w-full bg-neutral-800 p-4">Create your account</header>
+            <header class="w-full bg-neutral-800 p-4">
+              Create your account
+            </header>
             <form method="post" action="/register" class="p-4">
               <fieldset class="mb-4 flex flex-col gap-4">
                 <label class="flex flex-col gap-1">
@@ -172,7 +174,10 @@ const app = new Elysia({
             <footer class="p-4">
               Report any issues on{" "}
               <a
-                class="text-accent-500 underline hover:text-accent-400"
+                class={`
+                  text-accent-500 underline
+                  hover:text-accent-400
+                `}
                 href="https://github.com/C4illin/ConvertX"
               >
                 GitHub
@@ -528,12 +533,21 @@ const app = new Elysia({
               <div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
                 <table
                   id="file-list"
-                  class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
+                  class={`
+                    w-full table-auto rounded bg-neutral-900
+                    [&_td]:p-4
+                    [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                  `}
                 />
               </div>
               <div
                 id="dropzone"
-                class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500"
+                class={`
+                  relative flex h-48 w-full items-center justify-center rounded border border-dashed
+                  border-neutral-700 transition-all
+                  [&.dragover]:border-4 [&.dragover]:border-neutral-500
+                  hover:border-neutral-600
+                `}
               >
                 <span>
                   <b>Choose a file</b> or drag it here
@@ -561,11 +575,19 @@ const app = new Elysia({
                   class="w-full rounded bg-neutral-800 p-4"
                 />
                 <div class="select_container relative">
-                  <article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
+                  <article
+                    class={`
+                      convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full
+                      flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800
+                      sm:h-[30vh]
+                    `}
+                  >
                     {Object.entries(getAllTargets()).map(
                       ([converter, targets]) => (
                         <article
-                          class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
+                          class={`
+                            convert_to_group flex w-full flex-col border-b border-neutral-700 p-4
+                          `}
                           data-converter={converter}
                         >
                           <header class="mb-2 w-full text-xl font-bold" safe>
@@ -576,7 +598,10 @@ const app = new Elysia({
                               <button
                                 // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
                                 tabindex={0}
-                                class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
+                                class={`
+                                  target rounded bg-neutral-700 p-1 text-base
+                                  hover:bg-neutral-600
+                                `}
                                 data-value={`${target},${converter}`}
                                 data-target={target}
                                 data-converter={converter}
@@ -616,7 +641,15 @@ const app = new Elysia({
                   </select>
                 </div>
               </article>
-              <input class="btn-primary w-full" type="submit" value="Convert" />
+              <input
+                class={`
+                  btn-primary w-full
+                  disabled:cursor-not-allowed disabled:opacity-50
+                `}
+                type="submit"
+                value="Convert"
+                disabled
+              />
             </form>
           </main>
           <script src="script.js" defer />
@@ -629,11 +662,17 @@ const app = new Elysia({
     ({ body }) => {
       return (
         <>
-          <article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
+          <article
+            class={`
+              convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col
+              overflow-y-auto overflow-x-hidden rounded bg-neutral-800
+              sm:h-[30vh]
+            `}
+          >
             {Object.entries(getPossibleTargets(body.fileType)).map(
               ([converter, targets]) => (
                 <article
-                  class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
+                  class="convert_to_group flex w-full flex-col border-b border-neutral-700 p-4"
                   data-converter={converter}
                 >
                   <header class="mb-2 w-full text-xl font-bold" safe>
@@ -644,7 +683,10 @@ const app = new Elysia({
                       <button
                         // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
                         tabindex={0}
-                        class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
+                        class={`
+                          target rounded bg-neutral-700 p-1 text-base
+                          hover:bg-neutral-600
+                        `}
                         data-value={`${target},${converter}`}
                         data-target={target}
                         data-converter={converter}
@@ -713,7 +755,6 @@ const app = new Elysia({
             await Bun.write(`${userUploadsDir}${file.name}`, file);
           }
         } else {
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/dot-notation
           await Bun.write(`${userUploadsDir}${body.file["name"]}`, body.file);
         }
       }
@@ -893,7 +934,13 @@ const app = new Elysia({
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Results</h1>
-              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
+              <table
+                class={`
+                  w-full table-auto rounded bg-neutral-900 text-left
+                  [&_td]:p-4
+                  [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                `}
+              >
                 <thead>
                   <tr>
                     <th class="px-4 py-2">Time</th>
@@ -912,7 +959,10 @@ const app = new Elysia({
                       <td safe>{job.status}</td>
                       <td>
                         <a
-                          class="text-accent-500 underline hover:text-accent-400"
+                          class={`
+                            text-accent-500 underline
+                            hover:text-accent-400
+                          `}
                           href={`/results/${job.id}`}
                         >
                           View
@@ -990,9 +1040,22 @@ const app = new Elysia({
                 <progress
                   max={job.num_files}
                   value={files.length}
-                  class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
+                  class={`
+                    mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full
+                    border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500
+                    [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
+                    [&::-webkit-progress-value]:[background:none]
+                    [&[value]::-webkit-progress-value]:bg-accent-500
+                    [&[value]::-webkit-progress-value]:transition-[inline-size]
+                  `}
                 />
-                <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
+                <table
+                  class={`
+                    w-full table-auto rounded bg-neutral-900 text-left
+                    [&_td]:p-4
+                    [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                  `}
+                >
                   <thead>
                     <tr>
                       <th class="px-4 py-2">Converted File Name</th>
@@ -1008,7 +1071,10 @@ const app = new Elysia({
                         <td safe>{file.status}</td>
                         <td>
                           <a
-                            class="text-accent-500 underline hover:text-accent-400"
+                            class={`
+                              text-accent-500 underline
+                              hover:text-accent-400
+                            `}
                             href={`/download/${outputPath}${file.output_file_name}`}
                           >
                             View
@@ -1016,7 +1082,10 @@ const app = new Elysia({
                         </td>
                         <td>
                           <a
-                            class="text-accent-500 underline hover:text-accent-400"
+                            class={`
+                              text-accent-500 underline
+                              hover:text-accent-400
+                            `}
                             href={`/download/${outputPath}${file.output_file_name}`}
                             download={file.output_file_name}
                           >
@@ -1093,9 +1162,22 @@ const app = new Elysia({
           <progress
             max={job.num_files}
             value={files.length}
-            class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
+            class={`
+              mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0
+              bg-neutral-700 bg-none text-accent-500 accent-accent-500
+              [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
+              [&::-webkit-progress-value]:[background:none]
+              [&[value]::-webkit-progress-value]:bg-accent-500
+              [&[value]::-webkit-progress-value]:transition-[inline-size]
+            `}
           />
-          <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
+          <table
+            class={`
+              w-full table-auto rounded bg-neutral-900 text-left
+              [&_td]:p-4
+              [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+            `}
+          >
             <thead>
               <tr>
                 <th class="px-4 py-2">Converted File Name</th>
@@ -1111,7 +1193,10 @@ const app = new Elysia({
                   <td safe>{file.status}</td>
                   <td>
                     <a
-                      class="text-accent-500 underline hover:text-accent-400"
+                      class={`
+                        text-accent-500 underline
+                        hover:text-accent-400
+                      `}
                       href={`/download/${outputPath}${file.output_file_name}`}
                     >
                       View
@@ -1119,7 +1204,10 @@ const app = new Elysia({
                   </td>
                   <td>
                     <a
-                      class="text-accent-500 underline hover:text-accent-400"
+                      class={`
+                        text-accent-500 underline
+                        hover:text-accent-400
+                      `}
                       href={`/download/${outputPath}${file.output_file_name}`}
                       download={file.output_file_name}
                     >
@@ -1179,7 +1267,14 @@ const app = new Elysia({
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Converters</h1>
-              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc">
+              <table
+                class={`
+                  w-full table-auto rounded bg-neutral-900 text-left
+                  [&_td]:p-4
+                  [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                  [&_ul]:list-inside [&_ul]:list-disc
+                `}
+              >
                 <thead>
                   <tr>
                     <th class="mx-4 my-2">Converter</th>

src/public/script.js

@@ -4,11 +4,11 @@ const dropZone = document.getElementById("dropzone");
 const fileNames = [];
 let fileType;
 
-dropZone.addEventListener("dragover", (e) => {
+dropZone.addEventListener("dragover", () => {
   dropZone.classList.add("dragover");
 });
 
-dropZone.addEventListener("dragleave", (e) => {
+dropZone.addEventListener("dragleave", () => {
   dropZone.classList.remove("dragover");
 });
 
@@ -22,6 +22,7 @@ const updateSearchBar = () => {
   const convertToGroupElements = document.querySelectorAll(".convert_to_group");
   const convertToGroups = {};
   const convertToElement = document.querySelector("select[name='convert_to']");
+  const convertButton = document.querySelector("input[type='submit']");
 
   const showMatching = (search) => {
     for (const [targets, groupElement] of Object.values(convertToGroups)) {
@@ -57,6 +58,7 @@ const updateSearchBar = () => {
       target.onmousedown = () => {
         convertToElement.value = target.dataset.value;
         convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
+        convertButton.disabled = false;
         showMatching("");
       };
     }
@@ -68,6 +70,11 @@ const updateSearchBar = () => {
     showMatching(e.target.value.toLowerCase());
   });
 
+  convertToInput.addEventListener("search", () => {
+    // when the user clears the search bar using the 'x' button
+    convertButton.disabled = true;
+  });
+
   convertToInput.addEventListener("blur", (e) => {
     // Keep the popup open even when clicking on a target button
     // for a split second to allow the click to go through
@@ -153,6 +160,7 @@ const setTitle = () => {
 };
 
 // Add a onclick for the delete button
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const deleteRow = (target) => {
   const filename = target.parentElement.parentElement.children[0].textContent;
   const row = target.parentElement.parentElement;
@@ -203,7 +211,7 @@ const uploadFiles = (files) => {
 
 const formConvert = document.querySelector("form[action='/convert']");
 
-formConvert.addEventListener("submit", (e) => {
+formConvert.addEventListener("submit", () => {
   const hiddenInput = document.querySelector("input[name='file_names']");
   hiddenInput.value = JSON.stringify(fileNames);
 });

tailwind.config.js

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 /** @type {import('tailwindcss').Config} */
-// eslint-disable-next-line no-undef
+ 
 module.exports = {
   content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
   theme: {