Add with_replies and media tabs

lib/pleroma/web/router.ex

@@ -716,6 +716,15 @@ defmodule Pleroma.Web.Router do
     get("/users/:nickname/feed", Feed.UserController, :feed, as: :user_feed)
   end
 
+  scope "/", Pleroma.Web do
+    # Note: html format is supported only if static FE is enabled
+    pipe_through([:accepts_html_xml, :static_fe])
+
+    # Profile pages for static-fe
+    get("/users/:nickname/with_replies", Feed.UserController, :user_feed)
+    get("/users/:nickname/media", Feed.UserController, :user_feed)
+  end
+
   scope "/", Pleroma.Web do
     pipe_through(:accepts_html)
     get("/notice/:id/embed_player", OStatus.OStatusController, :notice_player)

lib/pleroma/web/static_fe/static_fe_controller.ex

@@ -10,6 +10,7 @@ defmodule Pleroma.Web.StaticFE.StaticFEController do
   alias Pleroma.User
   alias Pleroma.Web.ActivityPub.ActivityPub
   alias Pleroma.Web.ActivityPub.Visibility
+  alias Pleroma.Web.CommonAPI
   alias Pleroma.Web.Metadata
   alias Pleroma.Web.Router.Helpers
 
@@ -45,7 +46,7 @@ def show(%{assigns: %{notice_id: notice_id}} = conn, _params) do
     end
   end
 
-  def show(%{assigns: %{username_or_id: username_or_id}} = conn, params) do
+  def show(%{assigns: %{username_or_id: username_or_id, tab: tab}} = conn, params) do
     with {_, %User{local: true} = user} <-
            {:fetch_user, User.get_cached_by_nickname_or_id(username_or_id)},
          {_, :visible} <- {:visibility, User.visible_for(user, _reading_user = nil)} do
@@ -56,6 +57,14 @@ def show(%{assigns: %{username_or_id: username_or_id}} = conn, params) do
         |> Map.take(@page_keys)
         |> Map.new(fn {k, v} -> {String.to_existing_atom(k), v} end)
 
+      params = case tab do
+        "posts" ->
+          Map.put(params, :exclude_replies, true)
+        "with_replies" -> params
+        "media" ->
+          Map.put(params, :only_media, true)
+      end
+
       timeline =
         user
         |> ActivityPub.fetch_user_activities(_reading_user = nil, params)
@@ -172,7 +181,14 @@ defp assign_id(%{path_info: ["notice", notice_id]} = conn, _opts),
     do: assign(conn, :notice_id, notice_id)
 
   defp assign_id(%{path_info: ["users", user_id]} = conn, _opts),
-    do: assign(conn, :username_or_id, user_id)
+    do: conn
+    |> assign(:username_or_id, user_id)
+    |> assign(:tab, "posts")
+
+  defp assign_id(%{path_info: ["users", user_id, tab]} = conn, _opts),
+    do: conn
+    |> assign(:username_or_id, user_id)
+    |> assign(:tab, tab)
 
   defp assign_id(%{path_info: ["objects", object_id]} = conn, _opts),
     do: assign(conn, :object_id, object_id)

lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex

@@ -70,6 +70,23 @@
     </div>
     <% end %>
   </div>
+  <div class="tab-switcher">
+    <a href="<%= (@user.uri || @user.ap_id) %>">
+      <button class="button-default tab <%= if @tab == "posts" do %>active<% end %>">
+        Posts
+      </button>
+    </a>
+    <a href="<%= (@user.uri || @user.ap_id) %>/with_replies">
+      <button class="button-default tab <%= if @tab == "with_replies" do %>active<% end %>">
+        With Replies
+      </button>
+    </a>
+    <a href="<%= (@user.uri || @user.ap_id) %>/media">
+      <button class="button-default tab <%= if @tab == "media" do %>active<% end %>">
+        Media
+      </button>
+    </a>
+  </div>
   <%= if @prev_page_id do %>
   <%= link "Show newer", to: "?min_id=" <> @prev_page_id, class: "load-posts" %>
   <% end %>

priv/static/static-fe/static-fe.css

@@ -1,6 +1,6 @@
 /* pleroma-light and pleroma-dark themes from pleroma-fe */
 :root {
-	--icon: rgba(100, 103, 108, 1);
+    --icon: rgba(100, 103, 108, 1);
     --alertNeutral: rgba(185, 185, 186, 0.5);
     --wallpaper: rgba(11, 16, 23, 1);
     --alertNeutralText: rgba(255, 255, 255, 1);
@@ -38,7 +38,7 @@ html {
 }
 
 body {
-	overflow: auto;
+    overflow: auto;
     margin: 0;
     height: 100%;
     font-family: sans-serif;
@@ -66,7 +66,7 @@ a {
 
 nav {
     position: sticky;
-	top: 0;
+    top: 0;
     width: 100%;
     height: 3.5em;
     background-color: var(--topBar);
@@ -337,11 +337,11 @@ .user-banner {
     right: 0;
     bottom: 0;
     background-image: linear-gradient(to bottom, var(--profileTint), var(--profileTint)),
-    				  var(--user-banner);
+                      var(--user-banner);
     background-size: cover;
     background-color: var(--profileBg);
     -webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-    			  linear-gradient(to top, white, white);
+                  linear-gradient(to top, white, white);
     -webkit-mask-composite: xor;
     -webkit-mask-size: 100% 60%;
     z-index: -2;
@@ -506,3 +506,28 @@ .reply-to-link {
 .reply-to-link:hover {
     text-decoration: underline;
 }
+
+.tab-switcher {
+    display: flex;
+    padding-top: 5px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-bottom: 1px solid var(--border);
+}
+
+.tab-switcher::before,
+.tab-switcher::after {
+    flex: 1 1 auto;
+    content: '';
+}
+
+.tab {
+    flex: 0 0 auto;
+    padding: 6px 1em;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.tab.active {
+    background: transparent;
+}