✨feature: Add page for signle site test list

public/stylesheets/style.css

@@ -7,6 +7,7 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
     --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-400: oklch(70.7% 0.022 261.325);
@@ -35,6 +36,7 @@
     --color-success: oklch(64.01% 0.1751 146.7);
     --color-info: oklch(0.55 0.0922 211.57);
     --color-warning: oklch(84.42% 0.1722 84.93);
+    --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
     --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
     --h1: calc(var(--text-base) * 2.25);
     --h2: calc(var(--text-base) * 1.75);
@@ -2324,6 +2326,9 @@
   .resize {
     resize: both;
   }
+  .list-none {
+    list-style-type: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -2417,6 +2422,9 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-18px {
+    font-size: var(--text-18px);
+  }
   .text-25px {
     font-size: var(--text-25px);
   }
@@ -2449,6 +2457,9 @@
   .text-info-content\! {
     color: var(--color-info-content) !important;
   }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -2498,6 +2509,10 @@
       --cardtitle-fs: 1.25rem;
     }
   }
+  .badge-info {
+    --badge-color: var(--color-info);
+    --badge-fg: var(--color-info-content);
+  }
   .btn-info {
     --btn-color: var(--color-info);
     --btn-fg: var(--color-info-content);

views/sites.ejs

@@ -5,10 +5,10 @@
 
   <%- include('add-form'); -%>
 
-  <h2 class="text-25px font-bold mt-8">Your Tests</h2>
+  <h2 class="text-25px font-bold mt-8">Tests for <%= sites[0].domain_name %></h2>
 
   <div class="mt-8">
-    <%- include('domain-cards', { data: sites }); -%>
+    <%- include('test-list', { sites: sites }); -%>
   </div>
 </article>
 

views/test-list.ejs

@@ -0,0 +1,23 @@
+<%
+// Helper function to format date
+function formatDate(dateString) {
+  let date = new Date(dateString);
+  return date.toLocaleString('en-CA', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  });
+}
+%>
+
+<ul class="list bg-base-100 rounded-box shadow-md mt-8">
+  <% for (let i=0; i < sites.length; i++) { %>
+    <li class="list-row list-none items-center gap-8">
+      <h3 class="text-slate-300 m-0 p-0"><a href="/test/<%= i %>" class="text-slate-300 link">Test <%= i+1 %></a></h3>
+      <span class="site-name list-col-grow text-18px"><%= sites[i].domain_name %> - <%= formatDate(sites[i].created_at) %></span>
+      <span class="badge badge-info">In Progress</span>
+    </li>
+  <% } %>
+</ul>