added custom details arrow (needs final svg)

app/main.css

@@ -105,10 +105,22 @@ details {
   overflow: hidden;
 }
 
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+details > summary > svg {
+  transition: all 0.25s cubic-bezier(0.07, 0.95, 0, 1);
+}
+
 details[open] {
   overflow-y: auto;
 }
 
+details[open] > summary > svg {
+  transform: rotate(90deg);
+}
+
 footer li:hover {
   text-decoration: underline;
 }

app/ui/archiveTile.js

@@ -126,11 +126,22 @@ function archiveDetails(translate, archive) {
         ${archive.open ? 'open' : ''}
         ontoggle="${toggled}"
       >
-        <summary class="text-blue-dark text-sm cursor-pointer"
-          >${translate('fileCount', {
-            num: archive.manifest.files.length
-          })}</summary
+        <summary
+          class="flex items-center text-blue-dark text-sm cursor-pointer outline-none"
         >
+          <svg
+            class="fill-current w-4 h-4 mr-1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"
+            />
+          </svg>
+          ${translate('fileCount', {
+            num: archive.manifest.files.length
+          })}
+        </summary>
         ${list(
           archive.manifest.files.map(f => fileInfo(f)),
           'list-reset h-full'