Update first page of Lists (#388)

This updates the first page of the Lists feature with 2 states:

* an empty state containing no lists and a How it works section
* where there are 2 lists, and "How it works" is collapsed into a
Details component


## Screenshots

### Empty state

![Screenshot 2025-07-07 at 13 03
10](https://github.com/user-attachments/assets/6a4e267b-e391-45d0-8e81-68dc2942fff6)


### State with some lists

![Screenshot 2025-07-07 at 13 03
47](https://github.com/user-attachments/assets/37821e77-e978-4702-b5fc-21e77d07f137)

Author: frankieroberto

app/routes/lists.js

@@ -1,5 +1,29 @@
 module.exports = router => {
 
 
+  router.get('/lists', (req, res) => {
+
+    const currentOrganisation = res.locals.currentOrganisation;
+    const lists = currentOrganisation.lists || []
+
+    res.render('lists/index', {
+      lists
+    })
+
+  })
+
+  router.post('/lists/add-numbers', (req, res) => {
+
+    const currentOrganisation = res.locals.currentOrganisation;
+    currentOrganisation.lists ||= []
+
+    // This bit isn’t working yet so faked for now.
+    currentOrganisation.lists.push({
+      siteCode: "TODO"
+    })
+
+    res.redirect('/lists/list')
+
+  })
 
 }

app/views/lists/add-nhs-numbers.html

@@ -19,6 +19,8 @@
         }) }}
       {% endif %}
 
+      <form action="/lists/add-numbers" method="post" novalidate>
+
 <h1 class="nhsuk-heading-l">Add a list of NHS numbers</h1>
 
 <p class="nhsuk-body-m">Copy and paste NHS numbers from a spreadsheet or another source.</p>
@@ -43,10 +45,9 @@ <h1 class="nhsuk-heading-l">Add a list of NHS numbers</h1>
 
 
   {{ button({
-    text: "Confirm",
-    href: "/lists/list"
+    text: "Confirm"
   }) }}
-
+</form>
 
 {% endblock %}
 

app/views/lists/index.html

@@ -17,22 +17,34 @@ <h1 class="nhsuk-heading-l">Lists</h1>
 
       <p class="nhsuk-body-m">To save time when you record vaccinations, you can add a list of NHS numbers.</p>
 
-      <h2 class="nhsuk-heading-m">How it works</h2>
-
-      <p>Add a list of NHS numbers and we will match them to patient details.</p>
-      <p>This means you will not have to input each patient's NHS number when you record vaccinations.</p>
-        {{ button({
-          text: "Add a list",
-          href: "/lists/team"
+      {% set howItWorksHtml %}
+        <p>Add a list of NHS numbers and we will match them to patient details.</p>
+        <p>This means you will not have to input each patient's NHS number when you record vaccinations.</p>
+      {% endset %}
+
+      {% if (lists | length) > 0 %}
+        {{ details({
+          text: "How it works",
+          html: howItWorksHtml
         }) }}
 
-      <br><br>
+        <ul class="nhsuk-list xnhsuk-u-margin-top-6 nhsuk-u-margin-bottom-6">
+          <li><a href="/lists/team-lists">Anne Ward Maternity Unit</a></li>
+          <li><a href="/lists/team-lists">St Mary’s Hospital </a></li>
+        </ul>
+
+      {% else %}
+        <h2 class="nhsuk-heading-m">How it works</h2>
+
+        {{ howItWorksHtml | safe }}
 
-      <h2 class="nhsuk-heading-m">Sites or teams</h2>
+      {% endif %}
 
-      <p class="nhsuk-body-m"><a href="/lists/team-lists">Anne Ward Maternity Unit</a></p>
 
-      <p class="nhsuk-body-m"><a href="/lists/team-lists">St Mary’s Hospital</a></p>
+      {{ button({
+        text: "Add a list",
+        href: "/lists/team"
+      }) }}
 
     </div>
   </div>