💄 add avatar, author and profile to social media messages closes #5, #6

McPringle · Mar 31, 2024 · fc1c943 · fc1c943
1 parent 0fb93be
commit fc1c943
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/frontend/themes/apus/views/message-view.css b/frontend/themes/apus/views/message-view.css
@@ -31,6 +31,15 @@
     display: none;
 }
 
+.message-view header .author-container {
+    display: inline-block;
+    margin-left: var(--lumo-space-s);
+}
+
+.message-view header .author {
+    font-weight: bold;
+}
+
 .message-view .datetime {
     font-size: var(--lumo-font-size-xs);
     font-style: italic;

diff --git a/src/main/java/swiss/fihlon/apus/social/Message.java b/src/main/java/swiss/fihlon/apus/social/Message.java
@@ -23,7 +23,7 @@
 import java.util.List;
 
 public record Message(@NotNull String id, @NotNull LocalDateTime date,
-                      @NotNull String author, @NotNull String avatar,
+                      @NotNull String author, @NotNull String avatar, @NotNull String profile,
                       @NotNull String html, @NotNull List<String> images,
                       boolean isReply, boolean isSensitive)
         implements Comparable<Message> {

diff --git a/src/main/java/swiss/fihlon/apus/social/mastodon/MastodonAPI.java b/src/main/java/swiss/fihlon/apus/social/mastodon/MastodonAPI.java
@@ -69,13 +69,20 @@ private Message convertToMessage(@NotNull final Status status) {
         final LocalDateTime date = LocalDateTime.ofInstant(instant, ZoneId.systemDefault());
         final String author = account == null ? "" : account.getDisplayName();
         final String avatar = account == null ? "" : account.getAvatar();
+        final String profile = account == null ? "" : getProfile(account);
         final String html = status.getContent();
         final List<String> images = getImages(status.getMediaAttachments());
         final String inReplyToId = status.getInReplyToId();
         final boolean isReply = inReplyToId != null && !inReplyToId.isBlank();
         final boolean isSensitive = status.isSensitive();
 
-        return new Message(id, date, author, avatar, html, images, isReply, isSensitive);
+        return new Message(id, date, author, avatar, profile, html, images, isReply, isSensitive);
+    }
+
+    @NotNull
+    private String getProfile(@NotNull final Account account) {
+        final var profile = account.getAcct();
+        return profile.contains("@") ? profile : profile.concat("@").concat(instance);
     }
 
     private List<String> getImages(@NotNull final List<MediaAttachment> mediaAttachments) {

diff --git a/src/main/java/swiss/fihlon/apus/ui/view/MessageView.java b/src/main/java/swiss/fihlon/apus/ui/view/MessageView.java
@@ -21,8 +21,11 @@
 import com.vaadin.flow.component.Html;
 import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.avatar.Avatar;
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Footer;
+import com.vaadin.flow.component.html.Header;
 import com.vaadin.flow.component.html.Image;
 import org.jetbrains.annotations.NotNull;
 import org.jsoup.Jsoup;
@@ -37,11 +40,23 @@ public final class MessageView extends Div {
 
     public MessageView(@NotNull final Message message) {
         addClassName("message-view");
+        add(createHeaderComponent(message));
         add(createTextComponent(message));
         add(createImageComponents(message));
         add(createDateTimeComponent(message));
     }
 
+    @NotNull Component createHeaderComponent(@NotNull final Message message) {
+        final var avatar = new Avatar(message.author(), message.avatar());
+        final var author = new Div(new Text(message.author()));
+        author.addClassName("author");
+        final var profile = new Div(new Text(message.profile()));
+        profile.addClassName("profile");
+        final var authorContainer = new Div(author, profile);
+        authorContainer.addClassName("author-container");
+        return new Header(avatar, authorContainer);
+    }
+
     @NotNull
     private Component createTextComponent(@NotNull final Message message) {
         final String messageText = Jsoup.parse(message.html()).text();
@@ -64,7 +79,7 @@ private Component[] createImageComponents(@NotNull final Message message) {
 
     @NotNull
     private Component createDateTimeComponent(@NotNull final Message message) {
-        final var dateTimeComponent = new Div();
+        final var dateTimeComponent = new Footer();
         dateTimeComponent.addClassName("datetime");
         final var prettyTime = new PrettyTime(UI.getCurrent().getLocale());
         dateTimeComponent.add(new Text(prettyTime.format(message.date())));