Overhaul conversation and status

lib/pleroma/web/static_fe/static_fe_view.ex

@@ -22,6 +22,13 @@ def fetch_media_type(%{"mediaType" => mediaType}) do
     Utils.fetch_media_type(@media_types, mediaType)
   end
 
+  def time_ago(date) do
+    {:ok, date, _} = DateTime.from_iso8601(date)
+    now = DateTime.utc_now()
+
+    Timex.from_now(date, now)
+  end
+
   def format_date(date) do
     {:ok, date, _} = DateTime.from_iso8601(date)
     Strftime.strftime!(date, "%Y/%m/%d %l:%M:%S %p UTC")
@@ -32,7 +39,7 @@ def instance_name, do: Pleroma.Config.get([:instance, :name], "Akkoma")
   def open_content? do
     Pleroma.Config.get(
       [:frontend_configurations, :collapse_message_with_subjects],
-      true
+      false
     )
   end
 end

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

@@ -1,41 +1,66 @@
-<div class="activity h-entry" <%= if @selected do %> id="selected" <% end %>>
-  <p class="pull-right">
-    <a class="activity-link u-url u-uid" href="<%= @link %>">
-      <time class="dt-published" datetime="<%= @published %>">
-        <%= format_date(@published) %>
-      </time>
+<div class="status-container" <%= if @selected do %> id="selected" <% end %>>
+  <div class="left-side">
+    <a href="<%= (@user.uri || @user.ap_id) %>" rel="author noopener">
+      <div class="avatar">
+        <img
+          class="u-photo" width="48" height="48"
+          src="<%= User.avatar_url(@user) |> MediaProxy.url %>"
+          title="<%= @user.nickname %>" alt="<%= @user.nickname %>"
+        />
+      </div>
     </a>
-  </p>
-  <%= render("_user_card.html", %{user: @user}) %>
-  <div class="activity-content">
-    <%= if @title != "" do %>
-      <details <%= if open_content?() do %>open<% end %>>
-        <summary class="p-name"><%= raw @title %></summary>
-        <div class="e-content"><%= raw @content %></div>
-      </details>
-    <% else %>
-      <div class="e-content"><%= raw @content %></div>
-    <% end %>
-    <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %>
-      <%= if @sensitive do %>
-        <details class="nsfw">
-          <summary><%= Gettext.gettext("sensitive media") %></summary>
-          <div>
-            <%= render("_attachment.html", %{name: name, url: url["href"],
-                                             mediaType: fetch_media_type(url)}) %>
-          </div>
-        </details>
-      <% else %>
-        <%= render("_attachment.html", %{name: name, url: url["href"],
-                                         mediaType: fetch_media_type(url)}) %>
-      <% end %>
-    <% end %>
   </div>
-  <%= if @selected do %>
-    <dl class="counts">
-      <dt><%= Gettext.gettext("replies") %></dt><dd><%= @counts.replies %></dd>
-      <dt><%= Gettext.gettext("announces") %></dt><dd><%= @counts.announces %></dd>
-      <dt><%= Gettext.gettext("likes") %></dt><dd><%= @counts.likes %></dd>
-    </dl>
-  <% end %>
+  <div class="right-side">
+    <div class="status-heading">
+      <div class="heading-left">
+        <h4 class="username">
+		  <%= raw Formatter.emojify(@user.name, @user.emoji) %>
+        </h4>
+        <a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
+          <%= @user.nickname %>
+        </a>
+      </div>
+      <div class="heading-right">
+        <a class="timeago" href="<%= @link %>">
+          <time
+            class="dt-published" datetime="<%= @published %>"
+            title="<%= format_date(@published) %>"
+          >
+            <%= time_ago(@published) %>
+          </time>
+        </a>
+      </div>
+    </div>
+    <div class="status-content">
+      <%= if @title != "" do %>
+      <span class="status-summary"><%= raw @title %></span>
+      <details <%= if open_content?() do %>open<% end %>>
+        <summary><%= gettext("Show content") %></summary>
+        <div class="status-body"><%= raw @content %></div>
+      </details>
+      <% else %>
+      <div class="status-body"><%= raw @content %></div>
+      <% end %>
+      <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %>
+      <%= if @sensitive do %>
+      <details class="nsfw">
+        <summary><%= Gettext.gettext("sensitive media") %></summary>
+        <div>
+          <%= render("_attachment.html", %{name: name, url: url["href"],
+			                              mediaType: fetch_media_type(url)}) %>
+        </div>
+      </details>
+      <% else %>
+      <%= render("_attachment.html", %{name: name, url: url["href"],
+                                      mediaType: fetch_media_type(url)}) %>
+      <% end %>
+      <% end %>
+    </div>
+    <!-- <div class="emoji-reactions"></div> -->
+    <div class="status-actions">
+      <div><%= @counts.replies %></div>
+      <div><%= @counts.announces %></div>
+      <div><%= @counts.likes %></div>
+    </div>
+  </div>
 </div>

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

@@ -1,11 +0,0 @@
-<div class="p-author h-card">
-  <a class="u-url" rel="author noopener" href="<%= (@user.uri || @user.ap_id) %>">
-    <div class="avatar">
-      <img class="u-photo" src="<%= User.avatar_url(@user) |> MediaProxy.url %>" width="48" height="48" alt="">
-    </div>
-    <span class="display-name">
-      <bdi class="p-name"><%= raw Formatter.emojify(@user.name, @user.emoji) %></bdi>
-      <span class="nickname"><%= @user.nickname %></span>
-    </span>
-  </a>
-</div>

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

@@ -1,11 +1,8 @@
-<header>
-  <h1><%= link instance_name(), to: "/" %></h1>
-</header>
-
-<main>
-  <div class="conversation">
-    <%= for activity <- @activities do %>
-      <%= render("_notice.html", activity) %>
-    <% end %>
+<div class="panel conversation">
+  <div class="panel-heading">
+    <%= gettext("Conversation") %>
   </div>
-</main>
+  <%= for activity <- @activities do %>
+  <%= render("_notice.html", activity) %>
+  <% end %>
+</div>

test/pleroma/web/static_fe/static_fe_controller_test.exs

@@ -42,8 +42,8 @@ test "profile does not include private messages", %{conn: conn, user: user} do
 
       html = html_response(conn, 200)
 
-      assert html =~ ">public<"
-      refute html =~ ">private<"
+      assert html =~ "\npublic\n"
+      refute html =~ "\nprivate\n"
     end
 
     test "pagination", %{conn: conn, user: user} do
@@ -53,10 +53,10 @@ test "pagination", %{conn: conn, user: user} do
 
       html = html_response(conn, 200)
 
-      assert html =~ ">test30<"
-      assert html =~ ">test11<"
-      refute html =~ ">test10<"
-      refute html =~ ">test1<"
+      assert html =~ "\ntest30\n"
+      assert html =~ "\ntest11\n"
+      refute html =~ "\ntest10\n"
+      refute html =~ "\ntest1\n"
     end
 
     test "pagination, page 2", %{conn: conn, user: user} do
@@ -67,10 +67,10 @@ test "pagination, page 2", %{conn: conn, user: user} do
 
       html = html_response(conn, 200)
 
-      assert html =~ ">test1<"
-      assert html =~ ">test10<"
-      refute html =~ ">test20<"
-      refute html =~ ">test29<"
+      assert html =~ "\ntest1\n"
+      assert html =~ "\ntest10\n"
+      refute html =~ "\ntest20\n"
+      refute html =~ "\ntest29\n"
     end
 
     test "does not require authentication on non-federating instances", %{
@@ -104,7 +104,7 @@ test "single notice page", %{conn: conn, user: user} do
       conn = get(conn, "/notice/#{activity.id}")
 
       html = html_response(conn, 200)
-      assert html =~ "<header>"
+      assert html =~ "<div class=\"panel conversation\">"
       assert html =~ user.nickname
       assert html =~ "testing a thing!"
     end