Refine User page

core/src/main/resources/hudson/model/User/app-bar.jelly

@@ -0,0 +1,27 @@
+<!--
+The MIT License
+
+Copyright (c) 2025 Jan Faracik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+  <l:app-bar title="${it.fullName}" icon="${h.getUserAvatar(it, '96x96')}" />
+</j:jelly>

core/src/main/resources/hudson/model/User/builds.jelly

@@ -27,9 +27,7 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <l:breadcrumb title="${%Builds}" />
     <l:main-panel>
-      <h1>
-        ${%title(it)}
-      </h1>
+      <l:app-bar title="${%Builds}" />
 
       <t:buildListTable builds="${it.builds}"/>
     </l:main-panel>

core/src/main/resources/hudson/model/User/index.jelly

@@ -28,12 +28,7 @@ THE SOFTWARE.
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
       <div class="jenkins-app-bar">
-        <div class="jenkins-app-bar__content jenkins-build-caption">
-          <l:icon src="${h.getUserAvatar(it, '96x96')}" class="jenkins-avatar" />
-          <h1>
-            ${it.fullName}
-          </h1>
-        </div>
+        <div class="jenkins-app-bar__content" />
         <div class="jenkins-app-bar__controls">
           <t:editDescriptionButton permission="${app.ADMINISTER}"/>
         </div>

core/src/main/resources/hudson/model/User/sidepanel.jelly

@@ -30,8 +30,10 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
   <l:header />
   <l:side-panel>
+    <st:include page="app-bar.jelly" />
+
     <l:tasks>
-      <l:task contextMenu="false" href="${rootURL}/${it.url}/" icon="symbol-person-circle" title="${%Status}"/>
+      <l:task contextMenu="false" href="${rootURL}/${it.url}/" icon="symbol-person" title="${%Profile}"/>
       <l:task href="${rootURL}/${it.url}/builds" icon="symbol-build-history" title="${%Builds}"/>
       <t:actions actions="${it.propertyActions}"/>
       <t:actions actions="${it.transientActions}"/>

core/src/main/resources/hudson/model/View/sidepanel.jelly

@@ -35,6 +35,9 @@ THE SOFTWARE.
     <link rel="alternate" title="Jenkins:${it.viewName} (failed builds) (RSS 2.0)" href="${rootURL}/${it.url}rssFailed?flavor=rss20" type="application/rss+xml" />
   </l:header>
   <l:side-panel>
+    <!-- Display the user's name for their views -->
+    <st:include page="app-bar.jelly" it="${it.owner.user}" optional="true" />
+
     <l:tasks>
       <st:include page="tasks-top.jelly" it="${it.owner}" optional="true" />
 

core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryAccountAction/index.jelly

@@ -30,16 +30,14 @@ THE SOFTWARE.
     <l:layout permission="${app.ADMINISTER}" title="${%title}">
         <st:include page="sidepanel.jelly" it="${it.targetUser}" />
         <l:main-panel>
-            <f:form method="post" action="configSubmit" name="config" class="jenkins-form">
-                <h1>
-                    ${%title}
-                </h1>
+            <l:app-bar title="${%title}" />
 
+            <f:form method="post" action="configSubmit" name="config" class="jenkins-form">
                 <j:set var="thisAction" value="${it}" />
                 <j:set var="it" value="${thisAction.targetUser}" />
                 <j:set var="instance" value="${it}"/>
 
-                <f:section>
+                <f:section title="${%General}">
                     <f:entry title="${%Full name}" description="${%Full name.Description}">
                         <f:textbox field="fullName" />
                     </f:entry>

core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryAppearanceAction/index.jelly

@@ -30,11 +30,9 @@ THE SOFTWARE.
     <l:layout permission="${app.ADMINISTER}" title="${%title}">
         <st:include page="sidepanel.jelly" it="${it.targetUser}" />
         <l:main-panel>
+            <l:app-bar title="${%title}" />
+
             <f:form method="post" action="configSubmit" name="config" class="jenkins-form">
-                <h1>
-                    ${%title}
-                </h1>
-
                 <j:set var="instance" value="${it}"/>
                 <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                 <j:set var="instances" value="${it.targetUser.properties}" />

core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryExperimentalAction/index.jelly

@@ -30,11 +30,9 @@ THE SOFTWARE.
     <l:layout permission="${app.ADMINISTER}" title="${%title}">
         <st:include page="sidepanel.jelly" it="${it.targetUser}" />
         <l:main-panel>
+            <l:app-bar title="${%title}" />
+
             <f:form method="post" action="configSubmit" name="config">
-                <h1>
-                    ${%title}
-                </h1>
-
                 <j:set var="instance" value="${it}"/>
                 <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                 <j:set var="instances" value="${it.targetUser.properties}" />

core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryPreferencesAction/index.jelly

@@ -30,11 +30,9 @@ THE SOFTWARE.
     <l:layout permission="${app.ADMINISTER}" title="${%title}">
         <st:include page="sidepanel.jelly" it="${it.targetUser}" />
         <l:main-panel>
-            <f:form method="post" action="configSubmit" name="config">
-                <h1>
-                    ${%title}
-                </h1>
+            <l:app-bar title="${%title}" />
 
+            <f:form method="post" action="configSubmit" name="config">
                 <j:set var="instance" value="${it}"/>
                 <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                 <j:set var="instances" value="${it.targetUser.properties}" />

core/src/main/resources/hudson/model/userproperty/UserPropertyCategorySecurityAction/index.jelly

@@ -30,11 +30,9 @@ THE SOFTWARE.
     <l:layout permission="${app.ADMINISTER}" title="${%title}">
         <st:include page="sidepanel.jelly" it="${it.targetUser}" />
         <l:main-panel>
-            <f:form method="post" action="configSubmit" name="config">
-                <h1>
-                    ${%title}
-                </h1>
+            <l:app-bar title="${%title}" />
 
+            <f:form method="post" action="configSubmit" name="config">
                 <j:set var="instance" value="${it}"/>
                 <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                 <j:set var="instances" value="${it.targetUser.properties}" />

core/src/main/resources/lib/layout/app-bar.jelly

@@ -23,7 +23,7 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:x="jelly:xml">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:x="jelly:xml" xmlns:l="/lib/layout">
   <st:documentation>
     <st:attribute name="title" use="required">
       The title for the application bar
@@ -34,12 +34,19 @@ THE SOFTWARE.
     <st:attribute name="subtitle">
       The subtitle for the application bar
     </st:attribute>
+    <st:attribute name="icon" since="TODO">
+      Optional icon for the application bar
+    </st:attribute>
     Generates a row containing the page title and an optional set of controls
   </st:documentation>
 
   <j:if test="${mode=='main-panel' or mode=='side-panel'}">
-    <div class="jenkins-app-bar">
+    <div class="jenkins-app-bar ${attrs.icon != null ? 'jenkins-app-bar--with-icon' :''}">
       <div class="jenkins-app-bar__content">
+        <j:if test="${attrs.icon != null}">
+          <l:icon src="${attrs.icon}" class="jenkins-avatar" />
+        </j:if>
+
         <x:element name="${headingLevel ?: 'h1'}">
           ${title}
           <j:if test="${attrs.subtitle != null}">

src/main/scss/components/_app-bar.scss

@@ -18,6 +18,22 @@
     flex-direction: column;
     min-height: 2.25rem;
     flex-grow: 1;
+    max-width: 1200px;
+    text-overflow: ellipsis;
+
+    // Jobs have their SVGs nested inside of a link
+    & > a > svg,
+    & > svg {
+      width: 2rem !important;
+      height: 2rem !important;
+      margin-left: -0.1875rem;
+    }
+
+    & > img {
+      width: 2.375rem;
+      height: 2.375rem;
+      margin-left: -0.375rem;
+    }
   }
 
   .jenkins-app-bar__controls {
@@ -77,6 +93,16 @@
     }
   }
 
+  // This would ideally use :has instead but HTMLUnit doesn't support it
+  &--with-icon {
+    .jenkins-app-bar__content {
+      align-items: center;
+      justify-content: start;
+      flex-direction: row;
+      gap: 0.875rem;
+    }
+  }
+
   h1,
   h2 {
     margin: 0;
@@ -97,18 +123,6 @@
   gap: 0.875rem;
   max-width: 1200px;
   text-overflow: ellipsis;
-
-  svg {
-    width: 2rem !important;
-    height: 2rem !important;
-    margin-left: -0.1875rem;
-  }
-
-  img {
-    width: 2.375rem;
-    height: 2.375rem;
-    margin-left: -0.375rem;
-  }
 }
 
 $bottom-app-bar-padding: 0.875rem;