✨ Finished the design of the quote page and added the like action.

mixins/TabLikeQuote.pixy

@@ -0,0 +1,16 @@
+// This should be made abstract for every Likeable so we avoid repeating ourselves but I'm unsure on
+// how to do it
+component TabLikeQuote(label string, icon string, quote *arn.Quote, user *arn.User)
+	if user == nil
+		.tab.action(aria-label=label, title="Login to like this quote")
+			Icon(icon)
+			span.tab-text= label
+	else
+		if quote.LikedBy(user.ID)
+			.tab.action(data-api="/api" + quote.Link(), data-action="unlike", data-trigger="click", aria-label=label, title="Click to unlike this quote")
+				Icon(icon)
+				span.tab-text= label
+		else
+			.tab.action(data-api="/api" + quote.Link(), data-action="like", data-trigger="click", aria-label=label, title="Click to like this quote")
+				Icon(icon + "-o")
+				span.tab-text= label

pages/quote/quote.pixy

@@ -1,14 +1,59 @@
 component QuotePage(quote *arn.Quote, character *arn.Character, user *arn.User)
 	QuoteTabs(quote, user)
 
-	.quote-page
+	.quote-full-page
-		.quote-header
+
-			h1.quote-name.mountable= quote.Description
+		.quote-main-column
-			h3.mountable Characters
+			QuoteMainColumn(quote, user)
-			.quote-character.mountable
+		.quote-side-column
-				Character(character)
+			QuoteSideColumn(quote, user)
+
+component QuoteMainColumn(quote *arn.Quote, user *arn.User)
+	.widget-form
+		QuoteContent(quote)
+
+	.footer.mountable
+		if quote.EditedBy != ""
+			span Edited 
+			span.utc-date(data-date=quote.Edited)
+			span  by 
+			a.ajax(href=quote.EditedByUser().Link())= quote.EditedByUser().Nick
+		else
+			span Posted 
+			span.utc-date(data-date=quote.Created)
+			span  by 
+			a.ajax(href=quote.Creator().Link())= quote.Creator().Nick
+			span .
+
+component QuoteSideColumn(quote *arn.Quote, user *arn.User)
+	QuoteInformation(quote, user)
+
+component QuoteInformation(quote *arn.Quote, user *arn.User)
+	section.quote-section.mountable
+		h3.quote-section-name Information
+		table.quote-info-table
+			if quote.Anime() != nil
+				tr.mountable(data-mountable-type="info")
+					td.quote-info-key Anime:
+					td.quote-info-value
+						QuoteAnime(quote.Anime(), user)
+
+			if quote.Episode != 0
+				tr.mountable(data-mountable-type="info")
+					td.quote-info-key Episode:
+					td.quote-info-value= quote.Episode
+
+			if quote.Time != 0
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Time:
+					td.anime-info-value= strconv.Itoa(quote.Time) + " min"
 
 component QuoteTabs(quote *arn.Quote, user *arn.User)
 	.tabs
+		TabLikeQuote(strconv.Itoa(len(quote.Likes)), "heart", quote, user)
 		Tab("Quote", "building", quote.Link())
 		Tab("Edit", "pencil", quote.Link() + "/edit")
+
+component QuoteAnime(anime *arn.Anime, user *arn.User)
+	a.quote-anime-list-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user))
+		img.quote-anime-list-item-image.lazy(data-src=anime.Image("small"), data-webp="true", alt=anime.Title.ByUser(user))

pages/quote/quote.scarlet

@@ -1,36 +1,50 @@
-.quote-page
+quote-full-page
 	vertical
 
-.quote-header
+.quote-main-column
 	vertical
+	flex 1
 
-.quote-sidebar
+.quote-side-column
 	sidebar
 
 > 1250px
-	.quote-page
+	.quote-full-page
 		horizontal
 
-	.quote-sidebar
+	.quote-side-column
 		sidebar-medium
 
 > 1400px
-	.quote-sidebar
+	.quote-side-column
 		sidebar-big
 
-.quote-name,
+.quote-media
-.quote-description
+	iframe
-	text-align left
-
-.quote-location
 		width 100%
-	height 300px
 
-.quote-character
+.quote-info-table
+	margin 0
+// width 100%
+// max-width 600px
+
+.quote-info-value
+	text-align right
+
+.quote-section
+	margin-top 1rem
+
+	:first-child
+		margin-top 0 !important
+
+.quote-section-name
+	font-weight bold
+
+.quote-anime-list
 	horizontal-wrap
 
-.quote-character-item
+.quote-anime-list-item
 	anime-mini-item
 
-.quote-character-item-image
+.quote-anime-list-item-image
 	anime-mini-item-image