Merge branch 'main' into instance-custom-css

2026-01-03 19:03:16 -06:00 · 2024-12-02 10:55:05 +01:00 · 2024-12-02 10:55:05 +01:00 · 7cd9b0eae0
commit 7cd9b0eae0
parent c8fb4c17f1 dce85a2b7a
947 changed files with 689490 additions and 178161 deletions
--- a/web/assets/themes/blurple-auto.css
+++ b/web/assets/themes/blurple-auto.css
@ -0,0 +1,10 @@
+/*
+  theme-title: Blurple (auto)
+  theme-description: Official blurple theme that adapts to system preferences
+*/
+
+/* Default to dark theme */
+@import url("blurple-dark.css");
+
+@import url("blurple-light.css") screen and (prefers-color-scheme: light);
+@import url("blurple-dark.css") screen and (prefers-color-scheme: dark);
--- a/web/assets/themes/blurple-dark.css
+++ b/web/assets/themes/blurple-dark.css
@ -22,7 +22,7 @@
  --blue3: var(--blurple3);

  /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--blurple7), black);
+  --bg: var(--blurple7);
  --bg-accent: var(--blurple6);
  --fg: var(--blurple1);
  --fg-reduced: var(--blurple2);
@ -44,6 +44,11 @@
  --boxshadow-border: 0.08rem solid black;
 }

+/* Main page background */
+body {
+  background: linear-gradient(var(--blurple7), black);
+}
+
 /* Scroll bar */
 html, body {
  scrollbar-color: var(--blurple4) var(--blurple7);
--- a/web/assets/themes/blurple-light.css
+++ b/web/assets/themes/blurple-light.css
@ -24,7 +24,7 @@
  --blue3: var(--blurple6);

  /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--blurple1), white);
+  --bg: var(--blurple1);
  --bg-accent: var(--white2);
  --fg: var(--gray1);
  --fg-reduced: var(--gray2);
@ -46,6 +46,11 @@
  --boxshadow-border: 0.08rem solid var(--blurple6);
 }

+/* Main page background */
+body {
+  background: linear-gradient(var(--blurple1), white);
+}
+
 /* Scroll bar */
 html, body {
  scrollbar-color: var(--blurple5) var(--blurple2);
--- a/web/assets/themes/brutalist-auto.css
+++ b/web/assets/themes/brutalist-auto.css
@ -0,0 +1,10 @@
+/*
+  theme-title: Brutalist (auto)
+  theme-description: Official (Pseudo-)monochrome brutality theme that adapts to system preferences
+*/
+
+/* Default to brutalist theme */
+@import url("brutalist.css");
+
+@import url("brutalist.css") screen and (prefers-color-scheme: light);
+@import url("brutalist-dark.css") screen and (prefers-color-scheme: dark);
--- a/web/assets/themes/ecks-pee.css
+++ b/web/assets/themes/ecks-pee.css
@ -66,11 +66,7 @@
  --blue3: var(--ecks-pee-white);

  /* Basic page styling (background + foreground) */
-  --bg: radial-gradient(
-    circle closest-corner at 20% 20%,
-    var(--ecks-pee-lighter-blue),
-    var(--ecks-pee-light-blue)
-  );
+  --bg: var(--ecks-pee-light-blue);
  --bg-accent: var(--ecks-pee-blue);
  --fg: var(--ecks-pee-white);
  --fg-reduced: var(--ecks-pee-lightest-blue);
@ -122,6 +118,15 @@
  src: url(/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff) format('woff');
 }

+/* Main page background */
+body {
+  background: radial-gradient(
+    circle closest-corner at 20% 20%,
+    var(--ecks-pee-lighter-blue),
+    var(--ecks-pee-light-blue)
+  );
+}
+
 /* Scroll bar */
 html, body {
  /* Try Atkinson, fall back to default GtS fonts */
--- a/web/assets/themes/midnight-trip.css
+++ b/web/assets/themes/midnight-trip.css
@ -19,8 +19,14 @@
  --blue3: var(--acid-green);
 }

+/* Main page background */
 body {
-  background: linear-gradient(90deg, var(--darkmagenta), black, var(--darkmagenta));
+  background: linear-gradient(
+    90deg,
+    var(--darkmagenta),
+    black,
+    var(--darkmagenta)
+  );
 }

 html, body {
--- a/web/assets/themes/moonlight-hunt.css
+++ b/web/assets/themes/moonlight-hunt.css
@ -0,0 +1,162 @@
+/*
+  theme-title: Moonlight Hunt
+  theme-description: Ominous dark blue / black with a tinge of blood red. You may think it all a mere bad dream.
+*/
+
+:root {
+  /* Define our palette */
+  --bleached-bone: #f3e3d4;
+  --void-blue: #0e131f;
+  --outer-space: #06080e;
+  --ghastly-blue: #88bebe;
+  --blood-red: #6c1619;
+  --bright-red: #f61a1ae6;
+  --feral-orange: #f78d17;
+
+  /* Restyle basic colors */
+  --white1: var(--void-blue);
+  --white2: var(--void-blue);
+  --orange2: var(--bright-red);
+  --blue1: var(--ghastly-blue);
+  --blue2: var(--ghastly-blue);
+  --blue3: var(--ghastly-blue);
+
+  /* Basic page styling (background + foreground) */
+  --bg: var(--void-blue);
+  --bg-accent: var(--void-blue);
+  --fg: var(--bleached-bone);
+  --fg-reduced: var(--bleached-bone);
+  --profile-bg: var(--void-blue); 
+
+  /* Buttons */
+  --bloodshot: linear-gradient(
+    var(--bright-red),
+    var(--blood-red),
+    var(--blood-red),
+    var(--bright-red)
+  );
+  --button-bg: var(--bloodshot);
+  --button-fg: var(--bleached-bone);
+
+  /* Statuses */
+  --status-bg: var(--void-blue);
+  --status-focus-bg: var(--void-blue);
+
+  /* Used around statuses + other items */
+  --ghastly-border: 0.1rem solid var(--ghastly-blue);
+  --boxshadow-border: var(--ghastly-border);
+}
+
+/* Main page background */
+body {
+  background: linear-gradient(
+    90deg,
+    var(--blood-red),
+    black 20%,
+    black 80%,
+    var(--blood-red)
+  );
+}
+
+/* Scroll bar */
+html, body {
+  scrollbar-color: var(--bright-red) var(--outer-space);
+  text-shadow: 1px 1px var(--blood-red);
+}
+
+/* Instance title color */
+.page-header a h1 {
+  color: var(--bleached-bone);
+}
+
+.profile .profile-header {
+  border: var(--ghastly-border);
+}
+
+.col-header {
+  border: var(--ghastly-border);
+  background: var(--outer-space);
+}
+
+.profile .about-user .col-header {
+  background: var(--void-blue);
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Fiddle around with borders on about sections */
+.profile .about-user .fields,
+.profile .about-user .bio,
+.profile .about-user .accountstats {
+  border-left: var(--ghastly-border);
+  border-right: var(--ghastly-border);
+}
+.profile .about-user .accountstats {
+  border-bottom: var(--ghastly-border);
+  background: var(--outer-space);
+}
+
+/* Role and bot badge backgrounds */
+.profile .profile-header .basic-info .namerole .role,
+.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
+  background: var(--outer-space);
+}
+
+/* Status media */
+.status .media .media-wrapper {
+  border: var(--ghastly-border);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--bleached-bone);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: var(--outer-space);
+}
+
+/* Status polls */
+.status .text .poll {
+  background-color: var(--outer-space);
+  border: var(--ghastly-border);
+}
+.status .text .poll .poll-info {
+  background-color: var(--void-blue);
+}
+
+/* Code snippets */
+pre, pre[class*="language-"],
+code, code[class*="language-"] {
+  background-color: var(--outer-space);
+  color: var(--bleached-bone);
+}
+
+/* Block quotes */
+blockquote {
+  background-color: var(--outer-space);
+  color: var(--bleached-bone);
+}
+
+/* Status info bars */
+.status .status-info,
+.status.expanded .status-info {
+  color: var(--ghastly-blue);
+  border-top: 0.1rem dotted var(--ghastly-blue);
+  background: var(--outer-space);
+}
+
+/* Make show more/less buttons more legible */
+.status .button {
+  border: 1px solid var(--feral-orange);
+}
+.status .button:hover {
+  border: 1px solid var(--bleached-bone);
+  background: var(--bloodshot);
+}
+
+/* Back + next links */
+.profile .statuses .backnextlinks a {
+  color: var(--bleached-bone);
+}
+
+.page-footer nav ul li a {
+  color: var(--bleached-bone);
+}
--- a/web/assets/themes/rain-forest.css
+++ b/web/assets/themes/rain-forest.css
@ -8,21 +8,21 @@
   v1.0 by xmgz at github */

 :root {
-/* color definitions */
--dgreen1: #003333;
--dgreen2: #196C41;
--dgreen3: #027C68;
--dgreen4: #009933;
--dblue1: #141E46;   /* very dark blue */
--typecolor: #F8F4EC;
--linkcolor: #c0f0c0; /* very soft lime green */
--sunny: #FCDC2A;
--lesssunny: #FF7431; /* papaya */
-/* wood/earth colors */
--codebg: #3A2722;  /* darker caoba */
--quotebg: #800000; /* maroon */
-/* water, post's date and stats. User stats */
--fg-reduced: #BBEBFF;
+  /* color definitions */
+  --dgreen1: #003333;
+  --dgreen2: #196C41;
+  --dgreen3: #027C68;
+  --dgreen4: #009933;
+  --dblue1: #141E46;   /* very dark blue */
+  --typecolor: #F8F4EC;
+  --linkcolor: #c0f0c0; /* very soft lime green */
+  --sunny: #FCDC2A;
+  --lesssunny: #FF7431; /* papaya */
+  /* wood/earth colors */
+  --codebg: #3A2722;  /* darker caoba */
+  --quotebg: #800000; /* maroon */
+  /* water, post's date and stats. User stats */
+  --fg-reduced: #BBEBFF;

  /* Restyle basic colors  */
  --blue1: var(--dgreen2);
@ -43,12 +43,9 @@
  --button-bg: var(--lesssunny);
  --button-fg: var(--dblue1);

-
-
  /* Used around statuses + other items */
  --boxshadow: 0 0.4rem 0.7rem -0.1rem rgba(252,220,42,0.15); /* subtle status glow */
  --boxshadow-border: 0.07rem solid var(--lesssunny);  /* thin papaya border */
-
 }


--- a/web/assets/themes/soft.css
+++ b/web/assets/themes/soft.css
@ -20,7 +20,7 @@
  --br-inner: 0.4rem; 

  /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(-90deg, var(--soft-blue), var(--soft-pink), white, var(--soft-pink), var(--soft-blue));
+  --bg: var(--soft-pink);
  --bg-accent: var(--soft-pink-translucent);
  --fg: var(--gray1);
  --fg-reduced: var(--gray3);
@ -41,6 +41,18 @@
  --boxshadow-border: 0.08rem solid var(--gray8);
 }

+/* Main page background */
+body {
+  background: linear-gradient(
+    -90deg,
+    var(--soft-blue),
+    var(--soft-pink),
+    white,
+    var(--soft-pink),
+    var(--soft-blue)
+  );
+}
+
 /* Scroll bar */
 html, body {
  scrollbar-color: var(--orange2) var(--soft-pink);
--- a/web/assets/themes/solarized-auto.css
+++ b/web/assets/themes/solarized-auto.css
@ -0,0 +1,10 @@
+/*
+  theme-title: Solarized (auto)
+  theme-description: Solarized theme that adapts to system preferences
+*/
+
+/* Default to dark theme */
+@import url("solarized-dark.css");
+
+@import url("solarized-light.css") screen and (prefers-color-scheme: light);
+@import url("solarized-dark.css") screen and (prefers-color-scheme: dark);
--- a/web/assets/themes/solarized-dark.css
+++ b/web/assets/themes/solarized-dark.css
@ -1,6 +1,6 @@
 /*
-  theme-title: Solarized (dark)
-  theme-description: Solarized sloth (dark)
+  theme-title: Solarized dark
+  theme-description: Dark green and grey solarized theme with red trim
 */

 /*
@ -29,57 +29,42 @@

 :root {
  /* Define solarized palette */
-  --base3:     #002b36;
-  --base2:     #073642;
-  --base1:     #586e75;
-  --base0:     #657b83;
-  --base00:    #839496;
-  --base01:    #93a1a1;
-  --base02:    #eee8d5;
-  --base03:    #fdf6e3;
-  --yellow:    #b58900;
-  --orange:    #cb4b16;
-  --red:       #dc322f;
-  --magenta:   #d33682;
-  --violet:    #6c71c4;
-  --blue:      #268bd2;
-  --cyan:      #2aa198;
-  --green:     #859900;
+  --base03:    #002b36; /* Background. */
+  --base02:    #073642; /* Background highlights. */
+  --base01:    #586e75; /* Comments / secondary color. */
+  --base0:     #839496; /* Body text / default code / primary content. */
+  --base1:     #93a1a1; /* Optional emphasized content. */
+  --red:       #dc322f; /* Trim. */

  /* Override orange trim */
  --orange2: var(--red);

  /* Restyle basic colors to use Solarized */
-  --white1: var(--base3);
-  --white2: var(--base2);
-  --blue1: var(--cyan);
-  --blue2: var(--base03);
-  --blue3: var(--base02);
+  --white1: var(--base03);
+  --white2: var(--base02);
+  --blue2: var(--base1);
+  --blue3: var(--base1);

  /* Basic page styling (background + foreground) */
-  --bg: var(--white1);
-  --bg-accent: var(--white2);
-  --fg: var(--base02);
-  --fg-reduced: var(--base01);
+  --bg: var(--base02);
+  --bg-accent: var(--base02);
+  --fg-reduced: var(--base0);
+  --fg: var(--base0);

-  /* Profile page styling (light) */
+  /* Profile page styling */
  --profile-bg: var(--white2);

-  /* Solarize buttons */
-  --button-bg: var(--blue2);
-  --button-fg: var(--white1);
-
  /* Solarize statuses */
-  --status-bg: var(--white1);
-  --status-focus-bg: var(--white1);
-  --status-info-bg: var(--white2);
-  --status-focus-info-bg: var(--white2);
+  --status-bg: var(--base03);
+  --status-focus-bg: var(--base03);
+  --status-info-bg: var(--base02);
+  --status-focus-info-bg: var(--base02);

  /* Used around statuses + other items */
-  --boxshadow-border: 0.1rem solid var(--base1);
+  --boxshadow-border: 0.15rem solid var(--base01);

-  --plyr-video-control-color: var(--fg-reduced);
-  --plyr-video-control-color-hover: var(--fg);
+  --plyr-video-control-color: var(--base1);
+  --plyr-video-control-color-hover: var(--base03);
 }

@font-face {
@ -95,6 +80,45 @@ html, body {
  scrollbar-color: var(--orange2) var(--white1) ;
 }

+/* Column headers */
+.col-header {
+  border: var(--boxshadow-border);
+  color: var(--base1);
+}
+
+.profile .about-user .col-header {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Instance title color */
+.page-header a h1 {
+  color: var(--base1);
+}
+
+/* Header card */
+.profile .profile-header {
+  border: var(--boxshadow-border);
+  background: var(--base03);
+}
+
+/* Fiddle around with borders on about sections */
+.profile .about-user .fields,
+.profile .about-user .bio,
+.profile .about-user .accountstats {
+  background: var(--base03);
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+.profile .about-user .accountstats {
+  border-bottom: var(--boxshadow-border);
+  color: var(--base0);
+}
+
+.profile .about-user .fields {
+  padding-top: 0;
+}
+
 /* Profile fields */
 .profile .about-user .fields .field {
  border-bottom: var(--boxshadow-border);
@ -106,9 +130,11 @@ html, body {
 /* Status media */
 .status .media .media-wrapper {
  border: var(--boxshadow-border);
+  background: var(--base02);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
-  color: var(--blue2);
+  color: var(--base1);
+  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
  background: transparent;
@ -116,32 +142,50 @@ html, body {

 /* Status polls */
 .status .text .poll {
-  background-color: var(--white2);
+  background-color: var(--base03);
+  border: var(--boxshadow-border);
 }
 .status .text .poll .poll-info {
-  background-color: var(--white1);
+  background-color: var(--base03);
 }

 /* Code snippets */
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
  background-color: black;
-  color: var(--base03);
+  color: #93a1a1;
 }

 /* Block quotes */
 blockquote {
-  background-color: var(--bg-accent);
-  color: var(--fg);
+  background-color: var(--base03);
+  color: var(--base0);
 }

-button,
-.button,
+button, .button,
 .status .text-spoiler > summary .button {
  font-family: 'Noto Sans Mono', monospace;
 }

+.button {
+  color: var(--base1);
+  background: var(--base02);
+  border: var(--boxshadow-border);
+}
+
+.button:hover {
+  color: var(--base0);
+  background: var(--base03);
+  border: var(--boxshadow-border);
+}
+
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
-  color: var(--base03);
+  color: var(--base1);
+}
+
+/* Distinguish bot icon */
+.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
+  border: var(--boxshadow-border);
+  color: var(--base1);
 }
--- a/web/assets/themes/solarized-light.css
+++ b/web/assets/themes/solarized-light.css
@ -1,6 +1,6 @@
 /*
-  theme-title: Solarized (light)
-  theme-description: Solarized sloth (light)
+  theme-title: Solarized light
+  theme-description: Beige and grey solarized theme with orange trim
 */

 /*
@ -29,46 +29,31 @@

 :root {
  /* Define solarized palette */
-  --base03:    #002b36;
-  --base02:    #073642;
-  --base01:    #586e75;
-  --base00:    #657b83;
-  --base0:     #839496;
-  --base1:     #93a1a1;
-  --base2:     #eee8d5;
-  --base3:     #fdf6e3;
-  --yellow:    #b58900;
-  --orange:    #cb4b16;
-  --red:       #dc322f;
-  --magenta:   #d33682;
-  --violet:    #6c71c4;
-  --blue:      #268bd2;
-  --cyan:      #2aa198;
-  --green:     #859900;
+  --base3:     #fdf6e3; /* Background. */
+  --base2:     #eee8d5; /* Background highlights. */
+  --base1:     #93a1a1; /* Comments / secondary color. */
+  --base00:    #657b83; /* Body text / default code / primary content. */
+  --base01:    #586e75; /* Optional emphasized content. */
+  --red:       #cb4b16; /* Trim. */

  /* Override orange trim */
-  --orange2: var(--orange);
+  --orange2: var(--red);

  /* Restyle basic colors to use Solarized */
  --white1: var(--base3);
  --white2: var(--base2);
-  --blue1: var(--cyan);
-  --blue2: var(--base03);
-  --blue3: var(--base02);
+  --blue2: var(--base00);
+  --blue3: var(--base01);

  /* Basic page styling (background + foreground) */
-  --bg: var(--white1);
-  --bg-accent: var(--white2);
-  --fg: var(--base02);
-  --fg-reduced: var(--base01);
+  --bg: var(--base2);
+  --bg-accent: var(--base3);
+  --fg-reduced: var(--base00);
+  --fg: var(--base01);

-  /* Profile page styling (light) */
+  /* Profile page styling */
  --profile-bg: var(--white2);

-  /* Solarize buttons */
-  --button-bg: var(--blue2);
-  --button-fg: var(--white1);
-
  /* Solarize statuses */
  --status-bg: var(--white1);
  --status-focus-bg: var(--white1);
@ -78,8 +63,8 @@
  /* Used around statuses + other items */
  --boxshadow-border: 0.1rem solid var(--base1);

-  --plyr-video-control-color: var(--fg-reduced);
-  --plyr-video-control-color-hover: var(--fg);
+  --plyr-video-control-color: var(--fg);
+  --plyr-video-control-color-hover: var(--fg-reduced);
 }

@font-face {
@ -95,6 +80,36 @@ html, body {
  scrollbar-color: var(--orange2) var(--white1) ;
 }

+/* Column headers */
+.col-header {
+  border: var(--boxshadow-border);
+  background: var(--base3);
+}
+
+.profile .about-user .col-header {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Header card */
+.profile .profile-header {
+  border: var(--boxshadow-border);
+  background: var(--base3);
+}
+
+/* Fiddle around with borders on about sections */
+.profile .about-user .fields,
+.profile .about-user .bio,
+.profile .about-user .accountstats {
+  background: var(--base3);
+  color: var(--base01);
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+.profile .about-user .accountstats {
+  border-bottom: var(--boxshadow-border);
+}
+
 /* Profile fields */
 .profile .about-user .fields .field {
  border-bottom: var(--boxshadow-border);
@ -108,7 +123,8 @@ html, body {
  border: var(--boxshadow-border);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
-  color: var(--blue2);
+  color: var(--base1);
+  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
  background: transparent;
@ -116,32 +132,60 @@ html, body {

 /* Status polls */
 .status .text .poll {
-  background-color: var(--white2);
+  background-color: var(--base3);
+  border: var(--boxshadow-border);
 }
 .status .text .poll .poll-info {
-  background-color: var(--white1);
+  background-color: var(--base3);
+  border: var(--boxshadow-border);
 }

 /* Code snippets */
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
  background-color: black;
-  color: var(--base3);
+  color: #93a1a1;
 }

 /* Block quotes */
 blockquote {
-  background-color: var(--bg-accent);
-  color: var(--fg);
+  background-color: var(--base3);
+  color: var(--base01);
 }

-button,
-.button,
+button, .button,
 .status .text-spoiler > summary .button {
  font-family: 'Noto Sans Mono', monospace;
 }

+.button {
+  color: var(--base01);
+  background: var(--base3);
+  border: var(--boxshadow-border);
+}
+
+.button:hover {
+  color: var(--base01);
+  background: var(--base2);
+  border: var(--boxshadow-border);
+}
+
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
-  color: var(--base03);
+  background: var(--base3);
+  color: var(--base01);
+}
+
+/* Back + next links */
+.backnextlinks {
+  padding: 0.5rem;
+  background: var(--base3);
+  border: var(--boxshadow-border);
+  border-radius: var(--br);
+}
+
+.page-footer {
+  margin-top: 2rem;
+  background-color: var(--base3);
+  border-top: var(--boxshadow-border);
 }
--- a/web/assets/themes/sunset-light.css
+++ b/web/assets/themes/sunset-light.css
@ -23,7 +23,7 @@
  --orange2: var(--pink);

  /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--eggplant1), var(--pink), var(--orange), var(--yellow), var(--eggshell));
+  --bg: var(--eggshell);
  --bg-accent: var(--white2);
  --fg: var(--eggplant4);
  --fg-reduced: var(--eggplant3);
@ -45,6 +45,17 @@
  --boxshadow-border: 0.08rem solid var(--orange);
 }

+/* Main page background */
+body {
+  background: linear-gradient(
+    var(--eggplant1),
+    var(--pink),
+    var(--orange),
+    var(--yellow),
+    var(--eggshell)
+  );
+}
+
 /* Scroll bar */
 html, body {
  scrollbar-color: var(--pink) var(--eggshell);
@ -55,12 +66,6 @@ html, body {
  color: var(--eggshell);
 }

-/* Role and bot badge backgrounds */
-.profile .profile-header .basic-info .namerole .role,
-.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
-  background: var(--eggshell);
-}
-
 /* Profile fields */
 .profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--orange);
--- a/web/source/settings/components/error.tsx
+++ b/web/source/settings/components/error.tsx
@ -107,7 +107,11 @@ function Error({ error, reset }: ErrorProps) {
 			{ reset && 
 				<span 
 					className="dismiss"
-					onClick={reset}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						reset();
+					}}
 					role="button"
 					tabIndex={0}
 				>
--- a/web/source/settings/components/user-logout-card.tsx
+++ b/web/source/settings/components/user-logout-card.tsx
@ -19,6 +19,7 @@

 import React from "react";
 import Loading from "./loading";
+import { Error as ErrorC } from "./error";
 import { useVerifyCredentialsQuery, useLogoutMutation } from "../lib/query/oauth";
 import { useInstanceV1Query } from "../lib/query/gts-api";

@ -29,16 +30,20 @@ export default function UserLogoutCard() {

 	if (isLoading) {
 		return <Loading />;
-	} else {
-		return (
-			<div className="account-card">
-				<img className="avatar" src={profile.avatar} alt="" />
-				<h3 className="text-cutoff">{profile.display_name?.length > 0 ? profile.display_name : profile.acct}</h3>
-				<span className="text-cutoff">@{profile.username}@{instance?.account_domain}</span>
-				<a onClick={logoutQuery} href="#" aria-label="Log out" title="Log out" className="logout">
-					<i className="fa fa-fw fa-sign-out" aria-hidden="true" />
-				</a>
-			</div>
-		);
 	}
+	
+	if (!profile) {
+		return <ErrorC error={new Error("account was undefined")} />;
+	}
+
+	return (
+		<div className="account-card">
+			<img className="avatar" src={profile.avatar} alt="" />
+			<h3 className="text-cutoff">{profile.display_name?.length > 0 ? profile.display_name : profile.acct}</h3>
+			<span className="text-cutoff">@{profile.username}@{instance?.account_domain}</span>
+			<a onClick={logoutQuery} href="#" aria-label="Log out" title="Log out" className="logout">
+				<i className="fa fa-fw fa-sign-out" aria-hidden="true" />
+			</a>
+		</div>
+	);
 }
--- a/web/source/settings/components/username-lozenge.tsx
+++ b/web/source/settings/components/username-lozenge.tsx
@ -17,18 +17,107 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import React from "react";
+import React, { useEffect } from "react";
 import { useLocation } from "wouter";
 import { AdminAccount } from "../lib/types/account";
+import { useLazyGetAccountQuery } from "../lib/query/admin";
+import Loading from "./loading";
+import { Error as ErrorC } from "./error";

-interface UsernameProps {
+interface UsernameLozengeProps {
+	/**
+	 * Either an account ID (for fetching) or an account.
+	 */
+	account?: string | AdminAccount;
+	/**
+	 * Make the lozenge clickable and link to this location.
+	 */
+	linkTo?: string;
+	/**
+	 * Location to set as backLocation after linking to linkTo.
+	 */
+	backLocation?: string;
+	/**
+	 * Additional classnames to add to the lozenge.
+	 */
+	classNames?: string[];
+}
+
+export default function UsernameLozenge({ account, linkTo, backLocation, classNames }: UsernameLozengeProps) {
+	if (account === undefined) {
+		return <>[unknown]</>;
+	} else if (typeof account === "string") {
+		return (
+			<FetchUsernameLozenge
+				accountID={account}
+				linkTo={linkTo}
+				backLocation={backLocation}
+				classNames={classNames}
+			/>
+		);
+	} else {
+		return (
+			<ReadyUsernameLozenge
+				account={account}
+				linkTo={linkTo}
+				backLocation={backLocation}
+				classNames={classNames}
+			/>
+		);
+	}
+
+}
+
+interface FetchUsernameLozengeProps {
+	accountID: string;
+	linkTo?: string;
+	backLocation?: string;
+	classNames?: string[];
+}
+
+function FetchUsernameLozenge({ accountID, linkTo, backLocation, classNames }: FetchUsernameLozengeProps) {
+	const [ trigger, result ] = useLazyGetAccountQuery();
+	
+	// Call to get the account
+	// using the provided ID.
+	useEffect(() => {
+		trigger(accountID, true);
+	}, [trigger, accountID]);
+
+	const {
+		data: account,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = result;
+
+	// Wait for the account
+	// model to be returned.
+	if (isError) {
+		return <ErrorC error={error} />;
+	} else if (isLoading || isFetching || account === undefined) {
+		return <Loading />;
+	}
+
+	return (
+		<ReadyUsernameLozenge
+			account={account}
+			linkTo={linkTo}
+			backLocation={backLocation}
+			classNames={classNames}
+		/>
+	);
+}
+
+interface ReadyUsernameLozengeProps {
 	account: AdminAccount;
 	linkTo?: string;
 	backLocation?: string;
 	classNames?: string[];
 }

-export default function Username({ account, linkTo, backLocation, classNames }: UsernameProps) {
+function ReadyUsernameLozenge({ account, linkTo, backLocation, classNames }: ReadyUsernameLozengeProps) {
 	const [ _location, setLocation ] = useLocation();
 	
 	let className = "username-lozenge";
--- a/web/source/settings/lib/navigation/menu.tsx
+++ b/web/source/settings/lib/navigation/menu.tsx
@ -110,12 +110,19 @@ export function MenuItem(props: PropsWithChildren<MenuItemProps>) {
 	if (topLevel) {
 		classNames.push("category", "top-level");
 	} else {
-		if (thisLevel === 1 && hasChildren) {
-			classNames.push("category", "expanding");
-		} else if (thisLevel === 1 && !hasChildren) {
-			classNames.push("view", "expanding");
-		} else if (thisLevel === 2) {
-			classNames.push("view", "nested");
+		switch (true) {
+			case thisLevel === 1 && hasChildren:
+				classNames.push("category", "expanding");
+				break;
+			case thisLevel === 1 && !hasChildren:
+				classNames.push("view", "expanding");
+				break;
+			case thisLevel >= 2 && hasChildren:
+				classNames.push("nested", "category");
+				break;
+			case thisLevel >= 2 && !hasChildren:
+				classNames.push("nested", "view");
+				break;
 		}
 	}

--- a/web/source/settings/lib/query/admin/domain-permissions/drafts.ts
+++ b/web/source/settings/lib/query/admin/domain-permissions/drafts.ts
@ -0,0 +1,173 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { gtsApi } from "../../gts-api";
+
+import type {
+	DomainPerm,
+	DomainPermDraftCreateParams,
+	DomainPermDraftSearchParams,
+	DomainPermDraftSearchResp,
+} from "../../../types/domain-permission";
+import parse from "parse-link-header";
+import { PermType } from "../../../types/perm";
+
+const extended = gtsApi.injectEndpoints({
+	endpoints: (build) => ({
+		searchDomainPermissionDrafts: build.query<DomainPermDraftSearchResp, DomainPermDraftSearchParams>({
+			query: (form) => {
+				const params = new(URLSearchParams);
+				Object.entries(form).forEach(([k, v]) => {
+					if (v !== undefined) {
+						params.append(k, v);
+					}
+				});
+
+				let query = "";
+				if (params.size !== 0) {
+					query = `?${params.toString()}`;
+				}
+
+				return {
+					url: `/api/v1/admin/domain_permission_drafts${query}`
+				};
+			},
+			// Headers required for paging.
+			transformResponse: (apiResp: DomainPerm[], meta) => {
+				const drafts = apiResp;
+				const linksStr = meta?.response?.headers.get("Link");
+				const links = parse(linksStr);
+				return { drafts, links };
+			},
+			// Only provide TRANSFORMED tag id since this model is not the same
+			// as getDomainPermissionDraft model (due to transformResponse).
+			providesTags: [{ type: "DomainPermissionDraft", id: "TRANSFORMED" }]
+		}),
+
+		getDomainPermissionDraft: build.query<DomainPerm, string>({
+			query: (id) => ({
+				url: `/api/v1/admin/domain_permission_drafts/${id}`
+			}),
+			providesTags: (_result, _error, id) => [
+				{ type: 'DomainPermissionDraft', id }
+			],
+		}),
+
+		createDomainPermissionDraft: build.mutation<DomainPerm, DomainPermDraftCreateParams>({
+			query: (formData) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_drafts`,
+				asForm: true,
+				body: formData,
+				discardEmpty: true
+			}),
+			invalidatesTags: [{ type: "DomainPermissionDraft", id: "TRANSFORMED" }],
+		}),
+
+		acceptDomainPermissionDraft: build.mutation<DomainPerm, { id: string, overwrite?: boolean, permType: PermType }>({
+			query: ({ id, overwrite }) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_drafts/${id}/accept`,
+				asForm: true,
+				body: {
+					overwrite: overwrite,
+				},
+				discardEmpty: true
+			}),
+			invalidatesTags: (res, _error, { id, permType }) => {
+				const invalidated: any[] = [];
+				
+				// If error, nothing to invalidate.
+				if (!res) {
+					return invalidated;
+				}
+				
+				// Invalidate this draft by ID, and
+				// the transformed list of all drafts.
+				invalidated.push(
+					{ type: 'DomainPermissionDraft', id: id },
+					{ type: "DomainPermissionDraft", id: "TRANSFORMED" },
+				);
+
+				// Invalidate cached blocks/allows depending
+				// on the permType of the accepted draft.
+				if (permType === "allow") {
+					invalidated.push("domainAllows");
+				} else {
+					invalidated.push("domainBlocks");
+				}
+
+				return invalidated;
+			}
+		}),
+
+		removeDomainPermissionDraft: build.mutation<DomainPerm, { id: string, exclude_target?: boolean }>({
+			query: ({ id, exclude_target }) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_drafts/${id}/remove`,
+				asForm: true,
+				body: {
+					exclude_target: exclude_target,
+				},
+				discardEmpty: true
+			}),
+			invalidatesTags: (res, _error, { id }) =>
+				res
+					? [
+						{ type: "DomainPermissionDraft", id },
+						{ type: "DomainPermissionDraft", id: "TRANSFORMED" },
+					]
+					: [],
+		})
+
+	}),
+});
+
+/**
+ * View domain permission drafts.
+ */
+const useLazySearchDomainPermissionDraftsQuery = extended.useLazySearchDomainPermissionDraftsQuery;
+
+/**
+ * Get domain permission draft with the given ID.
+ */
+const useGetDomainPermissionDraftQuery = extended.useGetDomainPermissionDraftQuery;
+
+/**
+ * Create a domain permission draft with the given parameters.
+ */
+const useCreateDomainPermissionDraftMutation = extended.useCreateDomainPermissionDraftMutation;
+
+/**
+ * Accept a domain permission draft, turning it into an enforced domain permission.
+ */
+const useAcceptDomainPermissionDraftMutation = extended.useAcceptDomainPermissionDraftMutation;
+
+/**
+ * Remove a domain permission draft, optionally ignoring all future drafts targeting the given domain.
+ */
+const useRemoveDomainPermissionDraftMutation = extended.useRemoveDomainPermissionDraftMutation;
+
+export {
+	useLazySearchDomainPermissionDraftsQuery,
+	useGetDomainPermissionDraftQuery,
+	useCreateDomainPermissionDraftMutation,
+	useAcceptDomainPermissionDraftMutation,
+	useRemoveDomainPermissionDraftMutation,
+};
--- a/web/source/settings/lib/query/admin/domain-permissions/excludes.ts
+++ b/web/source/settings/lib/query/admin/domain-permissions/excludes.ts
@ -0,0 +1,124 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { gtsApi } from "../../gts-api";
+
+import type {
+	DomainPerm,
+	DomainPermExcludeCreateParams,
+	DomainPermExcludeSearchParams,
+	DomainPermExcludeSearchResp,
+} from "../../../types/domain-permission";
+import parse from "parse-link-header";
+
+const extended = gtsApi.injectEndpoints({
+	endpoints: (build) => ({
+		searchDomainPermissionExcludes: build.query<DomainPermExcludeSearchResp, DomainPermExcludeSearchParams>({
+			query: (form) => {
+				const params = new(URLSearchParams);
+				Object.entries(form).forEach(([k, v]) => {
+					if (v !== undefined) {
+						params.append(k, v);
+					}
+				});
+
+				let query = "";
+				if (params.size !== 0) {
+					query = `?${params.toString()}`;
+				}
+
+				return {
+					url: `/api/v1/admin/domain_permission_excludes${query}`
+				};
+			},
+			// Headers required for paging.
+			transformResponse: (apiResp: DomainPerm[], meta) => {
+				const excludes = apiResp;
+				const linksStr = meta?.response?.headers.get("Link");
+				const links = parse(linksStr);
+				return { excludes, links };
+			},
+			// Only provide TRANSFORMED tag id since this model is not the same
+			// as getDomainPermissionExclude model (due to transformResponse).
+			providesTags: [{ type: "DomainPermissionExclude", id: "TRANSFORMED" }]
+		}),
+
+		getDomainPermissionExclude: build.query<DomainPerm, string>({
+			query: (id) => ({
+				url: `/api/v1/admin/domain_permission_excludes/${id}`
+			}),
+			providesTags: (_result, _error, id) => [
+				{ type: 'DomainPermissionExclude', id }
+			],
+		}),
+
+		createDomainPermissionExclude: build.mutation<DomainPerm, DomainPermExcludeCreateParams>({
+			query: (formData) => ({
+				method: "POST",
+				url: `/api/v1/admin/domain_permission_excludes`,
+				asForm: true,
+				body: formData,
+				discardEmpty: true
+			}),
+			invalidatesTags: [{ type: "DomainPermissionExclude", id: "TRANSFORMED" }],
+		}),
+
+		deleteDomainPermissionExclude: build.mutation<DomainPerm, string>({
+			query: (id) => ({
+				method: "DELETE",
+				url: `/api/v1/admin/domain_permission_excludes/${id}`,
+			}),
+			invalidatesTags: (res, _error, id) =>
+				res
+					? [
+						{ type: "DomainPermissionExclude", id },
+						{ type: "DomainPermissionExclude", id: "TRANSFORMED" },
+					]
+					: [],
+		})
+
+	}),
+});
+
+/**
+ * View domain permission excludes.
+ */
+const useLazySearchDomainPermissionExcludesQuery = extended.useLazySearchDomainPermissionExcludesQuery;
+
+/**
+ * Get domain permission exclude with the given ID.
+ */
+const useGetDomainPermissionExcludeQuery = extended.useGetDomainPermissionExcludeQuery;
+
+/**
+ * Create a domain permission exclude with the given parameters.
+ */
+const useCreateDomainPermissionExcludeMutation = extended.useCreateDomainPermissionExcludeMutation;
+
+/**
+ * Delete a domain permission exclude.
+ */
+const useDeleteDomainPermissionExcludeMutation = extended.useDeleteDomainPermissionExcludeMutation;
+
+export {
+	useLazySearchDomainPermissionExcludesQuery,
+	useGetDomainPermissionExcludeQuery,
+	useCreateDomainPermissionExcludeMutation,
+	useDeleteDomainPermissionExcludeMutation,
+};
--- a/web/source/settings/lib/query/admin/domain-permissions/get.ts
+++ b/web/source/settings/lib/query/admin/domain-permissions/get.ts
@ -37,6 +37,12 @@ const extended = gtsApi.injectEndpoints({
 			}),
 			transformResponse: listToKeyedObject<DomainPerm>("domain"),
 		}),
+
+		domainPermissionDrafts: build.query<any, void>({
+			query: () => ({
+				url: `/api/v1/admin/domain_permission_drafts`
+			}),
+		}),
 	}),
 });

--- a/web/source/settings/lib/query/admin/domain-permissions/import.ts
+++ b/web/source/settings/lib/query/admin/domain-permissions/import.ts
@ -24,7 +24,7 @@ import {
 	type DomainPerm,
 	type ImportDomainPermsParams,
 	type MappedDomainPerms,
-	isDomainPermInternalKey,
+	stripOnImport,
 } from "../../../types/domain-permission";
 import { listToKeyedObject } from "../../transforms";

@ -83,7 +83,7 @@ function importEntriesProcessor(formData: ImportDomainPermsParams): (_entry: Dom
 		// Unset all internal processing keys
 		// and any undefined keys on this entry.
 		Object.entries(entry).forEach(([key, val]: [keyof DomainPerm, any]) => {			
-			if (val == undefined || isDomainPermInternalKey(key)) {
+			if (val == undefined || stripOnImport(key)) {
 				delete entry[key];
 			}
 		});
--- a/web/source/settings/lib/query/gts-api.ts
+++ b/web/source/settings/lib/query/gts-api.ts
@ -169,6 +169,8 @@ export const gtsApi = createApi({
 		"HTTPHeaderBlocks",
 		"DefaultInteractionPolicies",
 		"InteractionRequest",
+		"DomainPermissionDraft",
+		"DomainPermissionExclude"
 	],
 	endpoints: (build) => ({
 		instanceV1: build.query<InstanceV1, void>({
--- a/web/source/settings/lib/query/oauth/index.ts
+++ b/web/source/settings/lib/query/oauth/index.ts
@ -26,6 +26,7 @@ import {
 	authorize as oauthAuthorize,
 } from "../../../redux/oauth";
 import { RootState } from '../../../redux/store';
+import { Account } from '../../types/account';

 export interface OauthTokenRequestBody {
 	client_id: string;
@ -58,7 +59,7 @@ const SETTINGS_URL = (getSettingsURL());
 // https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query
 const extended = gtsApi.injectEndpoints({
 	endpoints: (build) => ({
-		verifyCredentials: build.query<any, void>({
+		verifyCredentials: build.query<Account, void>({
 			providesTags: (_res, error) =>
 				error == undefined ? ["Auth"] : [],
 			async queryFn(_arg, api, _extraOpts, fetchWithBQ) {
--- a/web/source/settings/lib/types/account.ts
+++ b/web/source/settings/lib/types/account.ts
@ -53,8 +53,12 @@ export interface Account {
 	url: string,
 	avatar: string,
 	avatar_static: string,
+	avatar_description?: string,
+	avatar_media_id?: string,
 	header: string,
 	header_static: string,
+	header_description?: string,
+	header_media_id?: string,
 	followers_count: number,
 	following_count: number,
 	statuses_count: number,
@ -68,7 +72,7 @@ export interface Account {
 }

 export interface AccountSource {
-	fields: any[];
+	fields: any;
 	follow_requests_count: number;
 	language: string;
 	note: string;
--- a/web/source/settings/lib/types/domain-permission.ts
+++ b/web/source/settings/lib/types/domain-permission.ts
@ -19,11 +19,12 @@

 import typia from "typia";
 import { PermType } from "./perm";
+import { Links } from "parse-link-header";

 export const validateDomainPerms = typia.createValidate<DomainPerm[]>();

 /**
- * A single domain permission entry (block or allow).
+ * A single domain permission entry (block, allow, draft, ignore).
 */
 export interface DomainPerm {
 	id?: string;
@ -32,11 +33,14 @@ export interface DomainPerm {
 	private_comment?: string;
 	public_comment?: string;
 	created_at?: string;
+	created_by?: string;
+	subscription_id?: string;

-	// Internal processing keys; remove
-	// before serdes of domain perm.
+	// Keys that should be stripped before
+	// sending the domain permission (if imported).
+
+	permission_type?: PermType;
 	key?: string;
-	permType?: PermType;
 	suggest?: string;
 	valid?: boolean;
 	checked?: boolean;
@ -53,9 +57,9 @@ export interface MappedDomainPerms {
 	[key: string]: DomainPerm;
 }

-const domainPermInternalKeys: Set<keyof DomainPerm> = new Set([
+const domainPermStripOnImport: Set<keyof DomainPerm> = new Set([
 	"key",
-	"permType",
+	"permission_type",
 	"suggest",
 	"valid",
 	"checked",
@ -65,15 +69,14 @@ const domainPermInternalKeys: Set<keyof DomainPerm> = new Set([
 ]);

 /**
- * Returns true if provided DomainPerm Object key is
- * "internal"; ie., it's just for our use, and it shouldn't
- * be serialized to or deserialized from the GtS API.
+ * Returns true if provided DomainPerm Object key is one
+ * that should be stripped when importing a domain permission.
 * 
 * @param key 
 * @returns 
 */
-export function isDomainPermInternalKey(key: keyof DomainPerm) {
-	return domainPermInternalKeys.has(key);
+export function stripOnImport(key: keyof DomainPerm) {
+	return domainPermStripOnImport.has(key);
 }

 export interface ImportDomainPermsParams {
@ -94,3 +97,119 @@ export interface ExportDomainPermsParams {
 	action: "export" | "export-file";
 	exportType: "json" | "csv" | "plain";
 }
+
+/**
+ * Parameters for GET to /api/v1/admin/domain_permission_drafts.
+ */
+export interface DomainPermDraftSearchParams {
+	/**
+	 * Show only drafts created by the given subscription ID.
+	 */
+	subscription_id?: string;
+	/**
+	 * Return only drafts that target the given domain.
+	 */
+	domain?: string;
+	/**
+	 * Filter on "block" or "allow" type drafts.
+	 */
+	permission_type?: PermType;
+	/**
+	 * Return only items *OLDER* than the given max ID (for paging downwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	max_id?: string;
+	/**
+	 * Return only items *NEWER* than the given since ID.
+	 * The item with the specified ID will not be included in the response.
+	 */
+	since_id?: string;
+	/**
+	 * Return only items immediately *NEWER* than the given min ID (for paging upwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	min_id?: string;
+	/**
+	 * Number of items to return.
+	 */
+	limit?: number;
+}
+
+export interface DomainPermDraftSearchResp {
+	drafts: DomainPerm[];
+	links: Links | null;
+}
+
+export interface DomainPermDraftCreateParams {
+	/**
+	 * Domain to create the permission draft for.
+	 */
+	domain: string;
+	/**
+	 * Create a draft "allow" or a draft "block".
+	 */
+	permission_type: PermType;
+	/**
+	 * Obfuscate the name of the domain when serving it publicly.
+	 * Eg., `example.org` becomes something like `ex***e.org`.
+	 */
+	obfuscate?: boolean;
+	/**
+	 * Public comment about this domain permission. This will be displayed
+	 * alongside the domain permission if you choose to share permissions.
+	 */
+	public_comment?: string;
+	/**
+	 * Private comment about this domain permission.
+	 * Will only be shown to other admins, so this is a useful way of
+	 * internally keeping track of why a certain domain ended up permissioned.
+	 */
+	private_comment?: string;
+}
+
+/**
+ * Parameters for GET to /api/v1/admin/domain_permission_excludes.
+ */
+export interface DomainPermExcludeSearchParams {
+	/**
+	 * Return only excludes that target the given domain.
+	 */
+	domain?: string;
+	/**
+	 * Return only items *OLDER* than the given max ID (for paging downwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	max_id?: string;
+	/**
+	 * Return only items *NEWER* than the given since ID.
+	 * The item with the specified ID will not be included in the response.
+	 */
+	since_id?: string;
+	/**
+	 * Return only items immediately *NEWER* than the given min ID (for paging upwards).
+	 * The item with the specified ID will not be included in the response.
+	 */
+	min_id?: string;
+	/**
+	 * Number of items to return.
+	 */
+	limit?: number;
+}
+
+export interface DomainPermExcludeSearchResp {
+	excludes: DomainPerm[];
+	links: Links | null;
+}
+
+export interface DomainPermExcludeCreateParams {
+	/**
+	 * Domain to create the permission exclude for.
+	 */
+	domain: string;
+	/**
+	 * Private comment about this domain permission.
+	 * Will only be shown to other admins, so this is a useful way of
+	 * internally keeping track of why a certain domain ended up permissioned.
+	 */
+	private_comment?: string;
+}
--- a/web/source/settings/lib/util/formvalidators.ts
+++ b/web/source/settings/lib/util/formvalidators.ts
@ -0,0 +1,48 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import isValidDomain from "is-valid-domain";
+
+/**
+ * Validate the "domain" field of a form.
+ * @param domain 
+ * @returns 
+ */
+export function formDomainValidator(domain: string): string {
+	if (domain.length === 0) {
+		return "";
+	}
+
+	if (domain[domain.length-1] === ".") {
+		return "invalid domain";
+	}
+
+	const valid = isValidDomain(domain, {
+		subdomain: true,
+		wildcard: false,
+		allowUnicode: true,
+		topLevel: false,
+	});
+
+	if (valid) {
+		return "";
+	}
+
+	return "invalid domain";
+}
--- a/web/source/settings/lib/util/index.ts
+++ b/web/source/settings/lib/util/index.ts
@ -41,3 +41,16 @@ export function UseOurInstanceAccount(account: AdminAccount): boolean {

 	return !account.domain && account.username == ourDomain;
 }
+
+/**
+ * Uppercase first letter of given string.
+ */
+export function useCapitalize(i?: string): string {
+	return useMemo(() => {
+		if (i === undefined) {
+			return "";
+		}
+		
+		return i.charAt(0).toUpperCase() + i.slice(1); 
+	}, [i]);
+}
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@ -194,7 +194,8 @@ nav.menu-tree {
 		}
 	}

-	li.nested { /* any deeper nesting, just has indent */
+	/* Deeper nesting. */
+	li.nested {
 		a.title {
 			padding-left: 1rem;
 			font-weight: normal;
@ -210,11 +211,35 @@ nav.menu-tree {
 				background: $settings-nav-bg-hover;
 			}
 		}
+		
+		&.active > a.title {
+			color: $fg-accent;
+			font-weight: bold;
+		}

-		&.active {
-			a.title {
-				color: $fg-accent;
-				font-weight: bold;
+		&.category {
+			& > a.title {
+				&::after {
+					content: "▶";
+					left: 0.8rem;
+					bottom: 0.1rem;
+					position: relative;
+				}
+			}
+
+			&.active {
+				& > a.title {
+					&::after {
+						content: "▼";
+						bottom: 0;
+					}
+
+					border-bottom: 0.15rem dotted $gray1;
+				}
+			}
+
+			li.nested > a.title {
+				padding-left: 2rem;
 			}
 		}
 	}
@ -441,6 +466,11 @@ section.with-sidebar > form {
 	.profile {
 		max-width: 42rem;
 	}
+
+	.file-input-with-image-description {
+		max-width: 100%;
+		width: 100%;
+	}
 	
 	.overview {
 		display: flex;
@ -1329,6 +1359,66 @@ button.tab-button {
 	}
 }

+.domain-permission-drafts-view,
+.domain-permission-excludes-view {
+	.domain-permission-draft,
+	.domain-permission-exclude {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		gap: 0.5rem;
+		
+		&.block {
+			border-left: 0.3rem solid $error3;
+		}
+
+		&.allow {
+			border-left: 0.3rem solid $green1;
+		}
+
+		&:hover {
+			border-color: $fg-accent;
+		}
+
+		.info-list {
+			border: none;
+
+			.info-list-entry {
+				background: none;
+				padding: 0;
+			}
+		}
+
+		.action-buttons {
+			display: flex;
+			gap: 0.5rem;
+			align-items: center;
+
+			> .mutation-button
+			> button {
+				font-size: 1rem;
+				line-height: 1rem;
+			}
+		}
+	}
+}
+
+.domain-permission-draft-details,
+.domain-permission-exclude-details {
+	.info-list {
+		margin-top: 1rem;
+	}
+}
+
+.domain-permission-drafts-view,
+.domain-permission-draft-details {
+	dd.permission-type {
+		display: flex;
+		gap: 0.35rem;
+		align-items: center;
+	}
+}
+
 .instance-rules {
 	list-style-position: inside;
 	margin: 0;
--- a/web/source/settings/views/admin/actions/keys/expireremote.tsx
+++ b/web/source/settings/views/admin/actions/keys/expireremote.tsx
@ -22,32 +22,11 @@ import { TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useTextInput } from "../../../../lib/form";
 import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin/actions";
-import isValidDomain from "is-valid-domain";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";

 export default function ExpireRemote({}) {
 	const domainField = useTextInput("domain", {
-		validator: (v: string) => {
-			if (v.length === 0) {
-				return "";
-			}
-
-			if (v[v.length-1] === ".") {
-				return "invalid domain";
-			}
-
-			const valid = isValidDomain(v, {
-				subdomain: true,
-				wildcard: false,
-				allowUnicode: true,
-				topLevel: false,
-			});
-
-			if (valid) {
-				return "";
-			}
-
-			return "invalid domain";
-		}
+		validator: formDomainValidator,
 	});

 	const [expire, expireResult] = useInstanceKeysExpireMutation();
--- a/web/source/settings/views/admin/emoji/local/new-emoji.tsx
+++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
@ -119,7 +119,7 @@ export default function NewEmojiForm() {
 					label="Shortcode, must be unique among the instance's local emoji"
 					autoCapitalize="none"
 					spellCheck="false"
-					{...{pattern: "^\\w{2,30}$"}}
+					{...{pattern: "^\\w{1,30}$"}}
 				/>

 				<CategorySelect
--- a/web/source/settings/views/admin/emoji/local/use-shortcode.ts
+++ b/web/source/settings/views/admin/emoji/local/use-shortcode.ts
@ -22,7 +22,7 @@ import { useMemo } from "react";
 import { useTextInput } from "../../../../lib/form";
 import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";

-const shortcodeRegex = /^\w{2,30}$/;
+const shortcodeRegex = /^\w{1,30}$/;

 export default function useShortcode() {
 	const { data: emoji = [] } = useListEmojiQuery({
@ -42,8 +42,8 @@ export default function useShortcode() {
 				return "Shortcode already in use";
 			}

-			if (code.length < 2 || code.length > 30) {
-				return "Shortcode must be between 2 and 30 characters";
+			if (code.length < 1 || code.length > 30) {
+				return "Shortcode must be between 1 and 30 characters";
 			}

 			if (!shortcodeRegex.test(code)) {
--- a/web/source/settings/views/admin/http-header-permissions/detail.tsx
+++ b/web/source/settings/views/admin/http-header-permissions/detail.tsx
@ -17,7 +17,7 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useLocation, useParams } from "wouter";
 import { PermType } from "../../../lib/types/perm";
 import { useDeleteHeaderAllowMutation, useDeleteHeaderBlockMutation, useGetHeaderAllowQuery, useGetHeaderBlockQuery } from "../../../lib/query/admin/http-header-permissions";
@ -26,8 +26,7 @@ import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import { SerializedError } from "@reduxjs/toolkit";
 import Loading from "../../../components/loading";
 import { Error } from "../../../components/error";
-import { useLazyGetAccountQuery } from "../../../lib/query/admin";
-import Username from "../../../components/username";
+import UsernameLozenge from "../../../components/username-lozenge";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import BackButton from "../../../components/back-button";
 import MutationButton from "../../../components/form/mutation-button";
@ -92,58 +91,19 @@ interface PermDeetsProps {
 function PermDeets({
 	permType,
 	data: perm,
-	isLoading: isLoadingPerm,
-	isFetching: isFetchingPerm,
-	isError: isErrorPerm,
-	error: errorPerm,
+	isLoading,
+	isFetching,
+	isError,
+	error,
 }: PermDeetsProps) {
 	const [ location ] = useLocation();
 	const baseUrl = useBaseUrl();
-	
-	// Once we've loaded the perm, trigger
-	// getting the account that created it.
-	const [ getAccount, getAccountRes ] = useLazyGetAccountQuery();
-	useEffect(() => {
-		if (!perm) {
-			return;
-		}
-		getAccount(perm.created_by, true);
-	}, [getAccount, perm]);

-	// Load the createdByAccount if possible,
-	// returning a username lozenge with
-	// a link to the account.
-	const createdByAccount = useMemo(() => {
-		const {
-			data: account,
-			isLoading: isLoadingAccount,
-			isFetching: isFetchingAccount,
-			isError: isErrorAccount,
-		} = getAccountRes;
-		
-		// Wait for query to finish, returning
-		// loading spinner in the meantime.
-		if (isLoadingAccount || isFetchingAccount || !perm) {
-			return <Loading />;
-		} else if (isErrorAccount || account === undefined) {
-			// Fall back to account ID.
-			return perm?.created_by;
-		}
-
-		return (
-			<Username
-				account={account}
-				linkTo={`~/settings/moderation/accounts/${account.id}`}
-				backLocation={`~${baseUrl}${location}`}
-			/>
-		);
-	}, [getAccountRes, perm, baseUrl, location]);
-
-	// Now wait til the perm itself is loaded.
-	if (isLoadingPerm || isFetchingPerm) {
+	// Wait til the perm itself is loaded.
+	if (isLoading || isFetching) {
 		return <Loading />;
-	} else if (isErrorPerm) {
-		return <Error error={errorPerm} />;
+	} else if (isError) {
+		return <Error error={error} />;
 	} else if (perm === undefined) {
 		throw "perm undefined";
 	}
@ -172,7 +132,13 @@ function PermDeets({
 				</div>
 				<div className="info-list-entry">
 					<dt>Created By</dt>
-					<dd>{createdByAccount}</dd>
+					<dd>
+						<UsernameLozenge
+							account={perm.created_by}
+							linkTo={`~/settings/moderation/accounts/${perm.created_by}`}
+							backLocation={`~${baseUrl}${location}`}
+						/>
+					</dd>
 				</div>
 				<div className="info-list-entry">
 					<dt>Header Name</dt>
--- a/web/source/settings/views/admin/http-header-permissions/overview.tsx
+++ b/web/source/settings/views/admin/http-header-permissions/overview.tsx
@ -27,6 +27,7 @@ import { PermType } from "../../../lib/types/perm";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import { SerializedError } from "@reduxjs/toolkit";
 import HeaderPermCreateForm from "./create";
+import { useCapitalize } from "../../../lib/util";

 export default function HeaderPermsOverview() {
 	const [ location, setLocation ] = useLocation();
@ -41,9 +42,7 @@ export default function HeaderPermsOverview() {
 	}, [params]);

 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);
 	
 	// Fetch desired perms, skipping
 	// the ones we don't want.
--- a/web/source/settings/views/moderation/accounts/pending/index.tsx
+++ b/web/source/settings/views/moderation/accounts/pending/index.tsx
@ -21,7 +21,7 @@ import React, { ReactNode } from "react";
 import { useSearchAccountsQuery } from "../../../../lib/query/admin";
 import { PageableList } from "../../../../components/pageable-list";
 import { useLocation } from "wouter";
-import Username from "../../../../components/username";
+import UsernameLozenge from "../../../../components/username-lozenge";
 import { AdminAccount } from "../../../../lib/types/account";

 export default function AccountsPending() {
@ -32,7 +32,7 @@ export default function AccountsPending() {
 	function itemToEntry(account: AdminAccount): ReactNode {
 		const acc = account.account;
 		return (
-			<Username
+			<UsernameLozenge
 				key={acc.acct}
 				account={account}
 				linkTo={`/${account.id}`}
--- a/web/source/settings/views/moderation/accounts/search/index.tsx
+++ b/web/source/settings/views/moderation/accounts/search/index.tsx
@ -26,8 +26,8 @@ import { Select, TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useLocation, useSearch } from "wouter";
 import { AdminAccount } from "../../../../lib/types/account";
-import Username from "../../../../components/username";
-import isValidDomain from "is-valid-domain";
+import UsernameLozenge from "../../../../components/username-lozenge";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";

 export function AccountSearchForm() {
 	const [ location, setLocation ] = useLocation();
@ -45,28 +45,7 @@ export function AccountSearchForm() {
 		display_name: useTextInput("display_name", { defaultValue: urlQueryParams.get("display_name") ?? ""}),
 		by_domain: useTextInput("by_domain", {
 			defaultValue: urlQueryParams.get("by_domain") ?? "",
-			validator: (v: string) => {
-				if (v.length === 0) {
-					return "";
-				}
-
-				if (v[v.length-1] === ".") {
-					return "invalid domain";
-				}
-
-				const valid = isValidDomain(v, {
-					subdomain: true,
-					wildcard: false,
-					allowUnicode: true,
-					topLevel: false,
-				});
-
-				if (valid) {
-					return "";
-				}
-
-				return "invalid domain";
-			}
+			validator: formDomainValidator,
 		}),
 		email: useTextInput("email", { defaultValue: urlQueryParams.get("email") ?? ""}),
 		ip: useTextInput("ip", { defaultValue: urlQueryParams.get("ip") ?? ""}),
@ -114,7 +93,7 @@ export function AccountSearchForm() {
 	function itemToEntry(account: AdminAccount): ReactNode {
 		const acc = account.account;
 		return (
-			<Username
+			<UsernameLozenge
 				key={acc.acct}
 				account={account}
 				linkTo={`/${account.id}`}
--- a/web/source/settings/views/moderation/domain-permissions/detail.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/detail.tsx
@ -39,37 +39,47 @@ import { NoArg } from "../../../lib/types/query";
 import { Error } from "../../../components/error";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import { PermType } from "../../../lib/types/perm";
-import isValidDomain from "is-valid-domain";
+import { useCapitalize } from "../../../lib/util";
+import { formDomainValidator } from "../../../lib/util/formvalidators";

 export default function DomainPermDetail() {
 	const baseUrl = useBaseUrl();
-	
-	// Parse perm type from routing params.
-	let params = useParams();
-	if (params.permType !== "blocks" && params.permType !== "allows") {
+	const search = useSearch();
+
+	// Parse perm type from routing params, converting
+	// "blocks" => "block" and "allows" => "allow".
+	const params = useParams();
+	const permTypeRaw = params.permType;
+	if (permTypeRaw !== "blocks" && permTypeRaw !== "allows") {
 		throw "unrecognized perm type " + params.permType;
 	}
-	const permType = params.permType.slice(0, -1) as PermType;
+	const permType = useMemo(() => {
+		return permTypeRaw.slice(0, -1) as PermType;
+	}, [permTypeRaw]);
 	
-	const { data: domainBlocks = {}, isLoading: isLoadingDomainBlocks } = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });
-	const { data: domainAllows = {}, isLoading: isLoadingDomainAllows } = useDomainAllowsQuery(NoArg, { skip: permType !== "allow" });
+	// Conditionally fetch either domain blocks or domain
+	// allows depending on which perm type we're looking at.
+	const {
+		data: blocks = {},
+		isLoading: loadingBlocks,
+		isFetching: fetchingBlocks,
+	} = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });
+	const {
+		data: allows = {},
+		isLoading: loadingAllows,
+		isFetching: fetchingAllows,
+	} = useDomainAllowsQuery(NoArg, { skip: permType !== "allow" });

-	let isLoading;
-	switch (permType) {
-		case "block":
-			isLoading = isLoadingDomainBlocks;
-			break;
-		case "allow":
-			isLoading = isLoadingDomainAllows;
-			break;
-		default:
-			throw "perm type unknown";
+	// Wait until we're done loading.
+	const loading = permType === "block"
+		? loadingBlocks || fetchingBlocks
+		: loadingAllows || fetchingAllows;
+	if (loading) {
+		return <Loading />;
 	}

 	// Parse domain from routing params.
 	let domain = params.domain ?? "unknown";
-
-	const search = useSearch();
 	if (domain === "view") {
 		// Retrieve domain from form field submission.
 		const searchParams = new URLSearchParams(search);
@ -81,36 +91,41 @@ export default function DomainPermDetail() {
 		domain = searchDomain;
 	}

-	// Normalize / decode domain (it may be URL-encoded).
+	// Normalize / decode domain
+	// (it may be URL-encoded).
 	domain = decodeURIComponent(domain);

-	// Check if we already have a perm of the desired type for this domain.
-	const existingPerm: DomainPerm | undefined = useMemo(() => {
-		if (permType == "block") {
-			return domainBlocks[domain];
-		} else {
-			return domainAllows[domain];
-		}
-	}, [domainBlocks, domainAllows, domain, permType]);
-
+	// Check if we already have a perm
+	// of the desired type for this domain.
+	const existingPerm = permType === "block"
+		? blocks[domain]
+		: allows[domain];
+	
+	// Render different into content depending on
+	// if we have a perm already for this domain.
 	let infoContent: React.JSX.Element;
-
-	if (isLoading) {
-		infoContent = <Loading />;
-	} else if (existingPerm == undefined) {
-		infoContent = <span>No stored {permType} yet, you can add one below:</span>;
+	if (existingPerm === undefined) {
+		infoContent = (
+			<span>
+				No stored {permType} yet, you can add one below:
+			</span>
+		);
 	} else {
 		infoContent = (
 			<div className="info">
 				<i className="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
-				<b>Editing domain permissions isn't implemented yet, <a href="https://github.com/superseriousbusiness/gotosocial/issues/1198" target="_blank" rel="noopener noreferrer">check here for progress</a></b>
+				<b>Editing existing domain {permTypeRaw} isn't implemented yet, <a href="https://github.com/superseriousbusiness/gotosocial/issues/1198" target="_blank" rel="noopener noreferrer">check here for progress</a></b>
 			</div>
 		);
 	}

 	return (
 		<div>
-			<h1 className="text-cutoff"><BackButton to={`~${baseUrl}/${permType}s`}/> Domain {permType} for: <span title={domain}>{domain}</span></h1>
+			<h1 className="text-cutoff">
+				<BackButton to={`~${baseUrl}/${permTypeRaw}`} />
+				{" "}
+				Domain {permType} for {domain}
+			</h1>
 			{infoContent}
 			<DomainPermForm
 				defaultDomain={domain}
@ -143,28 +158,7 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 		domain: useTextInput("domain", {
 			source: perm,
 			defaultValue: defaultDomain,
-			validator: (v: string) => {
-				if (v.length === 0) {
-					return "";
-				}
-
-				if (v[v.length-1] === ".") {
-					return "invalid domain";
-				}
-
-				const valid = isValidDomain(v, {
-					subdomain: true,
-					wildcard: false,
-					allowUnicode: true,
-					topLevel: false,
-				});
-
-				if (valid) {
-					return "";
-				}
-
-				return "invalid domain";
-			}
+			validator: formDomainValidator,
 		}),
 		obfuscate: useBoolInput("obfuscate", { source: perm }),
 		commentPrivate: useTextInput("private_comment", { source: perm }),
@ -209,9 +203,7 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 	const [submitForm, submitFormResult] = useFormSubmit(form, [addTrigger, addResult], { changedOnly: false });

 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);

 	const [location, setLocation] = useLocation();

--- a/web/source/settings/views/moderation/domain-permissions/drafts/common.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/drafts/common.tsx
@ -0,0 +1,43 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+export function DomainPermissionDraftHelpText() {
+	return (
+		<>
+			Domain permission drafts are domain block or domain allow entries that are not yet in force.
+			<br/>
+			You can choose to accept or remove a draft.
+		</>
+	);
+}
+
+export function DomainPermissionDraftDocsLink() {
+	return (
+		<a
+			href="https://docs.gotosocial.org/en/latest/admin/settings/#domain-permission-drafts"
+			target="_blank"
+			className="docslink"
+			rel="noreferrer"
+		>
+			Learn more about domain permission drafts (opens in a new tab)
+		</a>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx
@ -0,0 +1,210 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { useLocation, useParams } from "wouter";
+import Loading from "../../../../components/loading";
+import { useBaseUrl } from "../../../../lib/navigation/util";
+import BackButton from "../../../../components/back-button";
+import {
+	useAcceptDomainPermissionDraftMutation,
+	useGetDomainPermissionDraftQuery,
+	useRemoveDomainPermissionDraftMutation
+} from "../../../../lib/query/admin/domain-permissions/drafts";
+import { Error as ErrorC } from "../../../../components/error";
+import UsernameLozenge from "../../../../components/username-lozenge";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useBoolInput, useTextInput } from "../../../../lib/form";
+import { Checkbox, Select } from "../../../../components/form/inputs";
+import { PermType } from "../../../../lib/types/perm";
+
+export default function DomainPermissionDraftDetail() {
+	const baseUrl = useBaseUrl();
+	const backLocation: string = history.state?.backLocation ?? `~${baseUrl}`;
+	const params = useParams();
+
+	let id = params.permDraftId as string | undefined;
+	if (!id) {
+		throw "no perm ID";
+	}
+
+	const {
+		data: permDraft,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = useGetDomainPermissionDraftQuery(id);
+
+	if (isLoading || isFetching) {
+		return <Loading />;
+	} else if (isError) {
+		return <ErrorC error={error} />;
+	} else if (permDraft === undefined) {
+		return <ErrorC error={new Error("permission draft was undefined")} />;
+	}
+
+	const created = permDraft.created_at ? new Date(permDraft.created_at).toDateString(): "unknown";
+	const domain = permDraft.domain;
+	const permType = permDraft.permission_type;
+	if (!permType) {
+		return <ErrorC error={new Error("permission_type was undefined")} />;
+	}
+	const publicComment = permDraft.public_comment ?? "[none]";
+	const privateComment = permDraft.private_comment ?? "[none]";
+	const subscriptionID = permDraft.subscription_id ?? "[none]";
+
+	return (
+		<div className="domain-permission-draft-details">
+			<h1><BackButton to={backLocation} /> Domain Permission Draft Detail</h1>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Created</dt>
+					<dd><time dateTime={permDraft.created_at}>{created}</time></dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Created By</dt>
+					<dd>
+						<UsernameLozenge
+							account={permDraft.created_by}
+							linkTo={`~/settings/moderation/accounts/${permDraft.created_by}`}
+							backLocation={`~${location}`}
+						/>
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Domain</dt>
+					<dd>{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Permission type</dt>
+					<dd className={`permission-type ${permType}`}>
+						<i
+							aria-hidden={true}
+							className={`fa fa-${permType === "allow" ? "check" : "close"}`}
+						></i>
+						{permType}
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment</dt>
+					<dd>{privateComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Public comment</dt>
+					<dd>{publicComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Subscription ID</dt>
+					<dd>{subscriptionID}</dd>
+				</div>
+			</dl>
+			<HandleDraft
+				id={id}
+				permType={permType}
+				backLocation={backLocation}
+			/> 
+		</div>
+	);
+}
+
+function HandleDraft({ id, permType, backLocation }: { id: string, permType: PermType, backLocation: string }) {
+	const [ accept, acceptResult ] = useAcceptDomainPermissionDraftMutation();
+	const [ remove, removeResult ] = useRemoveDomainPermissionDraftMutation();
+	const [_location, setLocation] = useLocation();
+	const form = {
+		acceptOrRemove: useTextInput("accept_or_remove", { defaultValue: "accept" }),
+		overwrite: useBoolInput("overwrite"),
+		exclude_target: useBoolInput("exclude_target"),
+	};
+
+	const onClick = (e) => {
+		e.preventDefault();
+		if (form.acceptOrRemove.value === "accept") {
+			const overwrite = form.overwrite.value;
+			accept({id, overwrite, permType}).then(res => {
+				if ("data" in res) {
+					setLocation(backLocation);
+				}
+			});
+		} else {
+			const exclude_target = form.exclude_target.value;
+			remove({id, exclude_target}).then(res => {
+				if ("data" in res) {
+					setLocation(backLocation);
+				}
+			});	
+		}
+	};
+
+	return (
+		<form>
+			<Select
+				field={form.acceptOrRemove}
+				label="Accept or remove draft"
+				options={
+					<>
+						<option value="accept">Accept</option>
+						<option value="remove">Remove</option>
+					</>
+				}
+			></Select>
+			
+			{ form.acceptOrRemove.value === "accept" &&
+				<>
+					<Checkbox
+						field={form.overwrite}
+						label={`Overwrite any existing ${permType} for this domain`}
+					/>
+				</>
+			}
+
+			{ form.acceptOrRemove.value === "remove" &&
+				<>
+					<Checkbox
+						field={form.exclude_target}
+						label={`Add a domain permission exclude for this domain`}
+					/>
+				</>
+			}
+
+			<MutationButton
+				label={
+					form.acceptOrRemove.value === "accept"
+						? `Accept ${permType}`
+						: "Remove draft"
+				}
+				type="button"
+				className={
+					form.acceptOrRemove.value === "accept"
+						? "button"
+						: "button danger"
+				}
+				onClick={onClick}
+				disabled={false}
+				showError={true}
+				result={
+					form.acceptOrRemove.value === "accept"
+						? acceptResult
+						: removeResult
+				}
+			/>
+		</form>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx
@ -0,0 +1,293 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { ReactNode, useEffect, useMemo } from "react";
+
+import { useTextInput } from "../../../../lib/form";
+import { PageableList } from "../../../../components/pageable-list";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useLocation, useSearch } from "wouter";
+import { useAcceptDomainPermissionDraftMutation, useLazySearchDomainPermissionDraftsQuery, useRemoveDomainPermissionDraftMutation } from "../../../../lib/query/admin/domain-permissions/drafts";
+import { DomainPerm } from "../../../../lib/types/domain-permission";
+import { Error as ErrorC } from "../../../../components/error";
+import { Select, TextInput } from "../../../../components/form/inputs";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import { useCapitalize } from "../../../../lib/util";
+import { DomainPermissionDraftDocsLink, DomainPermissionDraftHelpText } from "./common";
+
+export default function DomainPermissionDraftsSearch() {
+	return (
+		<div className="domain-permission-drafts-view">
+			<div className="form-section-docs">
+				<h1>Domain Permission Drafts</h1>
+				<p>
+					You can use the form below to search through domain permission drafts.
+					<br/>
+					<DomainPermissionDraftHelpText />
+				</p>
+				<DomainPermissionDraftDocsLink />
+			</div>
+			<DomainPermissionDraftsSearchForm />
+		</div>
+	);
+}
+
+function DomainPermissionDraftsSearchForm() {
+	const [ location, setLocation ] = useLocation();
+	const search = useSearch();
+	const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]);
+	const hasParams = urlQueryParams.size != 0;
+	const [ searchDrafts, searchRes ] = useLazySearchDomainPermissionDraftsQuery();
+
+	const form = {
+		subscription_id: useTextInput("subscription_id", { defaultValue: urlQueryParams.get("subscription_id") ?? "" }),
+		domain: useTextInput("domain", {
+			defaultValue: urlQueryParams.get("domain") ?? "",
+			validator: formDomainValidator,
+		}),
+		permission_type: useTextInput("permission_type", { defaultValue: urlQueryParams.get("permission_type") ?? "" }),
+		limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" })
+	};
+
+	// On mount, if urlQueryParams were provided,
+	// trigger the search. For example, if page
+	// was accessed at /search?origin=local&limit=20,
+	// then run a search with origin=local and
+	// limit=20 and immediately render the results.
+	//
+	// If no urlQueryParams set, trigger default
+	// search (first page, no filtering).
+	useEffect(() => {
+		if (hasParams) {
+			searchDrafts(Object.fromEntries(urlQueryParams));
+		} else {
+			setLocation(location + "?limit=20");
+		}
+	}, [
+		urlQueryParams,
+		hasParams,
+		searchDrafts,
+		location,
+		setLocation,
+	]);
+
+	// Rather than triggering the search directly,
+	// the "submit" button changes the location
+	// based on form field params, and lets the
+	// useEffect hook above actually do the search.
+	function submitQuery(e) {
+		e.preventDefault();
+		
+		// Parse query parameters.
+		const entries = Object.entries(form).map(([k, v]) => {
+			// Take only defined form fields.
+			if (v.value === undefined || v.value.length === 0 || v.value === "any") {
+				return null;
+			}
+			return [[k, v.value]];
+		}).flatMap(kv => {
+			// Remove any nulls.
+			return kv || [];
+		});
+
+		const searchParams = new URLSearchParams(entries);
+		setLocation(location + "?" + searchParams.toString());
+	}
+
+	// Location to return to when user clicks "back" on the detail view.
+	const backLocation = location + (hasParams ? `?${urlQueryParams}` : "");
+	
+	// Function to map an item to a list entry.
+	function itemToEntry(draft: DomainPerm): ReactNode {
+		return (
+			<DraftListEntry
+				key={draft.id}	
+				permDraft={draft}
+				linkTo={`/drafts/${draft.id}`}
+				backLocation={backLocation}
+			/>
+		);
+	}
+
+	return (
+		<>
+			<form
+				onSubmit={submitQuery}
+				// Prevent password managers
+				// trying to fill in fields.
+				autoComplete="off"
+			>
+				<Select
+					field={form.permission_type}
+					label="Permission type"
+					options={
+						<>
+							<option value="">Any</option>
+							<option value="block">Block</option>
+							<option value="allow">Allow</option>
+						</>
+					}
+				></Select>
+				<TextInput
+					field={form.domain}
+					label={`Domain (without "https://" prefix)`}
+					placeholder="example.org"
+					autoCapitalize="none"
+					spellCheck="false"
+				/>
+				<Select
+					field={form.limit}
+					label="Items per page"
+					options={
+						<>
+							<option value="20">20</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</>
+					}
+				></Select>
+				<MutationButton
+					disabled={false}
+					label={"Search"}
+					result={searchRes}
+				/>
+			</form>
+			<PageableList
+				isLoading={searchRes.isLoading}
+				isFetching={searchRes.isFetching}
+				isSuccess={searchRes.isSuccess}
+				items={searchRes.data?.drafts}
+				itemToEntry={itemToEntry}
+				isError={searchRes.isError}
+				error={searchRes.error}
+				emptyMessage={<b>No drafts found that match your query.</b>}
+				prevNextLinks={searchRes.data?.links}
+			/>
+		</>
+	);
+}
+
+interface DraftEntryProps {
+	permDraft: DomainPerm;
+	linkTo: string;
+	backLocation: string;
+}
+
+function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
+	const [ _location, setLocation ] = useLocation();
+	const [ accept, acceptResult ] = useAcceptDomainPermissionDraftMutation();
+	const [ remove, removeResult ] = useRemoveDomainPermissionDraftMutation();
+
+	const domain = permDraft.domain;
+	const permType = permDraft.permission_type;
+	const permTypeUpper = useCapitalize(permType);
+	if (!permType) {
+		return <ErrorC error={new Error("permission_type was undefined")} />;
+	}
+
+	const publicComment = permDraft.public_comment ?? "[none]";
+	const privateComment = permDraft.private_comment ?? "[none]";
+	const subscriptionID = permDraft.subscription_id ?? "[none]";
+	const id = permDraft.id;
+	if (!id) {
+		return <ErrorC error={new Error("id was undefined")} />;
+	}
+
+	const title = `${permTypeUpper} ${domain}`;
+
+	return (
+		<span
+			className={`pseudolink domain-permission-draft entry ${permType}`}
+			aria-label={title}
+			title={title}
+			onClick={() => {
+				// When clicking on a draft, direct
+				// to the detail view for that draft.
+				setLocation(linkTo, {
+					// Store the back location in history so
+					// the detail view can use it to return to
+					// this page (including query parameters).
+					state: { backLocation: backLocation }
+				});
+			}}
+			role="link"
+			tabIndex={0}
+		>
+			<h3>{title}</h3>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Domain:</dt>
+					<dd className="text-cutoff">{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Permission type:</dt>
+					<dd className={`permission-type ${permType}`}>
+						<i
+							aria-hidden={true}
+							className={`fa fa-${permType === "allow" ? "check" : "close"}`}
+						></i>
+						{permType}
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment:</dt>
+					<dd className="text-cutoff">{privateComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Public comment:</dt>
+					<dd>{publicComment}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Subscription:</dt>
+					<dd className="text-cutoff">{subscriptionID}</dd>
+				</div>
+			</dl>
+			<div className="action-buttons">
+				<MutationButton
+					label={`Accept ${permType}`}
+					title={`Accept ${permType}`}
+					type="button"
+					className="button"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						accept({ id, permType });
+					}}
+					disabled={false}
+					showError={true}
+					result={acceptResult}
+				/>
+				<MutationButton
+					label={`Remove draft`}
+					title={`Remove draft`}
+					type="button"
+					className="button danger"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						remove({ id });
+					}}
+					disabled={false}
+					showError={true}
+					result={removeResult}
+				/>
+			</div>
+		</span>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/drafts/new.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/drafts/new.tsx
@ -0,0 +1,119 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import useFormSubmit from "../../../../lib/form/submit";
+import { useCreateDomainPermissionDraftMutation } from "../../../../lib/query/admin/domain-permissions/drafts";
+import { useBoolInput, useRadioInput, useTextInput } from "../../../../lib/form";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import MutationButton from "../../../../components/form/mutation-button";
+import { Checkbox, RadioGroup, TextArea, TextInput } from "../../../../components/form/inputs";
+import { useLocation } from "wouter";
+import { DomainPermissionDraftDocsLink, DomainPermissionDraftHelpText } from "./common";
+
+export default function DomainPermissionDraftNew() {
+	const [ _location, setLocation ] = useLocation();
+	
+	const form = {
+		domain: useTextInput("domain", {
+			validator: formDomainValidator,
+		}),
+		permission_type: useRadioInput("permission_type", { 
+			options: {
+				block: "Block domain",
+				allow: "Allow domain",
+			}
+		}),
+		obfuscate: useBoolInput("obfuscate"),
+		public_comment: useTextInput("public_comment"),
+		private_comment: useTextInput("private_comment"),
+	};
+		
+	const [formSubmit, result] = useFormSubmit(
+		form,
+		useCreateDomainPermissionDraftMutation(),
+		{
+			changedOnly: false,
+			onFinish: (res) => {
+				if (res.data) {
+					// Creation successful,
+					// redirect to drafts overview.
+					setLocation(`/drafts/search`);
+				}
+			},
+		});
+
+	return (
+		<form
+			onSubmit={formSubmit}
+			// Prevent password managers
+			// trying to fill in fields.
+			autoComplete="off"
+		>
+			<div className="form-section-docs">
+				<h2>New Domain Permission Draft</h2>
+				<p><DomainPermissionDraftHelpText /></p>
+				<DomainPermissionDraftDocsLink />
+			</div>
+
+			<RadioGroup
+				field={form.permission_type}
+			/>
+
+			<TextInput
+				field={form.domain}
+				label={`Domain (without "https://" prefix)`}
+				placeholder="example.org"
+				autoCapitalize="none"
+				spellCheck="false"
+			/>
+
+			<TextArea
+				field={form.private_comment}
+				label={"Private comment"}
+				placeholder="This domain is like unto a clown car full of clowns, I suggest we block it forthwith."
+				autoCapitalize="sentences"
+				rows={3}
+			/>
+
+			<TextArea
+				field={form.public_comment}
+				label={"Public comment"}
+				placeholder="Bad posters"
+				autoCapitalize="sentences"
+				rows={3}
+			/>
+
+			<Checkbox
+				field={form.obfuscate}
+				label="Obfuscate domain in public lists"
+			/>
+
+			<MutationButton
+				label="Save"
+				result={result}
+				disabled={
+					!form.domain.value ||
+					!form.domain.valid ||
+					!form.permission_type.value
+				}
+			/>
+		</form>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/excludes/common.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/excludes/common.tsx
@ -0,0 +1,54 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+export function DomainPermissionExcludeHelpText() {
+	return (
+		<>
+			Domain permission excludes prevent permissions for a domain (and all
+			subdomains) from being auomatically managed by domain permission subscriptions.
+			<br/>
+			For example, if you create an exclude entry for <code>example.org</code>, then
+			a blocklist or allowlist subscription will <em>exclude</em> entries for <code>example.org</code>
+			and any of its subdomains (<code>sub.example.org</code>, <code>another.sub.example.org</code> etc.)
+			when creating domain permission drafts and domain blocks/allows.
+			<br/>
+			This functionality allows you to manually manage permissions for excluded domains,
+			in cases where you know you definitely do or don't want to federate with a given domain,
+			no matter what entries are contained in a domain permission subscription.
+			<br/>
+			Note that by itself, creation of an exclude entry for a given domain does not affect
+			federation with that domain at all, it is only useful in combination with permission subscriptions.
+		</>
+	);
+}
+
+export function DomainPermissionExcludeDocsLink() {
+	return (
+		<a
+			href="https://docs.gotosocial.org/en/latest/admin/settings/#domain-permission-excludes"
+			target="_blank"
+			className="docslink"
+			rel="noreferrer"
+		>
+			Learn more about domain permission excludes (opens in a new tab)
+		</a>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/excludes/detail.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/excludes/detail.tsx
@ -0,0 +1,119 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import { useLocation, useParams } from "wouter";
+import Loading from "../../../../components/loading";
+import { useBaseUrl } from "../../../../lib/navigation/util";
+import BackButton from "../../../../components/back-button";
+import { Error as ErrorC } from "../../../../components/error";
+import UsernameLozenge from "../../../../components/username-lozenge";
+import { useDeleteDomainPermissionExcludeMutation, useGetDomainPermissionExcludeQuery } from "../../../../lib/query/admin/domain-permissions/excludes";
+import MutationButton from "../../../../components/form/mutation-button";
+
+export default function DomainPermissionExcludeDetail() {
+	const baseUrl = useBaseUrl();
+	const backLocation: string = history.state?.backLocation ?? `~${baseUrl}`;
+
+	const params = useParams();
+	let id = params.excludeId as string | undefined;
+	if (!id) {
+		throw "no perm ID";
+	}
+
+	const {
+		data: permExclude,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = useGetDomainPermissionExcludeQuery(id);
+
+	if (isLoading || isFetching) {
+		return <Loading />;
+	} else if (isError) {
+		return <ErrorC error={error} />;
+	} else if (permExclude === undefined) {
+		return <ErrorC error={new Error("permission exclude was undefined")} />;
+	}
+
+	const created = permExclude.created_at ? new Date(permExclude.created_at).toDateString(): "unknown";
+	const domain = permExclude.domain;
+	const privateComment = permExclude.private_comment ?? "[none]";
+
+	return (
+		<div className="domain-permission-exclude-details">
+			<h1><BackButton to={backLocation} /> Domain Permission Exclude Detail</h1>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Created</dt>
+					<dd><time dateTime={permExclude.created_at}>{created}</time></dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Created By</dt>
+					<dd>
+						<UsernameLozenge
+							account={permExclude.created_by}
+							linkTo={`~/settings/moderation/accounts/${permExclude.created_by}`}
+							backLocation={`~${location}`}
+						/>
+					</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Domain</dt>
+					<dd>{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment</dt>
+					<dd>{privateComment}</dd>
+				</div>
+			</dl>
+			<HandleExclude
+				id={id}
+				backLocation={backLocation}
+			/>
+		</div>
+	);
+}
+
+function HandleExclude({ id, backLocation}: {id: string, backLocation: string}) {
+	const [_location, setLocation] = useLocation();
+	const [ deleteExclude, deleteResult ] = useDeleteDomainPermissionExcludeMutation();
+	
+	return (
+		<MutationButton
+			label={`Delete exclude`}
+			title={`Delete exclude`}
+			type="button"
+			className="button danger"
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				deleteExclude(id).then(res => {
+					if ("data" in res) {
+						setLocation(backLocation);
+					}
+				});
+			}}
+			disabled={false}
+			showError={true}
+			result={deleteResult}
+		/>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx
@ -0,0 +1,235 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { ReactNode, useEffect, useMemo } from "react";
+
+import { useTextInput } from "../../../../lib/form";
+import { PageableList } from "../../../../components/pageable-list";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useLocation, useSearch } from "wouter";
+import { useDeleteDomainPermissionExcludeMutation, useLazySearchDomainPermissionExcludesQuery } from "../../../../lib/query/admin/domain-permissions/excludes";
+import { DomainPerm } from "../../../../lib/types/domain-permission";
+import { Error as ErrorC } from "../../../../components/error";
+import { Select, TextInput } from "../../../../components/form/inputs";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import { DomainPermissionExcludeDocsLink, DomainPermissionExcludeHelpText } from "./common";
+
+export default function DomainPermissionExcludesSearch() {
+	return (
+		<div className="domain-permission-excludes-view">
+			<div className="form-section-docs">
+				<h1>Domain Permission Excludes</h1>
+				<p>
+					You can use the form below to search through domain permission excludes.
+					<br/>
+					<DomainPermissionExcludeHelpText />
+				</p>
+				<DomainPermissionExcludeDocsLink />
+			</div>
+			<DomainPermissionExcludesSearchForm />
+		</div>
+	);
+}
+
+function DomainPermissionExcludesSearchForm() {
+	const [ location, setLocation ] = useLocation();
+	const search = useSearch();
+	const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]);
+	const hasParams = urlQueryParams.size != 0;
+	const [ searchExcludes, searchRes ] = useLazySearchDomainPermissionExcludesQuery();
+
+	const form = {
+		domain: useTextInput("domain", {
+			defaultValue: urlQueryParams.get("domain") ?? "",
+			validator: formDomainValidator,
+		}),
+		limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" })
+	};
+
+	// On mount, if urlQueryParams were provided,
+	// trigger the search. For example, if page
+	// was accessed at /search?origin=local&limit=20,
+	// then run a search with origin=local and
+	// limit=20 and immediately render the results.
+	//
+	// If no urlQueryParams set, trigger default
+	// search (first page, no filtering).
+	useEffect(() => {
+		if (hasParams) {
+			searchExcludes(Object.fromEntries(urlQueryParams));
+		} else {
+			setLocation(location + "?limit=20");
+		}
+	}, [
+		urlQueryParams,
+		hasParams,
+		searchExcludes,
+		location,
+		setLocation,
+	]);
+
+	// Rather than triggering the search directly,
+	// the "submit" button changes the location
+	// based on form field params, and lets the
+	// useEffect hook above actually do the search.
+	function submitQuery(e) {
+		e.preventDefault();
+		
+		// Parse query parameters.
+		const entries = Object.entries(form).map(([k, v]) => {
+			// Take only defined form fields.
+			if (v.value === undefined || v.value.length === 0 || v.value === "any") {
+				return null;
+			}
+			return [[k, v.value]];
+		}).flatMap(kv => {
+			// Remove any nulls.
+			return kv || [];
+		});
+
+		const searchParams = new URLSearchParams(entries);
+		setLocation(location + "?" + searchParams.toString());
+	}
+
+	// Location to return to when user clicks "back" on the detail view.
+	const backLocation = location + (hasParams ? `?${urlQueryParams}` : "");
+	
+	// Function to map an item to a list entry.
+	function itemToEntry(exclude: DomainPerm): ReactNode {
+		return (
+			<ExcludeListEntry
+				key={exclude.id}	
+				permExclude={exclude}
+				linkTo={`/excludes/${exclude.id}`}
+				backLocation={backLocation}
+			/>
+		);
+	}
+
+	return (
+		<>
+			<form
+				onSubmit={submitQuery}
+				// Prevent password managers
+				// trying to fill in fields.
+				autoComplete="off"
+			>
+				<TextInput
+					field={form.domain}
+					label={`Domain (without "https://" prefix)`}
+					placeholder="example.org"
+					autoCapitalize="none"
+					spellCheck="false"
+				/>
+				<Select
+					field={form.limit}
+					label="Items per page"
+					options={
+						<>
+							<option value="20">20</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</>
+					}
+				></Select>
+				<MutationButton
+					disabled={false}
+					label={"Search"}
+					result={searchRes}
+				/>
+			</form>
+			<PageableList
+				isLoading={searchRes.isLoading}
+				isFetching={searchRes.isFetching}
+				isSuccess={searchRes.isSuccess}
+				items={searchRes.data?.excludes}
+				itemToEntry={itemToEntry}
+				isError={searchRes.isError}
+				error={searchRes.error}
+				emptyMessage={<b>No excludes found that match your query.</b>}
+				prevNextLinks={searchRes.data?.links}
+			/>
+		</>
+	);
+}
+
+interface ExcludeEntryProps {
+	permExclude: DomainPerm;
+	linkTo: string;
+	backLocation: string;
+}
+
+function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryProps) {
+	const [ _location, setLocation ] = useLocation();
+	const [ deleteExclude, deleteResult ] = useDeleteDomainPermissionExcludeMutation();
+
+	const domain = permExclude.domain;
+	const privateComment = permExclude.private_comment ?? "[none]";
+	const id = permExclude.id;
+	if (!id) {
+		return <ErrorC error={new Error("id was undefined")} />;
+	}
+
+	return (
+		<span
+			className={`pseudolink domain-permission-exclude entry`}
+			aria-label={`Exclude ${domain}`}
+			title={`Exclude ${domain}`}
+			onClick={() => {
+				// When clicking on a exclude, direct
+				// to the detail view for that exclude.
+				setLocation(linkTo, {
+					// Store the back location in history so
+					// the detail view can use it to return to
+					// this page (including query parameters).
+					state: { backLocation: backLocation }
+				});
+			}}
+			role="link"
+			tabIndex={0}
+		>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Domain:</dt>
+					<dd className="text-cutoff">{domain}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Private comment:</dt>
+					<dd className="text-cutoff">{privateComment}</dd>
+				</div>
+			</dl>
+			<div className="action-buttons">
+				<MutationButton
+					label={`Delete exclude`}
+					title={`Delete exclude`}
+					type="button"
+					className="button danger"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						deleteExclude(id);
+					}}
+					disabled={false}
+					showError={true}
+					result={deleteResult}
+				/>
+			</div>
+		</span>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/excludes/new.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/excludes/new.tsx
@ -0,0 +1,90 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import useFormSubmit from "../../../../lib/form/submit";
+import { useCreateDomainPermissionExcludeMutation } from "../../../../lib/query/admin/domain-permissions/excludes";
+import { useTextInput } from "../../../../lib/form";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
+import MutationButton from "../../../../components/form/mutation-button";
+import { TextArea, TextInput } from "../../../../components/form/inputs";
+import { useLocation } from "wouter";
+import { DomainPermissionExcludeDocsLink, DomainPermissionExcludeHelpText } from "./common";
+
+export default function DomainPermissionExcludeNew() {
+	const [ _location, setLocation ] = useLocation();
+	
+	const form = {
+		domain: useTextInput("domain", {
+			validator: formDomainValidator,
+		}),
+		private_comment: useTextInput("private_comment"),
+	};
+		
+	const [formSubmit, result] = useFormSubmit(
+		form,
+		useCreateDomainPermissionExcludeMutation(),
+		{
+			changedOnly: false,
+			onFinish: (res) => {
+				if (res.data) {
+					// Creation successful,
+					// redirect to excludes overview.
+					setLocation(`/excludes/search`);
+				}
+			},
+		});
+
+	return (
+		<form
+			onSubmit={formSubmit}
+			// Prevent password managers
+			// trying to fill in fields.
+			autoComplete="off"
+		>
+			<div className="form-section-docs">
+				<h2>New Domain Permission Exclude</h2>
+				<p><DomainPermissionExcludeHelpText /></p>
+				<DomainPermissionExcludeDocsLink />
+			</div>
+
+			<TextInput
+				field={form.domain}
+				label={`Domain (without "https://" prefix)`}
+				placeholder="example.org"
+				autoCapitalize="none"
+				spellCheck="false"
+			/>
+
+			<TextArea
+				field={form.private_comment}
+				label={"Private comment"}
+				placeholder="Created an exclude for this domain because we should manage it manually."
+				autoCapitalize="sentences"
+				rows={3}
+			/>
+
+			<MutationButton
+				label="Save"
+				result={result}
+				disabled={!form.domain.value || !form.domain.valid}
+			/>
+		</form>
+	);
+}
--- a/web/source/settings/views/moderation/domain-permissions/overview.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/overview.tsx
@ -30,6 +30,7 @@ import type { MappedDomainPerms } from "../../../lib/types/domain-permission";
 import { NoArg } from "../../../lib/types/query";
 import { PermType } from "../../../lib/types/perm";
 import { useBaseUrl } from "../../../lib/navigation/util";
+import { useCapitalize } from "../../../lib/util";

 export default function DomainPermissionsOverview() {	
 	const baseUrl = useBaseUrl();
@ -42,9 +43,7 @@ export default function DomainPermissionsOverview() {
 	const permType = params.permType.slice(0, -1) as PermType;

 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);

 	// Fetch / wait for desired perms to load.
 	const { data: blocks, isLoading: isLoadingBlocks } = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });
--- a/web/source/settings/views/moderation/menu.tsx
+++ b/web/source/settings/views/moderation/menu.tsx
@ -116,6 +116,40 @@ function ModerationDomainPermsMenu() {
 				itemUrl="import-export"
 				icon="fa-floppy-o"
 			/>
+			<MenuItem
+				name="Drafts"
+				itemUrl="drafts"
+				defaultChild="search"
+				icon="fa-pencil"
+			>
+				<MenuItem
+					name="Search"
+					itemUrl="search"
+					icon="fa-list"
+				/>
+				<MenuItem
+					name="New draft"
+					itemUrl="new"
+					icon="fa-plus"
+				/>
+			</MenuItem>
+			<MenuItem
+				name="Excludes"
+				itemUrl="excludes"
+				defaultChild="search"
+				icon="fa-minus-square"
+			>
+				<MenuItem
+					name="Search"
+					itemUrl="search"
+					icon="fa-list"
+				/>
+				<MenuItem
+					name="New exclude"
+					itemUrl="new"
+					icon="fa-plus"
+				/>
+			</MenuItem>
 		</MenuItem>
 	);
 }
--- a/web/source/settings/views/moderation/reports/detail.tsx
+++ b/web/source/settings/views/moderation/reports/detail.tsx
@ -25,7 +25,7 @@ import { useValue, useTextInput } from "../../../lib/form";
 import useFormSubmit from "../../../lib/form/submit";
 import { TextArea } from "../../../components/form/inputs";
 import MutationButton from "../../../components/form/mutation-button";
-import Username from "../../../components/username";
+import UsernameLozenge from "../../../components/username-lozenge";
 import { useGetReportQuery, useResolveReportMutation } from "../../../lib/query/admin/reports";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import { AdminReport } from "../../../lib/types/report";
@ -99,7 +99,7 @@ function ReportBasicInfo({ report, baseUrl, location }: ReportSectionProps) {
 			<div className="info-list-entry">
 				<dt>Reported account</dt>
 				<dd>
-					<Username
+					<UsernameLozenge
 						account={target}
 						linkTo={`~/settings/moderation/accounts/${target.id}`}
 						backLocation={`~${baseUrl}${location}`}
@ -110,7 +110,7 @@ function ReportBasicInfo({ report, baseUrl, location }: ReportSectionProps) {
 			<div className="info-list-entry">
 				<dt>Reported by</dt>
 				<dd>
-					<Username
+					<UsernameLozenge
 						account={from}
 						linkTo={`~/settings/moderation/accounts/${from.id}`}
 						backLocation={`~${baseUrl}${location}`}
@ -173,7 +173,7 @@ function ReportHistory({ report, baseUrl, location }: ReportSectionProps) {
 				<div className="info-list-entry">
 					<dt>Handled by</dt>
 					<dd>
-						<Username
+						<UsernameLozenge
 							account={handled_by}
 							linkTo={`~/settings/moderation/accounts/${handled_by.id}`}
 							backLocation={`~${baseUrl}${location}`}
--- a/web/source/settings/views/moderation/reports/search.tsx
+++ b/web/source/settings/views/moderation/reports/search.tsx
@ -25,7 +25,7 @@ import { PageableList } from "../../../components/pageable-list";
 import { Select } from "../../../components/form/inputs";
 import MutationButton from "../../../components/form/mutation-button";
 import { useLocation, useSearch } from "wouter";
-import Username from "../../../components/username";
+import UsernameLozenge from "../../../components/username-lozenge";
 import { AdminReport } from "../../../lib/types/report";

 export default function ReportsSearch() {
@ -206,7 +206,7 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
 				<div className="info-list-entry">
 					<dt>Reported account:</dt>
 					<dd className="text-cutoff">
-						<Username
+						<UsernameLozenge
 							account={target}
 							classNames={["text-cutoff report-byline"]}
 						/>
@ -216,7 +216,7 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
 				<div className="info-list-entry">
 					<dt>Reported by:</dt>
 					<dd className="text-cutoff reported-by">
-						<Username account={from} />
+						<UsernameLozenge account={from} />
 					</dd>
 				</div>

--- a/web/source/settings/views/moderation/router.tsx
+++ b/web/source/settings/views/moderation/router.tsx
@ -29,6 +29,12 @@ import DomainPermDetail from "./domain-permissions/detail";
 import AccountsSearch from "./accounts";
 import AccountsPending from "./accounts/pending";
 import AccountDetail from "./accounts/detail";
+import DomainPermissionDraftsSearch from "./domain-permissions/drafts";
+import DomainPermissionDraftNew from "./domain-permissions/drafts/new";
+import DomainPermissionDraftDetail from "./domain-permissions/drafts/detail";
+import DomainPermissionExcludeDetail from "./domain-permissions/excludes/detail";
+import DomainPermissionExcludesSearch from "./domain-permissions/excludes";
+import DomainPermissionExcludeNew from "./domain-permissions/excludes/new";

 /*
 	EXPORTED COMPONENTS
@ -139,6 +145,12 @@ function ModerationDomainPermsRouter() {
 					<Switch>
 						<Route path="/import-export" component={ImportExport} />
 						<Route path="/process" component={ImportExport} />
+						<Route path="/drafts/search" component={DomainPermissionDraftsSearch} />
+						<Route path="/drafts/new" component={DomainPermissionDraftNew} />
+						<Route path="/drafts/:permDraftId" component={DomainPermissionDraftDetail} />
+						<Route path="/excludes/search" component={DomainPermissionExcludesSearch} />
+						<Route path="/excludes/new" component={DomainPermissionExcludeNew} />
+						<Route path="/excludes/:excludeId" component={DomainPermissionExcludeDetail} />
 						<Route path="/:permType" component={DomainPermissionsOverview} />
 						<Route path="/:permType/:domain" component={DomainPermDetail} />
 						<Route><Redirect to="/blocks"/></Route>
--- a/web/source/settings/views/user/posts/index.tsx
+++ b/web/source/settings/views/user/posts/index.tsx
@ -20,7 +20,7 @@
 import React from "react";
 import { useVerifyCredentialsQuery } from "../../../lib/query/oauth";
 import Loading from "../../../components/loading";
-import { Error } from "../../../components/error";
+import { Error as ErrorC } from "../../../components/error";
 import BasicSettings from "./basic-settings";
 import InteractionPolicySettings from "./interaction-policy-settings";

@ -38,7 +38,11 @@ export default function PostSettings() {
 	}

 	if (isError) {
-		return <Error error={error} />;
+		return <ErrorC error={error} />;
+	}
+
+	if (!account) {
+		return <ErrorC error={new Error("account was undefined")} />;
 	}

 	return (
--- a/web/source/settings/views/user/profile.tsx
+++ b/web/source/settings/views/user/profile.tsx
@ -45,6 +45,7 @@ import { useAccountThemesQuery } from "../../lib/query/user";
 import { useUpdateCredentialsMutation } from "../../lib/query/user";
 import { useVerifyCredentialsQuery } from "../../lib/query/oauth";
 import { useInstanceV1Query } from "../../lib/query/gts-api";
+import { Account } from "../../lib/types/account";

 export default function UserProfile() {
 	return (
@ -55,7 +56,11 @@ export default function UserProfile() {
 	);
 }

-function UserProfileForm({ data: profile }) {
+interface UserProfileFormProps {
+	data: Account;
+}
+
+function UserProfileForm({ data: profile }: UserProfileFormProps) {
 	/*
 		User profile update form keys
 		- bool bot
@ -132,6 +137,9 @@ function UserProfileForm({ data: profile }) {
 		}
 	});

+	const noAvatarSet = !profile.avatar_media_id;
+	const noHeaderSet = !profile.header_media_id;
+
 	return (
 		<form className="user-profile" onSubmit={submitForm}>
 			<h1>Profile</h1>
@ -145,33 +153,37 @@ function UserProfileForm({ data: profile }) {
 					role={profile.role}
 				/>

-				<div className="file-input-with-image-description">
+				<fieldset className="file-input-with-image-description">
+					<legend>Header</legend>
 					<FileInput
-						label="Header"
+						label="Upload file"
 						field={form.header}
 						accept="image/png, image/jpeg, image/webp, image/gif"
 					/>
 					<TextInput
 						field={form.headerDescription}
-						label="Header image description"
+						label="Image description; only settable if not using default header"
 						placeholder="A green field with pink flowers."
 						autoCapitalize="sentences"
+						disabled={noHeaderSet && !form.header.value}
 					/>
-				</div>
+				</fieldset>
 				
-				<div className="file-input-with-image-description">
+				<fieldset className="file-input-with-image-description">
+					<legend>Avatar</legend>
 					<FileInput
-						label="Avatar (1:1 images look best)"
+						label="Upload file (1:1 images look best)"
 						field={form.avatar}
 						accept="image/png, image/jpeg, image/webp, image/gif"
 					/>
 					<TextInput
 						field={form.avatarDescription}
-						label="Avatar image description"
+						label="Image description; only settable if not using default avatar"
 						placeholder="A cute drawing of a smiling sloth."
 						autoCapitalize="sentences"
+						disabled={noAvatarSet && !form.avatar.value}
 					/>
-				</div>
+				</fieldset>

 				<div className="theme">
 					<div>
--- a/web/source/yarn.lock
+++ b/web/source/yarn.lock
@ -2922,9 +2922,9 @@ create-require@^1.1.0:
  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==

 cross-spawn@^7.0.2:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
  dependencies:
    path-key "^3.1.0"
    shebang-command "^2.0.0"
@ -3213,9 +3213,9 @@ electron-to-chromium@^1.4.668:
  integrity sha512-jeWaIta2rIG2FzHaYIhSuVWqC6KJYo7oSBX4Jv7g+aVujKztfvdpf+n6MGwZdC5hQXbax4nntykLH2juIQrfPg==

 elliptic@^6.5.3, elliptic@^6.5.4:
-  version "6.5.7"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
-  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.6.0.tgz#5919ec723286c1edf28685aa89261d4761afa210"
+  integrity sha512-dpwoQcLc/2WLQvJvLRHKZ+f9FgOdjnq11rurqwekGQygGPsYSK29OMMD2WalatiqQ+XGFDglTNixpPfI+lpaAA==
  dependencies:
    bn.js "^4.11.9"
    brorand "^1.1.0"
@ -4134,9 +4134,9 @@ http-parser-js@>=0.5.1:
  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==

 http-proxy-middleware@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
-  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
+  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
  dependencies:
    "@types/http-proxy" "^1.17.8"
    http-proxy "^1.18.1"
--- a/web/template/about.tmpl
+++ b/web/template/about.tmpl
@ -91,7 +91,7 @@ Polls can have up to
                <li><a href="#contact">Contact</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#languages">Languages</a></li>
-                <li><a href="#signup">Register an Account on {{ .instance.Title -}}</li>
+                <li><a href="#signup">Register an Account on {{ .instance.Title -}}</a></li>
                <li><a href="#rules">Rules</a></li>
                <li><a href="#terms">Terms and Conditions</a></li>
                <li><a href="#moderated-servers">Moderated Servers</a></li>
@ -172,7 +172,7 @@ Polls can have up to
            <p>
                ActivityPub instances federate with other instances by exchanging data with them over the network.
                Exchanged data includes things like accounts, statuses, likes, boosts, and media attachments.
-                This exchange of data can prevented for instances on specific domains via a domain block created
+                This exchange of data can be prevented for instances on specific domains via a domain block created
                by an instance admin. When an instance is domain blocked by another instance:
            </p>
            <ul>
@ -190,4 +190,4 @@ Polls can have up to
        </div>
    </section>
 </main>
-{{- end }}
+{{- end }}
--- a/web/template/index_apps.tmpl
+++ b/web/template/index_apps.tmpl
@ -29,27 +29,27 @@
        <ul class="applist nodot" role="group">
            <li class="applist-entry">
                <div class="applist-text">
-                    <p><strong>Semaphore</strong> is a web client designed for speed and simplicity.</p>
+                    <p><strong>Pinafore</strong> is a web client designed for speed and simplicity.</p>
                    <a
-                        href="https://semaphore.social/"
+                        href="https://pinafore.social/"
                        rel="nofollow noreferrer noopener"
                        target="_blank"
                    >
-                        Use Semaphore
+                        Use Pinafore
                    </a>
                </div>
                <svg
                    role="img"
-                    aria-labelledby="semaphore-title semaphore-desc"
+                    aria-labelledby="pinafore-title pinafore-desc"
                    class="applist-logo redraw"
                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 146 120"
+                    viewBox="0 0 10000 10000"
                    width="100"
                    height="100"
                >
-                    <title id="semaphore-title">The Semaphore logo</title>
-                    <desc id="semaphore-desc">A waving flag</desc>
-                    <path d="M68.13 0C53.94 0 42.81 20 13.9 27.1l-2.23-5.29a6.5 6.5 0 0 0-5.17-10.4 6.5 6.5 0 0 0-.81 12.95L46.2 120l5.99-2.5-14.42-33.33c22.8-6.86 32.51-22.16 49.83-20.58 9.9.9 4.87 19.56 8.11 17.93 16.22-8.15 32.44-11.41 50.29-11.41-7.96-9.78-17.38-20.55-22.71-31.74L120.8 32c-2.32-7.33-2.56-14.75.87-22.22-9.74-3.26-21.1 0-32.45 4.9C82.2 9.77 79.5 0 68.13 0zM15.26 30.42c8.95 6.63 13.63 13.86 16.07 20.94l1.62 6.32c1.24 6.58 1.07 12.8 1.27 18.03z"></path>
+                    <title id="pinafore-title">The Pinafore logo</title>
+                    <desc id="pinafore-desc">A sailboat</desc>
+                    <path d="M9212 5993H5987V823c1053 667 2747 2177 3225 5170zM3100 2690A12240 12240 0 01939 6035h2161zm676 7210h2448a3067 3067 0 003067-3067H5052V627a527 527 0 00-1052 0v6206H709a3067 3067 0 003067 3067z"></path>
                </svg>
            </li>
            <li class="applist-entry">
@ -115,4 +115,4 @@
        </ul>
    </div>
 </section>
-{{- end }}
+{{- end }}