diff --git a/UI/app.tsx b/UI/app.tsx index 79d5c84..6abc05e 100644 --- a/UI/app.tsx +++ b/UI/app.tsx @@ -502,11 +502,11 @@ export function AppComponent(props: {
- {EditProfile({ - emit: app.eventBus.emit, - myProfile: model.myProfile, - newProfileField: model.newProfileField, - })} +
{dmVNode} diff --git a/UI/app_update.tsx b/UI/app_update.tsx index 3f7aeac..8f82a1e 100644 --- a/UI/app_update.tsx +++ b/UI/app_update.tsx @@ -12,7 +12,6 @@ import { DirectedMessageController, sendDMandImages } from "../features/dm.ts"; import { notify } from "./notification.ts"; import { emitFunc, EventBus } from "../event-bus.ts"; import { ContactUpdate } from "./conversation-list.tsx"; -import { MyProfileUpdate } from "./edit-profile.tsx"; import { EditorEvent, EditorModel, new_DM_EditorModel, SendMessage } from "./editor.tsx"; import { DirectMessagePanelUpdate } from "./message-panel.tsx"; import { NavigationUpdate } from "./nav.tsx"; @@ -46,6 +45,7 @@ import { GroupMessageController } from "../features/gm.ts"; import { ChatMessage } from "./message.ts"; import { InviteUsersToGroup } from "./invite-button.tsx"; import { IS_BETA_VERSION } from "./config.js"; +import { SaveProfile } from "./edit-profile.tsx"; export type UI_Interaction_Event = | SearchUpdate @@ -54,7 +54,7 @@ export type UI_Interaction_Event = | NavigationUpdate | DirectMessagePanelUpdate | BackToContactList - | MyProfileUpdate + | SaveProfile | PinConversation | UnpinConversation | SignInEvent @@ -243,23 +243,14 @@ export async function* UI_Interaction_Update(args: { console.log(editor); } // // - // MyProfile + // Profile // - else if (event.type == "EditMyProfile") { - model.myProfile = Object.assign(model.myProfile || {}, event.profile); - } else if (event.type == "SaveMyProfile") { - InsertNewProfileField(app.model); + else if (event.type == "SaveProfile") { await saveProfile( event.profile, - app.ctx, + event.ctx, pool, ); - } else if (event.type == "EditNewProfileFieldKey") { - model.newProfileField.key = event.key; - } else if (event.type == "EditNewProfileFieldValue") { - model.newProfileField.value = event.value; - } else if (event.type == "InsertNewProfileField") { - InsertNewProfileField(app.model); } // // // Navigation @@ -662,18 +653,6 @@ export async function* Database_Update( } } -function InsertNewProfileField(model: Model) { - if (model.newProfileField.key && model.newProfileField.value) { - model.myProfile = Object.assign(model.myProfile || {}, { - [model.newProfileField.key]: model.newProfileField.value, - }); - model.newProfileField = { - key: "", - value: "", - }; - } -} - export async function handle_SendMessage( event: SendMessage, ctx: NostrAccountContext, diff --git a/UI/conversation-list.tsx b/UI/conversation-list.tsx index ef7f1f1..c26b700 100644 --- a/UI/conversation-list.tsx +++ b/UI/conversation-list.tsx @@ -120,7 +120,7 @@ export class ConversationList extends Component { class={tw`w-full h-10 ${CenterClass} text-sm text-[${PrimaryTextColor}] !hover:bg-transparent hover:font-bold group`} > ; }; -export type InsertNewProfileField = { - type: "InsertNewProfileField"; +type State = { + profile: ProfileData | undefined; + newFieldKeyError: string; }; -export function EditProfile(props: { - emit: emitFunc; - myProfile: ProfileData | undefined; - newProfileField: { - key: string; - value: string; +export class EditProfile extends Component { + styles = { + container: tw`py-4`, + banner: { + container: tw`h-72 w-full rounded-lg mb-20 relative`, + avatar: + tw`w-24 h-24 m-auto absolute top-60 left-1/2 box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`, + }, + avatar: tw`w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`, + field: { + title: tw`text-[${PrimaryTextColor}] mt-8`, + input: tw`${InputClass}`, + hint: { + text: tw`text-sm text-[${HintTextColor}]`, + link: tw`text-[${HintLinkColor}]`, + }, + }, + addButton: + tw`w-full mt-6 p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] bg-[${DividerBackgroundColor}] hover:bg-[${HoverButtonBackgroudColor}] ${CenterClass}`, + submitButton: + tw`w-full p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l`, + divider: tw`${DividerClass}`, + custom: { + title: tw`text-[${PrimaryTextColor}] font-bold text-sm`, + text: tw`text-[${HintTextColor}] text-sm`, + error: tw`text-sm text-[${ErrorColor}]`, + }, }; -}) { - return ( -
- {props.myProfile?.banner - ? ( -
- -
- ) - : ( - - )} -

- Name -

- -

- Picture -

- - - You can upload your images on websites like{" "} - - nostr.build - - -

- About -

- -

- Website -

- -

- Banner -

- - {props.myProfile - ? Object.entries(props.myProfile).map(([key, value]) => { - if (["name", "picture", "about", "website", "banner"].includes(key) || !value) { - return undefined; - } - return ( - -

- {key} -

- - - ); - }) - : undefined} -
-

Custom Fields

- - Create your own custom fields, anything goes! - -

- Field name -

- { - props.emit({ - type: "EditNewProfileFieldKey", - key: e.currentTarget.value, - }); - }} - type="text" - class={tw`${InputClass}`} - /> -

- Field value -

- - -
-
- + +
+ ) + : ( + + ); + + const items = profileItems.map((item) => ( + +

+ {item.key} +

+ + {item.hint} + + )); + + return ( +
+ {banner} + {items} + +
+

Custom Fields

+ + Create your own custom fields, anything goes! + + +

+ Field name +

+ + {this.state.newFieldKeyError} + +

+ Field value +

+ + + + +
+ +
-
- ); + ); + } } diff --git a/UI/profile-card.tsx b/UI/profile-card.tsx index ce16bf7..fd084e7 100644 --- a/UI/profile-card.tsx +++ b/UI/profile-card.tsx @@ -22,7 +22,7 @@ export function ProfileCard(props: { profile: { container: tw`flex`, avatar: tw`w-10 h-10`, - name: tw`text-[1.2rem] font-blod leading-10 truncate ml-2`, + name: tw`text-[1.2rem] font-bold leading-10 truncate ml-2`, }, divider: tw`${DividerClass} my-[0.5rem]`, about: tw`text-[0.8rem]`,