From 30b563c7d17b1fe169a77ef20e7cbe213cc241ff Mon Sep 17 00:00:00 2001
From: andreia <andreia.velasco@canonical.com>
Date: Wed, 25 Mar 2026 12:08:51 +0100
Subject: [PATCH 1/6] add event listener to toggle collapsed attribute in
 objective name tbody elements

---
 dashboard/dashboard/static/project-detail.css      |  5 ++++-
 dashboard/dashboard/templates/base.html            |  1 +
 dashboard/projects/templates/projects/project.html | 11 +++++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/dashboard/dashboard/static/project-detail.css b/dashboard/dashboard/static/project-detail.css
index ce44664..051811e 100644
--- a/dashboard/dashboard/static/project-detail.css
+++ b/dashboard/dashboard/static/project-detail.css
@@ -1,4 +1,7 @@
-table.objectives tr.objective td.name {background-color: #205067; color: white; font-weight: bold;}
+table.objectives tr.objective td.name {background-color: #205067; color: white; font-weight: bold; cursor: pointer; user-select: none;}
+table.objectives tr.objective td.name::before {content: "▼ "; font-size: 0.75em; opacity: 0.8;}
+table.objectives tbody.collapsed tr.objective td.name::before {content: "▶ ";}
+table.objectives tbody.collapsed tr:not(.objective) {display: none;}
 table.objectives tr.level {background-color: #f0f0f0; font-weight: bold;}
 
 table.objectives td p, th p {margin: .2rem 0}
diff --git a/dashboard/dashboard/templates/base.html b/dashboard/dashboard/templates/base.html
index 3e4f72a..e08b6f1 100644
--- a/dashboard/dashboard/templates/base.html
+++ b/dashboard/dashboard/templates/base.html
@@ -12,5 +12,6 @@
 
   <body {% block body_attributes %}{% endblock %}>
       {% block content %}{% endblock %}
+      {% block eventlisteners %}{% endblock %}
   </body>
 </html>
\ No newline at end of file
diff --git a/dashboard/projects/templates/projects/project.html b/dashboard/projects/templates/projects/project.html
index 1e5bce4..cb3fca4 100644
--- a/dashboard/projects/templates/projects/project.html
+++ b/dashboard/projects/templates/projects/project.html
@@ -58,3 +58,14 @@ <h1>{{ project }}</h1>
   </div>
 
 {% endblock content %}
+
+{% block eventlisteners %}
+<script>
+  document.addEventListener('click', function (e) {
+    const nameTd = e.target.closest('tr.objective > td.objective.name');
+    if (nameTd) {
+      nameTd.closest('tbody').classList.toggle('collapsed');
+    }
+  });
+</script>
+{% endblock %}

From cda868b9fde957e70f361b76d779be2eeb17287d Mon Sep 17 00:00:00 2001
From: andreia <andreia.velasco@canonical.com>
Date: Wed, 25 Mar 2026 12:38:58 +0100
Subject: [PATCH 2/6] save collapsed state to local storage

---
 .../projects/templates/projects/project.html  | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/dashboard/projects/templates/projects/project.html b/dashboard/projects/templates/projects/project.html
index cb3fca4..93b7e92 100644
--- a/dashboard/projects/templates/projects/project.html
+++ b/dashboard/projects/templates/projects/project.html
@@ -61,11 +61,38 @@ <h1>{{ project }}</h1>
 
 {% block eventlisteners %}
 <script>
+  const LOCAL_STORAGE_KEY = 'collapsed_objectives_{{ project.id }}';
+
+  function getCollapsed() {
+    return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY) || '[]');
+  }
+
+  function saveCollapsed(ids) {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(ids));
+  }
+
+  // Restore collapsed state on page load.
+  const collapsed = getCollapsed();
+  document.querySelectorAll('tbody[id]').forEach(function (tbody) {
+    if (collapsed.includes(tbody.id)) {
+      tbody.classList.add('collapsed');
+    }
+  });
+
+  // Toggle on click and persist.
   document.addEventListener('click', function (e) {
     const nameTd = e.target.closest('tr.objective > td.objective.name');
-    if (nameTd) {
-      nameTd.closest('tbody').classList.toggle('collapsed');
+    if (!nameTd) return;
+    const tbody = nameTd.closest('tbody');
+    tbody.classList.toggle('collapsed');
+    const ids = getCollapsed();
+    if (tbody.classList.contains('collapsed')) {
+      if (!ids.includes(tbody.id)) ids.push(tbody.id);
+    } else {
+      const i = ids.indexOf(tbody.id);
+      if (i > -1) ids.splice(i, 1);
     }
+    saveCollapsed(ids);
   });
 </script>
 {% endblock %}

From 2c6aec071fbe70579d0d632586cd77f2c4ec363c Mon Sep 17 00:00:00 2001
From: andreia <andreia.velasco@canonical.com>
Date: Wed, 25 Mar 2026 13:12:39 +0100
Subject: [PATCH 3/6] add test

---
 .../projects/templates/projects/project.html  |  8 +++-
 dashboard/test_browser.py                     | 37 +++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/dashboard/projects/templates/projects/project.html b/dashboard/projects/templates/projects/project.html
index 93b7e92..b13392f 100644
--- a/dashboard/projects/templates/projects/project.html
+++ b/dashboard/projects/templates/projects/project.html
@@ -61,7 +61,9 @@ <h1>{{ project }}</h1>
 
 {% block eventlisteners %}
 <script>
-  const LOCAL_STORAGE_KEY = 'collapsed_objectives_{{ project.id }}';
+  // TODO: unsure how IDs are computed - will the have the same lifetime as 
+  // the local storage? Should we use project.name instead?
+  const LOCAL_STORAGE_KEY = 'collapsed_objectives_{{ project.id }}'; 
 
   function getCollapsed() {
     return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY) || '[]');
@@ -79,12 +81,14 @@ <h1>{{ project }}</h1>
     }
   });
 
-  // Toggle on click and persist.
+  // Toggle on click.
   document.addEventListener('click', function (e) {
     const nameTd = e.target.closest('tr.objective > td.objective.name');
     if (!nameTd) return;
+    
     const tbody = nameTd.closest('tbody');
     tbody.classList.toggle('collapsed');
+    
     const ids = getCollapsed();
     if (tbody.classList.contains('collapsed')) {
       if (!ids.includes(tbody.id)) ids.push(tbody.id);
diff --git a/dashboard/test_browser.py b/dashboard/test_browser.py
index 5bc8fa3..5f871e7 100644
--- a/dashboard/test_browser.py
+++ b/dashboard/test_browser.py
@@ -189,3 +189,40 @@ def test_commitment_table(page):
 
 def test_last_review(page):
     expect(page.get_by_role("textbox", name="Last review:")).to_have_value("2024-12-16")
+
+
+def test_collapsing_objectives(page):
+    """Check that objective rows collapse/expand on click and the state persists in localStorage."""
+
+    storage_key = "collapsed_objectives_1" 
+    tbody = page.locator("tbody#colourfulness")
+
+    # Clear any leftover state.
+    page.evaluate(f"localStorage.removeItem('{storage_key}')")
+
+    # Colourfulness objective should not be collapsed by default, so description row should be visible.
+    description_row = tbody.locator("tr").nth(1)
+    expect(description_row).to_be_visible()
+
+    # Click the objective name to collapse.
+    tbody.locator("tr.objective td.objective.name").click()
+    assert page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
+    expect(description_row).to_be_hidden()
+
+    # The slug is written to localStorage.
+    stored = page.evaluate(f"JSON.parse(localStorage.getItem('{storage_key}') || '[]')")
+    assert "colourfulness" in stored
+
+    # Reload the page — collapsed state must be restored from localStorage.
+    page.reload()
+    assert page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
+    expect(page.locator("tbody#colourfulness tr").nth(1)).to_be_hidden()
+
+    # Click again to expand.
+    page.locator("tbody#colourfulness tr.objective td.objective.name").click()
+    assert not page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
+    expect(page.locator("tbody#colourfulness tr").nth(1)).to_be_visible()
+
+    # Slug is removed from localStorage.
+    stored = page.evaluate(f"JSON.parse(localStorage.getItem('{storage_key}') || '[]')")
+    assert "colourfulness" not in stored

From 907e420727ffd949788e2ee2fd828c9790d68625 Mon Sep 17 00:00:00 2001
From: andreia <andreia.velasco@canonical.com>
Date: Wed, 25 Mar 2026 13:46:05 +0100
Subject: [PATCH 4/6] clean up

---
 .../projects/templates/projects/project.html  |  4 +---
 dashboard/test_browser.py                     | 20 ++++++++-----------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/dashboard/projects/templates/projects/project.html b/dashboard/projects/templates/projects/project.html
index b13392f..0fe3f0e 100644
--- a/dashboard/projects/templates/projects/project.html
+++ b/dashboard/projects/templates/projects/project.html
@@ -61,8 +61,6 @@ <h1>{{ project }}</h1>
 
 {% block eventlisteners %}
 <script>
-  // TODO: unsure how IDs are computed - will the have the same lifetime as 
-  // the local storage? Should we use project.name instead?
   const LOCAL_STORAGE_KEY = 'collapsed_objectives_{{ project.id }}'; 
 
   function getCollapsed() {
@@ -88,7 +86,7 @@ <h1>{{ project }}</h1>
     
     const tbody = nameTd.closest('tbody');
     tbody.classList.toggle('collapsed');
-    
+
     const ids = getCollapsed();
     if (tbody.classList.contains('collapsed')) {
       if (!ids.includes(tbody.id)) ids.push(tbody.id);
diff --git a/dashboard/test_browser.py b/dashboard/test_browser.py
index 5f871e7..ac74082 100644
--- a/dashboard/test_browser.py
+++ b/dashboard/test_browser.py
@@ -192,7 +192,7 @@ def test_last_review(page):
 
 
 def test_collapsing_objectives(page):
-    """Check that objective rows collapse/expand on click and the state persists in localStorage."""
+    """Check that objective rows collapse/expand on click and the state persists in browser's local storage."""
 
     storage_key = "collapsed_objectives_1" 
     tbody = page.locator("tbody#colourfulness")
@@ -200,29 +200,25 @@ def test_collapsing_objectives(page):
     # Clear any leftover state.
     page.evaluate(f"localStorage.removeItem('{storage_key}')")
 
-    # Colourfulness objective should not be collapsed by default, so description row should be visible.
-    description_row = tbody.locator("tr").nth(1)
-    expect(description_row).to_be_visible()
+    # Colourfulness objective is not collapsed by default.
+    assert not page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
 
-    # Click the objective name to collapse.
+    # Click objective name, check that it collapses
     tbody.locator("tr.objective td.objective.name").click()
     assert page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
-    expect(description_row).to_be_hidden()
 
-    # The slug is written to localStorage.
+    # Check that it is written to localStorage.
     stored = page.evaluate(f"JSON.parse(localStorage.getItem('{storage_key}') || '[]')")
     assert "colourfulness" in stored
 
-    # Reload the page — collapsed state must be restored from localStorage.
+    # Reload the page, check that the objective remains collapsed.
     page.reload()
     assert page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
-    expect(page.locator("tbody#colourfulness tr").nth(1)).to_be_hidden()
 
-    # Click again to expand.
+    # Click objective to expand, check that it is no longer collapsed.
     page.locator("tbody#colourfulness tr.objective td.objective.name").click()
     assert not page.evaluate("document.querySelector('tbody#colourfulness').classList.contains('collapsed')")
-    expect(page.locator("tbody#colourfulness tr").nth(1)).to_be_visible()
 
-    # Slug is removed from localStorage.
+    # Check that it is removed from localStorage.
     stored = page.evaluate(f"JSON.parse(localStorage.getItem('{storage_key}') || '[]')")
     assert "colourfulness" not in stored

From 313b80103b77c22b5283d8e9d843dc989d4375c3 Mon Sep 17 00:00:00 2001
From: andreia <andreia.velasco@canonical.com>
Date: Wed, 25 Mar 2026 13:57:12 +0100
Subject: [PATCH 5/6] cosmetic changes

---
 dashboard/dashboard/static/project-detail.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dashboard/dashboard/static/project-detail.css b/dashboard/dashboard/static/project-detail.css
index 051811e..0894d03 100644
--- a/dashboard/dashboard/static/project-detail.css
+++ b/dashboard/dashboard/static/project-detail.css
@@ -1,6 +1,6 @@
-table.objectives tr.objective td.name {background-color: #205067; color: white; font-weight: bold; cursor: pointer; user-select: none;}
-table.objectives tr.objective td.name::before {content: "▼ "; font-size: 0.75em; opacity: 0.8;}
-table.objectives tbody.collapsed tr.objective td.name::before {content: "▶ ";}
+table.objectives tr.objective td.name {background-color: #205067; color: white; font-weight: bold; cursor: pointer; user-select: none; border: 0.5px solid #366177;}
+table.objectives tr.objective td.name::before {content: "▶"; font-size: 0.7em; display: inline-block; transform: rotate(90deg); margin-right: 0.4em;}
+table.objectives tbody.collapsed tr.objective td.name::before {content: "▶"; transform: rotate(0deg);}
 table.objectives tbody.collapsed tr:not(.objective) {display: none;}
 table.objectives tr.level {background-color: #f0f0f0; font-weight: bold;}
 

From dc570a01b90cff50472a6c81dbf0367a18a5da5d Mon Sep 17 00:00:00 2001
From: andreia <andreia.velasco@canonical.com>
Date: Wed, 25 Mar 2026 14:00:36 +0100
Subject: [PATCH 6/6] run make collectstatic-clear

---
 dashboard/staticfiles/project-detail.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/dashboard/staticfiles/project-detail.css b/dashboard/staticfiles/project-detail.css
index ce44664..0894d03 100644
--- a/dashboard/staticfiles/project-detail.css
+++ b/dashboard/staticfiles/project-detail.css
@@ -1,4 +1,7 @@
-table.objectives tr.objective td.name {background-color: #205067; color: white; font-weight: bold;}
+table.objectives tr.objective td.name {background-color: #205067; color: white; font-weight: bold; cursor: pointer; user-select: none; border: 0.5px solid #366177;}
+table.objectives tr.objective td.name::before {content: "▶"; font-size: 0.7em; display: inline-block; transform: rotate(90deg); margin-right: 0.4em;}
+table.objectives tbody.collapsed tr.objective td.name::before {content: "▶"; transform: rotate(0deg);}
+table.objectives tbody.collapsed tr:not(.objective) {display: none;}
 table.objectives tr.level {background-color: #f0f0f0; font-weight: bold;}
 
 table.objectives td p, th p {margin: .2rem 0}
