From 426ddffba04abcf5e4d01d323341726f26aa0f17 Mon Sep 17 00:00:00 2001
From: Matthias Pfefferle <pfefferle@users.noreply.github.com>
Date: Fri, 21 Jul 2023 14:52:18 +0200
Subject: [PATCH] First step of the settings redesign

thanks @nuriapenya for your help and the nice Screens!
---
 assets/css/activitypub-admin.css       |  24 +-
 templates/blog-user-followers-list.php |   4 +-
 templates/settings.php                 | 480 ++++++++++++-------------
 templates/welcome.php                  | 148 ++++----
 4 files changed, 341 insertions(+), 315 deletions(-)

diff --git a/assets/css/activitypub-admin.css b/assets/css/activitypub-admin.css
index a7744ce..b6090d8 100644
--- a/assets/css/activitypub-admin.css
+++ b/assets/css/activitypub-admin.css
@@ -1,4 +1,4 @@
-.activitypub-settings-body {
+.activitypub-settings {
 	max-width: 800px;
 	margin: 0 auto;
 }
@@ -151,12 +151,12 @@ summary {
 	background-color: #f6f7f7;
 }
 
-.activitypub-settings-body
+.activitypub-settings
 input.blog-user-identifier {
 	text-align: right;
 }
 
-.activitypub-settings-body
+.activitypub-settings
 .header-image {
 	width: 100%;
 	height: 80px;
@@ -168,7 +168,7 @@ input.blog-user-identifier {
 	background-size: cover;
 }
 
-.activitypub-settings-body
+.activitypub-settings
 .logo {
 	height: 80px;
 	width: 80px;
@@ -176,3 +176,19 @@ input.blog-user-identifier {
 	top: 40px;
 	left: 40px;
 }
+
+.settings_page_activitypub .box  {
+	border: 1px solid #c3c4c7;
+	background-color: #fff;
+	padding: 1em 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.settings_page_activitypub .activitypub-welcome-page .box label {
+	font-weight: bold;
+}
+
+.settings_page_activitypub .plugin-recommendations {
+	border-bottom: none;
+	margin-bottom: 0;
+}
diff --git a/templates/blog-user-followers-list.php b/templates/blog-user-followers-list.php
index f73826f..28e47b8 100644
--- a/templates/blog-user-followers-list.php
+++ b/templates/blog-user-followers-list.php
@@ -1,6 +1,6 @@
 <?php
 \load_template(
-	\dirname( __FILE__ ) . '/admin-header.php',
+	__DIR__ . '/admin-header.php',
 	true,
 	array(
 		'settings' => '',
@@ -10,7 +10,7 @@
 );
 ?>
 
-<div class="wrap">
+<div class="wrap activitypub-followers-page">
 	<h1><?php \esc_html_e( 'Followers', 'activitypub' ); ?></h1>
 
 	<?php $table = new \Activitypub\Table\Followers(); ?>
diff --git a/templates/settings.php b/templates/settings.php
index 3d0bccb..aacc8e1 100644
--- a/templates/settings.php
+++ b/templates/settings.php
@@ -10,7 +10,7 @@
 );
 ?>
 
-<div class="activitypub-settings-body hide-if-no-js">
+<div class="activitypub-settings activitypub-settings-page hide-if-no-js">
 	<div class="notice notice-info">
 		<p>
 			<?php
@@ -28,266 +28,256 @@
 
 	<p><?php \esc_html_e( 'Customize your ActivityPub settings to suit your needs.', 'activitypub' ); ?></p>
 
-	<hr />
-
 	<form method="post" action="options.php">
 		<?php \settings_fields( 'activitypub' ); ?>
 
-		<h3 class="dashicons-before dashicons-admin-users"><?php \esc_html_e( 'Blog-User', 'activitypub' ); ?></h3>
+		<div class="box">
+			<h3><?php \esc_html_e( 'Users', 'activitypub' ); ?></h3>
 
-		<p><?php \esc_html_e( 'All settings for the Blog-User (Catch-All Account)', 'activitypub' ); ?></p>
+			<p><?php \esc_html_e( 'All user related settings.', 'activitypub' ); ?></p>
 
-		<table class="form-table">
-			<tbody>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'User-Identifier', 'activitypub' ); ?>
-					</th>
-					<td>
-						<label for="activitypub_blog_user_identifier">
-							<input class="blog-user-identifier" name="activitypub_blog_user_identifier" id="activitypub_blog_user_identifier" type="text" value="<?php echo esc_attr( \get_option( 'activitypub_blog_user_identifier', \Activitypub\Model\Blog_User::get_default_username() ) ); ?>" />
-							@<?php echo esc_html( \wp_parse_url( \home_url(), PHP_URL_HOST ) ); ?>
-						</label>
-						<p class="description">
-
-						</p>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-
-		<?php \do_settings_fields( 'activitypub', 'blog-user' ); ?>
-
-		<hr />
-
-		<h3 class="dashicons-before dashicons-groups"><?php \esc_html_e( 'Users', 'activitypub' ); ?></h3>
-
-		<p><?php \esc_html_e( 'All user related settings.', 'activitypub' ); ?></p>
-
-		<table class="form-table">
-			<tbody>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'Enable/disable Users by Type', 'activitypub' ); ?>
-					</th>
-					<td>
-						<p>
-							<label>
-								<input type="checkbox" name="activitypub_enable_users" id="activitypub_enable_users" value="1" <?php echo \checked( '1', \get_option( 'activitypub_enable_users', '1' ) ); ?> />
-								<?php \esc_html_e( 'Enable Authors', 'activitypub' ); ?>
+			<table class="form-table">
+				<tbody>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Enable/disable Users by Type', 'activitypub' ); ?>
+						</th>
+						<td>
+							<p>
+								<label>
+									<input type="checkbox" name="activitypub_enable_users" id="activitypub_enable_users" value="1" <?php echo \checked( '1', \get_option( 'activitypub_enable_users', '1' ) ); ?> />
+									<?php \esc_html_e( 'Enable Authors', 'activitypub' ); ?>
+								</label>
+							</p>
+							<p class="description">
+								<?php echo \wp_kses( \__( 'Every Author on this Blog (with the <code>publish_posts</code> capability) gets his own ActivityPub enabled Profile.', 'activitypub' ), array( 'code' => array() ) ); ?>
+							</p>
+							<p>
+								<label>
+									<input type="checkbox" name="activitypub_enable_blog_user" id="activitypub_enable_blog_user" value="1" <?php echo \checked( '1', \get_option( 'activitypub_enable_blog_user', '0' ) ); ?> />
+									<?php \esc_html_e( 'Enable Blog-User', 'activitypub' ); ?>
+								</label>
+							</p>
+							<p class="description">
+								<?php \esc_html_e( 'Your Blog becomes an ActivityPub compatible Profile.', 'activitypub' ); ?>
+							</p>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Change Blog-User Identifier', 'activitypub' ); ?>
+						</th>
+						<td>
+							<label for="activitypub_blog_user_identifier">
+								<input class="blog-user-identifier" name="activitypub_blog_user_identifier" id="activitypub_blog_user_identifier" type="text" value="<?php echo esc_attr( \get_option( 'activitypub_blog_user_identifier', \Activitypub\Model\Blog_User::get_default_username() ) ); ?>" />
+								@<?php echo esc_html( \wp_parse_url( \home_url(), PHP_URL_HOST ) ); ?>
 							</label>
-						</p>
-						<p class="description">
-							<?php echo \wp_kses( \__( 'Every Author on this Blog (with the <code>publish_posts</code> capability) gets his own ActivityPub enabled Profile.', 'activitypub' ), array( 'code' => array() ) ); ?>
-						</p>
-						<p>
-							<label>
-								<input type="checkbox" name="activitypub_enable_blog_user" id="activitypub_enable_blog_user" value="1" <?php echo \checked( '1', \get_option( 'activitypub_enable_blog_user', '0' ) ); ?> />
-								<?php \esc_html_e( 'Enable Blog-User', 'activitypub' ); ?>
-							</label>
-						</p>
-						<p class="description">
-							<?php \esc_html_e( 'Your Blog becomes an ActivityPub compatible Profile.', 'activitypub' ); ?>
-						</p>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+							<p class="description">
+								<?php \esc_html_e( 'This Blog-User will federate all posts written on your Blog, regardless of the User who posted it.', 'activitypub' ); ?>
+							</p>
+						</td>
+					</tr>
+				</tbody>
+			</table>
 
-		<?php \do_settings_fields( 'activitypub', 'user' ); ?>
+			<?php \do_settings_fields( 'activitypub', 'user' ); ?>
+		</div>
 
-		<h3 class="dashicons-before dashicons-format-chat"><?php \esc_html_e( 'Activities', 'activitypub' ); ?></h3>
+		<div class="box">
+			<h3><?php \esc_html_e( 'Activities', 'activitypub' ); ?></h3>
 
-		<p><?php \esc_html_e( 'All activity related settings.', 'activitypub' ); ?></p>
+			<p><?php \esc_html_e( 'All activity related settings.', 'activitypub' ); ?></p>
 
-		<table class="form-table">
-			<tbody>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'Post-Content', 'activitypub' ); ?>
-					</th>
-					<td>
-						<p>
-							<label for="activitypub_post_content_type_title_link">
-								<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_title_link" value="title" <?php echo \checked( 'title', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
-								<?php \esc_html_e( 'Title and link', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'Only the title and a link.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-						<p>
-							<label for="activitypub_post_content_type_excerpt">
-								<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_excerpt" value="excerpt" <?php echo \checked( 'excerpt', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
-								<?php \esc_html_e( 'Excerpt', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'A content summary, shortened to 400 characters and without markup.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-						<p>
-							<label for="activitypub_post_content_type_content">
-								<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_content" value="content" <?php echo \checked( 'content', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
-								<?php \esc_html_e( 'Content (default)', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'The full content.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-						<p>
-							<label for="activitypub_post_content_type_custom">
-								<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_custom" value="custom" <?php echo \checked( 'custom', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
-								<?php \esc_html_e( 'Custom', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'Use the text-area below, to customize your activities.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-						<p>
-							<textarea name="activitypub_custom_post_content" id="activitypub_custom_post_content" rows="10" cols="50" class="large-text" placeholder="<?php echo wp_kses( ACTIVITYPUB_CUSTOM_POST_CONTENT, 'post' ); ?>"><?php echo wp_kses( \get_option( 'activitypub_custom_post_content', ACTIVITYPUB_CUSTOM_POST_CONTENT ), 'post' ); ?></textarea>
-							<details>
-								<summary><?php esc_html_e( 'See a list of ActivityPub Template Tags.', 'activitypub' ); ?></summary>
-								<div class="description">
-									<ul>
-										<li><code>[ap_title]</code> - <?php \esc_html_e( 'The post\'s title.', 'activitypub' ); ?></li>
-										<li><code>[ap_content]</code> - <?php \esc_html_e( 'The post\'s content.', 'activitypub' ); ?></li>
-										<li><code>[ap_excerpt]</code> - <?php \esc_html_e( 'The post\'s excerpt (default 400 chars).', 'activitypub' ); ?></li>
-										<li><code>[ap_permalink]</code> - <?php \esc_html_e( 'The post\'s permalink.', 'activitypub' ); ?></li>
-										<li><code>[ap_shortlink]</code> - <?php echo \wp_kses( \__( 'The post\'s shortlink. I can recommend <a href="https://wordpress.org/plugins/hum/" target="_blank">Hum</a>.', 'activitypub' ), 'default' ); ?></li>
-										<li><code>[ap_hashtags]</code> - <?php \esc_html_e( 'The post\'s tags as hashtags.', 'activitypub' ); ?></li>
-									</ul>
-									<p><?php \esc_html_e( 'You can find the full list with all possible attributes in the help section on the top-right of the screen.', 'activitypub' ); ?></p>
-								</div>
-							</details>
-						</p>
-					</td>
-				</tr>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'Number of images', 'activitypub' ); ?>
-					</th>
-					<td>
-						<input value="<?php echo esc_attr( \get_option( 'activitypub_max_image_attachments', ACTIVITYPUB_MAX_IMAGE_ATTACHMENTS ) ); ?>" name="activitypub_max_image_attachments" id="activitypub_max_image_attachments" type="number" min="0" />
-						<p class="description">
-							<?php
-							echo \wp_kses(
-								\sprintf(
-									// translators:
-									\__( 'The number of images to attach to posts. Default: <code>%s</code>', 'activitypub' ),
-									\esc_html( ACTIVITYPUB_MAX_IMAGE_ATTACHMENTS )
-								),
-								'default'
-							);
-							?>
-						</p>
-					</td>
-				</tr>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'Activity-Object-Type', 'activitypub' ); ?>
-					</th>
-					<td>
-						<p>
-							<label for="activitypub_object_type_note">
-								<input type="radio" name="activitypub_object_type" id="activitypub_object_type_note" value="note" <?php echo \checked( 'note', \get_option( 'activitypub_object_type', 'note' ) ); ?> />
-								<?php \esc_html_e( 'Note (default)', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'Should work with most platforms.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-						<p>
-							<label for="activitypub_object_type_article">
-								<input type="radio" name="activitypub_object_type" id="activitypub_object_type_article" value="article" <?php echo \checked( 'article', \get_option( 'activitypub_object_type', 'note' ) ); ?> />
-								<?php \esc_html_e( 'Article', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'The presentation of the "Article" might change on different platforms. Mastodon for example shows the "Article" type as a simple link.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-						<p>
-							<label>
-								<input type="radio" name="activitypub_object_type" id="activitypub_object_type" value="wordpress-post-format" <?php echo \checked( 'wordpress-post-format', \get_option( 'activitypub_object_type', 'note' ) ); ?> />
-								<?php \esc_html_e( 'WordPress Post-Format', 'activitypub' ); ?>
-								-
-								<span class="description">
-									<?php \esc_html_e( 'Maps the WordPress Post-Format to the ActivityPub Object Type.', 'activitypub' ); ?>
-								</span>
-							</label>
-						</p>
-					</td>
-				</tr>
-				<tr>
-					<th scope="row"><?php \esc_html_e( 'Supported post types', 'activitypub' ); ?></th>
-					<td>
-						<fieldset>
-							<?php \esc_html_e( 'Enable ActivityPub support for the following post types:', 'activitypub' ); ?>
+			<table class="form-table">
+				<tbody>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Post-Content', 'activitypub' ); ?>
+						</th>
+						<td>
+							<p>
+								<label for="activitypub_post_content_type_title_link">
+									<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_title_link" value="title" <?php echo \checked( 'title', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
+									<?php \esc_html_e( 'Title and link', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'Only the title and a link.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+							<p>
+								<label for="activitypub_post_content_type_excerpt">
+									<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_excerpt" value="excerpt" <?php echo \checked( 'excerpt', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
+									<?php \esc_html_e( 'Excerpt', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'A content summary, shortened to 400 characters and without markup.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+							<p>
+								<label for="activitypub_post_content_type_content">
+									<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_content" value="content" <?php echo \checked( 'content', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
+									<?php \esc_html_e( 'Content (default)', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'The full content.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+							<p>
+								<label for="activitypub_post_content_type_custom">
+									<input type="radio" name="activitypub_post_content_type" id="activitypub_post_content_type_custom" value="custom" <?php echo \checked( 'custom', \get_option( 'activitypub_post_content_type', 'content' ) ); ?> />
+									<?php \esc_html_e( 'Custom', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'Use the text-area below, to customize your activities.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+							<p>
+								<textarea name="activitypub_custom_post_content" id="activitypub_custom_post_content" rows="10" cols="50" class="large-text" placeholder="<?php echo wp_kses( ACTIVITYPUB_CUSTOM_POST_CONTENT, 'post' ); ?>"><?php echo wp_kses( \get_option( 'activitypub_custom_post_content', ACTIVITYPUB_CUSTOM_POST_CONTENT ), 'post' ); ?></textarea>
+								<details>
+									<summary><?php esc_html_e( 'See a list of ActivityPub Template Tags.', 'activitypub' ); ?></summary>
+									<div class="description">
+										<ul>
+											<li><code>[ap_title]</code> - <?php \esc_html_e( 'The post\'s title.', 'activitypub' ); ?></li>
+											<li><code>[ap_content]</code> - <?php \esc_html_e( 'The post\'s content.', 'activitypub' ); ?></li>
+											<li><code>[ap_excerpt]</code> - <?php \esc_html_e( 'The post\'s excerpt (default 400 chars).', 'activitypub' ); ?></li>
+											<li><code>[ap_permalink]</code> - <?php \esc_html_e( 'The post\'s permalink.', 'activitypub' ); ?></li>
+											<li><code>[ap_shortlink]</code> - <?php echo \wp_kses( \__( 'The post\'s shortlink. I can recommend <a href="https://wordpress.org/plugins/hum/" target="_blank">Hum</a>.', 'activitypub' ), 'default' ); ?></li>
+											<li><code>[ap_hashtags]</code> - <?php \esc_html_e( 'The post\'s tags as hashtags.', 'activitypub' ); ?></li>
+										</ul>
+										<p><?php \esc_html_e( 'You can find the full list with all possible attributes in the help section on the top-right of the screen.', 'activitypub' ); ?></p>
+									</div>
+								</details>
+							</p>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Number of images', 'activitypub' ); ?>
+						</th>
+						<td>
+							<input value="<?php echo esc_attr( \get_option( 'activitypub_max_image_attachments', ACTIVITYPUB_MAX_IMAGE_ATTACHMENTS ) ); ?>" name="activitypub_max_image_attachments" id="activitypub_max_image_attachments" type="number" min="0" />
+							<p class="description">
+								<?php
+								echo \wp_kses(
+									\sprintf(
+										// translators:
+										\__( 'The number of images to attach to posts. Default: <code>%s</code>', 'activitypub' ),
+										\esc_html( ACTIVITYPUB_MAX_IMAGE_ATTACHMENTS )
+									),
+									'default'
+								);
+								?>
+							</p>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Activity-Object-Type', 'activitypub' ); ?>
+						</th>
+						<td>
+							<p>
+								<label for="activitypub_object_type_note">
+									<input type="radio" name="activitypub_object_type" id="activitypub_object_type_note" value="note" <?php echo \checked( 'note', \get_option( 'activitypub_object_type', 'note' ) ); ?> />
+									<?php \esc_html_e( 'Note (default)', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'Should work with most platforms.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+							<p>
+								<label for="activitypub_object_type_article">
+									<input type="radio" name="activitypub_object_type" id="activitypub_object_type_article" value="article" <?php echo \checked( 'article', \get_option( 'activitypub_object_type', 'note' ) ); ?> />
+									<?php \esc_html_e( 'Article', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'The presentation of the "Article" might change on different platforms. Mastodon for example shows the "Article" type as a simple link.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+							<p>
+								<label>
+									<input type="radio" name="activitypub_object_type" id="activitypub_object_type" value="wordpress-post-format" <?php echo \checked( 'wordpress-post-format', \get_option( 'activitypub_object_type', 'note' ) ); ?> />
+									<?php \esc_html_e( 'WordPress Post-Format', 'activitypub' ); ?>
+									-
+									<span class="description">
+										<?php \esc_html_e( 'Maps the WordPress Post-Format to the ActivityPub Object Type.', 'activitypub' ); ?>
+									</span>
+								</label>
+							</p>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php \esc_html_e( 'Supported post types', 'activitypub' ); ?></th>
+						<td>
+							<fieldset>
+								<?php \esc_html_e( 'Enable ActivityPub support for the following post types:', 'activitypub' ); ?>
 
-							<?php $post_types = \get_post_types( array( 'public' => true ), 'objects' ); ?>
-							<?php $support_post_types = \get_option( 'activitypub_support_post_types', array( 'post', 'page' ) ) ? \get_option( 'activitypub_support_post_types', array( 'post', 'page' ) ) : array(); ?>
-							<ul>
-							<?php // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited ?>
-							<?php foreach ( $post_types as $post_type ) { ?>
-								<li>
-									<input type="checkbox" id="activitypub_support_post_type_<?php echo \esc_attr( $post_type->name ); ?>" name="activitypub_support_post_types[]" value="<?php echo \esc_attr( $post_type->name ); ?>" <?php echo \checked( \in_array( $post_type->name, $support_post_types, true ) ); ?> />
-									<label for="activitypub_support_post_type_<?php echo \esc_attr( $post_type->name ); ?>"><?php echo \esc_html( $post_type->label ); ?></label>
-								</li>
-							<?php } ?>
-							</ul>
-						</fieldset>
-					</td>
-				</tr>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'Hashtags (beta)', 'activitypub' ); ?>
-					</th>
-					<td>
-						<p>
-							<label><input type="checkbox" name="activitypub_use_hashtags" id="activitypub_use_hashtags" value="1" <?php echo \checked( '1', \get_option( 'activitypub_use_hashtags', '1' ) ); ?> /> <?php echo wp_kses( \__( 'Add hashtags in the content as native tags and replace the <code>#tag</code> with the tag-link. <strong>This feature is experimental! Please disable it, if you find any HTML or CSS errors.</strong>', 'activitypub' ), 'default' ); ?></label>
-						</p>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+								<?php $post_types = \get_post_types( array( 'public' => true ), 'objects' ); ?>
+								<?php $support_post_types = \get_option( 'activitypub_support_post_types', array( 'post', 'page' ) ) ? \get_option( 'activitypub_support_post_types', array( 'post', 'page' ) ) : array(); ?>
+								<ul>
+								<?php // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited ?>
+								<?php foreach ( $post_types as $post_type ) { ?>
+									<li>
+										<input type="checkbox" id="activitypub_support_post_type_<?php echo \esc_attr( $post_type->name ); ?>" name="activitypub_support_post_types[]" value="<?php echo \esc_attr( $post_type->name ); ?>" <?php echo \checked( \in_array( $post_type->name, $support_post_types, true ) ); ?> />
+										<label for="activitypub_support_post_type_<?php echo \esc_attr( $post_type->name ); ?>"><?php echo \esc_html( $post_type->label ); ?></label>
+									</li>
+								<?php } ?>
+								</ul>
+							</fieldset>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Hashtags (beta)', 'activitypub' ); ?>
+						</th>
+						<td>
+							<p>
+								<label><input type="checkbox" name="activitypub_use_hashtags" id="activitypub_use_hashtags" value="1" <?php echo \checked( '1', \get_option( 'activitypub_use_hashtags', '1' ) ); ?> /> <?php echo wp_kses( \__( 'Add hashtags in the content as native tags and replace the <code>#tag</code> with the tag-link. <strong>This feature is experimental! Please disable it, if you find any HTML or CSS errors.</strong>', 'activitypub' ), 'default' ); ?></label>
+							</p>
+						</td>
+					</tr>
+				</tbody>
+			</table>
 
-		<?php \do_settings_fields( 'activitypub', 'activity' ); ?>
+			<?php \do_settings_fields( 'activitypub', 'activity' ); ?>
+		</div>
 
-		<h3 class="dashicons-before dashicons-database"><?php \esc_html_e( 'Server', 'activitypub' ); ?></h3>
+		<div class="box">
+			<h3><?php \esc_html_e( 'Server', 'activitypub' ); ?></h3>
 
-		<p><?php \esc_html_e( 'Server related settings.', 'activitypub' ); ?></p>
+			<p><?php \esc_html_e( 'Server related settings.', 'activitypub' ); ?></p>
 
-		<table class="form-table">
-			<tbody>
-				<tr>
-					<th scope="row">
-						<?php \esc_html_e( 'Blocklist', 'activitypub' ); ?>
-					</th>
-					<td>
-						<p class="description">
-							<?php
-							echo \wp_kses(
-								\sprintf(
-									// translators: %s is a URL.
-									\__( 'To block servers, add the host of the server to the "<a href="%s">Disallowed Comment Keys</a>" list.', 'activitypub' ),
-									\esc_attr( \admin_url( 'options-discussion.php#disallowed_keys' ) )
-								),
-								'default'
-							);
-							?>
-						</p>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-
-		<?php \do_settings_fields( 'activitypub', 'server' ); ?>
+			<table class="form-table">
+				<tbody>
+					<tr>
+						<th scope="row">
+							<?php \esc_html_e( 'Blocklist', 'activitypub' ); ?>
+						</th>
+						<td>
+							<p class="description">
+								<?php
+								echo \wp_kses(
+									\sprintf(
+										// translators: %s is a URL.
+										\__( 'To block servers, add the host of the server to the "<a href="%s">Disallowed Comment Keys</a>" list.', 'activitypub' ),
+										\esc_attr( \admin_url( 'options-discussion.php#disallowed_keys' ) )
+									),
+									'default'
+								);
+								?>
+							</p>
+						</td>
+					</tr>
+				</tbody>
+			</table>
 
+			<?php \do_settings_fields( 'activitypub', 'server' ); ?>
+		</div>
 		<?php \do_settings_sections( 'activitypub' ); ?>
 
 		<?php \submit_button(); ?>
diff --git a/templates/welcome.php b/templates/welcome.php
index 9233254..38cdfb8 100644
--- a/templates/welcome.php
+++ b/templates/welcome.php
@@ -1,6 +1,6 @@
 <?php
 \load_template(
-	\dirname( __FILE__ ) . '/admin-header.php',
+	__DIR__ . '/admin-header.php',
 	true,
 	array(
 		'settings'  => '',
@@ -10,82 +10,102 @@
 );
 ?>
 
-<div class="privacy-settings-body hide-if-no-js">
-	<h2><?php \esc_html_e( 'Welcome', 'activitypub' ); ?></h2>
+<div class="activitypub-settings activitypub-welcome-page hide-if-no-js">
+	<div class="box">
+		<h2><?php \esc_html_e( 'Welcome', 'activitypub' ); ?></h2>
 
-	<p><?php \esc_html_e( 'With ActivityPub your blog becomes part of a federated social network. This means you can share and talk to everyone using the ActivityPub protocol, including users of Friendica, Pleroma and Mastodon.', 'activitypub' ); ?></p>
+		<p><?php echo wp_kses( \__( 'With ActivityPub your blog becomes part of a federated social network. This means you can share and talk to everyone using the <strong>ActivityPub</strong> protocol, including users of <strong>Friendica</strong>, <strong>Pleroma</strong>, <strong>Pixelfed</strong> and <strong>Mastodon</strong>.', 'activitypub' ), array( 'strong' => array() ) ); ?></p>
+	</div>
 
-	<?php if ( ! \Activitypub\is_user_disabled( \Activitypub\Collection\Users::BLOG_USER_ID ) ) : ?>
-
-	<h3 class="dashicons-before dashicons-admin-users"><?php \esc_html_e( 'Blog Account', 'activitypub' ); ?></h3>
-	<p>
-		<?php
+	<?php
+	if ( ! \Activitypub\is_user_disabled( \Activitypub\Collection\Users::BLOG_USER_ID ) ) :
 		$blog_user = new \Activitypub\Model\Blog_User();
-		echo wp_kses(
-			\sprintf(
-				// translators:
-				\__(
-					'People can follow your Blog by using the username <code>%1$s</code> or the URL <code>%2$s</code>. This Blog-User will federate all posts written on your Blog, regardless of the User who posted it. You can customize the Blog-User on the <a href="%3$s">Settings</a> page.',
-					'activitypub'
-				),
-				\esc_attr( $blog_user->get_resource() ),
-				\esc_url_raw( $blog_user->get_url() ),
-				\esc_url_raw( \admin_url( '/options-general.php?page=activitypub&tab=settings' ) )
-			),
-			'default'
-		);
 		?>
-	</p>
-
+	<div class="box">
+		<h3><?php \esc_html_e( 'Blog Account', 'activitypub' ); ?></h3>
+		<p>
+			<?php \esc_html_e( 'People can follow your Blog by using:', 'activitypub' ); ?>
+		</p>
+		<p>
+			<label for="activitypub-blog-username"><?php \esc_html_e( 'Username', 'activitypub' ); ?></label>
+		</p>
+		<p>
+			<input type="text" class="regular-text" id="activitypub-blog-username" value="<?php echo \esc_attr( $blog_user->get_resource() ); ?>" />
+		</p>
+		<p>
+			<label for="activitypub-blog-url"><?php \esc_html_e( 'Profile-URL', 'activitypub' ); ?></label>
+		</p>
+		<p>
+			<input type="text" class="regular-text" id="activitypub-blog-url" value="<?php echo \esc_attr( $blog_user->get_url() ); ?>" />
+		</p>
+		<p>
+			<?php \esc_html_e( 'This Blog-User will federate all posts written on your Blog, regardless of the User who posted it.', 'activitypub' ); ?>
+		<p>
+		<p>
+			<a href="<?php echo \esc_url_raw( \admin_url( '/options-general.php?page=activitypub&tab=settings' ) ); ?>">
+				<?php \esc_html_e( 'Customize Blog-User on Settings page.', 'activitypub' ); ?>
+			</a>
+		</p>
+	</div>
 	<?php endif; ?>
 
-	<?php if ( ! \Activitypub\is_user_disabled( get_current_user_id() ) ) : ?>
-
-	<h3 class="dashicons-before dashicons-groups"><?php \esc_html_e( 'Personal Account', 'activitypub' ); ?></h3>
-	<p>
-		<?php
+	<?php
+	if ( ! \Activitypub\is_user_disabled( get_current_user_id() ) ) :
 		$user = \Activitypub\Collection\Users::get_by_id( wp_get_current_user()->ID );
-		echo wp_kses(
-			\sprintf(
-				// translators:
-				\__(
-					'People can also follow you by using your Username <code>%1$s</code> or your Author-URL <code>%2$s</code>. Users who can not access this settings page will find their username on the <a href="%3$s">Edit Profile</a> page.',
-					'activitypub'
-				),
-				\esc_attr( $user->get_resource() ),
-				\esc_url_raw( $user->get_url() ),
-				\esc_url_raw( \admin_url( 'profile.php#activitypub' ) )
-			),
-			'default'
-		);
 		?>
-	</p>
-
+	<div class="box">
+		<h3><?php \esc_html_e( 'Personal Account', 'activitypub' ); ?></h3>
+		<p>
+			<?php \esc_html_e( 'People can follow you by using your Username:', 'activitypub' ); ?>
+		</p>
+		<p>
+			<label for="activitypub-user-username"><?php \esc_html_e( 'Username', 'activitypub' ); ?></label>
+		</p>
+		<p>
+			<input type="text" class="regular-text" id="activitypub-user-username" value="<?php echo \esc_attr( $user->get_resource() ); ?>" />
+		</p>
+		<p>
+			<label for="activitypub-user-url"><?php \esc_html_e( 'Profile-URL', 'activitypub' ); ?></label>
+		</p>
+		<p>
+			<input type="text" class="regular-text" id="activitypub-user-url" value="<?php echo \esc_attr( $user->get_url() ); ?>" />
+		</p>
+		<p>
+			<?php \esc_html_e( 'Users who can not access this settings page will find their username on the "Edit Profile" page.', 'activitypub' ); ?>
+		<p>
+		<p>
+			<a href="<?php echo \esc_url_raw( \admin_url( '/options-general.php?page=activitypub&tab=settings' ) ); ?>">
+			<?php \esc_html_e( 'Customize Username on "Edit Profile" page.', 'activitypub' ); ?>
+			</a>
+		</p>
+	</div>
 	<?php endif; ?>
 
-	<h3 class="dashicons-before dashicons-admin-tools"><?php \esc_html_e( 'Troubleshooting', 'activitypub' ); ?></h3>
-	<p>
-		<?php
-		echo wp_kses(
-			\sprintf(
-				// translators:
-				\__(
-					'If you have problems using this plugin, please check the <a href="%s">Site Health</a> to ensure that your site is compatible and/or use the "Help" tab (in the top right of the settings pages).',
-					'activitypub'
+	<div class="box">
+		<h3><?php \esc_html_e( 'Troubleshooting', 'activitypub' ); ?></h3>
+		<p>
+			<?php
+			echo wp_kses(
+				\sprintf(
+					// translators:
+					\__(
+						'If you have problems using this plugin, please check the <a href="%s">Site Health</a> to ensure that your site is compatible and/or use the "Help" tab (in the top right of the settings pages).',
+						'activitypub'
+					),
+					\esc_url_raw( admin_url( 'site-health.php' ) )
 				),
-				\esc_url_raw( admin_url( 'site-health.php' ) )
-			),
-			'default'
-		);
-		?>
-	</p>
+				'default'
+			);
+			?>
+		</p>
+	</div>
+
 	<?php if ( ACTIVITYPUB_SHOW_PLUGIN_RECOMMENDATIONS ) : ?>
-	<hr />
-
-	<h3 class="dashicons-before dashicons-admin-plugins"><?php \esc_html_e( 'Recommended Plugins', 'activitypub' ); ?></h3>
-
-	<p><?php \esc_html_e( 'ActivityPub works as is and there is no need for you to install additional plugins, nevertheless there are some plugins that extends the functionality of ActivityPub.', 'activitypub' ); ?></p>
+	<div class="box plugin-recommendations">
+		<h3><?php \esc_html_e( 'Recommended Plugins', 'activitypub' ); ?></h3>
 
+		<p><?php \esc_html_e( 'ActivityPub works as is and there is no need for you to install additional plugins, nevertheless there are some plugins that extends the functionality of ActivityPub.', 'activitypub' ); ?></p>
+	</div>
 	<div class="activitypub-settings-accordion">
 		<?php if ( ! \defined( 'FRIENDS_VERSION' ) ) : ?>
 		<h4 class="activitypub-settings-accordion-heading">