Fix inconsistent user profile layout across tabs (#25625)

Fix ::User Profile Page  Project Tab Have Inconsistent Layout and Style
Added the big_avator for consistency in the all header_items tabs.
Fixes: #24871
> ### Description
> in the user profile page the `Packages` and `Projects` tab have small
icons for user but other tabs have bigger profile picture with user
info:
> 
> ### Screenshots
> ### **For Packages And Projects:**
>
![image](https://user-images.githubusercontent.com/25511175/240148601-2420d77b-ba25-4718-9ccb-c5d0d95e3079.png)
> 
> ### **For Other Tabs:**
>
![image](https://user-images.githubusercontent.com/25511175/240148461-ce9636b3-fe11-4c46-a230-30d83eee5947.png)
> 

## Before

![image](https://github.com/go-gitea/gitea/assets/80308335/975ad038-07ca-4b10-b75d-ccf259be7b9d)


 ## After changes
Project View 
<img width="1394" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/95d181d7-8e61-496d-9899-7b825c91ad56">


Packages View
<img width="1378" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/7f5fd60f-6b18-4fa8-8c56-7b0d45d1a610">


## Org view for projects page
<img width="1385" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/6400dc89-a5ae-4f0a-831b-5b6efa020d89">

## Org view for packages page
<img width="1387" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/4e1e9ffe-1e4b-4334-8657-de11b5fd31d0">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>

2 files changed, 132 insertions, 0 deletions

diff --git a/templates/shared/user/org_profile_avatar.tmpl b/templates/shared/user/org_profile_avatar.tmpl
new file mode 100644
index 0000000000..a56763e288
--- /dev/null
+++ b/templates/shared/user/org_profile_avatar.tmpl
@@ -0,0 +1,16 @@
+{{with .ContextUser}}
+	<div class="ui container">
+		<div class="ui vertically grid head">
+			<div class="column">
+				<div class="ui header">
+					{{avatar $.Context . 100}}
+					<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
+					<span class="org-visibility">
+						{{if .Visibility.IsLimited}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
+						{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+{{end}}
diff --git a/templates/shared/user/profile_big_avatar.tmpl b/templates/shared/user/profile_big_avatar.tmpl
new file mode 100644
index 0000000000..408877e481
--- /dev/null
+++ b/templates/shared/user/profile_big_avatar.tmpl
@@ -0,0 +1,116 @@
+<div class="ui card">
+	<div id="profile-avatar" class="content gt-df">
+	{{if eq .SignedUserID .ContextUser.ID}}
+		<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{.locale.Tr "user.change_avatar"}}">
+			{{/* the size doesn't take affect (and no need to take affect), image size(width) should be controlled by the parent container since this is not a flex layout*/}}
+			{{avatar $.Context .ContextUser 256}}
+		</a>
+	{{else}}
+		<span class="image">
+			{{avatar $.Context .ContextUser 256}}
+		</span>
+	{{end}}
+	</div>
+	<div class="content gt-word-break profile-avatar-name">
+		{{if .ContextUser.FullName}}<span class="header text center">{{.ContextUser.FullName}}</span>{{end}}
+		<span class="username text center">{{.ContextUser.Name}}</span>
+		{{if .EnableFeed}}
+			<a href="{{.ContextUser.HomeLink}}.rss"><i class="ui text grey gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
+		{{end}}
+		<div class="gt-mt-3">
+			<a class="muted" href="{{.ContextUser.HomeLink}}?tab=followers">{{svg "octicon-person" 18 "gt-mr-2"}}{{.NumFollowers}} {{.locale.Tr "user.followers"}}</a> · <a class="muted" href="{{.ContextUser.HomeLink}}?tab=following">{{.NumFollowing}} {{.locale.Tr "user.following"}}</a>
+		</div>
+	</div>
+	<div class="extra content gt-word-break">
+		<ul>
+			{{if .ContextUser.Location}}
+				<li>{{svg "octicon-location"}} {{.ContextUser.Location}}</li>
+			{{end}}
+			{{if (eq .SignedUserID .ContextUser.ID)}}
+				<li>
+					{{svg "octicon-mail"}}
+					<a href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
+					<a href="{{AppSubUrl}}/user/settings#keep-email-private">
+						{{if .ShowUserEmail}}
+							<i class="ui right" data-tooltip-content="{{.locale.Tr "user.email_visibility.limited"}}">
+								{{svg "octicon-unlock"}}
+							</i>
+						{{else}}
+							<i class="ui right" data-tooltip-content="{{.locale.Tr "user.email_visibility.private"}}">
+								{{svg "octicon-lock"}}
+							</i>
+						{{end}}
+					</a>
+				</li>
+			{{else}}
+				{{if .ShowUserEmail}}
+					<li>
+						{{svg "octicon-mail"}}
+						<a href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
+					</li>
+				{{end}}
+			{{end}}
+			{{if .ContextUser.Website}}
+				<li>
+					{{svg "octicon-link"}}
+					<a target="_blank" rel="noopener noreferrer me" href="{{.ContextUser.Website}}">{{.ContextUser.Website}}</a>
+				</li>
+			{{end}}
+			{{if $.RenderedDescription}}
+				<li>
+					<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
+				</li>
+			{{end}}
+			{{range .OpenIDs}}
+				{{if .Show}}
+					<li>
+						{{svg "fontawesome-openid"}}
+						<a target="_blank" rel="noopener noreferrer" href="{{.URI}}">{{.URI}}</a>
+					</li>
+				{{end}}
+			{{end}}
+			<li>{{svg "octicon-clock"}} {{.locale.Tr "user.joined_on" (DateTime "short" .ContextUser.CreatedUnix) | Safe}}</li>
+			{{if and .Orgs .HasOrgsVisible}}
+			<li>
+				<ul class="user-orgs">
+				{{range .Orgs}}
+					{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.HasMemberWithUserID $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
+					<li>
+						<a href="{{.HomeLink}}" data-tooltip-content="{{.Name}}">
+							{{avatar $.Context .}}
+						</a>
+					</li>
+					{{end}}
+				{{end}}
+				</ul>
+			</li>
+			{{end}}
+			{{if .Badges}}
+			<li>
+				<ul class="user-badges">
+				{{range .Badges}}
+					<li>
+						<img width="64" height="64" src="{{.ImageURL}}" alt="{{.Description}}" data-tooltip-content="{{.Description}}">
+					</li>
+				{{end}}
+				</ul>
+			</li>
+			{{end}}
+			{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
+			<li class="follow">
+				{{if $.IsFollowing}}
+					<form method="post" action="{{.Link}}?action=unfollow&redirect_to={{$.Link}}">
+						{{$.CsrfTokenHtml}}
+						<button type="submit" class="ui basic red button">{{svg "octicon-person"}} {{.locale.Tr "user.unfollow"}}</button>
+					</form>
+				{{else}}
+					<form method="post" action="{{.Link}}?action=follow&redirect_to={{$.Link}}">
+						{{$.CsrfTokenHtml}}
+						<button type="submit" class="ui basic green button">{{svg "octicon-person"}} {{.locale.Tr "user.follow"}}</button>
+					</form>
+				{{end}}
+			</li>
+			{{end}}
+		</ul>
+	</div>
+</div>