[feature/frogend] (Mastodon) domain block CSV import (#1390)

* checkbox-list styling with taller <p> element

* CSV import/export, UI/UX improvements to import-export interface

* minor styling tweaks

* csv export, clean up export type branching

* abstract domain block entry validation

* foundation for PSL check + suggestions

* Squashed commit of the following:

commit e3655ba4fbea1d55738b2f9e407d3378af26afe6
Author: f0x <f0x@cthu.lu>
Date:   Tue Jan 31 15:19:10 2023 +0100

    let debug depend on env (prod/debug) again

commit 79c792b832a2b59e472dcdff646bad6d71b42cc9
Author: f0x <f0x@cthu.lu>
Date:   Tue Jan 31 00:34:01 2023 +0100

    update checklist components

commit 4367960fe4be4e3978077af06e63a729d64e32fb
Author: f0x <f0x@cthu.lu>
Date:   Mon Jan 30 23:46:20 2023 +0100

    checklist performance improvements

commit 204a4c02d16ffad189a6e8a6001d5bf4ff95fc4e
Author: f0x <f0x@cthu.lu>
Date:   Mon Jan 30 20:05:34 2023 +0100

    checklist field: use reducer for state

* remove debug logging

* show and use domain block suggestion

* restructure import/export buttons

* updating suggestions

* suggestion overview

* restructure check-list behavior, domain import/export

1 files changed, 90 insertions, 4 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index d46df683a..7affd8269 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -69,6 +69,10 @@ section {
 			&:last-child {
 				margin-bottom: 0;
 			}
+
+			&.without-border {
+				border-left: 0;
+			}
 		}
 	}
 
@@ -370,7 +374,8 @@ span.form-info {
 
 .checkbox-list {
 	.header, .entry {
-		gap: 1rem;
+		display: grid;
+		gap: 0 1rem;
 	}
 }
 
@@ -629,7 +634,6 @@ span.form-info {
 
 		.checkbox-list {
 			.entry {
-				display: grid;
 				grid-template-columns: auto auto 1fr;
 			}
 
@@ -688,9 +692,14 @@ button.with-padding {
 
 .suspend-import-list {
 	.checkbox-list {
-		.header, .entry {
-			display: grid;
+		.entry {
 			grid-template-columns: auto 25ch auto 1fr;
+			grid-template-rows: auto 1fr;
+
+			p {
+				grid-column: 4;
+				grid-row: 1 / span 2;
+			}
 		}
 	}
 
@@ -704,6 +713,10 @@ button.with-padding {
 			color: $green1;
 		}
 
+		#icon .suggest-changes {
+			color: $orange2;
+		}
+
 		p {
 			align-self: center;
 			margin: 0;
@@ -711,6 +724,75 @@ button.with-padding {
 	}
 }
 
+.import-export {
+	p {
+		margin: 0;
+	}
+
+	.export-file {
+		display: flex;
+		gap: 0.7rem;
+		align-items: center;
+	}
+
+	.button-grid {
+		display: inline-grid;
+		grid-template-columns: auto auto auto;
+		align-self: start;
+		gap: 0.5rem;
+
+		button {
+			width: 100%;
+		}
+	}
+}
+
+.update-hints {
+	background: $list-entry-alternate-bg;
+	border: 0.1rem solid $border-accent;
+	/* border-radius: $br; */
+	padding: 0.5rem;
+	display: flex;
+	flex-direction: column;
+
+	.hints {
+		max-width: 100%;
+		align-self: start;
+		align-items: center;
+		margin: 1rem 0;
+		display: inline-grid;
+		grid-template-columns: auto auto auto auto;
+		gap: 1rem;
+	}
+}
+
+.export-format-table {
+	width: 100%;
+	background: $list-entry-alternate-bg;
+	border-collapse: collapse;
+
+	th, td {
+		border: 0.1rem solid $gray1;
+		padding: 0.3rem;
+	}
+
+	th {
+		background: $list-entry-bg;
+	}
+
+	td {
+		text-align: center;
+
+		.fa-check {
+			color: $green1;
+		}
+
+		.fa-times {
+			color: $error3;
+		}
+	}
+}
+
 .form-field.radio {
 	&, label {
 		display: flex;
@@ -723,6 +805,10 @@ button.with-padding {
 	}
 }
 
+[role="button"] {
+	cursor: pointer;
+}
+
 @keyframes fadeout {
 	from {
 		opacity: 1;