From 5a7684ecb95c69e08262ef6e908bd5b7dcd5f51a Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 4 May 2026 15:56:04 +0200
Subject: [PATCH] [Glitch] Add admin UI for managing email subscriptions

Port ee88da4511cb02f5c2312433376af19c0474bf3e to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/styles/mastodon/admin.scss         | 114 ++++++++++++++++++
 .../glitch/styles/mastodon/forms.scss         |  18 +++
 .../glitch/styles/mastodon/tables.scss        |  26 ++++
 3 files changed, 158 insertions(+)

diff --git a/app/javascript/flavours/glitch/styles/mastodon/admin.scss b/app/javascript/flavours/glitch/styles/mastodon/admin.scss
index 8c245c89ad..65622a27d4 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/admin.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/admin.scss
@@ -2238,3 +2238,117 @@ a.sparkline {
     }
   }
 }
+
+.subheading-with-action {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+
+  &__subheading {
+    flex-grow: 1;
+  }
+
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 16px;
+  }
+}
+
+.actions-list {
+  &__item {
+    border-bottom: 1px solid var(--color-border-primary);
+    padding: 12px 0;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    &__label {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      &__label {
+        font-weight: 600;
+        font-size: 15px;
+      }
+
+      &__hint {
+        font-size: 13px;
+        color: var(--color-text-secondary);
+      }
+    }
+
+    &__action {
+      flex-shrink: 0;
+    }
+  }
+}
+
+.empty-state {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 12px;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+
+  &__title-and-description {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    line-height: 21px;
+    font-size: 15px;
+    text-align: center;
+
+    &__title {
+      font-weight: 600;
+    }
+  }
+
+  svg {
+    width: 200px;
+  }
+
+  // FIXME: This is duplicated with empty_message.module.scss
+  [data-color-scheme='dark'] & svg {
+    --color-skin-1: #3a3a50;
+    --color-skin-2: #67678e;
+    --color-skin-3: #44445f;
+    --color-outline: #21212c;
+    --color-shadow: #181820;
+    --color-highlight: #b2b1c8;
+  }
+}
+
+.heading-with-lead {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  h1 {
+    font-size: 28px;
+    font-weight: 600;
+  }
+
+  .lead {
+    font-size: 18px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.status-badge {
+  display: inline-flex;
+  padding: 3px 4px;
+  border-radius: 8px;
+  background: var(--color-bg-success-softest);
+  font-size: 13px;
+  font-weight: 600;
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon/forms.scss b/app/javascript/flavours/glitch/styles/mastodon/forms.scss
index 3d34effe07..a59299b8f5 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/forms.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/forms.scss
@@ -71,6 +71,24 @@ code {
 }
 
 .simple_form {
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+
+  .numbered-list {
+    list-style: decimal;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 16px;
+    margin-inline-start: 28px;
+
+    li {
+      margin-bottom: 4px;
+    }
+  }
+
   &.hidden {
     display: none;
   }
diff --git a/app/javascript/flavours/glitch/styles/mastodon/tables.scss b/app/javascript/flavours/glitch/styles/mastodon/tables.scss
index 1088781417..0023ea353c 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/tables.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/tables.scss
@@ -21,6 +21,24 @@
     }
   }
 
+  .align-end {
+    text-align: end;
+  }
+
+  .valign-middle {
+    vertical-align: middle;
+  }
+
+  .avatar-column {
+    width: 24px;
+
+    .avatar {
+      border-radius: 8px;
+      border: 1px solid var(--color-border-primary);
+      background: var(--color-background-secondary);
+    }
+  }
+
   & > thead > tr > th {
     vertical-align: bottom;
     font-weight: 500;
@@ -170,6 +188,14 @@ a.table-action-link {
   }
 }
 
+.table-icon-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  aspect-ratio: 1;
+}
+
 .batch-table {
   &--no-toolbar {
     .batch-table__toolbar {