Properly display names, usernames and badges

src/formatters.nim

@@ -17,7 +17,7 @@ proc shortLink*(text: string; length=28): string =
     result = result[0 ..< length] & "…"
 
 proc toLink*(url, text: string; class="timeline-link"): string =
-  htmlgen.a(text, class=class, href=url)
+  a(text, class=class, href=url)
 
 proc reUrlToLink*(m: RegexMatch; s: string): string =
   let url = s[m.group(0)[0]]
@@ -66,20 +66,16 @@ proc getUserpic*(userpic: string; style=""): string =
 proc getUserpic*(profile: Profile; style=""): string =
   getUserPic(profile.userpic, style)
 
-proc formatName*(profile: Profile): string =
-  result = xmltree.escape(profile.fullname)
-  if profile.verified:
-    result &= htmlgen.span("✔", class="verified-icon")
-  elif profile.protected:
-    result &= " 🔒"
+proc linkUser*(profile: Profile; class=""): string =
+  let
+    username = "username" in class
+    href = &"/{profile.username}"
+    text = if username: "@" & profile.username
+           else: xmltree.escape(profile.fullname)
 
-proc linkUser*(profile: Profile; h: string; username=true; class=""): string =
-  let text =
-    if username: "@" & profile.username
-    else: formatName(profile)
+  result = a(text, href = href, class = class, title = text)
 
-  if h.len == 0:
-    return htmlgen.a(text, href = &"/{profile.username}", class=class)
-
-  let element = &"<{h} class=\"{class}\">{text}</{h}>"
-  htmlgen.a(element, href = &"/{profile.username}")
+  if not username and profile.verified:
+    result &= span("✔", class="verified-icon", title="Verified account")
+  if not username and profile.protected:
+    result &= span("🔒", class="protected-icon", title="Protected account")

src/views/tweet.nim

@@ -16,9 +16,9 @@
 <div class="media-heading">
   <div class="heading-name-row">
     <img class="avatar" src=${tweet.profile.getUserpic("_bigger").getSigUrl("pic")}>
-    <div class="name-and-account-name">
-      ${linkUser(tweet.profile, "h4", class="username", username=false)}
-      ${linkUser(tweet.profile, "", class="account-name")}
+    <div class="fullname-and-username">
+      ${linkUser(tweet.profile, class="fullname")}
+      ${linkUser(tweet.profile, class="username")}
     </div>
     <span class="heading-right">
       <a href="${tweet.link}" class="timeago faint-link">
@@ -46,9 +46,9 @@
       </div>
     </div>
     #end if
-    <div class="profile-card-name">
-      ${linkUser(quote.profile, "b", class="username", username=false)}
-      ${linkUser(quote.profile, "span", class="account-name")}
+    <div class="fullname-and-username">
+      ${linkUser(quote.profile, class="fullname")}
+      ${linkUser(quote.profile, class="username")}
     </div>
     <div class="quote-text">${linkifyText(xmltree.escape(quote.text))}</div>
   </div>

src/views/user.nim

@@ -12,8 +12,8 @@
   </a>
   <div class="profile-card-tabs">
     <div class="profile-card-tabs-name">
-      ${linkUser(profile, "h1", class="profile-card-name", username=false)}
-      ${linkUser(profile, "h2", class="profile-card-username")}
+      ${linkUser(profile, class="profile-card-fullname")}
+      ${linkUser(profile, class="profile-card-username")}
     </div>
   </div>
   <div class="profile-card-extra">