style `recent`, link to files list

1 files changed, 16 insertions, 8 deletions

diff --git a/resources/index.html b/resources/index.html
index 8fb57d2..88da34e 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -78,7 +78,11 @@
        currentPos.value=time;
      }
 
+     const filesOpenAbort = new AbortController();
+
      async function browseTo(id) {
+       filesOpenAbort.abort();
+       document.querySelector('#files').open=true;
        const fileList = document.querySelector('ul#file-list');
        const pathList = document.querySelector('ul#path-list');
        const itemTemplate = document.querySelector('#file-item');
@@ -129,7 +133,11 @@
                         await browseTo(null);
                       }
                     },
-                    { once:true, passive:true },
+                    {
+                      once:true,
+                      passive:true,
+                      signal:filesOpenAbort.signal,
+                    },
                   );
 
          document.querySelector('#recent').
@@ -210,27 +218,27 @@
        transform: scaleY(5);
      }
 
-     #files {
+     .file-list {
        width: 100%;
        overflow-x: scroll;
      }
-     #files summary {
+     .file-list summary {
        position: sticky;
        left: 0;
      }
-     #files a {
+     .file-list a {
        text-decoration: none;
        color: inherit;
      }
 
-     #files ul {
+     .file-list ul {
        width: min-content;
        margin-top: 0;
        font-size: 50%;
        list-style-type: none;
      }
 
-     #files li {
+     .file-list li {
        white-space: pre;
      }
 
@@ -280,14 +288,14 @@
           </tr>
         </table>
       </details>
-      <details id="files">
+      <details id="files" class="file-list">
         <summary>files</summary>
         <ul id="path-list">
         </ul>
         <ul id="file-list">
         </ul>
       </details>
-      <details id="recent">
+      <details id="recent" class="file-list">
         <summary>recent</summary>
         <ul id="recent-list">
         </ul>