Update Chapters list to make modifying a chapter take less scrolling.

bindery/static/js/stories.js

@@ -224,9 +224,9 @@ export function storiesPage(main, _params, config) {
   fill(
     main,
     h(
-      'section',
-      { class: 'card' },
-      h('h2', {}, 'Add stories'),
+      'details',
+      { class: 'card', open: true },
+      h('summary', {}, h('h2', {}, 'Add stories')),
       urls,
       h(
         'div',
@@ -240,16 +240,18 @@ export function storiesPage(main, _params, config) {
       ),
     ),
     h(
-      'section',
-      { class: 'card' },
+      'details',
+      { class: 'card', open: true },
       h(
-        'div',
+        'summary',
         { class: 'section-heading' },
         h('h2', {}, 'Stories'),
         h('input', {
           type: 'search',
           placeholder: 'Filter',
           'aria-label': 'Filter stories',
+          // Prevents a click here from also toggling the details open or closed.
+          onclick: (e) => e.preventDefault(),
           oninput: (e) => {
             filter = e.target.value;
             if (stories) render();
@@ -258,7 +260,7 @@ export function storiesPage(main, _params, config) {
       ),
       table,
     ),
-    h('section', { class: 'card' }, h('h2', {}, 'Jobs'), jobs.el),
+    h('details', { class: 'card', open: true }, h('summary', {}, h('h2', {}, 'Jobs')), jobs.el),
     h('details', { class: 'card' }, h('summary', {}, h('h2', {}, 'Import an epub file')), epubImport()),
     h('details', { class: 'card' }, h('summary', {}, h('h2', {}, 'Import from the library')), libraryImport(config)),
   );