nodebb-theme-harmony 1.0.0-beta.2 → 1.0.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.20",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -5,6 +5,7 @@ $(document).ready(function () {
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -56,32 +57,17 @@ $(document).ready(function () {
 		$('[component="sidebar/search"]').on('shown.bs.dropdown', function () {
 			$(this).find('[component="search/fields"] input[name="query"]').trigger('focus');
 		});
-
-		function resizeResults(hookData) {
-			if (hookData && hookData.data && !hookData.data.posts.length) {
-				$('.bottombar .quick-search-results').css({ height: 'initial' });
-				return;
-			}
-			const dropdown = $('.bottombar .search-dropdown');
-			const padY = dropdown.innerHeight() - dropdown.height();
-			const input = dropdown.find('.input-container').outerHeight(true);
-			const showMore = dropdown.find('.show-more-container').outerHeight(true);
-			const newHeight = Math.max(
-				150,
-				$(window).height() - (input + (showMore || 0) + (padY * 2) + 30)
-			);
-			$('.bottombar .quick-search-results').height(newHeight);
-		}
-		require(['hooks'], function (hooks) {
-			$(window).on('resize', resizeResults);
-			hooks.on('action:search.quick.complete', resizeResults);
-		});
 	}
 
 	function setupDrafts() {
 		require(['composer/drafts'], function (drafts) {
+			const draftsEl = $('[component="sidebar/drafts"]');
+
 			function updateBadgeCount() {
 				const count = drafts.getAvailableCount();
+				if (count > 0) {
+					draftsEl.removeClass('hidden');
+				}
 				$('[component="drafts/count"]').toggleClass('hidden', count <= 0).text(count);
 			}
 
@@ -105,7 +91,7 @@ $(document).ready(function () {
 				draftListEl.append(html).find('.timeago').timeago();
 			}
 
-			const draftsEl = $('[component="sidebar/drafts"]');
+
 			draftsEl.on('shown.bs.dropdown', renderDraftList);
 
 			draftsEl.on('click', '[component="drafts/open"]', function () {
@@ -123,6 +109,7 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
 	function setupNProgress() {
 		require(['nprogress'], function (NProgress) {
 			window.nprogress = NProgress;
@@ -137,4 +124,17 @@ $(document).ready(function () {
 			}
 		});
 	}
+
+	function handleMobileNavigator() {
+		const paginationBlockEl = $('.pagination-block');
+		require(['hooks'], function (hooks) {
+			hooks.on('action:ajaxify.end', function () {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+			});
+			hooks.on('filter:navigator.scroll', function (hookData) {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+				return hookData;
+			});
+		});
+	}
 });

package/scss/chats.scss

@@ -6,8 +6,10 @@
 body.page-user-chats {
 	overflow: hidden;
 }
-
-.expanded-chat, .chat-modal {
+[component="chat/nav-wrapper"] {
+	width: 300px;
+}
+.expanded-chat {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {
 		display: none!important;
@@ -38,6 +40,9 @@ body.page-user-chats {
 
 /* Mobile handling of chat page */
 @include media-breakpoint-down(md) {
+	[component="chat/nav-wrapper"] {
+		width: 100%;
+	}
 	.page-user-chats {
 		.chats-full {
 			padding-bottom: 8rem!important;

package/scss/common.scss

@@ -14,8 +14,13 @@ body {
 .text-sm { font-size: 0.875rem!important; } // 14px
 .text-xs { font-size: 0.75rem!important; } // 12px
 
-.btn-link:hover {
-	text-decoration: none;
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
 }
 
 .sticky-tools {
@@ -35,6 +40,13 @@ body {
 	}
 }
 
+.btn-link {
+	&:hover, &.active {
+		background-color: $btn-ghost-hover-color;
+		text-decoration: none;
+	}
+}
+
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -48,10 +60,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }

package/scss/modules/composer.scss

@@ -6,10 +6,6 @@ $composer-bg: $body-bg !default;
 	background-color: $bg !important;
 }
 
-.composer {
-	z-index: 3 !important;
-}
-
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
 	$composer-color: $secondary;

package/scss/modules/cover.scss

@@ -12,12 +12,11 @@
 
 	&:hover {
 		.controls {
-			opacity: 0.8;
+			opacity: 1;
 		}
 	}
 
 	.controls {
-		text-align: center;
 		height: 200px;
 		line-height: 200px;
 		opacity: 0;
@@ -28,15 +27,6 @@
 		> * {
 			pointer-events: all;
 		}
-
-		.fa {
-			color: white;
-			background-color: #333;
-			opacity: 1;
-			margin: 15px;
-			padding: 5px;
-			border-radius: 4px;
-		}
 	}
 
 	&.active {

package/scss/overrides.scss

@@ -39,6 +39,8 @@ $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
 $link-color: shade-color($blue, 20%) !default;
 
+$btn-ghost-hover-color: mix($light, $dark, 90);
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/sidebar.scss

@@ -113,7 +113,32 @@
 		font-size: 9px;
 		line-height: 12px;
 	}
-	.search.bottom-sheet .dropdown-menu {
-		max-height: 100%;
+
+	.navigation-dropdown, .user-dropdown {
+		> li {
+			> a, .dropdown-item {
+				padding: 10px 20px!important;
+			}
+		}
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		max-height: 60vh!important;
+		overflow: auto!important;
+	}
+	.search-dropdown .quick-search-results {
+		max-height: 225px!important;
+		overflow-y: auto!important;
+	}
+	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		ul {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
 	}
 }

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -14,18 +16,6 @@
 		line-height: 20px;
 	}
 
-	.action-bar {
-		.dropdown-toggle::after {
-			border: none;
-			font-family: "FontAwesome";
-			content: "\f078";
-			color: tint-color($primary, 40%);
-
-			position: relative;
-			top: 2px;
-		}
-	}
-
 	.topic {
 		.posts {
 			max-width: 960px;
@@ -67,6 +57,17 @@
 			[component="post/reply-count"] {
 				font-size: $font-size-base * .75;
 			}
+
+			[component="post/upvote"], [component="post/downvote"] {
+				&.upvoted, &.downvoted {
+					background-color: lighten($btn-ghost-hover-color, 5%);
+
+					&:hover {
+					background-color: $btn-ghost-hover-color;
+
+					}
+				}
+			}
 		}
 	}
 
@@ -106,6 +107,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {

package/templates/account/categories.tpl

@@ -11,7 +11,6 @@
 					<div class="btn-group bottom-sheet" component="category/watch/all">
 						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 							<span>[[user:change_all]]</span>
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>

package/templates/account/consent.tpl

@@ -12,6 +12,68 @@
 			<hr />
 
 			<div class="row">
+				<div class="col-sm-6">
+					<!-- IF gdpr_consent -->
+					<div class="alert alert-success">
+						<i class="fa fa-check float-end fa-3x"></i>
+						[[user:consent.received]]
+					</div>
+					<!-- ELSE -->
+					<div class="alert alert-warning">
+						[[user:consent.not_received]]
+						<br /><br />
+						<div class="text-center">
+							<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
+						</div>
+					</div>
+					<!-- END -->
+					<div class="card">
+						<div class="card-body">
+							<p>[[user:consent.email_intro]]</p>
+							{{{ if digest.enabled }}}
+							<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
+							{{{ else }}}
+							<p>[[user:consent.digest_off]]</p>
+							{{{ end }}}
+
+							<div class="d-grid">
+								<a class="btn btn-outline-secondary" href="./settings">
+									<i class="fa fa-cog"></i>
+									[[pages:account/settings]]
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="card">
+						<div class="card-body">
+							<p><strong>[[user:consent.right_of_access]]</strong></p>
+							<p>[[user:consent.right_of_access_description]]</p>
+							<p><strong>[[user:consent.right_to_rectification]]</strong></p>
+							<p>[[user:consent.right_to_rectification_description]]</p>
+							<p><strong>[[user:consent.right_to_erasure]]</strong></p>
+							<p>[[user:consent.right_to_erasure_description]]</p>
+							<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
+							<p>[[user:consent.right_to_data_portability_description]]</p>
+
+							<hr />
+
+							<div class="btn-group-vertical d-grid">
+								<a data-action="export-profile" class="btn btn-outline-secondary">
+									<i class="fa fa-download"></i> [[user:consent.export_profile]]
+								</a>
+								<a data-action="export-posts" class="btn btn-outline-secondary">
+									<i class="fa fa-download"></i> [[user:consent.export_posts]]
+								</a>
+								<a data-action="export-uploads" class="btn btn-outline-secondary">
+									<i class="fa fa-download"></i> [[user:consent.export_uploads]]
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

package/templates/account/edit.tpl

@@ -74,7 +74,7 @@
 					<div class="text-center">
 						<ul class="list-group mb-3 text-sm text-nowrap">
 							<!-- IF allowProfilePicture -->
-							<a id="changePictureBtn" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
+							<a component="profile/change/picture" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
 							<!-- ENDIF allowProfilePicture -->
 							<!-- IF !username:disableEdit -->
 							<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>

package/templates/account/info.tpl

@@ -8,24 +8,7 @@
 			<div class="mb-3">
 				<h4>[[global:sessions]]</h4>
 				<ul class="list-group" component="user/sessions">
-					{{{each sessions}}}
-					<li class="list-group-item" data-uuid="{../uuid}">
-						<div class="float-end">
-							<!-- IF isSelfOrAdminOrGlobalModerator -->
-							<!-- IF !../current -->
-							<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
-							<!-- ENDIF !../current -->
-							<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
-							{function.userAgentIcons}
-							<i class="fa fa-circle text-<!-- IF ../current -->success<!-- ELSE -->muted<!-- ENDIF ../current -->"></i>
-						</div>
-						{../browser} {../version} on {../platform}<br />
-						<small class="timeago text-muted" title="{../datetimeISO}"></small>
-						<ul>
-							<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
-						</ul>
-					</li>
-					{{{end}}}
+					<!-- IMPORT partials/account/session-list.tpl -->
 				</ul>
 			</div>
 			{{{ end }}}

package/templates/account/sessions.tpl

@@ -7,24 +7,7 @@
 			<p class="lead">[[user:sessions.description]]</p>
 			<hr />
 			<ul class="list-group" component="user/sessions">
-				{{{each sessions}}}
-				<li class="list-group-item" data-uuid="{../uuid}">
-					<div class="float-end">
-						<!-- IF isSelfOrAdminOrGlobalModerator -->
-						<!-- IF !../current -->
-						<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
-						<!-- ENDIF !../current -->
-						<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
-						{function.userAgentIcons}
-						<i class="fa fa-circle text-<!-- IF ../current -->success<!-- ELSE -->muted<!-- ENDIF ../current -->"></i>
-					</div>
-					{../browser} {../version} on {../platform}<br />
-					<small class="timeago text-muted" title="{../datetimeISO}"></small>
-					<ul>
-						<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
-					</ul>
-				</li>
-				{{{end}}}
+				<!-- IMPORT partials/account/session-list.tpl -->
 			</ul>
 		</div>
 	</div>

package/templates/categories.tpl

@@ -6,7 +6,7 @@
 <div class="row">
 	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		{{{ if pagination.pages.length }}}
-		<div><!-- IMPORT partials/category-selector.tpl --></div>
+		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 		{{{ end }}}
 		<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{ each categories }}}

package/templates/category.tpl

@@ -33,8 +33,7 @@
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
-		<hr class="visible-xs" />
-		<div class="alert alert-warning" id="category-no-topics">
+		<div class="alert alert-info mt-3" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/chats.tpl

@@ -1,5 +1,5 @@
 <div class="chats-full d-flex gap-1 vh-100 py-3">
-	<div class="d-flex flex-column h-100" style="width:300px;" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+	<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 		<div class="chat-search dropdown mb-2">
 			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
 

package/templates/flags/detail.tpl

@@ -146,7 +146,6 @@
 						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-street-view"></i>
 							[[flags:flagged-user]]
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>

package/templates/flags/list.tpl

@@ -18,7 +18,7 @@
 
 		<div class="btn-group float-end" component="flags/bulk-actions">
 			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
+				<i class="fa fa-clone"></i> <span class="fw-semibold">[[flags:bulk-actions]]</span>
 			</button>
 			<ul class="dropdown-menu">
 				<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>

package/templates/partials/account/header.tpl

@@ -8,10 +8,10 @@
 	<div class="container">
 		{{{ if allowCoverPicture }}}
 		{{{ if canEdit }}}
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+		<div class="controls text-center">
+			<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+			<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+			<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
 		</div>
 		<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
 		<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
@@ -21,19 +21,12 @@
 </div>
 
 <div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
-	<div class="avatar-wrapper border-4 position-relative align-self-start d-none d-md-block" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
-		{{{ end }}}
-	</div>
-
-	<div class="avatar-wrapper border-4 position-relative align-self-center d-block d-md-none" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
+	<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border-4 position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
+		{buildAvatar(@value, "142px", true)}
+		{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
+		<div component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 opacity-75 text-bg-light position-absolute top-50 start-50 translate-middle hover-visible">
+			<span class="upload"><i class="fa fa-fw fa-upload"></i></span>
+		</div>
 		{{{ end }}}
 	</div>
 

package/templates/partials/account/session-list.tpl

@@ -0,0 +1,18 @@
+{{{ each sessions }}}
+<li class="list-group-item text-break" data-uuid="{./uuid}">
+	<div class="float-end">
+		{{{ if isSelfOrAdminOrGlobalModerator }}}
+		{{{ if !./current }}}
+		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
+		{{{ end }}}
+		{{{ end }}}
+		{function.userAgentIcons}
+		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
+	</div>
+	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />
+	<small class="timeago text-muted" title="{../datetimeISO}"></small>
+	<ul>
+		<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
+	</ul>
+</li>
+{{{ end }}}

package/templates/partials/categories/lastpost.tpl

@@ -4,7 +4,7 @@
 	<div component="category/posts" class="ps-3">
 		<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
 		<p class="mb-0">
-			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true, "avatar-tooltip")}</a>
 			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
 				<span class="timeago text-xs" title="{../timestampISO}"></span>
 			</a>

package/templates/partials/{category-filter-content.tpl → category/filter-dropdown-content.tpl}

@@ -1,7 +1,7 @@
 <button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item">
-        {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
+        {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
         <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedCategory.name}</span>
     </span>
     {{{ else }}}
@@ -9,7 +9,7 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li role="presentation" class="category" data-all="all">

package/templates/partials/{category-selector-content.tpl → category/selector-dropdown-content.tpl}

@@ -12,7 +12,7 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">

package/templates/partials/category/subcategory.tpl

@@ -1,7 +1,7 @@
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
-	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
+	<div class="mb-2"><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 	{{{ else }}}
 	<h3 class="fs-6 fw-semibold">[[category:subcategories]]</h3>
 	{{{ end }}}

package/templates/partials/category/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group bottom-sheet" component="topic/watch">
 	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
@@ -9,11 +9,35 @@
 	</button>
 
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text text-muted"><small>[[category:watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/watching" data-state="watching">
+				<span><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-inbox"></i> [[category:watching]]</span>
+					<p class="help-text text-muted"><small>[[category:watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/notwatching" data-state="notwatching">
+				<span><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]</span>
+					<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/ignoring" data-state="ignoring">
+				<span><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]</span>
+					<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p>
+				</div>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}