[feature] Allow users to set default interaction policies per status visibility (#3108)

* [feature] Allow users to set default interaction policies

* use vars for default policies

* avoid some code repetition

* unfuck form binding

* avoid bonkers loop

* beep boop

* put policyValsToAPIPolicyVals in separate function

* don't bother with slices.Grow

* oops

1 files changed, 83 insertions, 1 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index f9c098ace..1cf723754 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -343,7 +343,7 @@ section.with-sidebar > form {
 	
 	.labelinput .border {
 		border-radius: 0.2rem;
-		border: 0.15rem solid $border_accent;
+		border: 0.15rem solid $border-accent;
 		padding: 0.3rem;
 		display: flex;
 		flex-direction: column;
@@ -867,6 +867,41 @@ button.with-padding {
 	padding: 0.5rem calc(0.5rem + $fa-fw);
 }
 
+.tab-buttons {
+	display: flex;
+	max-width: fit-content;
+	justify-content: space-between;
+	gap: 0.15rem;
+}
+
+button.tab-button {
+	border-top-left-radius: $br;
+	border-top-right-radius: $br;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	box-shadow: none;
+	background: $blue1;
+
+	&:hover {
+		background: $button-hover-bg;
+	}
+
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+
+	font-size: 1rem;
+
+	@media screen and (max-width: 20rem) {
+		font-size: 0.75rem;
+	}
+
+	&.active {
+		background: $button-bg;
+		cursor: default;
+	}
+}
+
 .loading-icon {
 	align-self: flex-start;
 }
@@ -1370,6 +1405,53 @@ button.with-padding {
 	}
 }
 
+.interaction-default-settings {	
+	.interaction-policy-section {
+		padding: 1rem;
+		display: none;
+		
+		&.active {
+			display: flex;
+		}
+		
+		flex-direction: column;
+		gap: 1rem;
+		border: 0.15rem solid $input-border;
+
+		fieldset {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+
+			margin: 0;
+			padding: 0.5rem 1rem 1rem 1rem;
+
+			border: $boxshadow-border;
+			border-radius: 0.1rem;
+			box-shadow: $boxshadow;
+
+			>legend {
+				display: flex;
+				gap: 0.5rem;
+				align-items: center;
+				font-weight: bold;
+				font-size: large;
+			}
+
+			hr {
+				width: 100%;
+			}
+
+			.something-else {
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
+				margin-top: -0.3rem;
+			}
+		}
+	}
+}
+
 @media screen and (orientation: portrait) {
 	.reports .report .byline {
 		grid-template-columns: 1fr;