better user list

app/javascript/bundles/Main/components/ListItem.tsx

@@ -10,6 +10,7 @@ const COMMON_LIST_ELEM_CLASSES = `
 
 interface PropTypes {
   value: string;
+  subvalue?: string;
   subtext?: string;
   thumb?: string;
   isLast: boolean;
@@ -21,6 +22,7 @@ interface PropTypes {
 
 export default function ListItem({
   value,
+  subvalue,
   thumb,
   isLast,
   selected,
@@ -54,7 +56,7 @@ export default function ListItem({
       {style === 'error' && (
         <Icon type="exclamation-circle" className={iconClassName.join(' ')} />
       )}
-      <div className={textClassName.join(' ')}>
+      <div className={`${textClassName.join(' ')}`}>
         <div className="inline-block w-8">
           {thumb && (
             <img
@@ -64,7 +66,28 @@ export default function ListItem({
             />
           )}
         </div>
-        <div className="inline-block flex-grow pl-1">{value}</div>
+        <div className="flex flex-grow flex-col pl-1">
+          <span
+            className={['text-lg font-light', subvalue && 'leading-tight']
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {value}
+          </span>
+          {subvalue && (
+            <span
+              className={[
+                'text-sm font-normal group-hover:text-slate-200',
+                !selected && 'text-slate-500',
+                selected && 'text-slate-200',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {subvalue}
+            </span>
+          )}
+        </div>
         {subtext && (
           <div
             className={[

app/javascript/bundles/Main/components/UserSearchBar.tsx

@@ -33,6 +33,7 @@ interface PropTypes {
 interface User {
   id: number;
   name: string;
+  name_secondary?: string;
   thumb?: string;
   show_path: string;
   num_posts?: number;
@@ -198,13 +199,24 @@ export default function UserSearchBar({ isServerRendered }: PropTypes) {
         ) : null}
         {visibility.items
           ? state.userList.map(
-              ({ name, thumb, show_path, num_posts, domain_icon }, idx) => (
+              (
+                {
+                  name,
+                  name_secondary,
+                  thumb,
+                  show_path,
+                  num_posts,
+                  domain_icon,
+                },
+                idx,
+              ) => (
                 <ListItem
                   key={'name-' + name}
                   isLast={idx == state.userList.length - 1}
                   selected={idx == state.selectedIdx}
                   style="item"
                   value={name}
+                  subvalue={name_secondary}
                   thumb={thumb}
                   href={show_path}
                   subtext={num_posts ? `${num_posts.toString()} posts` : ''}

app/models/domain/user/fa_user.rb

@@ -55,6 +55,24 @@ class Domain::User::FaUser < Domain::User
     ["fa", :url_name]
   end
 
+  sig { returns(String) }
+  def sigil_for_view
+    case account_status
+    when "active"
+      "~"
+    when "suspended"
+      "!"
+    when "banned"
+      "-"
+    when "deceased"
+      "∞"
+    when "admin"
+      "@"
+    else
+      "~"
+    end
+  end
+
   sig { void }
   def thing
     Domain::User::FaUser.where(url_name: "test")

app/views/domain/users/bsky/_name.html.erb

@@ -0,0 +1,8 @@
+<div class="flex items-center gap-2">
+  <span class="text-slate-900 text-lg font-bold">
+    <%= user.display_name %>
+  </span>
+  <span class="text-sm font-normal text-slate-500" title="<%= user.did %>">
+    @<%= user.handle %>
+  </span>
+</div>

app/views/domain/users/default/_name.html.erb

@@ -0,0 +1,3 @@
+<div class="text-lg font-bold text-slate-900">
+  <%= user.name_for_view %>
+</div>

app/views/domain/users/default/_name_icon_and_status.html.erb

@@ -5,36 +5,34 @@
       class="h-12 w-12 rounded-lg"
     />
     <div>
-      <div class="text-lg font-bold text-slate-900">
-        <%= user.name_for_view %>
-      </div>
+      <%= render_for_model user, "name", as: :user %>
       <div class="flex gap-6 text-sm text-slate-400">
-        <% if policy(user).view_page_scanned_at_timestamps? %>
-          <div class="flex flex-col">
-            <span class="font-medium italic text-slate-500">Status</span>
-            <span class=""><%= user.account_status_for_view %></span>
-          </div>
-        <% end %>
-        <%= render_for_model user, "overview_details", as: :user %>
+      <% if policy(user).view_page_scanned_at_timestamps? %>
         <div class="flex flex-col">
-          <span class="font-medium italic text-slate-500">Registered</span>
-          <span>
-            <%= domain_user_registered_at_string_for_view(user) %>
-          </span>
+          <span class="font-medium italic text-slate-500">Status</span>
+          <span class=""><%= user.account_status_for_view %></span>
         </div>
+      <% end %>
+      <%= render_for_model user, "overview_details", as: :user %>
+      <div class="flex flex-col">
+        <span class="font-medium italic text-slate-500">Registered</span>
+        <span>
+          <%= domain_user_registered_at_string_for_view(user) %>
+        </span>
       </div>
     </div>
   </div>
-  <a
+</div>
+<a
     href="<%= user.external_url_for_view %>"
     target="_blank"
     rel="noopener noreferrer"
     class="blue-link flex items-center gap-2"
   >
-    <img src="<%= site_icon_path_for_user(user) %>" class="h-5 w-5" />
-    <span class="font-bold flex items-center gap-1">
-      <span><%= user.site_name_for_view %></span>
-      <%= render "shared/icons/external_link" %>
-    </span>
-  </a>
+  <img src="<%= site_icon_path_for_user(user) %>" class="h-5 w-5" />
+  <span class="font-bold flex items-center gap-1">
+    <span><%= user.site_name_for_view %></span>
+    <%= render "shared/icons/external_link" %>
+  </span>
+</a>
 </section>

app/views/domain/users/search_by_name.json.jbuilder

@@ -1,7 +1,15 @@
 json.users @user_search_names do |user_search_name|
   user = user_search_name.user
   json.id user.id
-  json.name user.name_for_view
+  if user.is_a?(Domain::User::BlueskyUser) && (display_name = user.display_name)
+    json.name display_name
+    json.name_secondary "@#{user.handle}"
+  elsif user.is_a?(Domain::User::FaUser)
+    json.name user.name_for_view
+    json.name_secondary "#{user.sigil_for_view}#{user.url_name}"
+  else
+    json.name user.name_for_view
+  end
   json.show_path domain_user_path(user)
   json.thumb domain_user_avatar_img_src_path(user.avatar, thumb: "64-avatar")
   json.domain_icon site_icon_path_for_user(user)