feat: profile update

src/components/Config.tsx

@@ -42,7 +42,7 @@ const RelayConfig = () => {
       </ul>
       <form class="flex gap-2" onSubmit={handleClickAddRelay}>
         <input
-          class="flex-1"
+          class="flex-1 rounded-md focus:border-rose-100 focus:ring-rose-300"
           type="text"
           name="relayUrl"
           value={relayUrlInput()}
@@ -182,7 +182,7 @@ const MuteConfig = () => {
         </ul>
         <form class="flex gap-2" onSubmit={handleClickAddKeyword}>
           <input
-            class="flex-1"
+            class="flex-1 rounded-md focus:border-rose-100 focus:ring-rose-300"
             type="text"
             name="keyword"
             value={keywordInput()}

src/components/ContextMenu.tsx

@@ -2,6 +2,7 @@ import { createSignal, onCleanup, createEffect, For, type Component, type JSX }
 
 export type MenuItem = {
   content: () => JSX.Element;
+  when?: () => boolean;
   onSelect?: () => void;
 };
 
@@ -10,13 +11,6 @@ export type ContextMenuProps = {
   children: JSX.Element;
 };
 
-export type MenuDisplayProps = {
-  menuRef: (elem: HTMLUListElement) => void;
-  menu: MenuItem[];
-  isOpen: boolean;
-  onClose: () => void;
-};
-
 export type MenuItemDisplayProps = {
   item: MenuItem;
   onClose: () => void;
@@ -30,27 +24,13 @@ const MenuItemDisplay: Component<MenuItemDisplayProps> = (props) => {
 
   return (
     <li class="border-b hover:bg-stone-200">
-      <button class="px-4 py-1" onClick={handleClick}>
+      <button class="w-full px-4 py-1 text-start" onClick={handleClick}>
         {props.item.content()}
       </button>
     </li>
   );
 };
 
-const MenuDisplay: Component<MenuDisplayProps> = (props) => {
-  return (
-    <ul
-      ref={props.menuRef}
-      class="absolute z-20 min-w-[48px] rounded border bg-white shadow-md"
-      classList={{ hidden: !props.isOpen, block: props.isOpen }}
-    >
-      <For each={props.menu}>
-        {(item) => <MenuItemDisplay item={item} onClose={props.onClose} />}
-      </For>
-    </ul>
-  );
-};
-
 const ContextMenu: Component<ContextMenuProps> = (props) => {
   let menuRef: HTMLUListElement | undefined;
 
@@ -69,15 +49,18 @@ const ContextMenu: Component<ContextMenuProps> = (props) => {
     document.removeEventListener('mousedown', handleClickOutside);
   };
 
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
   const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (ev) => {
     if (menuRef == null) return;
 
     const buttonRect = ev.currentTarget.getBoundingClientRect();
-    const menuRect = menuRef.getBoundingClientRect();
+    // const menuRect = menuRef.getBoundingClientRect();
     menuRef.style.left = `${buttonRect.left - buttonRect.width}px`;
     menuRef.style.top = `${buttonRect.top + buttonRect.height}px`;
 
-    setIsOpen(true);
+    open();
   };
 
   createEffect(() => {
@@ -93,14 +76,15 @@ const ContextMenu: Component<ContextMenuProps> = (props) => {
   return (
     <div>
       <button onClick={handleClick}>{props.children}</button>
-      <MenuDisplay
-        menuRef={(e) => {
-          menuRef = e;
-        }}
-        menu={props.menu}
-        isOpen={isOpen()}
-        onClose={() => setIsOpen(false)}
-      />
+      <ul
+        ref={menuRef}
+        class="absolute z-20 min-w-[48px] rounded border bg-white shadow-md"
+        classList={{ hidden: !isOpen(), block: isOpen() }}
+      >
+        <For each={props.menu.filter((e) => e.when == null || e.when())}>
+          {(item: MenuItem) => <MenuItemDisplay item={item} onClose={close} />}
+        </For>
+      </ul>
     </div>
   );
 };

src/components/NotePostForm.tsx

@@ -307,7 +307,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             props.textAreaRef?.(el);
           }}
           name="text"
-          class="min-h-[40px] rounded border-none"
+          class="min-h-[40px] rounded-md border-none focus:ring-rose-300"
           rows={4}
           placeholder={placeholder(mode())}
           onInput={handleInput}

src/components/ProfileDisplay.tsx

@@ -14,6 +14,7 @@ import Timeline from '@/components/Timeline';
 import Copy from '@/components/utils/Copy';
 import SafeLink from '@/components/utils/SafeLink';
 import useConfig from '@/core/useConfig';
+import useModalState from '@/hooks/useModalState';
 import useCommands from '@/nostr/useCommands';
 import useFollowers from '@/nostr/useFollowers';
 import useFollowings from '@/nostr/useFollowings';
@@ -45,6 +46,7 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
   const { config, addMutedPubkey, removeMutedPubkey, isPubkeyMuted } = useConfig();
   const commands = useCommands();
   const myPubkey = usePubkey();
+  const { showProfileEdit } = useModalState();
 
   const npub = createMemo(() => npubEncodeFallback(props.pubkey));
 
@@ -162,6 +164,17 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
         }
       },
     },
+    {
+      when: () => props.pubkey === myPubkey(),
+      content: () => (!following() ? '自分をフォロー' : '自分をフォロー解除'),
+      onSelect: () => {
+        if (!following()) {
+          follow();
+        } else {
+          unfollow();
+        }
+      },
+    },
   ];
 
   const { events } = useSubscription(() => ({
@@ -215,6 +228,15 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
               <div class="flex shrink-0 flex-col items-center gap-1">
                 <div class="flex flex-row justify-start gap-1">
                   <Switch>
+                    <Match when={props.pubkey === myPubkey()}>
+                      <button
+                        class="rounded-full border border-primary px-4 py-2
+                        text-center font-bold text-primary hover:bg-primary hover:text-white sm:w-20"
+                        onClick={() => showProfileEdit()}
+                      >
+                        編集
+                      </button>
+                    </Match>
                     <Match when={myFollowingQuery.isLoading || myFollowingQuery.isFetching}>
                       <span class="rounded-full border border-primary px-4 py-2 text-primary sm:text-base">
                         読み込み中
@@ -225,13 +247,6 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
                         更新中
                       </span>
                     </Match>
-                    {/*
-                    <Match when={props.pubkey === myPubkey()}>
-                      <span class="rounded-full border border-primary px-4 py-2 text-primary">
-                        あなたです
-                      </span>
-                    </Match>
-                    */}
                     <Match when={following()}>
                       <button
                         class="rounded-full border border-primary bg-primary px-4 py-2

src/components/ProfileEdit.tsx

@@ -0,0 +1,271 @@
+import { createSignal, type Component, batch, onMount, For, JSX, Show } from 'solid-js';
+
+import { createMutation } from '@tanstack/solid-query';
+import ArrowLeft from 'heroicons/24/outline/arrow-left.svg';
+import omit from 'lodash/omit';
+
+import Modal from '@/components/Modal';
+import useConfig from '@/core/useConfig';
+import { Profile, useProfile } from '@/nostr/useBatchedEvents';
+import useCommands from '@/nostr/useCommands';
+import usePubkey from '@/nostr/usePubkey';
+import ensureNonNull from '@/utils/ensureNonNull';
+import timeout from '@/utils/timeout';
+
+export type ProfileEditProps = {
+  onClose: () => void;
+};
+
+const ProfileEdit: Component<ProfileEditProps> = (props) => {
+  const pubkey = usePubkey();
+  const { config } = useConfig();
+  const { profile, invalidateProfile, query } = useProfile(() =>
+    ensureNonNull([pubkey()] as const)(([pubkeyNonNull]) => ({
+      pubkey: pubkeyNonNull,
+    })),
+  );
+  const { updateProfile } = useCommands();
+
+  const [picture, setPicture] = createSignal('');
+  const [banner, setBanner] = createSignal('');
+  const [name, setName] = createSignal('');
+  const [displayName, setDisplayName] = createSignal('');
+  const [about, setAbout] = createSignal('');
+  const [website, setWebsite] = createSignal('');
+  const [nip05, setNIP05] = createSignal('');
+
+  const mutation = createMutation({
+    mutationKey: ['updateProfile'],
+    mutationFn: (...params: Parameters<typeof updateProfile>) =>
+      updateProfile(...params).then((promeses) => Promise.allSettled(promeses.map(timeout(10000)))),
+    onSuccess: (results) => {
+      const succeeded = results.filter((res) => res.status === 'fulfilled').length;
+      const failed = results.length - succeeded;
+      if (succeeded === results.length) {
+        window.alert('更新しました');
+      } else if (succeeded > 0) {
+        window.alert(`${failed}個のリレーで更新に失敗しました`);
+      } else {
+        window.alert('すべてのリレーで更新に失敗しました');
+      }
+      invalidateProfile()
+        .then(() => query.refetch())
+        .catch((err) => console.error(err));
+
+      props.onClose();
+    },
+    onError: (err) => {
+      console.error('failed to delete', err);
+    },
+  });
+
+  const disabled = () => query.isLoading || query.isError || mutation.isLoading;
+  const otherProperties = () =>
+    omit(profile(), ['picture', 'banner', 'name', 'display_name', 'about', 'website', 'nip05']);
+
+  const handleSubmit: JSX.EventHandler<HTMLFormElement, Event> = (ev) => {
+    ev.preventDefault();
+
+    const p = pubkey();
+    if (p == null) return;
+
+    const newProfile: Profile = {
+      picture: picture(),
+      banner: banner(),
+      name: name(),
+      display_name: displayName(),
+      about: about(),
+      website: website(),
+      nip05: nip05(),
+    };
+
+    mutation.mutate({
+      relayUrls: config().relayUrls,
+      pubkey: p,
+      profile: newProfile,
+      otherProperties: otherProperties(),
+    });
+  };
+
+  const ignoreEnter = (ev: KeyboardEvent) => ev.key === 'Enter' && ev.preventDefault();
+
+  onMount(() => {
+    const currentProfile = profile();
+    if (currentProfile == null) return;
+
+    query.refetch().catch((err) => console.error(err));
+
+    batch(() => {
+      setPicture((current) => currentProfile.picture ?? current);
+      setBanner((current) => currentProfile.banner ?? current);
+      setName((current) => currentProfile.name ?? current);
+      setDisplayName((current) => currentProfile.display_name ?? current);
+      setAbout((current) => currentProfile.about ?? current);
+      setWebsite((current) => currentProfile.website ?? current);
+      setNIP05((current) => currentProfile.nip05 ?? current);
+    });
+  });
+
+  return (
+    <Modal onClose={props.onClose}>
+      <div class="h-screen w-[640px] max-w-full">
+        <button
+          class="w-full pt-1 text-start text-stone-800"
+          aria-label="Close"
+          onClick={() => props.onClose?.()}
+        >
+          <span class="inline-block h-8 w-8">
+            <ArrowLeft />
+          </span>
+        </button>
+        <div class="flex h-full flex-col overflow-y-scroll rounded-xl border bg-white pb-16 text-stone-700 shadow-lg">
+          <div>
+            <Show when={banner().length > 0} fallback={<div class="h-12 shrink-0" />} keyed>
+              <div class="h-40 w-full shrink-0 sm:h-52">
+                <img src={banner()} alt="header" class="h-full w-full object-cover" />
+              </div>
+            </Show>
+            <div class="mt-[-64px] ml-4 h-28 w-28 rounded-lg shadow-md">
+              <Show when={picture().length > 0}>
+                <img
+                  src={picture()}
+                  alt="user icon"
+                  class="h-full w-full rounded-lg object-cover"
+                />
+              </Show>
+            </div>
+          </div>
+          <div>
+            <form class="flex flex-col gap-4 p-4" onSubmit={handleSubmit}>
+              <div class="flex flex-col items-start gap-1">
+                <label class="font-bold" for="picture">
+                  アイコン
+                </label>
+                <input
+                  class="w-full rounded-md focus:border-rose-100 focus:ring-rose-300"
+                  type="text"
+                  id="picture"
+                  name="picture"
+                  value={picture()}
+                  placeholder="https://....../picture.png"
+                  disabled={disabled()}
+                  onBlur={(ev) => setPicture(ev.currentTarget.value)}
+                  onKeyDown={ignoreEnter}
+                />
+              </div>
+              <div class="flex flex-col items-start gap-1">
+                <label class="font-bold" for="picture">
+                  バナー
+                </label>
+                <input
+                  class="w-full rounded-md focus:border-rose-100 focus:ring-rose-300"
+                  type="text"
+                  id="banner"
+                  name="banner"
+                  value={banner()}
+                  placeholder="https://....../banner.png"
+                  disabled={disabled()}
+                  onBlur={(ev) => setBanner(ev.currentTarget.value)}
+                  onKeyDown={ignoreEnter}
+                />
+              </div>
+              <div class="flex flex-col items-start gap-1">
+                <label class="font-bold" for="name">
+                  ユーザ名
+                </label>
+                <div class="flex w-full items-center gap-2">
+                  <span>@</span>
+                  <input
+                    class="flex-1 rounded-md focus:border-rose-100 focus:ring-rose-300"
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={name()}
+                    pattern="^[a-zA-Z_][a-zA-Z0-9_]+$"
+                    maxlength="32"
+                    required
+                    disabled={disabled()}
+                    onChange={(ev) => setName(ev.currentTarget.value)}
+                    onKeyDown={ignoreEnter}
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col items-start gap-1">
+                <label class="font-bold" for="name">
+                  名前
+                </label>
+                <input
+                  class="w-full rounded-md focus:border-rose-100 focus:ring-rose-300"
+                  type="text"
+                  name="displayName"
+                  value={displayName()}
+                  maxlength="32"
+                  disabled={disabled()}
+                  onChange={(ev) => setDisplayName(ev.currentTarget.value)}
+                  onKeyDown={ignoreEnter}
+                />
+              </div>
+              <div class="flex flex-col items-start gap-1">
+                <label class="font-bold" for="name">
+                  自己紹介
+                </label>
+                <textarea
+                  class="w-full rounded-md"
+                  name="about"
+                  value={about()}
+                  rows="5"
+                  onChange={(ev) => setAbout(ev.currentTarget.value)}
+                  disabled={disabled()}
+                />
+              </div>
+              <div class="flex flex-col items-start gap-1">
+                <label class="font-bold" for="name">
+                  ウェブサイト
+                </label>
+                <input
+                  class="w-full rounded-md focus:border-rose-100 focus:ring-rose-300"
+                  type="text"
+                  name="website"
+                  value={website()}
+                  placeholder="https://....../"
+                  disabled={disabled()}
+                  onChange={(ev) => setWebsite(ev.currentTarget.value)}
+                  onKeyDown={ignoreEnter}
+                />
+              </div>
+              <div>
+                <span class="font-bold">その他の項目</span>
+                <div>
+                  <For each={Object.entries(otherProperties())}>
+                    {([key, value]) => (
+                      <div class="flex flex-col items-start">
+                        <span class="text-sm font-bold">{key}</span>
+                        <span class="text-sm">{value}</span>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <button
+                  type="submit"
+                  class="rounded bg-rose-300 p-2 font-bold text-white hover:bg-rose-400"
+                >
+                  保存
+                </button>
+                <button
+                  type="button"
+                  class="rounded border border-rose-300 p-2 font-bold text-rose-300 hover:border-rose-400 hover:text-rose-400"
+                  onClick={() => props.onClose()}
+                >
+                  キャンセル
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default ProfileEdit;

src/components/textNote/TextNoteDisplay.tsx

@@ -101,10 +101,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
   });
 
   const deleteMutation = createMutation({
-    mutationKey: ['delete', event().id],
-    mutationFn: (...params: Parameters<typeof commands.delete>) =>
+    mutationKey: ['deleteEvent', event().id],
+    mutationFn: (...params: Parameters<typeof commands.deleteEvent>) =>
       commands
-        .delete(...params)
+        .deleteEvent(...params)
         .then((promeses) => Promise.allSettled(promeses.map(timeout(10000)))),
     onSuccess: (results) => {
       // TODO タイムラインから削除する
@@ -113,7 +113,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
       if (succeeded === results.length) {
         window.alert('削除しました（画面の反映にはリロード）');
       } else if (succeeded > 0) {
-        window.alert('一部のリレーで削除に失敗しました');
+        window.alert(`${failed}個のリレーで削除に失敗しました`);
       } else {
         window.alert('すべてのリレーで削除に失敗しました');
       }
@@ -123,29 +123,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
     },
   });
 
-  const myPostMenu = (): MenuItem[] => {
-    if (event().pubkey !== pubkey()) return [];
-
-    return [
-      {
-        content: () => '削除',
-        onSelect: () => {
-          const p = pubkey();
-          if (p == null) return;
-
-          if (!window.confirm('本当に削除しますか？')) return;
-          deleteMutation.mutate({
-            relayUrls: config().relayUrls,
-            pubkey: p,
-            eventId: event().id,
-          });
-        },
-      },
-    ];
-  };
-
   const menu: MenuItem[] = [
-    ...myPostMenu(),
     {
       content: () => 'IDをコピー',
       onSelect: () => {
@@ -160,6 +138,21 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
           .catch((err) => window.alert(err));
       },
     },
+    {
+      when: () => event().pubkey === pubkey(),
+      content: () => <span class="text-red-500">削除</span>,
+      onSelect: () => {
+        const p = pubkey();
+        if (p == null) return;
+
+        if (!window.confirm('本当に削除しますか？')) return;
+        deleteMutation.mutate({
+          relayUrls: config().relayUrls,
+          pubkey: p,
+          eventId: event().id,
+        });
+      },
+    },
   ];
 
   const isReactedByMe = createMemo(() => {