render display_name (#426)

app/UI/dm.tsx

@@ -8,7 +8,7 @@ import { ChatMessagesGetter, UI_Interaction_Event, UserBlocker } from "./app_upd
 import { IconButtonClass } from "./components/tw.ts";
 
 import { LeftArrowIcon } from "./icons/left-arrow-icon.tsx";
-import { MessagePanel, MessagePanel_V0 } from "./message-panel.tsx";
+import { MessagePanel_V0 } from "./message-panel.tsx";
 import { ProfileGetter } from "./search.tsx";
 
 import {
@@ -18,6 +18,7 @@ import {
     PinListGetter,
 } from "./conversation-list.tsx";
 import { func_GetEventByID } from "./message-list.tsx";
+import { ProfileCard } from "./profile-card.tsx";
 
 export type DM_Model = {
     currentConversation: PublicKey | undefined;
@@ -101,6 +102,12 @@ function TopBar(props: {
     profileGetter: ProfileGetter;
     buttons: VNode[];
 }) {
+    const conversation_profile = props.profileGetter.getProfilesByPublicKey(
+        props.currentConversation,
+    );
+    let conversation_name = conversation_profile?.profile.name ||
+        conversation_profile?.profile.display_name ||
+        props.currentConversation.bech32();
     return (
         <div
             class={`h-14 border-l border-b border-[#36393F] flex
@@ -138,11 +145,7 @@ function TopBar(props: {
                         });
                     }}
                 >
-                    {props.profileGetter.getProfilesByPublicKey(
-                        props.currentConversation,
-                    )
-                        ?.profile.name ||
-                        props.currentConversation.bech32()}
+                    {conversation_name}
                 </span>
             </div>
             <div>

app/UI/message-panel.tsx

@@ -137,17 +137,19 @@ export function NameAndTime(
     myPublicKey: PublicKey,
     created_at: Date,
 ) {
-    let show = author.bech32();
+    let show_name;
     if (author.hex == myPublicKey.hex) {
-        show = "Me";
-    } else if (author_profile?.name) {
-        show = author_profile.name;
+        show_name = "Me";
+    } else if (author_profile) {
+        show_name = author_profile.name || author_profile.display_name || author.bech32();
+    } else {
+        show_name = author.bech32();
     }
 
     return (
         <p class={`overflow-hidden flex`}>
             <p class={`text-[#FFFFFF] text-[0.9rem] truncate mobile:hidden`}>
-                {show}
+                {show_name}
             </p>
             <p class={`text-[#A3A6AA] ml-4 text-[0.8rem] whitespace-nowrap mobile:ml-0 mobile:text-xs`}>
                 {created_at.toLocaleString()}

app/UI/search.tsx

@@ -16,7 +16,6 @@ import { SearchUpdate } from "./search_model.ts";
 import { Profile_Nostr_Event } from "../nostr.ts";
 import { PublicKey } from "../../libs/nostr.ts/key.ts";
 import { robohash } from "./relay-detail.tsx";
-import { BackgroundColor_MessagePanel } from "./style/colors.ts";
 
 export type SearchResultChannel = Channel<SearchResult[]>;
 
@@ -78,7 +77,6 @@ export class Search extends Component<Props, State> {
     }
 
     search = (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => {
-        const t = Date.now();
         this.setState({
             offset: 0,
         });
@@ -95,7 +93,6 @@ export class Search extends Component<Props, State> {
                 searchResults: profile_event ? [profile_event] : pubkey,
             });
         }
-        console.log("time", Date.now() - t);
     };
 
     onSelect = (profile: Profile_Nostr_Event | PublicKey) => () => {
@@ -196,7 +193,7 @@ export class Search extends Component<Props, State> {
                     picture={result.profile.picture || robohash(result.pubkey)}
                 />
                 <p class={this.styles.result.item.text}>
-                    {result.profile.name}
+                    {result.profile.name || result.profile.display_name}
                 </p>
             </li>
         );

app/UI/user-detail.tsx

@@ -31,6 +31,8 @@ type UserDetailProps = {
 };
 
 export function UserDetail(props: UserDetailProps) {
+    const name = props.targetUserProfile.name || props.targetUserProfile.display_name ||
+        props.pubkey.bech32();
     return (
         <div class={`px-2 py-3 text-[#7A818C]`}>
             <Avatar
@@ -38,7 +40,7 @@ export function UserDetail(props: UserDetailProps) {
                 picture={props.targetUserProfile.picture || robohash(props.pubkey.hex)}
             />
             <h1 class={`text-[#F3F4EA] truncate text-[1.4rem] my-4 max-w-full text-center`}>
-                {props.targetUserProfile.name || props.pubkey.bech32()}
+                {name}
             </h1>
             <div class={`flex items-start overflow-hidden w-full group`}>
                 <KeyIcon

app/database.ts

@@ -165,8 +165,10 @@ export class Database_View implements ProfileSetter, ProfileGetter, EventRemover
         const result = [];
         for (const event of this.profiles.values()) {
             if (
-                event.profile.name &&
-                event.profile.name?.toLocaleLowerCase().indexOf(name.toLowerCase()) != -1
+                (event.profile.name &&
+                    event.profile.name?.toLocaleLowerCase().indexOf(name.toLowerCase()) != -1) ||
+                (event.profile.display_name &&
+                    event.profile.display_name?.toLocaleLowerCase().indexOf(name.toLocaleLowerCase()) != -1)
             ) {
                 result.push(event);
             }
@@ -175,7 +177,8 @@ export class Database_View implements ProfileSetter, ProfileGetter, EventRemover
     }
 
     getProfilesByPublicKey(pubkey: PublicKey): Profile_Nostr_Event | undefined {
-        return this.profiles.get(pubkey.hex);
+        const profile = this.profiles.get(pubkey.hex);
+        return profile;
     }
 
     getUniqueProfileCount(): number {

app/features/profile.ts

@@ -19,6 +19,7 @@ export async function saveProfile(
 // aka user profile
 export interface ProfileData {
     name?: string;
+    display_name?: string;
     picture?: string;
     about?: string;
     website?: string;