nodebb-theme-persona 14.0.0-pre.1 → 14.0.0-pre.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "14.0.0-pre.1",
+  "version": "14.0.0-pre.2",
   "nbbpm": {
     "compatibility": "^4.0.0"
   },

package/scss/header.scss

@@ -1,143 +1,11 @@
-.header, .slideout-menu {
-	.notifications.dropdown, .chats.dropdown {
-		.dropdown-menu {
-			padding: 0;
-		}
-	}
-
-	@mixin notification-list() {
+.header {
+	.notification-list, .chat-list {
 		overflow-x: hidden;
 		overflow-y: auto;
 		max-height: 250px;
 		padding: 0;
-
-		li {
-			display: flex;
-			gap: 1rem;
-			width: 400px;
-			text-align: left;
-			list-style-type: none;
-			padding: .75em 0.5em;
-
-			&.loading-text, &.no-notifs {
-				justify-content: center;
-
-				a {
-					color: inherit;
-				}
-			}
-
-			.notification-chat-content {
-				flex: 1;
-
-				a {
-					white-space: normal;
-					margin: 0;
-					text-overflow: ellipsis;
-
-					.text {
-						margin-left: 40px;
-						margin-right: 60px;
-						display: block;
-						min-height: 32px;
-					}
-				}
-			}
-
-			.notification-chat-controls {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				gap: .5rem;
-
-				.relTime {
-					font-size: 10px;
-				}
-			}
-
-			.mark-read {
-				color: $secondary;
-				.read {
-					display: block;
-				}
-				.unread {
-					display: none;
-				}
-				&:hover {
-					color: darken($secondary, 10%);
-					@include pointer;
-				}
-			}
-
-			&.unread {
-				background-color: $warning;
-
-				&:hover {
-					background-color: darken($warning, 5%);
-				}
-
-				.mark-read {
-					.read {
-						display: none;
-					}
-					.unread {
-						display: block;
-					}
-				}
-			}
-		}
-	}
-
-	.notification-list {
-		@include notification-list;
-	}
-
-	.chat-list {
-		@include notification-list;
-
-		> li {
-			@include pointer;
-			width: 500px;
-			padding: 0;
-			margin: 0;
-			gap: 0;
-			overflow-y: hidden;
-
-			.notification-chat-content {
-				padding: 0.5rem;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.teaser-content {
-				white-space: nowrap;
-				max-height: 19px;
-			}
-
-			&:not(:last-child) {
-				border-bottom: 1px solid $dropdown-border-color;
-			}
-
-			&.no_active a {
-				text-align: center;
-				white-space: normal;
-			}
-
-			a {
-				line-height: 24px;
-			}
-
-			.members {
-				padding-left: 1rem;
-
-				li {
-					display: inline-block;
-					width: 16px;
-					padding: 0;
-					margin: 0;
-				}
-			}
-		}
+		width: 300px;
+		min-width: 300px;
 	}
 }
 

package/scss/mobile.scss

@@ -76,6 +76,9 @@
 	}
 	#menu .menu-section {
 		padding-top: 20px;
+		.nav-item {
+			padding: 0.5rem 1rem;
+		}
 	}
 	#chats-menu {
 		.nav-pills {
@@ -101,6 +104,9 @@
 				}
 			}
 		}
+		.menu-section-list .text-muted {
+			color: #fff!important;
+		}
 	}
 
 	.slideout-menu {
@@ -121,95 +127,6 @@
 		}
 		.chat-list {
 			max-height: 100%;
-
-			li {
-				width: auto;
-				border: none;
-				color: #fff;
-				position: relative;
-				height: 60px;
-
-				&:hover {
-					background: none;
-				}
-
-				&:not(:last-child) {
-					border-bottom: none;
-				}
-
-				.main-avatar {
-					position: absolute;
-					top: 0;
-					left: 0;
-
-					.avatar {
-						$size: 40px;
-						@include user-icon-style($size, calc($size * 0.6), 0);
-					}
-				}
-
-				.members {
-					display: none;
-				}
-
-				.room-name {
-					display: block;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					padding-left: 60px;
-				}
-
-				.teaser-content {
-					padding-left: 60px;
-					display: block;
-					font-size: 13px;
-					opacity: .8;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-				.teaser-timestamp {
-					font-size: 10px;
-					margin-right: 0.5rem;
-					margin-top: 0.5rem;
-				}
-			}
-		}
-
-		.menu-section {
-			.notification-list-mobile li .text {
-				display: block;
-			}
-			.chat-list, .notification-list-mobile {
-				.user-link {
-					display: inline;
-				}
-				.unread {
-					background-color: inherit;
-				}
-
-				.notification-chat-content {
-					padding-top: 10px;
-					padding-right: 20px;
-				}
-
-				.notification-chat-controls {
-					display: none;
-				}
-			}
-			.chat-list .unread .room-name::after,
-			.notification-list-mobile .unread a::after {
-				content: "new";
-				text-transform: uppercase;
-				color: #FFF;
-				margin-left: 5px;
-				font-size: 10px;
-				background: #C91106;
-				border: 1px solid #890405;
-				padding: 2px 3px;
-				border-radius: 5px;
-			}
 		}
 
 		.counter {
@@ -244,28 +161,6 @@
 		margin:0;
 	}
 
-	.menu-section-list {
-		padding: 0;
-		margin: 0;
-		list-style: none;
-
-		a, button {
-			display: block;
-			padding: 10px 20px;
-			text-align: left;
-			width: 100%;
-
-			&:hover {
-				background-color: rgba(255, 255, 255, 0.1);
-				text-decoration: none;
-			}
-		}
-
-		.user-status {
-			padding-left: 40px;
-		}
-	}
-
 	.slideout-open,
 	.slideout-open body,
 	.slideout-open .slideout-panel {
@@ -324,8 +219,4 @@
 			top: 28px;
 		}
 	}
-
-	[data-section="notifications"] ul li a:first-child {
-		display: none;
-	}
 }

package/scss/persona.scss

@@ -16,7 +16,6 @@
 @import "topics_list";
 @import "footer";
 @import "posts_list";
-@import "register";
 @import "flags";
 
 @import "mobile";

package/scss/style.scss

@@ -26,20 +26,6 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	text-decoration:none;
 }
 
-.alt-logins {
-	margin: 0 0 0 1em;
-	padding: 0;
-	list-style-type: none;
-
-	li {
-		vertical-align: middle;
-		background: transparent;
-		margin: 0.25em;
-		@include pointer;
-		@include inline-block;
-	}
-}
-
 #content {
 	padding-bottom: 20px;
 	-webkit-transition: opacity 150ms linear;

package/scss/topic.scss

@@ -93,16 +93,6 @@
 		top: -$post-padding;
 	}
 
-	[component="post/upvote"], [component="post/downvote"] {
-		display: inline-block;
-		padding: 1rem;
-		color: $text-muted;
-
-		&:focus {
-				text-decoration: none;
-		}
-	}
-
 	[component="post/upvote"].upvoted i {
 		@include fa-icon-solid($fa-var-circle-chevron-up);
 		color: $primary;
@@ -113,11 +103,6 @@
 		color: $primary;
 	}
 
-	[component="post/vote-count"] {
-		display: inline-block;
-		padding: 1rem 0.5rem;
-	}
-
 	[component="post/parent"] {
 		border: 0;
 		font-size: 10px;
@@ -194,30 +179,6 @@
 		min-height: 60px;
 	}
 
-	.post-tools {
-		a {
-			padding: 1rem 10px;
-			@include pointer;
-		}
-	}
-
-	[component="post/tools"] {
-		font-size: 14px;
-
-		> a {
-			padding: 1rem;
-		}
-
-		// temporary until we build component toggling
-		.favourite.btn-warning, .follow.btn-success {
-			background: white !important;
-			color: #333;
-			&:hover {
-				background: $primary !important;
-			}
-		}
-	}
-
 	h1 {
 		.btn-group, .btn {
 			margin-left: 15px;

package/templates/account/edit.tpl

@@ -78,11 +78,11 @@
 						<div component="group/badge/item" class="d-flex gap-2 justify-content-between align-items-center" data-value="{./displayName}" data-selected="{./selected}">
 							<!-- IMPORT partials/groups/badge.tpl -->
 							<div class="d-flex gap-1">
-								<button component="group/toggle/hide" type="button" class="btn-ghost-sm {{{ if !./selected }}}hidden{{{ end }}}" title="[[user:hide-group-title]]"><i class="fa fa-fw fa-eye"></i></button>
-								<button component="group/toggle/show" type="button" class="btn-ghost-sm {{{ if ./selected }}}hidden{{{ end }}}" title="[[user:show-group-title]]"><i class="fa fa-fw fa-eye-slash"></i></button>
+								<button component="group/toggle/hide" type="button" class="btn btn-ghost btn-sm {{{ if !./selected }}}hidden{{{ end }}}" title="[[user:hide-group-title]]"><i class="fa fa-fw fa-eye"></i></button>
+								<button component="group/toggle/show" type="button" class="btn btn-ghost btn-sm {{{ if ./selected }}}hidden{{{ end }}}" title="[[user:show-group-title]]"><i class="fa fa-fw fa-eye-slash"></i></button>
 								{{{ if allowMultipleBadges }}}
-								<button component="group/order/up" type="button" class="btn-ghost-sm" title="[[user:order-group-up]]"><i class="fa fa-fw fa-chevron-up"></i></button>
-								<button component="group/order/down" type="button" class="btn-ghost-sm" title="[[user:order-group-down]]"><i class="fa fa-fw fa-chevron-down"></i></button>
+								<button component="group/order/up" type="button" class="btn btn-ghost btn-sm" title="[[user:order-group-up]]"><i class="fa fa-fw fa-chevron-up"></i></button>
+								<button component="group/order/down" type="button" class="btn btn-ghost btn-sm" title="[[user:order-group-down]]"><i class="fa fa-fw fa-chevron-down"></i></button>
 								{{{ end }}}
 							</div>
 						</div>

package/templates/category.tpl

@@ -26,7 +26,7 @@
 			<div component="category/controls" class="d-flex gap-1 align-items-stretch">
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/category/sort.tpl -->
-				<!-- IMPORT partials/category/tools.tpl -->
+				<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 			</div>
 		</div>
 		{{{ end }}}

package/templates/partials/categories/link.tpl

@@ -1,11 +1,11 @@
-<!-- IF ../isSection -->
-{../name}
-<!-- ELSE -->
-<!-- IF ../link -->
-<a href="{../link}" itemprop="url">
-<!-- ELSE -->
-<a href="{config.relative_path}/category/{../slug}" itemprop="url">
-<!-- ENDIF ../link -->
-{../name}
-</a>
+<!-- IF ../isSection -->
+{../name}
+<!-- ELSE -->
+<!-- IF ../link -->
+<a href="{../link}" itemprop="url">
+<!-- ELSE -->
+<a href="{config.relative_path}/category/{../slug}" itemprop="url">
+<!-- ENDIF ../link -->
+{../name}
+</a>
 <!-- ENDIF ../isSection -->

package/templates/partials/chats-menu.tpl

@@ -1,15 +1,15 @@
 {{{ if config.loggedIn }}}
 <ul class="nav nav-pills">
 	<li class="nav-item">
-		<a class="nav-link" href="#" data-bs-target="#notifications" data-bs-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
+		<a class="nav-link text-decoration-none" href="#" data-bs-target="#notifications" data-bs-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
 	</li>
 	{{{ if !config.disableChat }}}
 	<li class="nav-item">
-		<a class="nav-link" href="#" data-bs-target="#chats" data-bs-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
+		<a class="nav-link text-decoration-none" href="#" data-bs-target="#chats" data-bs-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
 	</li>
 	{{{ end }}}
 	<li class="nav-item">
-		<a class="nav-link active" href="#" data-bs-target="#profile" data-bs-toggle="tab">
+		<a class="nav-link active text-decoration-none" href="#" data-bs-target="#profile" data-bs-toggle="tab">
 			{buildAvatar(user, "24px", true, "user-icon")}
 			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
 		</a>
@@ -23,17 +23,18 @@
 		</section>
 	</div>
 	<div class="tab-pane fade" id="notifications">
-		<section class="menu-section text-bg-dark" data-section="notifications">
-			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
-			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see-all]]</a></p>
+		<section class="menu-section text-bg-dark px-1" data-section="notifications">
+			<ul class="menu-section-list notification-list-mobile list-unstyled" component="notifications/list"></ul>
+			<div class="menu-section-list text-center p-3"><a href="{relative_path}/notifications">[[notifications:see-all]]</a></div>
 		</section>
 	</div>
 	{{{ if !config.disableChat }}}
 	<div class="tab-pane fade" id="chats">
-		<section class="menu-section text-bg-dark" data-section="chats">
-			<ul class="menu-section-list chat-list" component="chat/list">
-				<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see-all]]</a>
+		<section class="menu-section text-bg-dark px-1" data-section="chats">
+			<ul class="menu-section-list chat-list list-unstyled" component="chat/list">
+
 			</ul>
+			<div class="menu-section-list text-center p-3"><a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see-all]]</a></div>
 		</section>
 	</div>
 	{{{ end }}}

package/templates/partials/header/chats.tpl

@@ -1,9 +1,9 @@
 <a class="nav-link" data-bs-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" data-ajaxify="false" id="chat_dropdown" component="chat/dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 	<i component="chat/icon" class="fa {{{ if unreadCount.chat}}}fa-comment{{{ else }}}fa-comment-o{{{ end }}} fa-fw unread-count" data-content="{unreadCount.chat}"></i> <span class="d-inline d-sm-none">[[global:header.chats]]</span>
 </a>
-<ul class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="chat_dropdown" style="min-width: 300px; width: 300px;" role="menu">
+<ul class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="chat_dropdown" role="menu">
 	<li>
-		<ul component="chat/list" class="chat-list chats-list">
+		<ul component="chat/list" class="chat-list chats-list ghost-scrollbar pe-1">
 			<li class="loading-text">
 				<a href="#"><i class="fa fa-refresh fa-spin"></i> [[global:chats.loading]]</a>
 			</li>
@@ -12,8 +12,8 @@
 	<li class="dropdown-divider"></li>
 	<li>
 		<div class="d-flex justify-content-center gap-1 flex-wrap">
-			<a class="btn btn-light mark-all-read flex-fill text-nowrap" href="#" component="chats/mark-all-read"><i class="fa fa-check-double"></i> [[modules:chat.mark-all-read]]</a>
-			<a class="btn btn-primary flex-fill text-nowrap" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-comments"></i> [[modules:chat.see-all]]</a>
+			<a class="btn btn-light btn-sm mark-all-read flex-fill text-nowrap" href="#" component="chats/mark-all-read"><i class="fa fa-check-double"></i> [[modules:chat.mark-all-read]]</a>
+			<a class="btn btn-primary btn-sm flex-fill text-nowrap" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-comments"></i> [[modules:chat.see-all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/header/notifications.tpl

@@ -1,19 +1,49 @@
-<a href="{relative_path}/notifications" class="nav-link" data-bs-toggle="dropdown" id="notif_dropdown" data-ajaxify="false" role="button" aria-haspopup="true" aria-expanded="false">
-	<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.notifications]]">
+	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+		<span class="position-relative">
+			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
+			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
+		</span>
+	</span>
+	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
-<ul class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="notif_dropdown" role="menu">
+
+<ul class="notifications-dropdown dropdown-menu dropdown-menu-end p-1 shadow" role="menu">
 	<li>
-		<ul component="notifications/list" class="notification-list">
-			<li class="loading-text">
-				<a href="#"><i class="fa fa-refresh fa-spin"></i> [[global:notifications.loading]]</a>
-			</li>
-		</ul>
+		<div component="notifications/list" class="list-container notification-list overscroll-behavior-contain pe-1 ff-base ghost-scrollbar">
+			<div class="mb-2 p-1">
+				<div class="d-flex gap-1 justify-content-between">
+					<div class="d-flex gap-2 flex-grow-1 placeholder-wave">
+						<div class="placeholder" style="width: 32px; height: 32px;"></div>
+						<div class="flex-grow-1">
+							<div class="d-flex flex-column">
+								<div class="text-sm">
+									<span class="placeholder placeholder-sm col-4"></span>
+									<span class="placeholder placeholder-sm col-6"></span>
+									<span class="placeholder placeholder-sm col-7"></span>
+									<span class="placeholder placeholder-sm col-2"></span>
+									<span class="placeholder placeholder-sm col-5"></span>
+								</div>
+								<div class="text-xs">
+									<div class="placeholder placeholder-xs col-6"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div>
+						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+							<i class="unread fa fa-2xs fa-circle text-primary"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
 	</li>
 	<li class="dropdown-divider"></li>
 	<li>
 		<div class="d-flex justify-content-center gap-1 flex-wrap">
-			<a role="button" href="#" class="btn btn-light mark-all-read flex-fill text-nowrap"><i class="fa fa-check-double"></i> [[notifications:mark-all-read]]</a>
-			<a class="btn btn-primary flex-fill text-nowrap" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see-all]]</a>
+			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark-all-read]]</a>
+			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see-all]]</a>
 		</div>
 	</li>
-</ul>
+</ul>

package/templates/partials/header/user-menu.tpl

@@ -4,7 +4,7 @@
 		<span id="user-header-name" class="d-block d-sm-none">{user.username}</span>
 	</a>
 	<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
-	<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu dropdown-menu-end" aria-labelledby="user_dropdown" role="menu">
+	<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="user_dropdown" role="menu">
 		<li>
 			<a class="dropdown-item" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem">
 				<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i> <span component="header/username">{user.username}</span>

package/templates/partials/notifications_list.tpl

@@ -1,30 +1,44 @@
+{{{ if !notifications.length }}}
+<div class="no-notifs text-center p-4 d-flex flex-column">
+	<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
+	<div class="text-xs fw-semibold text-muted">[[notifications:no-notifs]]</div>
+</div>
+{{{ end }}}
 
-<!-- IF !notifications.length -->
-<li class="no-notifs"><a href="#">[[notifications:no-notifs]]</a></li>
-<!-- ENDIF !notifications.length -->
+{{{ each notifications }}}
+<div class="{./readClass}" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
+	<div class="d-flex gap-1 justify-content-between">
+		<div class="btn btn-ghost btn-sm d-flex gap-2 flex-grow-1 align-items-start text-start">
+			<a class="flex-grow-0 flex-shrink-0" href="{{{ if ./user.userslug}}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+				{{{ if (./image && ./from) }}}
+				<img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" />
+				{{{ else }}}
+				{{{ if ./icon }}}
+				<div class="avatar avatar-rounded" style="--avatar-size: 32px;"><i class="text-secondary fa {./icon}"></i></div>
+				{{{ else }}}
+				<div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div>
+				{{{ end }}}
+				{{{ end }}}
+			</a>
 
-{{{each notifications}}}
-<li class="{notifications.readClass}" data-nid="{notifications.nid}" data-path="{notifications.path}" <!-- IF notifications.pid --> data-pid="{notifications.pid}"<!-- ENDIF notifications.pid --><!-- IF notifications.tid --> data-tid="{notifications.tid}"<!-- ENDIF notifications.tid -->>
-	<!-- IF notifications.image -->
-	<!-- IF notifications.from -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><img class="float-start user-img avatar avatar-rounded" style="--avatar-size: 32px;" src="{notifications.image}" /></a>
-	<!-- ENDIF notifications.from -->
-	<!-- ELSE -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="float-start avatar avatar-rounded" style="--avatar-size: 32px; background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
-	<!-- ENDIF notifications.image -->
-
-	<a href="{notifications.path}" class="notification-chat-content deco-none">
-		<span class="text">{notifications.bodyShort}</span>
-	</a>
-
-	<div class="notification-chat-controls">
-		{{{ if ./nid }}}
-		<div class="mark-read" aria-label="Mark Read">
-			<i class="unread fa fa-circle"></i>
-			<i class="read fa fa-circle-o"></i>
+			<div class="d-flex flex-grow-1 flex-column align-items-start position-relative">
+				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
+					{./bodyShort}
+				</a>
+				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
+			</div>
+		</div>
+		<div>
+			{{{ if ./nid }}}
+			<button class="mark-read btn btn-ghost btn-sm flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
+				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-read]]"></i>
+				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-unread]]"></i>
+			</button>
+			{{{ end }}}
 		</div>
-		{{{ end }}}
-		<span class="relTime">{notifications.timeago}</span>
 	</div>
-</li>
-{{{end}}}
+</div>
+{{{ if !@last }}}
+<hr class="my-1" />
+{{{ end }}}
+{{{ end }}}