[frogend] Settings refactor (#1318)

* yakshave new form field structure

* fully refactor user profile settings form

* use rtk query api for profile settings

* refactor user post settings

* refactor password change form

* refactor admin settings

* FormWithData structure for user forms

* admin actions refactor

* whitespace

* fix user settings data prop

* remove superfluous logging

* cleanup old code

* refactor federation/suspend (overview, detail)

* mostly abstracted (emoji) checkbox list

* refactor parse-from-toot

* refactor custom-emoji, progress on federation bulk

* loading icon styling to prevent big spinny

* refactor federation import-export interface

* cleanup old files

* [chore] Update/add license headers for 2023

* redux fixes

* text-field exports

* appease the linter

* refactor authentication with RTK Query

* fix login/logout state transition weirdness

* fixes/cleanup

* small linter-related fixes

* add eslint license header check, fix existing files

* remove old code, clarify comment

* clarify suspend on subdomains

* collapse if/else

* fa-fw width info comment

1 files changed, 173 insertions, 50 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 1b655146b..2d569759f 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -16,6 +16,11 @@
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+/* Fork-Awesome 'fa-fw' fixed icon width 
+   keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
+*/
+$fa-fw: 1.28571429em;
+
 body {
 	grid-template-rows: auto 1fr;
 }
@@ -40,7 +45,7 @@ section {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 
-		& > div {
+		& > div, & > form {
 			border-left: 0.2rem solid $border-accent;
 			padding-left: 0.4rem;
 			display: flex;
@@ -50,7 +55,7 @@ section {
 
 			h2 {
 				margin: 0;
-				margin-bottom: 0.5rem;
+				margin-top: 0.1rem;
 			}
 
 			&:only-child {
@@ -213,7 +218,7 @@ input, select, textarea {
 	) !important;
 }
 
-section.with-sidebar > div {
+section.with-sidebar > div, section.with-sidebar > form {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@@ -223,19 +228,17 @@ section.with-sidebar > div {
 		line-height: 1.5rem;
 	}
 
+	button {
+		width: auto;
+		align-self: flex-start;
+		line-height: 1.5rem;
+	}
+
 	input[type=checkbox] {
 		justify-self: start;
 		width: initial;
 	}
 
-	input:read-only {
-		border: none;
-	}
-
-	input:invalid {
-		border-color: red;
-	}
-
 	textarea {
 		width: 100%;
 	}
@@ -337,15 +340,24 @@ section.with-sidebar > div {
 	}
 }
 
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
 .form-field label {
 	font-weight: bold;
 }
 
-.form-field.file {
-	width: 100%;
-	display: flex;
-}
+.form-field.file label {
+	display: grid;
+	grid-template-columns: auto 1fr;
 
+	.label {
+		grid-column: 1 / span 2;
+	}
+}
 
 span.form-info {
 	flex: 1 1 auto;
@@ -353,39 +365,70 @@ span.form-info {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	padding: 0.3rem 0;
+	font-weight: initial;
 }
 
 .list {
 	display: flex;
 	flex-direction: column;
-	margin-top: 0.5rem;
-	max-height: 40rem;
-	overflow: auto;
+
+	&.scrolling {
+		max-height: 40rem;
+		overflow: auto;
+	}
+
+	.header, .entry {
+		padding: 0.5rem;
+	}
+
+	.header {
+		border: 0.1rem solid transparent; /* for alignment with .entry border padding */
+		background: $gray2;
+		display: flex;
+	}
+
+	input[type=checkbox] {
+		margin-left: 0.5rem;
+	}
 
 	.entry {
 		display: flex;
 		flex-wrap: wrap;
 		background: $settings-entry-bg;
+		border: 0.1rem solid transparent;
 
+		&:nth-child(even) {
+			background: $settings-entry-alternate-bg;
+		}
+	
 		&:hover {
 			background: $settings-entry-hover-bg;
 		}
+	
+		&:active, &:focus, &:hover {
+			border-color: $fg-accent;
+		}
+	}
+}
+
+.checkbox-list {
+	.header, .entry {
+		gap: 1rem;
 	}
 }
 
 .instance-list {
+	p {
+		margin-top: 0;
+	}
+
 	.filter {
 		display: flex;
 		gap: 0.5rem;
-
-		input {
-			width: auto;
-			flex: 1 1 auto;
-		}
 	}
 
 	.entry {
-		padding: 0.3rem;
+		padding: 0.5rem;
 		margin: 0.2rem 0;
 
 		#domain {
@@ -406,9 +449,12 @@ span.form-info {
 	background: $settings-entry-bg;
 
 	.entry {
-		padding: 0.5rem;
 		flex-direction: column;
 
+		b {
+			padding-left: 0.4rem;
+		}
+
 		.emoji-group {
 			display: flex;
 			flex-wrap: wrap;
@@ -550,6 +596,7 @@ span.form-info {
 
 .row {
 	display: flex;
+	gap: 0.5rem;
 }
 
 .emoji-detail {
@@ -566,6 +613,12 @@ span.form-info {
 		align-items: center;
 		gap: 0.5rem;
 
+		div {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+
 		img {
 			height: 8.5rem;
 			width: 8.5rem;
@@ -576,15 +629,13 @@ span.form-info {
 	}
 
 	.update-category {
-		margin-bottom: 1rem;
 		.combobox-wrapper button {
 			font-size: 1rem;
 			margin: 0.15rem 0;
 		}
 	
 		.row {
-			margin-top: 0.4rem;
-			gap: 0.5rem;
+			margin-top: 0.1rem;
 		}
 	}
 
@@ -607,36 +658,18 @@ span.form-info {
 		flex-direction: column;
 		gap: 1rem;
 
-		& > span {
-			margin-bottom: -1rem;
+		span {
+			margin-bottom: -0.5rem;
 		}
 		
 		.action-buttons {
 			gap: 1rem;
 		}
 
-		.emoji-list {
-			display: flex;
-			flex-direction: column;
-
-			& > * {
-				gap: 1rem;
-				align-items: center;
-				padding: 0.5rem 1rem;
-			}
-
-			.header {
-				background: $gray2;
-				display: flex;
-			}
-
-			.row {
+		.checkbox-list {
+			.entry {
 				display: grid;
 				grid-template-columns: auto auto 1fr;
-
-				&:hover {
-					background: $settings-entry-hover-bg;
-				}
 			}
 
 			.emoji {
@@ -646,4 +679,94 @@ span.form-info {
 			}
 		}
 	}
+}
+
+.info {
+	color: $info-fg;
+	background: $info-bg;
+	padding: 0.5rem;
+	border-radius: $br;
+
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+
+	i {
+		margin-top: 0.1em;
+	}
+	
+	a {
+		color: $info-link;
+	}
+}
+
+button.with-icon {
+	display: flex;
+	align-content: center;
+	padding-right: calc(0.5rem + $fa-fw);
+
+	.fa {
+		align-self: center;
+	}
+}
+
+button.with-padding {
+	padding: 0.5rem calc(0.5rem + $fa-fw);
+}
+
+.loading-icon {
+	align-self: flex-start;
+}
+
+.fadeout {
+	animation-name: fadeout;
+	animation-duration: 0.5s;
+	animation-delay: 2s;
+	animation-fill-mode: forwards;
+}
+
+.suspend-import-list {
+	.checkbox-list {
+		.header, .entry {
+			display: grid;
+			grid-template-columns: auto 25ch auto 1fr;
+		}
+	}
+
+	.entry {
+		#icon {
+			margin-left: -0.5rem;
+			align-self: center;
+		}
+
+		#icon .already-blocked {
+			color: $green1;
+		}
+
+		p {
+			align-self: center;
+			margin: 0;
+		}
+	}
+}
+
+.form-field.radio {
+	&, label {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	input {
+		width: auto;
+		place-self: center;
+	}
+}
+
+@keyframes fadeout {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
 }
\ No newline at end of file