Reader: show cover, title, and author in sidebar

reader.html

@@ -7,6 +7,7 @@
 <style>
 body {
     margin: 0;
+    font: menu;
     font-family: system-ui, sans-serif;
 }
 #drop-target {
@@ -111,6 +112,34 @@ body {
     opacity: 1;
     transition-delay: 0s;
 }
+#side-bar-header {
+    padding: 1rem;
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    align-items: center;
+}
+#side-bar-cover {
+    height: 10vh;
+    min-height: 60px;
+    max-height: 180px;
+    border-radius: 3px;
+    border: 0;
+    background: lightgray;
+    box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
+    margin-inline-end: 1rem;
+}
+#side-bar-cover:not([src]) {
+    display: none;
+}
+#side-bar-title {
+    margin: .5rem 0;
+    font-size: inherit;
+}
+#side-bar-author {
+    margin: .5rem 0;
+    font-size: small;
+    color: GrayText;
+}
 #toc-view {
     padding: .5rem;
     overflow-y: scroll;
@@ -179,6 +208,13 @@ body {
 </div>
 <div id="dimming-overlay" aria-hidden="true"></div>
 <div id="side-bar">
+    <div id="side-bar-header">
+        <img id="side-bar-cover">
+        <div>
+            <h1 id="side-bar-title"></h1>
+            <p id="side-bar-author"></p>
+        </div>
+    </div>
     <div id="toc-view"></div>
 </div>
 <div id="header-bar" class="toolbar">

reader.js

@@ -132,15 +132,25 @@ const open = async file => {
     view.setAppearance({ css: getCSS(style) })
     view.renderer.next()
 
-    const title = view.book.metadata?.title
-    if (title) document.title = title
+    const { book } = view
+    const title = book.metadata?.title ?? 'Untitled Book'
+    document.title = title
+    $('#side-bar-title').innerText = title
+    const author = book.metadata?.author
+    $('#side-bar-author').innerText = typeof author === 'string' ? author
+        : author
+            ?.map(author => typeof author === 'string' ? author : author.name)
+            ?.join(', ')
+            ?? ''
+    book.getCover?.()?.then(blob =>
+        blob ? $('#side-bar-cover').src = URL.createObjectURL(blob) : null)
 
     const closeSideBar = () => {
         $('#dimming-overlay').classList.remove('show')
         $('#side-bar').classList.remove('show')
     }
 
-    const toc = view.book.toc
+    const toc = book.toc
     if (toc) {
         const onclick = href => {
             view.goTo(href).catch(e => console.error(e))