From 29157d03fc6c846d3f740396d7d92bcf0be586a2 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sat, 2 Oct 2021 07:33:42 -0700
Subject: [PATCH] Create snippet for notification items

---
 .../notifications/notification_item.html      | 118 ++++++++++++++++++
 .../notifications/notifications.html          | 118 +-----------------
 2 files changed, 119 insertions(+), 117 deletions(-)
 create mode 100644 bookwyrm/templates/notifications/notification_item.html

diff --git a/bookwyrm/templates/notifications/notification_item.html b/bookwyrm/templates/notifications/notification_item.html
new file mode 100644
index 00000000..89754688
--- /dev/null
+++ b/bookwyrm/templates/notifications/notification_item.html
@@ -0,0 +1,118 @@
+    {% related_status notification as related_status %}
+    <div class="notification {% if notification.id in unread %} is-primary{% endif %}">
+        <div class="columns is-mobile">
+            <div class="column is-narrow is-size-3 {% if notification.id in unread%}has-text-white{% else %}has-text-grey{% endif %}">
+                {% if notification.notification_type == 'MENTION' %}
+                <span class="icon icon-comment"></span>
+                {% elif notification.notification_type == 'REPLY' %}
+                <span class="icon icon-comments"></span>
+                {% elif notification.notification_type == 'FOLLOW' or notification.notification_type == 'FOLLOW_REQUEST' %}
+                <span class="icon icon-local"></span>
+                {% elif notification.notification_type == 'BOOST' %}
+                <span class="icon icon-boost"></span>
+                {% elif notification.notification_type == 'FAVORITE' %}
+                <span class="icon icon-heart"></span>
+                {% elif notification.notification_type == 'IMPORT' %}
+                <span class="icon icon-list"></span>
+                {% elif notification.notification_type == 'ADD' %}
+                <span class="icon icon-plus"></span>
+                {% elif notification.notification_type == 'REPORT' %}
+                <span class="icon icon-warning"></span>
+                {% endif %}
+            </div>
+            <div class="column is-clipped">
+                <div class="block">
+                    <p>
+                        {# DESCRIPTION #}
+                        {% if notification.related_user %}
+                            <a href="{{ notification.related_user.local_path }}">
+                                {% include 'snippets/avatar.html' with user=notification.related_user %}
+                                {{ notification.related_user.display_name }}
+                            </a>
+                            {% if notification.notification_type == 'FAVORITE' %}
+                                {% if related_status.status_type == 'Review' %}
+                                {% blocktrans with book_title=related_status.book.title related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Comment' %}
+                                {% blocktrans with book_title=related_status.book.title related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">comment on <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Quotation' %}
+                                {% blocktrans with book_title=related_status.book.title related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% else %}
+                                {% blocktrans with related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">status</a>{% endblocktrans %}
+                                {% endif %}
+
+                            {% elif notification.notification_type == 'MENTION' %}
+                                {% if related_status.status_type == 'Review' %}
+                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}mentioned you in a <a href="{{ related_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Comment' %}
+                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}mentioned you in a <a href="{{ related_path }}">comment on <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Quotation' %}
+                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}mentioned you in a <a href="{{ related_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% else %}
+                                {% blocktrans with related_path=related_status.local_path %}mentioned you in a <a href="{{ related_path }}">status</a>{% endblocktrans %}
+                                {% endif %}
+
+                            {% elif notification.notification_type == 'REPLY' %}
+                                {% if related_status.status_type == 'Review' %}
+                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path book_title=related_status.reply_parent.book.title %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Comment' %}
+                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path book_title=related_status.reply_parent.book.title %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">comment on <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Quotation' %}
+                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path book_title=related_status.reply_parent.book.title %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% else %}
+                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">status</a>{% endblocktrans %}
+                                {% endif %}
+
+                            {% elif notification.notification_type == 'FOLLOW' %}
+                                {% trans "followed you" %}
+                                {% include 'snippets/follow_button.html' with user=notification.related_user %}
+                            {% elif notification.notification_type == 'FOLLOW_REQUEST' %}
+                                {% trans "sent you a follow request" %}
+                                <div class="row shrink">
+                                    {% include 'snippets/follow_request_buttons.html' with user=notification.related_user %}
+                                </div>
+                            {% elif notification.notification_type == 'BOOST' %}
+                                {% if related_status.status_type == 'Review' %}
+                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}boosted your <a href="{{ related_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Comment' %}
+                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}boosted your <a href="{{ related_path }}">comment on<em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% elif related_status.status_type == 'Quotation' %}
+                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}boosted your <a href="{{ related_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
+                                {% else %}
+                                {% blocktrans with related_path=related_status.local_path %}boosted your <a href="{{ related_path }}">status</a>{% endblocktrans %}
+                                {% endif %}
+                            {% elif notification.notification_type == 'ADD' %}
+                                {% if notification.related_list_item.approved %}
+                                {% blocktrans with book_path=notification.related_list_item.book.local_path book_title=notification.related_list_item.book.title list_path=notification.related_list_item.book_list.local_path list_name=notification.related_list_item.book_list.name %} added <em><a href="{{ book_path }}">{{ book_title }}</a></em> to your list "<a href="{{ list_path }}">{{ list_name }}</a>"{% endblocktrans %}
+                                {% else %}
+                                {% blocktrans with book_path=notification.related_list_item.book.local_path book_title=notification.related_list_item.book.title list_path=notification.related_list_item.book_list.local_path list_name=notification.related_list_item.book_list.name %} suggested adding <em><a href="{{ book_path }}">{{ book_title }}</a></em> to your list "<a href="{{ list_path }}/curate">{{ list_name }}</a>"{% endblocktrans %}
+                                {% endif %}
+                            {% endif %}
+                        {% elif notification.related_import %}
+                        {% url 'import-status' notification.related_import.id as url %}
+                        {% blocktrans %}Your <a href="{{ url }}">import</a> completed.{% endblocktrans %}
+                        {% elif notification.related_report %}
+                            {% url 'settings-report' notification.related_report.id as path %}
+                            {% blocktrans with related_id=path %}A new <a href="{{ path }}">report</a> needs moderation.{% endblocktrans %}
+                        {% endif %}
+                    </p>
+                </div>
+                {% if related_status %}
+                <div class="block">
+                    {# PREVIEW #}
+                    <div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-white{% if notification.notification_type == 'REPLY' or notification.notification_type == 'MENTION' %} has-text-black{% else %}-bis has-text-grey-dark{% endif %}{% endif %}">
+                        <div class="columns">
+                            <div class="column is-clipped">
+                                {% include 'snippets/status_preview.html' with status=related_status %}
+                            </div>
+                            <div class="column is-narrow {% if notification.notification_type == 'REPLY' or notification.notification_type == 'MENTION' %}has-text-black{% else %}has-text-grey-dark{% endif %}">
+                                {{ related_status.published_date|timesince }}
+                                {% include 'snippets/privacy-icons.html' with item=related_status %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
diff --git a/bookwyrm/templates/notifications/notifications.html b/bookwyrm/templates/notifications/notifications.html
index ae5cd67b..7f882001 100644
--- a/bookwyrm/templates/notifications/notifications.html
+++ b/bookwyrm/templates/notifications/notifications.html
@@ -34,123 +34,7 @@
 
 <div class="block">
     {% for notification in notifications %}
-    {% related_status notification as related_status %}
-    <div class="notification {% if notification.id in unread %} is-primary{% endif %}">
-        <div class="columns is-mobile">
-            <div class="column is-narrow is-size-3 {% if notification.id in unread%}has-text-white{% else %}has-text-grey{% endif %}">
-                {% if notification.notification_type == 'MENTION' %}
-                <span class="icon icon-comment"></span>
-                {% elif notification.notification_type == 'REPLY' %}
-                <span class="icon icon-comments"></span>
-                {% elif notification.notification_type == 'FOLLOW' or notification.notification_type == 'FOLLOW_REQUEST' %}
-                <span class="icon icon-local"></span>
-                {% elif notification.notification_type == 'BOOST' %}
-                <span class="icon icon-boost"></span>
-                {% elif notification.notification_type == 'FAVORITE' %}
-                <span class="icon icon-heart"></span>
-                {% elif notification.notification_type == 'IMPORT' %}
-                <span class="icon icon-list"></span>
-                {% elif notification.notification_type == 'ADD' %}
-                <span class="icon icon-plus"></span>
-                {% elif notification.notification_type == 'REPORT' %}
-                <span class="icon icon-warning"></span>
-                {% endif %}
-            </div>
-            <div class="column is-clipped">
-                <div class="block">
-                    <p>
-                        {# DESCRIPTION #}
-                        {% if notification.related_user %}
-                            <a href="{{ notification.related_user.local_path }}">
-                                {% include 'snippets/avatar.html' with user=notification.related_user %}
-                                {{ notification.related_user.display_name }}
-                            </a>
-                            {% if notification.notification_type == 'FAVORITE' %}
-                                {% if related_status.status_type == 'Review' %}
-                                {% blocktrans with book_title=related_status.book.title related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Comment' %}
-                                {% blocktrans with book_title=related_status.book.title related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">comment on <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Quotation' %}
-                                {% blocktrans with book_title=related_status.book.title related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% else %}
-                                {% blocktrans with related_path=related_status.local_path %}favorited your <a href="{{ related_path }}">status</a>{% endblocktrans %}
-                                {% endif %}
-
-                            {% elif notification.notification_type == 'MENTION' %}
-                                {% if related_status.status_type == 'Review' %}
-                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}mentioned you in a <a href="{{ related_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Comment' %}
-                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}mentioned you in a <a href="{{ related_path }}">comment on <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Quotation' %}
-                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}mentioned you in a <a href="{{ related_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% else %}
-                                {% blocktrans with related_path=related_status.local_path %}mentioned you in a <a href="{{ related_path }}">status</a>{% endblocktrans %}
-                                {% endif %}
-
-                            {% elif notification.notification_type == 'REPLY' %}
-                                {% if related_status.status_type == 'Review' %}
-                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path book_title=related_status.reply_parent.book.title %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Comment' %}
-                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path book_title=related_status.reply_parent.book.title %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">comment on <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Quotation' %}
-                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path book_title=related_status.reply_parent.book.title %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% else %}
-                                {% blocktrans with related_path=related_status.local_path parent_path=related_status.reply_parent.local_path %}<a href="{{ related_path }}">replied</a> to your <a href="{{ parent_path }}">status</a>{% endblocktrans %}
-                                {% endif %}
-
-                            {% elif notification.notification_type == 'FOLLOW' %}
-                                {% trans "followed you" %}
-                                {% include 'snippets/follow_button.html' with user=notification.related_user %}
-                            {% elif notification.notification_type == 'FOLLOW_REQUEST' %}
-                                {% trans "sent you a follow request" %}
-                                <div class="row shrink">
-                                    {% include 'snippets/follow_request_buttons.html' with user=notification.related_user %}
-                                </div>
-                            {% elif notification.notification_type == 'BOOST' %}
-                                {% if related_status.status_type == 'Review' %}
-                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}boosted your <a href="{{ related_path }}">review of <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Comment' %}
-                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}boosted your <a href="{{ related_path }}">comment on<em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% elif related_status.status_type == 'Quotation' %}
-                                {% blocktrans with related_path=related_status.local_path book_title=related_status.book.title %}boosted your <a href="{{ related_path }}">quote from <em>{{ book_title }}</em></a>{% endblocktrans %}
-                                {% else %}
-                                {% blocktrans with related_path=related_status.local_path %}boosted your <a href="{{ related_path }}">status</a>{% endblocktrans %}
-                                {% endif %}
-                            {% elif notification.notification_type == 'ADD' %}
-                                {% if notification.related_list_item.approved %}
-                                {% blocktrans with book_path=notification.related_list_item.book.local_path book_title=notification.related_list_item.book.title list_path=notification.related_list_item.book_list.local_path list_name=notification.related_list_item.book_list.name %} added <em><a href="{{ book_path }}">{{ book_title }}</a></em> to your list "<a href="{{ list_path }}">{{ list_name }}</a>"{% endblocktrans %}
-                                {% else %}
-                                {% blocktrans with book_path=notification.related_list_item.book.local_path book_title=notification.related_list_item.book.title list_path=notification.related_list_item.book_list.local_path list_name=notification.related_list_item.book_list.name %} suggested adding <em><a href="{{ book_path }}">{{ book_title }}</a></em> to your list "<a href="{{ list_path }}/curate">{{ list_name }}</a>"{% endblocktrans %}
-                                {% endif %}
-                            {% endif %}
-                        {% elif notification.related_import %}
-                        {% url 'import-status' notification.related_import.id as url %}
-                        {% blocktrans %}Your <a href="{{ url }}">import</a> completed.{% endblocktrans %}
-                        {% elif notification.related_report %}
-                            {% url 'settings-report' notification.related_report.id as path %}
-                            {% blocktrans with related_id=path %}A new <a href="{{ path }}">report</a> needs moderation.{% endblocktrans %}
-                        {% endif %}
-                    </p>
-                </div>
-                {% if related_status %}
-                <div class="block">
-                    {# PREVIEW #}
-                    <div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-white{% if notification.notification_type == 'REPLY' or notification.notification_type == 'MENTION' %} has-text-black{% else %}-bis has-text-grey-dark{% endif %}{% endif %}">
-                        <div class="columns">
-                            <div class="column is-clipped">
-                                {% include 'snippets/status_preview.html' with status=related_status %}
-                            </div>
-                            <div class="column is-narrow {% if notification.notification_type == 'REPLY' or notification.notification_type == 'MENTION' %}has-text-black{% else %}has-text-grey-dark{% endif %}">
-                                {{ related_status.published_date|timesince }}
-                                {% include 'snippets/privacy-icons.html' with item=related_status %}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-            </div>
-        </div>
-    </div>
+    {% include 'notifications/notification_item.html' %}
     {% endfor %}
 
     {% if not notifications %}