From 21a954c7dfe4355b4a8352ada7ced811e9733638 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 8 Aug 2021 18:40:47 -0700
Subject: [PATCH] Always use underscores in html ids

Plus some other shifting around
---
 bookwyrm/activitypub/base_activity.py         |   2 +-
 bookwyrm/static/js/bookwyrm.js                |   4 +-
 bookwyrm/templates/book/book.html             |  20 +--
 bookwyrm/templates/book/readthrough.html      |  16 +--
 bookwyrm/templates/components/dropdown.html   |   8 +-
 .../templates/components/inline_form.html     |   2 +-
 bookwyrm/templates/components/modal.html      |   8 +-
 bookwyrm/templates/compose.html               |   2 +-
 .../confirm_email/confirm_email.html          |   4 +-
 bookwyrm/templates/directory/directory.html   |   4 +-
 bookwyrm/templates/feed/direct_messages.html  |   2 +-
 bookwyrm/templates/feed/layout.html           |   8 +-
 bookwyrm/templates/get_started/layout.html    |   4 +-
 bookwyrm/templates/goal.html                  |   8 +-
 bookwyrm/templates/import_status.html         |   4 +-
 bookwyrm/templates/layout.html                |   6 +-
 bookwyrm/templates/lists/list.html            |   2 +-
 bookwyrm/templates/lists/list_layout.html     |   6 +-
 bookwyrm/templates/lists/lists.html           |   4 +-
 .../templates/reading_progress/finish.html    |   2 +-
 .../templates/reading_progress/start.html     |   2 +-
 bookwyrm/templates/reading_progress/want.html |   2 +-
 bookwyrm/templates/rss/title.html             |  17 +--
 bookwyrm/templates/search/book.html           |   6 +-
 bookwyrm/templates/settings/announcement.html |   4 +-
 .../templates/settings/announcements.html     |   4 +-
 .../templates/settings/federated_server.html  |   8 +-
 bookwyrm/templates/settings/site.html         |   2 +-
 bookwyrm/templates/snippets/announcement.html |   6 +-
 bookwyrm/templates/snippets/boost_button.html |   8 +-
 .../templates/snippets/create_status.html     |  24 ++--
 .../snippets/create_status/comment.html       |  49 +++++++
 .../snippets/create_status/content_field.html |  19 +++
 .../content_warning_field.html                |   6 +-
 .../create_status/content_warning_toggle.html |   8 ++
 .../snippets/create_status/direct.html        |   7 +
 .../snippets/create_status/layout.html        |  57 ++++++++
 .../create_status/post_options_block.html     |  22 +++
 .../snippets/create_status/quotation.html     |  34 +++++
 .../snippets/create_status/reply.html         |  10 ++
 .../snippets/create_status/review.html        |  35 +++++
 .../snippets/create_status/status.html        |   2 +
 .../snippets/create_status_form.html          | 131 ------------------
 .../snippets/delete_readthrough_modal.html    |   2 +-
 bookwyrm/templates/snippets/fav_button.html   |   4 +-
 .../templates/snippets/follow_button.html     |   4 +-
 .../templates/snippets/form_rate_stars.html   |   8 +-
 .../snippets/generated_status/goal.html       |   7 +-
 .../snippets/generated_status/rating.html     |   8 +-
 bookwyrm/templates/snippets/goal_form.html    |   2 +-
 .../templates/snippets/privacy_select.html    |   4 +-
 .../templates/snippets/readthrough_form.html  |  12 +-
 .../templates/snippets/report_button.html     |   2 +-
 .../snippets/shelve_button/shelve_button.html |   8 +-
 .../shelve_button/shelve_button_options.html  |   8 +-
 bookwyrm/templates/snippets/stars.html        |   2 +-
 .../status/{status_body.html => body.html}    |   2 +-
 .../snippets/status/content_status.html       |   8 +-
 .../templates/snippets/status/header.html     |  48 +++++++
 .../snippets/status/header_content.html       |   4 +
 .../snippets/status/headers/comment.html      |   2 +
 .../snippets/status/headers/goal.html         |   5 +
 .../snippets/status/headers/note.html         |  22 +++
 .../snippets/status/headers/quotation.html    |   2 +
 .../snippets/status/headers/rating.html       |  25 ++++
 .../snippets/status/headers/read.html         |   7 +
 .../snippets/status/headers/reading.html      |   9 ++
 .../snippets/status/headers/review.html       |   3 +
 .../snippets/status/headers/to_read.html      |   8 ++
 .../templates/snippets/status/layout.html     |  13 +-
 .../templates/snippets/status/status.html     |   4 +-
 .../snippets/status/status_header.html        | 109 ---------------
 .../snippets/toggle/toggle_button.html        |   6 +-
 bookwyrm/templates/snippets/trimmed_text.html |   6 +-
 bookwyrm/templates/user/lists.html            |   6 +-
 bookwyrm/templates/user/shelf/shelf.html      |  10 +-
 bookwyrm/templates/user/user.html             |   2 +-
 bookwyrm/templatetags/status_display.py       |  13 +-
 78 files changed, 555 insertions(+), 409 deletions(-)
 create mode 100644 bookwyrm/templates/snippets/create_status/comment.html
 create mode 100644 bookwyrm/templates/snippets/create_status/content_field.html
 rename bookwyrm/templates/snippets/{ => create_status}/content_warning_field.html (69%)
 create mode 100644 bookwyrm/templates/snippets/create_status/content_warning_toggle.html
 create mode 100644 bookwyrm/templates/snippets/create_status/direct.html
 create mode 100644 bookwyrm/templates/snippets/create_status/layout.html
 create mode 100644 bookwyrm/templates/snippets/create_status/post_options_block.html
 create mode 100644 bookwyrm/templates/snippets/create_status/quotation.html
 create mode 100644 bookwyrm/templates/snippets/create_status/reply.html
 create mode 100644 bookwyrm/templates/snippets/create_status/review.html
 create mode 100644 bookwyrm/templates/snippets/create_status/status.html
 delete mode 100644 bookwyrm/templates/snippets/create_status_form.html
 rename bookwyrm/templates/snippets/status/{status_body.html => body.html} (93%)
 create mode 100644 bookwyrm/templates/snippets/status/header.html
 create mode 100644 bookwyrm/templates/snippets/status/header_content.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/comment.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/goal.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/note.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/quotation.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/rating.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/read.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/reading.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/review.html
 create mode 100644 bookwyrm/templates/snippets/status/headers/to_read.html
 delete mode 100644 bookwyrm/templates/snippets/status/status_header.html

diff --git a/bookwyrm/activitypub/base_activity.py b/bookwyrm/activitypub/base_activity.py
index da32fbaf1..ddd45426f 100644
--- a/bookwyrm/activitypub/base_activity.py
+++ b/bookwyrm/activitypub/base_activity.py
@@ -48,7 +48,7 @@ class Signature:
 
 
 def naive_parse(activity_objects, activity_json, serializer=None):
-    """this navigates circular import issues"""
+    """this navigates circular import issues by looking up models' serializers"""
     if not serializer:
         if activity_json.get("publicKeyPem"):
             # ugh
diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index e43ed134b..a4002c2d3 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -164,7 +164,7 @@ let BookWyrm = new class {
         }
 
         // Show/hide container.
-        let container = document.getElementById('hide-' + targetId);
+        let container = document.getElementById('hide_' + targetId);
 
         if (container) {
             this.toggleContainer(container, pressed);
@@ -219,7 +219,7 @@ let BookWyrm = new class {
     /**
      * Check or uncheck a checbox.
      *
-     * @param  {object}  checkbox - DOM node
+     * @param  {string}  checkbox - id of the checkbox
      * @param  {boolean} pressed  - Is the trigger pressed?
      * @return {undefined}
      */
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index c5dab1097..2e8ff0d04 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -72,8 +72,8 @@
             {% if user_authenticated and not book.cover %}
             <div class="block">
                 {% trans "Add cover" as button_text %}
-                {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="add-cover" controls_uid=book.id focus="modal-title-add-cover" class="is-small" %}
-                {% include 'book/cover_modal.html' with book=book controls_text="add-cover" controls_uid=book.id %}
+                {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="add_cover" controls_uid=book.id focus="modal_title_add_cover" class="is-small" %}
+                {% include 'book/cover_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %}
                 {% if request.GET.cover_error %}
                 <p class="help is-danger">{% trans "Failed to load cover" %}</p>
                 {% endif %}
@@ -128,19 +128,19 @@
 
                 {% if user_authenticated and can_edit_book and not book|book_description %}
                 {% trans 'Add Description' as button_text %}
-                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="add-description" controls_uid=book.id focus="id_description" hide_active=True id="hide-description" %}
+                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="add_description" controls_uid=book.id focus="id_description" hide_active=True id="hide_description" %}
 
-                <div class="box is-hidden" id="add-description-{{ book.id }}">
+                <div class="box is-hidden" id="add_description_{{ book.id }}">
                     <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
                         {% csrf_token %}
                         <p class="fields is-grouped">
-                            <label class="label"for="id_description">{% trans "Description:" %}</label>
-                            <textarea name="description" cols="None" rows="None" class="textarea" id="id_description"></textarea>
+                            <label class="label"for="id_description_{{ book.id }}">{% trans "Description:" %}</label>
+                            <textarea name="description" cols="None" rows="None" class="textarea" id="id_description_{{ book.id }}"></textarea>
                         </p>
                         <div class="field">
                             <button class="button is-primary" type="submit">{% trans "Save" %}</button>
                             {% trans "Cancel" as button_text %}
-                            {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add-description" controls_uid=book.id hide_inactive=True %}
+                            {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add_description" controls_uid=book.id hide_inactive=True %}
                         </div>
                     </form>
                 </div>
@@ -177,10 +177,10 @@
                     </div>
                     <div class="column is-narrow">
                         {% trans "Add read dates" as button_text %}
-                        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" class="is-small" controls_text="add-readthrough" focus="add-readthrough-focus" %}
+                        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" class="is-small" controls_text="add_readthrough" focus="add_readthrough_focus_" %}
                     </div>
                 </header>
-                <section class="is-hidden box" id="add-readthrough">
+                <section class="is-hidden box" id="add_readthrough">
                     <form name="add-readthrough" action="/create-readthrough" method="post">
                         {% include 'snippets/readthrough_form.html' with readthrough=None %}
                         <div class="field is-grouped">
@@ -189,7 +189,7 @@
                             </div>
                             <div class="control">
                                 {% trans "Cancel" as button_text %}
-                                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add-readthrough" %}
+                                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add_readthrough" %}
                             </div>
                         </div>
                     </form>
diff --git a/bookwyrm/templates/book/readthrough.html b/bookwyrm/templates/book/readthrough.html
index 751407461..05ed3c639 100644
--- a/bookwyrm/templates/book/readthrough.html
+++ b/bookwyrm/templates/book/readthrough.html
@@ -2,7 +2,7 @@
 {% load humanize %}
 {% load tz %}
 <div class="content">
-    <div id="hide-edit-readthrough-{{ readthrough.id }}" class="box is-shadowless has-background-white-bis">
+    <div id="hide_edit_readthrough_{{ readthrough.id }}" class="box is-shadowless has-background-white-bis">
         <div class="columns">
             <div class="column">
                 {% trans "Progress Updates:" %}
@@ -24,7 +24,7 @@
                         {% if readthrough.progress %}
                         {% trans "Show all updates" as button_text %}
                         {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="updates" controls_uid=readthrough.id class="is-small" %}
-                        <ul id="updates-{{ readthrough.id }}" class="is-hidden">
+                        <ul id="updates_{{ readthrough.id }}" class="is-hidden">
                             {% for progress_update in readthrough.progress_updates %}
                             <li>
                                 <form name="delete-update" action="/delete-progressupdate" method="POST">
@@ -36,7 +36,7 @@
                                     {{ progress_update.progress }}%
                                     {% endif %}
                                     <input type="hidden" name="id" value="{{ progress_update.id }}"/>
-                                    <button type="submit" class="button is-small" for="delete-progressupdate-{{ progress_update.id }}" role="button" tabindex="0">
+                                    <button type="submit" class="button is-small" for="delete_progressupdate_{{ progress_update.id }}" role="button" tabindex="0">
                                         <span class="icon icon-x" title="Delete this progress update">
                                             <span class="is-sr-only">{% trans "Delete this progress update" %}</span>
                                         </span>
@@ -57,11 +57,11 @@
                 <div class="field has-addons">
                     <div class="control">
                         {% trans "Edit read dates" as button_text %}
-                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id focus="edit-readthrough" %}
+                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="pencil" controls_text="edit_readthrough" controls_uid=readthrough.id focus="edit_readthrough" %}
                     </div>
                     <div class="control">
                         {% trans "Delete these read dates" as button_text %}
-                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id focus="modal-title-delete-readthrough" %}
+                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="x" controls_text="delete_readthrough" controls_uid=readthrough.id focus="modal_title_delete_readthrough" %}
                     </div>
                 </div>
             </div>
@@ -69,15 +69,15 @@
     </div>
 </div>
 
-<div class="box is-hidden" id="edit-readthrough-{{ readthrough.id }}" tabindex="0">
+<div class="box is-hidden" id="edit_readthrough_{{ readthrough.id }}" tabindex="0">
     <h3 class="title is-5">{% trans "Edit read dates" %}</h3>
     <form name="edit-readthrough" action="/edit-readthrough" method="post">
         {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
         <div class="field is-grouped">
             <button class="button is-primary" type="submit">{% trans "Save" %}</button>
             {% trans "Cancel" as button_text %}
-            {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="edit-readthrough" controls_uid=readthrough.id %}
+            {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="edit_readthrough" controls_uid=readthrough.id %}
         </div>
     </form>
 </div>
-{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete-readthrough" controls_uid=readthrough.id no_body=True %}
+{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete_readthrough" controls_uid=readthrough.id no_body=True %}
diff --git a/bookwyrm/templates/components/dropdown.html b/bookwyrm/templates/components/dropdown.html
index 35caa55b5..98291bc96 100644
--- a/bookwyrm/templates/components/dropdown.html
+++ b/bookwyrm/templates/components/dropdown.html
@@ -3,7 +3,7 @@
 
 {% with 0|uuid as uuid %}
 <div
-    id="menu-{{ uuid }}"
+    id="menu_{{ uuid }}"
     class="
         dropdown control
         {% if right %}is-right{% endif %}
@@ -14,15 +14,15 @@
         type="button"
         aria-expanded="false"
         aria-haspopup="true"
-        aria-controls="menu-options-{{ uuid }}"
-        data-controls="menu-{{ uuid }}"
+        aria-controls="menu_options_{{ uuid }}"
+        data-controls="menu_{{ uuid }}"
     >
         {% block dropdown-trigger %}{% endblock %}
     </button>
 
     <div class="dropdown-menu">
         <ul
-            id="menu-options-{{ uuid }}"
+            id="menu_options_{{ uuid }}"
             class="dropdown-content p-0 is-clipped"
             role="menu"
         >
diff --git a/bookwyrm/templates/components/inline_form.html b/bookwyrm/templates/components/inline_form.html
index 0b2c1300a..a8924ef2d 100644
--- a/bookwyrm/templates/components/inline_form.html
+++ b/bookwyrm/templates/components/inline_form.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 <section class="card is-hidden {{ class }}" id="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}">
     <header class="card-header has-background-white-ter">
-        <h2 class="card-header-title" tabindex="0" id="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}-header">
+        <h2 class="card-header-title" tabindex="0" id="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}_header">
             {% block header %}{% endblock %}
         </h2>
         <span class="card-header-icon">
diff --git a/bookwyrm/templates/components/modal.html b/bookwyrm/templates/components/modal.html
index b29ff8d91..d8c1a4683 100644
--- a/bookwyrm/templates/components/modal.html
+++ b/bookwyrm/templates/components/modal.html
@@ -2,16 +2,16 @@
 <div
     role="dialog"
     class="modal {% if active %}is-active{% else %}is-hidden{% endif %}"
-    id="{{ controls_text }}-{{ controls_uid }}"
-    aria-labelledby="modal-card-title-{{ controls_text }}-{{ controls_uid }}"
+    id="{{ controls_text }}_{{ controls_uid }}"
+    aria-labelledby="modal_card_title_{{ controls_text }}_{{ controls_uid }}"
     aria-modal="true"
 >
     {# @todo Implement focus traps to prevent tabbing out of the modal. #}
     <div class="modal-background"></div>
     {% trans "Close" as label %}
     <div class="modal-card">
-        <header class="modal-card-head" tabindex="0" id="modal-title-{{ controls_text }}-{{ controls_uid }}">
-            <h2 class="modal-card-title is-flex-shrink-1" id="modal-card-title-{{ controls_text }}-{{ controls_uid }}">
+        <header class="modal-card-head" tabindex="0" id="modal_title_{{ controls_text }}_{{ controls_uid }}">
+            <h2 class="modal-card-title is-flex-shrink-1" id="modal_card_title_{{ controls_text }}_{{ controls_uid }}">
                 {% block modal-title %}{% endblock %}
             </h2>
             {% include 'snippets/toggle/toggle_button.html' with label=label class="delete" nonbutton=True %}
diff --git a/bookwyrm/templates/compose.html b/bookwyrm/templates/compose.html
index 1b6aa7358..e37ec170e 100644
--- a/bookwyrm/templates/compose.html
+++ b/bookwyrm/templates/compose.html
@@ -27,7 +27,7 @@
         {% if not draft %}
         {% include 'snippets/create_status.html' %}
         {% else %}
-        {% include 'snippets/create_status_form.html' %}
+        {% include 'snippets/create_status/status.html' %}
         {% endif %}
     </div>
 </div>
diff --git a/bookwyrm/templates/confirm_email/confirm_email.html b/bookwyrm/templates/confirm_email/confirm_email.html
index 6c9eda5ee..8c8adcdd9 100644
--- a/bookwyrm/templates/confirm_email/confirm_email.html
+++ b/bookwyrm/templates/confirm_email/confirm_email.html
@@ -30,8 +30,8 @@
 
             <section class="block">
                 {% trans "Can't find your code?" as button_text %}
-                {% include "snippets/toggle/open_button.html" with text=button_text controls_text="resend-form" focus="resend-form-header" %}
-                {% include "confirm_email/resend_form.html" with controls_text="resend-form" %}
+                {% include "snippets/toggle/open_button.html" with text=button_text controls_text="resend_form" focus="resend_form_header" %}
+                {% include "confirm_email/resend_form.html" with controls_text="resend_form" %}
             </section>
         </div>
     </div>
diff --git a/bookwyrm/templates/directory/directory.html b/bookwyrm/templates/directory/directory.html
index b900cb188..9753c4c0f 100644
--- a/bookwyrm/templates/directory/directory.html
+++ b/bookwyrm/templates/directory/directory.html
@@ -11,7 +11,7 @@
 </header>
 
 {% if not request.user.discoverable %}
-<div class="box has-text-centered content" data-hide="hide-join-directory"><div class="columns">
+<div class="box has-text-centered content" data-hide="hide_join_directory"><div class="columns">
     <div class="column">
     <p>
         {% trans "Make your profile discoverable to other BookWyrm users." %}
@@ -27,7 +27,7 @@
     </div>
     <div class="column is-narrow">
         {% trans "Dismiss message" as button_text %}
-        <button type="button" class="delete set-display" data-id="hide-join-directory" data-value="true">
+        <button type="button" class="delete set-display" data-id="hide_join_directory" data-value="true">
             <span>Dismiss message</span>
         </button>
     </div>
diff --git a/bookwyrm/templates/feed/direct_messages.html b/bookwyrm/templates/feed/direct_messages.html
index 30a50cd0a..115e1e6f4 100644
--- a/bookwyrm/templates/feed/direct_messages.html
+++ b/bookwyrm/templates/feed/direct_messages.html
@@ -14,7 +14,7 @@
 </header>
 
 <div class="box">
-    {% include 'snippets/create_status_form.html' with type="direct" uuid=1 mention=partner %}
+    {% include 'snippets/create_status/status.html' with type="direct" uuid=1 mention=partner %}
 </div>
 
 <section class="block">
diff --git a/bookwyrm/templates/feed/layout.html b/bookwyrm/templates/feed/layout.html
index ad7d39f0c..746f4fd09 100644
--- a/bookwyrm/templates/feed/layout.html
+++ b/bookwyrm/templates/feed/layout.html
@@ -33,11 +33,11 @@
                                     <li class="{% if active_book == book.id|stringformat:'d' %}is-active{% elif not active_book and shelf_counter == 1 and forloop.first %}is-active{% endif %}">
                                         <a
                                             href="{{ request.path }}?book={{ book.id }}"
-                                            id="tab-book-{{ book.id }}"
+                                            id="tab_book_{{ book.id }}"
                                             role="tab"
                                             aria-label="{{ book.title }}"
                                             aria-selected="{% if active_book == book.id|stringformat:'d' %}true{% elif shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}"
-                                            aria-controls="book-{{ book.id }}">
+                                            aria-controls="book_{{ book.id }}">
                                             {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
                                         </a>
                                     </li>
@@ -56,9 +56,9 @@
                 <div
                     class="suggested-tabs card"
                     role="tabpanel"
-                    id="book-{{ book.id }}"
+                    id="book_{{ book.id }}"
                     {% if active_book and active_book == book.id|stringformat:'d' %}{% elif not active_book and shelf_counter == 1 and forloop.first %}{% else %} hidden{% endif %}
-                    aria-labelledby="tab-book-{{ book.id }}">
+                    aria-labelledby="tab_book_{{ book.id }}">
 
                     <div class="card-header">
                         <div class="card-header-title">
diff --git a/bookwyrm/templates/get_started/layout.html b/bookwyrm/templates/get_started/layout.html
index 08a2e7c54..eef5a9e27 100644
--- a/bookwyrm/templates/get_started/layout.html
+++ b/bookwyrm/templates/get_started/layout.html
@@ -6,12 +6,12 @@
 
 {% block content %}
 {% with site_name=site.name %}
-<div class="modal is-active" role="dialog" aria-modal="true" aria-labelledby="get-started-header">
+<div class="modal is-active" role="dialog" aria-modal="true" aria-labelledby="get_started_header">
     <div class="modal-background"></div>
     <div class="modal-card is-fullwidth">
         <header class="modal-card-head">
             <img class="image logo mr-2" src="{% if site.logo_small %}{% get_media_prefix %}{{ site.logo_small }}{% else %}{% static "images/logo-small.png" %}{% endif %}" aria-hidden="true">
-            <h1 class="modal-card-title" id="get-started-header">
+            <h1 class="modal-card-title" id="get_started_header">
                 {% blocktrans %}Welcome to {{ site_name }}!{% endblocktrans %}
                 <span class="subtitle is-block">
                     {% trans "These are some first steps to get you started." %}
diff --git a/bookwyrm/templates/goal.html b/bookwyrm/templates/goal.html
index b285eec43..8c014cb30 100644
--- a/bookwyrm/templates/goal.html
+++ b/bookwyrm/templates/goal.html
@@ -9,7 +9,7 @@
     {% if is_self and goal %}
     <div class="column is-narrow">
         {% trans "Edit Goal" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="show-edit-goal" focus="edit-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="show_edit_goal" focus="edit_form_header" %}
     </div>
     {% endif %}
 </div>
@@ -18,11 +18,11 @@
 {% block panel %}
 <section class="block">
     {% now 'Y' as current_year %}
-    {% if user == request.user and year == current_year %}
+    {% if user == request.user and year|add:0 == current_year|add:0 %}
     <div class="block">
-        <section class="card {% if goal %}is-hidden{% endif %}" id="show-edit-goal">
+        <section class="card {% if goal %}is-hidden{% endif %}" id="show_edit_goal">
             <header class="card-header">
-                <h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header">
+                <h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit_form_header">
                     <span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {% blocktrans %}{{ year }} Reading Goal{% endblocktrans %}
                 </h2>
             </header>
diff --git a/bookwyrm/templates/import_status.html b/bookwyrm/templates/import_status.html
index e0ed8ab2e..776c1ce57 100644
--- a/bookwyrm/templates/import_status.html
+++ b/bookwyrm/templates/import_status.html
@@ -53,11 +53,11 @@
             {% endif %}
         {% endwith %}
 
-        <fieldset id="failed-imports">
+        <fieldset id="failed_imports">
             <ul>
             {% for item in failed_items %}
                 <li class="mb-2 is-flex is-align-items-start">
-                    <input class="checkbox mt-1" type="checkbox" name="import_item" value="{{ item.id }}" id="import-item-{{ item.id }}">
+                    <input class="checkbox mt-1" type="checkbox" name="import_item" value="{{ item.id }}" id="import_item_{{ item.id }}">
                     <label class="ml-1" for="import-item-{{ item.id }}">
                         {% blocktrans with index=item.index title=item.data.Title author=item.data.Author %}Line {{ index }}: <strong>{{ title }}</strong> by {{ author }}{% endblocktrans %}
                         <br/>
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index 6d0500973..8dd61e255 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -37,7 +37,7 @@
             <form class="navbar-item column" action="/search/">
                 <div class="field has-addons">
                     <div class="control">
-                        <input aria-label="{% trans 'Search for a book or user' %}" id="search-input" class="input" type="text" name="q" placeholder="{% trans 'Search for a book or user' %}" value="{{ query }}">
+                        <input aria-label="{% trans 'Search for a book or user' %}" id="search_input" class="input" type="text" name="q" placeholder="{% trans 'Search for a book or user' %}" value="{{ query }}">
                     </div>
                     <div class="control">
                         <button class="button" type="submit">
@@ -58,7 +58,7 @@
             </div>
         </div>
 
-        <div class="navbar-menu" id="main-nav">
+        <div class="navbar-menu" id="main_nav">
             <div class="navbar-start">
                 {% if request.user.is_authenticated %}
                 <a href="/#feed" class="navbar-item">
@@ -88,7 +88,7 @@
                         {% include 'snippets/avatar.html' with user=request.user %}
                         <span class="ml-2">{{ request.user.display_name }}</span>
                     </a>
-                    <ul class="navbar-dropdown" id="navbar-dropdown">
+                    <ul class="navbar-dropdown" id="navbar_dropdown">
                         <li>
                             <a href="{% url 'directory' %}" class="navbar-item">
                                 {% trans "Directory" %}
diff --git a/bookwyrm/templates/lists/list.html b/bookwyrm/templates/lists/list.html
index a9048b679..64005ee17 100644
--- a/bookwyrm/templates/lists/list.html
+++ b/bookwyrm/templates/lists/list.html
@@ -75,7 +75,7 @@
                                     </div>
                                     {% csrf_token %}
                                     <div class="control">
-                                        <input id="input-list-position" class="input is-small" type="number" min="1" name="position" value="{{ item.order }}">
+                                        <input id="input_list_position" class="input is-small" type="number" min="1" name="position" value="{{ item.order }}">
                                     </div>
                                     <div class="control">
                                         <button type="submit" class="button is-info is-small is-tablet">{% trans "Set" %}</button>
diff --git a/bookwyrm/templates/lists/list_layout.html b/bookwyrm/templates/lists/list_layout.html
index 1bbc98b47..b24ce9e34 100644
--- a/bookwyrm/templates/lists/list_layout.html
+++ b/bookwyrm/templates/lists/list_layout.html
@@ -14,17 +14,17 @@
     {% if request.user == list.user %}
     <div class="column is-narrow">
         {% trans "Edit List" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit-list" focus="edit-list-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit_list" focus="edit_list_header" %}
     </div>
     {% endif %}
 </header>
 
 <div class="block content">
-    {% include 'snippets/trimmed_text.html' with full=list.description %}    
+    {% include 'snippets/trimmed_text.html' with full=list.description %}
 </div>
 
 <div class="block">
-    {% include 'lists/edit_form.html' with controls_text="edit-list" %}
+    {% include 'lists/edit_form.html' with controls_text="edit_list" %}
 </div>
 
 {% block panel %}{% endblock %}
diff --git a/bookwyrm/templates/lists/lists.html b/bookwyrm/templates/lists/lists.html
index e39d5fde3..21f6ada4b 100644
--- a/bookwyrm/templates/lists/lists.html
+++ b/bookwyrm/templates/lists/lists.html
@@ -18,13 +18,13 @@
     {% if request.user.is_authenticated %}
     <div class="column is-narrow">
         {% trans "Create List" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with controls_text="create-list" icon_with_text="plus" text=button_text focus="create-list-header" %}
+        {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
     </div>
     {% endif %}
 </header>
 
 <div class="block">
-    {% include 'lists/create_form.html' with controls_text="create-list" %}
+    {% include 'lists/create_form.html' with controls_text="create_list" %}
 </div>
 
 {% if lists %}
diff --git a/bookwyrm/templates/reading_progress/finish.html b/bookwyrm/templates/reading_progress/finish.html
index a9f60f049..ca69128ec 100644
--- a/bookwyrm/templates/reading_progress/finish.html
+++ b/bookwyrm/templates/reading_progress/finish.html
@@ -9,6 +9,6 @@ Finish "{{ book_title }}"
 
 {% block content %}
 
-{% include "snippets/shelve_button/finish_reading_modal.html" with book=book active=True %}
+{% include "snippets/reading_modals/finish_reading_modal.html" with book=book active=True %}
 
 {% endblock %}
diff --git a/bookwyrm/templates/reading_progress/start.html b/bookwyrm/templates/reading_progress/start.html
index 9c4579471..e24a0e05b 100644
--- a/bookwyrm/templates/reading_progress/start.html
+++ b/bookwyrm/templates/reading_progress/start.html
@@ -9,6 +9,6 @@ Start "{{ book_title }}"
 
 {% block content %}
 
-{% include "snippets/shelve_button/start_reading_modal.html" with book=book active=True %}
+{% include "snippets/reading_modals/start_reading_modal.html" with book=book active=True %}
 
 {% endblock %}
diff --git a/bookwyrm/templates/reading_progress/want.html b/bookwyrm/templates/reading_progress/want.html
index 8e75d4703..6122ade3a 100644
--- a/bookwyrm/templates/reading_progress/want.html
+++ b/bookwyrm/templates/reading_progress/want.html
@@ -9,6 +9,6 @@ Want to Read "{{ book_title }}"
 
 {% block content %}
 
-{% include "snippets/shelve_button/want_to_read_modal.html" with book=book active=True no_body=True %}
+{% include "snippets/reading_modals/want_to_read_modal.html" with book=book active=True %}
 
 {% endblock %}
diff --git a/bookwyrm/templates/rss/title.html b/bookwyrm/templates/rss/title.html
index 5ad0b7575..c9fd56af3 100644
--- a/bookwyrm/templates/rss/title.html
+++ b/bookwyrm/templates/rss/title.html
@@ -1,16 +1 @@
-{% load i18n %}
-{{ obj.user.display_name }}{% if obj.status_type == 'GeneratedNote' %}
-    {{ obj.content | safe }}
-{% elif obj.status_type == 'Review' and not obj.name and not obj.content%}
-    {% trans "rated" %}
-{% elif obj.status_type == 'Review' %}
-    {% trans "reviewed" %}
-{% elif obj.status_type == 'Comment' %}
-    {% trans "commented on" %}
-{% elif obj.status_type == 'Quotation' %}
-    {% trans "quoted" %}
-{% endif %}
-{% if obj.book %}{{ obj.book.title | safe}}
-{% elif obj.mention_books %}
-{{ obj.mention_books.first.title }}
-{% endif %}
+{{ user.display_name }} {{ item_title|striptags }}
diff --git a/bookwyrm/templates/search/book.html b/bookwyrm/templates/search/book.html
index ce9072194..39f837328 100644
--- a/bookwyrm/templates/search/book.html
+++ b/bookwyrm/templates/search/book.html
@@ -28,14 +28,14 @@
             </div>
             <div class="column is-narrow">
                 {% trans "Open" as button_text %}
-                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="more-results-panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-down" pressed=forloop.first %}
+                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="more_results_panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-down" pressed=forloop.first %}
                 {% trans "Close" as button_text %}
-                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="more-results-panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-up" pressed=forloop.first %}
+                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="more_results_panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-up" pressed=forloop.first %}
             </div>
         </header>
         {% endif %}
 
-        <div class="box has-background-white is-shadowless{% if not forloop.first %} is-hidden{% endif %}" id="more-results-panel-{{ result_set.connector.identifier }}">
+        <div class="box has-background-white is-shadowless{% if not forloop.first %} is-hidden{% endif %}" id="more_results_panel_{{ result_set.connector.identifier }}">
             <div class="is-flex is-flex-direction-row-reverse">
                 <div>
                 </div>
diff --git a/bookwyrm/templates/settings/announcement.html b/bookwyrm/templates/settings/announcement.html
index 627c360cd..c0e5dec88 100644
--- a/bookwyrm/templates/settings/announcement.html
+++ b/bookwyrm/templates/settings/announcement.html
@@ -11,7 +11,7 @@
 {% trans "Edit Announcement" as button_text %}
 <div class="field has-addons">
     <div class="control">
-        {% include 'snippets/toggle/open_button.html' with controls_text="edit-announcement" icon_with_text="pencil" text=button_text focus="edit-announcement-header" %}
+        {% include 'snippets/toggle/open_button.html' with controls_text="edit_announcement" icon_with_text="pencil" text=button_text focus="edit_announcement_header" %}
     </div>
     <form class="control" action="{% url 'settings-announcements-delete' announcement.id %}" method="post">
         {% csrf_token %}
@@ -26,7 +26,7 @@
 {% block panel %}
 
 <form name="edit-announcement" method="post" action="{% url 'settings-announcements' announcement.id %}" class="block">
-    {% include 'settings/announcement_form.html' with controls_text="edit-announcement" %}
+    {% include 'settings/announcement_form.html' with controls_text="edit_announcement" %}
 </form>
 
 <div class="block content">
diff --git a/bookwyrm/templates/settings/announcements.html b/bookwyrm/templates/settings/announcements.html
index 52ede3da8..a0b363e63 100644
--- a/bookwyrm/templates/settings/announcements.html
+++ b/bookwyrm/templates/settings/announcements.html
@@ -6,13 +6,13 @@
 
 {% block edit-button %}
 {% trans "Create Announcement" as button_text %}
-{% include 'snippets/toggle/open_button.html' with controls_text="create-announcement" icon_with_text="plus" text=button_text focus="create-announcement-header" %}
+{% include 'snippets/toggle/open_button.html' with controls_text="create_announcement" icon_with_text="plus" text=button_text focus="create_announcement_header" %}
 </a>
 {% endblock %}
 
 {% block panel %}
 <form name="create-announcement" method="post" action="{% url 'settings-announcements' %}" class="block">
-    {% include 'settings/announcement_form.html' with controls_text="create-announcement" %}
+    {% include 'settings/announcement_form.html' with controls_text="create_announcement" %}
 </form>
 
 <table class="table is-striped">
diff --git a/bookwyrm/templates/settings/federated_server.html b/bookwyrm/templates/settings/federated_server.html
index b10f85011..c47dd285c 100644
--- a/bookwyrm/templates/settings/federated_server.html
+++ b/bookwyrm/templates/settings/federated_server.html
@@ -83,13 +83,13 @@
         </div>
         <div class="column is-narrow">
             {% trans "Edit" as button_text %}
-            {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit-notes" %}
+            {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit_notes" %}
         </div>
     </header>
     {% if server.notes %}
-    <div class="box" id="hide-edit-notes">{{ server.notes|to_markdown|safe }}</div>
+    <div class="box" id="hide_edit_notes">{{ server.notes|to_markdown|safe }}</div>
     {% endif %}
-    <form class="box is-hidden" method="POST" action="{% url 'settings-federated-server' server.id %}" id="edit-notes">
+    <form class="box is-hidden" method="POST" action="{% url 'settings-federated-server' server.id %}" id="edit_notes">
         {% csrf_token %}
         <p>
             <label class="is-sr-only" for="id_notes">Notes:</label>
@@ -97,7 +97,7 @@
         </p>
         <button type="submit" class="button is-primary">{% trans "Save" %}</button>
         {% trans "Cancel" as button_text %}
-        {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="edit-notes" %}
+        {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="edit_notes" %}
     </form>
 </section>
 
diff --git a/bookwyrm/templates/settings/site.html b/bookwyrm/templates/settings/site.html
index f64b529ad..05b504a97 100644
--- a/bookwyrm/templates/settings/site.html
+++ b/bookwyrm/templates/settings/site.html
@@ -9,7 +9,7 @@
 
 <form action="{% url 'settings-site' %}" method="POST" class="content" enctype="multipart/form-data">
     {% csrf_token %}
-    <section class="block" id="instance-info">
+    <section class="block" id="instance_info">
         <h2 class="title is-4">{% trans "Instance Info" %}</h2>
         <div class="field">
             <label class="label" for="id_name">{% trans "Instance Name:" %}</label>
diff --git a/bookwyrm/templates/snippets/announcement.html b/bookwyrm/templates/snippets/announcement.html
index 74dfdb54b..8b8563191 100644
--- a/bookwyrm/templates/snippets/announcement.html
+++ b/bookwyrm/templates/snippets/announcement.html
@@ -2,7 +2,7 @@
 {% with announcement.id|uuid as uuid %}
 <aside
     class="notification mb-1 p-3{% if not admin_mode %} is-hidden{% endif %} transition-y"
-    {% if not admin_mode %}data-hide="hide-announcement-{{ announcement.id }}"{% endif %}
+    {% if not admin_mode %}data-hide="hide_announcement_{{ announcement.id }}"{% endif %}
 >
     <div class="columns mb-0 is-mobile">
         <div class="column pb-0">
@@ -21,7 +21,7 @@
         {% endif %}
     </div>
     {% if announcement.content %}
-    <div class="mb-2 mt-2 {% if not pressed %}is-hidden{% endif %}" id="announcement-{{ uuid }}">
+    <div class="mb-2 mt-2 {% if not pressed %}is-hidden{% endif %}" id="announcement_{{ uuid }}">
         <div class="box is-shadowless mb-0">
             {{ announcement.content|safe }}
         </div>
@@ -31,7 +31,7 @@
         <p>{% blocktrans with user_path=announcement.user.local_path username=announcement.user.display_name %}Posted by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p>
         {% if not admin_mode %}
         <span class="mr-2 ml-2" aria-hidden="true">&middot;</span>
-        <a class="set-display" data-id="hide-announcement-{{ announcement.id }}" data-value="true">{% trans "Dismiss message" %}</a>
+        <a class="set-display" data-id="hide_announcement_{{ announcement.id }}" data-value="true">{% trans "Dismiss message" %}</a>
         {% endif %}
     </div>
 </aside>
diff --git a/bookwyrm/templates/snippets/boost_button.html b/bookwyrm/templates/snippets/boost_button.html
index 0f9274068..574c44776 100644
--- a/bookwyrm/templates/snippets/boost_button.html
+++ b/bookwyrm/templates/snippets/boost_button.html
@@ -8,8 +8,8 @@
     name="boost"
     action="/boost/{{ status.id }}"
     method="post"
-    class="interaction boost-{{ status.id }}-{{ uuid }} {% if boosted %}is-hidden{% endif %}"
-    data-id="boost-{{ status.id }}-{{ uuid }}"
+    class="interaction boost_{{ status.id }}_{{ uuid }}{% if boosted %} is-hidden{% endif %}"
+    data-id="boost_{{ status.id }}_{{ uuid }}"
 >
     {% csrf_token %}
     <button
@@ -25,8 +25,8 @@
     name="unboost"
     action="/unboost/{{ status.id }}"
     method="post"
-    class="interaction boost-{{ status.id }}-{{ uuid }} active {% if not boosted %}is-hidden{% endif %}"
-    data-id="boost-{{ status.id }}-{{ uuid }}"
+    class="interaction boost_{{ status.id }}_{{ uuid }} active {% if not boosted %}is-hidden{% endif %}"
+    data-id="boost_{{ status.id }}_{{ uuid }}"
 >
     {% csrf_token %}
     <button class="button is-small is-light is-transparent" type="submit">
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html
index b1a8e8465..bb7adc0be 100644
--- a/bookwyrm/templates/snippets/create_status.html
+++ b/bookwyrm/templates/snippets/create_status.html
@@ -9,10 +9,10 @@
             <li class="{% if status_type == 'review' or not status_type %}is-active{% endif %}">
                 <a
                     href="{{ request.path }}?status_type=review&book={{ book.id }}"
-                    id="tab-review-{{ book.id }}"
+                    id="tab_review_{{ book.id }}"
                     role="tab"
                     aria-selected="{% if status_type == 'review' or not status_type %}true{% else %}false{% endif %}"
-                    aria-controls="review-{{ book.id }}"
+                    aria-controls="review_{{ book.id }}"
                     data-category="tab-option-{{ book.id }}">
                     {% trans "Review" %}
                 </a>
@@ -20,10 +20,10 @@
             <li class="{% if status_type == 'comment' %}is-active{% endif %}">
                 <a
                     href="{{ request.path }}?status_type=comment&book={{ book.id}}"
-                    id="tab-comment-{{ book.id }}"
+                    id="tab_comment_{{ book.id }}"
                     role="tab"
                     aria-selected="{% if status_type == 'comment' %}true{% else %}false{% endif %}"
-                    aria-controls="comment-{{ book.id}}"
+                    aria-controls="comment_{{ book.id}}"
                     data-category="tab-option-{{ book.id }}">
                     {% trans "Comment" %}
                 </a>
@@ -31,10 +31,10 @@
             <li class="{% if status_type == 'quote' %}is-active{% endif %}">
                 <a
                     href="{{ request.path }}?status_type=quote&book={{ book.id }}"
-                    id="tab-quote-{{ book.id }}"
+                    id="tab_quote_{{ book.id }}"
                     role="tab"
                     aria-selected="{% if status_type == 'quote' %}true{% else %}false{% endif %}"
-                    aria-controls="quote-{{ book.id }}"
+                    aria-controls="quote_{{ book.id }}"
                     data-category="tab-option-{{ book.id }}">
                     {% trans "Quote" %}
                 </a>
@@ -42,21 +42,21 @@
         </ul>
     </div>
 
-    <div class="tab-option-{{ book.id }}" id="review-{{ book.id }}" role="tabpanel" aria-labelledby="tab-review-{{ book.id }}" {% if status_type and status_type != "review" %}hidden{% endif %}>
+    <div class="tab-option-{{ book.id }}" id="review_{{ book.id }}" role="tabpanel" aria-labelledby="tab_review_{{ book.id }}" {% if status_type and status_type != "review" %}hidden{% endif %}>
         {% with 0|uuid as uuid %}
-        {% include 'snippets/create_status_form.html' with type='review' %}
+        {% include 'snippets/create_status/status.html' with type="review" %}
         {% endwith %}
     </div>
 
-    <div class="tab-option-{{ book.id }}" id="comment-{{ book.id }}" role="tabpanel" aria-labelledby="tab-comment-{{ book.id }}" {% if status_type != "comment" %}hidden{% endif %}>
+    <div class="tab-option-{{ book.id }}" id="comment_{{ book.id }}" role="tabpanel" aria-labelledby="tab_comment_{{ book.id }}" {% if status_type != "comment" %}hidden{% endif %}>
         {% with 0|uuid as uuid %}
-        {% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
+        {% include 'snippets/create_status/status.html' with type="comment" %}
         {% endwith %}
     </div>
 
-    <div class="tab-option-{{ book.id }}" id="quote-{{ book.id }}" role="tabpanel" aria-labelledby="tab-quote-{{ book.id }}" {% if status_type != "quote" %}hidden{% endif %}>
+    <div class="tab-option-{{ book.id }}" id="quote_{{ book.id }}" role="tabpanel" aria-labelledby="tab_quote_{{ book.id }}" {% if status_type != "quote" %}hidden{% endif %}>
         {% with 0|uuid as uuid %}
-        {% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
+        {% include 'snippets/create_status/status.html' with type="quotation" %}
         {% endwith %}
     </div>
 </div>
diff --git a/bookwyrm/templates/snippets/create_status/comment.html b/bookwyrm/templates/snippets/create_status/comment.html
new file mode 100644
index 000000000..d830ddcbf
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/comment.html
@@ -0,0 +1,49 @@
+{% extends "snippets/create_status/layout.html" %}
+{% load bookwyrm_tags %}
+{% load i18n %}
+{% load utilities %}
+{% load status_display %}
+
+{% comment %}
+----- Variables
+book: the Edition object this status is related to. Required unless the status is a reply
+draft: the content of an existing Status object to be edited (used in delete and redraft)
+uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
+{% endcomment %}
+
+{% with type="comment" %}
+{% trans "Some thoughts on the book" as placeholder %}
+
+{% block post_content_additions %}
+    {# Supplemental fields #}
+    <div>
+        {% active_shelf book as active_shelf %}
+        {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
+
+        {% with readthrough=book.latest_readthrough %}
+        <div class="field">
+            <input type="hidden" name="id" value="{{ readthrough.id }}"/>
+            <label class="label" for="progress_{{ uuid }}">{% trans "Progress:" %}</label>
+            <div class="field has-addons mb-0">
+                <div class="control">
+                    <input aria-label="{% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}" class="input" type="number" min="0" name="progress" size="3" value="{% firstof draft.progress readthrough.progress '' %}" id="progress_{{ uuid }}">
+                </div>
+                <div class="control">
+                    <div class="select">
+                        <select name="progress_mode" aria-label="Progress mode">
+                            <option value="PG" {% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
+                            <option value="PCT" {% if draft.progress_mode == 'PCT' or readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            {% if readthrough.progress_mode == 'PG' and book.pages %}
+            <p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
+            {% endif %}
+        </div>
+        {% endwith %}
+        {% endif %}
+    </div>
+{% endblock %}
+
+{% endwith %}
diff --git a/bookwyrm/templates/snippets/create_status/content_field.html b/bookwyrm/templates/snippets/create_status/content_field.html
new file mode 100644
index 000000000..583a73d67
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/content_field.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+{% load status_display %}
+{% load utilities %}
+{% comment %}
+type: used to differentiate html id fields when multiple types of posting are available for a book (options: comment, quotation, review, direct, reply)
+book: the Edition object related to the status
+reply_parent: if applicable, the Status object that this post is in reply to
+mention: a user who is @ mentioned by default in the post
+draft: an existing Status object that is providing default values for input fields
+{% endcomment %}
+<textarea
+    name="content"
+    class="textarea"
+    id="id_content_{{ type }}_{{ book.id }}{{ reply_parent.id }}"
+    placeholder="{{ placeholder }}"
+    aria-label="{% if reply_parent %}{% trans 'Reply' %}{% else %}{% trans 'Content' %}{% endif %}"
+    required
+>{% if reply_parent %}{{ reply_parent|mentions:request.user }}{% endif %}{% if mention %}@{{ mention|username }} {% endif %}{{ draft.content|default:'' }}</textarea>
+
diff --git a/bookwyrm/templates/snippets/content_warning_field.html b/bookwyrm/templates/snippets/create_status/content_warning_field.html
similarity index 69%
rename from bookwyrm/templates/snippets/content_warning_field.html
rename to bookwyrm/templates/snippets/create_status/content_warning_field.html
index 51c2649b0..de637bcc6 100644
--- a/bookwyrm/templates/snippets/content_warning_field.html
+++ b/bookwyrm/templates/snippets/create_status/content_warning_field.html
@@ -1,12 +1,12 @@
 {% load i18n %}
-<div class="control{% if not parent_status.content_warning and not draft.content_warning %} is-hidden{% endif %}" id="spoilers-{{ uuid }}">
-    <label class="is-sr-only" for="id_content_warning-{{ uuid }}">{% trans "Spoiler alert:" %}</label>
+<div class="control{% if not parent_status.content_warning and not draft.content_warning %} is-hidden{% endif %}" id="spoilers_{{ uuid }}">
+    <label class="is-sr-only" for="id_content_warning_{{ uuid }}">{% trans "Spoiler alert:" %}</label>
     <input
         type="text"
         name="content_warning"
         maxlength="255"
         class="input"
-        id="id_content_warning-{{ uuid }}"
+        id="id_content_warning_{{ uuid }}"
         placeholder="{% trans 'Spoilers ahead!' %}"
         value="{% firstof draft.content_warning parent_status.content_warning '' %}">
 </div>
diff --git a/bookwyrm/templates/snippets/create_status/content_warning_toggle.html b/bookwyrm/templates/snippets/create_status/content_warning_toggle.html
new file mode 100644
index 000000000..40668a424
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/content_warning_toggle.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+
+<div class="control">
+    <input type="checkbox" class="is-hidden" name="sensitive" id="id_show_spoilers_{{ uuid }}" {% if draft.content_warning or status.content_warning %}checked{% endif %} aria-hidden="true">
+    {% trans "Include spoiler alert" as button_text %}
+    {% firstof draft.content_warning status.content_warning as pressed %}
+    {% include 'snippets/toggle/toggle_button.html' with text=button_text icon="warning is-size-4" controls_text="spoilers" controls_uid=uuid focus="id_content_warning" checkbox="id_show_spoilers" class="toggle-button" pressed=pressed %}
+</div>
diff --git a/bookwyrm/templates/snippets/create_status/direct.html b/bookwyrm/templates/snippets/create_status/direct.html
new file mode 100644
index 000000000..af6def0e5
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/direct.html
@@ -0,0 +1,7 @@
+{% extends "snippets/create_status/layout.html" %}
+{# ----- Variables -----
+type: the format of the status. options are "comment" "quotation" "review" "direct" "reply"
+mention: the User object of a user who will show up at @ mentioned by default
+draft: the content of an existing Status object to be edited (used in delete and redraft)
+uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
+#}
diff --git a/bookwyrm/templates/snippets/create_status/layout.html b/bookwyrm/templates/snippets/create_status/layout.html
new file mode 100644
index 000000000..5b435f276
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/layout.html
@@ -0,0 +1,57 @@
+{% load bookwyrm_tags %}
+{% load i18n %}
+{% load utilities %}
+{% load status_display %}
+
+{% comment %}
+----- Variables
+book: the Edition object this status is related to. Required unless the status is a reply
+draft: the content of an existing Status object to be edited (used in delete and redraft)
+uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
+type: used for uniquely identifying the html elements when mutliple types of posts are available for a book, and usually the endpoint name that the form posts to
+reply_parent: the Status object this post will be in reply to, if applicable
+{% endcomment %}
+
+{% block form_open %}
+{# default form tag syntax, can be overriddden #}
+<form class="is-flex-grow-1" name="{{ type }}" action="/post/{{ type }}" method="post" id="tab_{{ type }}_{{ book.id }}{{ reply_parent.id }}">
+{% endblock %}
+
+    {% csrf_token %}
+
+    {% block initial_fields %}
+    <input type="hidden" name="book" value="{{ book.id }}">
+    <input type="hidden" name="user" value="{{ request.user.id }}">
+    <input type="hidden" name="reply_parent" value="{% firstof draft.reply_parent.id reply_parent.id %}">
+    {% endblock %}
+
+    <div class="field">
+        <div class="control">
+            {% include "snippets/create_status/content_warning_field.html" %}
+        </div>
+
+        {# fields that go between the content warnings and the content field (ie, quote) #}
+        {% block pre_content_additions %}{% endblock %}
+
+        <label class="label" for="id_content_{{ type }}_{{ book.id }}{{ reply_parent.id }}">
+            {% block content_label %}
+                {% trans "Comment:" %}
+            {% endblock %}
+        </label>
+
+        <div class="control">
+            {% include "snippets/create_status/content_field.html" with placeholder=placeholder %}
+        </div>
+    </div>
+
+    {# additional fields that go after the content block (ie, progress) #}
+    {% block post_content_additions %}{% endblock %}
+
+    {% block options_block %}
+    {# cw, post privacy, and submit button #}
+    {% include "snippets/create_status/post_options_block.html" %}
+    {% endblock %}
+
+{% block form_close %}
+</form>
+{% endblock %}
diff --git a/bookwyrm/templates/snippets/create_status/post_options_block.html b/bookwyrm/templates/snippets/create_status/post_options_block.html
new file mode 100644
index 000000000..6cfb0c5c0
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/post_options_block.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+<div class="columns mt-1">
+    <div class="field has-addons column">
+        {% include "snippets/create_status/content_warning_toggle.html" %}
+        <div class="control">
+        {% if type == 'direct' %}
+            <input type="hidden" name="privacy" value="direct">
+            <button type="button" class="button" aria-label="Privacy" disabled>{% trans "Private" %}</button>
+        {% else %}
+            {% if draft %}
+            {% include 'snippets/privacy_select.html' with current=draft.privacy %}
+            {% else %}
+            {% include 'snippets/privacy_select.html' with current=reply_parent.privacy %}
+            {% endif %}
+        {% endif %}
+        </div>
+    </div>
+    <div class="column is-narrow">
+        <button class="button is-link" type="submit">{% trans "Post" %}</button>
+    </div>
+</div>
+
diff --git a/bookwyrm/templates/snippets/create_status/quotation.html b/bookwyrm/templates/snippets/create_status/quotation.html
new file mode 100644
index 000000000..03e9c25b3
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/quotation.html
@@ -0,0 +1,34 @@
+{% extends "snippets/create_status/layout.html" %}
+{% load bookwyrm_tags %}
+{% load utilities %}
+{% load status_display %}
+{% load i18n %}
+
+{% comment %}
+----- Variables
+book: the Edition object this status is related to. Required unless the status is a reply
+draft: the content of an existing Status object to be edited (used in delete and redraft)
+uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
+{% endcomment %}
+
+{% with type="quotation" %}
+
+{% block pre_content_additions %}
+    <div class="field">
+        <label class="label" for="id_quote_{{ book.id }}_{{ type }}">
+            {% trans "Quote:" %}
+        </label>
+
+        <div class="control">
+            <textarea
+                name="quote"
+                class="textarea"
+                id="id_quote_{{ book.id }}_{{ type }}"
+                placeholder="{% blocktrans with book_title=book.title %}An excerpt from '{{ book_title }}'{% endblocktrans %}"
+                required
+            >{{ draft.quote|default:'' }}</textarea>
+        </div>
+    </div>
+{% endblock %}
+
+{% endwith %}
diff --git a/bookwyrm/templates/snippets/create_status/reply.html b/bookwyrm/templates/snippets/create_status/reply.html
new file mode 100644
index 000000000..deb178879
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/reply.html
@@ -0,0 +1,10 @@
+{% extends "snippets/create_status/layout.html" %}
+{# ----- Variables -----
+reply_parent: the parent status, if the status is a reply
+type: the format of the status. options are "comment" "quotation" "review" "direct" "reply"
+mention: the User object of a user who will show up at @ mentioned by default
+draft: the content of an existing Status object to be edited (used in delete and redraft)
+uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
+#}
+
+{% block content_label %}{% endblock %}
diff --git a/bookwyrm/templates/snippets/create_status/review.html b/bookwyrm/templates/snippets/create_status/review.html
new file mode 100644
index 000000000..be17b7f2e
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/review.html
@@ -0,0 +1,35 @@
+{% extends "snippets/create_status/layout.html" %}
+{% load bookwyrm_tags %}
+{% load utilities %}
+{% load status_display %}
+{% load i18n %}
+
+{% comment %}
+----- Variables
+book: the Edition object this status is related to. Required unless the status is a reply
+draft: the content of an existing Status object to be edited (used in delete and redraft)
+uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
+{% endcomment %}
+
+{% with type="review" %}
+
+{% block pre_content_additions %}
+    <div class="field">
+        <label class="label" for="id_name_{{ book.id }}">{% trans "Title:" %}</label>
+        <div class="control">
+            <input type="text" name="name" maxlength="255" class="input" required="" id="id_name_{{ book.id }}" placeholder="{% blocktrans with book_title=book.title %}Your review of '{{ book_title }}'{% endblocktrans %}" value="{% firstof draft.name ''%}">
+        </div>
+    </div>
+
+    <fieldset class="mb-1">
+        <legend class="is-sr-only">{% trans "Rating" %}</legend>
+
+        {% include 'snippets/form_rate_stars.html' with book=book type=type|default:'summary' default_rating=draft.rating %}
+    </fieldset>
+{% endblock %}
+
+{% block content_label %}
+    {% trans "Review:" %}
+{% endblock %}
+
+{% endwith %}
diff --git a/bookwyrm/templates/snippets/create_status/status.html b/bookwyrm/templates/snippets/create_status/status.html
new file mode 100644
index 000000000..5228e20c4
--- /dev/null
+++ b/bookwyrm/templates/snippets/create_status/status.html
@@ -0,0 +1,2 @@
+{# allows the "type" variable to inherit properly to the layout #}
+{% include 'snippets/create_status/'|add:type|add:'.html' %}
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
deleted file mode 100644
index c4e5045e2..000000000
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ /dev/null
@@ -1,131 +0,0 @@
-{% load bookwyrm_tags %}
-{% load utilities %}
-{% load status_display %}
-
-{% load i18n %}
-<form class="is-flex-grow-1" name="{{ type }}" action="/post/{% if type == 'direct' %}status{% else %}{{ type }}{% endif %}" method="post" id="tab-{{ type }}-{{ book.id }}{{ reply_parent.id }}">
-    {% csrf_token %}
-    <input type="hidden" name="book" value="{{ book.id }}">
-    <input type="hidden" name="user" value="{{ request.user.id }}">
-    <input type="hidden" name="reply_parent" value="{% firstof draft.reply_parent.id reply_parent.id %}">
-    {% if type == 'review' %}
-    <div class="field">
-        <label class="label" for="id_name_{{ book.id }}_{{ type }}">{% trans "Title" %}:</label>
-        <div class="control">
-            <input type="text" name="name" maxlength="255" class="input" required="" id="id_name_{{ book.id }}_{{ type }}" placeholder="My {{ type }} of '{{ book.title }}'" value="{% firstof draft.name ''%}">
-        </div>
-    </div>
-    {% endif %}
-    <div class="field">
-        {% if type != 'reply' and type != 'direct'  %}
-        <label class="label{% if type == 'review' %} mb-0{% endif %}" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">
-            {% if type == 'comment' %}
-            {% trans "Comment:" %}
-            {% elif type == 'quotation' %}
-            {% trans "Quote:" %}
-            {% elif type == 'review' %}
-            {% trans "Review:" %}
-            {% endif %}
-        </label>
-        {% endif %}
-
-        {% if type == 'review' %}
-        <fieldset class="mb-1">
-            <legend class="is-sr-only">{% trans "Rating" %}</legend>
-
-            {% include 'snippets/form_rate_stars.html' with book=book type=type|default:'summary' default_rating=draft.rating %}
-        </fieldset>
-        {% endif %}
-
-        <div class="control">
-            {% if type == 'quotation' %}
-            <textarea
-                name="quote"
-                class="textarea"
-                id="id_quote_{{ book.id }}_{{ type }}"
-                placeholder="{{ placeholder }}"
-                required
-            >{{ draft.quote|default:'' }}</textarea>
-            {% else %}
-            {% include 'snippets/content_warning_field.html' with parent_status=status %}
-            <textarea
-                name="content"
-                class="textarea"
-                id="id_content_{{ type }}-{{ book.id }}{{reply_parent.id}}"
-                placeholder="{{ placeholder }}"
-                aria-label="{% if reply_parent %}{% trans 'Reply' %}{% else %}{% trans "Content" %}{% endif %}"
-                required
-            >{% if reply_parent %}{{ reply_parent|mentions:request.user }}{% endif %}{% if mention %}@{{ mention|username }} {% endif %}{{ draft.content|default:'' }}</textarea>
-            {% endif %}
-        </div>
-    </div>
-
-    {# Supplemental fields #}
-    {% if type == 'quotation' %}
-    <div class="field">
-        <label class="label" for="id_content_quote-{{ book.id }}">{% trans "Comment" %}:</label>
-        {% include 'snippets/content_warning_field.html' with parent_status=status %}
-        <div class="control">
-            <textarea name="content" class="textarea" rows="3" id="id_content_quote-{{ book.id }}">{{ draft.content|default:'' }}</textarea>
-        </div>
-    </div>
-    {% elif type == 'comment' %}
-    <div>
-        {% active_shelf book as active_shelf %}
-        {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
-
-        {% with readthrough=book.latest_readthrough %}
-        <div class="field">
-            <input type="hidden" name="id" value="{{ readthrough.id }}"/>
-            <label class="label" for="progress-{{ uuid }}">{% trans "Progress:" %}</label>
-            <div class="field has-addons mb-0">
-                <div class="control">
-                    <input aria-label="{% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}" class="input" type="number" min="0" name="progress" size="3" value="{% firstof draft.progress readthrough.progress '' %}" id="progress-{{ uuid }}">
-                </div>
-                <div class="control">
-                    <div class="select">
-                        <select name="progress_mode" aria-label="Progress mode">
-                            <option value="PG" {% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
-                            <option value="PCT" {% if draft.progress_mode == 'PCT' or readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-            {% if readthrough.progress_mode == 'PG' and book.pages %}
-            <p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
-            {% endif %}
-        </div>
-        {% endwith %}
-        {% endif %}
-    </div>
-    {% endif %}
-
-
-    {# bottom bar #}
-    <input type="checkbox" class="is-hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if draft.content_warning or status.content_warning %}checked{% endif %} aria-hidden="true">
-
-    <div class="columns mt-1">
-        <div class="field has-addons column">
-            <div class="control">
-                {% trans "Include spoiler alert" as button_text %}
-                {% firstof draft.content_warning status.content_warning as pressed %}
-                {% include 'snippets/toggle/toggle_button.html' with text=button_text icon="warning is-size-4" controls_text="spoilers" controls_uid=uuid focus="id_content_warning" checkbox="id_show_spoilers" class="toggle-button" pressed=pressed %}
-            </div>
-            <div class="control">
-            {% if type == 'direct' %}
-                <input type="hidden" name="privacy" value="direct">
-                <button type="button" class="button" aria-label="Privacy" disabled>{% trans "Private" %}</button>
-            {% else %}
-                {% if draft %}
-                {% include 'snippets/privacy_select.html' with current=draft.privacy %}
-                {% else %}
-                {% include 'snippets/privacy_select.html' with current=reply_parent.privacy %}
-                {% endif %}
-            {% endif %}
-            </div>
-        </div>
-        <div class="column is-narrow">
-            <button class="button is-link" type="submit">{% trans "Post" %}</button>
-        </div>
-    </div>
-</form>
diff --git a/bookwyrm/templates/snippets/delete_readthrough_modal.html b/bookwyrm/templates/snippets/delete_readthrough_modal.html
index e1560f93e..24d0ff98c 100644
--- a/bookwyrm/templates/snippets/delete_readthrough_modal.html
+++ b/bookwyrm/templates/snippets/delete_readthrough_modal.html
@@ -15,6 +15,6 @@
         {% trans "Delete" %}
     </button>
     {% trans "Cancel" as button_text %}
-    {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete-readthrough" controls_uid=readthrough.id %}
+    {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_readthrough" controls_uid=readthrough.id %}
 </form>
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/fav_button.html b/bookwyrm/templates/snippets/fav_button.html
index 6c4cfe9aa..0670b4c51 100644
--- a/bookwyrm/templates/snippets/fav_button.html
+++ b/bookwyrm/templates/snippets/fav_button.html
@@ -4,7 +4,7 @@
 
 {% with status.id|uuid as uuid %}
 {% with request.user|liked:status as liked %}
-<form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} {% if liked %}is-hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav_{{ status.id }}_{{ uuid }} {% if liked %}is-hidden{% endif %}" data-id="fav_{{ status.id }}_{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small is-light is-transparent" type="submit">
         <span class="icon icon-heart m-0-mobile" title="{% trans 'Like' %}">
@@ -12,7 +12,7 @@
         <span class="is-sr-only-mobile">{% trans "Like" %}</span>
     </button>
 </form>
-<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} active {% if not liked %}is-hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav_{{ status.id }}_{{ uuid }} active {% if not liked %}is-hidden{% endif %}" data-id="fav_{{ status.id }}_{{ uuid }}">
     {% csrf_token %}
     <button class="button is-light is-transparent is-small" type="submit">
         <span class="icon icon-heart has-text-primary m-0-mobile" title="{% trans 'Un-like' %}"></span>
diff --git a/bookwyrm/templates/snippets/follow_button.html b/bookwyrm/templates/snippets/follow_button.html
index 8cafad7f9..530322b94 100644
--- a/bookwyrm/templates/snippets/follow_button.html
+++ b/bookwyrm/templates/snippets/follow_button.html
@@ -6,7 +6,7 @@
 
 <div class="field{% if not minimal %} has-addons{% else %} mb-0{% endif %}">
     <div class="control">
-        <form action="{% url 'follow' %}" method="POST" class="interaction follow-{{ user.id }} {% if request.user in user.followers.all or request.user in user.follower_requests.all %}is-hidden{%endif %}" data-id="follow-{{ user.id }}">
+        <form action="{% url 'follow' %}" method="POST" class="interaction follow_{{ user.id }} {% if request.user in user.followers.all or request.user in user.follower_requests.all %}is-hidden{%endif %}" data-id="follow_{{ user.id }}">
             {% csrf_token %}
             <input type="hidden" name="user" value="{{ user.username }}">
             <button class="button is-small{% if not minimal %} is-link{% endif %}" type="submit">
@@ -17,7 +17,7 @@
                 {% endif %}
             </button>
         </form>
-        <form action="{% url 'unfollow' %}" method="POST" class="interaction follow-{{ user.id }} {% if not request.user in user.followers.all and not request.user in user.follower_requests.all %}is-hidden{%endif %}" data-id="follow-{{ user.id }}">
+        <form action="{% url 'unfollow' %}" method="POST" class="interaction follow_{{ user.id }} {% if not request.user in user.followers.all and not request.user in user.follower_requests.all %}is-hidden{%endif %}" data-id="follow_{{ user.id }}">
             {% csrf_token %}
             <input type="hidden" name="user" value="{{ user.username }}">
             {% if user.manually_approves_followers and request.user not in user.followers.all %}
diff --git a/bookwyrm/templates/snippets/form_rate_stars.html b/bookwyrm/templates/snippets/form_rate_stars.html
index e1e36477a..fe2a2f03d 100644
--- a/bookwyrm/templates/snippets/form_rate_stars.html
+++ b/bookwyrm/templates/snippets/form_rate_stars.html
@@ -7,7 +7,7 @@
     {% if classes %}{{classes}}{% endif%}
 ">
     <input
-        id="{{ type|slugify }}-{{ book.id }}-no-rating"
+        id="{{ type|slugify }}_{{ book.id }}_no_rating"
         class="is-sr-only"
         type="radio"
         name="rating"
@@ -15,13 +15,13 @@
         {% if default_rating == 0 or not default_rating %}checked{% endif %}
     >
 
-    <label class="is-sr-only" for="{{ type|slugify }}-{{ book.id }}-no-rating">
+    <label class="is-sr-only" for="{{ type|slugify }}_{{ book.id }}_no_rating">
         {% trans "No rating" %}
     </label>
 
     {% for i in '12345'|make_list %}
         <input
-            id="{{ type|slugify }}-book{{ book.id }}-star-{{ forloop.counter }}"
+            id="{{ type|slugify }}_book{{ book.id }}_star_{{ forloop.counter }}"
             class="is-sr-only"
             type="radio"
             name="rating"
@@ -38,7 +38,7 @@
                 icon-star-empty
                 {% endif %}
             "
-            for="{{ type|slugify }}-book{{ book.id }}-star-{{ forloop.counter }}"
+            for="{{ type|slugify }}_book{{ book.id }}_star_{{ forloop.counter }}"
         >
             <span class="is-sr-only">
                 {% blocktranslate trimmed count rating=forloop.counter %}
diff --git a/bookwyrm/templates/snippets/generated_status/goal.html b/bookwyrm/templates/snippets/generated_status/goal.html
index 465722659..2209435c2 100644
--- a/bookwyrm/templates/snippets/generated_status/goal.html
+++ b/bookwyrm/templates/snippets/generated_status/goal.html
@@ -1 +1,6 @@
-{% load i18n %}{% load humanize %}{% blocktrans count counter=goal.goal with counter=goal.goal year=goal.year %}set a goal to read {{ counter }} book in {{ year }}{% plural %}set a goal to read {{ counter }} books in {{ year }}{% endblocktrans %}
+{% load i18n %}{% load humanize %}
+{% blocktranslate trimmed count counter=goal.goal with counter=goal.goal year=goal.year %}
+set a goal to read {{ counter }} book in {{ year }}
+{% plural %}
+set a goal to read {{ counter }} books in {{ year }}
+{% endblocktranslate %}
diff --git a/bookwyrm/templates/snippets/generated_status/rating.html b/bookwyrm/templates/snippets/generated_status/rating.html
index b70171cde..2e9fb601d 100644
--- a/bookwyrm/templates/snippets/generated_status/rating.html
+++ b/bookwyrm/templates/snippets/generated_status/rating.html
@@ -1,3 +1,7 @@
-{% load i18n %}{% load humanize %}
+{% load i18n %}{% load humanize %}{% load utilities %}
 
-{% blocktrans with title=book.title path=book.remote_id display_rating=rating|floatformat:"0" count counter=rating %}Rated <em><a href="{{ path }}">{{ title }}</a></em>: {{ display_rating }} star{% plural %}Rated <em><a href="{{ path }}">{{ title }}</a></em>: {{ display_rating }} stars{% endblocktrans %}
+{% blocktrans trimmed with title=book|book_title path=book.remote_id display_rating=rating|floatformat:"0" count counter=rating|add:0 %}
+rated <em><a href="{{ path }}">{{ title }}</a></em>: {{ display_rating }} star
+{% plural %}
+rated <em><a href="{{ path }}">{{ title }}</a></em>: {{ display_rating }} stars
+{% endblocktrans %}
diff --git a/bookwyrm/templates/snippets/goal_form.html b/bookwyrm/templates/snippets/goal_form.html
index 30ea18392..09f052a72 100644
--- a/bookwyrm/templates/snippets/goal_form.html
+++ b/bookwyrm/templates/snippets/goal_form.html
@@ -30,7 +30,7 @@
         <button type="submit" class="button is-link">{% trans "Set goal" %}</button>
         {% if goal %}
         {% trans "Cancel" as button_text %}
-        {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="show-edit-goal" %}
+        {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="show_edit_goal" %}
         {% endif %}
     </p>
 </form>
diff --git a/bookwyrm/templates/snippets/privacy_select.html b/bookwyrm/templates/snippets/privacy_select.html
index d1215cc0b..d7184e131 100644
--- a/bookwyrm/templates/snippets/privacy_select.html
+++ b/bookwyrm/templates/snippets/privacy_select.html
@@ -3,10 +3,10 @@
 <div class="select {{ class }}">
     {% with 0|uuid as uuid %}
     {% if not no_label %}
-    <label class="is-sr-only" for="privacy-{{ uuid }}">{% trans "Post privacy" %}</label>
+    <label class="is-sr-only" for="privacy_{{ uuid }}">{% trans "Post privacy" %}</label>
     {% endif %}
     {% firstof current user.default_post_privacy "public" as privacy %}
-    <select name="privacy" id="privacy-{{ uuid }}">
+    <select name="privacy" id="privacy_{{ uuid }}">
         <option value="public" {% if privacy == 'public' %}selected{% endif %}>
             {% trans "Public" %}
         </option>
diff --git a/bookwyrm/templates/snippets/readthrough_form.html b/bookwyrm/templates/snippets/readthrough_form.html
index df602cf77..132472d25 100644
--- a/bookwyrm/templates/snippets/readthrough_form.html
+++ b/bookwyrm/templates/snippets/readthrough_form.html
@@ -3,19 +3,19 @@
 <input type="hidden" name="id" value="{{ readthrough.id }}">
 <input type="hidden" name="book" value="{{ book.id }}">
 <div class="field">
-    <label class="label" tabindex="0" id="add-readthrough-focus" for="id_start_date-{{ readthrough.id }}">
+    <label class="label" tabindex="0" id="add_readthrough_focus_{{ readthrough.id }}" for="id_start_date_{{ readthrough.id }}">
         {% trans "Started reading" %}
     </label>
-    <input type="date" name="start_date" class="input" id="id_start_date-{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
+    <input type="date" name="start_date" class="input" id="id_start_date_{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
 </div>
 {# Only show progress for editing existing readthroughs #}
 {% if readthrough.id and not readthrough.finish_date %}
-<label class="label" for="id_progress-{{ readthrough.id }}">
+<label class="label" for="id_progress_{{ readthrough.id }}">
     {% trans "Progress" %}
 </label>
 <div class="field has-addons">
     <div class="control">
-        <input type="number" name="progress" class="input" id="id_progress-{{ readthrough.id }}" value="{{ readthrough.progress }}">
+        <input type="number" name="progress" class="input" id="id_progress_{{ readthrough.id }}" value="{{ readthrough.progress }}">
     </div>
     <div class="control select">
         <select name="progress_mode" aria-label="Progress mode">
@@ -26,8 +26,8 @@
 </div>
 {% endif %}
 <div class="field">
-    <label class="label" for="id_finish_date-{{ readthrough.id }}">
+    <label class="label" for="id_finish_date_{{ readthrough.id }}">
         {% trans "Finished reading" %}
     </label>
-    <input type="date" name="finish_date" class="input" id="id_finish_date-{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
+    <input type="date" name="finish_date" class="input" id="id_finish_date_{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
 </div>
diff --git a/bookwyrm/templates/snippets/report_button.html b/bookwyrm/templates/snippets/report_button.html
index 19414c166..55001aca5 100644
--- a/bookwyrm/templates/snippets/report_button.html
+++ b/bookwyrm/templates/snippets/report_button.html
@@ -4,7 +4,7 @@
 {% with 0|uuid as report_uuid %}
 
 {% trans "Report" as button_text %}
-{% include 'snippets/toggle/toggle_button.html' with class="is-danger is-light is-small is-fullwidth" text=button_text controls_text="report" controls_uid=report_uuid focus="modal-title-report" disabled=is_current %}
+{% include 'snippets/toggle/toggle_button.html' with class="is-danger is-light is-small is-fullwidth" text=button_text controls_text="report" controls_uid=report_uuid focus="modal_title_report" disabled=is_current %}
 
 {% include 'moderation/report_modal.html' with user=user reporter=request.user controls_text="report" controls_uid=report_uuid %}
 
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button.html b/bookwyrm/templates/snippets/shelve_button/shelve_button.html
index f7077b264..40a9f6e73 100644
--- a/bookwyrm/templates/snippets/shelve_button/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button/shelve_button.html
@@ -19,13 +19,13 @@
     {% endif %}
 </div>
 
-{% include 'snippets/shelve_button/want_to_read_modal.html' with book=active_shelf.book controls_text="want-to-read" controls_uid=uuid no_body=True %}
+{% include 'snippets/shelve_button/want_to_read_modal.html' with book=active_shelf.book controls_text="want_to_read" controls_uid=uuid %}
 
-{% include 'snippets/shelve_button/start_reading_modal.html' with book=active_shelf.book controls_text="start-reading" controls_uid=uuid %}
+{% include 'snippets/shelve_button/start_reading_modal.html' with book=active_shelf.book controls_text="start_reading" controls_uid=uuid %}
 
-{% include 'snippets/shelve_button/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
+{% include 'snippets/shelve_button/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid readthrough=readthrough %}
 
-{% include 'snippets/shelve_button/progress_update_modal.html' with book=active_shelf_book.book controls_text="progress-update" controls_uid=uuid readthrough=readthrough %}
+{% include 'snippets/shelve_button/progress_update_modal.html' with book=active_shelf_book.book controls_text="progress_update" controls_uid=uuid readthrough=readthrough %}
 
 {% endwith %}
 {% endif %}
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html b/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
index 69665a82f..41e0c9ba7 100644
--- a/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
+++ b/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
@@ -10,7 +10,7 @@
 
         {% trans "Start reading" as button_text %}
         {% url 'reading-status' 'start' book.id as fallback_url %}
-        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start-reading" controls_uid=button_uuid focus="modal-title-start-reading" disabled=is_current fallback_url=fallback_url %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" disabled=is_current fallback_url=fallback_url %}
 
     {% endif %}{% elif shelf.identifier == 'read' and active_shelf.shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
     <button type="button" class="button {{ class }}" disabled><span>{% trans "Read" %}</span>
@@ -18,13 +18,13 @@
 
         {% trans "Finish reading" as button_text %}
         {% url 'reading-status' 'finish' book.id as fallback_url %}
-        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish-reading" controls_uid=button_uuid focus="modal-title-finish-reading" disabled=is_current fallback_url=fallback_url %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" disabled=is_current fallback_url=fallback_url %}
 
     {% endif %}{% elif shelf.identifier == 'to-read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
 
         {% trans "Want to read" as button_text %}
         {% url 'reading-status' 'want' book.id as fallback_url %}
-        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want-to-read" controls_uid=button_uuid focus="modal-title-want-to-read" disabled=is_current fallback_url=fallback_url %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" disabled=is_current fallback_url=fallback_url %}
 
     {% endif %}{% elif shelf.editable %}
         <form name="shelve" action="/shelve/" method="post">
@@ -43,7 +43,7 @@
 {% if readthrough and active_shelf.shelf.identifier != 'read' %}
 <li role="menuitem" class="dropdown-item p-0">
     {% trans "Update progress" as button_text %}
-    {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress-update" controls_uid=button_uuid focus="modal-title-progress-update" %}
+    {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress_update" controls_uid=button_uuid focus="modal_title_progress_update" %}
 </li>
 {% endif %}
 
diff --git a/bookwyrm/templates/snippets/stars.html b/bookwyrm/templates/snippets/stars.html
index ac049f254..ffe4835f0 100644
--- a/bookwyrm/templates/snippets/stars.html
+++ b/bookwyrm/templates/snippets/stars.html
@@ -4,7 +4,7 @@
 <span class="stars">
     <span class="is-sr-only">
         {% if rating %}
-            {% blocktranslate trimmed with rating=rating|floatformat count counter=rating|length %}
+            {% blocktranslate trimmed with rating=rating|floatformat:0 count counter=rating|floatformat:0|add:0 %}
                 {{ rating }} star
             {% plural %}
                 {{ rating }} stars
diff --git a/bookwyrm/templates/snippets/status/status_body.html b/bookwyrm/templates/snippets/status/body.html
similarity index 93%
rename from bookwyrm/templates/snippets/status/status_body.html
rename to bookwyrm/templates/snippets/status/body.html
index 2c8a0e045..d205f4232 100644
--- a/bookwyrm/templates/snippets/status/status_body.html
+++ b/bookwyrm/templates/snippets/status/body.html
@@ -3,7 +3,7 @@
 {% block card-content %}
 {% with status_type=status.status_type %}
 
-{% if status_type == 'GeneratedNote' or status_type == 'Rating' %}
+{% if status_type == 'GeneratedNote' or status_type == 'Rating' or not status.content %}
     {% include 'snippets/status/generated_status.html' with status=status %}
 {% else %}
     {% include 'snippets/status/content_status.html' with status=status %}
diff --git a/bookwyrm/templates/snippets/status/content_status.html b/bookwyrm/templates/snippets/status/content_status.html
index c33b34526..ec959d592 100644
--- a/bookwyrm/templates/snippets/status/content_status.html
+++ b/bookwyrm/templates/snippets/status/content_status.html
@@ -71,7 +71,7 @@
 
                     {% trans "Show more" as button_text %}
 
-                    {% with text=button_text class="is-small" controls_text="show-status-cw" controls_uid=status.id %}
+                    {% with text=button_text class="is-small" controls_text="show_status_cw" controls_uid=status.id %}
                         {% include 'snippets/toggle/open_button.html' %}
                     {% endwith %}
                 </div>
@@ -79,21 +79,21 @@
 
             <div
                 {% if status.content_warning %}
-                    id="show-status-cw-{{ status.id }}"
+                    id="show_status_cw_{{ status.id }}"
                     class="is-hidden"
                 {% endif %}
             >
                 {% if status.content_warning %}
                     {% trans "Show less" as button_text %}
 
-                    {% with text=button_text class="is-small" controls_text="show-status-cw" controls_uid=status.id %}
+                    {% with text=button_text class="is-small" controls_text="show_status_cw" controls_uid=status.id %}
                         {% include 'snippets/toggle/close_button.html' %}
                     {% endwith %}
                 {% endif %}
 
                 {% if status.quote %}
                     <div class="quote block">
-                        <blockquote dir="auto" class="content mb-2">{{ status.quote | safe }}</blockquote>
+                        <blockquote dir="auto" class="content mb-2">{{ status.quote|safe }}</blockquote>
 
                         <p> &mdash; {% include 'snippets/book_titleby.html' with book=status.book %}</p>
                     </div>
diff --git a/bookwyrm/templates/snippets/status/header.html b/bookwyrm/templates/snippets/status/header.html
new file mode 100644
index 000000000..6135ecaa9
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/header.html
@@ -0,0 +1,48 @@
+{% load utilities %}
+{% load status_display %}
+{% load i18n %}
+{% load humanize %}
+
+<div class="media">
+    <figure class="media-left" aria-hidden="true">
+        <a class="image is-48x48" href="{{ status.user.local_path }}">
+            {% include 'snippets/avatar.html' with user=status.user ariaHide="true" medium="true" %}
+        </a>
+    </figure>
+
+    <div class="media-content">
+        <h3 class="has-text-weight-bold">
+            <span
+                itemprop="author"
+                itemscope
+                itemtype="https://schema.org/Person"
+            >
+                {% if status.user.avatar %}
+                    <meta itemprop="image" content="/images/{{ status.user.avatar }}">
+                {% endif %}
+
+                <a
+                    href="{{ status.user.local_path }}"
+                    itemprop="url"
+                >
+                    <span itemprop="name">{{ status.user.display_name }}</span>
+                </a>
+            </span>
+
+            {% include "snippets/status/header_content.html" %}
+        </h3>
+        <p class="is-size-7 is-flex is-align-items-center">
+            <a href="{{ status.remote_id }}">{{ status.published_date|published_date }}</a>
+            {% if status.progress %}
+            <span class="ml-1">
+            {% if status.progress_mode == 'PG' %}
+                ({% include 'snippets/page_text.html' with page=status.progress total_pages=status.book.pages %})
+            {% else %}
+                ({{ status.progress }}%)
+            {% endif %}
+            </span>
+            {% endif %}
+            {% include 'snippets/privacy-icons.html' with item=status %}
+        </p>
+    </div>
+</div>
diff --git a/bookwyrm/templates/snippets/status/header_content.html b/bookwyrm/templates/snippets/status/header_content.html
new file mode 100644
index 000000000..f3b52f183
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/header_content.html
@@ -0,0 +1,4 @@
+{% spaceless %}
+{% load status_display %}
+{% get_header_template status %}
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/headers/comment.html b/bookwyrm/templates/snippets/status/headers/comment.html
new file mode 100644
index 000000000..6886cfed6
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/comment.html
@@ -0,0 +1,2 @@
+{% load i18n %}{% load utilities %}
+{% blocktrans with book_path=book.local_path book=status.book|book_title %}commented on <a href="{{ book_path }}">{{ book }}</a>{% endblocktrans %}
diff --git a/bookwyrm/templates/snippets/status/headers/goal.html b/bookwyrm/templates/snippets/status/headers/goal.html
new file mode 100644
index 000000000..e31dec2a7
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/goal.html
@@ -0,0 +1,5 @@
+{% spaceless %}
+{% load i18n %}{% load humanize %}
+
+{{ status.content }}
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/headers/note.html b/bookwyrm/templates/snippets/status/headers/note.html
new file mode 100644
index 000000000..58c76f640
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/note.html
@@ -0,0 +1,22 @@
+{% spaceless %}
+{% load i18n %}
+{% load status_display %}
+{% load utilities %}
+
+{% if status.status_type == 'GeneratedNote' %}
+{% with book=status.mention_books.first %}
+{{ status.content|safe }} <a href="{{ book.local_path }}">{{ book|book_title }}</a>
+{% endwith %}
+
+{% else %}
+
+{% with parent_status=status|parent %}
+{% if parent_status %}
+{% blocktrans trimmed with username=parent_status.user.display_name user_path=parent_status.user.local_path status_path=parent_status.local_path %}
+replied to <a href="{{ user_path }}">{{ username}}'s</a> <a href="{{ status_path }}">status</a>
+{% endblocktrans %}
+{% endif %}
+{% endwith %}
+
+{% endif %}
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/headers/quotation.html b/bookwyrm/templates/snippets/status/headers/quotation.html
new file mode 100644
index 000000000..a0cbd71b0
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/quotation.html
@@ -0,0 +1,2 @@
+{% load i18n %}{% load utilities %}
+{% blocktrans with book_path=status.book.local_path book=status.book|book_title %}quoted <a href="{{ book_path }}">{{ book }}</a>{% endblocktrans %}
diff --git a/bookwyrm/templates/snippets/status/headers/rating.html b/bookwyrm/templates/snippets/status/headers/rating.html
new file mode 100644
index 000000000..bc40c04c8
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/rating.html
@@ -0,0 +1,25 @@
+{% load i18n %}{% load utilities %}
+
+{% blocktrans with book_path=status.book.local_path book=status.book|book_title %}rated <a href="{{ book_path }}">{{ book }}</a>:{% endblocktrans %} {% include 'snippets/stars.html' with rating=status.rating %}
+<span
+    itemprop="reviewRating"
+    itemscope
+    itemtype="https://schema.org/Rating"
+>
+    <span class="is-hidden" {{ rating_type }}>
+        <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
+
+        <span
+            itemprop="reviewRating"
+            itemscope
+            itemtype="https://schema.org/Rating"
+        >
+            <span class="is-hidden" {{ rating_type }}>
+                <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
+
+                {# @todo Is it possible to not hard-code the value? #}
+                <meta itemprop="bestRating" content="5">
+            </span>
+        </span>
+    </span>
+</span>
diff --git a/bookwyrm/templates/snippets/status/headers/read.html b/bookwyrm/templates/snippets/status/headers/read.html
new file mode 100644
index 000000000..f942c0f0a
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/read.html
@@ -0,0 +1,7 @@
+{% spaceless %}
+{% load i18n %}{% load utilities %}
+
+{% with book=status.mention_books.first %}
+{% blocktrans with book_path=book.remote_id book=book|book_title %}finished reading <a href="{{ book_path }}">{{ book }}</a>{% endblocktrans %}
+{% endwith %}
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/headers/reading.html b/bookwyrm/templates/snippets/status/headers/reading.html
new file mode 100644
index 000000000..460c4cae7
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/reading.html
@@ -0,0 +1,9 @@
+{% spaceless %}
+{% load i18n %}
+{% load utilities %}
+
+{% with book=status.mention_books.first %}
+{% blocktrans with book_path=book.remote_id book=book|book_title %}started reading <a href="{{ book_path }}">{{ book }}</a>{% endblocktrans %}
+{% endwith %}
+
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/headers/review.html b/bookwyrm/templates/snippets/status/headers/review.html
new file mode 100644
index 000000000..6be356be7
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/review.html
@@ -0,0 +1,3 @@
+{% load i18n %}{% load utilities %}
+
+{% blocktrans with book_path=status.book.local_path book=status.book|book_title %}reviewed <a href="{{ book_path }}">{{ book }}</a>{% endblocktrans %}
diff --git a/bookwyrm/templates/snippets/status/headers/to_read.html b/bookwyrm/templates/snippets/status/headers/to_read.html
new file mode 100644
index 000000000..7b89a775b
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/headers/to_read.html
@@ -0,0 +1,8 @@
+{% spaceless %}
+{% load i18n %}
+{% load utilities %}
+
+{% with book=status.mention_books.first %}
+{% blocktrans with book_path=book.remote_id book=book|book_title %}<a href="{{ user_path }}">{{ username }}</a> wants to read <a href="{{ book_path }}">{{ book }}</a>{% endblocktrans %}
+{% endwith %}
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/layout.html b/bookwyrm/templates/snippets/status/layout.html
index b1d361fe0..6ffdd0f72 100644
--- a/bookwyrm/templates/snippets/status/layout.html
+++ b/bookwyrm/templates/snippets/status/layout.html
@@ -4,7 +4,7 @@
 
 {% block card-header %}
 <div class="card-header-title has-background-white-ter is-block">
-    {% include 'snippets/status/status_header.html' with status=status %}
+    {% include 'snippets/status/header.html' with status=status %}
 </div>
 {% endblock %}
 
@@ -12,8 +12,8 @@
 
 {% block card-footer %}
 {% if moderation_mode and perms.bookwyrm.moderate_post %}
-<div class="card-footer-item">
 
+<div class="card-footer-item">
     {# moderation options #}
     <form name="delete-{{ status.id }}" action="/delete-status/{{ status.id }}" method="post">
         {% csrf_token %}
@@ -22,12 +22,14 @@
         </button>
     </form>
 </div>
+
 {% elif no_interact %}
 {# nothing here #}
 {% elif request.user.is_authenticated %}
+
 <div class="card-footer-item">
     {% trans "Reply" as button_text %}
-    {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon_with_text="comment" class="is-small is-light is-transparent toggle-button" focus="id_content_reply" %}
+    {% include 'snippets/toggle/toggle_button.html' with controls_text="show_comment" controls_uid=status.id text=button_text icon_with_text="comment" class="is-small is-light is-transparent toggle-button" focus="id_content_reply" %}
 </div>
 <div class="card-footer-item">
     {% include 'snippets/boost_button.html' with status=status %}
@@ -57,16 +59,17 @@
         </span>
     </a>
 </div>
+
 {% endif %}
 {% endblock %}
 
 {% block card-bonus %}
 {% if request.user.is_authenticated and not moderation_mode %}
 {% with status.id|uuid as uuid %}
-<section class="is-hidden" id="show-comment-{{ status.id }}">
+<section class="is-hidden" id="show_comment_{{ status.id }}">
     <div class="card-footer">
         <div class="card-footer-item">
-            {% include 'snippets/create_status_form.html' with reply_parent=status type="reply" %}
+            {% include 'snippets/create_status/status.html' with type="reply" reply_parent=status book=None %}
         </div>
     </div>
 </section>
diff --git a/bookwyrm/templates/snippets/status/status.html b/bookwyrm/templates/snippets/status/status.html
index b0de886c3..eb0c409eb 100644
--- a/bookwyrm/templates/snippets/status/status.html
+++ b/bookwyrm/templates/snippets/status/status.html
@@ -8,8 +8,8 @@
             {{ status.user.display_name }}
         </a>
         {% trans "boosted" %}
-        {% include 'snippets/status/status_body.html' with status=status|boosted_status %}
+        {% include 'snippets/status/body.html' with status=status|boosted_status %}
     {% else %}
-        {% include 'snippets/status/status_body.html' with status=status %}
+        {% include 'snippets/status/body.html' with status=status %}
     {% endif %}
 {% endif %}
diff --git a/bookwyrm/templates/snippets/status/status_header.html b/bookwyrm/templates/snippets/status/status_header.html
deleted file mode 100644
index 2ea9379b5..000000000
--- a/bookwyrm/templates/snippets/status/status_header.html
+++ /dev/null
@@ -1,109 +0,0 @@
-{% load utilities %}
-{% load status_display %}
-{% load i18n %}
-{% load humanize %}
-{% load static %}
-
-<div class="media">
-    <figure class="media-left" aria-hidden="true">
-        <a class="image is-48x48" href="{{ status.user.local_path }}">
-            {% include 'snippets/avatar.html' with user=status.user ariaHide="true" medium="true" %}
-        </a>
-    </figure>
-
-    <div class="media-content">
-        <h3 class="has-text-weight-bold">
-            <span
-                itemprop="author"
-                itemscope
-                itemtype="https://schema.org/Person"
-            >
-                {% if status.user.avatar %}
-                    <meta itemprop="image" content="{% get_media_prefix %}{{ status.user.avatar }}">
-                {% endif %}
-
-                <a
-                    href="{{ status.user.local_path }}"
-                    itemprop="url"
-                >
-                    <span itemprop="name">{{ status.user.display_name }}</span>
-                </a>
-            </span>
-
-            {% if status.status_type == 'GeneratedNote' %}
-                {{ status.content|safe }}
-            {% elif status.status_type == 'Rating' %}
-                {% trans "rated" %}
-            {% elif status.status_type == 'Review' %}
-                {% trans "reviewed" %}
-            {% elif status.status_type == 'Comment' %}
-                {% trans "commented on" %}
-            {% elif status.status_type == 'Quotation' %}
-                {% trans "quoted" %}
-            {% elif status.reply_parent %}
-                {% with parent_status=status|parent %}
-
-                {% blocktrans with username=parent_status.user.display_name user_path=parent_status.user.local_path status_path=parent_status.local_path %}replied to <a href="{{ user_path }}">{{ username}}'s</a> <a href="{{ status_path }}">status</a>{% endblocktrans %}
-                {% endwith %}
-            {% endif %}
-
-            {% if status.book %}
-                {% if status.status_type == 'GeneratedNote' or status.status_type == 'Rating' %}
-                    <a href="{{ status.book.local_path }}">{{ status.book|book_title }}</a>{% if status.status_type == 'Rating' %}: {% include 'snippets/stars.html' with rating=status.rating %}
-                    <span
-                        itemprop="reviewRating"
-                        itemscope
-                        itemtype="https://schema.org/Rating"
-                    >
-                    <span class="is-hidden" {{ rating_type }}>
-                        <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
-
-                        {% if status.book %}
-                            {% if status.status_type == 'GeneratedNote' or status.status_type == 'Rating' %}
-                                <a href="{{ status.book.local_path }}">{{ status.book|book_title }}</a>{% if status.status_type == 'Rating' %}:
-                                <span
-                                    itemprop="reviewRating"
-                                    itemscope
-                                    itemtype="https://schema.org/Rating"
-                                >
-                                <span class="is-hidden" {{ rating_type }}>
-                                    <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
-
-                                        {# @todo Is it possible to not hard-code the value? #}
-                                        <meta itemprop="bestRating" content="5">
-                                </span>
-
-                                {% endif %}
-                            {% else %}
-                                {% include 'snippets/book_titleby.html' with book=status.book %}
-                            {% endif %}
-                        {% elif status.mention_books %}
-                            <a href="{{ status.mention_books.first.local_path }}">
-                                {{ status.mention_books.first|book_title }}
-                            </a>
-                        {% endif %}
-                    {% include 'snippets/stars.html' with rating=status.rating %}
-                    {% endif %}
-                {% else %}
-                    {% include 'snippets/book_titleby.html' with book=status.book %}
-                {% endif %}
-            {% elif status.mention_books %}
-                <a href="{{ status.mention_books.first.local_path }}">{{ status.mention_books.first|book_title }}</a>
-            {% endif %}
-
-        </h3>
-        <p class="is-size-7 is-flex is-align-items-center">
-            <a href="{{ status.remote_id }}">{{ status.published_date|published_date }}</a>
-            {% if status.progress %}
-            <span class="ml-1">
-            {% if status.progress_mode == 'PG' %}
-                ({% include 'snippets/page_text.html' with page=status.progress total_pages=status.book.pages %})
-            {% else %}
-                ({{ status.progress }}%)
-            {% endif %}
-            </span>
-            {% endif %}
-            {% include 'snippets/privacy-icons.html' with item=status %}
-        </p>
-    </div>
-</div>
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
index 7a80f342a..49740db13 100644
--- a/bookwyrm/templates/snippets/toggle/toggle_button.html
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -8,9 +8,9 @@
         type="submit"
     {% endif %}
     class="{% if not nonbutton %}button {% endif %}{{ class }}{% if button_type %} {{ button_type }}{% endif %}"
-    data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
-    {% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
-    {% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
+    data-controls="{{ controls_text }}{% if controls_uid %}_{{ controls_uid }}{% endif %}"
+    {% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}_{{ controls_uid }}{% endif %}"{% endif %}
+    {% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}_{{ controls_uid }}{% endif %}"{% endif %}
     {% if label %}aria-label="{{ label }}"{% endif %}
     aria-pressed="{% if pressed %}true{% else %}false{% endif %}"
     {% if disabled %}disabled{% endif %}
diff --git a/bookwyrm/templates/snippets/trimmed_text.html b/bookwyrm/templates/snippets/trimmed_text.html
index f6174a192..d2e8bc308 100644
--- a/bookwyrm/templates/snippets/trimmed_text.html
+++ b/bookwyrm/templates/snippets/trimmed_text.html
@@ -8,8 +8,8 @@
         {% with full|to_markdown|safe as full %}
             {% with full|to_markdown|safe|truncatewords_html:trim_length as trimmed %}
                 {% if not no_trim and trimmed != full %}
-                    <div id="hide-full-{{ uuid }}">
-                        <div class="content" id="trimmed-{{ uuid }}">
+                    <div id="hide_full_{{ uuid }}">
+                        <div class="content" id="trimmed_{{ uuid }}">
                             <div dir="auto">{{ trimmed }}</div>
 
                             <div>
@@ -21,7 +21,7 @@
                         </div>
                     </div>
                     {% if not hide_more %}
-                    <div id="full-{{ uuid }}" class="is-hidden">
+                    <div id="full_{{ uuid }}" class="is-hidden">
                         <div class="content">
                             <div
                                 dir="auto"
diff --git a/bookwyrm/templates/user/lists.html b/bookwyrm/templates/user/lists.html
index b2dcb8bb7..aecd644a6 100644
--- a/bookwyrm/templates/user/lists.html
+++ b/bookwyrm/templates/user/lists.html
@@ -15,7 +15,7 @@
     {% if is_self %}
     <div class="column is-narrow">
         {% trans "Create list" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with controls_text="create-list" icon_with_text="plus" text=button_text %}
+        {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text %}
     </div>
     {% endif %}
 </div>
@@ -24,11 +24,11 @@
 
 {% block panel %}
 <section class="block">
-    <form name="create-list" method="post" action="{% url 'lists' %}" class="box is-hidden" id="create-list">
+    <form name="create-list" method="post" action="{% url 'lists' %}" class="box is-hidden" id="create_list">
         <header class="columns">
             <h3 class="title column">{% trans "Create list" %}</h3>
             <div class="column is-narrow">
-                {% include 'snippets/toggle/toggle_button.html' with controls_text="create-list" label="close" class="delete" nonbutton=True %}
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="create_list" label="close" class="delete" nonbutton=True %}
             </div>
         </header>
         {% include 'lists/form.html' %}
diff --git a/bookwyrm/templates/user/shelf/shelf.html b/bookwyrm/templates/user/shelf/shelf.html
index 01a7eee9e..32cad25d3 100644
--- a/bookwyrm/templates/user/shelf/shelf.html
+++ b/bookwyrm/templates/user/shelf/shelf.html
@@ -36,7 +36,7 @@
     {% if is_self %}
     <div class="column is-narrow">
         {% trans "Create shelf" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" controls_text="create-shelf-form" focus="create-shelf-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" controls_text="create_shelf_form" focus="create_shelf_form_header" %}
         <a class="button" href="{% url 'import' %}">{% trans "Import Books" %}</a>
     </div>
     {% endif %}
@@ -45,7 +45,7 @@
 
 {% block panel %}
 <div class="block">
-    {% include 'user/shelf/create_shelf_form.html' with controls_text='create-shelf-form' %}
+    {% include 'user/shelf/create_shelf_form.html' with controls_text='create_shelf_form' %}
 </div>
 
 <div class="block columns is-mobile">
@@ -60,13 +60,13 @@
     {% if is_self and shelf.id %}
     <div class="column is-narrow">
         {% trans "Edit shelf" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit-shelf-form" focus="edit-shelf-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit_shelf_form" focus="edit_shelf_form_header" %}
     </div>
     {% endif %}
 </div>
 
 <div class="block">
-    {% include 'user/shelf/edit_shelf_form.html' with controls_text="edit-shelf-form" %}
+    {% include 'user/shelf/edit_shelf_form.html' with controls_text="edit_shelf_form" %}
 </div>
 
 <div class="block">
@@ -131,7 +131,7 @@
                     {% endif %}
                 </tr>
                 {% endspaceless %}
-                {% endfor %} 
+                {% endfor %}
             </tbody>
         </table>
         {% else %}
diff --git a/bookwyrm/templates/user/user.html b/bookwyrm/templates/user/user.html
index 2c9d7277a..ee9249776 100644
--- a/bookwyrm/templates/user/user.html
+++ b/bookwyrm/templates/user/user.html
@@ -65,7 +65,7 @@
         </div>
     </div>
     {% for activity in activities %}
-    <div class="block" id="feed-{{ activity.id }}">
+    <div class="block" id="feed_{{ activity.id }}">
         {% include 'snippets/status/status.html' with status=activity %}
     </div>
     {% endfor %}
diff --git a/bookwyrm/templatetags/status_display.py b/bookwyrm/templatetags/status_display.py
index 3339a8be9..0d0137757 100644
--- a/bookwyrm/templatetags/status_display.py
+++ b/bookwyrm/templatetags/status_display.py
@@ -2,6 +2,7 @@
 from dateutil.relativedelta import relativedelta
 from django import template
 from django.contrib.humanize.templatetags.humanize import naturaltime, naturalday
+from django.template.loader import select_template
 from django.utils import timezone
 from bookwyrm import models
 from bookwyrm.templatetags.utilities import get_user_identifier
@@ -35,7 +36,7 @@ def get_parent(status):
     return (
         models.Status.objects.filter(id=status.reply_parent_id)
         .select_subclasses()
-        .get()
+        .first()
     )
 
 
@@ -64,6 +65,16 @@ def get_published_date(date):
     return naturaltime(date)
 
 
+@register.simple_tag()
+def get_header_template(status):
+    """get the path for the status template"""
+    if isinstance(status, models.Boost):
+        status = status.boosted_status
+    filename = "snippets/status/headers/{:s}.html".format(status.status_type.lower())
+    header_template = select_template([filename, "snippets/status/headers/note.html"])
+    return header_template.render({"status": status})
+
+
 @register.simple_tag(takes_context=False)
 def load_book(status):
     """how many users that you follow, follow them"""