Make Wiki diff collapsable and collapsed by default (#2029)

* make wiki diff collapsable and collapsed by default

* it needs this class for the chevron to work correctly

TASVideos/TagHelpers/DiffPanelTagHelper.cs

@@ -13,14 +13,22 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
 	{
 		ViewContext.ViewData.UseDiff();
 		output.TagName = "div";
+		output.AddCssClass("card mt-4");
 
 		output.Content.AppendHtml(
 			"""
-			<div id="diff-view" class="mt-3 border border-secondary d-none"></div>
-			<div id="diff-options" class="d-none py-3">
-				<label><input name="diff-type" type="radio" value="1" checked="checked" /> Inline</label>
-				<label><input name="diff-type" type="radio" value="0" /> Side by Side</label>
-				<label><input name="context-size" type="number" value="5" min="0" max="9999" /> Context Size</label>
+			<div class="card-header">
+				<a class="text-body collapsed" data-bs-toggle="collapse" data-bs-target="#diff-container" role="button"><i class="fa fa-chevron-circle-down"></i> Diff</a>
+			</div>
+			<div class="card-body py-0 bg-dark-subtle">
+				<div id="diff-container" class="collapse">
+					<div id="diff-view" class="border border-dark-subtle mt-3"></div>
+					<div id="diff-options" class="py-3">
+						<label><input name="diff-type" type="radio" value="1" checked="checked" /> Inline</label>
+						<label><input name="diff-type" type="radio" value="0" /> Side by Side</label>
+						<label><input name="context-size" type="number" value="5" min="0" max="9999" /> Context Size</label>
+					</div>
+				</div>
 			</div>
 			""");
 	}