feat(PageTabs): add functionality to create new pages with an "Add Page" button

Author: MrCoder

src/components/ContentWrap.jsx

@@ -1089,6 +1089,7 @@ export default class ContentWrap extends Component {
                 pages={this.props.currentItem.pages}
                 currentPageId={this.props.currentItem.currentPageId}
                 onTabClick={this.props.onPageSwitch}
+                onAddPage={this.props.onAddPage}
               />
             )}
             <div

src/components/PageTabs.jsx

@@ -2,19 +2,34 @@ import React from 'preact';
 
 /**
  * PageTabs component displays tabs for each page and handles tab switching
- *
+ * 
  * @param {Object} props - Component props
  * @param {Array} props.pages - Array of page objects
  * @param {String} props.currentPageId - ID of the currently active page
  * @param {Function} props.onTabClick - Callback function when a tab is clicked
+ * @param {Function} props.onAddPage - Callback function when the add page button is clicked
  */
-export function PageTabs({ pages, currentPageId, onTabClick }) {
+export function PageTabs({ pages, currentPageId, onTabClick, onAddPage }) {
   if (!pages || pages.length === 0) {
     return null;
   }
 
+  /**
+   * Wrapper for the onAddPage callback to properly handle the event object.
+   * This prevents the synthetic event from being passed to the App's addNewPage method,
+   * which expects either no parameters or a title string, not an event object.
+   * Without this wrapper, the event object would cause errors when passed to addNewPage.
+   */
+  const handleAddPage = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (typeof onAddPage === 'function') {
+      onAddPage();
+    }
+  };
+
   return (
-    <div className="page-tabs bg-black-500 border-b border-black-700 px-2 py-1 flex overflow-x-auto">
+    <div className="page-tabs bg-black-500 border-b border-black-700 px-2 py-1 flex overflow-x-auto items-center">
       {pages.map(page => (
         <button
           key={page.id}
@@ -28,6 +43,14 @@ export function PageTabs({ pages, currentPageId, onTabClick }) {
           {page.title || 'Untitled'}
         </button>
       ))}
+      <button
+        className="ml-2 px-3 py-2 bg-black-600 text-gray-400 hover:bg-black-700 hover:text-gray-300 rounded-lg text-sm font-medium transition-colors duration-200 flex items-center"
+        onClick={handleAddPage}
+        title="Add new page"
+      >
+        <span className="mr-1 font-bold text-lg leading-none">+</span>
+        Add Page
+      </button>
     </div>
   );
 }

src/components/app.jsx

@@ -1680,6 +1680,7 @@ BookLibService.Borrow(id) {
             onSplitUpdate={this.splitUpdateHandler.bind(this)}
             onProFeature={this.proBtnClickHandler.bind(this)}
             onPageSwitch={this.switchToPage.bind(this)}
+            onAddPage={this.addNewPage.bind(this)}
             keyboardShortcutsBtnClickHandler={this.handleShortcutsModalOpen.bind(
               this,
             )}