add feed for read/watch/listen

common/static/scss/_feed.scss

@@ -21,4 +21,90 @@
       }
     }
   }
+  .notifications {
+    word-break: break-word;
+
+    .avatar {
+      height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px);
+      width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px);
+
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    > section {
+      margin-bottom: var(--pico-spacing);
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto;
+      grid-column-gap: 1em;
+      grid-row-gap: 0px;
+      // align-items: center;
+      // justify-content: left;
+
+      .nickname a {
+        word-break: break-all;
+      }
+
+      .time {
+        width: max-content;
+        float: right;
+        color: var(--pico-muted-color);
+        opacity: 0.5;
+        margin-left: 1em;
+      }
+
+      .rating-star {
+        margin: 0 0.5em;
+      }
+
+      .rating-star,
+      .rating-star>* {
+        color: var(--pico-primary);
+      }
+
+      article {
+        padding: calc(var(--pico-block-spacing-horizontal) / 2);
+        margin-bottom: var(--pico-block-spacing-horizontal);
+
+        >div.item {
+          column-gap: calc(var(--pico-block-spacing-horizontal) / 2);
+
+          @media (max-width: 768px) {
+            grid-template-columns: calc(2.5rem * var(--pico-line-height)) auto
+          }
+        }
+
+        footer {
+          padding: calc(var(--pico-block-spacing-horizontal) / 2);
+          margin-left: calc(var(--pico-block-spacing-horizontal) * -0.5);
+          margin-right: calc(var(--pico-block-spacing-horizontal) * -0.5);
+          margin-top: calc(var(--pico-block-spacing-horizontal)/2);
+        }
+
+        // margin-right: 4px;
+      }
+
+      blockquote {
+        padding-top: 0;
+        padding-bottom: 0;
+        margin: 0;
+        color: var(--pico-muted-color);
+
+        a {
+          color: var(--pico-muted-color);
+        }
+      }
+
+      p:last-child {
+      margin-bottom: 0;
+      }
+
+      .spacing {
+        margin-bottom: calc(var(--pico-block-spacing-horizontal)/2);
+      }
+    }
+  }
 }

common/static/scss/_l10n.scss

@@ -1,5 +1,7 @@
 h1, h2, h3, h4, h5 {
-	text-transform: capitalize;
+	:first-letter {
+		text-transform: capitalize;
+	}
 }
 
 label, legend, button {

neodb-takahe

@@ -1 +1 @@
-Subproject commit 9b57e4f24413b1b335987ca8575e08b400e7fb41
+Subproject commit 6f8d056dc8b7cc9edfebea915e999672bff81ace

social/templates/feed.html

@@ -19,9 +19,19 @@
   {% include "_header.html" %}
   <main>
     <div class="grid__main">
-      <h5>{% trans 'Activities from those you follow' %}</h5>
+      <h5>
+        {% trans 'Activities from those you follow' %}
+        <small>
+          {% if feed_type == 1 %}
+            <a href="{% url 'social:feed' %}">{% trans "All" %}</a> | {% trans "What they read/watch/..." %}
+          {% else %}
+            {% trans "All" %} | <a href="{% url 'social:focus' %}">{% trans "What they read/watch/..." %}</a>
+          {% endif %}
+          | <a href="{% url 'social:notification' %}">{% trans "Notifications" %}</a>
+        </small>
+      </h5>
       <div class="feed">
-        <div hx-get="{% url 'social:data' %}"
+        <div hx-get="{% url 'social:data' %}?typ={{ feed_type }}"
              hx-trigger="intersect once delay:0.1s"
              hx-swap="outerHTML">
           <i class="fa-solid fa-compact-disc fa-spin loading"></i>

social/templates/feed_events.html

@@ -120,7 +120,7 @@
   {% if forloop.last %}
     <div class="htmx-indicator"
          style="margin-left: 60px"
-         hx-get="{% url 'social:data' %}?last={{ event.pk }}"
+         hx-get="{% url 'social:data' %}?last={{ event.pk }}&amp;typ={{ feed_type }}"
          hx-trigger="revealed"
          hx-swap="outerHTML">
       <i class="fa-solid fa-compact-disc fa-spin loading"></i>

social/templates/notification.html

@@ -30,7 +30,7 @@
              href="{% url 'social:notification' %}?type=follow">{% trans 'follow' %}</a>
         </small>
       </h5>
-      <div class="feed">
+      <div class="notifications">
         <div hx-get="{% url 'social:events' %}?type={{ request.GET.type }}"
              hx-trigger="intersect once delay:0.1s"
              hx-swap="outerHTML">

social/urls.py

@@ -5,6 +5,7 @@ from .views import *
 app_name = "social"
 urlpatterns = [
     path("", feed, name="feed"),
+    path("focus", focus, name="focus"),
     path("data", data, name="data"),
     path("notification", notification, name="notification"),
     path("events", events, name="events"),

social/views.py

@@ -15,7 +15,7 @@ PAGE_SIZE = 10
 
 @require_http_methods(["GET"])
 @login_required
-def feed(request):
+def feed(request, typ=0):
     if not request.user.registration_complete:
         return redirect(reverse("users:register"))
     user = request.user
@@ -48,6 +48,7 @@ def feed(request):
         request,
         "feed.html",
         {
+            "feed_type": typ,
             "recent_podcast_episodes": recent_podcast_episodes,
             "books_in_progress": books_in_progress,
             "tvshows_in_progress": tvshows_in_progress,
@@ -55,18 +56,31 @@ def feed(request):
     )
 
 
+def focus(request):
+    return feed(request, typ=1)
+
+
 @login_required
 @require_http_methods(["GET"])
 def data(request):
     since_id = int(request.GET.get("last", 0))
+    typ = int(request.GET.get("typ", 0))
     identity_id = request.user.identity.pk
-    events = (
-        TimelineEvent.objects.filter(
-            identity_id=identity_id,
-            type__in=[TimelineEvent.Types.post, TimelineEvent.Types.boost],
-        )
-        .order_by("-id")
-        .select_related(
+    events = TimelineEvent.objects.filter(
+        identity_id=identity_id,
+        type__in=[TimelineEvent.Types.post, TimelineEvent.Types.boost],
+    )
+    match typ:
+        case 1:
+            events = events.filter(
+                subject_post__type_data__object__has_key="relatedWith"
+            )
+        case _:  # default: no replies
+            events = events.filter(subject_post__in_reply_to__isnull=True)
+    if since_id:
+        events = events.filter(id__lt=since_id)
+    events = list(
+        events.select_related(
             "subject_post",
             "subject_post__author",
             # "subject_post__author__domain",
@@ -81,10 +95,8 @@ def data(request):
             # "subject_post__mentions",
             # "subject_post__emojis",
         )
+        .order_by("-id")[:PAGE_SIZE]
     )
-    if since_id:
-        events = events.filter(id__lt=since_id)
-    events = list(events[:PAGE_SIZE])
     interactions = PostInteraction.objects.filter(
         identity_id=identity_id,
         post_id__in=[event.subject_post_id for event in events],
@@ -101,7 +113,7 @@ def data(request):
             event.subject_post_id,
             "boost",
         ) in interactions
-    return render(request, "feed_events.html", {"events": events})
+    return render(request, "feed_events.html", {"feed_type": typ, "events": events})
 
 
 # @login_required