Feat: display boosts on public profile

web/source/css/status.css

@@ -41,6 +41,12 @@ main {
 		text-decoration: none;
 	}
 
+	.boosted {
+		padding: 0 0.75rem 0.75rem;
+		color: var(--fg-reduced);
+		font-weight: bold;
+	}
+
 	.status-header > address {
 		/*
 			Avoid stretching so wide that user
@@ -59,17 +65,27 @@ main {
 				"avatar author-strap author-strap";
 			gap: 0 0.5rem;
 			font-style: normal;
-	
+
 			.avatar {
 				grid-area: avatar;
 				height: 3.5rem;
 				width: 3.5rem;
 				object-fit: cover;
-	
+				position: relative;
+
 				border: 0.15rem solid $avatar-border;
 				border-radius: $br;
 				overflow: hidden; /* hides corners from img overflowing */
-	
+
+				.boosted-avatar {
+					height: 50%;
+					width: 50%;
+					z-index: 10;
+					position: absolute;
+					bottom: 0;
+					inset-inline-end: 0;
+				}
+
 				img {
 					height: 100%;
 					width: 100%;
@@ -77,7 +93,7 @@ main {
 					background: $bg;
 				}
 			}
-	
+
 			.author-strap {
 				grid-area: author-strap;
 				display: grid;
@@ -87,7 +103,7 @@ main {
 					"display display"
 					"user    user";
 				gap: 0 0.5rem;
-	
+
 				.displayname, .username {
 					justify-self: start;
 					align-self: start;
@@ -95,12 +111,12 @@ main {
 					font-size: 1rem;
 					line-height: 1.3rem;
 				}
-			
+
 				.displayname {
 					grid-area: display;
 					font-weight: bold;
 				}
-		
+
 				.username {
 					grid-area: user;
 					color: $link-fg;
@@ -200,34 +216,34 @@ main {
 		.poll {
 			background-color: $gray2;
 			z-index: 2;
-			
+
 			display: flex;
 			flex-direction: column;
 			border-radius: $br;
 			padding: 0.5rem;
 			margin: 0;
 			gap: 1rem;
-	
+
 			.poll-options {
 				margin: 0;
 				padding: 0;
 				display: flex;
 				flex-direction: column;
 				gap: 1rem;
-	
+
 				.poll-option {
 					display: flex;
 					flex-direction: column;
 					gap: 0.1rem;
-		
+
 					label {
 						cursor: default;
 					}
-		
+
 					meter {
 						width: 100%;
 					}
-		
+
 					.poll-vote-summary {
 						display: flex;
 						flex-wrap: wrap;
@@ -236,7 +252,7 @@ main {
 					}
 				}
 			}
-	
+
 			.poll-info {
 				background-color: $gray4;
 				display: flex;
@@ -245,7 +261,7 @@ main {
 				border-radius: $br-inner;
 				padding: 0.25rem;
 				gap: 0.25rem;
-	
+
 				span {
 					justify-self: center;
 					white-space: nowrap;
@@ -301,12 +317,12 @@ main {
 					width: 100%;
 					z-index: 3;
 					overflow: hidden;
-					
+
 					display: grid;
 					padding: 1rem;
 					grid-template-columns: 1fr auto 1fr;
 					grid-template-rows: 1fr 1fr;
-					grid-template-areas: 
+					grid-template-areas:
 						"eye sensitive ."
 						".   sensitive  .";
 
@@ -369,7 +385,7 @@ main {
 						height: 100%;
 						padding: 0.8rem;
 						border: 0.2rem dashed $white2;
-						
+
 						display: flex;
 						flex-direction: column;
 						align-items: center;
@@ -518,4 +534,4 @@ main {
 	.plyr {
 		max-height: 100%;
 	}
-}
+}

web/template/profile.tmpl

@@ -247,6 +247,16 @@
                         class="status expanded"
                         {{- includeAttr "status_attributes.tmpl" . | indentAttr 6  }}
                     >
+                        {{- if .ReblogAccount }}
+                        <div class="boosted text-cutoff">
+                            <i class="fa fa-retweet" aria-hidden="true"></i>&nbsp
+                            {{- if $.account.DisplayName }}
+                            {{- emojify $.account.Emojis (escape $.account.DisplayName) }} boosted
+                            {{- else }}
+                            {{- $.account.Username }} boosted
+                            {{- end }}
+                        </div>
+                        {{- end }}
                         {{- include "status.tmpl" . | indent 6 }}
                     </article>
                     {{- end }}

web/template/status_header.tmpl

@@ -48,6 +48,16 @@
                 alt="Avatar for {{ .Username -}}"
                 title="Avatar for {{ .Username -}}"
             >
+            {{ if $.ReblogAccount }}
+            <img
+                class="boosted-avatar"
+                src="{{ $.ReblogAccount.Avatar }}"
+                alt="Avatar for {{ $.ReblogAccount.Username -}}"
+                title="Avatar for {{ $.ReblogAccount.Username -}}"
+            >
+            {{ end }}
+
+
         </picture>
         <div class="author-strap">
             <span class="displayname text-cutoff">
@@ -63,4 +73,4 @@
         <span class="sr-only">(open profile)</span>
     </a>
 </address>
-{{- end }}
+{{- end }}