From 50725edd021bb9a7f58c85b79c1eab355ad22ced Mon Sep 17 00:00:00 2001
From: xeisenberg <94274140+xxeisenberg@users.noreply.github.com>
Date: Tue, 27 May 2025 14:22:32 +0530
Subject: [PATCH 1/2] feat: enhance job details display with file information

- Added `files_detailed` property to the `Jobs` class to store detailed file information.
- Updated job listing to include a toggle for displaying detailed file information.
- Implemented a toggle function for showing/hiding detailed file rows in the UI.
---
 src/index.tsx | 121 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 103 insertions(+), 18 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index c311d66..b132506 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -107,6 +107,7 @@ class Jobs {
   date_created!: string;
   status!: string;
   num_files!: number;
+  files_detailed!: Filename[];
 }
 
 // enable WAL mode
@@ -1131,6 +1132,7 @@ const app = new Elysia({
         .all(job.id);
 
       job.finished_files = files.length;
+      job.files_detailed = files;
     }
 
     // filter out jobs with no files
@@ -1162,6 +1164,12 @@ const app = new Elysia({
               >
                 <thead>
                   <tr>
+                    <th
+                      class={`
+                        px-2 py-2
+                        sm:px-4
+                      `}
+                    />
                     <th
                       class={`
                         px-2 py-2
@@ -1207,30 +1215,107 @@ const app = new Elysia({
                 </thead>
                 <tbody>
                   {userJobs.map((job) => (
-                    <tr>
-                      <td safe>
-                        {new Date(job.date_created).toLocaleTimeString()}
-                      </td>
-                      <td>{job.num_files}</td>
-                      <td class="max-sm:hidden">{job.finished_files}</td>
-                      <td safe>{job.status}</td>
-                      <td>
-                        <a
-                          class={`
-                            text-accent-500 underline
-                            hover:text-accent-400
-                          `}
-                          href={`${WEBROOT}/results/${job.id}`}
+                    <>
+                      <tr id={`job-row-${job.id}`}>
+                        <td
+                          class="cursor-pointer"
+                          onclick={`toggleJobDetails(${job.id})`}
                         >
-                          View
-                        </a>
-                      </td>
-                    </tr>
+                          <svg
+                            id={`arrow-${job.id}`}
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="inline-block h-4 w-4"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                            />
+                          </svg>
+                        </td>
+                        <td safe>
+                          {new Date(job.date_created).toLocaleTimeString()}
+                        </td>
+                        <td>{job.num_files}</td>
+                        <td class="max-sm:hidden">{job.finished_files}</td>
+                        <td safe>{job.status}</td>
+                        <td>
+                          <a
+                            class={`
+                              text-accent-500 underline
+                              hover:text-accent-400
+                            `}
+                            href={`${WEBROOT}/results/${job.id}`}
+                          >
+                            View
+                          </a>
+                        </td>
+                      </tr>
+                      <tr id={`details-${job.id}`} class="hidden">
+                        <td colspan="6">
+                          <div class="p-2 text-sm text-neutral-500">
+                            <div class="mb-1 font-semibold">
+                              Detailed File Information:
+                            </div>
+                            {job.files_detailed.map((file: Filename) => (
+                              <div class="flex items-center">
+                                <span
+                                  class="w-5/12 truncate"
+                                  title={file.file_name}
+                                  safe
+                                >
+                                  {file.file_name}
+                                </span>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 20 20"
+                                  fill="currentColor"
+                                  class="w-4 h-4 inline-block mx-2 text-neutral-500"
+                                >
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                                    clip-rule="evenodd"
+                                  />
+                                </svg>
+                                <span
+                                  class="w-5/12 truncate"
+                                  title={file.output_file_name}
+                                  safe
+                                >
+                                  {file.output_file_name}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </td>
+                      </tr>
+                    </>
                   ))}
                 </tbody>
               </table>
             </article>
           </main>
+          <script>
+            {`
+              function toggleJobDetails(jobId) {
+                const detailsRow = document.getElementById(\`details-\${jobId}\`);
+                const arrow = document.getElementById(\`arrow-\${jobId}\`);
+                if (detailsRow && arrow) {
+                  detailsRow.classList.toggle("hidden");
+                  if (detailsRow.classList.contains("hidden")) {
+                    arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
+                  } else {
+                    arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
+                  }
+                }
+              }
+            `}
+          </script>
         </>
       </BaseHtml>
     );

From 29ba229bc23d2019d2ee9829da7852f884ffa611 Mon Sep 17 00:00:00 2001
From: xeisenberg <94274140+xxeisenberg@users.noreply.github.com>
Date: Tue, 27 May 2025 16:10:35 +0530
Subject: [PATCH 2/2] feat: improve job details interaction and accessibility

- Enhanced job details toggle functionality by adding event listeners to job detail elements.
- Updated job detail rows to use data attributes for better accessibility and maintainability.
- Improved the rendering of file information with unique keys for each file entry.
---
 src/index.tsx | 107 +++++++++++++++++++++++++++++---------------------
 1 file changed, 62 insertions(+), 45 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index b132506..6514ed0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1169,7 +1169,9 @@ const app = new Elysia({
                         px-2 py-2
                         sm:px-4
                       `}
-                    />
+                    >
+                      <span class="sr-only">Expand details</span>
+                    </th>
                     <th
                       class={`
                         px-2 py-2
@@ -1216,10 +1218,10 @@ const app = new Elysia({
                 <tbody>
                   {userJobs.map((job) => (
                     <>
-                      <tr id={`job-row-${job.id}`}>
+                      <tr key={`job-${job.id}` as any} id={`job-row-${job.id}`}>
                         <td
-                          class="cursor-pointer"
-                          onclick={`toggleJobDetails(${job.id})`}
+                          class="job-details-toggle cursor-pointer"
+                          data-job-id={job.id}
                         >
                           <svg
                             id={`arrow-${job.id}`}
@@ -1261,36 +1263,41 @@ const app = new Elysia({
                             <div class="mb-1 font-semibold">
                               Detailed File Information:
                             </div>
-                            {job.files_detailed.map((file: Filename) => (
-                              <div class="flex items-center">
-                                <span
-                                  class="w-5/12 truncate"
-                                  title={file.file_name}
-                                  safe
+                            {job.files_detailed.map(
+                              (file: Filename, index: number) => (
+                                <div
+                                  key={String(file.id) as any}
+                                  class="flex items-center"
                                 >
-                                  {file.file_name}
-                                </span>
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  viewBox="0 0 20 20"
-                                  fill="currentColor"
-                                  class="w-4 h-4 inline-block mx-2 text-neutral-500"
-                                >
-                                  <path
-                                    fill-rule="evenodd"
-                                    d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-                                    clip-rule="evenodd"
-                                  />
-                                </svg>
-                                <span
-                                  class="w-5/12 truncate"
-                                  title={file.output_file_name}
-                                  safe
-                                >
-                                  {file.output_file_name}
-                                </span>
-                              </div>
-                            ))}
+                                  <span
+                                    class="w-5/12 truncate"
+                                    title={file.file_name}
+                                    safe
+                                  >
+                                    {file.file_name}
+                                  </span>
+                                  <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                    class="w-4 h-4 inline-block mx-2 text-neutral-500"
+                                  >
+                                    <path
+                                      fill-rule="evenodd"
+                                      d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                                      clip-rule="evenodd"
+                                    />
+                                  </svg>
+                                  <span
+                                    class="w-5/12 truncate"
+                                    title={file.output_file_name}
+                                    safe
+                                  >
+                                    {file.output_file_name}
+                                  </span>
+                                </div>
+                              ),
+                            )}
                           </div>
                         </td>
                       </tr>
@@ -1302,18 +1309,28 @@ const app = new Elysia({
           </main>
           <script>
             {`
-              function toggleJobDetails(jobId) {
-                const detailsRow = document.getElementById(\`details-\${jobId}\`);
-                const arrow = document.getElementById(\`arrow-\${jobId}\`);
-                if (detailsRow && arrow) {
-                  detailsRow.classList.toggle("hidden");
-                  if (detailsRow.classList.contains("hidden")) {
-                    arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
-                  } else {
-                    arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
-                  }
-                }
-              }
+              document.addEventListener('DOMContentLoaded', () => {
+                const toggles = document.querySelectorAll('.job-details-toggle');
+                toggles.forEach(toggle => {
+                  toggle.addEventListener('click', function() {
+                    const jobId = this.dataset.jobId;
+                    const detailsRow = document.getElementById(\`details-\${jobId}\`);
+                    // The arrow SVG itself has the ID arrow-\${jobId}
+                    const arrow = document.getElementById(\`arrow-\${jobId}\`);
+
+                    if (detailsRow && arrow) {
+                      detailsRow.classList.toggle("hidden");
+                      if (detailsRow.classList.contains("hidden")) {
+                        // Right-facing arrow (collapsed)
+                        arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
+                      } else {
+                        // Down-facing arrow (expanded)
+                        arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
+                      }
+                    }
+                  });
+                });
+              });
             `}
           </script>
         </>