From 0e68f1bdced197427f5b7300b2db516e064d8006 Mon Sep 17 00:00:00 2001
From: Lennart <18233294+lennart-k@users.noreply.github.com>
Date: Mon, 7 Jul 2025 11:22:20 +0200
Subject: [PATCH] frontend: refactor collection list to allow for dialogs

---
 crates/frontend/public/assets/style.css       | 35 +++++++++++++------
 .../sections/addressbooks_section.html        | 10 +++---
 .../sections/calendars_section.html           | 10 +++---
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 87f4595..503f784 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -205,10 +205,21 @@ ul.collection-list {
 
   li.collection-list-item {
     list-style: none;
-    display: contents;
+    display: block;
+    position: relative;
+    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 5%);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    margin: 12px 0;
+    box-shadow: 4px 2px 12px -6px black;
+    overflow: hidden;
 
     a {
-      background: color-mix(in srgb, var(--background-color), var(--dilute-color) 5%);
+      position: absolute;
+      inset: 2px;
+    }
+
+    .inner {
       display: grid;
       min-height: 80px;
       height: fit-content;
@@ -227,11 +238,15 @@ ul.collection-list {
       text-decoration: none;
       padding-left: 12px;
 
-      border: 2px solid var(--border-color);
-      border-radius: 12px;
-      margin: 12px 0;
-      box-shadow: 4px 2px 12px -6px black;
-      overflow: hidden;
+      position: relative;
+      z-index: 1;
+      pointer-events: none;
+
+      a,
+      button {
+        pointer-events: all;
+        cursor: pointer;
+      }
 
       .title {
         font-weight: bold;
@@ -283,10 +298,10 @@ ul.collection-list {
         display: flex;
         gap: 12px;
       }
+    }
 
-      &:hover {
-        background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
-      }
+    &:hover {
+      background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
     }
   }
 }
diff --git a/crates/frontend/public/templates/components/sections/addressbooks_section.html b/crates/frontend/public/templates/components/sections/addressbooks_section.html
index c75a012..73c817c 100644
--- a/crates/frontend/public/templates/components/sections/addressbooks_section.html
+++ b/crates/frontend/public/templates/components/sections/addressbooks_section.html
@@ -2,7 +2,8 @@
 <ul class="collection-list">
   {% for (meta, addressbook) in addressbooks %}
   <li class="collection-list-item">
-    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
+    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}"></a>
+    <div class="inner">
       <span class="title">
         {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
         {{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}
@@ -21,7 +22,7 @@
       <div class="metadata">
         {{ meta.len }} ({{ meta.size | filesizeformat }}) objects, {{ meta.deleted_len }} ({{ meta.deleted_size | filesizeformat }}) deleted objects
       </div>
-    </a>
+    </div>
   </li>
   {% else %}
   You do not have any addressbooks yet
@@ -32,7 +33,8 @@
 <ul class="collection-list">
   {% for (meta, addressbook) in deleted_addressbooks %}
   <li class="collection-list-item">
-    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
+    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}"></a>
+    <div class="inner">
       <span class="title">
         {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
         {{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}
@@ -50,7 +52,7 @@
       <div class="metadata">
         {{ meta.len }} ({{ meta.size | filesizeformat }}) objects, {{ meta.deleted_len }} ({{ meta.deleted_size | filesizeformat }}) deleted objects
       </div>
-    </a>
+    </div>
   </li>
   {% endfor %}
 </ul>
diff --git a/crates/frontend/public/templates/components/sections/calendars_section.html b/crates/frontend/public/templates/components/sections/calendars_section.html
index 357d241..cbd1f40 100644
--- a/crates/frontend/public/templates/components/sections/calendars_section.html
+++ b/crates/frontend/public/templates/components/sections/calendars_section.html
@@ -3,7 +3,8 @@
   {% for (meta, calendar) in calendars %}
   {% let color = calendar.color.to_owned().unwrap_or("transparent".to_owned()) %}
   <li class="collection-list-item" style="--color: {{ color }}">
-    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id }}">
+    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id }}"></a>
+    <div class="inner">
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
@@ -31,7 +32,7 @@
         {{ meta.len }} ({{ meta.size | filesizeformat }}) objects, {{ meta.deleted_len }} ({{ meta.deleted_size | filesizeformat }}) deleted objects
       </div>
       <div class="color-chip"></div>
-    </a>
+    </div>
   </li>
   {% else %}
   You do not have any calendars yet
@@ -43,7 +44,8 @@
   {% for (meta, calendar) in deleted_calendars %}
   {% let color = calendar.color.to_owned().unwrap_or("transparent".to_owned()) %}
   <li class="collection-list-item" style="--color: {{ color }}">
-    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}">
+    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}"></a>
+    <div class="inner">
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
@@ -67,7 +69,7 @@
         {{ meta.len }} ({{ meta.size | filesizeformat }}) objects, {{ meta.deleted_len }} ({{ meta.deleted_size | filesizeformat }}) deleted objects
       </div>
       <div class="color-chip"></div>
-    </a>
+    </div>
   </li>
   {% endfor %}
 </ul>