feat: add delete button in history (#440)

C4illin · web-flow · commit 64264a41d986 · 2025-11-16T00:34:49.000+01:00
diff --git a/bun.lock b/bun.lock
diff --git a/knip.json b/knip.json
@@ -4,6 +4,5 @@
   "project": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts"],
   "tailwind": {
     "entry": ["src/main.css"]
-  },
-  "ignoreDependencies": ["tailwind-scrollbar"]
+  }
 }
diff --git a/mise.toml b/mise.toml
@@ -1,2 +1,5 @@
 [tools]
 bun = "1.2.2"
+
+[env]
+JWT_SECRET = "JustForDevelopmentPurposesOnlyChangeMeInProduction!"
diff --git a/package.json b/package.json
@@ -18,36 +18,36 @@
   "dependencies": {
     "@elysiajs/html": "^1.4.0",
     "@elysiajs/jwt": "^1.4.0",
-    "@elysiajs/static": "^1.4.4",
-    "@kitajs/html": "^4.2.10",
-    "elysia": "^1.4.13",
+    "@elysiajs/static": "^1.4.6",
+    "@kitajs/html": "^4.2.11",
+    "elysia": "^1.4.16",
     "sanitize-filename": "^1.6.3",
-    "tar": "^7.5.1"
+    "tar": "^7.5.2"
   },
   "module": "src/index.tsx",
   "type": "module",
   "bun-create": {
     "start": "bun run src/index.tsx"
   },
   "devDependencies": {
-    "@eslint/js": "^9.38.0",
+    "@eslint/js": "^9.39.1",
     "@kitajs/ts-html-plugin": "^4.1.3",
-    "@tailwindcss/cli": "^4.1.16",
-    "@tailwindcss/postcss": "^4.1.16",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
     "@types/bun": "latest",
-    "@types/node": "^24.9.2",
-    "@typescript-eslint/parser": "^8.46.2",
-    "eslint": "^9.38.0",
+    "@types/node": "^24.10.1",
+    "@typescript-eslint/parser": "^8.46.4",
+    "eslint": "^9.39.1",
     "eslint-plugin-better-tailwindcss": "^3.7.10",
-    "globals": "^16.4.0",
-    "knip": "^5.66.4",
+    "globals": "^16.5.0",
+    "knip": "^5.69.1",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2"
+    "typescript-eslint": "^8.46.4"
   },
   "trustedDependencies": [
     "@parcel/watcher",
diff --git a/src/pages/deleteJob.tsx b/src/pages/deleteJob.tsx
@@ -7,7 +7,7 @@ import { userService } from "./user";
 import { Jobs } from "../db/types";
 
 export const deleteJob = new Elysia().use(userService).get(
-  "/delete/:userId/:jobId",
+  "/delete/:jobId",
   async ({ params, redirect, user }) => {
     const job = db
       .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
diff --git a/src/pages/download.tsx b/src/pages/download.tsx
@@ -12,6 +12,7 @@ export const download = new Elysia()
   .get(
     "/download/:userId/:jobId/:fileName",
     async ({ params, redirect, user }) => {
+      const userId = user.id;
       const job = await db
         .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
         .get(user.id, params.jobId);
@@ -20,7 +21,6 @@ export const download = new Elysia()
         return redirect(`${WEBROOT}/results`, 302);
       }
       // parse from URL encoded string
-      const userId = decodeURIComponent(params.userId);
       const jobId = decodeURIComponent(params.jobId);
       const fileName = sanitize(decodeURIComponent(params.fileName));
 
@@ -32,8 +32,9 @@ export const download = new Elysia()
     },
   )
   .get(
-    "/archive/:userId/:jobId",
+    "/archive/:jobId",
     async ({ params, redirect, user }) => {
+      const userId = user.id;
       const job = await db
         .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
         .get(user.id, params.jobId);
@@ -42,7 +43,6 @@ export const download = new Elysia()
         return redirect(`${WEBROOT}/results`, 302);
       }
 
-      const userId = decodeURIComponent(params.userId);
       const jobId = decodeURIComponent(params.jobId);
       const outputPath = `${outputDir}${userId}/${jobId}`;
       const outputTar = path.join(outputPath, `converted_files_${jobId}.tar`);
diff --git a/src/pages/history.tsx b/src/pages/history.tsx
@@ -5,6 +5,8 @@ import db from "../db/db";
 import { Filename, Jobs } from "../db/types";
 import { ALLOW_UNAUTHENTICATED, HIDE_HISTORY, LANGUAGE, WEBROOT } from "../helpers/env";
 import { userService } from "./user";
+import { EyeIcon } from "../icons/eye";
+import { DeleteIcon } from "../icons/delete";
 
 export const history = new Elysia().use(userService).get(
   "/history",
@@ -102,7 +104,7 @@ export const history = new Elysia().use(userService).get(
                         sm:px-4
                       `}
                     >
-                      View
+                      Actions
                     </th>
                   </tr>
                 </thead>
@@ -131,15 +133,24 @@ export const history = new Elysia().use(userService).get(
                         <td>{job.num_files}</td>
                         <td class="max-sm:hidden">{job.finished_files}</td>
                         <td safe>{job.status}</td>
-                        <td>
+                        <td class="flex flex-row gap-4">
                           <a
                             class={`
                               text-accent-500 underline
                               hover:text-accent-400
                             `}
                             href={`${WEBROOT}/results/${job.id}`}
                           >
-                            View
+                            <EyeIcon />
+                          </a>
+                          <a
+                            class={`
+                              text-accent-500 underline
+                              hover:text-accent-400
+                            `}
+                            href={`${WEBROOT}/delete/${job.id}`}
+                          >
+                            <DeleteIcon />
                           </a>
                         </td>
                       </tr>
diff --git a/src/pages/results.tsx b/src/pages/results.tsx
@@ -1,4 +1,3 @@
-import { JWTPayloadSpec } from "@elysiajs/jwt";
 import { Elysia } from "elysia";
 import { BaseHtml } from "../components/base";
 import { Header } from "../components/header";
@@ -11,14 +10,10 @@ import { EyeIcon } from "../icons/eye";
 import { userService } from "./user";
 
 function ResultsArticle({
-  user,
   job,
   files,
   outputPath,
 }: {
-  user: {
-    id: string;
-  } & JWTPayloadSpec;
   job: Jobs;
   files: Filename[];
   outputPath: string;
@@ -30,24 +25,24 @@ function ResultsArticle({
         <div class="flex flex-row gap-4">
           <a
             style={files.length !== job.num_files ? "pointer-events: none;" : ""}
-            href={`${WEBROOT}/archive/${user.id}/${job.id}`}
-            download={`converted_files_${job.id}.tar`}
-            class="flex btn-primary flex-row gap-2 text-contrast"
+            class="flex btn-secondary flex-row gap-2 text-contrast"
+            href={`${WEBROOT}/delete/${job.id}`}
             {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
           >
-            <DownloadIcon /> <p>Tar</p>
+            <DeleteIcon /> <p>Delete</p>
           </a>
-          <button class="flex btn-primary flex-row gap-2 text-contrast" onclick="downloadAll()">
-            <DownloadIcon /> <p>All</p>
-          </button>
           <a
             style={files.length !== job.num_files ? "pointer-events: none;" : ""}
+            href={`${WEBROOT}/archive/${job.id}`}
+            download={`converted_files_${job.id}.tar`}
             class="flex btn-primary flex-row gap-2 text-contrast"
-            href={`${WEBROOT}/delete/${user.id}/${job.id}`}
             {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
           >
-            <DeleteIcon /> <p>Delete</p>
+            <DownloadIcon /> <p>Tar</p>
           </a>
+          <button class="flex btn-primary flex-row gap-2 text-contrast" onclick="downloadAll()">
+            <DownloadIcon /> <p>All</p>
+          </button>
         </div>
       </div>
       <progress
@@ -172,7 +167,7 @@ export const results = new Elysia()
                 sm:px-4
               `}
             >
-              <ResultsArticle user={user} job={job} files={files} outputPath={outputPath} />
+              <ResultsArticle job={job} files={files} outputPath={outputPath} />
             </main>
             <script src={`${WEBROOT}/results.js`} defer />
           </>
@@ -208,7 +203,7 @@ export const results = new Elysia()
         .as(Filename)
         .all(params.jobId);
 
-      return <ResultsArticle user={user} job={job} files={files} outputPath={outputPath} />;
+      return <ResultsArticle job={job} files={files} outputPath={outputPath} />;
     },
     { auth: true },
   );

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,5 @@`
`4`	`4`	`"project": ["src/*/.ts", "src/*/.tsx", "tests/*/.ts"],`
`5`	`5`	`"tailwind": {`
`6`	`6`	`"entry": ["src/main.css"]`
`7`		`- },`
`8`		`- "ignoreDependencies": ["tailwind-scrollbar"]`
	`7`	`+ }`
`9`	`8`	`}`
-Original file line number
+Diff line change
@@ @@ -1,2 +1,5 @@ @@
 [tools]
 bun = "1.2.2"
++
 +[env]
 +JWT_SECRET = "JustForDevelopmentPurposesOnlyChangeMeInProduction!"