Added canonical title diff

pages/editor/mal.go

@@ -59,6 +59,15 @@ func CompareMAL(ctx *aero.Context) string {
 		malAnime := obj.(*mal.Anime)
 		var differences []utils.AnimeDiff
 
+		// Compare titles
+		if anime.Title.Canonical != malAnime.Title {
+			differences = append(differences, &utils.AnimeTitleDiff{
+				TitleA: anime.Title.Canonical,
+				TitleB: malAnime.Title,
+			})
+		}
+
+		// Compare genres
 		sumA := uint64(0)
 
 		for _, genre := range anime.Genres {
@@ -84,6 +93,7 @@ func CompareMAL(ctx *aero.Context) string {
 			})
 		}
 
+		// Add if there were any differences
 		if len(differences) > 0 {
 			comparisons = append(comparisons, &utils.MALComparison{
 				Anime:       anime,

pages/editor/mal.pixy

@@ -1,6 +1,6 @@
 component CompareMAL(comparisons []*utils.MALComparison, user *arn.User)
 	EditorTabs
-	h1.mountable MAL Comparison
+	h1.mountable MAL comparison
 
 	.data-comparisons
 		each comparison in comparisons
@@ -9,9 +9,11 @@ component CompareMAL(comparisons []*utils.MALComparison, user *arn.User)
 					.data-comparison-image-container
 						img.data-comparison-image.lazy(data-src=comparison.Anime.Image("small"), data-webp="true", alt=comparison.Anime.Title.ByUser(user))
 					
-					.data-comparison-titles
-						a.data-comparison-title(href=comparison.Anime.Link(), target="_blank")= comparison.Anime.Title.Canonical
-						a.data-comparison-title(href=comparison.MALAnime.URL, target="_blank")= comparison.MALAnime.Title
+					.data-comparison-title
+						a(href=comparison.Anime.Link(), target="_blank")= comparison.Anime.Title.Canonical
+						.spacer
+						a(href=comparison.MALAnime.URL, target="_blank")
+							RawIcon("external-link")
 
 				.data-comparison-differences
 					each difference in comparison.Differences

pages/editor/mal.scarlet

@@ -8,6 +8,7 @@
 	vertical
 	padding 0.5rem 0.75rem
 	margin 0.5rem
+	border-left 3px solid ui-border-color
 
 .data-comparison-header
 	horizontal
@@ -18,20 +19,21 @@
 .data-comparison-image
 	anime-list-item-image
 
-.data-comparison-titles
-	vertical
-
 .data-comparison-title
-	line-height 1.5em
+	horizontal
+	font-size 1.2rem
+	flex 1
+	align-items center
 
 .data-comparison-differences
 	vertical
+	margin-top 0.5rem
 
 .data-comparison-difference
 	vertical
 	ui-element
 	padding 0.5rem 0.75rem
-	margin 0.5rem 0
+	margin-bottom 0.5rem
 
 .data-comparison-difference-title
 	font-weight bold