[feature] Add "Instance Info" settings panel section, with domain blocks + allows (#4193)

This pull request adds a new read-only, user-level "instance info" section to the settings panel, which presents api/v2/instance info in a nice readable format, and also gives the user authenticated access to the blocklist and allowlist of the domain.

Closes https://codeberg.org/superseriousbusiness/gotosocial/issues/3711
Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4193
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>

1 files changed, 44 insertions, 0 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 67937bd9e..742407ea3 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -1549,6 +1549,50 @@ button.tab-button {
 	}
 }
 
+.instance-info-view {
+	.info-list .info-list-entry {
+		/*
+			Some of the labels are quite
+			long so ensure there's enough
+			gap when they're wrapped.
+		*/
+		gap: 1rem;
+	}
+
+	/*
+		Make sure ellipsis works
+		properly for v. long domains.
+	*/
+	.list.domain-perm-list > .entry > .domain {
+		display: inline-block;
+		font-weight: bold;
+	}
+
+	/*
+		Make sure we can break.
+	*/
+	.list.domain-perm-list > .entry > .public_comment {
+		word-wrap: anywhere;
+	}
+
+	/*
+		Disable the hover effects as
+		these entries aren't clickable.
+	*/
+	.list.domain-perm-list > .entry:hover {
+		background: $list-entry-bg;
+	}
+	.list.domain-perm-list > .entry:nth-child(2n):hover {
+		background: $list-entry-alternate-bg;
+	}
+	.list.domain-perm-list > .entry {
+		&:active, &:focus, &:hover, &:target {
+			border-color: $gray1;
+			border-top-color: transparent;
+		}
+	}
+}
+
 .instance-rules {
 	list-style-position: inside;
 	margin: 0;