notification

common/static/scss/_feed.scss

@@ -66,6 +66,12 @@
         // margin-right: 4px;
       }
 
+      blockquote {
+        padding-top: 0;
+        padding-bottom: 0;
+        margin: 0;
+      }
+
       .spacing {
         margin-bottom: calc(var(--pico-block-spacing-horizontal)/2);
       }

common/templates/_header.html

@@ -78,6 +78,9 @@
           </summary>
           <ul role="listbox" style="min-width:-webkit-max-content;" dir="rtl">
             {% if request.user.is_authenticated %}
+              <li>
+                <a href="{% url 'social:notification' %}">通知</a>
+              </li>
               <li>
                 <a href="{% url 'users:data' %}">数据</a>
               </li>

journal/models/common.py

@@ -178,6 +178,11 @@ def get_by_url(cls, url_or_b62):
             obj = None
         return obj
 
+    @classmethod
+    def get_by_post_id(cls, post_id: int):
+        pp = PiecePost.objects.filter(post_id=post_id).first()
+        return pp.piece if pp else None
+
     @classmethod
     def update_by_ap_object(cls, owner, item, obj, post_id, visibility):
         raise NotImplementedError("subclass must implement this")

journal/templates/replies.html

@@ -1,3 +1,4 @@
+{% load i18n %}
 <section class="replies" hx-target="this" hx-swap="outerHTML">
   {% for post in replies %}
     <div>
@@ -35,49 +36,51 @@
       <div id="replies_{{ post.pk }}"></div>
     </div>
   {% empty %}
-    <div class="empty">暂无回应</div>
+    <div class="empty">{% trans 'nothing so far.' %}</div>
   {% endfor %}
-  <form class="reply"
-        role="group"
-        hx-post="{% url 'journal:post_reply' post.pk %}"
-        hx-trigger="submit once">
-    <input name="content" type="text" placeholder="Type your reply" />
-    <details class="dropdown">
-      <summary>
-        <i class="fa-solid fa-users-gear"></i>
-      </summary>
-      <ul>
-        <li>
-          <label>
-            <input type="radio"
-                   name="visibility"
-                   value="{{ request.user.preference.post_public_mode }}"
-                   {% if post.visibility <= 1 or post.visibility == 4 %}checked{% endif %} />
-            <i class="fa-solid fa-globe"></i>
-          </label>
-        </li>
-        <li>
-          <label>
-            <input type="radio"
-                   name="visibility"
-                   value="2"
-                   {% if post.visibility == 2 %}checked{% endif %} />
-            <i class="fa-solid fa-lock"></i>
-          </label>
-        </li>
-        <li>
-          <label>
-            <input type="radio"
-                   name="visibility"
-                   value="3"
-                   {% if post.visibility == 3 %}checked{% endif %} />
-            <i class="fa-solid fa-at"></i>
-          </label>
-        </li>
-      </ul>
-    </details>
-    <button class="secondary">
-      <i class="fa-regular fa-paper-plane"></i>
-    </button>
-  </form>
+  {% if post %}
+    <form class="reply"
+          role="group"
+          hx-post="{% url 'journal:post_reply' post.pk %}"
+          hx-trigger="submit once">
+      <input name="content" type="text" placeholder="Type your reply" />
+      <details class="dropdown">
+        <summary>
+          <i class="fa-solid fa-users-gear"></i>
+        </summary>
+        <ul>
+          <li>
+            <label>
+              <input type="radio"
+                     name="visibility"
+                     value="{{ request.user.preference.post_public_mode }}"
+                     {% if post.visibility <= 1 or post.visibility == 4 %}checked{% endif %} />
+              <i class="fa-solid fa-globe"></i>
+            </label>
+          </li>
+          <li>
+            <label>
+              <input type="radio"
+                     name="visibility"
+                     value="2"
+                     {% if post.visibility == 2 %}checked{% endif %} />
+              <i class="fa-solid fa-lock"></i>
+            </label>
+          </li>
+          <li>
+            <label>
+              <input type="radio"
+                     name="visibility"
+                     value="3"
+                     {% if post.visibility == 3 %}checked{% endif %} />
+              <i class="fa-solid fa-at"></i>
+            </label>
+          </li>
+        </ul>
+      </details>
+      <button class="secondary">
+        <i class="fa-regular fa-paper-plane"></i>
+      </button>
+    </form>
+  {% endif %}
 </section>

social/templates/event/announcement.html

@@ -0,0 +1 @@
+unsupported notification: announcement

social/templates/event/boosted.html

@@ -0,0 +1,5 @@
+{% load bleach_tags %}
+boosted your post
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  {{ event.post.content|bleach:"a,p,span,br,div,img"|default:"<br>" }}
+</blockquote>

social/templates/event/boosted_collection.html

@@ -0,0 +1 @@
+boosted your collection <a href="{{ event.piece.url }}">{{ event.piece.title }}</a>

social/templates/event/boosted_comment.html

@@ -0,0 +1,8 @@
+{% load duration %}
+boost your comment on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span>
+    {% if event.piece.rating_grade %}{{ event.piece.rating_grade|rating_star }}{% endif %}
+  </span>
+  {{ event.piece.html|safe }}
+</blockquote>

social/templates/event/boosted_review.html

@@ -0,0 +1 @@
+boosted your review <a href="{{ event.piece.url }}">{{ event.piece.title }}</a> on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>

social/templates/event/boosted_shelfmember.html

@@ -0,0 +1,8 @@
+{% load duration %}
+boosted your mark on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span>
+    {% if event.piece.mark.rating_grade %}{{ event.piece.mark.rating_grade|rating_star }}{% endif %}
+  </span>
+  {{ event.piece.mark.comment.html|safe }}
+</blockquote>

social/templates/event/follow_requested.html

@@ -0,0 +1,12 @@
+{% load bleach_tags %}
+requested to follow you
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span class="action">{% include 'users/profile_actions.html' with show_home=1 identity=event.identity %}</span>
+  <div>
+    <code class="{{ event.identity.id }}_handler"
+          style="cursor:pointer"
+          onmouseleave="$(this).removeAttr('data-tooltip')"
+          onclick="navigator.clipboard.writeText(this.innerText);$(this).data('tooltip','copied');">@{{ event.identity.full_handle }}</code>
+  </div>
+  {{ event.identity.summary|bleach:"a,p,span,br"|default:"<br>" }}
+</blockquote>

social/templates/event/followed.html

@@ -0,0 +1,12 @@
+{% load bleach_tags %}
+followed you
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span class="action">{% include 'users/profile_actions.html' with show_home=1 identity=event.identity %}</span>
+  <div>
+    <code class="{{ event.identity.id }}_handler"
+          style="cursor:pointer"
+          onmouseleave="$(this).removeAttr('data-tooltip')"
+          onclick="navigator.clipboard.writeText(this.innerText);$(this).data('tooltip','copied');">@{{ event.identity.full_handle }}</code>
+  </div>
+  {{ event.identity.summary|bleach:"a,p,span,br"|default:"<br>" }}
+</blockquote>

social/templates/event/identity_created.html

@@ -0,0 +1 @@
+joined {{ site_name }}

social/templates/event/liked.html

@@ -0,0 +1,5 @@
+{% load bleach_tags %}
+liked your post
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  {{ event.post.content|bleach:"a,p,span,br,div,img"|default:"<br>" }}
+</blockquote>

social/templates/event/liked_collection.html

@@ -0,0 +1 @@
+liked your collection <a href="{{ event.piece.url }}">{{ event.piece.title }}</a>

social/templates/event/liked_comment.html

@@ -0,0 +1,8 @@
+{% load duration %}
+liked your comment on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span>
+    {% if event.piece.rating_grade %}{{ event.piece.rating_grade|rating_star }}{% endif %}
+  </span>
+  {{ event.piece.html|safe }}
+</blockquote>

social/templates/event/liked_review.html

@@ -0,0 +1 @@
+liked your review <a href="{{ event.piece.url }}">{{ event.piece.title }}</a> on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>

social/templates/event/liked_shelfmember.html

@@ -0,0 +1,8 @@
+{% load duration %}
+liked your mark on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span>
+    {% if event.piece.mark.rating_grade %}{{ event.piece.mark.rating_grade|rating_star }}{% endif %}
+  </span>
+  {{ event.piece.mark.comment.html|safe }}
+</blockquote>

social/templates/event/mentioned.html

@@ -0,0 +1,6 @@
+{% load bleach_tags %}
+mentioned you
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  {{ event.post.content|bleach:"a,p,span,br,div,img"|default:"<br>" }}
+</blockquote>
+{% include "events/_post.html" with post=event.reply %}

social/templates/event/mentioned_collection.html

@@ -0,0 +1,2 @@
+replied to your collection <a href="{{ event.piece.url }}">{{ event.piece.title }}</a>
+{% include "events/_post.html" with post=event.reply %}

social/templates/event/mentioned_comment.html

@@ -0,0 +1,9 @@
+{% load duration %}
+replied to your comment on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span>
+    {% if event.piece.rating_grade %}{{ event.piece.rating_grade|rating_star }}{% endif %}
+  </span>
+  {{ event.piece.html|safe }}
+</blockquote>
+{% include "events/_post.html" with post=event.reply %}

social/templates/event/mentioned_review.html

@@ -0,0 +1,2 @@
+replied to your review <a href="{{ event.piece.url }}">{{ event.piece.title }}</a> on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+{% include "events/_post.html" with post=event.reply %}

social/templates/event/mentioned_shelfmember.html

@@ -0,0 +1,9 @@
+{% load duration %}
+replied to your mark on <a href="{{ event.item.url }}">{{ event.item.display_title }}</a>
+<blockquote class="tldr" _="on click toggle .tldr on me">
+  <span>
+    {% if event.piece.mark.rating_grade %}{{ event.piece.mark.rating_grade|rating_star }}{% endif %}
+  </span>
+  {{ event.piece.mark.comment.html|safe }}
+</blockquote>
+{% include "events/_post.html" with post=event.reply %}

social/templates/event/post.html

@@ -0,0 +1 @@
+unsupported notification: post

social/templates/events.html

@@ -0,0 +1,51 @@
+{% load static %}
+{% load i18n %}
+{% load l10n %}
+{% load humanize %}
+{% load admin_url %}
+{% load mastodon %}
+{% load oauth_token %}
+{% load truncate %}
+{% load thumb %}
+{% load prettydate %}
+{% load user_actions %}
+{% load duration %}
+{% for event in events %}
+  <section class="activity">
+    <div class="avatar">
+      <img src="{{ event.identity.avatar }}" alt="cover" />
+    </div>
+    <div>
+      <div>
+        <span class="time">
+          <span>{{ event.created|naturaltime }}</span>
+        </span>
+        <div>
+          <span>
+            <a href="{{ event.identity.url }}"
+               class="nickname"
+               title="@{{ event.identity.full_handle }}">{{ event.identity.display_name }}</a>
+          </span>
+          {% with "event/"|add:event.template|add:".html" as template %}
+            {% include template %}
+          {% endwith %}
+        </div>
+      </div>
+    </div>
+  </section>
+  {% if forloop.last %}
+    <div class="htmx-indicator"
+         style="margin-left: 60px"
+         hx-get="{% url 'social:events' %}?last={{ event.created|date:'Y-m-d H:i:s.uO'|urlencode }}"
+         hx-trigger="revealed"
+         hx-swap="outerHTML">
+      <i class="fa-solid fa-compact-disc fa-spin loading"></i>
+    </div>
+  {% endif %}
+{% empty %}
+  {% if request.GET.last %}
+    <div class="empty">{% trans 'nothing more.' %}</div>
+  {% else %}
+    <div class="empty">{% trans 'nothing so far.' %}</div>
+  {% endif %}
+{% endfor %}

social/templates/events/_post.html

@@ -0,0 +1,17 @@
+<div>
+  <span class="action">
+    {% include "action_reply_post.html" %}
+    {% include "action_like_post.html" %}
+    {% include "action_boost_post.html" %}
+    {% include "action_open_post.html" %}
+  </span>
+  {% if post.summary %}
+    <details>
+      <summary>{{ post.summary }}</summary>
+      {{ post.safe_content_local }}
+    </details>
+  {% else %}
+    {{ post.safe_content_local }}
+  {% endif %}
+  <div id="replies_{{ post.pk }}"></div>
+</div>

social/templates/notification.html

@@ -0,0 +1,38 @@
+{% load static %}
+{% load i18n %}
+{% load l10n %}
+{% load admin_url %}
+{% load mastodon %}
+{% load oauth_token %}
+{% load truncate %}
+{% load thumb %}
+<!DOCTYPE html>
+<html lang="zh" class="feed-page">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ site_name }} - {% trans 'Notification' %}</title>
+    {% include "common_libs.html" %}
+    <script src="{{ cdn_url }}/npm/shikwasa@2.2.1/dist/shikwasa.min.js"></script>
+    <link href="{{ cdn_url }}/npm/shikwasa@2.2.1/dist/style.min.css"
+          rel="stylesheet"></link>
+  <script src="{% static 'js/podcast.js' %}"></script>
+</head>
+<body>
+  {% include "_header.html" with current="timeline" %}
+  <main>
+    <div class="grid__main">
+      <h5>{% trans 'Notification' %}</h5>
+      <div class="feed">
+        <div hx-get="{% url 'social:events' %}"
+             hx-trigger="intersect once delay:0.1s"
+             hx-swap="outerHTML">
+          <i class="fa-solid fa-compact-disc fa-spin loading"></i>
+        </div>
+      </div>
+    </div>
+    {% include "_sidebar.html" with show_progress=1 identity=request.user.identity %}
+  </main>
+  {% include "_footer.html" %}
+</body>
+</html>

social/urls.py

@@ -6,4 +6,6 @@
 urlpatterns = [
     path("", feed, name="feed"),
     path("data", data, name="data"),
+    path("notification", notification, name="notification"),
+    path("events", events, name="events"),
 ]