Added separate user icon from logout icon

Fixes #1305 and improves navigation.

airsonic-main/src/main/webapp/WEB-INF/jsp/top.jsp

@@ -132,27 +132,33 @@
         </td>
 
         <td style="padding-left:15pt;padding-right:5pt;vertical-align: middle;width: 100%;text-align: center">
-            <a href="<c:url value="/logout"/>" target="_top">
-                <c:choose>
-                    <c:when test="${model.showAvatar}">
-                        <sub:url value="avatar.view" var="avatarUrl">
-                            <sub:param name="username" value="${model.user.username}"/>
-                        </sub:url>
-                        <div style="padding-bottom: 4px">
-                            <c:if test="${model.user.settingsRole}"><a href="personalSettings.view" target="main"></c:if>
-                            <img src="${avatarUrl}" alt="" width="30" height="30">
-                            <c:if test="${model.user.settingsRole}"></a></c:if>
-                        </div>
-                    </c:when>
-                    <c:otherwise>
-                        <img src="<spring:theme code="logoutImage"/>" alt="logout" height="24">
-                    </c:otherwise>
-                </c:choose>
+            <c:if test="${model.user.settingsRole}"><a href="personalSettings.view" target="main"></c:if>
+            <c:choose>
+                <c:when test="${model.showAvatar}">
+                    <sub:url value="avatar.view" var="avatarUrl">
+                        <sub:param name="username" value="${model.user.username}"/>
+                    </sub:url>
+                    <div style="padding-bottom: 4px">
+                        <img src="${avatarUrl}" alt="User" width="30" height="30">
+                    </div>
+                </c:when>
+                <c:otherwise>
+                    <img src="<spring:theme code="userImage"/>" alt="User" height="24">
+                </c:otherwise>
+            </c:choose>
 
+            <div class="detail">
+                <c:out value="${model.user.username}" escapeXml="true"/>
+            </div>
+            <c:if test="${model.user.settingsRole}"></a></c:if>
+        </td>
+
+        <td style="padding-left:15pt;padding-right:5pt;vertical-align: right;width: 100%;text-align: center">
+            <a href="<c:url value="/logout"/>" target="_top">
+                <img src="<spring:theme code="logoutImage"/>" alt="logout" height="24">
                 <div class="detail">
-                    <fmt:message key="top.logout" var="logout"><br/>
-                        <fmt:param value="${model.user.username}"/></fmt:message>
-                    ${fn:escapeXml(logout)}
+                    <fmt:message key="top.logout" var="logout"></fmt:message>
+                    <c:out value="${logout}"/>
                 </div>
             </a>
         </td>

airsonic-main/src/main/webapp/icons/default_dark/user.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#ffffff"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+  <circle cx="12" cy="7" r="4" />
+</svg>

airsonic-main/src/main/webapp/icons/default_light/user.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#696969"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+  <circle cx="12" cy="7" r="4" />
+</svg>