Merge branch 'develop' into kostia/feat/delete_edit_inter

.vscode/settings.json

@@ -11,6 +11,7 @@
     "**/.venv/*/**": true
   },
   "cSpell.words": [
+    "backref",
     "bookname",
     "Btns",
     "CLEANR",

app/__init__.py

@@ -72,11 +72,13 @@ def create_app(environment="development"):
         form_hidden_tag,
         display_tags,
         build_qa_url_using_interpretation,
+        recursive_render,
     )
 
     app.jinja_env.globals["form_hidden_tag"] = form_hidden_tag
     app.jinja_env.globals["display_tags"] = display_tags
     app.jinja_env.globals["build_qa_url"] = build_qa_url_using_interpretation
+    app.jinja_env.globals["recursive_render"] = recursive_render
 
     # Error handlers.
     @app.errorhandler(HTTPException)

app/controllers/book_verify.py

@@ -61,26 +61,17 @@ def book_validator() -> Response | None:
             flash("Subcollection not found", "danger")
             return redirect(
                 url_for(
-                    "book.sub_collection_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
+                    "book.collection_view", book_id=book_id, collection_id=collection_id
                 )
             )
 
     section_id = request_args.get("section_id")
     if section_id:
         section: m.Section = db.session.get(m.Section, section_id)
-        if not section or collection.is_deleted:
+        if not section:
             log(log.WARNING, "Section with id [%s] not found", section)
             flash("Section not found", "danger")
-            return redirect(
-                url_for(
-                    "book.section_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                    sub_collection_id=sub_collection_id,
-                )
-            )
+            return redirect(url_for("book.collection_view", book_id=book_id))
 
     interpretation_id = request_args.get("interpretation_id")
     if interpretation_id:
@@ -92,12 +83,7 @@ def book_validator() -> Response | None:
             flash("Interpretation not found", "danger")
             return redirect(
                 url_for(
-                    "book.qa_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                    sub_collection_id=sub_collection_id,
-                    section_id=section_id,
-                    interpretation_id=interpretation_id,
+                    "book.qa_view", book_id=book_id, interpretation_id=interpretation_id
                 )
             )
 
@@ -108,12 +94,5 @@ def book_validator() -> Response | None:
             log(log.WARNING, "Comment with id [%s] not found", comment_id)
             flash("Comment not found", "danger")
             return redirect(
-                url_for(
-                    "book.qa_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                    sub_collection_id=sub_collection_id,
-                    section_id=section_id,
-                    interpretation_id=interpretation_id,
-                )
+                url_for("book.qa_view", interpretation_id=interpretation_id)
             )

app/controllers/breadcrumbs.py

@@ -1,15 +1,26 @@
 from flask import url_for
 from flask_login import current_user
 
-from app import models as m, db
-from app import schema as s
+from app import models as m, db, schema as s
+
+
+def create_collections_breadcrumb(
+    bread_crumbs: list[s.BreadCrumb], collection: m.Collection
+) -> list[s.BreadCrumb]:
+    bread_crumbs += [
+        s.BreadCrumb(
+            type=s.BreadCrumbType.Collection,
+            url="",
+            label=collection.label,
+        )
+    ]
+
+    if collection.parent and not collection.parent.is_root:
+        create_collections_breadcrumb(bread_crumbs, collection.parent)
 
 
 def create_breadcrumbs(
-    book_id: int,
-    collection_path: tuple[int],
-    section_id: int = 0,
-    interpretation_id: int = 0,
+    book_id: int, section_id: int = 0, collection_id: int = 0, short=True
 ) -> list[s.BreadCrumb]:
     """
     How breadcrumbs look like:
@@ -52,42 +63,43 @@ def create_breadcrumbs(
         )
     ]
 
-    for index, collection_id in enumerate(collection_path):
-        if collection_id is None:
-            continue
-        collection: m.Collection = db.session.get(m.Collection, collection_id)
-        if index == 0:
-            crumples += [
-                s.BreadCrumb(
-                    type=s.BreadCrumbType.Collection,
-                    url="",
-                    label=collection.label,
-                )
-            ]
-        elif index == 1:
-            crumples += [
-                s.BreadCrumb(
-                    type=s.BreadCrumbType.Section,
-                    url="",
-                    label=collection.label,
-                )
-            ]
-
-    if section_id and collection_path:
+    section: m.Section = None
+    if section_id:
         section: m.Section = db.session.get(m.Section, section_id)
+
+    if collection_id and not section:
+        collections_crumbs = []
+        collection: m.Collection = db.session.get(m.Collection, collection_id)
+        if not collection.is_root:
+            create_collections_breadcrumb(collections_crumbs, collection)
+            collections_crumbs.reverse()
+            crumples += collections_crumbs
+
+    if section:
+        collections_crumbs = []
+        collection: m.Collection = db.session.get(m.Collection, section.collection_id)
+        if not collection.is_root:
+            create_collections_breadcrumb(collections_crumbs, collection)
+            collections_crumbs.reverse()
+            crumples += collections_crumbs
+
         crumples += [
             s.BreadCrumb(
                 type=s.BreadCrumbType.Section,
                 url=url_for(
                     "book.interpretation_view",
                     book_id=book_id,
-                    collection_id=collection_path[0],
-                    sub_collection_id=collection_path[-1]
-                    if len(collection_path) == 2
-                    else collection_path[0],
                     section_id=section_id,
                 ),
                 label=section.label,
             )
         ]
+
+    if short and len(crumples) > 5:
+        crumples = (
+            crumples[:3]
+            + [s.BreadCrumb(type=s.BreadCrumbType.Splitter, url="", label="...")]
+            + crumples[-2:]
+        )
+
     return crumples

app/controllers/build_qa_url_using_interpretation.py

@@ -6,18 +6,9 @@ from app import models as m
 def build_qa_url_using_interpretation(interpretation: m.Interpretation):
     section: m.Section = interpretation.section
     collection: m.Collection = section.collection
-    sub_collection = None
     if collection.is_leaf and collection.parent.is_root:
         collection: m.Collection = collection.parent
-        sub_collection: m.Collection = collection
     book: m.Book = section.version.book
 
-    url = url_for(
-        "book.qa_view",
-        book_id=book.id,
-        collection_id=collection.id,
-        sub_collection_id=sub_collection.id if sub_collection else None,
-        section_id=section.id,
-        interpretation_id=interpretation.id,
-    )
+    url = url_for("book.qa_view", book_id=book.id, interpretation_id=interpretation.id)
     return url

app/controllers/jinja_globals.py

@@ -2,7 +2,7 @@ import re
 
 from flask import current_app
 from flask_wtf import FlaskForm
-from flask import url_for
+from flask import url_for, render_template
 
 from app import models as m
 
@@ -39,18 +39,21 @@ def display_tags(text: str):
 def build_qa_url_using_interpretation(interpretation: m.Interpretation):
     section: m.Section = interpretation.section
     collection: m.Collection = section.collection
-    sub_collection = None
     if collection.parent and not collection.parent.is_root:
-        sub_collection: m.Collection = collection
         collection: m.Collection = collection.parent
     book: m.Book = section.version.book
 
     url = url_for(
         "book.qa_view",
         book_id=book.id,
-        collection_id=collection.id,
-        sub_collection_id=sub_collection.id if sub_collection else None,
-        section_id=section.id,
         interpretation_id=interpretation.id,
     )
     return url
+
+
+def recursive_render(template: str, collection: m.Collection, book: m.Book):
+    return render_template(
+        template,
+        collection=collection,
+        book=book,
+    )

app/forms/section.py

@@ -1,6 +1,7 @@
 from flask_wtf import FlaskForm
 from wtforms import StringField, SubmitField, ValidationError
 from wtforms.validators import DataRequired, Length
+from flask import request
 
 from app import models as m, db
 from app.logger import log
@@ -12,26 +13,23 @@ class BaseSectionForm(FlaskForm):
 
 
 class CreateSectionForm(BaseSectionForm):
-    collection_id = StringField("Collection ID", [DataRequired()])
-    sub_collection_id = StringField("Sub collection ID")
     submit = SubmitField("Create")
 
-    def validate_collection_id(self, field):
-        collection_id = field.data
+    def validate_label(self, field):
+        request_args = (
+            {**request.view_args, **request.args}
+            if request.view_args
+            else {**request.args}
+        )
+        collection_id = request_args["collection_id"]
         collection: m.Collection = db.session.get(m.Collection, collection_id)
-        if self.sub_collection_id.data and self.sub_collection_id.data != "_":
-            collection: m.Collection = db.session.get(
-                m.Collection, self.sub_collection_id.data
-            )
 
         if not collection or collection.sub_collections:
             log(log.WARNING, "Collection [%s] it not leaf", collection)
 
             raise ValidationError("You can't create section for this collection")
 
-    def validate_label(self, field):
         label = field.data
-        collection_id = self.collection_id.data
 
         section: m.Section = m.Section.query.filter_by(
             is_deleted=False, label=label, collection_id=collection_id

app/models/section.py

@@ -46,16 +46,9 @@ class Section(BaseModel):
 
     @property
     def breadcrumbs_path(self):
-        parent = self.collection
-        grand_parent = parent.parent
-        if grand_parent.is_root:
-            collection_path = (parent.id,)
-        else:
-            collection_path = (
-                grand_parent.id,
-                parent.id,
-            )
-        breadcrumbs_path = create_breadcrumbs(self.book_id, collection_path)
+        breadcrumbs_path = create_breadcrumbs(
+            book_id=self.book_id, collection_id=self.collection.id
+        )
         return breadcrumbs_path
 
     @property

app/schema/breadcrumbs.py

@@ -11,6 +11,7 @@ class BreadCrumbType(enum.StrEnum):
     Collection = "Collection"
     Section = "Section"
     Interpretation = "Interpretation"
+    Splitter = "Splitter"
 
 
 class BreadCrumb(BaseModel):

app/templates/base.html

@@ -15,8 +15,7 @@
     <link
       rel="icon"
       type="image/x-icon"
-      href="{{ url_for('static', filename='img/logo.svg') }}"
-    />
+      href="{{ url_for('static', filename='img/logo.svg') }}" />
 
     <!-- styles -->
     <!-- prettier-ignore -->
@@ -43,7 +42,7 @@
     {% endblock %}
   </head>
 
-  <body class="bg-white dark:bg-gray-800" >
+  <body class="bg-white dark:bg-gray-800">
     <!-- Header -->
     <!-- prettier-ignore -->
     {% include 'header.html' %}
@@ -88,7 +87,7 @@
       {% block right_sidebar %}
         {% include 'right_sidebar.html' %}
       {% endblock %}
-      {% include 'book/add_book_modal.html' %}
+      {% include 'book/modals/add_book_modal.html' %}
     {% endif %}
 
     <!-- prettier-ignore -->

app/templates/book/all.html

@@ -94,7 +94,7 @@
 </div>
 
 <!-- prettier-ignore -->
-{% include 'book/add_book_modal.html' %}
+{% include 'book/modals/add_book_modal.html' %}
 <!-- prettier-ignore -->
 {% endblock %}
 <!-- prettier-ignore -->

app/templates/book/breadcrumbs_navigation.html

@@ -2,16 +2,26 @@
 <nav class="fixed flex top-32 p-4 pl-1 mt-1.5 z-40 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-3 ml-5 overflow-x-scroll md:overflow-auto p-0">
     {% for breadcrumb in breadcrumbs %}
-    <li class="inline-flex items-center">
-      {% if not loop.index==breadcrumbs|length %}
-      <a href="{{ breadcrumb.url }}" class="inline-flex items-center text-sm truncate w-24 font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
-      {% else %}
-      <span class="inline-flex items-center text-sm truncate w-40 font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
-      {% endif %}
-      <div id="breadcrumb-{{loop.index}}-tooltip" role="tooltip" class="delay-100 absolute z-[100] invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-700 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-        {{ breadcrumb.label }}
-        <div class="tooltip-arrow" data-popper-arrow></div>
-      </div>
+    {% if breadcrumb.type != 'Splitter' %}
+      <li class="inline-flex items-center">
+        {% if not loop.index==breadcrumbs|length %}
+        <a href="{{ breadcrumb.url }}"
+          class="inline-flex items-center text-sm truncate font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
+          data-tooltip-target="breadcrumb-{{loop.index}}-tooltip"
+          data-tooltip-placement="bottom"
+        >
+        {% else %}
+        <span class="inline-flex items-center text-sm truncate w-40 font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+        {% endif %}
+
+        {% if breadcrumb.type != "Splitter" %}
+          <div id="breadcrumb-{{loop.index}}-tooltip" role="tooltip" class="delay-100 absolute z-[100] invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-700 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+            {{ breadcrumb.label }}
+            <div class="tooltip-arrow" data-popper-arrow></div>
+          </div>
+        {% endif %}
+
+
         <!-- prettier-ignore -->
         <!--svg for all types of breadcrumb-->
         {% if breadcrumb.type == "MyBookList" or breadcrumb.type == "AuthorBookList" %}
@@ -20,16 +30,24 @@
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-4 h-4 mr-2 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /> </svg>
         {% endif %}
         <!-- prettier-ignore -->
-         <span class="truncate select-none">{{ breadcrumb.label }}</span>
-      {% if not loop.index==breadcrumbs|length %}
-      </a>
-      {% else %}
-      </span>
-      {% endif %}
-      {% if not loop.index==breadcrumbs|length %}
-      <svg aria-hidden="true" class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
-      {% endif %}
-    </li>
+        <span class="truncate select-none ">{{ breadcrumb.label }}</span>
+
+        {% if not loop.index==breadcrumbs|length %}
+        </a>
+        {% else %}
+        </span>
+        {% endif %}
+
+        {% if not loop.index==breadcrumbs|length %}
+        <svg aria-hidden="true" class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
+        {% endif %}
+      </li>
+    {% else %}
+      <li class="inline-flex items-center">
+        <span class="mr-2 text-sm truncate font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white select-none ">{{ breadcrumb.label }}</span>
+        <svg aria-hidden="true" class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
+      </li>
+    {% endif %}
     {% endfor %}
   </ol>
 </nav>

app/templates/book/collection_view.html

@@ -4,12 +4,12 @@
 {% endblock %}
 
 {% if current_user.is_authenticated %}
-{% include 'book/add_collection_modal.html' %}
-{% include 'book/delete_collection_modal.html' %}
-{% include 'book/add_sub_collection_modal.html' %}
-{% include 'book/delete_sub_collection_modal.html' %}
-{% include 'book/add_section_modal.html' %}
-{% include 'book/delete_section_modal.html' %}
+{% include 'book/modals/add_collection_modal.html' %}
+{% include 'book/modals/delete_collection_modal.html' %}
+{% include 'book/modals/add_sub_collection_modal.html' %}
+{% include 'book/modals/delete_sub_collection_modal.html' %}
+{% include 'book/modals/add_section_modal.html' %}
+{% include 'book/modals/delete_section_modal.html' %}
 {% endif %}
 
 {% block title %}{{book.label[:32]}}{% endblock %}
@@ -42,24 +42,23 @@
     </div>
     <!-- prettier-ignore -->
     {% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
-    {% set outer_loop = loop %}
     <div>
       <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
-        <button class="bg-inherit" type="button" data-accordion-target="#accordion-collapse-body-{{loop.index}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{loop.index}}">
+        <button class="bg-inherit" type="button" data-accordion-target="#accordion-collapse-body-{{collection.id}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{collection.id}}">
         <!-- prettier-ignore -->
         <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
         </button>
-        <a  id="accordion-collapse-heading-{{loop.index}}" class=" text-black dark:text-white ">
-          <form id="rename-collection-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
+        <a  id="accordion-collapse-heading-{{collection.id}}" class=" text-black dark:text-white ">
+          <form id="rename-collection-label-form-{{collection.id}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
             {{ form_hidden_tag() }}
-            <input class=" bg-inherit border-none " value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{loop.index}}" placeholder="Collection label" required readonly/>
+            <input class=" bg-inherit border-none " value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{collection.id}}" placeholder="Collection label" required readonly/>
             <button name="submit" type="submit"></button>
           </form>
         </a>
         </div>
-    <svg id="dropdownCollectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
+    <svg id="dropdownCollectionContextButton{{collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
     </div>
-    <div data="collection-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    <div data="collection-context-menu-{{collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
         {% if current_user.is_authenticated %}
         <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
           <li>
@@ -78,7 +77,7 @@
         </ul>
         <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
           <li>
-              <button type="button" id="rename-collection-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Collection</button>
+              <button type="button" id="rename-collection-button-{{collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Collection</button>
           </li>
           <li>
               <button type="button" id="callDeleteCollectionModal" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" data-collection-id="{{collection.id}}"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Collection</button>
@@ -98,144 +97,8 @@
         {% endif %}
     </div>
     <!-- prettier-ignore -->
-    <div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{loop.index}}">
-      <div class="ml-6">
-        {% if not collection.is_leaf %}
-        <!-- if collection has sub_collection make for loop for it -->
-        <!-- Nested accordion -->
-        {% for sub_collection in collection.children if not sub_collection.is_deleted%}
-        <div id="accordion-nested-collapse" data-accordion="open">
-            <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
-              <button
-              class="bg-inherit"
-              type="button"
-              data-accordion-target="#accordion-nested-collapse-body-{{outer_loop.index}}-{{loop.index}}"
-              aria-expanded="true"
-              aria-controls="accordion-nested-collapse-body-{{outer_loop.index}}-{{loop.index}}">
-              <!-- prettier-ignore -->
-              <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
-              </button>
-              <a  id="accordion-nested-collapse-heading-{{outer_loop.index}}-{{loop.index}}" class=" text-black dark:text-white ">
-                <form id="rename-sub-collection-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
-                  {{ form_hidden_tag() }}
-                  <input class=" bg-inherit border-none " value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{loop.index}}" placeholder="Sub collection label" required readonly/>
-                  <button name="submit" type="submit"></button>
-                </form>
-              </a>
-            </div>
-            <svg id="dropdownSubCollectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
-            <div data="sub-collection-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-              {% if current_user.is_authenticated %}
-                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Section</button>
-                  </li>
-                </ul>
-                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button" id="rename-sub-collection-button-{{loop.index}}"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Sub Collection</button>
-                  </li>
-                  <li>
-                      <button type="button" id="callDeleteSubCollectionModal" data-modal-target="delete-sub-collection-modal" data-modal-toggle="delete-sub-collection-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Sub Collection</button>
-                  </li>
-                </ul>
-                    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Sub Collection</button>
-                  </li>
-                </ul>
-                {% else %}
-                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect your wallet to do this</button>
-                  </li>
-                </ul>
-                {% endif %}
-            </div>
-          <!-- prettier-ignore -->
-          <div id="accordion-nested-collapse-body-{{outer_loop.index}}-{{loop.index}}" class="hidden" aria-labelledby="accordion-nested-collapse-heading-{{loop.index}}">
-            <div class="ml-6">
-              <!-- here comes for loop for all section in this sub_collection-->
-              {% for section in sub_collection.active_sections %}
-              <div class="">
-              <button type="button" href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
-                <form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}" method="post">
-                  {{ form_hidden_tag() }}
-                <input class=" bg-inherit border-none underline" value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
-                <button name="submit" type="submit"></button>
-              </form>
-              </button>
-              <svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
-              <div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-                {% if current_user.is_authenticated %}
-                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button" id="rename-section-button-{{loop.index}}"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Section</button>
-                  </li>
-                  <li>
-                      <button type="button" data-modal-target="delete-section-modal" data-modal-toggle="delete-section-modal" id="callDeleteSectionModal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Section</button>
-                  </li>
-                </ul>
-                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Section</button>
-                  </li>
-                </ul>
-                {% else %}
-                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-                  <li>
-                      <button type="button"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect your wallet to do this</button>
-                  </li>
-                </ul>
-                {% endif %}
-              </div>
-              </div>
-              {% endfor %}
-            </div>
-          </div>
-        </div>
-        {% endfor %}
-        <!-- End: Nested accordion -->
-        {% else %}
-        <!-- if collection doesn't have sub_collection -->
-        <div class="ml-6">
-          <!-- here comes for loop for all section in this collection-->
-          {% for section in collection.active_sections %}
-          <button type="button" href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
-            <form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}" method="post">
-              {{ form_hidden_tag() }}
-            <input class=" bg-inherit border-none underline" value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
-            <button name="submit" type="submit"></button>
-          </form>
-          </button>
-          <svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
-          <div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-            {% if current_user.is_authenticated %}
-            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-              <li>
-                  <button type="button" id="rename-section-button-{{loop.index}}"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Section</button>
-              </li>
-              <li>
-                  <button type="button" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" id="callDeleteSectionModal" data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Section</button>
-              </li>
-            </ul>
-            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-              <li>
-                  <button type="button"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Section</button>
-              </li>
-            </ul>
-            {% else %}
-            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-              <li>
-                  <button type="button"  class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect your wallet to do this</button>
-              </li>
-            </ul>
-            {% endif %}
-          </div>
-          {% endfor %}
-        </div>
-        {% endif %}
-      </div>
+    <div id="accordion-collapse-body-{{collection.id}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{collection.id}}">
+      {{recursive_render("book/components/sub_collection_tab_content.html",collection,book)|safe}}
     </div>
     {% endfor %}
   </div>
@@ -274,127 +137,7 @@
     {% if not collection.is_leaf and not collection.children %}
     <p class="ml-3 my-3 italic text-sm">Collection is empty</p>
     {% endif %}
-    {% if not collection.is_leaf %}
-      <!-- if collection has sub_collection make for loop for it -->
-      {% for sub_collection in collection.children if not sub_collection.is_deleted%}
-      <p class="my-3">##{{sub_collection.label}}</p>
-        {% if not sub_collection.active_sections %}
-        <p class="ml-3 my-3 italic text-sm">This sub collection is empty</p>
-        {% endif %}
-        {% for section in sub_collection.active_sections %}
-        <div class="bg-inherit max-w-full text-gray-900 dark:text-white mt-1">
-            <div class="flex flex-col pb-3 w-full">
-              <div class="flex w-full mb-1 dark:text-gray-100 flex-col">
-                <!-- prettier-ignore -->
-                <a  href="{{url_for('book.interpretation_view',book_id=book.id,collection_id=collection.id,sub_collection_id=sub_collection.id,section_id=section.id)}}">
-                <p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
-                {% if not section.active_interpretations %}
-                <p class="ml-3 my-3 italic text-sm">This section is empty</p>
-                {% else %}
-                <div class="ql-snow truncate md:max-w-xl">
-                  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
-                    <p>{{display_tags(section.approved_interpretation.text)|safe }}</p>
-                  </div>
-                </div>
-                <div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
-                  <span class="text-sm">Interpretation by <a href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}" class=" text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}">{{section.approved_interpretation.user.username}}</a> on  {{section.approved_interpretation.created_at.strftime('%B %d, %Y')}}</span>
-                    <button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg> </button>
-                    <div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
-                </div>
-                <!--Comments-->
-                {% if not section.approved_comments %}
-                <p>No comments for current section</p>
-                {% else %}
-                <div id="accordion-comments-collapse-{{loop.index}}" data-accordion="collapse">
-                  <h2 id="accordion-comments-collapse-{{loop.index}}-heading-{{loop.index}}">
-                    <button type="button" class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left" data-accordion-target="#accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-1">
-                      <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                      <span><i>Comments:</i></span>
-                    </button>
-                  </h2>
-                  <div id="accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{loop.index}}">
-                    {% for comment in section.approved_comments %}
-                    <div class="p-5 ml-6">
-                                   <div class="dark:text-white h-30">
-                <div class="ql-snow mb-2 truncate md:max-w-xl">
-                  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
-                    <p>{{ display_tags(comment.text)|safe }}</p>
-                  </div>
-                </div>
-              </div>
-                      <div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
-                        <span class="text-sm">Created by <a href="{{url_for('user.profile',user_id=comment.user.id)}}" class=" text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}">{{comment.user.username}}</a> on {{comment.created_at.strftime('%B %d, %Y')}}</span>
-                        <button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
-                    </button>
-                    <div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
-                      </div>
-                    </div>
-                    {% endfor %}
-                  </div>
-                </div>
-              </div>
-              {% endif %}
-              {% endif %}
-            </div>
-          </div>
-        {% endfor %}
-      {% endfor %}
-    {% else %}
-      {% for section in collection.active_sections %}
-      <a  href="{{url_for('book.interpretation_view',book_id=book.id,collection_id=collection.id,section_id=section.id)}}">
-      <p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
-      {% if not section.active_interpretations %}
-      <p class="ml-3 my-3 italic text-sm">This section is empty</p>
-      {% else %}
-      <div class="ql-snow truncate md:max-w-xl mb-3">
-        <div class="dark:text-white h-30 ql-editor-readonly !px-0">
-          <p>{{ display_tags(section.approved_interpretation.text)|safe }}</p>
-        </div>
-      </div>
-      <div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
-        <span class="text-sm">Interpretation by <a href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}" class=" text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}">{{section.approved_interpretation.user.username}}</a> on  {{section.approved_interpretation.created_at.strftime('%B %d, %Y')}}</span>
-        <button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg> </button>
-        <div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
-      </div>
-          <!--Comments-->
-          {% if not section.approved_comments %}
-          <div class="mb-3">
-          <p>No comments for current section</p>
-          </div>
-          {% else %}
-          <div id="accordion-comments-collapse-nest{{loop.inde}}" data-accordion="collapse" class="mb-3">
-            <h2 id="accordion-comments-collapse-nest{{loop.inde}}-heading-{{loop.index}}">
-              <button type="button" class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left" data-accordion-target="#accordion-comments-collapse-nest{{loop.inde}}-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-1">
-                <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                <span><i>Comments:</i></span>
-              </button>
-            </h2>
-            <div id="accordion-comments-collapse-nest{{loop.inde}}-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
-              {% for comment in section.approved_comments %}
-              <div class="p-5 ml-6">
-              <div class="dark:text-white h-30">
-                <div class="ql-snow mb-2 truncate md:max-w-xl">
-                  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
-                    <p>{{ display_tags(comment.text)|safe }}</p>
-                  </div>
-                </div>
-              </div>
-                <div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
-                  <span class="text-sm">Created by <a href="{{url_for('user.profile',user_id=comment.user.id)}}" class=" text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}">{{comment.user.username}}</a> on {{comment.created_at.strftime('%B %d, %Y')}}</span>
-                   <button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
-                    </button>
-                    <div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
-                </div>
-              </div>
-              {% endfor %}
-            </div>
-          </div>
-        {% endif %}
-      {% endif %}
-      {% endfor %}
-    {% endif %}
+      {{recursive_render("book/components/sub_collection_preview_content.html",collection,book)|safe}}
     {% endfor %}
 </div>
 <!-- prettier-ignore -->

app/templates/book/components/section_tab_content.html

@@ -0,0 +1,91 @@
+<div class="">
+  <button
+    type="button"
+    href="#section-{{section.label}}"
+    id="section-heading-{{section.id}}"
+    class="text-gray-500 dark:text-gray-400">
+    <!-- prettier-ignore -->
+    <form
+      id="rename-section-label-form-{{section.id}}"
+      data-book-id="{{book.id}}"
+      data-collection-id="{{collection.id}}"
+      {% if sub_collection %}
+      data-sub-collection-id="{{sub_collection.id}}"
+      {% endif %}
+      data-section-id="{{section.id}}"
+      method="post">
+      {{ form_hidden_tag() }}
+      <input
+        class="bg-inherit border-none underline"
+        value="{{section.label}}"
+        type="text"
+        name="label"
+        id="edit-section-label-{{section.id}}"
+        placeholder="Section label"
+        required
+        readonly />
+      <button name="submit" type="submit"></button>
+    </form>
+  </button>
+  <svg
+    id="dropdownSectionContextButton{{section.id}}"
+    data-dropdown-toggle="dropdown"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 0 0"
+    stroke-width="1.5"
+    stroke="none"
+    class="w-0 h-0"></svg>
+  <div
+    data="section-context-menu-{{section.id}}"
+    id="dropdown"
+    class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    {% if current_user.is_authenticated %}
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      <li>
+        <button
+          type="button"
+          id="rename-section-button-{{section.id}}"
+          class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          Rename Section
+        </button>
+      </li>
+      <li>
+        <!-- prettier-ignore -->
+        <button
+          type="button"
+          data-modal-target="delete-section-modal"
+          data-modal-toggle="delete-section-modal"
+          id="callDeleteSectionModal"
+          data-collection-id="{{collection.id}}"
+          {% if sub_collection %}
+          data-sub-collection-id="{{sub_collection.id}}"
+          {% endif %}
+          data-section-id="{{section.id}}"
+          class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          Delete Section
+        </button>
+      </li>
+    </ul>
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      <li>
+        <button
+          type="button"
+          class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          Export Section
+        </button>
+      </li>
+    </ul>
+    {% else %}
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      <li>
+        <button
+          type="button"
+          class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          Connect your wallet to do this
+        </button>
+      </li>
+    </ul>
+    {% endif %}
+  </div>
+</div>

app/templates/book/components/sub_collection_preview_content.html

@@ -0,0 +1,304 @@
+{% if not collection.is_leaf %}
+<!-- if collection has sub_collection make for loop for it -->
+{% for sub_collection in collection.children if not sub_collection.is_deleted%}
+<p class="my-3">##{{sub_collection.label}}</p>
+{% if not sub_collection.active_sections and not sub_collection.children %}
+<p class="ml-3 my-3 italic text-sm">This sub collection is empty</p>
+{% endif %}
+<!-- prettier-ignore -->
+{% if sub_collection.children %}
+{{recursive_render("book/components/sub_collection_preview_content.html",sub_collection,book)|safe}}
+{% else %}
+<!-- prettier-ignore -->
+{% for section in sub_collection.active_sections %}
+<div class="bg-inherit max-w-full text-gray-900 dark:text-white mt-1">
+  <div class="flex flex-col pb-3 w-full">
+    <div class="flex w-full mb-1 dark:text-gray-100 flex-col">
+      <!-- prettier-ignore -->
+      <a  href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
+                <p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
+      {% if not section.active_interpretations %}
+      <p class="ml-3 my-3 italic text-sm">This section is empty</p>
+      {% else %}
+      <div class="ql-snow truncate md:max-w-xl">
+        <div class="dark:text-white h-30 ql-editor-readonly !px-0">
+          <p>{{display_tags(section.approved_interpretation.text)|safe }}</p>
+        </div>
+      </div>
+      <div
+        class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
+        <span class="text-sm"
+          >Interpretation by
+          <a
+            href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}"
+            class="text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}"
+            >{{section.approved_interpretation.user.username}}</a
+          >
+          on {{section.approved_interpretation.created_at.strftime('%B %d,
+          %Y')}}</span
+        >
+        <button
+          data-tooltip-target="tooltip-click"
+          data-tooltip-trigger="click"
+          id="copyLinkButton"
+          type="button"
+          class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
+          data-link="{{ build_qa_url(section.approved_interpretation) }}">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" />
+          </svg>
+        </button>
+        <div
+          id="tooltip-click"
+          role="tooltip"
+          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+          Link copied!
+          <div class="tooltip-arrow" data-popper-arrow></div>
+        </div>
+      </div>
+      <!--Comments-->
+      {% if not section.approved_comments %}
+      <p>No comments for current section</p>
+      {% else %}
+      <div
+        id="accordion-comments-collapse-{{loop.index}}"
+        data-accordion="collapse">
+        <h2
+          id="accordion-comments-collapse-{{loop.index}}-heading-{{loop.index}}">
+          <button
+            type="button"
+            class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left"
+            data-accordion-target="#accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}"
+            aria-expanded="false"
+            aria-controls="accordion-collapse-body-1">
+            <svg
+              data-accordion-icon
+              class="w-6 h-6 rotate-180 shrink-0"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill-rule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clip-rule="evenodd"></path>
+            </svg>
+            <span><i>Comments:</i></span>
+          </button>
+        </h2>
+        <div
+          id="accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}"
+          class="hidden"
+          aria-labelledby="accordion-collapse-heading-{{loop.index}}">
+          {% for comment in section.approved_comments %}
+          <div class="p-5 ml-6">
+            <div class="dark:text-white h-30">
+              <div class="ql-snow mb-2 truncate md:max-w-xl">
+                <div class="dark:text-white h-30 ql-editor-readonly !px-0">
+                  <p>{{ display_tags(comment.text)|safe }}</p>
+                </div>
+              </div>
+            </div>
+            <div
+              class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
+              <span class="text-sm"
+                >Created by
+                <a
+                  href="{{url_for('user.profile',user_id=comment.user.id)}}"
+                  class="text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}"
+                  >{{comment.user.username}}</a
+                >
+                on {{comment.created_at.strftime('%B %d, %Y')}}</span
+              >
+              <button
+                data-tooltip-target="tooltip-click"
+                data-tooltip-trigger="click"
+                id="copyLinkButton"
+                type="button"
+                class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
+                data-link="{{ build_qa_url(section.approved_interpretation) }}">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" />
+                </svg>
+              </button>
+              <div
+                id="tooltip-click"
+                role="tooltip"
+                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                Link copied!
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    {% endif %} {% endif %}
+  </div>
+</div>
+<!-- prettier-ignore -->
+{% endfor %} 
+{% endif %}
+{% endfor %} 
+{% else %}
+<!-- prettier-ignore -->
+{% for section in collection.active_sections %}
+<!-- prettier-ignore -->
+<a href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
+    <!-- prettier-ignore -->
+    <p id="section-{{section.label}}" class="truncate my-3"> {{ section.label }} </p></a >
+{% if not section.active_interpretations %}
+<p class="ml-3 my-3 italic text-sm">This section is empty</p>
+{% else %}
+<div class="ql-snow truncate md:max-w-xl mb-3">
+  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
+    <p>{{ display_tags(section.approved_interpretation.text)|safe }}</p>
+  </div>
+</div>
+<!-- prettier-ignore -->
+<div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
+  <span class="text-sm"
+    >Interpretation by
+    <a
+      href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}"
+      class="text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}"
+      >{{section.approved_interpretation.user.username}}</a
+    >
+    on {{section.approved_interpretation.created_at.strftime('%B %d,
+    %Y')}}</span
+  >
+  <button
+    data-tooltip-target="tooltip-click"
+    data-tooltip-trigger="click"
+    id="copyLinkButton"
+    type="button"
+    class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
+    data-link="{{ build_qa_url(section.approved_interpretation) }}">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" />
+    </svg>
+  </button>
+  <div
+    id="tooltip-click"
+    role="tooltip"
+    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+    Link copied!
+    <div class="tooltip-arrow" data-popper-arrow></div>
+  </div>
+</div>
+<!--Comments-->
+{% if not section.approved_comments %}
+<div class="mb-3">
+  <p>No comments for current section</p>
+</div>
+{% else %}
+<div
+  id="accordion-comments-collapse-nest{{loop.index}}"
+  data-accordion="collapse"
+  class="mb-3">
+  <h2
+    id="accordion-comments-collapse-nest{{loop.index}}-heading-{{loop.index}}">
+    <button
+      type="button"
+      class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left"
+      data-accordion-target="#accordion-comments-collapse-nest{{loop.index}}-body-{{loop.index}}"
+      aria-expanded="false"
+      aria-controls="accordion-collapse-body-1">
+      <svg
+        data-accordion-icon
+        class="w-6 h-6 rotate-180 shrink-0"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"></path>
+      </svg>
+      <span><i>Comments:</i></span>
+    </button>
+  </h2>
+  <div
+    id="accordion-comments-collapse-nest{{loop.index}}-body-{{loop.index}}"
+    class="hidden"
+    aria-labelledby="accordion-collapse-heading-1">
+    {% for comment in section.approved_comments %}
+    <div class="p-5 ml-6">
+      <div class="dark:text-white h-30">
+        <div class="ql-snow mb-2 truncate md:max-w-xl">
+          <div class="dark:text-white h-30 ql-editor-readonly !px-0">
+            <p>{{ display_tags(comment.text)|safe }}</p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
+        <span class="text-sm"
+          >Created by
+          <a
+            href="{{url_for('user.profile',user_id=comment.user.id)}}"
+            class="text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}"
+            >{{comment.user.username}}</a
+          >
+          on {{comment.created_at.strftime('%B %d, %Y')}}</span
+        >
+        <button
+          data-tooltip-target="tooltip-click"
+          data-tooltip-trigger="click"
+          id="copyLinkButton"
+          type="button"
+          class="hover:dark:text-white hover:text-black focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white"
+          data-link="{{ build_qa_url(section.approved_interpretation) }}">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" />
+          </svg>
+        </button>
+        <div
+          id="tooltip-click"
+          role="tooltip"
+          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+          Link copied!
+          <div class="tooltip-arrow" data-popper-arrow></div>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endif %} {% endif %} {% endfor %} {% endif %}

app/templates/book/components/sub_collection_tab_content.html

@@ -0,0 +1,90 @@
+<div class="ml-6">
+  {% if not collection.is_leaf %}
+  <!-- if collection has sub_collection make for loop for it -->
+  <!-- Nested accordion -->
+  {% for sub_collection in collection.children if not
+  sub_collection.is_deleted%}
+  <div id="accordion-nested-collapse" data-accordion="open">
+    <!-- prettier-ignore -->
+    <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
+      <button
+        class="bg-inherit"
+        type="button"
+        data-accordion-target="#accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}"
+        aria-expanded="true"
+        aria-controls="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}">
+        <!-- prettier-ignore -->
+        <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
+      </button>
+      <!-- prettier-ignore -->
+      <a id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="text-black dark:text-white">
+        <form id="rename-sub-collection-label-form-{{sub_collection.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
+          {{ form_hidden_tag() }}
+          <!-- prettier-ignore -->
+          <input class="bg-inherit border-none" value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{sub_collection.id}}" placeholder="Sub collection label" required readonly />
+          <button name="submit" type="submit"></button>
+        </form>
+      </a>
+    </div>
+    <!-- prettier-ignore -->
+    <svg id="dropdownSubCollectionContextButton{{sub_collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
+    <!-- prettier-ignore -->
+    <div data="sub-collection-context-menu-{{sub_collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+      {% if current_user.is_authenticated %}
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        {% if sub_collection.is_leaf and not sub_collection.children %}
+        <li>
+          <button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Section </button>
+        </li>
+        {% else %}
+        <li>
+          <button type="button" id="callAddSubCollectionModal" data-modal-target="add-sub-collection-modal" data-modal-toggle="add-sub-collection-modal" data-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Subcollection </button>
+        </li>
+        {% endif %}
+      </ul>
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        <li>
+          <button type="button" id="rename-sub-collection-button-{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Rename Sub Collection </button>
+        </li>
+        <li>
+          <button type="button" id="callDeleteSubCollectionModal" data-modal-target="delete-sub-collection-modal" data-modal-toggle="delete-sub-collection-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Delete Sub Collection </button>
+        </li>
+      </ul>
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        <li>
+          <button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Export Sub Collection </button>
+        </li>
+      </ul>
+      {% else %}
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        <li>
+          <button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Connect your wallet to do this </button>
+        </li>
+      </ul>
+      {% endif %}
+    </div>
+    <!-- prettier-ignore -->
+    <div id="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="hidden" aria-labelledby="accordion-nested-collapse-heading-{{sub_collection.id}}">
+    {% if sub_collection.children %}
+        {{recursive_render("book/components/sub_collection_tab_content.html",sub_collection,book)|safe}}
+    {% else %}
+        <div class="ml-6">
+        <!-- here comes for loop for all section in this sub_collection-->
+            {% for section in sub_collection.active_sections %}
+                {% include 'book/components/section_tab_content.html' %}
+            {% endfor %}
+        </div>
+    {% endif %}
+    </div>
+  </div>
+  {% endfor %}
+  <!-- End: Nested accordion -->
+  {% else %}
+  <!-- if collection doesn't have sub_collection -->
+  <div class="ml-6">
+    <!-- here comes for loop for all section in this collection-->
+    {% for section in collection.active_sections %} {% include
+    'book/components/section_tab_content.html' %} {% endfor %}
+  </div>
+  {% endif %}
+</div>

app/templates/book/interpretation_view.html

@@ -2,9 +2,9 @@
 {% extends 'base.html' %}
 
 {% if current_user.is_authenticated %}
-{% include 'book/approve_interpretation_modal.html' %}
-{% include 'book/edit_interpretation_modal.html' %}
-{% include 'book/delete_interpretation_modal.html' %}
+{% include 'book/modals/approve_interpretation_modal.html' %}
+{% include 'book/modals/edit_interpretation_modal.html' %}
+{% include 'book/modals/delete_interpretation_modal.html' %}
   {% block right_sidebar %}
   {% endblock %}
 {% endif %}
@@ -46,11 +46,7 @@
       {% if current_user.is_authenticated %}
       <!-- prettier-ignore -->
       <form
-        {% if sub_collection %}
-          action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id) }}"
-        {% else %}
-          action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
-        {% endif %}
+        action="{{ url_for('book.interpretation_create', book_id=book.id, section_id=section.id) }}"
         method="post" class="prevent-submit-on-enter bg-white rounded-lg shadow dark:bg-gray-700"
       >
       {{ form_hidden_tag() }}

app/templates/book/local_breadcrumbs_navigation.html

@@ -1,26 +1,40 @@
 <!-- prettier-ignore -->
 <ol class="inline-flex items-center overflow-x-scroll md:overflow-auto p-0">
 {% for breadcrumb in local_breadcrumbs if breadcrumb.type != "MyBookList" and breadcrumb.type != "AuthorBookList" %}
-<li class="inline-flex items-center align-middle justify-center">
-    {% if not loop.index==local_breadcrumbs|length-1 %}
-    <a href="{{ breadcrumb.url }}" class="inline-flex text-xs font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+    {% if breadcrumb.type != 'Splitter' %}
+        <li class="inline-flex items-center align-middle justify-center">
+            {% if not loop.index==local_breadcrumbs|length-1 %}
+                <a href="{{ breadcrumb.url }}" class="inline-flex text-xs font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+            {% else %}
+                <span class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+            {% endif %}
+
+            {% if breadcrumb.type != "Splitter" %}
+            <div id="breadcrumb-{{loop.index}}-tooltip" role="tooltip" class="delay-100 absolute z-[100] invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-700 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                {{ breadcrumb.label }}
+                <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
+            {% endif %}
+
+            <!-- prettier-ignore -->
+            <span class="select-none">{{ breadcrumb.label }}</span>
+
+            {% if not loop.index==local_breadcrumbs|length %}
+                </a>
+            {% else %}
+                </span>
+            {% endif %}
+
+
+            {% if not loop.index==local_breadcrumbs|length-1 %}
+            <svg aria-hidden="true" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
+            {% endif %}
+        </li>
     {% else %}
-    <span class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+      <li class="inline-flex items-center mx-1">
+        <span class="text-sm truncate font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white select-none ">{{ breadcrumb.label }}</span>
+        <svg aria-hidden="true" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
+      </li>
     {% endif %}
-    <div id="breadcrumb-{{loop.index}}-tooltip" role="tooltip" class="delay-100 absolute z-[100] invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-700 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-    {{ breadcrumb.label }}
-    <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
-    <!-- prettier-ignore -->
-    <span class="select-none">{{ breadcrumb.label }}</span>
-    {% if not loop.index==local_breadcrumbs|length %}
-    </a>
-    {% else %}
-    </span>
-    {% endif %}
-    {% if not loop.index==local_breadcrumbs|length-1 %}
-    <svg aria-hidden="true" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
-    {% endif %}
-</li>
 {% endfor %}
 </ol>

app/templates/book/modals/add_section_modal.html

@@ -3,10 +3,8 @@
 <div id="add-section-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
-    <form id="add_section_modal_form" action="{{ url_for('book.section_create', book_id=book.id, collection_id=0, sub_collection_id=0) }}" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+    <form id="add_section_modal_form" action="{{ url_for('book.section_create', book_id=book.id, collection_id=0) }}" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
-      <input type="hidden" name="collection_id" id="add_section_modal_collection_id" value="" />
-      <input type="hidden" name="sub_collection_id" id="add_section_modal_sub_collection_id" value="" />
       <input type="hidden" name="about" id="new-section-input" />
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">

app/templates/book/modals/delete_comment_modal.html

@@ -3,11 +3,7 @@
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
-      {% if sub_collection %}
-        action="{{ url_for('book.comment_delete', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
-      {% else %}
-        action="{{ url_for('book.comment_delete', book_id=book.id, collection_id=collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
-      {% endif %}
+      action="{{ url_for('book.comment_delete', book_id=book.id, interpretation_id=interpretation.id) }}"
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <!-- Modal header -->

app/templates/book/modals/delete_interpretation_modal.html

@@ -3,11 +3,7 @@
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
-      {% if sub_collection %}
-        action="{{ url_for('book.interpretation_delete', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id) }}"
-      {% else %}
-        action="{{ url_for('book.interpretation_delete', book_id=book.id, collection_id=collection.id, section_id=section.id) }}"
-      {% endif %}
+      action="{{ url_for('book.interpretation_delete', book_id=book.id, interpretation_id=interpretation.id) }}"
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <!-- Modal header -->

app/templates/book/modals/delete_section_modal.html

@@ -4,11 +4,9 @@
     <!-- Modal content -->
     <form
       id="delete_section_modal_form"
-      action="{{ url_for('book.section_delete', book_id=book.id, collection_id=0, sub_collection_id=0, section_id=0) }}"
+      action="{{ url_for('book.section_delete', book_id=book.id, section_id=0) }}"
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
-      <input type="hidden" name="collection_id" id="delete_section_modal_collection_id" value="" />
-      <input type="hidden" name="sub_collection_id" id="delete_section_modal_sub_collection_id" value="" />
       <input type="hidden" name="section_id" id="delete_section_modal_section_id" value="" />
 
       <!-- Modal header -->

app/templates/book/modals/delete_sub_collection_modal.html

@@ -5,7 +5,7 @@
     <!-- Modal content -->
     <form
       id="delete_sub_collection_modal_form"
-      action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=0, sub_collection_id=0) }}"
+      action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=0) }}"
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="collection_id" id="delete_sub_collection_modal_collection_id" value="" />

app/templates/book/modals/edit_collection_modal.html

@@ -4,12 +4,9 @@
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
-      {% if sub_collection %}
-        action="{{ url_for('book.collection_edit', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id) }}"
-      {% else %}
-        action="{{ url_for('book.collection_edit', book_id=book.id, collection_id=collection.id) }}"
-      {% endif %}
-      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      action="{{ url_for('book.collection_edit', book_id=book.id, collection_id=collection.id) }}"
+      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+    >
       {{ form_hidden_tag() }}
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">

app/templates/book/modals/edit_comment_modal.html

@@ -3,11 +3,7 @@
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
-      {% if sub_collection %}
-        action="{{ url_for('book.comment_edit', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
-      {% else %}
-        action="{{ url_for('book.comment_edit', book_id=book.id, collection_id=collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
-      {% endif %}
+      action="{{ url_for('book.comment_edit', book_id=book.id, interpretation_id=interpretation.id) }}"
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <!-- Modal header -->

app/templates/book/modals/edit_interpretation_modal.html

@@ -3,11 +3,7 @@
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
-      {% if sub_collection %}
-        action="{{ url_for('book.interpretation_edit', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id) }}"
-      {% else %}
-        action="{{ url_for('book.interpretation_edit', book_id=book.id, collection_id=collection.id, section_id=section.id) }}"
-      {% endif %}
+      action="{{ url_for('book.interpretation_edit', book_id=book.id, interpretation_id=interpretation.id) }}"
       method="post"
       class="prevent-submit-on-enter relative bg-white rounded-lg shadow dark:bg-gray-700"
     >

app/templates/book/modals/edit_section_modal.html

@@ -3,11 +3,7 @@
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
-      {% if sub_collection %}
-        action="{{ url_for('book.section_edit', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id) }}"
-        {% else %}
-        action="{{ url_for('book.section_edit', book_id=book.id, collection_id=collection.id, section_id=section.id) }}"
-      {% endif %}
+      action="{{ url_for('book.section_edit', book_id=book.id, section_id=section.id) }}"
       method="post"
       class="relative bg-white rounded-lg shadow dark:bg-gray-700"
     >

app/templates/book/my_library.html

@@ -7,7 +7,7 @@
 {% block content %}
 
 {% if current_user.is_authenticated %}
-  {% include 'book/add_book_modal.html' %}
+  {% include 'book/modals/add_book_modal.html' %}
 {% endif %}
 
 

app/templates/book/qa_view.html

@@ -4,8 +4,8 @@
 
 
 {% if current_user.is_authenticated %}
-{% include 'book/delete_comment_modal.html' %}
-{% include 'book/edit_comment_modal.html' %}
+{% include 'book/modals/delete_comment_modal.html' %}
+{% include 'book/modals/edit_comment_modal.html' %}
 {% block right_sidebar %}
 {% endblock %}
 {% endif %}
@@ -40,18 +40,7 @@
     {% endif %}
     {% if current_user.is_authenticated %}
     <form
-      {%
-      if
-      sub_collection
-      %}
-      action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-      {%
-      else
-      %}
-      action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-      {%
-      endif
-      %}
+      action="{{ url_for('book.create_comment', book_id=book.id, interpretation_id=interpretation.id) }}"
       method="post"
       class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
       {{ form_hidden_tag() }}
@@ -202,7 +191,7 @@
           </dt>
         </div>
         <div class="p-5 m-3">
-          {% for child in comment.children %}
+          {% for child in comment.children if not child.is_deleted %}
             <div class="p-5 mb-2 flex justify-between items-end bg-slate-100 dark:bg-slate-600 rounded-lg">
               <div class="ql-snow">
                 <div class="inline-block mb-4 ql-editor-readonly !p-0">
@@ -237,11 +226,7 @@
         <div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
           <div class="p-5 border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
               <form
-                {% if sub_collection %}
-                  action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-                {% else %}
-                  action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-                {% endif %}
+                action="{{ url_for('book.create_comment', book_id=book.id, interpretation_id=interpretation.id) }}"
                 method="post"
                 class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700"
               >

app/templates/book/right_sidebar.html

@@ -1,96 +0,0 @@
-<!-- prettier-ignore -->
-<aside id="logo-right-sidebar" class="fixed top-10 right-0 left-auto z-50 w-64 h-screen pt-28 transition-transform translate-x-96 bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Right-sidebar">
-  <div class="h-full pb-4 overflow-y-auto bg-white dark:bg-gray-800">
-    <ul class="space-y-4 mt-1 font-medium">
-      {% if book.owner.id == current_user.id %}
-      <li>
-        <!-- prettier-ignore -->
-        <a href="{{ url_for("book.settings", book_id=book.id) }}" type="button" class="space-x-3 text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" >
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
-          <p>Book Settings</p>
-        </a>
-      </li>
-      {% endif %}
-
-      {% if show_create_collection %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="add-collection-modal" data-modal-toggle="add-collection-modal" class="space-x-3 text-white ml-2 w-11/12 bg-emerald-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-emerald-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
-          <p>New {% if collection %}Sub{% endif %}Collection</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_create_section %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" class="space-x-3 text-white ml-2 w-11/12 bg-emerald-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-emerald-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
-          <p>New Section</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_edit_collection %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="edit-collection-modal" data-modal-toggle="edit-collection-modal" class="space-x-3 text-white ml-2 w-11/12 bg-teal-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-teal-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg>
-          <p>Edit {% if sub_collection %}Sub{% endif %}Collection</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_edit_section %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="edit-section-modal" data-modal-toggle="edit-section-modal" class="space-x-3 text-white ml-2 w-11/12 bg-teal-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-teal-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg>
-          <p>Edit Section</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_edit_interpretation %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="edit_interpretation_modal" data-modal-toggle="edit_interpretation_modal" class="space-x-3 text-white ml-2 w-11/12 bg-teal-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-teal-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg>
-          <p>Edit Interpretation</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_delete_collection %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" class="space-x-3 text-white ml-2 w-11/12 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
-          <p>Delete {% if sub_collection %}Sub{% endif %}Collection</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_delete_section %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="collection-collection-modal" data-modal-toggle="delete-collection-modal" class="space-x-3 text-white ml-2 w-11/12 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
-          <p>Delete Section</p>
-        </button>
-      </li>
-      {% endif %}
-
-      {% if show_delete_interpretation %}
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="delete_interpretation_modal" data-modal-toggle="delete_interpretation_modal" class="space-x-3 text-white ml-2 w-11/12 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
-          <p>Delete Interpretation</p>
-        </button>
-      </li>
-      {% endif %}
-    </ul>
-  </div>
-</aside>

app/templates/book/section_view.html

@@ -1,92 +0,0 @@
-<!-- prettier-ignore -->
-{% extends 'base.html' %}
-{% if book.owner.id == current_user.id %}
-{% set show_edit_collection = True %}
-{% set show_delete_collection = True %}
-{% set show_create_section = True %}
-{% set show_create_collection = not collection.sub_collections and not collection.is_leaf %}
-
-
-<!-- prettier-ignore -->
-{% include 'book/edit_collection_modal.html' %}
-{% include 'book/delete_collection_modal.html' %}
-{% include 'book/add_section_modal.html' %}
-{% include 'book/add_collection_modal.html' %}
-{% endif %}
-
-<!-- prettier-ignore -->
-{% block right_sidebar %}
-  {% include 'book/right_sidebar.html' %}
-{% endblock %}
-
-{% block content %}
-<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
-<div class="fixed z-30 w-full top-32 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-  <h1 class="text-l font-extrabold dark:text-white ml-4">Sections page</h1>
-  <div class="mb-1">
-    <!-- prettier-ignore -->
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
-      <li class="mr-2" role="presentation">
-        <!-- prettier-ignore -->
-        <button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
-          <!-- prettier-ignore -->
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
-          <span>Files</span>
-        </button>
-      </li>
-      <li class="mr-2" role="presentation">
-        <!-- prettier-ignore -->
-        <button class="flex items-center space-x-2 p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="about-tab" data-tabs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" /> </svg>
-          <span>About</span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</div>
-  <div id="myTabContent" class="mt-20">
-    <!-- prettier-ignore -->
-    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
-      <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
-        <!-- prettier-ignore -->
-        {% for section in sections %}
-
-        <!-- prettier-ignore -->
-        {% if sub_collection %}
-          <a href="{{url_for('book.interpretation_view', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id)}}">
-        {% else %}
-          <a href="{{url_for('book.interpretation_view', book_id=book.id, collection_id=collection.id, section_id=section.id)}}">
-        {% endif %}
-          <dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
-            <div class="flex flex-col pb-3 p-3 w-full">
-              <dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
-                <!-- prettier-ignore -->
-                <p class="truncate">{{ section.label }}</p>
-                <div class="flex ml-auto align-center justify-center space-x-3">
-                  <span class="space-x-0.5 flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
-                    <p>55</p>
-                  </span>
-                  <span class="space-x-0.5 flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
-                    <p>55</p>
-                  </span>
-                </div>
-              </dt>
-            </div>
-          </dl>
-        </a>
-        {% endfor %}
-      </dl>
-    </div>
-    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="about" role="tabpanel" aria-labelledby="about-tab">
-      <p class="text-sm text-gray-500 dark:text-gray-400">This is about</p>
-    </div>
-  </div>
-
-  <!-- prettier-ignore -->
-  {% endblock %}
-  <!-- prettier-ignore -->
-  {% block scripts %}
-{% endblock %}
-</div>

app/templates/book/settings.html

@@ -1,7 +1,7 @@
 <!-- prettier-ignore -->
 {% extends 'base.html' %}
-{% include 'book/add_contributor_modal.html' %}
-{% include 'book/delete_book_modal.html' %}
+{% include 'book/modals/add_contributor_modal.html' %}
+{% include 'book/modals/delete_book_modal.html' %}
 
 
 {% block title %}Book Settings{% endblock %}

app/templates/book/sub_collection_view.html

@@ -1,89 +0,0 @@
-<!-- prettier-ignore -->
-{% extends 'base.html' %}
-
-{% if book.owner.id == current_user.id %}
-{% set show_edit_collection = True %}
-{% set show_delete_collection = True %}
-{% set show_create_collection = True %}
-{% set show_create_section = not collection.sub_collections or collection.is_leaf or not collection.children %}
-
-<!-- prettier-ignore -->
-{% include 'book/edit_collection_modal.html' %}
-{% include 'book/delete_collection_modal.html' %}
-{% include 'book/add_collection_modal.html' %}
-{% include 'book/add_section_modal.html' %}
-{% endif %}
-
-{% block title %}{{book.label[:32]}}{% endblock %}
-
-{% block right_sidebar %}
-  {% include 'book/right_sidebar.html' %}
-{% endblock %}
-
-{% block content %}
-<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
-  <!-- prettier-ignore -->
-  <div class="fixed z-30 w-full top-32 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-    <!-- prettier-ignore -->
-    <h1 class="text-l font-extrabold dark:text-white ml-4"> Sub collections page </h1>
-    <div class="mb-1">
-      <!-- prettier-ignore -->
-      <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
-      <li class="mr-2" role="presentation">
-        <!-- prettier-ignore -->
-        <button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
-          <span>Files</span>
-        </button>
-      </li>
-      <li class="mr-2" role="presentation">
-        <!-- prettier-ignore -->
-        <button class="flex items-center space-x-2 p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="about-tab" data-tabs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" /> </svg>
-          <span>About</span>
-        </button>
-      </li>
-    </ul>
-    </div>
-  </div>
-
-  <div id="myTabContent" class="mt-20">
-    <!-- prettier-ignore -->
-    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
-      <!-- prettier-ignore -->
-      <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
-        <!-- prettier-ignore -->
-        {% for sub_collection in collection.sub_collections %}
-        <!-- prettier-ignore -->
-        <a href="{{url_for('book.section_view',book_id=book.id,collection_id=collection.id,sub_collection_id=sub_collection.id)}}">
-          <dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
-            <div class="flex flex-col pb-3 p-3 w-full">
-              <dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
-                <p>{{ sub_collection.label }}</p>
-                <div class="ml-auto">
-                  <!-- prettier-ignore -->
-                  <span class="mr-3" ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg> 55</span >
-                  <!-- prettier-ignore -->
-                  <span class="mr-3" ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /> </svg> 55</span >
-                </div>
-              </dt>
-            </div>
-          </dl>
-        </a>
-
-        {% endfor %}
-      </dl>
-    </div>
-    <!-- prettier-ignore -->
-    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="about" role="tabpanel" aria-labelledby="about-tab">
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        This is about of {{collection.about}}
-      </p>
-    </div>
-  </div>
-  <!-- prettier-ignore -->
-  {% endblock %}
-  <!-- prettier-ignore -->
-  {% block scripts %}
-{% endblock %}
-</div>

app/templates/section/all.html

@@ -15,7 +15,7 @@
   <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
     {% for section in sections %}
     <!-- prettier-ignore -->
-    <a href="{{url_for('book.interpretation_view',book_id=section.book_id,collection_id=section.collection_id,sub_collection_id=section.sub_collection_id, section_id=section.id)}}">
+    <a href="{{url_for('book.interpretation_view', book_id=section.book_id, section_id=section.id)}}">
       <dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
         <div class="flex flex-col pb-3 p-3 w-full">
           <!-- prettier-ignore -->

app/views/book/collection.py

@@ -21,7 +21,7 @@ from .bp import bp
 @bp.route("/<int:book_id>/collections", methods=["GET"])
 def collection_view(book_id: int):
     book = db.session.get(m.Book, book_id)
-    breadcrumbs = create_breadcrumbs(book_id=book_id, collection_path=())
+    breadcrumbs = create_breadcrumbs(book_id=book_id)
     if not book or book.is_deleted:
         log(log.WARNING, "Book with id [%s] not found", book_id)
         flash("Book not found", "danger")
@@ -32,32 +32,6 @@ def collection_view(book_id: int):
         )
 
 
-@bp.route("/<int:book_id>/<int:collection_id>/subcollections", methods=["GET"])
-def sub_collection_view(book_id: int, collection_id: int):
-    book: m.Book = db.session.get(m.Book, book_id)
-    if not book or book.is_deleted:
-        log(log.WARNING, "Book with id [%s] not found", book_id)
-        flash("Book not found", "danger")
-        return redirect(url_for("book.my_library"))
-    collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if not collection or collection.is_deleted:
-        log(log.WARNING, "Collection with id [%s] not found", collection_id)
-        flash("Collection not found", "danger")
-        return redirect(url_for("book.collection_view", book_id=book_id))
-    breadcrumbs = create_breadcrumbs(book_id=book_id, collection_path=(collection.id,))
-    if collection.is_leaf:
-        return redirect(
-            url_for("book.section_view", book_id=book.id, collection_id=collection.id)
-        )
-    else:
-        return render_template(
-            "book/sub_collection_view.html",
-            book=book,
-            collection=collection,
-            breadcrumbs=breadcrumbs,
-        )
-
-
 @bp.route("/<int:book_id>/create_collection", methods=["POST"])
 @bp.route("/<int:book_id>/<int:collection_id>/create_sub_collection", methods=["POST"])
 @register_book_verify_route(bp.name)
@@ -73,16 +47,12 @@ def collection_create(book_id: int, collection_id: int | None = None):
             flash("You can't create subcollection for this collection", "danger")
             return redirect(
                 url_for(
-                    "book.sub_collection_view",
+                    "book.collection_view",
                     book_id=book_id,
                     collection_id=collection_id,
                 )
             )
 
-        redirect_url = url_for(
-            "book.sub_collection_view", book_id=book_id, collection_id=collection_id
-        )
-
     form = f.CreateCollectionForm()
 
     if form.validate_on_submit():
@@ -114,11 +84,10 @@ def collection_create(book_id: int, collection_id: int | None = None):
             label=label,
             about=form.about.data,
             parent_id=book.versions[-1].root_collection.id,
-            version_id=book.versions[-1].id,
+            version_id=book.last_version.id,
         )
         if collection_id:
             collection.parent_id = collection_id
-            collection.is_leaf = True
 
         log(log.INFO, "Create collection [%s]. Book: [%s]", collection, book.id)
         collection.save()
@@ -137,18 +106,11 @@ def collection_create(book_id: int, collection_id: int | None = None):
 
 
 @bp.route("/<int:book_id>/<int:collection_id>/edit", methods=["POST"])
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/edit", methods=["POST"]
-)
 @register_book_verify_route(bp.name)
 @login_required
-def collection_edit(
-    book_id: int, collection_id: int, sub_collection_id: int | None = None
-):
+def collection_edit(book_id: int, collection_id: int):
     book: m.Book = db.session.get(m.Book, book_id)
     collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if sub_collection_id:
-        collection = db.session.get(m.Collection, sub_collection_id)
 
     form = f.EditCollectionForm()
     redirect_url = url_for(
@@ -158,19 +120,15 @@ def collection_edit(
 
     if form.validate_on_submit():
         label = form.label.data
-        collection_query: m.Collection = m.Collection.query.filter_by(
-            is_deleted=False,
-            label=label,
-        ).filter(m.Collection.id != collection.id)
-
-        if sub_collection_id:
-            collection_query = collection_query.filter_by(parent_id=collection_id)
-        else:
-            collection_query = collection_query.filter_by(
-                parent_id=collection.parent.id
+        existing_collection: m.Collection = (
+            m.Collection.query.filter_by(
+                is_deleted=False, label=label, parent_id=collection.parent.id
             )
+            .filter(m.Collection.id != collection.id)
+            .first()
+        )
 
-        if collection_query.first():
+        if existing_collection:
             log(
                 log.INFO,
                 "Collection with similar label already exists. Book: [%s], Collection: [%s], Label: [%s]",
@@ -203,18 +161,10 @@ def collection_edit(
 
 
 @bp.route("/<int:book_id>/<int:collection_id>/delete", methods=["POST"])
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/delete",
-    methods=["POST"],
-)
 @register_book_verify_route(bp.name)
 @login_required
-def collection_delete(
-    book_id: int, collection_id: int, sub_collection_id: int | None = None
-):
+def collection_delete(book_id: int, collection_id: int):
     collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if sub_collection_id:
-        collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
 
     collection.is_deleted = True
     if collection.children:

app/views/book/comment.py

@@ -14,63 +14,22 @@ from .bp import bp
 
 
 @bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/create_comment",
-    methods=["POST"],
-)
-@bp.route(
-    (
-        "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/<int:interpretation_id>/create_comment"
-    ),
+    "/<int:book_id>/<int:interpretation_id>/create_comment",
     methods=["POST"],
 )
 @login_required
 def create_comment(
     book_id: int,
-    collection_id: int,
-    section_id: int,
     interpretation_id: int,
-    sub_collection_id: int | None = None,
 ):
     book: m.Book = db.session.get(m.Book, book_id)
     if not book or book.is_deleted:
         log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book)
         flash("You are not owner of this book!", "danger")
         return redirect(url_for("book.my_library"))
-
-    collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if not collection or collection.is_deleted:
-        log(log.WARNING, "Collection with id [%s] not found", collection_id)
-        flash("Collection not found", "danger")
-        return redirect(url_for("book.collection_view", book_id=book_id))
-
-    sub_collection = None
-    if sub_collection_id:
-        sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
-        if not sub_collection or sub_collection.is_deleted:
-            log(log.WARNING, "Sub_collection with id [%s] not found", sub_collection_id)
-            flash("SubCollection not found", "danger")
-            return redirect(
-                url_for(
-                    "book.sub_collection_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                )
-            )
-
     redirect_url = url_for(
-        "book.qa_view",
-        book_id=book_id,
-        collection_id=collection_id,
-        sub_collection_id=sub_collection_id,
-        section_id=section_id,
-        interpretation_id=interpretation_id,
+        "book.qa_view", book_id=book_id, interpretation_id=interpretation_id
     )
-    section: m.Section = db.session.get(m.Section, section_id)
-    if not section or section.is_deleted:
-        log(log.WARNING, "Section with id [%s] not found", section_id)
-        flash("Section not found", "danger")
-        return redirect(redirect_url)
 
     interpretation: m.Interpretation = db.session.get(
         m.Interpretation, interpretation_id
@@ -95,9 +54,8 @@ def create_comment(
 
         log(
             log.INFO,
-            "Create comment for interpretation [%s]. Section: [%s]",
+            "Create comment for interpretation [%s].",
             interpretation,
-            section,
         )
         comment.save()
 
@@ -116,26 +74,13 @@ def create_comment(
         return redirect(redirect_url)
 
 
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/comment_delete",
-    methods=["POST"],
-)
-@bp.route(
-    (
-        "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/<int:interpretation_id>/comment_delete"
-    ),
-    methods=["POST"],
-)
+@bp.route("/<int:book_id>/<int:interpretation_id>/comment_delete", methods=["POST"])
 @register_book_verify_route(bp.name)
 @login_required
-def comment_delete(
-    book_id: int,
-    collection_id: int,
-    section_id: int,
-    interpretation_id: int,
-    sub_collection_id: int | None = None,
-):
+def comment_delete(book_id: int, interpretation_id: int):
+    redirect_url = url_for(
+        "book.qa_view", book_id=book_id, interpretation_id=interpretation_id
+    )
     form = f.DeleteCommentForm()
     comment_id = form.comment_id.data
     comment: m.Comment = db.session.get(m.Comment, comment_id)
@@ -147,45 +92,29 @@ def comment_delete(
         comment.save()
 
         flash("Success!", "success")
-        return redirect(
-            url_for(
-                "book.qa_view",
-                book_id=book_id,
-                collection_id=collection_id,
-                sub_collection_id=sub_collection_id,
-                section_id=section_id,
-                interpretation_id=interpretation_id,
-            )
-        )
+        return redirect(redirect_url)
+    flash("Invalid id!", "danger")
     return redirect(
         url_for(
-            "book.sub_collection_view",
+            "book.collection_view",
             book_id=book_id,
-            collection_id=collection_id,
         )
     )
 
 
 @bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/comment_edit",
-    methods=["POST"],
-)
-@bp.route(
-    (
-        "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/<int:interpretation_id>/comment_edit"
-    ),
+    "/<int:book_id>/<int:interpretation_id>/comment_edit",
     methods=["POST"],
 )
 @register_book_verify_route(bp.name)
 @login_required
 def comment_edit(
     book_id: int,
-    collection_id: int,
-    section_id: int,
     interpretation_id: int,
-    sub_collection_id: int | None = None,
 ):
+    redirect_url = url_for(
+        "book.qa_view", book_id=book_id, interpretation_id=interpretation_id
+    )
     form = f.EditCommentForm()
 
     if form.validate_on_submit():
@@ -202,16 +131,9 @@ def comment_edit(
         comment.save()
 
         flash("Success!", "success")
-        return redirect(
-            url_for(
-                "book.qa_view",
-                book_id=book_id,
-                collection_id=collection_id,
-                sub_collection_id=sub_collection_id,
-                section_id=section_id,
-                interpretation_id=interpretation_id,
-            )
-        )
+        return redirect(redirect_url)
+    flash("Invalid id!", "danger")
+
     return redirect(
         url_for(
             "book.collection_view",

app/views/book/interpretation.py

@@ -17,19 +17,10 @@ from app.logger import log
 from .bp import bp
 
 
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/interpretations",
-    methods=["GET"],
-)
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/<int:section_id>/interpretations",
-    methods=["GET"],
-)
+@bp.route("/<int:book_id>/<int:section_id>/interpretations", methods=["GET"])
 def interpretation_view(
     book_id: int,
-    collection_id: int,
     section_id: int,
-    sub_collection_id: int | None = None,
 ):
     book: m.Book = db.session.get(m.Book, book_id)
     if not book or book.is_deleted:
@@ -37,84 +28,39 @@ def interpretation_view(
         flash("Book not found", "danger")
         return redirect(url_for("book.my_library"))
 
-    collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if not collection or collection.is_deleted:
-        log(log.WARNING, "Collection with id [%s] not found", collection_id)
-        flash("Collection not found", "danger")
-        return redirect(url_for("book.collection_view", book_id=book_id))
-
-    if sub_collection_id:
-        sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
-        if not sub_collection or sub_collection.is_deleted:
-            log(log.WARNING, "Sub_collection with id [%s] not found", sub_collection_id)
-            flash("Sub_collection not found", "danger")
-            return redirect(
-                url_for(
-                    "book.sub_collection_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                )
-            )
-
     section: m.Section = db.session.get(m.Section, section_id)
     if not section:
         log(log.WARNING, "Section with id [%s] not found", section_id)
         flash("Section not found", "danger")
         return redirect(
             url_for(
-                "book.section_view",
+                "book.collection_view",
                 book_id=book_id,
-                collection_id=collection_id,
-                sub_collection_id=sub_collection_id,
             )
         )
-    else:
-        breadcrumbs = create_breadcrumbs(
-            book_id=book_id,
-            collection_path=(
-                collection_id,
-                sub_collection_id,
-            ),
-            section_id=section_id,
-        )
-        return render_template(
-            "book/interpretation_view.html",
-            book=book,
-            collection=collection,
-            sub_collection=sub_collection if sub_collection_id else None,
-            section=section,
-            breadcrumbs=breadcrumbs,
-        )
+    breadcrumbs = create_breadcrumbs(
+        book_id=book_id, section_id=section_id, collection_id=section.collection.id
+    )
+    return render_template(
+        "book/interpretation_view.html",
+        book=book,
+        section=section,
+        breadcrumbs=breadcrumbs,
+    )
 
 
-#####################
-# Interpretation CRUD
-#####################
-
-
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/create_interpretation",
-    methods=["POST"],
-)
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/<int:section_id>/create_interpretation",
-    methods=["POST"],
-)
+@bp.route("/<int:book_id>/<int:section_id>/create_interpretation", methods=["POST"])
 @register_book_verify_route(bp.name)
 @login_required
 def interpretation_create(
     book_id: int,
-    collection_id: int,
     section_id: int,
-    sub_collection_id: int | None = None,
 ):
     section: m.Section = db.session.get(m.Section, section_id)
     form = f.CreateInterpretationForm()
     redirect_url = url_for(
         "book.interpretation_view",
         book_id=book_id,
-        collection_id=collection_id,
-        sub_collection_id=sub_collection_id,
         section_id=section.id,
     )
 
@@ -155,31 +101,17 @@ def interpretation_create(
 
 
 @bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/edit_interpretation",
-    methods=["POST"],
-)
-@bp.route(
-    (
-        "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/edit_interpretation"
-    ),
-    methods=["POST"],
+    "/<int:book_id>/<int:interpretation_id>/edit_interpretation", methods=["POST"]
 )
 @register_book_verify_route(bp.name)
 @login_required
 def interpretation_edit(
     book_id: int,
-    collection_id: int,
-    section_id: int,
-    sub_collection_id: int | None = None,
+    interpretation_id: int,
 ):
     form = f.EditInterpretationForm()
     redirect_url = url_for(
-        "book.interpretation_view",
-        book_id=book_id,
-        collection_id=collection_id,
-        sub_collection_id=sub_collection_id,
-        section_id=section_id,
+        "book.qa_view", book_id=book_id, interpretation_id=interpretation_id
     )
 
     if form.validate_on_submit():
@@ -226,26 +158,11 @@ def interpretation_edit(
 
 
 @bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/delete_interpretation",
-    methods=["POST"],
-)
-@bp.route(
-    (
-        "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/delete_interpretation"
-    ),
-    methods=["POST"],
+    "/<int:book_id>/<int:interpretation_id>/delete_interpretation", methods=["POST"]
 )
 @register_book_verify_route(bp.name)
 @login_required
-def interpretation_delete(
-    book_id: int,
-    collection_id: int,
-    section_id: int,
-    sub_collection_id: int | None = None,
-):
-    form = f.DeleteInterpretationForm()
-    interpretation_id = form.interpretation_id.data
+def interpretation_delete(book_id: int, interpretation_id: int):
     interpretation: m.Interpretation = db.session.get(
         m.Interpretation, interpretation_id
     )
@@ -286,85 +203,31 @@ def interpretation_delete(
     )
 
 
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/preview",
-    methods=["GET"],
-)
-@bp.route(
-    (
-        "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/<int:interpretation_id>/preview"
-    ),
-    methods=["GET"],
-)
-def qa_view(
-    book_id: int,
-    collection_id: int,
-    section_id: int,
-    interpretation_id: int,
-    sub_collection_id: int | None = None,
-):
+@bp.route("/<int:book_id>/<int:interpretation_id>/preview", methods=["GET"])
+def qa_view(book_id: int, interpretation_id: int):
     book: m.Book = db.session.get(m.Book, book_id)
     if not book or book.is_deleted:
         log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book)
         flash("You are not owner of this book!", "danger")
         return redirect(url_for("book.my_library"))
 
-    collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if not collection or collection.is_deleted:
-        log(log.WARNING, "Collection with id [%s] not found", collection_id)
-        flash("Collection not found", "danger")
-        return redirect(url_for("book.collection_view", book_id=book_id))
-
-    if sub_collection_id:
-        sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
-        if not sub_collection or sub_collection.is_deleted:
-            log(log.WARNING, "Sub_collection with id [%s] not found", sub_collection_id)
-            flash("SubCollection not found", "danger")
-            return redirect(
-                url_for(
-                    "book.sub_collection_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                )
-            )
-
-    redirect_url = url_for(
-        "book.interpretation_view",
-        book_id=book_id,
-        collection_id=collection_id,
-        sub_collection_id=sub_collection_id,
-        section_id=section_id,
-    )
-    section: m.Section = db.session.get(m.Section, section_id)
-    if not section or section.is_deleted:
-        log(log.WARNING, "Section with id [%s] not found", section_id)
-        flash("Section not found", "danger")
-        return redirect(redirect_url)
-
     interpretation: m.Interpretation = db.session.get(
         m.Interpretation, interpretation_id
     )
     if not interpretation or interpretation.is_deleted:
         log(log.WARNING, "Interpretation with id [%s] not found", interpretation_id)
         flash("Interpretation not found", "danger")
-        return redirect(redirect_url)
+        return redirect(url_for("book.collection_view", book_id=book_id))
 
     breadcrumbs = create_breadcrumbs(
         book_id=book_id,
-        collection_path=(
-            collection_id,
-            sub_collection_id,
-        ),
-        section_id=section_id,
-        interpretation_id=interpretation.id,
+        collection_id=interpretation.section.collection.id,
+        section_id=interpretation.section.id,
     )
     return render_template(
         "book/qa_view.html",
         book=book,
-        collection=collection,
-        sub_collection=sub_collection if sub_collection_id else None,
-        section=section,
+        section=interpretation.section,
         interpretation=interpretation,
         breadcrumbs=breadcrumbs,
     )

app/views/book/section.py

@@ -1,95 +1,23 @@
 from flask import (
-    render_template,
     flash,
     redirect,
     url_for,
 )
 from flask_login import login_required
 
-from app.controllers import (
-    create_breadcrumbs,
-    register_book_verify_route,
-)
-from app.controllers.delete_nested_book_entities import (
-    delete_nested_section_entities,
-)
+from app.controllers import register_book_verify_route
+from app.controllers.delete_nested_book_entities import delete_nested_section_entities
 from app import models as m, db, forms as f
 from app.logger import log
 from .bp import bp
 
 
-@bp.route("/<int:book_id>/<int:collection_id>/sections", methods=["GET"])
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/sections",
-    methods=["GET"],
-)
-def section_view(
-    book_id: int, collection_id: int, sub_collection_id: int | None = None
-):
-    book: m.Book = db.session.get(m.Book, book_id)
-    if not book or book.is_deleted:
-        log(log.WARNING, "Book with id [%s] not found", book_id)
-        flash("Book not found", "danger")
-        return redirect(url_for("book.my_library"))
-
-    collection: m.Collection = db.session.get(m.Collection, collection_id)
-    if not collection or collection.is_deleted:
-        log(log.WARNING, "Collection with id [%s] not found", collection_id)
-        flash("Collection not found", "danger")
-        return redirect(url_for("book.collection_view", book_id=book_id))
-
-    sub_collection = None
-    if sub_collection_id:
-        sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
-        if not sub_collection or sub_collection.is_deleted:
-            log(log.WARNING, "Sub_collection with id [%s] not found", sub_collection_id)
-            flash("Sub_collection not found", "danger")
-            return redirect(
-                url_for(
-                    "book.sub_collection_view",
-                    book_id=book_id,
-                    collection_id=collection_id,
-                )
-            )
-
-    if sub_collection:
-        sections = sub_collection.active_sections
-    else:
-        sections = collection.active_sections
-
-    breadcrumbs = create_breadcrumbs(
-        book_id=book_id,
-        collection_path=(
-            collection_id,
-            sub_collection_id,
-        ),
-    )
-
-    return render_template(
-        "book/section_view.html",
-        book=book,
-        collection=collection,
-        sections=sections,
-        sub_collection=sub_collection,
-        breadcrumbs=breadcrumbs,
-    )
-
-
 @bp.route("/<int:book_id>/<int:collection_id>/create_section", methods=["POST"])
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/create_section",
-    methods=["POST"],
-)
 @register_book_verify_route(bp.name)
 @login_required
-def section_create(
-    book_id: int, collection_id: int, sub_collection_id: int | None = None
-):
+def section_create(book_id: int, collection_id: int):
     book: m.Book = db.session.get(m.Book, book_id)
     collection: m.Collection = db.session.get(m.Collection, collection_id)
-    sub_collection = None
-    if sub_collection_id:
-        sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
 
     redirect_url = url_for("book.collection_view", book_id=book_id)
     if collection_id:
@@ -103,13 +31,10 @@ def section_create(
     if form.validate_on_submit():
         section: m.Section = m.Section(
             label=form.label.data,
-            collection_id=sub_collection_id or collection_id,
+            collection_id=collection_id,
             version_id=book.last_version.id,
         )
-        if sub_collection:
-            sub_collection.is_leaf = True
-        else:
-            collection.is_leaf = True
+        collection.is_leaf = True
         log(log.INFO, "Create section [%s]. Collection: [%s]", section, collection_id)
         section.save()
 
@@ -124,31 +49,14 @@ def section_create(
         return redirect(redirect_url)
 
 
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/edit_section", methods=["POST"]
-)
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/<int:section_id>/edit_section",
-    methods=["POST"],
-)
+@bp.route("/<int:book_id>/<int:section_id>/edit_section", methods=["POST"])
 @register_book_verify_route(bp.name)
 @login_required
-def section_edit(
-    book_id: int,
-    collection_id: int,
-    section_id: int,
-    sub_collection_id: int | None = None,
-):
-    redirect_url = url_for(
-        "book.interpretation_view",
-        book_id=book_id,
-        collection_id=collection_id,
-        sub_collection_id=sub_collection_id,
-        section_id=section_id,
-    )
+def section_edit(book_id: int, section_id: int):
     section: m.Section = db.session.get(m.Section, section_id)
 
     form = f.EditSectionForm()
+    redirect_url = url_for("book.collection_view", book_id=book_id)
 
     if form.validate_on_submit():
         label = form.label.data
@@ -169,44 +77,27 @@ def section_edit(
         return redirect(redirect_url)
 
 
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/delete_section",
-    methods=["POST"],
-)
-@bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/<int:section_id>/delete_section",
-    methods=["POST"],
-)
+@bp.route("/<int:book_id>/<int:section_id>/delete_section", methods=["POST"])
 @register_book_verify_route(bp.name)
 @login_required
 def section_delete(
     book_id: int,
-    collection_id: int,
     section_id: int,
-    sub_collection_id: int | None = None,
 ):
-    collection: m.Collection = db.session.get(
-        m.Collection, sub_collection_id or collection_id
-    )
     section: m.Section = db.session.get(m.Section, section_id)
 
     section.is_deleted = True
     delete_nested_section_entities(section)
-    if not collection.active_sections:
+    if not section.collection.active_sections:
         log(
             log.INFO,
             "Section [%s] has no active section. Set is_leaf = False",
             section.id,
         )
-        collection.is_leaf = False
+        section.collection.is_leaf = False
 
     log(log.INFO, "Delete section [%s]", section.id)
     section.save()
 
     flash("Success!", "success")
-    return redirect(
-        url_for(
-            "book.collection_view",
-            book_id=book_id,
-        )
-    )
+    return redirect(url_for("book.collection_view", book_id=book_id))

src/addSection.ts

@@ -5,21 +5,10 @@ export function addSection() {
     document.querySelector('#add-section-modal');
 
   const addSectionModalBtns = document.querySelectorAll('#callAddSectionModal');
-  const collectionIdInAddSectionModal: HTMLInputElement =
-    document.querySelector('#add_section_modal_collection_id');
-  const subCollectionIdInAddSectionModal: HTMLInputElement =
-    document.querySelector('#add_section_modal_sub_collection_id');
-
   const addSectionForm: HTMLFormElement = document.querySelector(
     '#add_section_modal_form',
   );
-  if (
-    addSectionModal &&
-    addSectionModalBtns &&
-    collectionIdInAddSectionModal &&
-    subCollectionIdInAddSectionModal &&
-    addSectionForm
-  ) {
+  if (addSectionModal && addSectionModalBtns && addSectionForm) {
     const defaultActionPath = addSectionForm.getAttribute('action');
 
     const addModalCloseBtn = document.querySelector('#modalSectionCloseButton');
@@ -32,18 +21,16 @@ export function addSection() {
       btn.addEventListener('click', () => {
         const collectionId = btn.getAttribute('data-collection-id');
         const subCollectionId = btn.getAttribute('data-sub-collection-id');
-        collectionIdInAddSectionModal.value = collectionId;
-        subCollectionIdInAddSectionModal.value = subCollectionId;
         let newActionPath: string = '';
         if (subCollectionId === '_') {
           newActionPath = defaultActionPath.replace(
-            '0/0/create_section',
+            '0/create_section',
             `${collectionId}/create_section`,
           );
         } else {
           newActionPath = defaultActionPath.replace(
-            '0/0/create_section',
-            `${collectionId}/${subCollectionId}/create_section`,
+            '0/create_section',
+            `${subCollectionId}/create_section`,
           );
         }
         if (newActionPath.includes('/0')) {

src/deleteSection.ts

@@ -8,10 +8,6 @@ export function deleteSection() {
   const deleteSectionModalBtns = document.querySelectorAll(
     '#callDeleteSectionModal',
   );
-  const collectionIdInDeleteSectionModal: HTMLInputElement =
-    document.querySelector('#delete_section_modal_collection_id');
-  const subCollectionIdInDeleteSectionModal: HTMLInputElement =
-    document.querySelector('#delete_section_modal_sub_collection_id');
   const sectionIdInDeleteSectionModal: HTMLInputElement =
     document.querySelector('#delete_section_modal_section_id');
 
@@ -22,8 +18,6 @@ export function deleteSection() {
   if (
     deleteSectionModal &&
     deleteSectionModalBtns &&
-    collectionIdInDeleteSectionModal &&
-    subCollectionIdInDeleteSectionModal &&
     sectionIdInDeleteSectionModal &&
     deleteSectionForm
   ) {
@@ -39,24 +33,13 @@ export function deleteSection() {
     }
     deleteSectionModalBtns.forEach(btn =>
       btn.addEventListener('click', () => {
-        const collectionId = btn.getAttribute('data-collection-id');
-        const subCollectionId = btn.getAttribute('data-sub-collection-id');
         const sectionId = btn.getAttribute('data-section-id');
-        collectionIdInDeleteSectionModal.value = collectionId;
-        subCollectionIdInDeleteSectionModal.value = subCollectionId;
         sectionIdInDeleteSectionModal.value = sectionId;
         let newActionPath: string = '';
-        if (subCollectionId === '_') {
-          newActionPath = defaultActionPath.replace(
-            '0/0/0/delete_section',
-            `${collectionId}/${sectionId}/delete_section`,
-          );
-        } else {
-          newActionPath = defaultActionPath.replace(
-            '0/0/0/delete_section',
-            `${collectionId}/${subCollectionId}/${sectionId}/delete_section`,
-          );
-        }
+        newActionPath = defaultActionPath.replace(
+          '0/delete_section',
+          `${sectionId}/delete_section`,
+        );
 
         deleteSectionForm.setAttribute('action', `${newActionPath}`);
         sectionDeleteModal.show();

src/deleteSubCollection.ts

@@ -36,14 +36,13 @@ export function deleteSubCollection() {
     }
     deleteSubCollectionModalBtns.forEach(btn =>
       btn.addEventListener('click', () => {
-        const collectionId = btn.getAttribute('data-collection-id');
         const subCollectionId = btn.getAttribute('data-sub-collection-id');
-        collectionIdInDeleteSubCollectionModal.value = collectionId;
+        collectionIdInDeleteSubCollectionModal.value = subCollectionId;
         let newActionPath: string = '';
 
         newActionPath = defaultActionPath.replace(
-          '0/0/delete',
-          `${collectionId}/${subCollectionId}/delete`,
+          '0/delete',
+          `${subCollectionId}/delete`,
         );
 
         deleteSubCollectionForm.setAttribute('action', `${newActionPath}`);

src/flash.ts

@@ -28,6 +28,6 @@ export function flash() {
     });
     setTimeout(() => {
       dismiss.hide();
-    }, 10000);
+    }, 5000);
   }
 }

src/renameSection.ts

@@ -19,22 +19,13 @@ export function renameSection() {
         sectionRenameForms[index].addEventListener('submit', async e => {
           e.preventDefault();
           const bookId = sectionRenameForms[index].getAttribute('data-book-id');
-          const collectionId =
-            sectionRenameForms[index].getAttribute('data-collection-id');
-          const subCollectionId = sectionRenameForms[index].getAttribute(
-            'data-sub-collection-id',
-          );
           const sectionId =
             sectionRenameForms[index].getAttribute('data-section-id');
           const newLabel = inputsForRename[index].value;
           inputsForRename[index].readOnly = true;
 
           let url = '';
-          if (subCollectionId === '_') {
-            url = `/book/${bookId}/${collectionId}/${sectionId}/edit_section_label`;
-          } else {
-            url = `/book/${bookId}/${collectionId}/${subCollectionId}/${sectionId}/edit_section_label`;
-          }
+          url = `/book/${bookId}/${sectionId}/edit_section`;
 
           const response = await fetch(url, {
             method: 'POST',

src/renameSubCollection.ts

@@ -23,15 +23,13 @@ export function renameSubCollection() {
           e.preventDefault();
           const bookId =
             subCollectionRenameForms[index].getAttribute('data-book-id');
-          const collectionId =
-            subCollectionRenameForms[index].getAttribute('data-collection-id');
           const subCollectionId = subCollectionRenameForms[index].getAttribute(
             'data-sub-collection-id',
           );
           const newLabel = inputsForRename[index].value;
           inputsForRename[index].readOnly = true;
 
-          let url = `/book/${bookId}/${collectionId}/${subCollectionId}/edit`;
+          let url = `/book/${bookId}/${subCollectionId}/edit`;
 
           const response = await fetch(url, {
             method: 'POST',

tests/test_book.py

@@ -458,7 +458,7 @@ def test_crud_subcollection(client: FlaskClient, runner: FlaskCliRunner):
         label="Test SubCollection #1 Label"
     ).first()
     assert sub_collection
-    assert sub_collection.is_leaf
+    assert not sub_collection.is_leaf
     assert sub_collection.parent_id == collection.id
 
     m.Collection(
@@ -468,7 +468,7 @@ def test_crud_subcollection(client: FlaskClient, runner: FlaskCliRunner):
     ).save()
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/edit",
+        f"/book/{book.id}/{sub_collection.id}/edit",
         data=dict(
             label="Test SubCollection #2 Label",
         ),
@@ -482,7 +482,7 @@ def test_crud_subcollection(client: FlaskClient, runner: FlaskCliRunner):
     new_about = "Test SubCollection #1 About(edited)"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/edit",
+        f"/book/{book.id}/{sub_collection.id}/edit",
         data=dict(
             label=new_label,
             about=new_about,
@@ -499,7 +499,7 @@ def test_crud_subcollection(client: FlaskClient, runner: FlaskCliRunner):
     assert edited_collection
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/9999/edit",
+        f"/book/{book.id}/9999/edit",
         data=dict(
             label=new_label,
             about=new_about,
@@ -508,10 +508,10 @@ def test_crud_subcollection(client: FlaskClient, runner: FlaskCliRunner):
     )
 
     assert response.status_code == 200
-    assert b"Subcollection not found" in response.data
+    assert b"Collection not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/delete",
+        f"/book/{book.id}/{sub_collection.id}/delete",
         follow_redirects=True,
     )
 
@@ -523,12 +523,12 @@ def test_crud_subcollection(client: FlaskClient, runner: FlaskCliRunner):
     check_if_nested_collection_entities_is_deleted(deleted_collection)
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/delete",
+        f"/book/{book.id}/{sub_collection.id}/delete",
         follow_redirects=True,
     )
 
     assert response.status_code == 200
-    assert b"Subcollection not found" in response.data
+    assert b"Collection not found" in response.data
 
 
 def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
@@ -606,7 +606,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     assert b"Section label must be unique!" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/create_section",
+        f"/book/{book.id}/{sub_collection.id}/create_section",
         data=dict(
             collection_id=sub_collection.id,
             label=label_1,
@@ -625,7 +625,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     assert not section.interpretations
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/create_section",
+        f"/book/{book.id}/{sub_collection.id}/create_section",
         data=dict(
             collection_id=sub_collection.id,
             label=label_1,
@@ -651,13 +651,13 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     assert b"Collection not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/999/create_section",
+        f"/book/{book.id}/999/create_section",
         data=dict(collection_id=999, label=label_1, about="Test Section #1 About"),
         follow_redirects=True,
     )
 
     assert response.status_code == 200
-    assert b"Subcollection not found" in response.data
+    assert b"Collection not found" in response.data
 
     # edit
 
@@ -678,7 +678,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     ).first()
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section.id}/edit_section",
+        f"/book/{book.id}/{section.id}/edit_section",
         data=dict(
             section_id=section.id,
             label="Test",
@@ -693,7 +693,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     new_about = "Test Section #1 About(edited)"
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section.id}/edit_section",
+        f"/book/{book.id}/{section.id}/edit_section",
         data=dict(section_id=section.id, label=new_label, about=new_about),
         follow_redirects=True,
     )
@@ -710,7 +710,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
         label=label_1, collection_id=sub_collection.id
     ).first()
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_2.id}/edit_section",
+        f"/book/{book.id}/{section_2.id}/edit_section",
         data=dict(
             section_id=section_2.id,
             label="Test",
@@ -722,7 +722,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     assert b"Section label must be unique!" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_2.id}/edit_section",
+        f"/book/{book.id}/{section_2.id}/edit_section",
         data=dict(section_id=section_2.id, label=new_label, about=new_about),
         follow_redirects=True,
     )
@@ -735,7 +735,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     assert edited_section
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/999/edit_section",
+        f"/book/{book.id}/999/edit_section",
         data=dict(section_id=section_2.id, label=new_label, about=new_about),
         follow_redirects=True,
     )
@@ -744,7 +744,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     assert b"Section not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{leaf_collection.id}/{section.id}/delete_section",
+        f"/book/{book.id}/{section.id}/delete_section",
         follow_redirects=True,
     )
 
@@ -756,7 +756,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     check_if_nested_section_entities_is_deleted(deleted_section)
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_2.id}/delete_section",
+        f"/book/{book.id}/{section_2.id}/delete_section",
         follow_redirects=True,
     )
 
@@ -768,7 +768,7 @@ def test_crud_sections(client: FlaskClient, runner: FlaskCliRunner):
     check_if_nested_section_entities_is_deleted(deleted_section)
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/999/delete_section",
+        f"/book/{book.id}/999/delete_section",
         follow_redirects=True,
     )
 
@@ -817,7 +817,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     text_1 = "Test Interpretation #1 Text"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/create_interpretation",
+        f"/book/{book.id}/{section_in_subcollection.id}/create_interpretation",
         data=dict(section_id=section_in_subcollection.id, text=text_1),
         follow_redirects=True,
     )
@@ -831,7 +831,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     assert not interpretation.comments
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section_in_collection.id}/create_interpretation",
+        f"/book/{book.id}/{section_in_collection.id}/create_interpretation",
         data=dict(section_id=section_in_collection.id, text=text_1),
         follow_redirects=True,
     )
@@ -845,16 +845,16 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     assert not interpretation.comments
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/999/create_section",
+        f"/book/{book.id}/999/create_section",
         data=dict(collection_id=999, text=text_1),
         follow_redirects=True,
     )
 
     assert response.status_code == 200
-    assert b"Subcollection not found" in response.data
+    assert b"Collection not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/999/create_interpretation",
+        f"/book/{book.id}/999/create_interpretation",
         data=dict(collection_id=999, text=text_1),
         follow_redirects=True,
     )
@@ -863,7 +863,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     assert b"Section not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/888/create_interpretation",
+        f"/book/{book.id}/888/create_interpretation",
         data=dict(collection_id=999, text=text_1),
         follow_redirects=True,
     )
@@ -889,7 +889,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     new_text = "Test Interpretation #1 Text(edited)"
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section_in_collection.id}/edit_interpretation",
+        f"/book/{book.id}/{interpretation.id}/edit_interpretation",
         data=dict(
             interpretation_id=interpretation.id,
             text=new_text,
@@ -905,7 +905,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     assert edited_interpretation
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section_in_collection.id}/edit_interpretation",
+        f"/book/{book.id}/999/edit_interpretation",
         data=dict(
             interpretation_id="999",
             text=new_text,
@@ -916,10 +916,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     assert b"Interpretation not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section_in_collection.id}/delete_interpretation",
-        data=dict(
-            interpretation_id="999",
-        ),
+        f"/book/{book.id}/999/delete_interpretation",
         follow_redirects=True,
     )
 
@@ -928,8 +925,7 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
 
     response: Response = client.post(
         (
-            f"/book/{book.id}/{collection.id}/{sub_collection.id}/"
-            f"{section_in_subcollection.id}/delete_interpretation"
+            f"/book/{book.id}/{section_in_subcollection.interpretations[0].id}/delete_interpretation"
         ),
         data=dict(interpretation_id=section_in_subcollection.interpretations[0].id),
         follow_redirects=True,
@@ -944,6 +940,13 @@ def test_crud_interpretation(client: FlaskClient, runner: FlaskCliRunner):
     assert deleted_interpretation.is_deleted
     check_if_nested_interpretation_entities_is_deleted(deleted_interpretation)
 
+    response: Response = client.post(
+        (
+            f"/book/{book.id}/{section_in_collection.interpretations[0].id}/delete_interpretation"
+        ),
+        follow_redirects=True,
+    )
+
 
 def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
     _, user = login(client)
@@ -987,7 +990,7 @@ def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
     text_1 = "Test Interpretation #1 Text"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/create_interpretation",
+        f"/book/{book.id}/{section_in_subcollection.id}/create_interpretation",
         data=dict(section_id=section_in_subcollection.id, label=label_1, text=text_1),
         follow_redirects=True,
     )
@@ -1003,9 +1006,8 @@ def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
     comment_text = "Some comment text"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/create_comment",
+        f"/book/{book.id}/{interpretation.id}/create_comment",
         data=dict(
-            section_id=section_in_subcollection.id,
             text=comment_text,
             interpretation_id=interpretation.id,
         ),
@@ -1024,9 +1026,8 @@ def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
 
     # edit
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/comment_edit",
+        f"/book/{book.id}/{interpretation.id}/comment_edit",
         data=dict(
-            section_id=section_in_subcollection.id,
             text=new_text,
             interpretation_id=interpretation.id,
             comment_id=comment.id,
@@ -1042,9 +1043,8 @@ def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
 
     # delete
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/comment_delete",
+        f"/book/{book.id}/{interpretation.id}/comment_delete",
         data=dict(
-            section_id=section_in_subcollection.id,
             text=comment_text,
             interpretation_id=interpretation.id,
             comment_id=comment.id,
@@ -1137,7 +1137,7 @@ def test_interpretation_in_home_last_inter_section(
     text_1 = "Test Interpretation #1 Text"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/create_interpretation",
+        f"/book/{book.id}/{section_in_subcollection.id}/create_interpretation",
         data=dict(section_id=section_in_subcollection.id, label=label_1, text=text_1),
         follow_redirects=True,
     )
@@ -1151,7 +1151,7 @@ def test_interpretation_in_home_last_inter_section(
     assert not interpretation.comments
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/{section_in_collection.id}/create_interpretation",
+        f"/book/{book.id}/{section_in_collection.id}/create_interpretation",
         data=dict(section_id=section_in_collection.id, label=label_1, text=text_1),
         follow_redirects=True,
     )
@@ -1165,16 +1165,16 @@ def test_interpretation_in_home_last_inter_section(
     assert not interpretation.comments
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/999/create_section",
+        f"/book/{book.id}/999/create_section",
         data=dict(collection_id=999, label=label_1, text=text_1),
         follow_redirects=True,
     )
 
     assert response.status_code == 200
-    assert b"Subcollection not found" in response.data
+    assert b"Collection not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{leaf_collection.id}/999/create_interpretation",
+        f"/book/{book.id}/999/create_interpretation",
         data=dict(collection_id=999, label=label_1, text=text_1),
         follow_redirects=True,
     )
@@ -1183,7 +1183,7 @@ def test_interpretation_in_home_last_inter_section(
     assert b"Section not found" in response.data
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/888/create_interpretation",
+        f"/book/{book.id}/888/create_interpretation",
         data=dict(collection_id=999, label=label_1, text=text_1),
         follow_redirects=True,
     )

tests/test_breadcrumbs.py

@@ -6,13 +6,13 @@ from app import models as m, db
 def test_breadcrumbs(runner: FlaskCliRunner, app):
     runner.invoke(args=["db-populate"])
     with app.app_context(), app.test_request_context():
-        res = create_breadcrumbs(1, (1,), 1)
+        res = create_breadcrumbs(book_id=1, collection_id=1, section_id=1)
     assert len(res) == 4
     book: m.Book = db.session.get(m.Book, 1)
     assert book
     assert book.owner.username in res[0].label
     assert res[1].label == book.label
     with app.app_context(), app.test_request_context():
-        res = create_breadcrumbs(1, (), 1)
+        res = create_breadcrumbs(book_id=1, section_id=1)
     assert res
-    assert len(res) == 2
+    assert len(res) == 4

tests/test_tag.py

@@ -83,13 +83,12 @@ def test_create_tags_on_comment_create_and_edit(client: FlaskClient):
     create_test_book(user.id, 1)
 
     book = db.session.get(m.Book, 1)
-    collection = db.session.get(m.Collection, 1)
     section = db.session.get(m.Section, 1)
     interpretation = db.session.get(m.Interpretation, 1)
 
     tags = "[tag1] [tag2] [tag3]"
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{section.id}/{interpretation.id}/create_comment",
+        f"/book/{book.id}/{interpretation.id}/create_comment",
         data=dict(
             section_id=section.id,
             text="some text" + tags,
@@ -116,7 +115,7 @@ def test_create_tags_on_comment_create_and_edit(client: FlaskClient):
 
     tags = "[tag1] [tag5] [tag7]"
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{section.id}/{interpretation.id}/comment_edit",
+        f"/book/{book.id}/{interpretation.id}/comment_edit",
         data=dict(text="some text" + tags, comment_id=comment.id),
         follow_redirects=True,
     )
@@ -143,14 +142,13 @@ def test_create_tags_on_interpretation_create_and_edit(client: FlaskClient):
     create_test_book(user.id, 1)
 
     book = db.session.get(m.Book, 1)
-    collection = db.session.get(m.Collection, 1)
     section = db.session.get(m.Section, 1)
 
     tags = "[tag1] [tag2] [tag3]"
     text_1 = "Test Interpretation #1 Text"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{section.id}/create_interpretation",
+        f"/book/{book.id}/{section.id}/create_interpretation",
         data=dict(section_id=section.id, text=text_1 + tags),
         follow_redirects=True,
     )
@@ -175,7 +173,7 @@ def test_create_tags_on_interpretation_create_and_edit(client: FlaskClient):
 
     tags = "[tag-4] [tag5] [tag3]"
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{section.id}/edit_interpretation",
+        f"/book/{book.id}/{interpretation.id}/edit_interpretation",
         data=dict(interpretation_id=interpretation.id, text=text_1 + tags),
         follow_redirects=True,
     )