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

utils/AnimeGenresDiff.go

@@ -0,0 +1,24 @@
+package utils
+
+import "strings"
+
+// AnimeGenresDiff describes differing genres.
+type AnimeGenresDiff struct {
+	GenresA []string
+	GenresB []string
+}
+
+// String returns the description.
+func (diff *AnimeGenresDiff) String() string {
+	return "Genres are different"
+}
+
+// DetailsA shows the details for the first anime.
+func (diff *AnimeGenresDiff) DetailsA() string {
+	return strings.Join(diff.GenresA, ", ")
+}
+
+// DetailsB shows the details for the second anime.
+func (diff *AnimeGenresDiff) DetailsB() string {
+	return strings.Join(diff.GenresB, ", ")
+}

utils/AnimeTitleDiff.go

@@ -0,0 +1,22 @@
+package utils
+
+// AnimeTitleDiff describes differing titles.
+type AnimeTitleDiff struct {
+	TitleA string
+	TitleB string
+}
+
+// String returns the description.
+func (diff *AnimeTitleDiff) String() string {
+	return "Titles are different"
+}
+
+// DetailsA shows the details for the first anime.
+func (diff *AnimeTitleDiff) DetailsA() string {
+	return diff.TitleA
+}
+
+// DetailsB shows the details for the second anime.
+func (diff *AnimeTitleDiff) DetailsB() string {
+	return diff.TitleB
+}

utils/MALComparison.go

@@ -1,35 +1,18 @@
 package utils
 
 import (
-	"strings"
-
 	"github.com/animenotifier/arn"
 	"github.com/animenotifier/mal"
 )
 
+// AnimeDiff describes a difference between two anime.
 type AnimeDiff interface {
 	String() string
 	DetailsA() string
 	DetailsB() string
 }
 
-type AnimeGenresDiff struct {
-	GenresA []string
-	GenresB []string
-}
-
-func (diff *AnimeGenresDiff) String() string {
-	return "Genres are different"
-}
-
-func (diff *AnimeGenresDiff) DetailsA() string {
-	return strings.Join(diff.GenresA, ", ")
-}
-
-func (diff *AnimeGenresDiff) DetailsB() string {
-	return strings.Join(diff.GenresB, ", ")
-}
-
+// MALComparison encapsulates the difference between an ARN anime and a MAL anime.
 type MALComparison struct {
 	Anime       *arn.Anime
 	MALAnime    *mal.Anime