From 334764f5ca98fb610cdb7c21ad7d9c4f710de474 Mon Sep 17 00:00:00 2001
From: Aigamo <51428094+ycanardeau@users.noreply.github.com>
Date: Mon, 4 Jul 2022 23:43:29 +1000
Subject: [PATCH] Convert song edit to React

---
 .../Queries/SongQueriesDatabaseTests.cs       |  19 +-
 .../DataAccess/SongQueriesTests.cs            |  46 +-
 .../ReleaseEventForApiContract.cs             |  17 +-
 .../Songs/SongForEditForApiContract.cs        | 176 ++++
 .../UseCases/SongForEditContract.cs           |   1 +
 VocaDbModel/Database/Queries/SongQueries.cs   |  10 +-
 .../Globalization/EnglishTranslatedString.cs  |  15 +-
 VocaDbModel/Domain/Songs/Song.cs              |   6 +
 .../Controllers/Api/SongApiController.cs      |  73 +-
 VocaDbWeb/Controllers/SongController.cs       |  55 +-
 VocaDbWeb/Scripts/Bootstrap/Accordion.tsx     |  98 ++
 VocaDbWeb/Scripts/Bootstrap/AccordionBody.tsx |  56 ++
 .../Scripts/Bootstrap/AccordionButton.tsx     | 107 ++
 .../Scripts/Bootstrap/AccordionCollapse.tsx   |  64 ++
 .../Scripts/Bootstrap/AccordionContext.ts     |  29 +
 .../Scripts/Bootstrap/AccordionHeader.tsx     |  58 ++
 VocaDbWeb/Scripts/Bootstrap/AccordionItem.tsx |  71 ++
 .../Scripts/Bootstrap/AccordionItemContext.ts |  13 +
 .../Shared/Partials/Knockout/DropdownList.tsx |  35 +
 .../Shared/Partials/Song/SongLink.tsx         |   4 +
 .../Song/Partials/ArtistForSongEdit.tsx       | 107 ++
 .../Song/Partials/LyricsForSongEdit.tsx       | 201 ++++
 .../Scripts/Components/Song/SongDetails.tsx   |   4 +-
 .../Scripts/Components/Song/SongEdit.tsx      | 942 ++++++++++++++++++
 .../Scripts/Components/Song/SongRoutes.tsx    |   2 +
 .../DataContracts/Song/SongForEditContract.ts |  30 +-
 VocaDbWeb/Scripts/Models/LoginManager.ts      |   4 +
 VocaDbWeb/Scripts/Models/Songs/SongType.ts    |  12 -
 .../Scripts/Repositories/SongRepository.ts    |  16 +
 .../Scripts/Stores/PVs/PVListEditStore.ts     |  23 +-
 .../Stores/Song/LyricsForSongListEditStore.ts | 112 +++
 .../Scripts/Stores/Song/SongEditStore.ts      | 441 ++++++++
 32 files changed, 2712 insertions(+), 135 deletions(-)
 create mode 100644 VocaDbModel/DataContracts/Songs/SongForEditForApiContract.cs
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/Accordion.tsx
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionBody.tsx
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionButton.tsx
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionCollapse.tsx
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionContext.ts
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionHeader.tsx
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionItem.tsx
 create mode 100644 VocaDbWeb/Scripts/Bootstrap/AccordionItemContext.ts
 create mode 100644 VocaDbWeb/Scripts/Components/Song/Partials/ArtistForSongEdit.tsx
 create mode 100644 VocaDbWeb/Scripts/Components/Song/Partials/LyricsForSongEdit.tsx
 create mode 100644 VocaDbWeb/Scripts/Components/Song/SongEdit.tsx
 create mode 100644 VocaDbWeb/Scripts/Stores/Song/LyricsForSongListEditStore.ts
 create mode 100644 VocaDbWeb/Scripts/Stores/Song/SongEditStore.ts

diff --git a/Tests/DatabaseTests/Queries/SongQueriesDatabaseTests.cs b/Tests/DatabaseTests/Queries/SongQueriesDatabaseTests.cs
index e52f0c365f..3643a830b1 100644
--- a/Tests/DatabaseTests/Queries/SongQueriesDatabaseTests.cs
+++ b/Tests/DatabaseTests/Queries/SongQueriesDatabaseTests.cs
@@ -3,6 +3,7 @@
 using VocaDb.Model.Database.Queries;
 using VocaDb.Model.Database.Repositories;
 using VocaDb.Model.DataContracts.ReleaseEvents;
+using VocaDb.Model.DataContracts.Songs;
 using VocaDb.Model.DataContracts.UseCases;
 using VocaDb.Model.DataContracts.Users;
 using VocaDb.Model.Domain.Globalization;
@@ -47,10 +48,11 @@ private SongQueries Queries(ISongRepository repository)
 				new VdbConfigManager(),
 				new EntrySubTypeNameFactory(),
 				new FollowedArtistNotifier(new FakeEntryLinkFactory(), new FakeUserMessageMailer(), new EnumTranslations(), new EntrySubTypeNameFactory()),
-				new FakeDiscordWebhookNotifier());
+				new FakeDiscordWebhookNotifier()
+			);
 		}
 
-		private async Task<SongForEditContract> Update(SongForEditContract contract)
+		private async Task<SongForEditForApiContract> Update(SongForEditForApiContract contract)
 		{
 			return await _context.RunTestAsync(async repository =>
 			{
@@ -71,7 +73,7 @@ public async Task Update_ReleaseEvent_Remove()
 			Db.ReleaseEvent.AllSongs.Contains(Db.Song).Should().BeTrue("Release event has song");
 
 			// Act
-			var contract = new SongForEditContract(Db.Song, ContentLanguagePreference.English)
+			var contract = new SongForEditForApiContract(Db.Song, ContentLanguagePreference.English, _userContext)
 			{
 				ReleaseEvent = null
 			};
@@ -97,10 +99,15 @@ await _context.RunTestAsync(async repository =>
 			{
 				var queries = Queries(repository);
 
-				var newEvent = repository.HandleTransaction(ctx => new ReleaseEventContract(ctx.Save(CreateEntry.ReleaseEvent("Mikumas")), ContentLanguagePreference.English, false));
+				var newEvent = repository.HandleTransaction(ctx => new ReleaseEventForApiContract(
+					rel: ctx.Save(CreateEntry.ReleaseEvent("Mikumas")),
+					languagePreference: ContentLanguagePreference.English,
+					fields: ReleaseEventOptionalFields.None,
+					thumbPersister: null
+				));
 
 				// Act
-				var contract = new SongForEditContract(Db.Song, ContentLanguagePreference.English)
+				var contract = new SongForEditForApiContract(Db.Song, ContentLanguagePreference.English, _userContext)
 				{
 					ReleaseEvent = newEvent
 				};
@@ -118,7 +125,7 @@ await _context.RunTestAsync(async repository =>
 		[TestCategory(TestCategories.Database)]
 		public async Task Update_Lyrics()
 		{
-			var contract = new SongForEditContract(Db.Song2, ContentLanguagePreference.English)
+			var contract = new SongForEditForApiContract(Db.Song2, ContentLanguagePreference.English, _userContext)
 			{
 				Lyrics = new[] { CreateEntry.LyricsForSongContract(TranslationType.Original) }
 			};
diff --git a/Tests/Web/Controllers/DataAccess/SongQueriesTests.cs b/Tests/Web/Controllers/DataAccess/SongQueriesTests.cs
index 6e43b6dd72..a6bece489a 100644
--- a/Tests/Web/Controllers/DataAccess/SongQueriesTests.cs
+++ b/Tests/Web/Controllers/DataAccess/SongQueriesTests.cs
@@ -73,9 +73,9 @@ private Task<NewSongCheckResultContract> CallFindDuplicates(string[] anyName = n
 			return (result.created, report);
 		}
 
-		private SongForEditContract EditContract()
+		private SongForEditForApiContract EditContract()
 		{
-			return new SongForEditContract(_song, ContentLanguagePreference.English);
+			return new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 		}
 
 		private void AssertHasArtist(Song song, Artist artist, ArtistRoles? roles = null)
@@ -783,9 +783,9 @@ public async Task Revert()
 		{
 			_user.GroupId = UserGroupId.Moderator;
 			_permissionContext.RefreshLoggedUser(_repository);
-			SongForEditContract Contract()
+			SongForEditForApiContract Contract()
 			{
-				return new SongForEditContract(_song, ContentLanguagePreference.English);
+				return new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 			}
 
 			await _queries.UpdateBasicProperties(Contract());
@@ -813,7 +813,7 @@ SongForEditContract Contract()
 		[TestMethod]
 		public async Task Update_Names()
 		{
-			var contract = new SongForEditContract(_song, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 			contract.Names.First().Value = "Replaced name";
 			contract.UpdateNotes = "Updated song";
 
@@ -849,7 +849,7 @@ public async Task Update_Artists()
 			foreach (var name in newSong.Names)
 				_repository.Save(name);
 
-			var contract = new SongForEditContract(newSong, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(newSong, ContentLanguagePreference.English, _permissionContext);
 			contract.Artists = new[] {
 				CreateArtistForSongContract(artistId: _producer.Id),
 				CreateArtistForSongContract(artistId: _vocalist.Id),
@@ -878,7 +878,7 @@ public async Task Update_Artists_Notify()
 			_repository.Save(_user2.AddArtist(_vocalist2));
 			_repository.Save(_vocalist2);
 
-			var contract = new SongForEditContract(_song, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 			contract.Artists = contract.Artists.Concat(new[] { CreateArtistForSongContract(_vocalist2.Id) }).ToArray();
 
 			await _queries.UpdateBasicProperties(contract);
@@ -896,7 +896,7 @@ public async Task Update_Artists_RemoveDeleted()
 			_repository.Save(_song.AddArtist(_vocalist2));
 			_vocalist2.Deleted = true;
 
-			var contract = new SongForEditContract(_song, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 
 			await _queries.UpdateBasicProperties(contract);
 
@@ -921,7 +921,7 @@ public async Task Update_Lyrics()
 		[TestMethod]
 		public async Task Update_PublishDate_From_PVs()
 		{
-			var contract = new SongForEditContract(_song, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 			contract.PVs = new[] {
 				CreateEntry.PVContract(id: 1, pvId: "hoLu7c2XZYU", pvType: PVType.Reprint, publishDate: new DateTime(2015, 3, 9, 10, 0, 0)),
 				CreateEntry.PVContract(id: 2, pvId: "mikumikumiku", pvType: PVType.Original, publishDate: new DateTime(2015, 4, 9, 16, 0, 0))
@@ -937,9 +937,15 @@ public async Task Update_PublishDate_From_PVs()
 		[TestMethod]
 		public async Task Update_Weblinks()
 		{
-			var contract = new SongForEditContract(_song, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 			contract.WebLinks = new[] {
-				new WebLinkContract("http://vocadb.net", "VocaDB", WebLinkCategory.Reference, disabled: false)
+				new WebLinkForApiContract
+				{
+					Url = "http://vocadb.net",
+					Description = "VocaDB",
+					Category = WebLinkCategory.Reference,
+					Disabled = false,
+				}
 			};
 
 			contract = await _queries.UpdateBasicProperties(contract);
@@ -951,9 +957,15 @@ public async Task Update_Weblinks()
 		[TestMethod]
 		public async Task Update_Weblinks_SkipWhitespace()
 		{
-			var contract = new SongForEditContract(_song, ContentLanguagePreference.English);
+			var contract = new SongForEditForApiContract(_song, ContentLanguagePreference.English, _permissionContext);
 			contract.WebLinks = new[] {
-				new WebLinkContract(" ", "VocaDB", WebLinkCategory.Reference, disabled: false)
+				new WebLinkForApiContract
+				{
+					Url = " ",
+					Description = "VocaDB",
+					Category = WebLinkCategory.Reference,
+					Disabled = false,
+				}
 			};
 
 			contract = await _queries.UpdateBasicProperties(contract);
@@ -968,7 +980,7 @@ public async Task Update_Weblinks_SkipWhitespace()
 		public async Task Update_ReleaseEvent_ExistingEvent_Selected()
 		{
 			var contract = EditContract();
-			contract.ReleaseEvent = new ReleaseEventContract(_releaseEvent, ContentLanguagePreference.English);
+			contract.ReleaseEvent = new ReleaseEventForApiContract(_releaseEvent, ContentLanguagePreference.English, ReleaseEventOptionalFields.None, thumbPersister: null);
 
 			await _queries.UpdateBasicProperties(contract);
 
@@ -982,7 +994,7 @@ public async Task Update_ReleaseEvent_ExistingEvent_Selected()
 		public async Task Update_ReleaseEvent_ExistingEvent_MatchByName()
 		{
 			var contract = EditContract();
-			contract.ReleaseEvent = new ReleaseEventContract { Name = _releaseEvent.DefaultName };
+			contract.ReleaseEvent = new ReleaseEventForApiContract { Name = _releaseEvent.DefaultName };
 
 			await _queries.UpdateBasicProperties(contract);
 
@@ -993,7 +1005,7 @@ public async Task Update_ReleaseEvent_ExistingEvent_MatchByName()
 		public async Task Update_ReleaseEvent_NewEvent_Standalone()
 		{
 			var contract = EditContract();
-			contract.ReleaseEvent = new ReleaseEventContract { Name = "Comiket 40" };
+			contract.ReleaseEvent = new ReleaseEventForApiContract { Name = "Comiket 40" };
 
 			await _queries.UpdateBasicProperties(contract);
 
@@ -1008,7 +1020,7 @@ public async Task Update_ReleaseEvent_NewEvent_SeriesEvent()
 		{
 			var series = _repository.Save(CreateEntry.EventSeries("Comiket"));
 			var contract = EditContract();
-			contract.ReleaseEvent = new ReleaseEventContract { Name = "Comiket 40" };
+			contract.ReleaseEvent = new ReleaseEventForApiContract { Name = "Comiket 40" };
 
 			await _queries.UpdateBasicProperties(contract);
 
diff --git a/VocaDbModel/DataContracts/ReleaseEvents/ReleaseEventForApiContract.cs b/VocaDbModel/DataContracts/ReleaseEvents/ReleaseEventForApiContract.cs
index 603f2d2ff7..2f1e90b041 100644
--- a/VocaDbModel/DataContracts/ReleaseEvents/ReleaseEventForApiContract.cs
+++ b/VocaDbModel/DataContracts/ReleaseEvents/ReleaseEventForApiContract.cs
@@ -20,7 +20,13 @@ public class ReleaseEventForApiContract : IReleaseEvent, IEntryBase
 
 		public ReleaseEventForApiContract() { }
 
-		public ReleaseEventForApiContract(ReleaseEvent rel, ContentLanguagePreference languagePreference, ReleaseEventOptionalFields fields, IAggregatedEntryImageUrlFactory thumbPersister)
+#nullable enable
+		public ReleaseEventForApiContract(
+			ReleaseEvent rel,
+			ContentLanguagePreference languagePreference,
+			ReleaseEventOptionalFields fields,
+			IAggregatedEntryImageUrlFactory? thumbPersister
+		)
 		{
 			Category = rel.Category;
 			Date = rel.Date;
@@ -54,7 +60,7 @@ public ReleaseEventForApiContract(ReleaseEvent rel, ContentLanguagePreference la
 				Description = rel.Description;
 			}
 
-			if (thumbPersister != null && fields.HasFlag(ReleaseEventOptionalFields.MainPicture))
+			if (thumbPersister is not null && fields.HasFlag(ReleaseEventOptionalFields.MainPicture))
 			{
 				MainPicture = EntryThumbForApiContract.Create(EntryThumb.Create(rel) ?? EntryThumb.Create(rel.Series), thumbPersister);
 			}
@@ -69,7 +75,7 @@ public ReleaseEventForApiContract(ReleaseEvent rel, ContentLanguagePreference la
 				Series = new ReleaseEventSeriesContract(rel.Series, languagePreference);
 			}
 
-			if (fields.HasFlag(ReleaseEventOptionalFields.SongList) && rel.SongList != null)
+			if (fields.HasFlag(ReleaseEventOptionalFields.SongList) && rel.SongList is not null)
 			{
 				SongList = new SongListBaseContract(rel.SongList);
 			}
@@ -79,7 +85,7 @@ public ReleaseEventForApiContract(ReleaseEvent rel, ContentLanguagePreference la
 				Tags = rel.Tags.ActiveUsages.Select(t => new TagUsageForApiContract(t, languagePreference)).ToArray();
 			}
 
-			if (fields.HasFlag(ReleaseEventOptionalFields.Venue) && rel.Venue != null)
+			if (fields.HasFlag(ReleaseEventOptionalFields.Venue) && rel.Venue is not null)
 			{
 				Venue = new VenueForApiContract(rel.Venue, languagePreference, VenueOptionalFields.None);
 			}
@@ -89,6 +95,7 @@ public ReleaseEventForApiContract(ReleaseEvent rel, ContentLanguagePreference la
 				WebLinks = rel.WebLinks.Select(w => new WebLinkForApiContract(w)).ToArray();
 			}
 		}
+#nullable disable
 
 		/// <summary>
 		/// Comma-separated list of all other names that aren't the display name.
@@ -118,7 +125,7 @@ public ReleaseEventForApiContract(ReleaseEvent rel, ContentLanguagePreference la
 		[DataMember]
 		public DateTime? EndDate { get; init; }
 
-		public bool HasVenueOrVenueName => Venue != null || !string.IsNullOrEmpty(VenueName);
+		public bool HasVenueOrVenueName => Venue is not null || !string.IsNullOrEmpty(VenueName);
 
 		[DataMember]
 		public int Id { get; set; }
diff --git a/VocaDbModel/DataContracts/Songs/SongForEditForApiContract.cs b/VocaDbModel/DataContracts/Songs/SongForEditForApiContract.cs
new file mode 100644
index 0000000000..ada33a29cd
--- /dev/null
+++ b/VocaDbModel/DataContracts/Songs/SongForEditForApiContract.cs
@@ -0,0 +1,176 @@
+using System.Runtime.Serialization;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Converters;
+using VocaDb.Model.DataContracts.Globalization;
+using VocaDb.Model.DataContracts.PVs;
+using VocaDb.Model.DataContracts.ReleaseEvents;
+using VocaDb.Model.Domain;
+using VocaDb.Model.Domain.Globalization;
+using VocaDb.Model.Domain.Security;
+using VocaDb.Model.Domain.Songs;
+
+namespace VocaDb.Model.DataContracts.Songs;
+
+[DataContract(Namespace = Schemas.VocaDb)]
+public sealed record SongForEditForApiContract
+{
+	/// <summary>
+	/// ID of the first album's release event.
+	/// Used for validation warnings.
+	/// </summary>
+	[DataMember]
+	public int? AlbumEventId { get; init; }
+
+	[DataMember]
+	public DateTime? AlbumReleaseDate { get; init; }
+
+	[DataMember]
+	public ArtistForSongContract[] Artists { get; set; }
+
+	[DataMember]
+	public bool CanDelete { get; set; }
+
+	[DataMember]
+	public ContentLanguageSelection DefaultNameLanguage { get; init; }
+
+	[DataMember(EmitDefaultValue = false)]
+	public bool Deleted { get; init; }
+
+	/// <summary>
+	/// Song is on one or more albums
+	/// </summary>
+	[DataMember]
+	public bool HasAlbums { get; init; }
+
+	[DataMember]
+	public int Id { get; init; }
+
+	[DataMember]
+	public int LengthSeconds { get; init; }
+
+	[DataMember]
+	public LyricsForSongContract[] Lyrics { get; set; }
+
+	[DataMember]
+	public int? MaxMilliBpm { get; init; }
+
+	[DataMember]
+	public int? MinMilliBpm { get; init; }
+
+	/// <summary>
+	/// Display name (primary name in selected language, or default language).
+	/// </summary>
+	[DataMember]
+	public string Name { get; init; }
+
+	[DataMember]
+	public LocalizedStringWithIdContract[] Names { get; init; }
+
+	[DataMember]
+	public EnglishTranslatedStringContract Notes { get; init; }
+
+	[DataMember]
+	public SongForApiContract? OriginalVersion { get; init; }
+
+	[DataMember]
+	public DateTime? PublishDate { get; init; }
+
+	[DataMember(Name = "pvs")]
+	public PVContract[] PVs { get; set; }
+
+	[DataMember]
+	public ReleaseEventForApiContract? ReleaseEvent { get; set; }
+
+	[DataMember]
+	[JsonConverter(typeof(StringEnumConverter))]
+	public SongType SongType { get; init; }
+
+	[DataMember]
+	[JsonConverter(typeof(StringEnumConverter))]
+	public EntryStatus Status { get; init; }
+
+	// Required here for validation
+	[DataMember]
+	public int[] Tags { get; init; }
+
+	[DataMember]
+	public string UpdateNotes { get; set; }
+
+	[DataMember]
+	public WebLinkForApiContract[] WebLinks { get; set; }
+
+	public SongForEditForApiContract()
+	{
+		Artists = Array.Empty<ArtistForSongContract>();
+		Lyrics = Array.Empty<LyricsForSongContract>();
+		Name = string.Empty;
+		Names = Array.Empty<LocalizedStringWithIdContract>();
+		Notes = new EnglishTranslatedStringContract();
+		PVs = Array.Empty<PVContract>();
+		Tags = Array.Empty<int>();
+		UpdateNotes = string.Empty;
+		WebLinks = Array.Empty<WebLinkForApiContract>();
+	}
+
+	public SongForEditForApiContract(Song song, ContentLanguagePreference languagePreference, IUserPermissionContext permissionContext)
+	{
+		var firstAlbum = song.Albums
+			.Where(a => a.Album.OriginalReleaseDate.IsFullDate)
+			.OrderBy(a => a.Album.OriginalReleaseDate)
+			.FirstOrDefault();
+
+		AlbumEventId = firstAlbum?.Album.OriginalReleaseEvent?.Id;
+		AlbumReleaseDate = song.FirstAlbumDate is not null
+			? DateTime.SpecifyKind(song.FirstAlbumDate.Value, DateTimeKind.Utc)
+			: null;
+		Artists = song.Artists
+			.Select(a => new ArtistForSongContract(a, languagePreference))
+			.OrderBy(a => a.Name)
+			.ToArray();
+		CanDelete = EntryPermissionManager.CanDelete(permissionContext, song);
+		DefaultNameLanguage = song.TranslatedName.DefaultLanguage;
+		Deleted = song.Deleted;
+		HasAlbums = song.Albums.Any();
+		Id = song.Id;
+		LengthSeconds = song.LengthSeconds;
+		Lyrics = song.Lyrics
+			.Select(l => new LyricsForSongContract(l))
+			.ToArray();
+		MaxMilliBpm = song.MaxMilliBpm;
+		MinMilliBpm = song.MinMilliBpm;
+		Name = song.Names.SortNames[languagePreference];
+		Names = song.Names
+			.Select(n => new LocalizedStringWithIdContract(n))
+			.ToArray();
+		Notes = new EnglishTranslatedStringContract(song.Notes);
+		OriginalVersion = song.OriginalVersion is not null && !song.OriginalVersion.Deleted
+			? new SongForApiContract(
+				song: song.OriginalVersion,
+				languagePreference: languagePreference,
+				fields: SongOptionalFields.None
+			)
+			: null;
+		PublishDate = song.PublishDate.DateTime;
+		PVs = song.PVs
+			.Select(p => new PVContract(p))
+			.ToArray();
+		ReleaseEvent = song.ReleaseEvent is not null
+			? new ReleaseEventForApiContract(
+				rel: song.ReleaseEvent,
+				languagePreference: languagePreference,
+				fields: ReleaseEventOptionalFields.None,
+				thumbPersister: null
+			)
+			: null;
+		SongType = song.SongType;
+		Status = song.Status;
+		Tags = song.Tags.Tags
+			.Select(t => t.Id)
+			.ToArray();
+		UpdateNotes = string.Empty;
+		WebLinks = song.WebLinks
+			.Select(w => new WebLinkForApiContract(w))
+			.OrderBy(w => w.DescriptionOrUrl)
+			.ToArray();
+	}
+}
diff --git a/VocaDbModel/DataContracts/UseCases/SongForEditContract.cs b/VocaDbModel/DataContracts/UseCases/SongForEditContract.cs
index d846bb7cee..f1fcc2ab0e 100644
--- a/VocaDbModel/DataContracts/UseCases/SongForEditContract.cs
+++ b/VocaDbModel/DataContracts/UseCases/SongForEditContract.cs
@@ -10,6 +10,7 @@
 
 namespace VocaDb.Model.DataContracts.UseCases
 {
+	[Obsolete]
 	[DataContract(Namespace = Schemas.VocaDb)]
 	public class SongForEditContract : SongContract
 	{
diff --git a/VocaDbModel/Database/Queries/SongQueries.cs b/VocaDbModel/Database/Queries/SongQueries.cs
index 98f06f3f3c..31e745d1a1 100644
--- a/VocaDbModel/Database/Queries/SongQueries.cs
+++ b/VocaDbModel/Database/Queries/SongQueries.cs
@@ -700,10 +700,12 @@ public T GetSong<T>(int id, Func<Song, T> fac)
 			});
 		}
 
-		public SongForEditContract GetSongForEdit(int songId)
+#nullable enable
+		public SongForEditForApiContract GetSongForEdit(int songId)
 		{
-			return HandleQuery(session => new SongForEditContract(session.Load<Song>(songId), PermissionContext.LanguagePreference));
+			return HandleQuery(session => new SongForEditForApiContract(session.Load<Song>(songId), PermissionContext.LanguagePreference, PermissionContext));
 		}
+#nullable disable
 
 		public T GetSongWithMergeRecord<T>(int id, Func<Song, SongMergeRecord, T> fac)
 		{
@@ -1285,7 +1287,7 @@ public async Task<CollectionDiffWithValue<PVForSong, PVForSong>> UpdatePVs(IData
 		}
 
 #nullable enable
-		public async Task<SongForEditContract> UpdateBasicProperties(SongForEditContract properties)
+		public async Task<SongForEditForApiContract> UpdateBasicProperties(SongForEditForApiContract properties)
 		{
 			ParamIs.NotNull(() => properties);
 
@@ -1414,7 +1416,7 @@ public async Task<SongForEditContract> UpdateBasicProperties(SongForEditContract
 					}
 				}
 
-				return new SongForEditContract(song, PermissionContext.LanguagePreference);
+				return new SongForEditForApiContract(song, PermissionContext.LanguagePreference, PermissionContext);
 			});
 		}
 #nullable disable
diff --git a/VocaDbModel/Domain/Globalization/EnglishTranslatedString.cs b/VocaDbModel/Domain/Globalization/EnglishTranslatedString.cs
index fa8c3e7690..9e1585756a 100644
--- a/VocaDbModel/Domain/Globalization/EnglishTranslatedString.cs
+++ b/VocaDbModel/Domain/Globalization/EnglishTranslatedString.cs
@@ -1,5 +1,4 @@
-#nullable disable
-
+using System.Diagnostics.CodeAnalysis;
 using VocaDb.Model.DataContracts.Globalization;
 
 namespace VocaDb.Model.Domain.Globalization
@@ -12,8 +11,8 @@ public class EnglishTranslatedString
 		private string _english;
 		private string _original;
 
-		public EnglishTranslatedString() :
-			this(string.Empty)
+		public EnglishTranslatedString()
+			: this(string.Empty)
 		{
 		}
 
@@ -26,6 +25,7 @@ public EnglishTranslatedString(string original, string english = "")
 		public virtual string English
 		{
 			get => _english;
+			[MemberNotNull(nameof(_english))]
 			set
 			{
 				ParamIs.NotNull(() => value);
@@ -45,6 +45,7 @@ public virtual string English
 		public virtual string Original
 		{
 			get => _original;
+			[MemberNotNull(nameof(_original))]
 			set
 			{
 				ParamIs.NotNull(() => value);
@@ -52,13 +53,12 @@ public virtual string Original
 			}
 		}
 
-#nullable enable
 		public virtual bool CopyFrom(EnglishTranslatedStringContract contract)
 		{
 			ParamIs.NotNull(() => contract);
 
 			var changed = false;
-			var newOriginal = contract.Original?.Trim();
+			var newOriginal = contract.Original.Trim();
 
 			if (Original != newOriginal)
 			{
@@ -66,7 +66,7 @@ public virtual bool CopyFrom(EnglishTranslatedStringContract contract)
 				changed = true;
 			}
 
-			var newEnglish = contract.English?.Trim();
+			var newEnglish = contract.English.Trim();
 
 			if (English != newEnglish)
 			{
@@ -76,7 +76,6 @@ public virtual bool CopyFrom(EnglishTranslatedStringContract contract)
 
 			return changed;
 		}
-#nullable disable
 
 		public virtual bool CopyIfEmpty(EnglishTranslatedString source)
 		{
diff --git a/VocaDbModel/Domain/Songs/Song.cs b/VocaDbModel/Domain/Songs/Song.cs
index d352f31312..20d4e558d8 100644
--- a/VocaDbModel/Domain/Songs/Song.cs
+++ b/VocaDbModel/Domain/Songs/Song.cs
@@ -1,5 +1,6 @@
 #nullable disable
 
+using System.Diagnostics.CodeAnalysis;
 using System.Xml.Linq;
 using VocaDb.Model.DataContracts.Artists;
 using VocaDb.Model.DataContracts.PVs;
@@ -56,7 +57,9 @@ public class Song :
 		private IList<SongInList> _lists = new List<SongInList>();
 		private IList<LyricsForSong> _lyrics = new List<LyricsForSong>();
 		private NameManager<SongName> _names = new();
+#nullable enable
 		private EnglishTranslatedString _notes;
+#nullable disable
 		private PVManager<PVForSong> _pvs = new();
 		private TagManager<SongTagUsage> _tags = new();
 		private IList<FavoriteSongForUser> _userFavorites = new List<FavoriteSongForUser>();
@@ -353,15 +356,18 @@ public virtual NameManager<SongName> Names
 
 		INameManager IEntryWithNames.Names => Names;
 
+#nullable enable
 		public virtual EnglishTranslatedString Notes
 		{
 			get => _notes;
+			[MemberNotNull(nameof(_notes))]
 			set
 			{
 				ParamIs.NotNull(() => value);
 				_notes = value;
 			}
 		}
+#nullable disable
 
 		/// <summary>
 		/// List of albums this song appears on. 
diff --git a/VocaDbWeb/Controllers/Api/SongApiController.cs b/VocaDbWeb/Controllers/Api/SongApiController.cs
index 053631f7b5..8cd2ce52b0 100644
--- a/VocaDbWeb/Controllers/Api/SongApiController.cs
+++ b/VocaDbWeb/Controllers/Api/SongApiController.cs
@@ -18,12 +18,15 @@
 using VocaDb.Model.Domain.PVs;
 using VocaDb.Model.Domain.Security;
 using VocaDb.Model.Domain.Songs;
+using VocaDb.Model.Resources;
 using VocaDb.Model.Service;
 using VocaDb.Model.Service.QueryableExtensions;
 using VocaDb.Model.Service.Search;
 using VocaDb.Model.Service.Search.AlbumSearch;
 using VocaDb.Model.Service.Search.SongSearch;
 using VocaDb.Model.Service.VideoServices;
+using VocaDb.Web.Code;
+using VocaDb.Web.Code.Exceptions;
 using VocaDb.Web.Code.Security;
 using VocaDb.Web.Helpers;
 using VocaDb.Web.Models.Shared;
@@ -146,10 +149,12 @@ public IEnumerable<SongForApiContract> GetDerived(
 		) =>
 			_queries.GetDerived(id, fields, lang);
 
+#nullable enable
 		[HttpGet("{id:int}/for-edit")]
 		[ApiExplorerSettings(IgnoreApi = true)]
-		public SongForEditContract GetForEdit(int id) =>
+		public SongForEditForApiContract GetForEdit(int id) =>
 			_queries.GetSongForEdit(id);
+#nullable disable
 
 		/// <summary>
 		/// Gets a song by Id.
@@ -559,6 +564,72 @@ public SongDetailsForApiContract GetDetails(int id, int albumId = 0)
 		[ApiExplorerSettings(IgnoreApi = true)]
 		public EntryWithArchivedVersionsForApiContract<SongForApiContract> GetSongWithArchivedVersions(int id) =>
 			_queries.GetSongWithArchivedVersionsForApi(id);
+
+		[HttpPost("{id:int}")]
+		[Authorize]
+		[EnableCors(AuthenticationConstants.AuthenticatedCorsApiPolicy)]
+		[ValidateAntiForgeryToken]
+		[ApiExplorerSettings(IgnoreApi = true)]
+		public async Task<ActionResult<int>> Edit(
+			[ModelBinder(BinderType = typeof(JsonModelBinder))] SongForEditForApiContract contract
+		)
+		{
+			// Unable to continue if viewmodel is null because we need the ID at least
+			if (contract is null)
+			{
+				return BadRequest("Viewmodel was null - probably JavaScript is disabled");
+			}
+
+			try
+			{
+				static void CheckModel(SongForEditForApiContract contract)
+				{
+					if (contract is null)
+						throw new InvalidFormException("Model was null");
+
+					if (contract.Artists is null)
+						throw new InvalidFormException("ArtistLinks list was null"); // Shouldn't be null
+
+					if (contract.Lyrics is null)
+						throw new InvalidFormException("Lyrics list was null"); // Shouldn't be null
+
+					if (contract.Names is null)
+						throw new InvalidFormException("Names list was null"); // Shouldn't be null
+
+					if (contract.PVs is null)
+						throw new InvalidFormException("PVs list was null"); // Shouldn't be null
+
+					if (contract.WebLinks is null)
+						throw new InvalidFormException("WebLinks list was null"); // Shouldn't be null
+				}
+
+				CheckModel(contract);
+			}
+			catch (InvalidFormException x)
+			{
+				ControllerBase.AddFormSubmissionError(this, x.Message);
+			}
+
+			// Note: name is allowed to be whitespace, but not empty.
+			if (contract.Names is null || contract.Names.All(n => n is null || string.IsNullOrEmpty(n.Value)))
+			{
+				ModelState.AddModelError("Names", SongValidationErrors.UnspecifiedNames);
+			}
+
+			if (contract.Lyrics is not null && contract.Lyrics.Any(n => string.IsNullOrEmpty(n.Value)))
+			{
+				ModelState.AddModelError("Lyrics", "Lyrics cannot be empty");
+			}
+
+			if (!ModelState.IsValid)
+			{
+				return ValidationProblem(ModelState);
+			}
+
+			await _queries.UpdateBasicProperties(contract);
+
+			return contract.Id;
+		}
 #nullable disable
 	}
 }
diff --git a/VocaDbWeb/Controllers/SongController.cs b/VocaDbWeb/Controllers/SongController.cs
index aa9c413802..ca3005e5fb 100644
--- a/VocaDbWeb/Controllers/SongController.cs
+++ b/VocaDbWeb/Controllers/SongController.cs
@@ -13,7 +13,6 @@
 using VocaDb.Model.Domain.Security;
 using VocaDb.Model.Domain.Songs;
 using VocaDb.Model.Helpers;
-using VocaDb.Model.Resources;
 using VocaDb.Model.Service;
 using VocaDb.Model.Service.BrandableStrings;
 using VocaDb.Model.Service.ExtSites;
@@ -23,7 +22,6 @@
 using VocaDb.Model.Utils;
 using VocaDb.Model.Utils.Search;
 using VocaDb.Web.Code;
-using VocaDb.Web.Code.Exceptions;
 using VocaDb.Web.Code.Feeds;
 using VocaDb.Web.Code.Markdown;
 using VocaDb.Web.Code.WebApi;
@@ -225,58 +223,7 @@ public async Task<ActionResult> Create(Create model)
 		[Authorize]
 		public ActionResult Edit(int id, int? albumId = null)
 		{
-			CheckConcurrentEdit(EntryType.Song, id);
-
-			var model = Service.GetSong(id, song => new SongEditViewModel(new SongContract(song, PermissionContext.LanguagePreference, false),
-				PermissionContext, EntryPermissionManager.CanDelete(PermissionContext, song), InstrumentalTagId, albumId: albumId));
-
-			return View(model);
-		}
-
-		//
-		// POST: /Song/Edit/5
-		[HttpPost]
-		[Authorize]
-		public async Task<ActionResult> Edit(SongEditViewModel viewModel)
-		{
-			// Unable to continue if viewmodel is null because we need the ID at least
-			if (viewModel?.EditedSong == null)
-			{
-				s_log.Warn("Viewmodel was null");
-				return HttpStatusCodeResult(HttpStatusCode.BadRequest, "Viewmodel was null - probably JavaScript is disabled");
-			}
-
-			try
-			{
-				viewModel.CheckModel();
-			}
-			catch (InvalidFormException x)
-			{
-				AddFormSubmissionError(x.Message);
-			}
-
-			var model = viewModel.EditedSong;
-
-			// Note: name is allowed to be whitespace, but not empty.
-			if (model.Names == null || model.Names.All(n => n == null || string.IsNullOrEmpty(n.Value)))
-			{
-				ModelState.AddModelError("Names", SongValidationErrors.UnspecifiedNames);
-			}
-
-			if (model.Lyrics != null && model.Lyrics.Any(n => string.IsNullOrEmpty(n.Value)))
-			{
-				ModelState.AddModelError("Lyrics", "Lyrics cannot be empty");
-			}
-
-			if (!ModelState.IsValid)
-			{
-				return View(Service.GetSong(model.Id, song => new SongEditViewModel(new SongContract(song, PermissionContext.LanguagePreference, false),
-					PermissionContext, EntryPermissionManager.CanDelete(PermissionContext, song), InstrumentalTagId, model)));
-			}
-
-			await _queries.UpdateBasicProperties(model);
-
-			return RedirectToAction("Details", new { id = model.Id, albumId = viewModel.AlbumId });
+			return View("React/Index");
 		}
 
 		[HttpPost]
diff --git a/VocaDbWeb/Scripts/Bootstrap/Accordion.tsx b/VocaDbWeb/Scripts/Bootstrap/Accordion.tsx
new file mode 100644
index 0000000000..87f08d5b1b
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/Accordion.tsx
@@ -0,0 +1,98 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/Accordion.tsx.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { useUncontrolled } from 'uncontrollable';
+
+import AccordionBody from './AccordionBody';
+import AccordionButton from './AccordionButton';
+import AccordionCollapse from './AccordionCollapse';
+import AccordionContext, {
+	AccordionSelectCallback,
+	AccordionEventKey,
+} from './AccordionContext';
+import AccordionHeader from './AccordionHeader';
+import AccordionItem from './AccordionItem';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface AccordionProps
+	extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,
+		BsPrefixProps {
+	activeKey?: AccordionEventKey;
+	defaultActiveKey?: AccordionEventKey;
+	onSelect?: AccordionSelectCallback;
+	flush?: boolean;
+	alwaysOpen?: boolean;
+}
+
+const propTypes = {
+	/** Set a custom element for this component */
+	as: PropTypes.elementType,
+
+	/** @default 'accordion' */
+	bsPrefix: PropTypes.string,
+
+	/** The current active key that corresponds to the currently expanded card */
+	activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
+	/** The default active key that is expanded on start */
+	defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
+	/** Renders accordion edge-to-edge with its parent container */
+	flush: PropTypes.bool,
+
+	/** Allow accordion items to stay open when another item is opened */
+	alwaysOpen: PropTypes.bool,
+};
+
+const Accordion: BsPrefixRefForwardingComponent<
+	'div',
+	AccordionProps
+> = React.forwardRef<HTMLElement, AccordionProps>((props, ref) => {
+	const {
+		// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+		as: Component = 'div',
+		activeKey,
+		bsPrefix,
+		className,
+		onSelect,
+		flush,
+		alwaysOpen,
+		...controlledProps
+	} = useUncontrolled(props, {
+		activeKey: 'onSelect',
+	});
+
+	const prefix = useBootstrapPrefix(bsPrefix, 'accordion');
+	const contextValue = useMemo(
+		() => ({
+			activeEventKey: activeKey,
+			onSelect,
+			alwaysOpen,
+		}),
+		[activeKey, onSelect, alwaysOpen],
+	);
+
+	return (
+		<AccordionContext.Provider value={contextValue}>
+			<Component
+				ref={ref}
+				{...controlledProps}
+				className={classNames(className, prefix, flush && `${prefix}-flush`)}
+			/>
+		</AccordionContext.Provider>
+	);
+});
+
+Accordion.displayName = 'Accordion';
+Accordion.propTypes = propTypes;
+
+export default Object.assign(Accordion, {
+	Button: AccordionButton,
+	Collapse: AccordionCollapse,
+	Item: AccordionItem,
+	Header: AccordionHeader,
+	Body: AccordionBody,
+});
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionBody.tsx b/VocaDbWeb/Scripts/Bootstrap/AccordionBody.tsx
new file mode 100644
index 0000000000..96dd7cf0ca
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionBody.tsx
@@ -0,0 +1,56 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionBody.tsx.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+
+import AccordionCollapse from './AccordionCollapse';
+import AccordionItemContext from './AccordionItemContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionBodyProps
+	extends BsPrefixProps,
+		React.HTMLAttributes<HTMLElement> {}
+
+const propTypes = {
+	/** Set a custom element for this component */
+	as: PropTypes.elementType,
+
+	/** @default 'accordion-body' */
+	bsPrefix: PropTypes.string,
+};
+
+const AccordionBody: BsPrefixRefForwardingComponent<
+	'div',
+	AccordionBodyProps
+> = React.forwardRef<HTMLElement, AccordionBodyProps>(
+	(
+		{
+			// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+			as: Component = 'div',
+			bsPrefix,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-body');
+		const { eventKey } = useContext(AccordionItemContext);
+
+		return (
+			<AccordionCollapse eventKey={eventKey}>
+				<Component
+					ref={ref}
+					{...props}
+					className={classNames(className, bsPrefix)}
+				/>
+			</AccordionCollapse>
+		);
+	},
+);
+
+AccordionBody.propTypes = propTypes;
+AccordionBody.displayName = 'AccordionBody';
+
+export default AccordionBody;
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionButton.tsx b/VocaDbWeb/Scripts/Bootstrap/AccordionButton.tsx
new file mode 100644
index 0000000000..87264276bb
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionButton.tsx
@@ -0,0 +1,107 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionButton.tsx.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+
+import AccordionContext, {
+	isAccordionItemSelected,
+	AccordionEventKey,
+} from './AccordionContext';
+import AccordionItemContext from './AccordionItemContext';
+import SafeAnchor from './SafeAnchor';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+type EventHandler = React.EventHandler<React.SyntheticEvent>;
+
+export interface AccordionButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		BsPrefixProps {}
+
+const propTypes = {
+	/** Set a custom element for this component */
+	as: PropTypes.elementType,
+
+	/** @default 'accordion-button' */
+	bsPrefix: PropTypes.string,
+
+	/** A callback function for when this component is clicked */
+	onClick: PropTypes.func,
+};
+
+export function useAccordionButton(
+	eventKey: string,
+	onClick?: EventHandler,
+): EventHandler {
+	const { activeEventKey, onSelect, alwaysOpen } = useContext(AccordionContext);
+
+	return (e): void => {
+		/*
+      Compare the event key in context with the given event key.
+      If they are the same, then collapse the component.
+    */
+		let eventKeyPassed: AccordionEventKey =
+			eventKey === activeEventKey ? null : eventKey;
+		if (alwaysOpen) {
+			if (Array.isArray(activeEventKey)) {
+				if (activeEventKey.includes(eventKey)) {
+					eventKeyPassed = activeEventKey.filter((k) => k !== eventKey);
+				} else {
+					eventKeyPassed = [...activeEventKey, eventKey];
+				}
+			} else {
+				// activeEventKey is undefined.
+				eventKeyPassed = [eventKey];
+			}
+		}
+
+		onSelect?.(eventKeyPassed, e);
+		onClick?.(e);
+	};
+}
+
+const AccordionButton: BsPrefixRefForwardingComponent<
+	'div',
+	AccordionButtonProps
+> = React.forwardRef<HTMLButtonElement, AccordionButtonProps>(
+	(
+		{
+			// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+			as: Component = SafeAnchor,
+			bsPrefix,
+			className,
+			onClick,
+			...props
+		},
+		ref,
+	) => {
+		bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-toggle');
+		const { eventKey } = useContext(AccordionItemContext);
+		const accordionOnClick = useAccordionButton(eventKey, onClick);
+		const { activeEventKey } = useContext(AccordionContext);
+
+		if (Component === 'button') {
+			props.type = 'button';
+		}
+
+		return (
+			<Component
+				ref={ref}
+				onClick={accordionOnClick}
+				{...props}
+				aria-expanded={eventKey === activeEventKey}
+				className={classNames(
+					className,
+					bsPrefix,
+					!isAccordionItemSelected(activeEventKey, eventKey) && 'collapsed',
+				)}
+			/>
+		);
+	},
+);
+
+AccordionButton.propTypes = propTypes;
+AccordionButton.displayName = 'AccordionButton';
+
+export default AccordionButton;
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionCollapse.tsx b/VocaDbWeb/Scripts/Bootstrap/AccordionCollapse.tsx
new file mode 100644
index 0000000000..a55b344596
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionCollapse.tsx
@@ -0,0 +1,64 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionCollapse.tsx.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import { Transition } from 'react-transition-group';
+
+import AccordionContext, { isAccordionItemSelected } from './AccordionContext';
+import Collapse, { CollapseProps } from './Collapse';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionCollapseProps extends BsPrefixProps, CollapseProps {
+	eventKey: string;
+}
+
+const propTypes = {
+	/** Set a custom element for this component */
+	as: PropTypes.elementType,
+
+	/**
+	 * A key that corresponds to the toggler that triggers this collapse's expand or collapse.
+	 */
+	eventKey: PropTypes.string.isRequired,
+
+	/** Children prop should only contain a single child, and is enforced as such */
+	children: PropTypes.element.isRequired,
+};
+
+const AccordionCollapse: BsPrefixRefForwardingComponent<
+	'div',
+	AccordionCollapseProps
+> = React.forwardRef<Transition<any>, AccordionCollapseProps>(
+	(
+		{
+			as: Component = 'div',
+			bsPrefix,
+			className,
+			children,
+			eventKey,
+			...props
+		},
+		ref,
+	) => {
+		const { activeEventKey } = useContext(AccordionContext);
+		bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-collapse');
+
+		return (
+			<Collapse
+				ref={ref}
+				in={isAccordionItemSelected(activeEventKey, eventKey)}
+				{...props}
+				className={classNames(className, bsPrefix)}
+			>
+				<Component>{React.Children.only(children)}</Component>
+			</Collapse>
+		);
+	},
+) as any;
+
+AccordionCollapse.propTypes = propTypes;
+AccordionCollapse.displayName = 'AccordionCollapse';
+
+export default AccordionCollapse;
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionContext.ts b/VocaDbWeb/Scripts/Bootstrap/AccordionContext.ts
new file mode 100644
index 0000000000..3357e67cee
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionContext.ts
@@ -0,0 +1,29 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionContext.ts.
+import * as React from 'react';
+
+export type AccordionEventKey = string | string[] | null | undefined;
+
+export declare type AccordionSelectCallback = (
+	eventKey: AccordionEventKey,
+	e: React.SyntheticEvent<unknown>,
+) => void;
+
+export interface AccordionContextValue {
+	activeEventKey?: AccordionEventKey;
+	onSelect?: AccordionSelectCallback;
+	alwaysOpen?: boolean;
+}
+
+export function isAccordionItemSelected(
+	activeEventKey: AccordionEventKey,
+	eventKey: string,
+): boolean {
+	return Array.isArray(activeEventKey)
+		? activeEventKey.includes(eventKey)
+		: activeEventKey === eventKey;
+}
+
+const context = React.createContext<AccordionContextValue>({});
+context.displayName = 'AccordionContext';
+
+export default context;
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionHeader.tsx b/VocaDbWeb/Scripts/Bootstrap/AccordionHeader.tsx
new file mode 100644
index 0000000000..5ff4b0ad98
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionHeader.tsx
@@ -0,0 +1,58 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionHeader.tsx.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+
+import AccordionButton from './AccordionButton';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionHeaderProps
+	extends BsPrefixProps,
+		React.HTMLAttributes<HTMLElement> {}
+
+const propTypes = {
+	/** Set a custom element for this component */
+	as: PropTypes.elementType,
+
+	/** @default 'accordion-header' */
+	bsPrefix: PropTypes.string,
+
+	/** Click handler for the `AccordionButton` element */
+	onClick: PropTypes.func,
+};
+
+const AccordionHeader: BsPrefixRefForwardingComponent<
+	'div',
+	AccordionHeaderProps
+> = React.forwardRef<HTMLElement, AccordionHeaderProps>(
+	(
+		{
+			// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+			as: Component = 'div',
+			bsPrefix,
+			className,
+			children,
+			onClick,
+			...props
+		},
+		ref,
+	) => {
+		bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-heading');
+
+		return (
+			<Component
+				ref={ref}
+				{...props}
+				className={classNames(className, bsPrefix)}
+			>
+				<AccordionButton onClick={onClick}>{children}</AccordionButton>
+			</Component>
+		);
+	},
+);
+
+AccordionHeader.propTypes = propTypes;
+AccordionHeader.displayName = 'AccordionHeader';
+
+export default AccordionHeader;
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionItem.tsx b/VocaDbWeb/Scripts/Bootstrap/AccordionItem.tsx
new file mode 100644
index 0000000000..d0fef50823
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionItem.tsx
@@ -0,0 +1,71 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionItem.tsx.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useMemo } from 'react';
+
+import AccordionItemContext, {
+	AccordionItemContextValue,
+} from './AccordionItemContext';
+import { useBootstrapPrefix } from './ThemeProvider';
+import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+
+export interface AccordionItemProps
+	extends BsPrefixProps,
+		React.HTMLAttributes<HTMLElement> {
+	eventKey: string;
+}
+
+const propTypes = {
+	/** Set a custom element for this component */
+	as: PropTypes.elementType,
+
+	/** @default 'accordion-item' */
+	bsPrefix: PropTypes.string,
+
+	/**
+	 * A unique key used to control this item's collapse/expand.
+	 * @required
+	 */
+	eventKey: PropTypes.string.isRequired,
+};
+
+const AccordionItem: BsPrefixRefForwardingComponent<
+	'div',
+	AccordionItemProps
+> = React.forwardRef<HTMLElement, AccordionItemProps>(
+	(
+		{
+			// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+			as: Component = 'div',
+			bsPrefix,
+			className,
+			eventKey,
+			...props
+		},
+		ref,
+	) => {
+		bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-group');
+		const contextValue = useMemo<AccordionItemContextValue>(
+			() => ({
+				eventKey,
+			}),
+			[eventKey],
+		);
+
+		return (
+			<AccordionItemContext.Provider value={contextValue}>
+				<Component
+					ref={ref}
+					{...props}
+					className={classNames(className, bsPrefix)}
+				/>
+			</AccordionItemContext.Provider>
+		);
+	},
+);
+
+AccordionItem.propTypes = propTypes;
+AccordionItem.displayName = 'AccordionItem';
+
+export default AccordionItem;
diff --git a/VocaDbWeb/Scripts/Bootstrap/AccordionItemContext.ts b/VocaDbWeb/Scripts/Bootstrap/AccordionItemContext.ts
new file mode 100644
index 0000000000..3b7f795cda
--- /dev/null
+++ b/VocaDbWeb/Scripts/Bootstrap/AccordionItemContext.ts
@@ -0,0 +1,13 @@
+// Code from: https://github.com/react-bootstrap/react-bootstrap/blob/f62da57493a63e40bd67b74f1414ac025c54d553/src/AccordionItemContext.ts.
+import * as React from 'react';
+
+export interface AccordionItemContextValue {
+	eventKey: string;
+}
+
+const context = React.createContext<AccordionItemContextValue>({
+	eventKey: '',
+});
+context.displayName = 'AccordionItemContext';
+
+export default context;
diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx
index 192eb86b05..3028e69c21 100644
--- a/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx
+++ b/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx
@@ -3,6 +3,7 @@ import EntryStatus from '@Models/EntryStatus';
 import EntryType from '@Models/EntryType';
 import EventCategory from '@Models/Events/EventCategory';
 import ContentLanguageSelection from '@Models/Globalization/ContentLanguageSelection';
+import PVType from '@Models/PVs/PVType';
 import SongListFeaturedCategory from '@Models/SongLists/SongListFeaturedCategory';
 import UserGroup from '@Models/Users/UserGroup';
 import React from 'react';
@@ -215,3 +216,37 @@ export const AlbumTypeDropdownList = React.memo(
 		);
 	},
 );
+
+export const SongTypeDropdownList = React.memo(
+	(props: DropdownListProps): React.ReactElement => {
+		const { t } = useTranslation(['VocaDb.Model.Resources.Songs']);
+
+		return (
+			<select {...props}>
+				{vdb.values.songTypes.map((songType) => (
+					<option value={songType} key={songType}>
+						{t(`VocaDb.Model.Resources.Songs:SongTypeNames.${songType}`)}
+					</option>
+				))}
+			</select>
+		);
+	},
+);
+
+export const PVTypeDescriptionsDropdownList = React.memo(
+	(props: DropdownListProps): React.ReactElement => {
+		const { t } = useTranslation(['Resources']);
+
+		return (
+			<select {...props}>
+				{Object.values(PVType)
+					.filter((pvType) => isNaN(Number(pvType)))
+					.map((pvType) => (
+						<option value={pvType} key={pvType}>
+							{t(`Resources:PVTypeDescriptions.${pvType}`)}
+						</option>
+					))}
+			</select>
+		);
+	},
+);
diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Song/SongLink.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Song/SongLink.tsx
index 6512a5a471..ab5468541f 100644
--- a/VocaDbWeb/Scripts/Components/Shared/Partials/Song/SongLink.tsx
+++ b/VocaDbWeb/Scripts/Components/Shared/Partials/Song/SongLink.tsx
@@ -10,6 +10,7 @@ interface SongLinkProps {
 	albumId?: number;
 	tooltip?: boolean;
 	toolTipDomain?: string;
+	target?: string;
 }
 
 const SongLink = React.memo(
@@ -18,6 +19,7 @@ const SongLink = React.memo(
 		albumId,
 		tooltip = false,
 		toolTipDomain,
+		target,
 	}: SongLinkProps): React.ReactElement => {
 		return tooltip ? (
 			<SongToolTip
@@ -28,6 +30,7 @@ const SongLink = React.memo(
 				title={song.additionalNames}
 				id={song.id}
 				toolTipDomain={toolTipDomain}
+				target={target}
 			>
 				{song.name}
 			</SongToolTip>
@@ -37,6 +40,7 @@ const SongLink = React.memo(
 					albumId: albumId,
 				})}`}
 				title={song.additionalNames}
+				target={target}
 			>
 				{song.name}
 			</Link>
diff --git a/VocaDbWeb/Scripts/Components/Song/Partials/ArtistForSongEdit.tsx b/VocaDbWeb/Scripts/Components/Song/Partials/ArtistForSongEdit.tsx
new file mode 100644
index 0000000000..9a4deb33bf
--- /dev/null
+++ b/VocaDbWeb/Scripts/Components/Song/Partials/ArtistForSongEdit.tsx
@@ -0,0 +1,107 @@
+import SafeAnchor from '@Bootstrap/SafeAnchor';
+import ArtistRoles from '@Models/Artists/ArtistRoles';
+import ArtistForAlbumEditStore from '@Stores/ArtistForAlbumEditStore';
+import SongEditStore from '@Stores/Song/SongEditStore';
+import { runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ArtistLink from '../../Shared/Partials/Artist/ArtistLink';
+
+interface ArtistForSongEditProps {
+	songEditStore: SongEditStore;
+	artistForAlbumEditStore: ArtistForAlbumEditStore;
+}
+
+const ArtistForSongEdit = observer(
+	({
+		songEditStore,
+		artistForAlbumEditStore,
+	}: ArtistForSongEditProps): React.ReactElement => {
+		const { t } = useTranslation(['ViewRes', 'ViewRes.Album']);
+
+		return (
+			<tr>
+				<td>
+					{artistForAlbumEditStore.artist ? (
+						<div>
+							<ArtistLink artist={artistForAlbumEditStore.artist} tooltip />
+							<br />
+							<span className="extraInfo">
+								{artistForAlbumEditStore.artist.additionalNames}
+							</span>
+						</div>
+					) : (
+						<div>
+							<span className="extraInfo">{artistForAlbumEditStore.name}</span>
+						</div>
+					)}
+					{vdb.values.allowCustomArtistName && (
+						<SafeAnchor
+							href="#"
+							className="textLink editLink"
+							onClick={(): void =>
+								songEditStore.customizeName(artistForAlbumEditStore)
+							}
+						>
+							{t('ViewRes.Album:ArtistForAlbumEditRow.Customize')}
+						</SafeAnchor>
+					)}
+				</td>
+
+				<td>
+					<label className="checkbox inline">
+						<input
+							type="checkbox"
+							checked={artistForAlbumEditStore.isSupport}
+							onChange={(e): void =>
+								runInAction(() => {
+									artistForAlbumEditStore.isSupport = e.target.checked;
+								})
+							}
+						/>
+						{t('ViewRes.Album:ArtistForAlbumEditRow.Support')}
+					</label>
+				</td>
+				<td>
+					<div>
+						{artistForAlbumEditStore.rolesArray
+							.filter((role) => role !== ArtistRoles[ArtistRoles.Default])
+							.map((role) => (
+								<div key={role}>
+									<span>{t(`Resources:ArtistRoleNames.${role}`)}</span>
+									<br />
+								</div>
+							))}
+					</div>
+
+					{artistForAlbumEditStore.isCustomizable && (
+						<SafeAnchor
+							href="#"
+							className="artistRolesEdit textLink editLink"
+							onClick={(): void =>
+								songEditStore.editArtistRoles(artistForAlbumEditStore)
+							}
+						>
+							{t('ViewRes.Album:ArtistForAlbumEditRow.Customize')}
+						</SafeAnchor>
+					)}
+				</td>
+				<td>
+					<SafeAnchor
+						onClick={(): void => {
+							songEditStore.removeArtist(artistForAlbumEditStore);
+						}}
+						href="#"
+						className="textLink removeLink"
+					>
+						{t('ViewRes:Shared.Remove')}
+					</SafeAnchor>
+				</td>
+			</tr>
+		);
+	},
+);
+
+export default ArtistForSongEdit;
diff --git a/VocaDbWeb/Scripts/Components/Song/Partials/LyricsForSongEdit.tsx b/VocaDbWeb/Scripts/Components/Song/Partials/LyricsForSongEdit.tsx
new file mode 100644
index 0000000000..b3dc7b8519
--- /dev/null
+++ b/VocaDbWeb/Scripts/Components/Song/Partials/LyricsForSongEdit.tsx
@@ -0,0 +1,201 @@
+import Accordion from '@Bootstrap/Accordion';
+import SafeAnchor from '@Bootstrap/SafeAnchor';
+import LyricsForSongListEditStore, {
+	LyricsForSongEditStore,
+} from '@Stores/Song/LyricsForSongListEditStore';
+import { runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { UserLanguageCultureDropdownList } from '../../Shared/Partials/Knockout/DropdownList';
+import HelpLabel from '../../Shared/Partials/Shared/HelpLabel';
+import { userLanguageCultures } from '../../userLanguageCultures';
+
+interface LyricsForSongEditProps {
+	lyricsForSongListEditStore: LyricsForSongListEditStore;
+	lyricsForSongEditStore: LyricsForSongEditStore;
+	eventKey: string;
+}
+
+const LyricsForSongEdit = observer(
+	({
+		lyricsForSongListEditStore,
+		lyricsForSongEditStore,
+		eventKey,
+	}: LyricsForSongEditProps): React.ReactElement => {
+		const { t } = useTranslation([
+			'ViewRes',
+			'ViewRes.Song',
+			'VocaDb.Web.Resources.Domain.Globalization',
+		]);
+
+		return (
+			<Accordion.Item eventKey={eventKey}>
+				<Accordion.Header>
+					<i className="icon icon-chevron-down" />{' '}
+					<span>{lyricsForSongEditStore.translationType}</span>
+					{lyricsForSongEditStore.showLanguageSelection && (
+						<>
+							{' '}
+							<span>
+								(
+								{
+									userLanguageCultures[lyricsForSongEditStore.cultureCode]
+										? `${
+												userLanguageCultures[lyricsForSongEditStore.cultureCode]
+													.nativeName
+										  } (${
+												userLanguageCultures[lyricsForSongEditStore.cultureCode]
+													.englishName
+										  })`
+										: 'Other/Unknown' /* TODO: localize */
+								}
+								)
+							</span>
+						</>
+					)}
+					{(lyricsForSongEditStore.source || lyricsForSongEditStore.url) && (
+						<>
+							{' '}
+							<span>
+								from{' '}
+								{lyricsForSongEditStore.source || lyricsForSongEditStore.url}
+							</span>
+						</>
+					)}
+				</Accordion.Header>
+				<Accordion.Body>
+					<div className="accordion-inner">
+						<div>
+							{lyricsForSongEditStore.showLanguageSelection && (
+								<p>
+									<HelpLabel
+										label={t('ViewRes.Song:Edit.LyLanguage')}
+										title="If multiple languages match, select the one that best represents the lyrics. If none of the options match, select 'Other/Unknown'." /* TODO: localize */
+									/>{' '}
+									<UserLanguageCultureDropdownList
+										placeholder={t(
+											'VocaDb.Web.Resources.Domain.Globalization:InterfaceLanguage.Other',
+										)}
+										value={lyricsForSongEditStore.cultureCode}
+										onChange={(e): void =>
+											runInAction(() => {
+												lyricsForSongEditStore.cultureCode = e.target.value;
+											})
+										}
+									/>
+								</p>
+							)}
+							<div>
+								<HelpLabel
+									label="Source" /* TODO: localize */
+									title="You can fill either label, URL or both" /* TODO: localize */
+								/>{' '}
+								<div className="inline input-prepend">
+									<span className="add-on" title="Label" /* TODO: localize */>
+										<i className="icon-pencil" />
+									</span>
+									<input
+										type="text"
+										value={lyricsForSongEditStore.source}
+										onChange={(e): void =>
+											runInAction(() => {
+												lyricsForSongEditStore.source = e.target.value;
+											})
+										}
+										className="input-large"
+										size={45}
+										maxLength={255}
+										placeholder="Label" /* TODO: localize */
+									/>
+								</div>{' '}
+								<div className="inline input-prepend">
+									<span className="add-on" title="URL" /* TODO: localize */>
+										<i className="icon-globe" />
+									</span>
+									<input
+										type="text"
+										value={lyricsForSongEditStore.url}
+										onChange={(e): void =>
+											runInAction(() => {
+												lyricsForSongEditStore.url = e.target.value;
+											})
+										}
+										className="input-xlarge"
+										size={45}
+										maxLength={500}
+										placeholder="URL" /* TODO: localize */
+									/>
+								</div>
+							</div>
+						</div>
+
+						<textarea
+							value={lyricsForSongEditStore.value}
+							onChange={(e): void =>
+								runInAction(() => {
+									lyricsForSongEditStore.value = e.target.value;
+								})
+							}
+							cols={65}
+							rows={30}
+							className="input-xxlarge withMargin"
+						/>
+						<br />
+
+						{lyricsForSongEditStore.translationType === 'Translation' && (
+							<SafeAnchor
+								onClick={(): void =>
+									lyricsForSongListEditStore.remove(lyricsForSongEditStore)
+								}
+								href="#"
+								className="textLink deleteLink"
+							>
+								{t('ViewRes:Shared.Delete')}
+							</SafeAnchor>
+						)}
+
+						{lyricsForSongEditStore.translationType === 'Translation' &&
+							!!lyricsForSongEditStore.id &&
+							!lyricsForSongListEditStore.original.id && (
+								<>
+									{' '}
+									<SafeAnchor
+										onClick={(): void =>
+											lyricsForSongListEditStore.changeToOriginal(
+												lyricsForSongEditStore,
+											)
+										}
+										href="#"
+										className="textLink editLink"
+									>
+										Change to original{/* TODO: localize */}
+									</SafeAnchor>
+								</>
+							)}
+						{lyricsForSongEditStore.translationType === 'Original' &&
+							!!lyricsForSongEditStore.id && (
+								<>
+									{' '}
+									<SafeAnchor
+										onClick={(): void =>
+											lyricsForSongListEditStore.changeToTranslation(
+												lyricsForSongEditStore,
+											)
+										}
+										href="#"
+										className="textLink editLink"
+									>
+										Change to translation{/* TODO: localize */}
+									</SafeAnchor>
+								</>
+							)}
+					</div>
+				</Accordion.Body>
+			</Accordion.Item>
+		);
+	},
+);
+
+export default LyricsForSongEdit;
diff --git a/VocaDbWeb/Scripts/Components/Song/SongDetails.tsx b/VocaDbWeb/Scripts/Components/Song/SongDetails.tsx
index fbdb2db5d5..6af2401918 100644
--- a/VocaDbWeb/Scripts/Components/Song/SongDetails.tsx
+++ b/VocaDbWeb/Scripts/Components/Song/SongDetails.tsx
@@ -194,8 +194,8 @@ const SongDetailsLayout = observer(
 							</>
 						)}{' '}
 						<JQueryUIButton
-							as="a"
-							href={`/Song/Edit/${model.id}?${qs.stringify({
+							as={Link}
+							to={`/Song/Edit/${model.id}?${qs.stringify({
 								albumId: model.browsedAlbumId,
 							})}`}
 							disabled={
diff --git a/VocaDbWeb/Scripts/Components/Song/SongEdit.tsx b/VocaDbWeb/Scripts/Components/Song/SongEdit.tsx
new file mode 100644
index 0000000000..c05ea15cec
--- /dev/null
+++ b/VocaDbWeb/Scripts/Components/Song/SongEdit.tsx
@@ -0,0 +1,942 @@
+import Accordion from '@Bootstrap/Accordion';
+import Alert from '@Bootstrap/Alert';
+import Breadcrumb from '@Bootstrap/Breadcrumb';
+import Button from '@Bootstrap/Button';
+import SafeAnchor from '@Bootstrap/SafeAnchor';
+import JQueryUIButton from '@JQueryUI/JQueryUIButton';
+import JQueryUIDatepicker from '@JQueryUI/JQueryUIDatepicker';
+import JQueryUITab from '@JQueryUI/JQueryUITab';
+import JQueryUITabs from '@JQueryUI/JQueryUITabs';
+import EntryStatus from '@Models/EntryStatus';
+import EntryType from '@Models/EntryType';
+import LoginManager from '@Models/LoginManager';
+import SongType from '@Models/Songs/SongType';
+import ArtistRepository from '@Repositories/ArtistRepository';
+import PVRepository from '@Repositories/PVRepository';
+import ReleaseEventRepository from '@Repositories/ReleaseEventRepository';
+import SongRepository from '@Repositories/SongRepository';
+import EntryUrlMapper from '@Shared/EntryUrlMapper';
+import HttpClient from '@Shared/HttpClient';
+import UrlMapper from '@Shared/UrlMapper';
+import LyricsForSongListEditStore from '@Stores/Song/LyricsForSongListEditStore';
+import SongEditStore from '@Stores/Song/SongEditStore';
+import _ from 'lodash';
+import { runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import ArtistAutoComplete from '../KnockoutExtensions/ArtistAutoComplete';
+import SongBpmFilter from '../Search/Partials/SongBpmFilter';
+import SongLengthFilter from '../Search/Partials/SongLengthFilter';
+import NamesEditor from '../Shared/KnockoutPartials/NamesEditor';
+import Layout from '../Shared/Layout';
+import PVEdit from '../Shared/PVs/PVEdit';
+import ArtistRolesEditViewModel from '../Shared/Partials/ArtistRolesEditViewModel';
+import CustomNameEdit from '../Shared/Partials/CustomNameEdit';
+import EnglishTranslatedStringEdit from '../Shared/Partials/EnglishTranslatedStringEdit';
+import EntryDeletePopup from '../Shared/Partials/EntryDetails/EntryDeletePopup';
+import {
+	EntryStatusDropdownList,
+	LanguageSelectionDropdownList,
+	PVTypeDescriptionsDropdownList,
+	SongTypeDropdownList,
+} from '../Shared/Partials/Knockout/DropdownList';
+import EntryValidationMessage from '../Shared/Partials/Knockout/EntryValidationMessage';
+import ReleaseEventLockingAutoComplete from '../Shared/Partials/Knockout/ReleaseEventLockingAutoComplete';
+import SongLockingAutoComplete from '../Shared/Partials/Knockout/SongLockingAutoComplete';
+import WebLinksEditViewKnockout from '../Shared/Partials/Knockout/WebLinksEditViewKnockout';
+import ConcurrentEditWarning from '../Shared/Partials/Shared/ConcurrentEditWarning';
+import HelpLabel from '../Shared/Partials/Shared/HelpLabel';
+import MarkdownNotice from '../Shared/Partials/Shared/MarkdownNotice';
+import RequiredField from '../Shared/Partials/Shared/RequiredField';
+import SaveAndBackBtn from '../Shared/Partials/Shared/SaveAndBackBtn';
+import ValidationErrorIcon from '../Shared/Partials/Shared/ValidationErrorIcon';
+import ValidationSummaryPanel from '../Shared/Partials/Shared/ValidationSummaryPanel';
+import SongLink from '../Shared/Partials/Song/SongLink';
+import { showErrorMessage } from '../ui';
+import { useConflictingEditor } from '../useConflictingEditor';
+import useVocaDbTitle from '../useVocaDbTitle';
+import ArtistForSongEdit from './Partials/ArtistForSongEdit';
+import LyricsForSongEdit from './Partials/LyricsForSongEdit';
+
+const maxMediaSizeMB = 20;
+
+const loginManager = new LoginManager(vdb.values);
+
+const httpClient = new HttpClient();
+const urlMapper = new UrlMapper(vdb.values.baseAddress);
+
+const songRepo = new SongRepository(httpClient, vdb.values.baseAddress);
+const artistRepo = new ArtistRepository(httpClient, vdb.values.baseAddress);
+const pvRepo = new PVRepository(httpClient, urlMapper);
+const eventRepo = new ReleaseEventRepository(httpClient, urlMapper);
+
+interface BasicInfoTabContentProps {
+	songEditStore: SongEditStore;
+}
+
+const BasicInfoTabContent = observer(
+	({ songEditStore }: BasicInfoTabContentProps): React.ReactElement => {
+		const { t } = useTranslation([
+			'Resources',
+			'ViewRes',
+			'ViewRes.Song',
+			'VocaDb.Model.Resources',
+		]);
+
+		return (
+			<>
+				<div className="editor-label">
+					<HelpLabel
+						label={t('ViewRes:EntryEdit.DefaultLanguageSelection')}
+						title={t('ViewRes:EntryEdit.DefaultLanguageHelp')}
+					/>
+				</div>
+				<div className="editor-field">
+					<LanguageSelectionDropdownList
+						value={songEditStore.defaultNameLanguage}
+						onChange={(e): void =>
+							runInAction(() => {
+								songEditStore.defaultNameLanguage = e.target.value;
+							})
+						}
+					/>
+				</div>
+
+				<div className="editor-label">
+					<HelpLabel
+						label={t('ViewRes.Song:Edit.BaNames')}
+						title={t('ViewRes:EntryEdit.NameHelp')}
+					/>{' '}
+					<RequiredField />
+					{songEditStore.validationError_unspecifiedNames && (
+						<>
+							{' '}
+							<ValidationErrorIcon
+								title={t(
+									'VocaDb.Model.Resources:SongValidationErrors.UnspecifiedNames',
+								)}
+							/>
+						</>
+					)}
+				</div>
+				<div className="editor-field">
+					<NamesEditor namesEditStore={songEditStore.names} />
+				</div>
+
+				<div className="editor-label">
+					<label>{t('ViewRes.Song:Edit.BaNotes')}</label> <MarkdownNotice />
+				</div>
+				<div className="editor-field entry-edit-description">
+					<EnglishTranslatedStringEdit
+						englishTranslatedStringEditStore={songEditStore.notes}
+					/>
+				</div>
+
+				<div className="editor-label">
+					<label>{t('ViewRes.Song:Edit.BaSongType')}</label>
+				</div>
+				<div className="editor-field">
+					<div className="row-fluid">
+						<div className="span4">
+							<SongTypeDropdownList
+								value={songEditStore.songType}
+								onChange={(e): void =>
+									runInAction(() => {
+										songEditStore.songType = e.target.value as SongType;
+									})
+								}
+							/>
+							{songEditStore.validationError_needType && (
+								<>
+									{' '}
+									<ValidationErrorIcon
+										title={t(
+											'VocaDb.Model.Resources:SongValidationErrors.NeedType',
+										)}
+									/>
+								</>
+							)}
+						</div>
+					</div>
+				</div>
+
+				{songEditStore.canHaveOriginalVersion && (
+					<>
+						<div className="editor-label">
+							<HelpLabel
+								label={t('ViewRes.Song:Edit.BaOriginalVersion')}
+								title={t('ViewRes.Song:Edit.BaOriginalVersionHelp')}
+							/>
+						</div>
+						<div className="editor-field">
+							<div style={{ display: 'inline-block' }} className="input-append">
+								<SongLockingAutoComplete
+									basicEntryLinkStore={songEditStore.originalVersion}
+								/>
+							</div>
+							{songEditStore.originalVersion.isEmpty && (
+								<div>
+									<SafeAnchor
+										href="#"
+										onClick={songEditStore.findOriginalSongSuggestions}
+										className="textLink searchLink"
+									>
+										Find originals{/* TODO: localize */}
+									</SafeAnchor>
+									<table>
+										<tbody>
+											{songEditStore.originalVersionSuggestions.map(
+												(originalVersionSuggestion, index) => (
+													<tr key={index}>
+														<td>
+															<SongLink
+																song={originalVersionSuggestion}
+																tooltip
+																target="_blank"
+															/>{' '}
+															(<span>{originalVersionSuggestion.songType}</span>
+															)
+															{originalVersionSuggestion.artistString && (
+																<div>
+																	<span>
+																		{originalVersionSuggestion.artistString}
+																	</span>
+																</div>
+															)}
+														</td>
+														<td style={{ maxWidth: '150px' }}>
+															<SafeAnchor
+																className="textLink acceptLink"
+																href="#"
+																onClick={(): void =>
+																	songEditStore.selectOriginalVersion(
+																		originalVersionSuggestion,
+																	)
+																}
+															>
+																Select{/* TODO: localize */}
+															</SafeAnchor>
+														</td>
+													</tr>
+												),
+											)}
+										</tbody>
+									</table>
+								</div>
+							)}
+						</div>
+					</>
+				)}
+
+				<div className="editor-label">
+					<label>{t('ViewRes.Song:Edit.BaDuration')}</label>
+				</div>
+				<div className="editor-field">
+					<SongLengthFilter songLengthFilter={songEditStore.lengthFilter} />
+				</div>
+
+				<div className="editor-label">
+					<label>{t('ViewRes.Song:Edit.BaBpm')}</label>
+				</div>
+				<div className="editor-field">
+					<label>
+						<input
+							type="radio"
+							checked={!songEditStore.hasMaxMilliBpm}
+							onChange={(e): void =>
+								runInAction(() => {
+									songEditStore.hasMaxMilliBpm = false;
+								})
+							}
+						/>{' '}
+						{t('ViewRes.Song:Edit.BaSpecificBpm')}
+					</label>
+					<label>
+						<input
+							type="radio"
+							checked={songEditStore.hasMaxMilliBpm}
+							onChange={(e): void =>
+								runInAction(() => {
+									songEditStore.hasMaxMilliBpm = true;
+								})
+							}
+						/>{' '}
+						{t('ViewRes.Song:Edit.BaBpmRange')}
+					</label>
+					{songEditStore.hasMaxMilliBpm ? (
+						<div>
+							<SongBpmFilter songBpmFilter={songEditStore.minBpmFilter} /> to{' '}
+							<SongBpmFilter songBpmFilter={songEditStore.maxBpmFilter} />
+						</div>
+					) : (
+						<div>
+							<SongBpmFilter songBpmFilter={songEditStore.minBpmFilter} />
+						</div>
+					)}
+				</div>
+
+				<div className="editor-label">
+					<label>Release event{/* TODO: localize */}</label>
+				</div>
+				<div className="editor-field">
+					<ReleaseEventLockingAutoComplete
+						basicEntryLinkStore={songEditStore.releaseEvent}
+						// TODO: createNewItem="Create new event '{0}'" /* TODO: localize */
+					/>
+				</div>
+
+				<div className="editor-label">
+					<HelpLabel
+						label={t('ViewRes.Song:Edit.BaPublishDate')}
+						title={t('ViewRes.Song:Edit.BaPublishDateHelp')}
+					/>
+				</div>
+				<div className="editor-field">
+					<JQueryUIDatepicker
+						type="text"
+						value={songEditStore.publishDate}
+						onSelect={(date): void =>
+							runInAction(() => {
+								songEditStore.publishDate = date;
+							})
+						}
+						dateFormat="yy-mm-dd"
+						maxLength={10}
+					/>
+
+					{/* Suggest publish date based on PV date, album release date or event date. Show only earlier of PV and album dates, if present. */}
+					<div>
+						{!songEditStore.publishDate &&
+							(songEditStore.suggestedPublishDate ||
+								songEditStore.eventDate) && (
+								<>
+									<div>
+										{songEditStore.suggestedPublishDate && (
+											<Button
+												onClick={(): void =>
+													runInAction(() => {
+														songEditStore.publishDate = songEditStore.suggestedPublishDate.date.toDate();
+													})
+												}
+											>
+												{songEditStore.suggestedPublishDate.source === 'PV' && (
+													<span>{t('ViewRes.Song:Edit.BaUsePvDate')}</span>
+												)}
+												{songEditStore.suggestedPublishDate.source ===
+													'Album' && (
+													<span>{t('ViewRes.Song:Edit.BaUserAlbumDate')}</span>
+												)}{' '}
+												<span>
+													{songEditStore.suggestedPublishDate.date.format('L')}
+												</span>
+											</Button>
+										)}
+									</div>
+									{songEditStore.eventDate &&
+										(!songEditStore.suggestedPublishDate ||
+											songEditStore.eventDate <
+												songEditStore.suggestedPublishDate.date) && (
+											<div className="inline-block">
+												{songEditStore.eventDate && (
+													<Button
+														onClick={(): void => {
+															runInAction(() => {
+																songEditStore.publishDate = songEditStore.eventDate?.toDate();
+															});
+														}}
+													>
+														{t('ViewRes.Song:Edit.BaUseEventDate')}{' '}
+														<span>{songEditStore.eventDate.format('L')}</span>
+													</Button>
+												)}
+											</div>
+										)}
+								</>
+							)}
+					</div>
+				</div>
+
+				<div className="editor-label">
+					<HelpLabel
+						label={t('ViewRes:EntryEdit.WebLinks')}
+						title={t('ViewRes:EntryEdit.ExternalLinksQuickHelp')}
+					/>
+				</div>
+				<div className="editor-field">
+					<WebLinksEditViewKnockout
+						webLinksEditStore={songEditStore.webLinks}
+					/>
+				</div>
+
+				<div className="editor-label">
+					<HelpLabel
+						label={t('ViewRes:EntryEdit.Status')}
+						title={t('Resources:CommonMessages.EntryStatusExplanation')}
+					/>
+				</div>
+				<div className="editor-field">
+					<EntryStatusDropdownList
+						allowedEntryStatuses={loginManager.allowedEntryStatuses()}
+						value={songEditStore.status}
+						onChange={(e): void =>
+							runInAction(() => {
+								songEditStore.status = e.target.value;
+							})
+						}
+					/>
+				</div>
+			</>
+		);
+	},
+);
+
+interface ArtistsTabContentProps {
+	songEditStore: SongEditStore;
+}
+
+const ArtistsTabContent = observer(
+	({ songEditStore }: ArtistsTabContentProps): React.ReactElement => {
+		const { t } = useTranslation([
+			'AjaxRes',
+			'ViewRes',
+			'ViewRes.Song',
+			'VocaDb.Model.Resources',
+		]);
+
+		return (
+			<div className="row-fluid">
+				<div className="span6">
+					{songEditStore.artistLinks.length > 0 && (
+						<table>
+							<thead>
+								<tr>
+									<th>{t('ViewRes.Song:Edit.ArArtist')}</th>
+									<th>{t('ViewRes.Song:Edit.ArSupport')}</th>
+									<th>{t('ViewRes.Song:Edit.ArRoles')}</th>
+									<th>{t('ViewRes.Song:Edit.ArActions')}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{songEditStore.artistLinks.map((artistLink, index) => (
+									<ArtistForSongEdit
+										songEditStore={songEditStore}
+										artistForAlbumEditStore={artistLink}
+										key={index}
+									/>
+								))}
+							</tbody>
+						</table>
+					)}
+
+					<br />
+					<h4>{t('ViewRes.Song:Edit.ArAddArtistTitle')}</h4>
+					<ArtistAutoComplete
+						type="text"
+						properties={{
+							createNewItem: t('AjaxRes:Shared.AddExtraArtist'),
+							acceptSelection: songEditStore.addArtist,
+							height: 300,
+						}}
+						maxLength={128}
+						placeholder={t('ViewRes:Shared.Search')}
+						className="input-xlarge"
+					/>
+				</div>
+				<div className="span4">
+					<Alert variant="info">
+						<span>{t('ViewRes.Song:Edit.ArVocaloidsNote')}</span>
+					</Alert>
+					{songEditStore.hasAlbums && (
+						<Alert variant="info">
+							<span>{t('ViewRes.Song:Edit.ArArtistsNotes')}</span>
+						</Alert>
+					)}
+					{songEditStore.validationError_needArtist && (
+						<Alert>
+							<span>
+								{t('VocaDb.Model.Resources:SongValidationErrors.NeedArtist')}
+							</span>
+						</Alert>
+					)}
+					{songEditStore.validationError_needProducer && (
+						<Alert>
+							<span>
+								{t('VocaDb.Model.Resources:SongValidationErrors.NeedProducer')}
+							</span>
+						</Alert>
+					)}
+					{songEditStore.validationError_nonInstrumentalSongNeedsVocalists && (
+						<Alert>
+							<span>
+								{t(
+									'VocaDb.Model.Resources:SongValidationErrors.NonInstrumentalSongNeedsVocalists',
+								)}
+							</span>
+						</Alert>
+					)}
+				</div>
+			</div>
+		);
+	},
+);
+
+interface PVsTabContentProps {
+	songEditStore: SongEditStore;
+}
+
+const PVsTabContent = observer(
+	({ songEditStore }: PVsTabContentProps): React.ReactElement => {
+		const { t } = useTranslation(['ViewRes.Song']);
+
+		const uploadMediaRef = React.useRef<HTMLInputElement>(undefined!);
+
+		return (
+			<>
+				{songEditStore.showInstrumentalNote && (
+					<Alert variant="info">
+						{t('ViewRes.Song:Edit.PvInstrumentalNote')}
+					</Alert>
+				)}
+
+				{songEditStore.pvs.pvs.length > 0 && (
+					<table>
+						<thead>
+							<tr>
+								<th>{t('ViewRes.Song:Edit.PvService')}</th>
+								<th>{t('ViewRes.Song:Edit.PvType')}</th>
+								<th>{t('ViewRes.Song:Edit.PvName')}</th>
+								<th>{t('ViewRes.Song:Edit.PvLength')}</th>
+								<th>{t('ViewRes.Song:Edit.PvDate')}</th>
+								<th>{t('ViewRes.Song:Edit.PvAuthor')}</th>
+								<th>
+									<HelpLabel
+										label={t('ViewRes.Song:Edit.PvStatus')}
+										title={t('ViewRes.Song:Edit.PvStatusHelp')}
+									/>
+								</th>
+								<th />
+							</tr>
+						</thead>
+						<tbody>
+							{songEditStore.pvs.pvs.map((pv, index) => (
+								<PVEdit
+									pvListEditStore={songEditStore.pvs}
+									pvEditStore={pv}
+									key={index}
+								/>
+							))}
+						</tbody>
+					</table>
+				)}
+
+				<br />
+				<h4>{t('ViewRes.Song:Edit.PvAddMedia')}</h4>
+
+				<p>{t('ViewRes.Song:Edit.PvSupportedServices')}</p>
+				<p>
+					{t('ViewRes.Song:Edit.PvUrl')}{' '}
+					<input
+						type="text"
+						value={songEditStore.pvs.newPvUrl}
+						onChange={(e): void =>
+							runInAction(() => {
+								songEditStore.pvs.newPvUrl = e.target.value;
+							})
+						}
+						maxLength={255}
+						size={40}
+						className="input-xlarge"
+					/>
+				</p>
+				<p>
+					{t('ViewRes.Song:Edit.PvNewType')}{' '}
+					<PVTypeDescriptionsDropdownList
+						value={songEditStore.pvs.newPvType}
+						onChange={(e): void =>
+							runInAction(() => {
+								songEditStore.pvs.newPvType = e.target.value;
+							})
+						}
+						className="input-xlarge"
+					/>
+				</p>
+
+				<SafeAnchor
+					onClick={songEditStore.pvs.add}
+					href="#"
+					className="textLink addLink"
+				>
+					{t('ViewRes:Shared.Add')}
+				</SafeAnchor>
+
+				{loginManager.canUploadMedia && (
+					<>
+						<h4 className="withMargin">Upload file{/* TODO: localize */}</h4>
+						<p>
+							You can use VocaDB for hosting songs you have made (you must be
+							the content creator). Choose the file and click "Upload".
+							<br />
+							Supported formats: .mp3. Maximum file size is {maxMediaSizeMB}MB.
+							PV type will automatically be "original".
+							{/* TODO: localize */}
+						</p>
+						<input type="file" id="uploadMedia" ref={uploadMediaRef} />{' '}
+						<SafeAnchor
+							onClick={async (): Promise<void> => {
+								const uploadMedia =
+									uploadMediaRef.current.files?.item(0) ?? undefined;
+
+								if (!uploadMedia) return;
+
+								await songEditStore.pvs.uploadMedia(uploadMedia);
+							}}
+							href="#"
+							className="textLink addLink"
+						>
+							Upload{/* TODO: localize */}
+						</SafeAnchor>
+					</>
+				)}
+
+				{/* TODO: AjaxLoader */}
+			</>
+		);
+	},
+);
+
+interface LyricsTabContentProps {
+	songEditStore: SongEditStore;
+	lyricsForSongListEditStore: LyricsForSongListEditStore;
+}
+
+const LyricsTabContent = observer(
+	({
+		songEditStore,
+		lyricsForSongListEditStore,
+	}: LyricsTabContentProps): React.ReactElement => {
+		const { t } = useTranslation(['ViewRes.Song']);
+
+		return (
+			<>
+				{songEditStore.showLyricsNote && (
+					<Alert variant="info">
+						{t('ViewRes.Song:Edit.LyInheritanceNote')}
+					</Alert>
+				)}
+
+				<Accordion alwaysOpen>
+					<div>
+						<LyricsForSongEdit
+							lyricsForSongListEditStore={lyricsForSongListEditStore}
+							lyricsForSongEditStore={lyricsForSongListEditStore.original}
+							eventKey={(0).toString()}
+						/>
+					</div>
+					<div>
+						<LyricsForSongEdit
+							lyricsForSongListEditStore={lyricsForSongListEditStore}
+							lyricsForSongEditStore={lyricsForSongListEditStore.romanized}
+							eventKey={(1).toString()}
+						/>
+					</div>
+					{lyricsForSongListEditStore.items.map((item, index) => (
+						<LyricsForSongEdit
+							lyricsForSongListEditStore={lyricsForSongListEditStore}
+							lyricsForSongEditStore={item}
+							eventKey={(index + 2).toString()}
+							key={index}
+						/>
+					))}
+				</Accordion>
+
+				<SafeAnchor
+					onClick={lyricsForSongListEditStore.add}
+					href="#"
+					className="textLink addLink"
+				>
+					{t('ViewRes.Song:Edit.LyAddRow')}
+				</SafeAnchor>
+			</>
+		);
+	},
+);
+
+interface SongEditLayoutProps {
+	songEditStore: SongEditStore;
+}
+
+const SongEditLayout = observer(
+	({ songEditStore }: SongEditLayoutProps): React.ReactElement => {
+		const { t, ready } = useTranslation([
+			'ViewRes',
+			'ViewRes.Song',
+			'VocaDb.Model.Resources',
+		]);
+
+		const contract = songEditStore.contract;
+
+		const title = t('ViewRes.Song:Edit.EditTitle', { 0: contract.name });
+
+		useVocaDbTitle(title, ready);
+
+		const conflictingEditor = useConflictingEditor(EntryType.Song);
+
+		const navigate = useNavigate();
+
+		return (
+			<Layout
+				title={title}
+				parents={
+					<>
+						<Breadcrumb.Item
+							linkAs={Link}
+							linkProps={{
+								to: '/Song',
+							}}
+							divider
+						>
+							{t('ViewRes:Shared.Songs')}
+						</Breadcrumb.Item>
+						<Breadcrumb.Item
+							linkAs={Link}
+							linkProps={{
+								to: EntryUrlMapper.details(EntryType.Song, contract.id),
+							}}
+						>
+							{contract.name}
+						</Breadcrumb.Item>
+					</>
+				}
+				toolbar={
+					<>
+						{contract.canDelete &&
+							(contract.deleted ? (
+								<JQueryUIButton
+									as="a"
+									href={`/Song/Restore/${contract.id}`}
+									icons={{ primary: 'ui-icon-trash' }}
+								>
+									{t('ViewRes:EntryEdit.Restore')}
+								</JQueryUIButton>
+							) : (
+								loginManager.canDeleteEntries && (
+									<JQueryUIButton
+										as={SafeAnchor}
+										href="#"
+										onClick={songEditStore.deleteStore.show}
+										icons={{ primary: 'ui-icon-trash' }}
+									>
+										{t('ViewRes:Shared.Delete')}
+									</JQueryUIButton>
+								)
+							))}
+						{loginManager.canMergeEntries && (
+							<>
+								{' '}
+								&nbsp;{' '}
+								<JQueryUIButton as="a" href={`/Song/Merge/${contract.id}`}>
+									{t('ViewRes:EntryEdit.Merge')}
+								</JQueryUIButton>
+							</>
+						)}
+					</>
+				}
+			>
+				{conflictingEditor && conflictingEditor.userId !== 0 && (
+					<ConcurrentEditWarning conflictingEditor={conflictingEditor} />
+				)}
+
+				{songEditStore.errors && (
+					<ValidationSummaryPanel
+						message="Unable to save properties." /* TODO: localize */
+						errors={songEditStore.errors}
+					/>
+				)}
+
+				<EntryValidationMessage
+					draft={contract.status === EntryStatus[EntryStatus.Draft]}
+					validationMessages={([] as string[]).concat(
+						songEditStore.validationError_duplicateArtist
+							? t('VocaDb.Model.Resources:SongValidationErrors.DuplicateArtist')
+							: [],
+						songEditStore.validationError_unspecifiedNames
+							? t(
+									'VocaDb.Model.Resources:SongValidationErrors.UnspecifiedNames',
+							  )
+							: [],
+						songEditStore.validationError_needArtist
+							? t('VocaDb.Model.Resources:SongValidationErrors.NeedArtist')
+							: [],
+						songEditStore.validationError_needOriginal
+							? t('VocaDb.Model.Resources:SongValidationErrors.NeedOriginal')
+							: [],
+						songEditStore.validationError_needProducer
+							? t('VocaDb.Model.Resources:SongValidationErrors.NeedProducer')
+							: [],
+						songEditStore.validationError_needReferences
+							? t('VocaDb.Model.Resources:SongValidationErrors.NeedReferences')
+							: [],
+						songEditStore.validationError_needType
+							? t('VocaDb.Model.Resources:SongValidationErrors.NeedType')
+							: [],
+						songEditStore.validationError_nonInstrumentalSongNeedsVocalists
+							? t(
+									'VocaDb.Model.Resources:SongValidationErrors.NonInstrumentalSongNeedsVocalists',
+							  )
+							: [],
+						songEditStore.validationError_redundantEvent
+							? t('VocaDb.Model.Resources:SongValidationErrors.RedundantEvent')
+							: [],
+					)}
+					helpSection="glsongs"
+				/>
+
+				<br />
+				<form
+					onSubmit={async (e): Promise<void> => {
+						e.preventDefault();
+
+						try {
+							const id = await songEditStore.submit();
+
+							navigate(EntryUrlMapper.details(EntryType.Song, id));
+						} catch (e) {
+							showErrorMessage(
+								'Unable to save properties.' /* TODO: localize */,
+							);
+
+							throw e;
+						}
+					}}
+				>
+					<SaveAndBackBtn
+						backAction={EntryUrlMapper.details(EntryType.Song, contract.id)}
+						submitting={songEditStore.submitting}
+					/>
+
+					<JQueryUITabs>
+						<JQueryUITab
+							eventKey="basicInfo"
+							title={t('ViewRes:EntryEdit.BasicInfo')}
+						>
+							<BasicInfoTabContent songEditStore={songEditStore} />
+						</JQueryUITab>
+
+						<JQueryUITab
+							eventKey="artists"
+							title={t('ViewRes.Song:Edit.TabArtists')}
+						>
+							<ArtistsTabContent songEditStore={songEditStore} />
+						</JQueryUITab>
+
+						<JQueryUITab eventKey="pvs" title={t('ViewRes.Song:Edit.TabMedia')}>
+							<PVsTabContent songEditStore={songEditStore} />
+						</JQueryUITab>
+
+						<JQueryUITab
+							eventKey="lyrics"
+							title={t('ViewRes.Song:Edit.TabLyrics')}
+						>
+							<LyricsTabContent
+								songEditStore={songEditStore}
+								lyricsForSongListEditStore={songEditStore.lyrics}
+							/>
+						</JQueryUITab>
+					</JQueryUITabs>
+					<br />
+
+					<p>{t('ViewRes:EntryEdit.UpdateNotes')}</p>
+					<textarea
+						value={songEditStore.updateNotes}
+						onChange={(e): void =>
+							runInAction(() => {
+								songEditStore.updateNotes = e.target.value;
+							})
+						}
+						className="input-xxlarge"
+						rows={4}
+						maxLength={200}
+					/>
+
+					<br />
+					<SaveAndBackBtn
+						backAction={EntryUrlMapper.details(EntryType.Song, contract.id)}
+						submitting={songEditStore.submitting}
+					/>
+				</form>
+
+				<div>
+					<ArtistRolesEditViewModel
+						artistRolesEditStore={songEditStore.artistRolesEditStore}
+					/>
+				</div>
+
+				<div>
+					<CustomNameEdit
+						customNameEditStore={songEditStore.editedArtistLink}
+					/>
+				</div>
+
+				<EntryDeletePopup
+					confirmText={t('ViewRes:EntryEdit.ConfirmDelete')}
+					deleteEntryStore={songEditStore.deleteStore}
+				/>
+			</Layout>
+		);
+	},
+);
+
+const SongEdit = (): React.ReactElement => {
+	const { t } = useTranslation(['Resources']);
+
+	const artistRoleNames = React.useMemo(
+		() =>
+			_.fromPairs(
+				vdb.values.artistRoles.map((artistRole): [
+					string,
+					string | undefined,
+				] => [artistRole, t(`Resources:ArtistRoleNames.${artistRole}`)]),
+			),
+		[t],
+	);
+
+	const { id } = useParams();
+
+	const [model, setModel] = React.useState<{ songEditStore: SongEditStore }>();
+
+	React.useEffect(() => {
+		songRepo
+			.getForEdit({ id: Number(id) })
+			.then((model) =>
+				setModel({
+					songEditStore: new SongEditStore(
+						vdb.values,
+						songRepo,
+						artistRepo,
+						pvRepo,
+						eventRepo,
+						urlMapper,
+						artistRoleNames,
+						model,
+						loginManager.canBulkDeletePVs,
+						vdb.values.instrumentalTagId,
+					),
+				}),
+			)
+			.catch((error) => {
+				if (error.response) {
+					if (error.response.status === 404)
+						window.location.href = '/Error/NotFound';
+				}
+
+				throw error;
+			});
+	}, [artistRoleNames, id]);
+
+	return model ? <SongEditLayout songEditStore={model.songEditStore} /> : <></>;
+};
+
+export default SongEdit;
diff --git a/VocaDbWeb/Scripts/Components/Song/SongRoutes.tsx b/VocaDbWeb/Scripts/Components/Song/SongRoutes.tsx
index 272152f137..73272c7227 100644
--- a/VocaDbWeb/Scripts/Components/Song/SongRoutes.tsx
+++ b/VocaDbWeb/Scripts/Components/Song/SongRoutes.tsx
@@ -7,6 +7,7 @@ import { Navigate, Route, Routes, useParams } from 'react-router-dom';
 
 import { SearchType } from '../../Stores/Search/SearchStore';
 
+const SongEdit = React.lazy(() => import('./SongEdit'));
 const SongRankings = React.lazy(() => import('./SongRankings'));
 const SongVersions = React.lazy(() => import('./SongVersions'));
 
@@ -34,6 +35,7 @@ const SongRoutes = (): React.ReactElement => {
 				}
 			/>
 			<Route path="Details/:id" element={<SongDetailsNavigate />} />
+			<Route path="Edit/:id" element={<SongEdit />} />
 			<Route path="Rankings" element={<SongRankings />} />
 			<Route path="Versions/:id" element={<SongVersions />} />
 			<Route path="*" element={<ErrorNotFound />} />
diff --git a/VocaDbWeb/Scripts/DataContracts/Song/SongForEditContract.ts b/VocaDbWeb/Scripts/DataContracts/Song/SongForEditContract.ts
index 7f1e562198..db011d7baa 100644
--- a/VocaDbWeb/Scripts/DataContracts/Song/SongForEditContract.ts
+++ b/VocaDbWeb/Scripts/DataContracts/Song/SongForEditContract.ts
@@ -9,49 +9,31 @@ import WebLinkContract from '../WebLinkContract';
 import LyricsForSongContract from './LyricsForSongContract';
 import SongContract from './SongContract';
 
+// Corresponds to the SongForEditForApiContract record class in C#.
 export default interface SongForEditContract {
 	albumEventId?: number;
-
 	albumReleaseDate?: string;
-
 	artists: ArtistForAlbumContract[];
-
+	canDelete?: boolean;
 	defaultNameLanguage: string;
-
 	deleted: boolean;
-
 	hasAlbums: boolean;
-
 	id: number;
-
 	lengthSeconds: number;
-
 	lyrics: LyricsForSongContract[];
-
+	maxMilliBpm?: number;
+	minMilliBpm?: number;
+	name?: string;
 	names: LocalizedStringWithIdContract[];
-
 	notes: EnglishTranslatedStringContract;
-
-	originalVersion: SongContract;
-
+	originalVersion?: SongContract;
 	// Publish date, should be in ISO format, UTC timezone. Only includes the date component, no time.
 	publishDate?: string;
-
 	pvs: PVContract[];
-
 	releaseEvent?: ReleaseEventContract;
-
 	songType: SongType;
-
 	status: string;
-
 	tags: number[];
-
 	updateNotes?: string;
-
 	webLinks: WebLinkContract[];
-
-	minMilliBpm?: number;
-
-	maxMilliBpm?: number;
 }
diff --git a/VocaDbWeb/Scripts/Models/LoginManager.ts b/VocaDbWeb/Scripts/Models/LoginManager.ts
index 9bd9ac6ce1..0daf96e8dc 100644
--- a/VocaDbWeb/Scripts/Models/LoginManager.ts
+++ b/VocaDbWeb/Scripts/Models/LoginManager.ts
@@ -172,6 +172,10 @@ export default class LoginManager {
 		return this.hasPermission(PermissionToken.RemoveEditPermission);
 	}
 
+	public get canUploadMedia(): boolean {
+		return this.hasPermission(PermissionToken.UploadMedia);
+	}
+
 	public get canViewAuditLog(): boolean {
 		return this.hasPermission(PermissionToken.ViewAuditLog);
 	}
diff --git a/VocaDbWeb/Scripts/Models/Songs/SongType.ts b/VocaDbWeb/Scripts/Models/Songs/SongType.ts
index 8f5450caec..83af5a6f79 100644
--- a/VocaDbWeb/Scripts/Models/Songs/SongType.ts
+++ b/VocaDbWeb/Scripts/Models/Songs/SongType.ts
@@ -1,28 +1,16 @@
 enum SongType {
 	Unspecified = 'Unspecified',
-
 	Original = 'Original',
-
 	Remaster = 'Remaster',
-
 	Remix = 'Remix',
-
 	Cover = 'Cover',
-
 	Arrangement = 'Arrangement',
-
 	Instrumental = 'Instrumental',
-
 	Mashup = 'Mashup',
-
 	MusicPV = 'MusicPV',
-
 	DramaPV = 'DramaPV',
-
 	Live = 'Live',
-
 	Illustration = 'Illustration',
-
 	Other = 'Other',
 }
 
diff --git a/VocaDbWeb/Scripts/Repositories/SongRepository.ts b/VocaDbWeb/Scripts/Repositories/SongRepository.ts
index 3312faca74..d9c62305df 100644
--- a/VocaDbWeb/Scripts/Repositories/SongRepository.ts
+++ b/VocaDbWeb/Scripts/Repositories/SongRepository.ts
@@ -547,6 +547,22 @@ export default class SongRepository
 			EntryWithArchivedVersionsContract<SongApiContract>
 		>(this.urlMapper.mapRelative(`/api/songs/${id}/versions`));
 	};
+
+	public edit = (contract: SongForEditContract): Promise<number> => {
+		const formData = new FormData();
+		formData.append('contract', JSON.stringify(contract));
+
+		return this.httpClient.post<number>(
+			this.urlMapper.mapRelative(`/api/songs/${contract.id}`),
+			formData,
+			{
+				headers: {
+					'Content-Type': 'multipart/form-data',
+					requestVerificationToken: vdb.values.requestToken,
+				},
+			},
+		);
+	};
 }
 
 export interface PVEmbedParams {
diff --git a/VocaDbWeb/Scripts/Stores/PVs/PVListEditStore.ts b/VocaDbWeb/Scripts/Stores/PVs/PVListEditStore.ts
index ac90885a32..d7eadea031 100644
--- a/VocaDbWeb/Scripts/Stores/PVs/PVListEditStore.ts
+++ b/VocaDbWeb/Scripts/Stores/PVs/PVListEditStore.ts
@@ -5,6 +5,7 @@ import PVType from '@Models/PVs/PVType';
 import PVRepository from '@Repositories/PVRepository';
 import { HttpClientError } from '@Shared/HttpClient';
 import UrlMapper from '@Shared/UrlMapper';
+import $ from 'jquery';
 import _ from 'lodash';
 import { action, makeObservable, observable, runInAction } from 'mobx';
 
@@ -117,7 +118,25 @@ export default class PVListEditStore {
 		return this.pvs;
 	};
 
-	public uploadMedia = (): void => {
-		// TODO
+	public uploadMedia = async (uploadMedia: File): Promise<void> => {
+		const fd = new FormData();
+
+		fd.append('file', uploadMedia);
+		await $.ajax({
+			url: '/Song/PostMedia/',
+			data: fd,
+			processData: false,
+			contentType: false,
+			type: 'POST',
+			success: (result) =>
+				runInAction(() => {
+					this.pvs.push(new PVEditStore(result, 'Original'));
+				}),
+			error: (result) => {
+				const text =
+					result.status === 404 ? 'File too large' : result.statusText;
+				alert(`Unable to post file: ${text}` /* TODO: localize */);
+			},
+		});
 	};
 }
diff --git a/VocaDbWeb/Scripts/Stores/Song/LyricsForSongListEditStore.ts b/VocaDbWeb/Scripts/Stores/Song/LyricsForSongListEditStore.ts
new file mode 100644
index 0000000000..a90a1c92d8
--- /dev/null
+++ b/VocaDbWeb/Scripts/Stores/Song/LyricsForSongListEditStore.ts
@@ -0,0 +1,112 @@
+import LyricsForSongContract from '@DataContracts/Song/LyricsForSongContract';
+import ContentLanguageSelection from '@Models/Globalization/ContentLanguageSelection';
+import TranslationType from '@Models/Globalization/TranslationType';
+import _ from 'lodash';
+import { action, computed, makeObservable, observable } from 'mobx';
+
+import BasicListEditStore from '../BasicListEditStore';
+
+export class LyricsForSongEditStore {
+	@observable public cultureCode: string;
+	@observable public id: number;
+	public readonly isNew: boolean;
+	@observable public language: string /* TODO: enum */;
+	@observable public source: string;
+	@observable public translationType: string /* TODO: enum */;
+	@observable public url: string;
+	@observable public value: string;
+
+	public constructor(contract?: LyricsForSongContract) {
+		makeObservable(this);
+
+		if (contract) {
+			this.id = contract.id!;
+			this.cultureCode = contract.cultureCode!;
+			this.language = contract.language!;
+			this.source = contract.source!;
+			this.translationType = contract.translationType;
+			this.url = contract.url!;
+			this.value = contract.value!;
+		} else {
+			this.id = 0;
+			this.cultureCode = '';
+			this.language =
+				ContentLanguageSelection[ContentLanguageSelection.Unspecified];
+			this.source = '';
+			this.translationType = TranslationType[TranslationType.Translation];
+			this.url = '';
+			this.value = '';
+		}
+
+		this.isNew = !contract;
+	}
+
+	@computed public get showLanguageSelection(): boolean {
+		return this.translationType !== TranslationType[TranslationType.Romanized];
+	}
+}
+
+export default class LyricsForSongListEditStore extends BasicListEditStore<
+	LyricsForSongEditStore,
+	LyricsForSongContract
+> {
+	public readonly original: LyricsForSongEditStore;
+	public readonly romanized: LyricsForSongEditStore;
+
+	private find = (translationType: string): LyricsForSongEditStore => {
+		let store = this.items.find((i) => i.translationType === translationType);
+		if (store) _.pull(this.items, store);
+		else {
+			store = new LyricsForSongEditStore({ translationType: translationType });
+		}
+		return store;
+	};
+
+	public constructor(contracts: LyricsForSongContract[]) {
+		super(LyricsForSongEditStore, contracts);
+
+		this.original = this.find('Original');
+		this.romanized = this.find('Romanized');
+	}
+
+	@action public changeToOriginal = (lyrics: LyricsForSongEditStore): void => {
+		this.original.id = lyrics.id;
+		this.original.value = lyrics.value;
+		this.original.cultureCode = lyrics.cultureCode;
+		this.original.source = lyrics.source;
+		this.original.url = lyrics.url;
+		_.pull(this.items, lyrics);
+	};
+
+	@action public changeToTranslation = (
+		lyrics: LyricsForSongEditStore,
+	): void => {
+		if (lyrics === this.original) {
+			const newLyrics = new LyricsForSongEditStore({
+				id: this.original.id,
+				cultureCode: this.original.cultureCode,
+				source: this.original.source,
+				url: this.original.url,
+				value: this.original.value,
+				translationType: TranslationType[TranslationType.Translation],
+			});
+
+			this.items.push(newLyrics);
+
+			this.original.id = 0;
+			this.original.value = '';
+			this.original.cultureCode = '';
+			this.original.source = '';
+			this.original.url = '';
+		} else {
+			lyrics.translationType = TranslationType[TranslationType.Translation];
+		}
+	};
+
+	public toContracts = (): LyricsForSongContract[] => {
+		return _.chain([this.original, this.romanized])
+			.concat(this.items)
+			.filter((i) => !!i.value)
+			.value();
+	};
+}
diff --git a/VocaDbWeb/Scripts/Stores/Song/SongEditStore.ts b/VocaDbWeb/Scripts/Stores/Song/SongEditStore.ts
new file mode 100644
index 0000000000..2cdb77fab9
--- /dev/null
+++ b/VocaDbWeb/Scripts/Stores/Song/SongEditStore.ts
@@ -0,0 +1,441 @@
+import ArtistForAlbumContract from '@DataContracts/ArtistForAlbumContract';
+import ReleaseEventContract from '@DataContracts/ReleaseEvents/ReleaseEventContract';
+import SongContract from '@DataContracts/Song/SongContract';
+import SongForEditContract from '@DataContracts/Song/SongForEditContract';
+import ArtistHelper from '@Helpers/ArtistHelper';
+import SongHelper from '@Helpers/SongHelper';
+import EntryType from '@Models/EntryType';
+import PVType from '@Models/PVs/PVType';
+import SongType from '@Models/Songs/SongType';
+import WebLinkCategory from '@Models/WebLinkCategory';
+import ArtistRepository from '@Repositories/ArtistRepository';
+import PVRepository from '@Repositories/PVRepository';
+import ReleaseEventRepository from '@Repositories/ReleaseEventRepository';
+import SongRepository from '@Repositories/SongRepository';
+import EntryUrlMapper from '@Shared/EntryUrlMapper';
+import GlobalValues from '@Shared/GlobalValues';
+import UrlMapper from '@Shared/UrlMapper';
+import $ from 'jquery';
+import _ from 'lodash';
+import {
+	action,
+	computed,
+	makeObservable,
+	observable,
+	runInAction,
+} from 'mobx';
+import moment, { Moment } from 'moment';
+
+import AlbumArtistRolesEditStore from '../Artist/AlbumArtistRolesEditStore';
+import ArtistForAlbumEditStore from '../ArtistForAlbumEditStore';
+import BasicEntryLinkStore from '../BasicEntryLinkStore';
+import CustomNameEditStore from '../CustomNameEditStore';
+import DeleteEntryStore from '../DeleteEntryStore';
+import EnglishTranslatedStringEditStore from '../Globalization/EnglishTranslatedStringEditStore';
+import NamesEditStore from '../Globalization/NamesEditStore';
+import PVListEditStore from '../PVs/PVListEditStore';
+import SongBpmFilter from '../Search/SongBpmFilter';
+import SongLengthFilter from '../Search/SongLengthFilter';
+import WebLinksEditStore from '../WebLinksEditStore';
+import LyricsForSongListEditStore from './LyricsForSongListEditStore';
+
+interface PotentialDate {
+	date: Moment;
+	source: string;
+}
+
+export default class SongEditStore {
+	private readonly albumEventId?: number;
+	private readonly albumReleaseDate?: Moment;
+	// List of artist links for this song.
+	@observable public artistLinks: ArtistForAlbumEditStore[] = [];
+	public readonly artistRolesEditStore: AlbumArtistRolesEditStore;
+	@observable public defaultNameLanguage: string; /* TODO: enum */
+	public readonly deleteStore = new DeleteEntryStore(async (notes) => {
+		await $.ajax(
+			this.urlMapper.mapRelative(
+				`api/songs/${this.contract.id}?notes=${encodeURIComponent(notes)}`,
+			),
+			{
+				type: 'DELETE',
+				success: () => {
+					window.location.href = this.urlMapper.mapRelative(
+						EntryUrlMapper.details(EntryType.Song, this.contract.id),
+					);
+				},
+			},
+		);
+	});
+	public readonly editedArtistLink = new CustomNameEditStore();
+	@observable public errors?: Record<string, string[]>;
+	public readonly hasAlbums: boolean;
+	@observable public hasMaxMilliBpm: boolean;
+	public readonly lengthFilter = new SongLengthFilter();
+	public readonly lyrics: LyricsForSongListEditStore;
+	public readonly maxBpmFilter = new SongBpmFilter();
+	public readonly minBpmFilter = new SongBpmFilter();
+	public readonly names: NamesEditStore;
+	public readonly notes: EnglishTranslatedStringEditStore;
+	public readonly originalVersion: BasicEntryLinkStore<SongContract>;
+	@observable public originalVersionSuggestions: SongContract[] = [];
+	@observable public publishDate?: Date;
+	public readonly pvs: PVListEditStore;
+	public readonly releaseEvent: BasicEntryLinkStore<ReleaseEventContract>;
+	@observable public songType: SongType;
+	@observable public status: string /* TODO: enum */;
+	@observable public submitting = false;
+	private readonly tags: number[];
+	@observable public updateNotes = '';
+	public readonly webLinks: WebLinksEditStore;
+
+	public constructor(
+		private readonly values: GlobalValues,
+		private readonly songRepo: SongRepository,
+		private readonly artistRepo: ArtistRepository,
+		pvRepo: PVRepository,
+		eventRepo: ReleaseEventRepository,
+		private readonly urlMapper: UrlMapper,
+		artistRoleNames: { [key: string]: string | undefined },
+		public readonly contract: SongForEditContract,
+		canBulkDeletePVs: boolean,
+		private readonly instrumentalTagId: number,
+	) {
+		makeObservable(this);
+
+		this.originalVersion = new BasicEntryLinkStore((entryId) =>
+			songRepo.getOne({
+				id: entryId,
+				lang: values.languagePreference,
+			}),
+		);
+
+		this.releaseEvent = new BasicEntryLinkStore<ReleaseEventContract>(
+			(entryId) => eventRepo.getOne({ id: entryId }),
+		);
+
+		this.albumEventId = contract.albumEventId;
+		this.albumReleaseDate = contract.albumReleaseDate
+			? moment(contract.albumReleaseDate)
+			: undefined;
+		this.artistLinks = contract.artists.map(
+			(artist) => new ArtistForAlbumEditStore(artist),
+		);
+		this.defaultNameLanguage = contract.defaultNameLanguage;
+		this.hasAlbums = contract.hasAlbums;
+		this.hasMaxMilliBpm =
+			!!contract.maxMilliBpm &&
+			!!contract.minMilliBpm &&
+			contract.maxMilliBpm > contract.minMilliBpm;
+		this.lengthFilter.length = contract.lengthSeconds;
+		this.lyrics = new LyricsForSongListEditStore(contract.lyrics);
+		this.maxBpmFilter.milliBpm = this.hasMaxMilliBpm
+			? contract.maxMilliBpm
+			: undefined;
+		this.minBpmFilter.milliBpm = contract.minMilliBpm;
+		this.names = NamesEditStore.fromContracts(contract.names);
+		this.notes = new EnglishTranslatedStringEditStore(contract.notes);
+		this.originalVersion.id = contract.originalVersion?.id;
+		this.publishDate = contract.publishDate
+			? moment(contract.publishDate).toDate()
+			: undefined;
+		this.pvs = new PVListEditStore(
+			pvRepo,
+			urlMapper,
+			contract.pvs,
+			canBulkDeletePVs,
+			true,
+			true,
+		);
+		this.releaseEvent.id = contract.releaseEvent?.id;
+		this.songType = contract.songType;
+		this.status = contract.status;
+		this.tags = contract.tags;
+		this.webLinks = new WebLinksEditStore(
+			contract.webLinks,
+			Object.values(WebLinkCategory),
+		);
+
+		this.artistRolesEditStore = new AlbumArtistRolesEditStore(artistRoleNames);
+	}
+
+	@computed public get canHaveOriginalVersion(): boolean {
+		return this.songType !== SongType.Original;
+	}
+
+	@computed public get showInstrumentalNote(): boolean {
+		return (
+			this.pvs.isPossibleInstrumental &&
+			this.songType !== SongType.Instrumental &&
+			!this.tags.some((t) => t === this.instrumentalTagId)
+		);
+	}
+
+	@computed public get showLyricsNote(): boolean {
+		return (
+			this.songType !== SongType.Instrumental && !this.originalVersion.isEmpty
+		);
+	}
+
+	@computed public get validationError_duplicateArtist(): boolean {
+		return _.some(
+			_.groupBy(this.artistLinks, (a) =>
+				a.artist ? a.artist.id.toString() : a.name,
+			),
+			(a) => a.length > 1,
+		);
+	}
+
+	@computed public get validationError_needArtist(): boolean {
+		return !this.artistLinks.some((a) => a.artist != null);
+	}
+
+	@computed public get validationError_needOriginal(): boolean {
+		const derivedTypes = [
+			SongType.Remaster,
+			SongType.Cover,
+			SongType.Instrumental,
+			SongType.MusicPV,
+			SongType.Other,
+			SongType.Remix,
+			SongType.Arrangement,
+		];
+		return (
+			(this.notes.original === null || this.notes.original === '') &&
+			this.originalVersion.entry == null &&
+			derivedTypes.includes(this.songType)
+		);
+	}
+
+	@computed public get validationError_needProducer(): boolean {
+		return (
+			!this.validationError_needArtist &&
+			!this.artistLinks.some(
+				(a) =>
+					a.artist != null &&
+					ArtistHelper.isProducerRole(
+						a.artist,
+						a.rolesArrayTyped,
+						SongHelper.getContentFocus(this.songType),
+					),
+			)
+		);
+	}
+
+	@computed public get validationError_needReferences(): boolean {
+		return (
+			!this.hasAlbums &&
+			_.isEmpty(this.notes.original) &&
+			_.isEmpty(this.webLinks.items) &&
+			_.isEmpty(this.pvs.pvs)
+		);
+	}
+
+	@computed public get validationError_needType(): boolean {
+		return this.songType === SongType.Unspecified;
+	}
+
+	@computed
+	public get validationError_nonInstrumentalSongNeedsVocalists(): boolean {
+		return (
+			!this.validationError_needArtist &&
+			!SongHelper.isInstrumental(this.songType) &&
+			this.songType !== SongType.Arrangement && // Arrangements are considered possible instrumentals in this context
+			!this.tags.some((t) => t === this.instrumentalTagId) &&
+			!this.artistLinks.some((a) =>
+				ArtistHelper.isVocalistRole(a.artist, a.rolesArrayTyped),
+			)
+		);
+	}
+
+	@computed public get validationError_redundantEvent(): boolean {
+		return (
+			!!this.albumEventId &&
+			!this.releaseEvent.isEmpty &&
+			this.releaseEvent.id === this.albumEventId
+		);
+	}
+
+	@computed public get validationError_unspecifiedNames(): boolean {
+		return !this.names.hasPrimaryName;
+	}
+
+	@computed public get hasValidationErrors(): boolean {
+		return (
+			this.validationError_duplicateArtist ||
+			this.validationError_needArtist ||
+			this.validationError_needOriginal ||
+			this.validationError_needProducer ||
+			this.validationError_needReferences ||
+			this.validationError_needType ||
+			this.validationError_nonInstrumentalSongNeedsVocalists ||
+			this.validationError_redundantEvent ||
+			this.validationError_unspecifiedNames
+		);
+	}
+
+	@computed public get eventDate(): Moment | undefined {
+		return this.releaseEvent.entry && this.releaseEvent.entry.date
+			? moment(this.releaseEvent.entry.date)
+			: undefined;
+	}
+
+	@computed public get firstPvDate(): Moment {
+		return _.chain(this.pvs.pvs)
+			.filter((pv) => !!pv.publishDate && pv.pvType === PVType[PVType.Original])
+			.map((pv) => moment(pv.publishDate))
+			.sortBy((p) => p)
+			.head()
+			.value();
+	}
+
+	@computed public get suggestedPublishDate(): PotentialDate {
+		return _.chain([
+			{ date: this.albumReleaseDate, source: 'Album' },
+			{ date: this.firstPvDate, source: 'PV' },
+		])
+			.filter((d) => d.date != null)
+			.map((d) => d as PotentialDate)
+			.sortBy((d) => d.date)
+			.head()
+			.value();
+	}
+
+	// Adds a new artist to the album
+	// artistId: Id of the artist being added, if it's an existing artist. Can be null, if custom artist.
+	// customArtistName: Name of the custom artist being added. Can be null, if existing artist.
+	public addArtist = async (
+		artistId?: number,
+		customArtistName?: string,
+	): Promise<void> => {
+		if (artistId) {
+			const artist = await this.artistRepo.getOne({
+				id: artistId,
+				lang: this.values.languagePreference,
+			});
+
+			const data: ArtistForAlbumContract = {
+				artist: artist,
+				isSupport: false,
+				name: artist.name,
+				id: 0,
+				roles: 'Default',
+			};
+
+			const link = new ArtistForAlbumEditStore(data);
+			runInAction(() => {
+				this.artistLinks.push(link);
+			});
+		} else {
+			const data: ArtistForAlbumContract = {
+				artist: undefined!,
+				name: customArtistName,
+				isSupport: false,
+				id: 0,
+				roles: 'Default',
+			};
+
+			const link = new ArtistForAlbumEditStore(data);
+			runInAction(() => {
+				this.artistLinks.push(link);
+			});
+		}
+	};
+
+	public customizeName = (artistLink: ArtistForAlbumEditStore): void => {
+		this.editedArtistLink.open(artistLink);
+	};
+
+	public editArtistRoles = (artist: ArtistForAlbumEditStore): void => {
+		this.artistRolesEditStore.show(artist);
+	};
+
+	@action public findOriginalSongSuggestions = async (): Promise<void> => {
+		this.originalVersionSuggestions = [];
+
+		const names = (this.names.getPrimaryNames().length
+			? this.names.getPrimaryNames()
+			: this.names.getAllNames()
+		).map((n) => n.value);
+		const [all, originals] = await Promise.all([
+			this.songRepo.getByNames({
+				names: names,
+				ignoreIds: [this.contract.id],
+				lang: this.values.languagePreference,
+			}),
+			this.songRepo.getByNames({
+				names: names,
+				ignoreIds: [this.contract.id],
+				lang: this.values.languagePreference,
+				songTypes: [SongType.Original, SongType.Remaster],
+			}),
+		]);
+
+		const suggestions = _.chain(originals)
+			.unionBy(all, (i) => i.id)
+			.take(3)
+			.value();
+
+		runInAction(() => {
+			this.originalVersionSuggestions = suggestions;
+		});
+	};
+
+	// Removes an artist from this album.
+	@action public removeArtist = (artist: ArtistForAlbumEditStore): void => {
+		_.pull(this.artistLinks, artist);
+	};
+
+	@action public selectOriginalVersion = (song: SongContract): void => {
+		this.originalVersion.id = song.id;
+	};
+
+	@action public submit = async (): Promise<number> => {
+		this.submitting = true;
+
+		try {
+			const id = await this.songRepo.edit({
+				artists: this.artistLinks.map((artistLink) => artistLink.toContract()),
+				defaultNameLanguage: this.defaultNameLanguage,
+				deleted: false,
+				hasAlbums: this.hasAlbums,
+				id: this.contract.id,
+				lengthSeconds: this.lengthFilter.length,
+				lyrics: this.lyrics.toContracts(),
+				maxMilliBpm: this.hasMaxMilliBpm
+					? this.maxBpmFilter.milliBpm
+					: undefined,
+				minMilliBpm: this.minBpmFilter.milliBpm,
+				names: this.names.toContracts(),
+				notes: this.notes.toContract(),
+				originalVersion: this.originalVersion.entry,
+				publishDate: this.publishDate
+					? this.publishDate.toISOString()
+					: undefined,
+				pvs: this.pvs.toContracts(),
+				releaseEvent: this.releaseEvent.entry,
+				songType: this.songType,
+				status: this.status,
+				tags: this.tags,
+				updateNotes: this.updateNotes,
+				webLinks: this.webLinks.toContracts(),
+			});
+
+			return id;
+		} catch (error: any) {
+			if (error.response) {
+				runInAction(() => {
+					this.errors = undefined;
+
+					if (error.response.status === 400)
+						this.errors = error.response.data.errors;
+				});
+			}
+
+			throw error;
+		} finally {
+			runInAction(() => {
+				this.submitting = false;
+			});
+		}
+	};
+}