flare/data/resources/ui/message_item.blp

using Gtk 4.0;
using Adw 1;

menu message-menu {
  section {
    item {
      custom: "emoji-picker";
    }
  }
  section {
    item {
      label: _("Reply");
      action: "msg.reply";
      verb-icon: "mail-reply-sender-symbolic";
      icon: "mail-reply-sender-symbolic";
    }

    item {
      label: _("Delete");
      action: "msg.delete";
      verb-icon: "user-trash-symbolic";
      icon: "user-trash-symbolic";
      hidden-when: "action-disabled";
    }

    item {
      label: _("Copy");
      action: "msg.copy";
      verb-icon: "edit-copy-symbolic";
      icon: "edit-copy-symbolic";

    }
  }
  section {
    item {
      label: _("Save as…");
      action: "msg.download";
      verb-icon: "document-save-symbolic";
      icon: "document-save-symbolic";
      hidden-when: "action-disabled";

    }
    item {
      label: _("Open with…");
      action: "msg.open";
      verb-icon: "document-open-symbolic";
      icon: "document-open-symbolic";
      hidden-when: "action-disabled";
    }
  }
}

template $FlMessageItem : $ContextMenuBin {
  styles [
    "message-item",
  ]

  visible: bind $not(template.message as <$FlTextMessage>.is-deleted) as <bool>;

  Box {
    spacing: 12;

    // Avatar (Not self)
    Adw.Avatar avatar {
      styles [
        "avatar-other",
      ]
      text: bind template.message as <$FlTextMessage>.sender as <$FlContact>.title;
      show-initials: true;
      valign: start;
      size: 32;
    }

    Box {
      orientation: vertical;

      Box message_bubble {
        orientation: vertical;
        overflow: hidden;
        spacing: 2;

        styles [
          "message-bubble",
        ]

        // Header
        Box header {
          orientation: horizontal;

          // Name
          Label {
            styles [
              "heading",
            ]

            label: bind template.message as <$FlTextMessage>.sender as <$FlContact>.title;
            hexpand: true;
            halign: start;
            ellipsize: end;
            margin-end: 15;
          }
        }

        // Quote
        Box quote {
          styles [
            "quote",
          ]

          visible: bind $is_some(template.message as <$FlTextMessage>.quote) as <bool>;
          Box {
            orientation: vertical;

            Label {
              styles [
                "heading",
              ]

              label: bind template.message as <$FlTextMessage>.quote as <$FlTextMessage>.sender as <$FlContact>.title;
              hexpand: true;
              halign: start;
            }

            Label {
              ellipsize: end;
              lines: 2;
              wrap: true;
              xalign: 0;
              wrap-mode: word_char;
              justify: left;
              vexpand: false;
              valign: start;
              hexpand: true;
              halign: start;
              use-markup: true;

              label: bind $markup_urls(template.message as <$FlTextMessage>.quote as <$FlTextMessage>.body) as <string>;
              attributes: bind template.message as <$FlTextMessage>.message-attributes;
            }
          }
        }     

        Box box_attachments {
            orientation: vertical;
            styles ["not-loaded"]
            Overlay media_overlay {
              styles ["media-overlay"]
              overflow: hidden;
              visible:false;
              // TODO: Switch to OriGroup
              child: Box media_group {
                styles ["media-group"]
                overflow: hidden;
                orientation: vertical;
              };

              [overlay]
              Button download_btn{
                  halign: center;
                  valign: center;
                  height-request: 64;
                  width-request: 64;
                  visible: bind template.shows-media-loading as <bool>;
                  styles [
                    "osd",
                    "large-icons",
                    "circular"
                    ]
                  clicked => $load_media() swapped;
                  icon-name: "document-save-symbolic";
              }

            }
        }

        // Message Box
        Box message-box {
          hexpand-set: true;
          orientation: vertical;

          Label label_message {
            styles [
                "message-text",
            ]
            wrap: true;
            xalign: 0;
            wrap-mode: word_char;
            justify: left;
            vexpand: false;
            valign: start;
            hexpand: true;
            halign: start;
            use-markup: true;

            label: bind $markup_urls(template.message as <$FlTextMessage>.body) as <string>;
            attributes: bind template.message as <$FlTextMessage>.message-attributes;
            visible: bind $not_empty(template.message as <$FlTextMessage>.body) as <bool>;
          }

          // Timestamp label
          Label timestamp {
            styles [
              "dim-label",
              "caption",
              "timestamp",
            ]

            label: bind $format_timestamp(template.message as <$FlTextMessage>.timestamp) as <string>;
            justify: right;
            vexpand: true;
            valign: end;
            hexpand: true;
            halign: end;
          }
        }

        // Pop-Down
        PopoverMenu msg_menu {
          has-arrow: false;
          menu-model: message-menu;

          [emoji-picker]
          $FlEmojiPicker {
            reacted => $handle_react() swapped;
            btn-emoji-clicked => $open_emoji_picker() swapped;
          }
        }

        EmojiChooser emoji_chooser {
          emoji-picked => $handle_react() swapped;
        }

      }

      // Reactions
      Label reactions {
        styles [
          "reaction",
        ]

        label: bind template.message as <$FlTextMessage>.reactions;
        visible: bind template.has-reaction;
        wrap-mode: word;
        justify: left;
        vexpand: false;
        valign: start;
        hexpand: true;
        halign: start;
      }
    }
  }
}