implement hq widget author image and notifications updates

3 files changed, 53 insertions, 28 deletions

diff --git a/view/tpl/channel_activities.tpl b/view/tpl/channel_activities.tpl
index acce3cb13..3ec37e235 100644
--- a/view/tpl/channel_activities.tpl
+++ b/view/tpl/channel_activities.tpl
@@ -6,7 +6,7 @@
 	<div class="col">
 		<div class="card">
 			<a href="{{$i.url}}" class="text-reset">
-				<div class="card-body">
+				<div class="card-body clearfix">
 					{{if $i.title}}
 						<strong>{{$i.title}}</strong>
 						<hr>
diff --git a/view/tpl/messages_widget.tpl b/view/tpl/messages_widget.tpl
index 8dece872e..3bedf518f 100644
--- a/view/tpl/messages_widget.tpl
+++ b/view/tpl/messages_widget.tpl
@@ -25,17 +25,25 @@
 <div id="messages-widget" class="border-start border-end border-bottom overflow-auto mb-3 clearfix" style="height: 70vh;">
 	<div id="messages-template" rel="template" class="d-none">
 		<a href="{6}" class="list-group-item list-group-item-action message" data-b64mid="{0}">
-			<div class="d-flex w-100 justify-content-between">
-				<div class="mb-1 text-truncate" title="{5}">
-					{7}
-					<strong>{4}</strong>
+			<div class="mb-2">
+				<img src="{9}" loading="lazy" class="rounded menu-img-2">
+				<div class="text-nowrap">
+					<div class="d-flex justify-content-between align-items-center lh-sm">
+						<div class="text-truncate mr-1">
+							{7}
+							<strong title="{4}">{4}</strong>
+						</div>
+						<small class="messages-timeago opacity-75" title="{1}"></small>
+					</div>
+					<div class="text-truncate">
+						<small class="opacity-75" title="{5}">{5}</small>
+					</div>
 				</div>
-				<small class="messages-timeago text-nowrap" title="{1}"></small>
 			</div>
-			<div class="mb-1">
+			<div class="mb-2">
 				<div class="text-break">{2}</div>
 			</div>
-			<small>{3}</small>
+			<small class="opacity-75">{3}</small>
 			{8}
 		</a>
 	</div>
@@ -47,17 +55,25 @@
 		</div>
 		{{foreach $entries as $e}}
 		<a href="{{$e.href}}" class="list-group-item list-group-item-action message" data-b64mid="{{$e.b64mid}}">
-			<div class="d-flex w-100 justify-content-between">
-				<div class="mb-1 text-truncate" title="{{$e.author_addr}}">
-					{{$e.icon}}
-					<strong>{{$e.author_name}}</strong>
+			<div class="mb-2">
+				<img src="{{$e.author_img}}" loading="lazy" class="rounded menu-img-2">
+				<div class="text-nowrap">
+					<div class="d-flex justify-content-between align-items-center lh-sm">
+						<div class="text-truncate mr-1">
+							{{$e.icon}}
+							<strong title="{{$e.author_name}}">{{$e.author_name}}</strong>
+						</div>
+						<small class="messages-timeago opacity-75" title="{{$e.created}}"></small>
+					</div>
+					<div class="text-truncate">
+						<small class="opacity-75" title="{{$e.author_addr}}">{{$e.author_addr}}</small>
+					</div>
 				</div>
-				<small class="messages-timeago text-nowrap" title="{{$e.created}}"></small>
 			</div>
-			<div class="mb-1">
+			<div class="mb-2">
 				<div class="text-break">{{$e.summary}}</div>
 			</div>
-			<small>{{$e.info}}</small>
+			<small class="opacity-75">{{$e.info}}</small>
 			{{if $e.unseen_count}}
 			<span class="badge bg-transparent border border-{{$e.unseen_class}} text-{{$e.unseen_class}} rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">{{$e.unseen_count}}</span>
 			{{/if}}
@@ -169,7 +185,8 @@
 						e.author_addr,
 						e.href,
 						e.icon,
-						e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : ''
+						e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : '',
+						e.author_img
 					);
 					$('#messages-loading').before(html);
 				});
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 9102eb7bc..d3347b4d8 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -535,28 +535,36 @@
 	</div>
 	<div id="nav-notifications-template" rel="template">
 		<a class="list-group-item list-group-item-action notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
-			<img class="menu-img-3" data-src="{1}" loading="lazy">
-			<div class="contactname"><span class="fw-bold">{2}</span> <small>{3}</small></div>
-			<span>{4}</span><br>
-			<span class="notifications-autotime" title="{5}">{5}</span>
+			<img data-src="{1}" loading="lazy" class="rounded menu-img-2">
+			<div class="text-nowrap">
+				<div class="d-flex justify-content-between lh-sm">
+					<div class="text-truncate mr-1">
+						<strong title="{2} - {3}">{2}</strong>
+					</div>
+					<small class="notifications-autotime opacity-75" title="{5}"></small>
+				</div>
+				<div class="text-truncate">{4}</div>
+			</div>
 		</a>
 	</div>
 	<div id="nav-notifications-forums-template" rel="template">
-		<a class="list-group-item list-group-item-action notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
-			<div class="justify-content-between">
+		<a class="list-group-item list-group-item-action justify-content-between align-items-center d-flex notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
+			<div>
 				<img class="menu-img-1" data-src="{1}" loading="lazy">
-				<span class="badge bg-secondary">{10}</span>
+				<span>{2}</span>
 			</div>
-			<span>{2}</span>
-			<i class="fa fa-{11}"></i>
+			<span class="badge bg-secondary">{10}</span>
 		</a>
 	</div>
 	<div id="notifications" class="border border-top-0 rounded navbar-nav collapse">
 		{{foreach $notifications as $notification}}
 		<div class="rounded-top rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse {{$notification.type}}-button">
-			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item fakelink notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
-				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
-				<span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
+			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item justify-content-between align-items-center d-flex fakelink stretched-link notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
+				<div>
+					<i class="fa fa-fw fa-{{$notification.icon}}"></i>
+					{{$notification.label}}
+				</div>
+				<span class="badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
 		</div>
 		<div id="nav-{{$notification.type}}-sub" class="rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">