Refactor chapter index into modal

And then some.

ACTIONS.md

@@ -306,7 +306,7 @@ Fires in the second column of the bottom action section in the `single-fcn_chapt
 
 **Hooked Actions:**
 * `fictioneer_chapter_subscribe_button()` – Subscription popup menu. Priority 10.
-* `fictioneer_chapter_index_popup_menu()` – Index popup menu with story and chapter links. Priority 20.
+* `fictioneer_chapter_index_modal_toggle()` – Toggle for the chapter index modal. Priority 20.
 * `fictioneer_chapter_bookmark_jump_button()` – Button to scroll to chapter bookmark (if set). Priority 30.
 
 ---
@@ -735,7 +735,6 @@ Fires right after the main mobile menu frame in the `partials/_mobile-menu.php`
 **Hooked Actions:**
 * `fictioneer_mobile_follows_frame()` – Frame for mobile updates (Follows). Priority 10.
 * `fictioneer_mobile_bookmarks_frame()` – Frame for mobile bookmarks. Priority 20.
-* `fictioneer_mobile_chapters_frame()` – Frame for the mobile chapter list. Priority 30.
 
 ---
 

CUSTOMIZE.md

@@ -190,23 +190,23 @@ Or change them completely, if you want even depending on the chapter or associat
  * @return string New HTML list of list item.
  */
 
-function child_prefix_simple_chapter_list_item( $item, $post, $args ) {
+function child_prefix_chapter_index_list_item( $item, $post, $args ) {
   $prefix = get_post_meta( $post->ID, 'fictioneer_chapter_prefix', true );
 
   return sprintf(
-    '<li class="%1$s" data-position="%2$s" data-id="%3$s"><a href="%4$s">%5$s<span>%6$s%7$s</span></a></li>'
+    '<li class="%1$s" data-position="%2$s" data-id="%3$s"><a href="%4$s">%5$s<span class="truncate _1-1">%6$s%7$s</span></a></li>'
     implode( ' ', $args['classes'] ),
     $args['position'],
     $post->ID,
     get_the_permalink( $post->ID ),
     $args['icon'],
-    $prefix ? $prefix . ' ' : '',
-    $args['list_title'] ?: $args['title']
+    $prefix ? $prefix . ' ' : '', // New %6$s
+    $args['list_title'] ?: $args['title'] // Moved to %7$s
   );
 }
 
 // Priority 1 to execute the filter early
-add_filter( 'fictioneer_filter_chapter_index_item', 'child_prefix_simple_chapter_list_item', 1, 3 );
+add_filter( 'fictioneer_filter_chapter_index_item', 'child_prefix_chapter_index_list_item', 1, 3 );
 ```
 
 ## Only show a specific advanced meta field
@@ -450,7 +450,7 @@ add_filter( 'fictioneer_filter_get_story_data_indexed_chapter_statuses', 'child_
 add_filter( 'fictioneer_filter_allowed_chapter_permalinks', 'child_treat_scheduled_chapters_as_published' );
 ```
 
-**Alternative:** Set the `FICTIONEER_LIST_SCHEDULED_CHAPTERS` constant to true, which will automatically add all the aforementioned filters except for the removal of the next chapter note.
+**Alternative:** Set the `FICTIONEER_LIST_SCHEDULED_CHAPTERS` constant to `true` to automatically apply all the aforementioned filters, except for the removal of the next chapter note. This assumes you want scheduled chapters to be accessible; otherwise, you should selectively apply the filters you need.
 
 ```php
 if ( ! defined( 'FICTIONEER_LIST_SCHEDULED_CHAPTERS' ) ) {

FILTERS.md

@@ -298,7 +298,7 @@ Filters the array of grouped chapter data in the `fictioneer_story_chapters()` f
 ---
 
 ### `apply_filters( 'fictioneer_filter_chapter_icon', $icon_html, $chapter_id, $story_id )`
-Filters the HTML of the chapter icon before it is rendered. The display hierarchy is password icon > scheduled icon > text icon > chapter icon.
+Filters the HTML of the chapter icon before it is appended or rendered. The display hierarchy is password icon > scheduled icon > text icon > chapter icon.
 
 **Parameters:**
 * $icon_html (string) – HTML for the chapter icon.
@@ -320,12 +320,9 @@ Filters the intermediate output array in the `_chapter-header.php` partial befor
 
 ---
 
-### `apply_filters( 'fictioneer_filter_chapter_list_statuses', $statuses, $story_id )`
 ### `apply_filters( 'fictioneer_filter_chapter_index_list_statuses', $statuses, $story_id )`
 Filters the array of allowed chapter statuses when building the simple chapter list items in the `function fictioneer_get_chapter_list_data()` function. By default, only `['publish']` chapters are shown.
 
-**Note:** `fictioneer_filter_chapter_list_statuses` is deprecated as of 5.25.0.
-
 **Parameters:**
 * $statuses (array) – Array of chapter statuses.
 * $story_id (int) – Post ID of the story.
@@ -342,11 +339,8 @@ add_filter( 'fictioneer_filter_chapter_index_list_statuses', 'child_add_schedule
 
 ---
 
-### `apply_filters( 'fictioneer_filter_chapter_list_item', $item, $post, $args )`
 ### `apply_filters( 'fictioneer_filter_chapter_index_item', $item, $post, $args )`
-Filters each list item HTML string used in the chapter index popup and mobile menu section (only visible on chapter pages), build inside the `fictioneer_get_simple_chapter_list_items()` function. Not to be confused with the chapter list shown on story pages. You can either modify the string or build a new one from the given parameters.
-
-**Note:** `fictioneer_filter_chapter_list_item` is deprecated as of 5.25.0.
+Filters each list item HTML string used in the chapter index popup and mobile menu section (only visible on chapter pages), build inside the `fictioneer_get_chapter_index_html()` function. Not to be confused with the chapter list shown on story pages. You can either modify the string or build a new one from the given parameters.
 
 **Parameters:**
 * $item (string) – HTML for the list item with icon, ID, link, and title.
@@ -362,24 +356,36 @@ Filters each list item HTML string used in the chapter index popup and mobile me
 
 **Example:**
 ```php
-function child_prefix_simple_chapter_list_item( $item, $post, $args ) {
+function child_prefix_chapter_index_list_item( $item, $post, $args ) {
   $prefix = get_post_meta( $post->ID, 'fictioneer_chapter_prefix', true );
 
   return sprintf(
-    '<li class="%1$s" data-id="%2$s"><a href="%3$s">%4$s<span>%5$s%6$s</span></a></li>',
+    '<li class="%1$s" data-position="%2$s" data-id="%3$s"><a href="%4$s">%5$s<span class="truncate _1-1">%6$s%7$s</span></a></li>'
     implode( ' ', $args['classes'] ),
+    $args['position'],
     $post->ID,
     get_the_permalink( $post->ID ),
     $args['icon'],
-    $prefix ? $prefix . ' ' : '',
-    $args['list_title'] ?: $args['title']
+    $prefix ? $prefix . ' ' : '', // New %6$s
+    $args['list_title'] ?: $args['title'] // Moved to %7$s
   );
 }
-add_filter( 'fictioneer_filter_chapter_index_item', 'child_prefix_simple_chapter_list_item', 1, 3 );
+add_filter( 'fictioneer_filter_chapter_index_item', 'child_prefix_chapter_index_list_item', 1, 3 );
 ```
 
 ---
 
+### `apply_filters( 'fictioneer_filter_chapter_index_html', $html, $items, $story_id, $story_link )`
+Filters the HTML content of the chapter index modal before it is rendered. This is primarily useful for replacing the outer structure of the chapter list. To modify individual chapter list items, better to use `fictioneer_filter_chapter_index_item`.
+
+**Parameters:**
+* $html (string) – HTML content for the chapter index modal.
+* $items (string[]) - HTML of chapter list items.
+* $story_id (int) – ID of the story.
+* $story_link (string) – Link to the chapter’s story.
+
+---
+
 ### `apply_filters( 'fictioneer_filter_chapter_micro_menu', $micro_menu, $args )`
 Filters the intermediate output array of the chapter micro menu in the `fictioneer_get_chapter_micro_menu( $args )` function before it is imploded and rendered.
 
@@ -2181,7 +2187,7 @@ Same as the `fictioneer_filter_translations` filter, but only applied once when
 ---
 
 ### `apply_filters( 'fictioneer_filter_user_menu_items', $items )`
-Filters the intermediate output array of the `fictioneer_user_menu_items()` function before it is imploded and returned. Contains links to the user’s account, reading lists, and bookmarks as well as the site’s Discord, site settings modal toggle, and logout link. Used in the `partials/_icon-menu.php` partial if the user is logged in.
+Filters the intermediate output array of the `fictioneer_user_menu_items()` function before it is imploded and returned. Contains links to the user’s account, reading lists, and bookmarks as well as the site’s Discord, site settings modal toggle, and logout link. Used in the `fictioneer_render_icon_menu()` function if the user is logged in.
 
 **$items:**
 * $account (string|null) – Optional. List item with link to the user’s account.

includes/functions/_helpers-templates.php

@@ -1183,7 +1183,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
     // Only if there is a story...
     if ( ! empty( $args['story_post'] ) ) {
       // Mobile menu chapter list
-      $micro_menu['chapter_list'] = '<label id="micro-menu-label-open-chapter-list" for="mobile-menu-toggle" class="micro-menu__item micro-menu__chapter-list show-below-desktop" tabindex="-1"><i class="fa-solid fa-list"></i></label>';
+      $micro_menu['chapter_list'] = '<button id="micro-menu-label-open-chapter-list" data-click-action="open-dialog-modal" data-click-target="#fictioneer-chapter-index-dialog" class="micro-menu__item micro-menu__chapter-list show-below-desktop" tabindex="-1"><i class="fa-solid fa-list"></i></button>';
 
       // Story link
       $story_link = get_post_meta( $args['story_post']->ID ?? 0, 'fictioneer_story_redirect_link', true )
@@ -1260,16 +1260,16 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
 // =============================================================================
 
 /**
- * Returns array with ordered chapter index list item HTML strings
+ * Returns HTML for the chapter index list of a story
  *
  * @since 5.25.0
  *
  * @param int $story_id  The story ID.
  *
- * @return array Ordered array of list item HTMl strings (starting at 1).
+ * @return string Compiled chapter index list.
  */
 
-function fictioneer_get_chapter_index_array( $story_id ) {
+function fictioneer_get_chapter_index_html( $story_id ) {
   // Meta cache?
   $cache_plugin_active = fictioneer_caching_active( 'chapter_get_index_array' );
 
@@ -1277,23 +1277,25 @@ function fictioneer_get_chapter_index_array( $story_id ) {
     $last_story_update = get_post_modified_time( 'U', true, $story_id );
     $meta_cache = get_post_meta( $story_id, 'fictioneer_story_chapter_index_html', true );
 
-    if ( is_array( $meta_cache ) && is_array( $meta_cache['items'] ?? 0 ) ) {
+    if ( is_array( $meta_cache ) && ( $meta_cache['html'] ?? 0 ) ) {
       // ... still up-to-date and valid?
       if (
         ( $meta_cache['timestamp'] ?? 0 ) == $last_story_update &&
         ( $meta_cache['valid_until'] ?? 0 ) > time()
       ) {
-        return $meta_cache['items'];
+        return $meta_cache['html'];
       }
     }
   }
 
   // Setup
+  $story_link = get_post_meta( $story_id, 'fictioneer_story_redirect_link', true )
+    ?: get_permalink( $story_id );
   $chapters = fictioneer_get_story_chapter_posts( $story_id );
-  $allowed_statuses = apply_filters( 'fictioneer_filter_chapter_list_statuses', ['publish'], $story_id ); // Legacy
-  $allowed_statuses = apply_filters( 'fictioneer_filter_chapter_index_list_statuses', $allowed_statuses, $story_id );
+  $allowed_statuses = apply_filters( 'fictioneer_filter_chapter_index_list_statuses', ['publish'], $story_id );
   $hide_icons = get_post_meta( $story_id, 'fictioneer_story_hide_chapter_icons', true ) ||
     get_option( 'fictioneer_hide_chapter_icons' );
+  $prefer_chapter_icon = get_option( 'fictioneer_override_chapter_status_icons' );
   $position = 0;
 
   // Loop chapters...
@@ -1315,17 +1317,35 @@ function fictioneer_get_chapter_index_array( $story_id ) {
     $icon = '';
 
     // Mark for password
-    if ( ! empty( $chapter->post_password ) ) {
+    if ( $chapter->post_password ) {
       $classes[] = 'has-password';
     }
 
     // Chapter icon
-    if ( empty( $text_icon ) && ! $hide_icons ) {
+    if ( ! empty( $chapter->post_password ) ) {
+      $icon = '<i class="fa-solid fa-lock"></i>';
+    } elseif ( empty( $text_icon ) && ! $hide_icons ) {
       $icon = '<i class="' . fictioneer_get_icon_field( 'fictioneer_chapter_icon', $chapter->ID ) . '"></i>';
     } elseif ( ! $hide_icons ) {
       $icon = '<span class="text-icon">' . $text_icon . '</span>';
     }
 
+    if ( ! $hide_icons ) {
+      // Icon hierarchy: password > scheduled > text > normal
+      if ( ! $prefer_chapter_icon && $chapter->post_password ) {
+        $icon = '<i class="fa-solid fa-lock"></i>';
+      } elseif ( ! $prefer_chapter_icon && $chapter->post_status === 'future' ) {
+        $icon = '<i class="fa-solid fa-calendar-days"></i>';
+      } elseif ( $text_icon ) {
+        $icon = "<span class='text-icon'>{$text_icon}</span>";
+      } else {
+        $icon = fictioneer_get_icon_field( 'fictioneer_chapter_icon', $chapter->ID ) ?: FICTIONEER_DEFAULT_CHAPTER_ICON;
+        $icon = "<i class='{$icon}'></i>";
+      }
+
+      $icon = apply_filters( 'fictioneer_filter_chapter_icon', $icon, $chapter->ID, $story_id );
+    }
+
     // Compile args
     $args = array(
       'title' => $title,
@@ -1338,7 +1358,7 @@ function fictioneer_get_chapter_index_array( $story_id ) {
 
     // Build list item
     $item = sprintf(
-      '<li class="%1$s" data-position="%2$s" data-id="%3$s"><a href="%4$s">%5$s<span>%6$s</span></a></li>',
+      '<li class="%1$s" data-position="%2$s" data-id="%3$s"><a href="%4$s">%5$s<span class="truncate _1-1">%6$s</span></a></li>',
       implode( ' ', $classes ),
       $position,
       $chapter->ID,
@@ -1347,24 +1367,30 @@ function fictioneer_get_chapter_index_array( $story_id ) {
       $list_title ?: $title
     );
 
-    // Legacy filter
-    $item = apply_filters( 'fictioneer_filter_chapter_list_item', $item, $chapter, $args );
-
     // Append
     $items[ $position ] = apply_filters( 'fictioneer_filter_chapter_index_item', $item, $chapter, $args );
   }
 
+  // Compile HTML
+  $toggle = '<button type="button" data-click-action="toggle-chapter-index-order" class="chapter-index__order list-button" aria-label="' . esc_attr__( 'Toggle between ascending and descending order', 'fictioneer' ) . '"><i class="fa-solid fa-arrow-down-1-9 off"></i><i class="fa-solid fa-arrow-down-9-1 on"></i></button>';
+
+  $back_link = '<a href="' . esc_url( $story_link ) . '" class="chapter-index__back-link"><i class="fa-solid fa-caret-left"></i> <span>' . __( 'Back to Story', 'fictioneer' ) . '</span></a>';
+
+  $html = '<div class="chapter-index" data-order="asc" data-story-id="' . $story_id . '" data-current-id="' . get_the_ID() . '"><div class="chapter-index__control">' . $back_link . '<div class="chapter-index__sof">' . $toggle . '</div></div><ul id="chapter-index-list" class="chapter-index__list">' . implode( '', $items ) . '</ul></div>';
+
+  $html = apply_filters( 'fictioneer_filter_chapter_index_html', $html, $items, $story_id, $story_link );
+
   // Update meta cache
   if ( ! $cache_plugin_active ) {
     update_post_meta(
       $story_id,
       'fictioneer_story_chapter_index_html',
-      array( 'items' => $items, 'timestamp' => $last_story_update, 'valid_until' => time() + HOUR_IN_SECONDS )
+      array( 'html' => $html, 'timestamp' => $last_story_update, 'valid_until' => time() + HOUR_IN_SECONDS )
     );
   }
 
   // Return
-  return $items;
+  return $html;
 }
 
 // =============================================================================

includes/functions/hooks/_chapter_hooks.php

@@ -426,41 +426,56 @@ function fictioneer_chapter_fullscreen_buttons() {
 add_action( 'fictioneer_chapter_actions_top_center', 'fictioneer_chapter_fullscreen_buttons', 20 );
 
 // =============================================================================
-// CHAPTER INDEX POPUP MENU
+// CHAPTER INDEX DIALOG TOGGLE
 // =============================================================================
 
 /**
- * Outputs the HTML for the index popup menu
+ * Outputs the HTML for the chapter index dialog modal toggle
  *
  * @since 5.0.0
  *
  * @param WP_Post|null $args['story_post']  Optional. The story the chapter belongs to.
  */
 
-function fictioneer_chapter_index_popup_menu( $args ) {
+function fictioneer_chapter_index_modal_toggle( $args ) {
   // Abort if there is no story assigned
   if ( ! $args['story_post'] ) {
     return;
   }
 
-  // Story link
-  $story_link = get_post_meta( $args['story_post']->ID ?? 0, 'fictioneer_story_redirect_link', true )
-    ?: get_permalink( $args['story_post'] );
-
   // Start HTML ---> ?>
-  <div class="chapter-list-popup-toggle toggle-last-clicked button _secondary popup-menu-toggle tooltipped" tabindex="0" role="button" data-tooltip="<?php esc_attr_e( 'Index', 'fictioneer' ); ?>" aria-label="<?php esc_attr_e( 'Index', 'fictioneer' ); ?>" data-nosnippet>
+  <button class="button _secondary tooltipped" data-tooltip="<?php esc_attr_e( 'Index', 'fictioneer' ); ?>" aria-label="<?php esc_attr_e( 'Index', 'fictioneer' ); ?>" data-click-action="open-dialog-modal" data-click-target="#fictioneer-chapter-index-dialog">
     <i class="fa-solid fa-list"></i>
-    <div class="popup-menu _top _center _fixed-horizontal _align-items-right _v-scrolling">
-      <a href="<?php echo $story_link; ?>" class="">
-        <i class="fa-solid fa-caret-left"></i>
-        <span><?php _e( 'Back to Story', 'fictioneer' ); ?></span>
-      </a>
-      <div class="popup-menu__section"><ul data-target="popup-chapter-list" data-current-id="<?php the_ID(); ?>"></ul></div>
-    </div>
-  </div>
+  </button>
+  <?php // <--- End HTML
+}
+add_action( 'fictioneer_chapter_actions_bottom_center', 'fictioneer_chapter_index_modal_toggle', 20 );
+
+// =============================================================================
+// CHAPTER INDEX DIALOG
+// =============================================================================
+
+/**
+ * Outputs the HTML for the chapter index dialog modal
+ *
+ * @since 5.25.0
+ *
+ * @param int $story_id  ID of the story.
+ */
+
+function fictioneer_render_chapter_index_modal_html( $story_id ) {
+  // Start HTML ---> ?>
+  <dialog class="dialog-modal _chapter-index" id="fictioneer-chapter-index-dialog">
+    <div class="dialog-modal__wrapper">
+      <button class="dialog-modal__close" data-click-action="close-dialog-modal" aria-label="<?php esc_attr_e( 'Close modal', 'fictioneer' ); ?>"><?php fictioneer_icon( 'fa-xmark' ); ?></button>
+      <div class="dialog-modal__header"><?php _ex( 'Chapter Index', 'Chapter index modal header.', 'fictioneer' ); ?></div>
+      <div class="dialog-modal__row _chapter-index"><?php
+        echo fictioneer_get_chapter_index_html( $story_id );
+      ?></div>
+    </div>
+  </dialog>
   <?php // <--- End HTML
 }
-add_action( 'fictioneer_chapter_actions_bottom_center', 'fictioneer_chapter_index_popup_menu', 20 );
 
 // =============================================================================
 // CHAPTER BOOKMARK JUMP BUTTON

includes/functions/hooks/_mobile_menu_hooks.php

@@ -216,39 +216,6 @@ if ( get_option( 'fictioneer_enable_bookmarks' ) ) {
   add_action( 'fictioneer_mobile_menu_center', 'fictioneer_mobile_bookmarks_frame', 20 );
 }
 
-// =============================================================================
-// MOBILE MENU CHAPTERS FRAME
-// =============================================================================
-
-/**
- * Adds the chapters frame to the mobile menu
- *
- * @since 5.0.0
- */
-
-function fictioneer_mobile_chapters_frame() {
-  // Abort if...
-  if ( get_post_type() !== 'fcn_chapter' || is_archive() || is_search() ) {
-    return;
-  }
-
-  // Start HTML ---> ?>
-  <div class="mobile-menu__frame" data-frame="chapters">
-    <div class="mobile-menu__panel mobile-menu__chapters-panel">
-      <div class="mobile-menu__panel-header">
-        <button class="mobile-menu__back-button">
-          <i class="fa-solid fa-caret-left mobile-menu__item-icon"></i> <?php _e( 'Back', 'fictioneer' ); ?>
-        </button>
-      </div>
-      <div class="mobile-menu__list _chapters">
-        <ul id="mobile-menu-chapters-list" data-current-id="<?php the_ID(); ?>"></ul>
-      </div>
-    </div>
-  </div>
-  <?php // <--- End HTML
-}
-add_action( 'fictioneer_mobile_menu_center', 'fictioneer_mobile_chapters_frame', 30 );
-
 // =============================================================================
 // MOBILE MENU NAVIGATION PANEL
 // =============================================================================
@@ -320,11 +287,9 @@ function fictioneer_mobile_lists_panel() {
   // Chapters?
   if ( $post_type === 'fcn_chapter' && get_post_meta( get_the_ID(), 'fictioneer_chapter_story', true ) && ! is_search() ) {
     $output['chapters'] = sprintf(
-      '<button class="mobile-menu__frame-button" data-frame-target="chapters"><i class="fa-solid fa-caret-right mobile-menu__item-icon"></i> %s</button>',
+      '<button class="mobile-menu__frame-button" data-click-action="open-dialog-modal" data-click-target="#fictioneer-chapter-index-dialog"><i class="fa-solid fa-caret-right mobile-menu__item-icon"></i> %s</button>',
       __( 'Chapters', 'fictioneer' )
     );
-  } else {
-    remove_action( 'fictioneer_mobile_menu_center', 'fictioneer_mobile_chapters_frame', 30 );
   }
 
   // Bookmarks?

single-fcn_chapter.php

@@ -90,7 +90,7 @@ get_header(
         );
 
         if ( $story_post && $indexed_chapters ) {
-          echo '<script id="chapter-list-data">const fcn_storyChapterListData = ' . json_encode( fictioneer_get_chapter_index_array( $story_id ) ) . ';</script>';
+          echo fictioneer_render_chapter_index_modal_html( $story_id );
         }
 
         if ( get_option( 'fictioneer_enable_bookmarks' ) ) {

src/js/chapter.js

@@ -1251,44 +1251,21 @@ function fcn_readingProgress() {
 }
 
 // =============================================================================
-// SETUP CHAPTER INDEX MENU
+// SETUP CHAPTER INDEX DIALOG MODAL
 // =============================================================================
 
-/**
- * Builds and appends the chapter index list to the target element.
- *
- * @since 4.0.0
- * @param {HTMLElement} target - Target to append the list elements to.
- */
-
-function fcn_appendChapterList(target) {
-  if (fcn_storyChapterListData && target && !target.querySelector('li')) {
-    for (const number in fcn_storyChapterListData) {
-      target.innerHTML += fcn_storyChapterListData[number];
-    }
-
-    target.querySelector(`[data-id="${target.dataset.currentId}"]`)?.classList.add('current-chapter');
-    document.getElementById("chapter-list-data")?.remove(); // Cleanup
-  }
-}
-
-// Append chapters when popup menu is opened, once
-_$$('.chapter-list-popup-toggle').forEach(element => {
-  element.addEventListener('click', () => {
-    fcn_appendChapterList(element.querySelector('[data-target="popup-chapter-list"]'));
-  }, { once: true });
+_$('[data-click-action*="toggle-chapter-index-order"]')?.addEventListener('click', event => {
+  const wrapper = event.currentTarget.closest('.chapter-index');
+  wrapper.dataset.order = wrapper.dataset.order === 'asc' ? 'desc' : 'asc';
 });
 
-// Append chapters when chapter frame is opened, once
-_$('.mobile-menu__frame-button[data-frame-target="chapters"]')?.addEventListener('click', () => {
-  fcn_appendChapterList(_$$$('mobile-menu-chapters-list'));
-}, { once: true });
+document.addEventListener('DOMContentLoaded', () => {
+  const chapterIndex = _$('.chapter-index');
 
-// Listen for click on chapter list in the micro menu, once
-_$$$('micro-menu-label-open-chapter-list')?.addEventListener('click', () => {
-  fcn_appendChapterList(_$$$('mobile-menu-chapters-list'));
-  fcn_openMobileFrame('chapters');
-}, { once: true });
+  if (chapterIndex) {
+    chapterIndex.querySelector(`[data-id="${chapterIndex.dataset.currentId}"]`)?.classList.add('current');
+  }
+});
 
 // =============================================================================
 // KEYBOARD NAVIGATION

src/scss/_chapter.scss

@@ -386,3 +386,84 @@
     content-visibility: visible;
   }
 }
+
+// Index dialog modal
+.chapter-index {
+  font-size: 14px;
+  line-height: 21px;
+
+  &[data-order="asc"] {
+    i.on {
+      display: none;
+    }
+  }
+
+  &[data-order="desc"] {
+    i.off {
+      display: none;
+    }
+
+    ul {
+      flex-direction: column-reverse;
+    }
+  }
+
+  :is(i, .icon, .text-icon) {
+    display: inline-block;
+    color: currentColor;
+    line-height: 1;
+    text-align: center;
+    min-width: 24px;
+  }
+
+  :is(a, a[href]) {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    color: currentColor;
+    text-decoration: none;
+
+    &:hover,
+    &:visited {
+      color: currentColor;
+      text-decoration: none;
+    }
+  }
+
+  li {
+    background: var(--chapter-index-li-background, var(--content-li-background));
+    border-radius: var(--layout-border-radius-small);
+
+    :is(a, a[href]) {
+      padding: 6px 8px 6px 0;
+    }
+
+    &.current {
+      background: var(--current-content-li-background);
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--chapter-index-list-gap, var(--content-list-gap, 4px));
+  }
+
+  &__control {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  &__back-link {
+    font-weight: var(--font-weight-medium);
+    padding: 2px 0;
+
+    :is(i, .icon, .text-icon) {
+      font-size: 15px;
+    }
+  }
+}

src/scss/_mobile-menu.scss

@@ -272,21 +272,6 @@ body:not(.mobile-menu-open) {
         margin-bottom: 4px;
       }
     }
-
-    &._chapters {
-      :is(i, .icon, .text-icon) {
-        display: inline-block;
-        color: var(--fg-600);
-        font-size: 13px;
-        text-align: center;
-        margin: 0 6px 0 -2px;
-        min-width: 22px;
-      }
-
-      .text-icon {
-        height: auto;
-      }
-    }
   }
 
   .follows-alert-number {
@@ -371,20 +356,6 @@ body:not(.mobile-menu-open) {
     }
   }
 
-  .current-chapter {
-    position: relative;
-    background: var(--mobile-menu-current-chapter-background);
-    color: var(--mobile-menu-current-chapter-color);
-    border-radius: var(--layout-border-radius-small);
-    width: calc(100% + 4px);
-
-    > a > span {
-      &:not(:first-child)::before {
-        left: 24px; // Leave space for icon if any
-      }
-    }
-  }
-
   .mark-follows-read {
     color: currentColor;
 

src/scss/common/_base.scss

@@ -585,14 +585,6 @@ button[type=submit]:where(:not(._inline)),
       min-width: 20px;
     }
   }
-
-  .current-chapter :is(a, label, button, .popup-item) {
-    background: var(--popup-menu-background-selected);
-
-    &:hover {
-      background: var(--popup-menu-background-selected-hover, var(--popup-menu-background-hover));
-    }
-  }
 }
 
 .popup-heading {

src/scss/common/_formatting.scss

@@ -64,7 +64,7 @@ img {
 
 p a:not(.wp-element-button, .modal-tooltip),
 .content-section :is(.wp-block-table, .wp-block-pullquote, .wp-block-list) a:not(.wp-element-button, .modal-tooltip),
-:is(.modal, .dialog-modal) a[href]:not(.button, .wp-element-button, .modal-tooltip),
+:is(.modal, .dialog-modal) a[href]:where(:not(.button, .wp-element-button, .modal-tooltip)),
 .footnotes a[href*="http"],
 .link {
   color: var(--inline-link-color);

src/scss/common/_lightmode.scss

@@ -84,6 +84,8 @@
   --content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-950-free) / 3%) 0%, hsl(var(--bg-950-free) / 3%) 55%, transparent 90%);
   // --content-li-hr-border: 1.5px solid var(--hr-border-color, var(--layout-lineart-color));
 
+  --current-content-li-background: hsl(var(--bg-950-free) / 10%);
+
   // === COLORS ================================================================
 
   --primary-400: hsl(217deg 90% 70%); // #6ea2f7
@@ -238,8 +240,6 @@
   // --mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
   --mobile-menu-overlay: rgb(0 0 0 / 35%);
   --mobile-menu-bookmark-progress-background: hsl(var(--bg-950-free) / 10%);
-  // --mobile-menu-current-chapter-color: var(--fg-400);
-  --mobile-menu-current-chapter-background: hsl(var(--bg-950-free) / 10%);
 
   // === FONT SETTINGS =========================================================
 
@@ -370,8 +370,6 @@
 
   --popup-menu-background: var(--bg-800);
   --popup-menu-background-hover: var(--bg-700);
-  --popup-menu-background-selected: var(--bg-700);
-  // --popup-menu-background-selected-hover: var(--popup-menu-background-hover);
   // --popup-menu-color: var(--fg-inverted);
   // --popup-menu-color-hover: var(--fg-inverted);
 

src/scss/common/_modals.scss

@@ -260,6 +260,10 @@
   &::backdrop {
     background: var(--modal-overlay);
   }
+
+  &._chapter-index {
+    --modal-width: 400px;
+  }
 }
 
 .modal {

src/scss/common/_properties.scss

@@ -200,6 +200,8 @@
   --content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-950-free) / 10%) 0%, hsl(var(--bg-950-free) / 10%) 55%, transparent 90%);
   --content-li-hr-border: 1.5px solid var(--hr-border-color, var(--layout-lineart-color));
 
+  --current-content-li-background: rgb(0 0 0 / 25%);
+
   // === COLORS ================================================================
 
   --primary-400: hsl(46deg 87% 75%);
@@ -369,8 +371,6 @@
   --mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
   --mobile-menu-overlay: rgb(0 0 0 / 50%);
   --mobile-menu-bookmark-progress-background: rgb(0 0 0 / 40%);
-  --mobile-menu-current-chapter-color: var(--fg-400);
-  --mobile-menu-current-chapter-background: rgb(0 0 0 / 25%);
 
   // === FONT SETTINGS =========================================================
 
@@ -533,8 +533,6 @@
 
   --popup-menu-background: var(--bg-50);
   --popup-menu-background-hover: var(--bg-100);
-  --popup-menu-background-selected: var(--bg-100);
-  --popup-menu-background-selected-hover: var(--popup-menu-background-hover);
   --popup-menu-color: var(--fg-inverted);
   --popup-menu-color-hover: var(--fg-inverted);