frontend: refactor collection list to allow for dialogs

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);
+      position: relative;
-      border-radius: 12px;
+      z-index: 1;
-      margin: 12px 0;
+      pointer-events: none;
-      box-shadow: 4px 2px 12px -6px black;
+
-      overflow: hidden;
+      a,
+      button {
+        pointer-events: all;
+        cursor: pointer;
+      }
 
       .title {
         font-weight: bold;
@@ -283,10 +298,10 @@ ul.collection-list {
         display: flex;
         gap: 12px;
       }
+    }
 
-      &:hover {
+    &:hover {
-        background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
+      background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
-      }
     }
   }
 }

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>

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>