restructure wall-item-head

7 files changed, 160 insertions, 82 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index bd6401f45..03713e6eb 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -100,12 +100,6 @@
 	border-top: 0.2rem solid var(--bs-blue);
 }
 
-.wall-item-info {
-	display: block;
-	float: left;
-	margin-right: .75rem;
-}
-
 .wall-item-wrapper {
 	margin-left: .75rem;
 }
@@ -147,18 +141,6 @@ a.wall-item-name-link {
 	font-weight: bold !important;
 }
 
-.wall-item-author {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.wall-item-ago,
-.wall-item-ago i {
-	font-size: 0.75rem;
-	line-height: 1.1;
-}
-
 .wall-item-ago .fa-check {
 	cursor: pointer;
 }
diff --git a/view/js/main.js b/view/js/main.js
index fdebb5faa..7250b6d2e 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1234,7 +1234,7 @@ function doscroll(parent, hidden) {
 	});
 
 	$('html, body').animate({scrollTop:(id.offset().top) - 50}, 'slow');
-	$('<a href="javascript:doscrollback(' + pos + ');" id="back-to-reply" class="float-end" title="' + aStr['to_reply'] + '"><i class="fa fa-angle-double-down">&nbsp;&nbsp;&nbsp;</i></a>').insertBefore('#wall-item-info-' + id.attr('id').replace(/\D/g,''));
+	$('<a href="javascript:doscrollback(' + pos + ');" id="back-to-reply" title="' + aStr['to_reply'] + '"><i class="fa fa-angle-double-down"></i></a>').insertAfter('#wall-item-ago-' + id.attr('id').replace(/\D/g,''));
 }
 
 function doscrollback(pos) {
@@ -1259,7 +1259,7 @@ function dopin(id) {
                         $('.dropdown-item-pinnable').html($('.dropdown-item-pinnable').html().replace(aStr['unpin_item'],aStr['pin_item']));
                         $('.wall-item-pinned').remove()
                         if(i.length == 0) {
-                                $('<span class="float-end wall-item-pinned" title="' + aStr['pinned'] + '" id="wall-item-pinned-' + id + '"><i class="fa fa-thumb-tack">&nbsp;</i></span>').insertBefore('#wall-item-info-' + id);
+                                $('<span class="wall-item-pinned" title="' + aStr['pinned'] + '" id="wall-item-pinned-' + id + '"><i class="fa fa-thumb-tack">&nbsp;</i></span>').insertBefore('#wall-item-info-' + id);
                                 me.html(me.html().replace(aStr['pin_item'],aStr['unpin_item']));
                         };
                 })
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 5d27071a5..b63d7092a 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1017,12 +1017,6 @@ img.mail-conv-sender-photo {
 
 
 /* conversation */
-
-.top-radius {
-	border-top-right-radius: var(--bs-border-radius);
-	border-top-left-radius: var(--bs-border-radius);
-}
-
 .wall-event-item {
 	padding: 10px;
 	color: #fff;
@@ -1094,11 +1088,6 @@ img.mail-conv-sender-photo {
 	height: $reply_photo;
 }
 
-.wall-item-ago,
-.dropdown-sub-text {
-	color: var(--bs-tertiary-color);
-}
-
 .wall-item-content,
 .mail-conv-body,
 .page-body,
@@ -1107,7 +1096,6 @@ img.mail-conv-sender-photo {
 	font-size: 1rem;
 }
 
-
 .comment-edit-text {
 	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 47261d070..aa10e53ff 100644
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -26,14 +26,8 @@
 				<hr class="m-0">
 				{{/if}}
 				{{/if}}
-				<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
-					{{if $item.thr_parent}}
-						<a href="javascript:doscroll('{{$item.thr_parent}}',{{$item.parent}});" title="{{$item.top_hint}}" class="float-end"><i class="fa fa-angle-double-up">&nbsp;&nbsp;&nbsp;</i></a>
-					{{/if}}
-					{{if $item.pinned}}
-					    <span class="float-end wall-item-pinned" title="{{$item.pinned}}" id="wall-item-pinned-{{$item.id}}"><i class="fa fa-thumb-tack">&nbsp;</i></span>
-					{{/if}}
-					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
+				<div class="p-2 lh-sm d-flex wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
+					<div class="wall-item-info pe-2" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
 							{{if $item.contact_id}}
 							<div class="spinner-wrapper contact-edit-rotator contact-edit-rotator-{{$item.contact_id}}"><div class="spinner s"></div></div>
@@ -52,18 +46,41 @@
 							{{/if}}
 						</div>
 					</div>
-					{{if $item.lock}}
-					<div class="wall-item-lock dropdown">
-						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else if $item.locktype == 1}}fa-lock{{else}}fa-unlock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
-						<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
-					</div>
-					{{/if}}
-					<div class="wall-item-author">
-						{{if $item.previewing}}<span class="preview-indicator"><i class="fa fa-eye" title="{{$item.preview_lbl}}"></i></span>&nbsp;{{/if}}
-						<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link u-url"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" ><bdi>{{$item.name}}</bdi></span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}"><bdi>{{$item.owner_name}}</bdi></span></a>{{/if}}
+					<div class="wall-item-author text-truncate">
+						{{if $item.previewing}}<span class="preview-indicator"><i class="fa fa-eye" title="{{$item.preview_lbl}}"></i></span>{{/if}}
+						{{if $item.lock}}
+						<div class="wall-item-lock dropdown">
+							<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else if $item.locktype == 1}}fa-lock{{else}}fa-unlock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
+							<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
+						</div>
+						{{/if}}
+						<a href="{{$item.profile_url}}" class="wall-item-name-link u-url"{{if $item.app}} title="{{$item.str_app}}"{{/if}}><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" ><bdi>{{$item.name}}</bdi></span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}"><bdi>{{$item.owner_name}}</bdi></span></a>{{/if}}<br>
+						<small class="wall-item-addr opacity-75">{{$item.linktitle}}</small>
 					</div>
-					<div class="wall-item-ago"  id="wall-item-ago-{{$item.id}}">
-						{{if $item.verified}}<i class="fa fa-check item-verified" title="{{$item.verified}}"></i>&nbsp;{{elseif $item.forged}}<i class="fa fa-exclamation item-forged" title="{{$item.forged}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location p-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}"><time class="dt-published" datetime="{{$item.isotime}}">{{$item.localtime}}</time>{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</span>&nbsp;{{if $item.delayed}}<i class="fa fa-clock-o"></i>{{/if}}{{if $item.editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
+					<div class="text-end ms-auto">
+						<div class="wall-item-ago text-nowrap opacity-75" id="wall-item-ago-{{$item.id}}">
+							{{if $item.editedtime}}
+							<i class="fa fa-pencil"></i>
+							{{/if}}
+							{{if $item.delayed}}
+							<i class="fa fa-clock-o"></i>
+							{{/if}}
+							{{if $item.location}}
+							<small class="wall-item-location p-location" id="wall-item-location-{{$item.id}}">{{$item.location}}</small>
+							{{/if}}
+							{{if $item.verified}}
+							<i class="fa fa-check text-success" title="{{$item.verified}}"></i>
+							{{elseif $item.forged}}
+							<i class="fa fa-exclamation text-danger" title="{{$item.forged}}"></i>
+							{{/if}}
+							<small class="autotime" title="{{$item.isotime}}"><time class="dt-published" datetime="{{$item.isotime}}">{{$item.localtime}}</time>{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</small>
+						</div>
+						{{if $item.thr_parent}}
+						<a href="javascript:doscroll('{{$item.thr_parent}}',{{$item.parent}});" class="ms-3" title="{{$item.top_hint}}"><i class="fa fa-angle-double-up"></i></a>
+						{{/if}}
+						{{if $item.pinned}}
+						<div class="wall-item-pinned" title="{{$item.pinned}}" id="wall-item-pinned-{{$item.id}}"><i class="fa fa-thumb-tack"></i></div>
+						{{/if}}
 					</div>
 				</div>
 				{{if $item.divider}}
diff --git a/view/tpl/conv_list.tpl b/view/tpl/conv_list.tpl
index fde78e71e..e3d5961ec 100644
--- a/view/tpl/conv_list.tpl
+++ b/view/tpl/conv_list.tpl
@@ -26,13 +26,13 @@
 				<hr class="m-0">
 				{{/if}}
 				{{/if}}
-				<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}">
-					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
+				<div class="p-2 lh-sm d-flex wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
+					<div class="wall-item-info pe-2" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
 							{{if $item.contact_id}}
 							<div class="spinner-wrapper contact-edit-rotator contact-edit-rotator-{{$item.contact_id}}"><div class="spinner s"></div></div>
 							{{/if}}
-							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-bs-toggle="dropdown" loading="lazy" /></a>
+							<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy" data-bs-toggle="dropdown" />
 							{{if $item.author_is_group_actor}}
 							<i class="fa fa-comments-o wall-item-photo-group-actor" title="{{$item.author_is_group_actor}}"></i>
 							{{/if}}
@@ -40,27 +40,52 @@
 							<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
 							<div class="dropdown-menu">
 								{{foreach $item.thread_author_menu as $mitem}}
-								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
+								<a class="dropdown-item{{if $mitem.class}} {{$mitem.class}}{{/if}}" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}}{{if $mitem.data}} {{$mitem.data}}{{/if}}>{{$mitem.title}}</a>
 								{{/foreach}}
-
 							</div>
 							{{/if}}
 						</div>
 					</div>
-					{{if $item.lock}}
-					<div class="wall-item-lock dropdown">
-						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else if $item.locktype == 1}}fa-lock{{else}}fa-unlock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
-						<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
-					</div>
-					{{/if}}
-					<div class="wall-item-author">
-						<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link u-url"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" ><bdi>{{$item.name}}</bdi></span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}"><bdi>{{$item.owner_name}}</bdi></span></a>{{/if}}
+					<div class="wall-item-author text-truncate">
+						{{if $item.previewing}}<span class="preview-indicator"><i class="fa fa-eye" title="{{$item.preview_lbl}}"></i></span>{{/if}}
+						{{if $item.lock}}
+						<div class="wall-item-lock dropdown">
+							<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else if $item.locktype == 1}}fa-lock{{else}}fa-unlock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
+							<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
+						</div>
+						{{/if}}
+						<a href="{{$item.profile_url}}" class="wall-item-name-link u-url"{{if $item.app}} title="{{$item.str_app}}"{{/if}}><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" ><bdi>{{$item.name}}</bdi></span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}"><bdi>{{$item.owner_name}}</bdi></span></a>{{/if}}<br>
+						<small class="wall-item-addr opacity-75">{{$item.linktitle}}</small>
 					</div>
-					<div class="wall-item-ago"  id="wall-item-ago-{{$item.id}}">
-						{{if $item.verified}}<i class="fa fa-check item-verified" title="{{$item.verified}}"></i>&nbsp;{{elseif $item.forged}}<i class="fa fa-exclamation item-forged" title="{{$item.forged}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location p-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}"><time class="dt-published" datetime="{{$item.isotime}}">{{$item.localtime}}</time>{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</span>{{if $item.editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
+					<div class="text-end ms-auto">
+						<div class="wall-item-ago text-nowrap opacity-75" id="wall-item-ago-{{$item.id}}">
+							{{if $item.editedtime}}
+							<i class="fa fa-pencil"></i>
+							{{/if}}
+							{{if $item.delayed}}
+							<i class="fa fa-clock-o"></i>
+							{{/if}}
+							{{if $item.location}}
+							<small class="wall-item-location p-location" id="wall-item-location-{{$item.id}}">{{$item.location}}</small>
+							{{/if}}
+							{{if $item.verified}}
+							<i class="fa fa-check text-success" title="{{$item.verified}}"></i>
+							{{elseif $item.forged}}
+							<i class="fa fa-exclamation text-danger" title="{{$item.forged}}"></i>
+							{{/if}}
+							<small class="autotime" title="{{$item.isotime}}"><time class="dt-published" datetime="{{$item.isotime}}">{{$item.localtime}}</time>{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</small>
+						</div>
+						{{if $item.thr_parent}}
+						<a href="javascript:doscroll('{{$item.thr_parent}}',{{$item.parent}});" class="ms-3" title="{{$item.top_hint}}"><i class="fa fa-angle-double-up"></i></a>
+						{{/if}}
+						{{if $item.pinned}}
+						<div class="wall-item-pinned" title="{{$item.pinned}}" id="wall-item-pinned-{{$item.id}}"><i class="fa fa-thumb-tack"></i></div>
+						{{/if}}
 					</div>
 				</div>
-
+				{{if $item.divider}}
+				<hr class="wall-item-divider">
+				{{/if}}
 				{{if $item.body}}
 				<div class="p-2 wall-item-content clearfix" id="wall-item-content-{{$item.id}}">
 					<div class="wall-item-body e-content" id="wall-item-body-{{$item.id}}" >
diff --git a/view/tpl/pinned_item.tpl b/view/tpl/pinned_item.tpl
index 4d059e0a4..09cc770a6 100644
--- a/view/tpl/pinned_item.tpl
+++ b/view/tpl/pinned_item.tpl
@@ -40,7 +40,7 @@
 					<hr class="m-0">
 				{{/if}}
 			{{/if}}
-			<div class="p-2 clearfix wall-item-head{{if !$title && !$event && !$photo}} rounded-top{{/if}}{{if $is_new && !$event}} wall-item-head-new{{/if}}">
+			<!--div class="p-2 clearfix wall-item-head{{if !$title && !$event && !$photo}} rounded-top{{/if}}{{if $is_new && !$event}} wall-item-head-new{{/if}}">
 				<span class="float-end" title="{{$pinned}}"><i class="fa fa-thumb-tack">&nbsp;</i></span>
 				<div class="wall-item-info" id="pinned-item-info-{{$id}}" >
 					<div class="wall-item-photo-wrapper{{if $owner_url}} wwfrom{{/if}} h-card p-author" id="pinned-item-photo-wrapper-{{$id}}">
@@ -61,7 +61,49 @@
 				<div class="wall-item-ago"  id="pinned-item-ago-{{$id}}">
 					{{if $verified}}<i class="fa fa-check item-verified" title="{{$verified}}"></i>&nbsp;{{elseif $forged}}<i class="fa fa-exclamation item-forged" title="{{$forged}}"></i>&nbsp;{{/if}}{{if $location}}<span class="wall-item-location p-location" id="pinned-item-location-{{$id}}">{{$location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$isotime}}"><time class="dt-published" datetime="{{$isotime}}">{{$localtime}}</time>{{if $editedtime}}&nbsp;{{$editedtime}}{{/if}}{{if $expiretime}}&nbsp;{{$expiretime}}{{/if}}</span>{{if $editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $app}}<span class="item.app">{{$str_app}}</span>{{/if}}
 				</div>
+			</div-->
+
+			<div class="p-2 lh-sm d-flex wall-item-head{{if !$title && !$event && !$photo}} rounded-top{{/if}}{{if $is_new && !$event}} wall-item-head-new{{/if}}" >
+				<div class="wall-item-info pe-2" id="wall-item-info-{{$id}}" >
+					<div class="wall-item-photo-wrapper{{if $owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$id}}">
+						<img src="{{$thumb}}" class="fakelink wall-item-photo{{$sparkle}} u-photo p-name" id="wall-item-photo-{{$id}}" alt="{{$name}}" loading="lazy" data-bs-toggle="dropdown" />
+						{{if $thread_author_menu}}
+						<i class="fa fa-caret-down wall-item-photo-caret cursor-pointer" data-bs-toggle="dropdown"></i>
+						<div class="dropdown-menu">
+							{{foreach $thread_author_menu as $mitem}}
+							<a class="dropdown-item{{if $mitem.class}} {{$mitem.class}}{{/if}}" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}}{{if $mitem.data}} {{$mitem.data}}{{/if}}>{{$mitem.title}}</a>
+							{{/foreach}}
+						</div>
+						{{/if}}
+					</div>
+				</div>
+				<div class="wall-item-author text-truncate">
+					<a href="{{$profile_url}}" title="{{$linktitle}}" class="wall-item-name-link u-url"><span class="wall-item-name" id="pinned-item-name-{{$id}}" >{{$name}}</span></a>{{if $owner_url}}&nbsp;{{$via}}&nbsp;<a href="{{$owner_url}}" title="{{$olinktitle}}" class="wall-item-name-link"><span class="wall-item-name" id="pinned-item-ownername-{{$id}}">{{$owner_name}}</span></a>{{/if}}<br>
+					<small class="wall-item-addr opacity-75">{{$linktitle}}</small>
+				</div>
+				<div class="text-end ms-auto">
+					<div class="wall-item-ago text-nowrap opacity-75" id="wall-item-ago-{{$id}}">
+						{{if $editedtime}}
+						<i class="fa fa-pencil"></i>
+						{{/if}}
+						{{if $delayed}}
+						<i class="fa fa-clock-o"></i>
+						{{/if}}
+						{{if $location}}
+						<small class="wall-item-location p-location" id="wall-item-location-{{$id}}">{{$location}}</small>
+						{{/if}}
+						{{if $verified}}
+						<i class="fa fa-check text-success" title="{{$verified}}"></i>
+						{{elseif $forged}}
+						<i class="fa fa-exclamation text-danger" title="{{$forged}}"></i>
+						{{/if}}
+						<small class="autotime" title="{{$isotime}}"><time class="dt-published" datetime="{{$isotime}}">{{$localtime}}</time>{{if $editedtime}}&nbsp;{{$editedtime}}{{/if}}{{if $expiretime}}&nbsp;{{$expiretime}}{{/if}}</small>
+					</div>
+					<div class="wall-item-pinned" title="{{$pinned}}" id="wall-item-pinned-{{$id}}"><i class="fa fa-thumb-tack"></i></div>
+				</div>
 			</div>
+
+
 			{{if $divider}}
 				<hr class="wall-item-divider">
 			{{/if}}
diff --git a/view/tpl/search_item.tpl b/view/tpl/search_item.tpl
index 7b63d83b8..821ecf699 100644
--- a/view/tpl/search_item.tpl
+++ b/view/tpl/search_item.tpl
@@ -20,13 +20,13 @@
 			<hr class="m-0">
 			{{/if}}
 			{{/if}}
-			<div class="p-2 clearfix wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
-				<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
-					<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}">
+			<div class="p-2 lh-sm d-flex wall-item-head{{if !$item.title && !$item.event && !$item.photo}} rounded-top{{/if}}{{if $item.is_new && !$item.event && !$item.is_comment}} wall-item-head-new{{/if}}" >
+				<div class="wall-item-info pe-2" id="wall-item-info-{{$item.id}}" >
+					<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
 						{{if $item.contact_id}}
 						<div class="spinner-wrapper contact-edit-rotator contact-edit-rotator-{{$item.contact_id}}"><div class="spinner s"></div></div>
 						{{/if}}
-						<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" data-bs-toggle="dropdown" loading="lazy" />
+						<img src="{{$item.thumb}}" class="fakelink wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy" data-bs-toggle="dropdown" />
 						{{if $item.author_is_group_actor}}
 						<i class="fa fa-comments-o wall-item-photo-group-actor" title="{{$item.author_is_group_actor}}"></i>
 						{{/if}}
@@ -40,17 +40,41 @@
 						{{/if}}
 					</div>
 				</div>
-				{{if $item.lock}}
-				<div class="wall-item-lock dropdown">
-					<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else if $item.locktype == 1}}fa-lock{{else}}fa-unlock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
-				</div>
-				{{/if}}
-				<div class="wall-item-author">
-					{{if $item.previewing}}<span class="preview-indicator"><i class="fa fa-eye" title="{{$item.preview_lbl}}"></i></span>&nbsp;{{/if}}
-					<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" ><bdi>{{$item.name}}</bdi></span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}"><bdi>{{$item.owner_name}}</bdi></span></a>{{/if}}
+				<div class="wall-item-author text-truncate">
+					{{if $item.previewing}}<span class="preview-indicator"><i class="fa fa-eye" title="{{$item.preview_lbl}}"></i></span>{{/if}}
+					{{if $item.lock}}
+					<div class="wall-item-lock dropdown">
+						<i class="fa {{if $item.locktype == 2}}fa-envelope-o{{else if $item.locktype == 1}}fa-lock{{else}}fa-unlock{{/if}} lockview{{if $item.privacy_warning}} text-danger{{/if}}" data-bs-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
+						<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
+					</div>
+					{{/if}}
+					<a href="{{$item.profile_url}}" class="wall-item-name-link u-url"{{if $item.app}} title="{{$item.str_app}}"{{/if}}><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" ><bdi>{{$item.name}}</bdi></span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}"><bdi>{{$item.owner_name}}</bdi></span></a>{{/if}}<br>
+					<small class="wall-item-addr opacity-75">{{$item.linktitle}}</small>
 				</div>
-				<div class="wall-item-ago"  id="wall-item-ago-{{$item.id}}">
-					{{if $item.verified}}<i class="fa fa-check item-verified" title="{{$item.verified}}"></i>&nbsp;{{elseif $item.forged}}<i class="fa fa-exclamation item-forged" title="{{$item.forged}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}">{{$item.localtime}}{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</span>{{if $item.editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
+				<div class="text-end ms-auto">
+					<div class="wall-item-ago text-nowrap opacity-75" id="wall-item-ago-{{$item.id}}">
+						{{if $item.editedtime}}
+						<i class="fa fa-pencil"></i>
+						{{/if}}
+						{{if $item.delayed}}
+						<i class="fa fa-clock-o"></i>
+						{{/if}}
+						{{if $item.location}}
+						<small class="wall-item-location p-location" id="wall-item-location-{{$item.id}}">{{$item.location}}</small>
+						{{/if}}
+						{{if $item.verified}}
+						<i class="fa fa-check text-success" title="{{$item.verified}}"></i>
+						{{elseif $item.forged}}
+						<i class="fa fa-exclamation text-danger" title="{{$item.forged}}"></i>
+						{{/if}}
+						<small class="autotime" title="{{$item.isotime}}"><time class="dt-published" datetime="{{$item.isotime}}">{{$item.localtime}}</time>{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</small>
+					</div>
+					{{if $item.thr_parent}}
+					<a href="javascript:doscroll('{{$item.thr_parent}}',{{$item.parent}});" class="ms-3" title="{{$item.top_hint}}"><i class="fa fa-angle-double-up"></i></a>
+					{{/if}}
+					{{if $item.pinned}}
+					<div class="wall-item-pinned" title="{{$item.pinned}}" id="wall-item-pinned-{{$item.id}}"><i class="fa fa-thumb-tack"></i></div>
+					{{/if}}
 				</div>
 			</div>
 			{{if $item.divider}}