update

src/batchClient.ts

@@ -0,0 +1,211 @@
+/**
+ * This file is licensed under MIT license, not AGPL.
+ *
+ * Copyright (c) 2023 Syusui Moyatani
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { matchFilter, type Filter, type Event as NostrEvent, type SimplePool } from 'nostr-tools';
+
+export type BatchExecutorConstructor<Task> = {
+  executor: (reqs: Task[]) => void;
+  interval: number;
+  size: number;
+};
+
+let incrementalId = 0;
+
+const nextId = (): number => {
+  const currentId = incrementalId;
+  incrementalId += 1;
+  return currentId;
+};
+
+export class ObservableTask<BatchRequest, BatchResponse> {
+  id: number;
+
+  req: BatchRequest;
+
+  res: BatchResponse | undefined;
+
+  isCompleted = false;
+
+  #updateListeners: ((res: BatchResponse) => void)[] = [];
+
+  #completeListeners: (() => void)[] = [];
+
+  #promise: Promise<BatchResponse> | undefined;
+
+  constructor(req: BatchRequest) {
+    this.id = nextId();
+    this.req = req;
+  }
+
+  #executeUpdateListeners() {
+    const { res } = this;
+    if (res != null) {
+      this.#updateListeners.forEach((listener) => {
+        listener(res);
+      });
+    }
+  }
+
+  update(res: BatchResponse) {
+    this.res = res;
+    this.#executeUpdateListeners();
+  }
+
+  updateWith(f: (current: BatchResponse | undefined) => BatchResponse) {
+    this.res = f(this.res);
+    this.#executeUpdateListeners();
+  }
+
+  complete() {
+    this.isCompleted = true;
+    this.#completeListeners.forEach((listener) => {
+      listener();
+    });
+  }
+
+  onUpdate(f: (res: BatchResponse) => void) {
+    this.#updateListeners.push(f);
+  }
+
+  onComplete(f: () => void) {
+    this.#completeListeners.push(f);
+  }
+
+  toPromise(): Promise<BatchResponse> {
+    if (this.#promise == null) {
+      this.#promise = new Promise((resolve, reject) => {
+        this.onComplete(() => {
+          if (this.res != null) {
+            resolve(this.res);
+          } else {
+            reject();
+          }
+        });
+      });
+    }
+    return this.#promise;
+  }
+}
+
+export class BatchExecutor<Task> {
+  #executor: (reqs: Task[]) => void;
+
+  #interval: number;
+
+  #size: number;
+
+  #tasks: Task[] = [];
+
+  #timerId: ReturnType<typeof setTimeout> | null = null;
+
+  constructor({ executor, interval, size }: BatchExecutorConstructor<Task>) {
+    this.#executor = executor;
+    this.#interval = interval;
+    this.#size = size;
+  }
+
+  #executeTasks() {
+    this.#executor(this.#tasks);
+    this.#tasks = [];
+  }
+
+  #startTimerIfNotStarted() {
+    if (this.#timerId == null) {
+      this.#timerId = setTimeout(() => {
+        this.#executeTasks();
+        this.stop();
+      }, this.#interval);
+    }
+  }
+
+  pushTask(task: Task) {
+    this.#tasks.push(task);
+    if (this.#tasks.length < this.#size) {
+      this.#startTimerIfNotStarted();
+    } else {
+      this.#executeTasks();
+    }
+  }
+
+  stop() {
+    if (this.#timerId != null) {
+      clearTimeout(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+}
+
+export type BatchSubscriptionTask = ObservableTask<Filter[], NostrEvent[]>;
+
+export class BatchSubscription {
+  #batchExecutor: BatchExecutor<BatchSubscriptionTask>;
+
+  constructor(pool: SimplePool, relays: string[]) {
+    this.#batchExecutor = new BatchExecutor<BatchSubscriptionTask>({
+      interval: 2000,
+      size: 50,
+      executor: (tasks) => {
+        const filterTaskMap = new Map<Filter, BatchSubscriptionTask>();
+        tasks.forEach((task) => {
+          const filters = task.req;
+          filters.forEach((filter) => {
+            filterTaskMap.set(filter, task);
+          });
+        });
+
+        const mergedFilter = [...filterTaskMap.keys()];
+        const sub = pool.sub(relays, mergedFilter);
+        const filterEvents = new Map<Filter, NostrEvent[]>();
+
+        sub.on('event', (event: NostrEvent & { id: string }) => {
+          mergedFilter.forEach((filter) => {
+            if (matchFilter(filter, event)) {
+              const task = filterTaskMap.get(filter);
+              if (task == null) {
+                console.error('task for filter not found', filter);
+                return;
+              }
+              task.updateWith((current) => {
+                if (current == null) return [event];
+                return [...current, event];
+              });
+            }
+          });
+        });
+
+        sub.on('eose', () => {
+          tasks.forEach((task) => {
+            task.complete();
+          });
+          sub.unsub();
+        });
+      },
+    });
+  }
+
+  sub(filters: Filter[]): BatchSubscriptionTask {
+    const task = new ObservableTask<Filter[], NostrEvent[]>(filters);
+    this.#batchExecutor.pushTask(task);
+    return task;
+  }
+}

src/components/Column.tsx

@@ -1,7 +1,7 @@
 import type { Component, JSX } from 'solid-js';
 import { useHandleCommand } from '@/hooks/useCommandBus';
 
-type ColumnProps = {
+export type ColumnProps = {
   name: string;
   columnIndex: number;
   lastColumn?: true;

src/components/Config.tsx

@@ -142,6 +142,13 @@ const OtherConfig = () => {
     }));
   };
 
+  const toggleShowImage = () => {
+    setConfig((current) => ({
+      ...current,
+      showImage: !(current.showImage ?? true),
+    }));
+  };
+
   return (
     <div>
       <h3 class="font-bold">その他</h3>
@@ -153,6 +160,10 @@ const OtherConfig = () => {
             onClick={() => toggleKeepOpenPostForm()}
           />
         </div>
+        <div class="flex w-full">
+          <div class="flex-1">画像をデフォルトで表示する</div>
+          <ToggleButton value={config().showImage} onClick={() => toggleShowImage()} />
+        </div>
         {/*
         <div class="flex w-full">
           <div class="flex-1">リアクションのデフォルト</div>

src/components/NotePostForm.tsx

@@ -232,7 +232,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             props.textAreaRef?.(el);
           }}
           name="text"
-          class="rounded border-none"
+          class="min-h-[40px] rounded border-none"
           rows={4}
           placeholder={placeholder(mode())}
           onInput={handleInput}
@@ -260,7 +260,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
               'w-7': mode() === 'reply',
             }}
             type="button"
-            area-label="コンテンツ警告を設定"
+            aria-label="コンテンツ警告を設定"
             title="コンテンツ警告を設定"
             onClick={() => setContentWarning((e) => !e)}
           >
@@ -278,7 +278,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             }}
             type="button"
             title="画像を投稿"
-            area-label="画像を投稿"
+            aria-label="画像を投稿"
             disabled={fileUploadDisabled()}
             onClick={() => fileInputRef?.click()}
           >
@@ -295,7 +295,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
               'w-7': mode() === 'reply',
             }}
             type="submit"
-            area-label="投稿"
+            aria-label="投稿"
             title="投稿"
             disabled={submitDisabled()}
           >

src/components/ProfileDisplay.tsx

@@ -1,5 +1,4 @@
 import { Component, createMemo, Show } from 'solid-js';
-import { npubEncode } from 'nostr-tools/nip19';
 
 import GlobeAlt from 'heroicons/24/outline/globe-alt.svg';
 import XMark from 'heroicons/24/outline/x-mark.svg';
@@ -8,10 +7,11 @@ import Modal from '@/components/Modal';
 import Copy from '@/components/utils/Copy';
 
 import useProfile from '@/nostr/useProfile';
-import useConfig from '@/nostr/useConfig';
+import npubEncodeFallback from '@/utils/npubEncodeFallback';
 
 export type ProfileDisplayProps = {
   pubkey: string;
+  onClose?: () => void;
 };
 
 const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
@@ -19,13 +19,17 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
     pubkey: props.pubkey,
   }));
 
-  const npub = createMemo(() => npubEncode(props.pubkey));
+  const npub = createMemo(() => npubEncodeFallback(props.pubkey));
 
   return (
-    <Modal>
+    <Modal onClose={() => props.onClose?.()}>
       <div class="max-h-full w-[640px] max-w-full overflow-scroll">
         <div class="flex justify-end">
-          <button class="h-8 w-8 text-stone-700">
+          <button
+            class="h-8 w-8 text-stone-700"
+            aria-label="Close"
+            onClick={() => props.onClose?.()}
+          >
             <XMark />
           </button>
         </div>
@@ -38,16 +42,22 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
                 )}
               </Show>
             </div>
-            <div class="flex h-[64px] items-center gap-2 px-2">
+            <div class="flex h-[64px] items-center gap-4 px-4">
-              <div class="mt-[-64px] h-28 w-28 shrink-0 rounded-lg border-2 object-cover">
+              <div class="mt-[-64px] h-28 w-28 shrink-0 rounded-lg bg-stone-400 shadow-md">
                 <Show when={profile()?.picture} keyed>
-                  {(pictureUrl) => <img src={pictureUrl} alt="user icon" class="h-full w-full" />}
+                  {(pictureUrl) => (
+                    <img
+                      src={pictureUrl}
+                      alt="user icon"
+                      class="h-full w-full rounded-lg object-cover"
+                    />
+                  )}
                 </Show>
               </div>
               <div>
                 <div class="flex items-center gap-2">
                   <div class="truncate text-xl font-bold">{profile()?.display_name}</div>
-                  <div class="shrink-0 text-sm">@{profile()?.name}</div>
+                  <div class="shrink-0 text-sm font-bold">@{profile()?.name}</div>
                 </div>
                 <div class="flex gap-1">
                   <div class="truncate text-xs">{npub()}</div>
@@ -55,23 +65,27 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
                 </div>
               </div>
             </div>
-            <div class="max-h-32 overflow-scroll whitespace-pre-wrap px-4 pt-1 text-sm">
+            <div class="max-h-32 overflow-scroll whitespace-pre-wrap px-5 py-2 text-sm">
               {profile()?.about}
             </div>
-            <ul class="px-4 py-2 text-xs">
+            <ul class="border-t px-5 py-2 text-xs">
               <Show when={profile()?.website}>
                 <li class="flex items-center gap-1">
                   <span class="inline-block h-4 w-4" area-label="website" title="website">
                     <GlobeAlt />
                   </span>
-                  <a href={profile()?.website} target="_blank" rel="noreferrer noopener">
+                  <a
+                    class="text-blue-500 underline"
+                    href={profile()?.website}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
                     {profile()?.website}
                   </a>
                 </li>
               </Show>
             </ul>
           </Show>
-          <div class="h-16 border" />
         </div>
       </div>
     </Modal>

src/components/UserDisplayName.tsx

@@ -1,7 +1,7 @@
 import { Component, Switch, Match } from 'solid-js';
-import { npubEncode } from 'nostr-tools/nip19';
 
 import useProfile from '@/nostr/useProfile';
+import npubEncodeFallback from '@/utils/npubEncodeFallback';
 
 type UserNameDisplayProps = {
   pubkey: string;
@@ -13,7 +13,7 @@ const UserNameDisplay: Component<UserNameDisplayProps> = (props) => {
   }));
 
   return (
-    <Switch fallback={npubEncode(props.pubkey)}>
+    <Switch fallback={npubEncodeFallback(props.pubkey)}>
       <Match when={(profile()?.display_name?.length ?? 0) > 0}>{profile()?.display_name}</Match>
       <Match when={(profile()?.name?.length ?? 0) > 0}>@{profile()?.name}</Match>
     </Switch>

src/components/notification/Reaction.tsx

@@ -8,7 +8,6 @@ import UserDisplayName from '@/components/UserDisplayName';
 
 import useProfile from '@/nostr/useProfile';
 import useEvent from '@/nostr/useEvent';
-import { npubEncode } from 'nostr-tools/nip19';
 
 type ReactionProps = {
   event: NostrEvent;

src/components/textNote/GeneralUserMentionDisplay.tsx

@@ -1,7 +1,7 @@
 import { Show } from 'solid-js';
-import { npubEncode } from 'nostr-tools/nip19';
 
 import useProfile from '@/nostr/useProfile';
+import npubEncodeFallback from '@/utils/npubEncodeFallback';
 
 export type GeneralUserMentionDisplayProps = {
   pubkey: string;
@@ -13,7 +13,10 @@ const GeneralUserMentionDisplay = (props: GeneralUserMentionDisplayProps) => {
   }));
 
   return (
-    <Show when={(profile()?.name?.length ?? 0) > 0} fallback={`@${npubEncode(props.pubkey)}`}>
+    <Show
+      when={(profile()?.name?.length ?? 0) > 0}
+      fallback={`@${npubEncodeFallback(props.pubkey)}`}
+    >
       @{profile()?.name ?? props.pubkey}
     </Show>
   );

src/components/textNote/MentionedUserDisplay.tsx

@@ -1,15 +1,21 @@
 import type { MentionedUser } from '@/core/parseTextNote';
 import GeneralUserMentionDisplay from '@/components/textNote/GeneralUserMentionDisplay';
+import useModalState from '@/hooks/useModalState';
 
 export type MentionedUserDisplayProps = {
   mentionedUser: MentionedUser;
 };
 
 const MentionedUserDisplay = (props: MentionedUserDisplayProps) => {
+  const { showProfile } = useModalState();
+
+  const handleClick = () => {
+    showProfile(props.mentionedUser.pubkey);
+  };
   return (
-    <span class="text-blue-500 underline">
+    <button class="inline text-blue-500 underline" onClick={handleClick}>
       <GeneralUserMentionDisplay pubkey={props.mentionedUser.pubkey} />
-    </span>
+    </button>
   );
 };
 

src/components/textNote/TextNoteContentDisplay.tsx

@@ -7,6 +7,7 @@ import MentionedEventDisplay from '@/components/textNote/MentionedEventDisplay';
 import ImageDisplay from '@/components/textNote/ImageDisplay';
 import eventWrapper from '@/core/event';
 import { isImageUrl } from '@/utils/imageUrl';
+import useConfig from '@/nostr/useConfig';
 import EventLink from '../EventLink';
 import TextNoteDisplayById from './TextNoteDisplayById';
 
@@ -16,6 +17,7 @@ export type TextNoteContentDisplayProps = {
 };
 
 const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
+  const { config } = useConfig();
   const event = () => eventWrapper(props.event);
   return (
     <For each={parseTextNote(props.event)}>
@@ -50,7 +52,9 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
             return (
               <ImageDisplay
                 url={item.content}
-                initialHidden={event().contentWarning().contentWarning || !props.embedding}
+                initialHidden={
+                  !config().showImage || event().contentWarning().contentWarning || !props.embedding
+                }
               />
             );
           }

src/components/textNote/TextNoteDisplay.tsx

@@ -25,7 +25,8 @@ import useDeprecatedReposts from '@/nostr/useDeprecatedReposts';
 import useFormatDate from '@/hooks/useFormatDate';
 
 import ensureNonNull from '@/utils/ensureNonNull';
-import { npubEncode } from 'nostr-tools/nip19';
+import npubEncodeFallback from '@/utils/npubEncodeFallback';
+import useModalState from '@/hooks/useModalState';
 import UserNameDisplay from '../UserDisplayName';
 import TextNoteDisplayById from './TextNoteDisplayById';
 
@@ -39,6 +40,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
   const { config } = useConfig();
   const formatDate = useFormatDate();
   const pubkey = usePubkey();
+  const { showProfile } = useModalState();
 
   const [showReplyForm, setShowReplyForm] = createSignal(false);
   const closeReplyForm = () => setShowReplyForm(false);
@@ -142,7 +144,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
   return (
     <div class="nostr-textnote flex flex-col">
       <div class="flex w-full gap-1">
-        <div class="author-icon h-10 w-10 shrink-0 overflow-hidden object-cover">
+        <button
+          class="author-icon h-10 w-10 shrink-0 overflow-hidden object-cover"
+          onClick={() => showProfile(event().pubkey)}
+        >
           <Show when={author()?.picture}>
             {/* TODO 画像は脆弱性回避のためにimgじゃない方法で読み込みたい */}
             <img
@@ -152,21 +157,27 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
               class="h-10 w-10 rounded"
             />
           </Show>
-        </div>
+        </button>
         <div class="min-w-0 flex-auto">
           <div class="flex justify-between gap-1 text-xs">
-            <div class="author flex min-w-0 truncate">
+            <button
+              class="author flex min-w-0 truncate"
+              onClick={() => showProfile(event().pubkey)}
+            >
               {/* TODO link to author */}
               <Show when={(author()?.display_name?.length ?? 0) > 0}>
                 <div class="author-name truncate pr-1 font-bold">{author()?.display_name}</div>
               </Show>
               <div class="author-username truncate text-zinc-600">
-                <Show when={author()?.name != null} fallback={`@${npubEncode(props.event.pubkey)}`}>
+                <Show
+                  when={author()?.name != null}
+                  fallback={`@${npubEncodeFallback(event().pubkey)}`}
+                >
                   @{author()?.name}
                 </Show>
                 {/* TODO <Match when={author()?.nip05 != null}>@{author()?.nip05}</Match> */}
               </div>
-            </div>
+            </button>
             <div class="created-at shrink-0">{createdAt()}</div>
           </div>
           <Show when={showReplyEvent()} keyed>
@@ -180,9 +191,12 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
             <div class="text-xs">
               <For each={event().mentionedPubkeys()}>
                 {(replyToPubkey: string) => (
-                  <span class="pr-1 text-blue-500 underline">
+                  <button
+                    class="pr-1 text-blue-500 underline"
+                    onClick={() => showProfile(replyToPubkey)}
+                  >
                     <GeneralUserMentionDisplay pubkey={replyToPubkey} />
-                  </span>
+                  </button>
                 )}
               </For>
               {'への返信'}

src/components/utils/Copy.tsx

@@ -29,7 +29,7 @@ const Copy: Component<CopyProps> = (props) => {
       </button>
       <Show when={showPopup()}>
         <div
-          class="absolute left-[-1rem] top-[-1.5rem] rounded-lg
+          class="absolute left-[-1rem] top-[-1.5rem] rounded
                  bg-rose-300 p-1 text-xs font-bold text-white shadow"
         >
           Copied!

src/core/column.ts

@@ -1,6 +1,6 @@
 // import { z } from 'zod';
 import { type Event as NostrEvent, type Filter } from 'nostr-tools';
-import ColumnComponent from '@/components/Column';
+import { type ColumnProps } from '@/components/Column';
 
 export type NotificationType =
   // The event which includes ["p", ...] tags.
@@ -42,7 +42,8 @@ type BulidOptions = {
 // export const buildFilter = (options: BuildOptions) => {};
 
 export type BaseColumn = {
-  columnWidth: (typeof ColumnComponent)['width'];
+  title: string;
+  columnWidth: ColumnProps['width'];
 };
 
 /** A column which shows posts by following users */

src/hooks/createSignalWithStorage.ts

@@ -1,4 +1,5 @@
-import { createSignal, createEffect, onMount, Accessor, Setter } from 'solid-js';
+import { createSignal, createEffect, onMount, type Signal } from 'solid-js';
+import { createStore, SetStoreFunction, type Store, type StoreNode } from 'solid-js/store';
 
 type GenericStorage<T> = {
   getItem(key: string): T | null;
@@ -28,20 +29,42 @@ export const createSignalWithStorage = <T>(
   key: string,
   initialValue: T,
   storage: GenericStorage<T>,
-): [Accessor<T>, Setter<T>] => {
+): Signal<T> => {
   const [loaded, setLoaded] = createSignal<boolean>(false);
-  const [value, setValue] = createSignal<T>(initialValue);
+  const [state, setState] = createSignal(initialValue);
 
   onMount(() => {
     const data = storage.getItem(key);
     // If there is no data, default value is used.
-    if (data != null) setValue(() => data);
+    if (data != null) setState(() => data);
     setLoaded(true);
   });
 
   createEffect(() => {
-    if (loaded()) storage.setItem(key, value());
+    if (loaded()) storage.setItem(key, state());
   });
 
-  return [value, setValue];
+  return [state, setState];
+};
+
+export const createStoreWithStorage = <T extends StoreNode>(
+  key: string,
+  initialValue: T,
+  storage: GenericStorage<T>,
+): [Store<T>, SetStoreFunction<T>] => {
+  const [loaded, setLoaded] = createSignal<boolean>(false);
+  const [state, setState] = createStore<T>(initialValue);
+
+  onMount(() => {
+    const data = storage.getItem(key);
+    // If there is no data, default value is used.
+    if (data != null) setState(data);
+    setLoaded(true);
+  });
+
+  createEffect(() => {
+    if (loaded()) storage.setItem(key, state);
+  });
+
+  return [state, setState];
 };

src/hooks/useModalState.ts

@@ -0,0 +1,20 @@
+import { createSignal, type Signal } from 'solid-js';
+
+type ModalState =
+  | { type: 'Profile'; pubkey: string }
+  | { type: 'UserTimeline'; pubkey: string }
+  | { type: 'Closed' };
+
+const [modalState, setModalState] = createSignal<ModalState>({ type: 'Closed' });
+
+const useModalState = () => {
+  const showProfile = (pubkey: string) => {
+    setModalState({ type: 'Profile', pubkey });
+  };
+  const closeModal = () => {
+    setModalState({ type: 'Closed' });
+  };
+  return { modalState, setModalState, showProfile, closeModal };
+};
+
+export default useModalState;

src/nostr/useBatchedEvents.ts

@@ -1,6 +1,5 @@
 import {
   createSignal,
-  createEffect,
   createMemo,
   createRoot,
   observable,
@@ -8,13 +7,16 @@ import {
   type Signal,
 } from 'solid-js';
 import { type Event as NostrEvent, type Filter, Kind } from 'nostr-tools';
+import { npubEncode } from 'nostr-tools/nip19';
 import { createQuery, useQueryClient, type CreateQueryResult } from '@tanstack/solid-query';
 
 import timeout from '@/utils/timeout';
 import useBatch, { type Task } from '@/nostr/useBatch';
 import eventWrapper from '@/core/event';
 import useSubscription from '@/nostr/useSubscription';
+import npubEncodeFallback from '@/utils/npubEncodeFallback';
 import useConfig from './useConfig';
+import usePool from './usePool';
 
 type TaskArg =
   | { type: 'Profile'; pubkey: string }
@@ -54,8 +56,8 @@ export type UseProfileProps = {
 };
 
 type UseProfile = {
-  profile: () => Profile | undefined;
+  profile: () => Profile | null;
-  query: CreateQueryResult<NostrEvent | undefined>;
+  query: CreateQueryResult<NostrEvent | null>;
 };
 
 // Textnote
@@ -64,8 +66,8 @@ export type UseTextNoteProps = {
 };
 
 export type UseTextNote = {
-  event: Accessor<NostrEvent | undefined>;
+  event: Accessor<NostrEvent | null>;
-  query: CreateQueryResult<NostrEvent | undefined>;
+  query: CreateQueryResult<NostrEvent | null>;
 };
 
 // Reactions
@@ -107,10 +109,16 @@ type Following = {
 export type UseFollowings = {
   followings: Accessor<Following[]>;
   followingPubkeys: Accessor<string[]>;
-  query: CreateQueryResult<NostrEvent | undefined>;
+  query: CreateQueryResult<NostrEvent | null>;
 };
 
+let count = 0;
+
+setInterval(() => console.log('batchSub', count), 1000);
+
 const { exec } = useBatch<TaskArg, TaskRes>(() => ({
+  interval: 2000,
+  batchSize: 100,
   executor: (tasks) => {
     const profileTasks = new Map<string, Task<TaskArg, TaskRes>[]>();
     const textNoteTasks = new Map<string, Task<TaskArg, TaskRes>[]>();
@@ -194,46 +202,49 @@ const { exec } = useBatch<TaskArg, TaskRes>(() => ({
     };
 
     const { config } = useConfig();
+    const pool = usePool();
 
-    useSubscription(() => ({
+    const sub = pool().sub(config().relayUrls, filters);
-      relayUrls: config().relayUrls,
+
-      filters,
+    count += 1;
-      continuous: false,
+
-      onEvent: (event: NostrEvent & { id: string }) => {
+    sub.on('event', (event: NostrEvent & { id: string }) => {
-        if (event.kind === Kind.Metadata) {
+      if (event.kind === Kind.Metadata) {
-          const registeredTasks = profileTasks.get(event.pubkey) ?? [];
+        const registeredTasks = profileTasks.get(event.pubkey) ?? [];
+        resolveTasks(registeredTasks, event);
+      } else if (event.kind === Kind.Text) {
+        const registeredTasks = textNoteTasks.get(event.id) ?? [];
+        resolveTasks(registeredTasks, event);
+      } else if (event.kind === Kind.Reaction) {
+        const eventTags = eventWrapper(event).taggedEvents();
+        eventTags.forEach((eventTag) => {
+          const taggedEventId = eventTag.id;
+          const registeredTasks = reactionsTasks.get(taggedEventId) ?? [];
           resolveTasks(registeredTasks, event);
-        } else if (event.kind === Kind.Text) {
+        });
-          const registeredTasks = textNoteTasks.get(event.id) ?? [];
+      } else if ((event.kind as number) === 6) {
+        const eventTags = eventWrapper(event).taggedEvents();
+        eventTags.forEach((eventTag) => {
+          const taggedEventId = eventTag.id;
+          const registeredTasks = repostsTasks.get(taggedEventId) ?? [];
           resolveTasks(registeredTasks, event);
-        } else if (event.kind === Kind.Reaction) {
+        });
-          const eventTags = eventWrapper(event).taggedEvents();
+      } else if (event.kind === Kind.Contacts) {
-          eventTags.forEach((eventTag) => {
+        const registeredTasks = followingsTasks.get(event.pubkey) ?? [];
-            const taggedEventId = eventTag.id;
+        resolveTasks(registeredTasks, event);
-            const registeredTasks = reactionsTasks.get(taggedEventId) ?? [];
+      }
-            resolveTasks(registeredTasks, event);
+    });
-          });
+
-        } else if ((event.kind as number) === 6) {
+    sub.on('eose', () => {
-          const eventTags = eventWrapper(event).taggedEvents();
+      finalizeTasks();
-          eventTags.forEach((eventTag) => {
+      sub.unsub();
-            const taggedEventId = eventTag.id;
+      count -= 1;
-            const registeredTasks = repostsTasks.get(taggedEventId) ?? [];
+    });
-            resolveTasks(registeredTasks, event);
-          });
-        } else if (event.kind === Kind.Contacts) {
-          const registeredTasks = followingsTasks.get(event.pubkey) ?? [];
-          resolveTasks(registeredTasks, event);
-        }
-      },
-      onEOSE: () => {
-        finalizeTasks();
-      },
-    }));
   },
 }));
 
-const pickLatestEvent = (events: NostrEvent[]): NostrEvent | undefined => {
+const pickLatestEvent = (events: NostrEvent[]): NostrEvent | null => {
-  if (events.length === 0) return undefined;
+  if (events.length === 0) return null;
   return events.reduce((a, b) => (a.created_at > b.created_at ? a : b));
 };
 
@@ -245,8 +256,9 @@ export const useProfile = (propsProvider: () => UseProfileProps | null): UseProf
     () => ['useProfile', props()] as const,
     ({ queryKey, signal }) => {
       const [, currentProps] = queryKey;
-      if (currentProps == null) return undefined;
+      if (currentProps == null) return Promise.resolve(null);
       const { pubkey } = currentProps;
+      if (pubkey.startsWith('npub1')) return Promise.resolve(null);
       const promise = exec({ type: 'Profile', pubkey }, signal).then((batchedEvents) => {
         const latestEvent = () => {
           const latest = pickLatestEvent(batchedEvents().events);
@@ -257,7 +269,7 @@ export const useProfile = (propsProvider: () => UseProfileProps | null): UseProf
           try {
             queryClient.setQueryData(queryKey, latestEvent());
           } catch (err) {
-            console.error(err);
+            console.error('updating profile error', err);
           }
         });
         return latestEvent();
@@ -273,16 +285,16 @@ export const useProfile = (propsProvider: () => UseProfileProps | null): UseProf
     },
   );
 
-  const profile = createMemo((): Profile | undefined => {
+  const profile = createMemo((): Profile | null => {
-    if (query.data == null) return undefined;
+    if (query.data == null) return null;
     const { content } = query.data;
-    if (content == null || content.length === 0) return undefined;
+    if (content == null || content.length === 0) return null;
     // TODO 大きすぎたりしないかどうか、JSONかどうかのチェック
     try {
       return JSON.parse(content) as Profile;
     } catch (err) {
       console.error('failed to parse profile (kind 0): ', err, content);
-      return undefined;
+      return null;
     }
   });
 
@@ -297,7 +309,7 @@ export const useTextNote = (propsProvider: () => UseTextNoteProps | null): UseTe
     () => ['useTextNote', props()] as const,
     ({ queryKey, signal }) => {
       const [, currentProps] = queryKey;
-      if (currentProps == null) return undefined;
+      if (currentProps == null) return null;
       const { eventId } = currentProps;
       const promise = exec({ type: 'TextNote', eventId }, signal).then((batchedEvents) => {
         const event = batchedEvents().events[0];
@@ -417,7 +429,7 @@ export const useFollowings = (propsProvider: () => UseFollowingsProps | null): U
     genQueryKey,
     ({ queryKey, signal }) => {
       const [, currentProps] = queryKey;
-      if (currentProps == null) return undefined;
+      if (currentProps == null) return Promise.resolve(null);
       const { pubkey } = currentProps;
       const promise = exec({ type: 'Followings', pubkey }, signal).then((batchedEvents) => {
         const latestEvent = () => {
@@ -429,7 +441,7 @@ export const useFollowings = (propsProvider: () => UseFollowingsProps | null): U
           try {
             queryClient.setQueryData(queryKey, latestEvent());
           } catch (err) {
-            console.error(err);
+            console.error('updating followings error', err);
           }
         });
         return latestEvent();

src/nostr/useConfig.ts

@@ -1,13 +1,14 @@
 import { type Accessor, type Setter } from 'solid-js';
 import {
   createStorageWithSerializer,
-  createSignalWithStorage,
+  createStoreWithStorage,
 } from '@/hooks/createSignalWithStorage';
 
 export type Config = {
   relayUrls: string[];
   dateFormat: 'relative' | 'absolute-long' | 'absolute-short';
   keepOpenPostForm: boolean;
+  showImage: boolean;
 };
 
 type UseConfig = {
@@ -38,6 +39,7 @@ const InitialConfig = (): Config => {
     relayUrls,
     dateFormat: 'relative',
     keepOpenPostForm: false,
+    showImage: true,
   };
 };
 
@@ -50,25 +52,19 @@ const deserializer = (json: string): Config =>
   } as Config);
 
 const storage = createStorageWithSerializer(() => window.localStorage, serializer, deserializer);
-const [config, setConfig] = createSignalWithStorage('RabbitConfig', InitialConfig(), storage);
+const [config, setConfig] = createStoreWithStorage('RabbitConfig', InitialConfig(), storage);
 
 const useConfig = (): UseConfig => {
   const addRelay = (relayUrl: string) => {
-    setConfig((current) => ({
+    setConfig('relayUrls', (current) => [...current, relayUrl]);
-      ...current,
-      relayUrls: [...current.relayUrls, relayUrl],
-    }));
   };
 
   const removeRelay = (relayUrl: string) => {
-    setConfig((current) => ({
+    setConfig('relayUrls', (current) => current.filter((e) => e !== relayUrl));
-      ...current,
-      relayUrls: current.relayUrls.filter((e) => e !== relayUrl),
-    }));
   };
 
   return {
-    config,
+    config: () => config,
     setConfig,
     addRelay,
     removeRelay,

src/nostr/useSubscription.ts

@@ -21,7 +21,7 @@ const sortEvents = (events: NostrEvent[]) =>
 
 let count = 0;
 
-setInterval(() => console.log(count), 1000);
+setInterval(() => console.log('sub', count), 1000);
 
 const useSubscription = (propsProvider: () => UseSubscriptionProps | null) => {
   const pool = usePool();
@@ -34,6 +34,7 @@ const useSubscription = (propsProvider: () => UseSubscriptionProps | null) => {
     const { relayUrls, filters, options, onEvent, onEOSE, continuous = true } = props;
 
     const sub = pool().sub(relayUrls, filters, options);
+    let subscribing = true;
     count += 1;
 
     let pushed = false;
@@ -75,7 +76,10 @@ const useSubscription = (propsProvider: () => UseSubscriptionProps | null) => {
 
       if (!continuous) {
         sub.unsub();
-        count -= 1;
+        if (subscribing) {
+          subscribing = false;
+          count -= 1;
+        }
       }
     });
 
@@ -93,7 +97,10 @@ const useSubscription = (propsProvider: () => UseSubscriptionProps | null) => {
 
     onCleanup(() => {
       sub.unsub();
-      // count -= 1;
+      if (subscribing) {
+        subscribing = false;
+        count -= 1;
+      }
       clearInterval(intervalId);
     });
   };

src/pages/Home.tsx

@@ -1,4 +1,13 @@
-import { createSignal, createEffect, onMount, onCleanup, Show, type Component } from 'solid-js';
+import {
+  createSignal,
+  createEffect,
+  onMount,
+  onCleanup,
+  Show,
+  Switch,
+  Match,
+  type Component,
+} from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import uniq from 'lodash/uniq';
 
@@ -16,12 +25,14 @@ import usePubkey from '@/nostr/usePubkey';
 import { useMountShortcutKeys } from '@/hooks/useShortcutKeys';
 import usePersistStatus from '@/hooks/usePersistStatus';
 import ensureNonNull from '@/utils/ensureNonNull';
-import ProfileDisplay from '@/components/Profile';
+import ProfileDisplay from '@/components/ProfileDisplay';
+import useModalState from '@/hooks/useModalState';
 
 const Home: Component = () => {
   useMountShortcutKeys();
   const navigate = useNavigate();
   const { persistStatus } = usePersistStatus();
+  const { modalState, closeModal } = useModalState();
 
   const pool = usePool();
   const { config } = useConfig();
@@ -156,11 +167,17 @@ const Home: Component = () => {
           <Notification events={myReactions()} />
         </Column>
       </div>
-      {/*
+      <Show when={modalState()} keyed>
-      <Show when={pubkey()} keyed>
+        {(state) => (
-        {(pubkeyNonNull: string) => <ProfileDisplay pubkey={pubkeyNonNull} />}
+          <Switch>
+            <Match when={state.type === 'Profile' && state.pubkey} keyed>
+              {(pubkeyNonNull: string) => (
+                <ProfileDisplay pubkey={pubkeyNonNull} onClose={closeModal} />
+              )}
+            </Match>
+          </Switch>
+        )}
       </Show>
-      */}
     </div>
   );
 };

src/utils/npubEncodeFallback.ts

@@ -0,0 +1,12 @@
+import { npubEncode } from 'nostr-tools/nip19';
+
+const npubEncodeFallback = (pubkey: string): string => {
+  try {
+    return npubEncode(pubkey);
+  } catch (err) {
+    console.error('failed to encode pubkey into npub', pubkey);
+    return pubkey;
+  }
+};
+
+export default npubEncodeFallback;

vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
   },
   build: {
     target: 'esnext',
+    sourcemap: 'inline',
   },
   resolve: {
     alias: {