refactor

src/components/EventLink.tsx

@@ -1,14 +1,15 @@
-import { Component } from 'solid-js';
+import { Show, type Component } from 'solid-js';
 
-import { nip19 } from 'nostr-tools';
+import { Kind, nip19 } from 'nostr-tools';
 
-const { noteEncode } = nip19;
+const { noteEncode, neventEncode } = nip19;
 
 type EventLinkProps = {
   eventId: string;
+  kind?: Kind;
 };
 
-const tryEncode = (eventId: string) => {
+const tryEncodeNote = (eventId: string) => {
   try {
     return noteEncode(eventId);
   } catch (err) {
@@ -17,8 +18,26 @@ const tryEncode = (eventId: string) => {
   }
 };
 
+const tryEncodeNevent = (eventId: string) => {
+  try {
+    return neventEncode({ id: eventId });
+  } catch (err) {
+    console.error('failed to encode event id into Bech32 entity (NIP-19) but ignore', eventId, err);
+    return eventId;
+  }
+};
+
 const EventLink: Component<EventLinkProps> = (props) => {
-  return <button class="text-blue-500 underline">{tryEncode(props.eventId)}</button>;
+  return (
+    <button class="text-blue-500 underline">
+      <Show
+        when={props.kind == null || props.kind === Kind.Text}
+        fallback={tryEncodeNevent(props.eventId)}
+      >
+        {tryEncodeNote(props.eventId)}
+      </Show>
+    </button>
+  );
 };
 
 export default EventLink;

src/components/NotePostForm.tsx

@@ -151,8 +151,10 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
     },
   });
 
-  const mentionedPubkeys: Accessor<string[]> = createMemo(
-    () => replyTo()?.mentionedPubkeysWithoutAuthor() ?? [],
+  const mentionedPubkeys = createMemo(() => replyTo()?.mentionedPubkeysWithoutAuthor() ?? []);
+
+  const mentionedPubkeysWithoutMe = createMemo(() =>
+    mentionedPubkeys().filter((pubkey) => pubkey !== getPubkey()),
   );
 
   const notifyPubkeys = (pubkey: string, pubkeyReferences: string[]): string[] => {
@@ -160,10 +162,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
     return uniq([
       // 返信先を先頭に
       props.replyTo.pubkey,
-      // 自分も通知欄に表示するために表示（他アプリとの互換性）
-      pubkey,
       // その他の返信先
-      ...mentionedPubkeys(),
+      ...mentionedPubkeysWithoutMe(),
       // 本文中の公開鍵（npub)
       ...pubkeyReferences,
     ]);

src/components/event/EventDisplay.tsx

@@ -0,0 +1,42 @@
+import { Switch, Match, Component } from 'solid-js';
+
+import { Kind, type Event as NostrEvent } from 'nostr-tools';
+
+// eslint-disable-next-line import/no-cycle
+import Repost from '@/components/event/Repost';
+// eslint-disable-next-line import/no-cycle
+import TextNote from '@/components/event/TextNote';
+import EventLink from '@/components/EventLink';
+
+export type EventDisplayProps = {
+  event: NostrEvent;
+  embedding?: boolean;
+  actions?: boolean;
+  kinds?: Kind[];
+};
+
+const EventDisplay: Component<EventDisplayProps> = (props) => {
+  const isAllowedKind = () =>
+    props.kinds == null || props.kinds.length === 0 || props.kinds.includes(props.event.kind);
+
+  return (
+    <Switch
+      fallback={
+        <span>
+          <span>未対応のイベント種別（{props.event.kind}）</span>
+          <EventLink eventId={props.event.id} kind={props.event.kind} />
+        </span>
+      }
+    >
+      <Match when={!isAllowedKind()}>{null}</Match>
+      <Match when={props.event.kind === Kind.Text}>
+        <TextNote event={props.event} embedding={props.actions} actions={props.actions} />
+      </Match>
+      <Match when={(props.event.kind as number) === 6}>
+        <Repost event={props.event} />
+      </Match>
+    </Switch>
+  );
+};
+
+export default EventDisplay;

src/components/event/EventDisplayById.tsx

@@ -1,22 +1,23 @@
-import { Switch, Match, type Component, Show } from 'solid-js';
+import { Switch, Match, type Component, splitProps } from 'solid-js';
 
-import { Kind } from 'nostr-tools';
-
-import EventLink from '@/components/EventLink';
 // eslint-disable-next-line import/no-cycle
-import TextNoteDisplay, { type TextNoteDisplayProps } from '@/components/textNote/TextNoteDisplay';
+import EventDisplay from '@/components/event/EventDisplay';
+import { type EventDisplayProps } from '@/components/event/EventDisplay';
+import EventLink from '@/components/EventLink';
 import useConfig from '@/core/useConfig';
 import useEvent from '@/nostr/useEvent';
 import ensureNonNull from '@/utils/ensureNonNull';
 
-type TextNoteDisplayByIdProps = Omit<TextNoteDisplayProps, 'event'> & {
+type EventDisplayByIdProps = Omit<EventDisplayProps, 'event'> & {
   eventId: string | undefined;
 };
 
-const TextNoteDisplayById: Component<TextNoteDisplayByIdProps> = (props) => {
+const EventDisplayById: Component<EventDisplayByIdProps> = (props) => {
+  const [localProps, restProps] = splitProps(props, ['eventId']);
   const { shouldMuteEvent } = useConfig();
+
   const { event: fetchedEvent, query: eventQuery } = useEvent(() =>
-    ensureNonNull([props.eventId] as const)(([eventIdNonNull]) => ({
+    ensureNonNull([localProps.eventId] as const)(([eventIdNonNull]) => ({
       eventId: eventIdNonNull,
     })),
   );
@@ -30,16 +31,9 @@ const TextNoteDisplayById: Component<TextNoteDisplayByIdProps> = (props) => {
     <Switch fallback="投稿が見つかりません">
       <Match when={hidden()}>{null}</Match>
       <Match when={fetchedEvent()} keyed>
-        {(event) => (
-          <Show
-            when={event.kind === Kind.Text}
-            fallback={<div>未対応のイベント種別（{event.kind}）</div>}
-          >
-            <TextNoteDisplay event={event} {...props} />
-          </Show>
-        )}
+        {(event) => <EventDisplay event={event} {...restProps} />}
       </Match>
-      <Match when={eventQuery.isLoading && props.eventId} keyed>
+      <Match when={eventQuery.isLoading && localProps.eventId} keyed>
         {(id) => (
           <div class="truncate">
             {'読み込み中 '}
@@ -51,4 +45,4 @@ const TextNoteDisplayById: Component<TextNoteDisplayByIdProps> = (props) => {
   );
 };
 
-export default TextNoteDisplayById;
+export default EventDisplayById;

src/components/event/Reaction.tsx

@@ -0,0 +1,85 @@
+import { Switch, Match, type Component, Show } from 'solid-js';
+
+import HeartSolid from 'heroicons/24/solid/heart.svg';
+import { type Event as NostrEvent } from 'nostr-tools';
+
+import TextNoteDisplay from '@/components/event/textNote/TextNoteDisplay';
+import UserDisplayName from '@/components/UserDisplayName';
+import useConfig from '@/core/useConfig';
+import useModalState from '@/hooks/useModalState';
+import eventWrapper from '@/nostr/event';
+import useEvent from '@/nostr/useEvent';
+import useProfile from '@/nostr/useProfile';
+import ensureNonNull from '@/utils/ensureNonNull';
+
+type ReactionProps = {
+  event: NostrEvent;
+};
+
+const Reaction: Component<ReactionProps> = (props) => {
+  const { shouldMuteEvent } = useConfig();
+  const { showProfile } = useModalState();
+  const event = () => eventWrapper(props.event);
+  const eventId = () => event().lastTaggedEventId();
+
+  const { profile } = useProfile(() => ({
+    pubkey: props.event.pubkey,
+  }));
+
+  const { event: reactedEvent, query: reactedEventQuery } = useEvent(() =>
+    ensureNonNull([eventId()] as const)(([eventIdNonNull]) => ({
+      eventId: eventIdNonNull,
+    })),
+  );
+
+  const isRemoved = () => reactedEventQuery.isSuccess && reactedEvent() == null;
+
+  return (
+    // if the reacted event is not found, it should be a removed event
+    <Show when={!isRemoved() || shouldMuteEvent(props.event)}>
+      <div class="flex gap-1 px-1 text-sm">
+        <div class="notification-icon flex place-items-center">
+          <Switch fallback={props.event.content}>
+            <Match when={props.event.content === '+'}>
+              <span class="h-4 w-4 pt-[1px] text-rose-400">
+                <HeartSolid />
+              </span>
+            </Match>
+          </Switch>
+        </div>
+        <div class="notification-user flex gap-1 overflow-hidden">
+          <div class="author-icon h-5 w-5 shrink-0 overflow-hidden object-cover">
+            <Show when={profile()?.picture != null}>
+              <img
+                src={profile()?.picture}
+                alt="icon"
+                // TODO autofit
+                class="rounded"
+              />
+            </Show>
+          </div>
+          <div class="flex-1 overflow-hidden">
+            <button
+              class="truncate font-bold hover:text-blue-500 hover:underline"
+              onClick={() => showProfile(props.event.pubkey)}
+            >
+              <UserDisplayName pubkey={props.event.pubkey} />
+            </button>
+            {' がリアクション'}
+          </div>
+        </div>
+      </div>
+      <div class="notification-event py-1">
+        <Show
+          when={reactedEvent()}
+          fallback={<div class="truncate">読み込み中 {eventId()}</div>}
+          keyed
+        >
+          {(ev) => <TextNoteDisplay event={ev} />}
+        </Show>
+      </div>
+    </Show>
+  );
+};
+
+export default Reaction;

src/components/event/Repost.tsx

@@ -1,28 +1,28 @@
-// NIP-18 (DEPRECATED)
+// NIP-18
 import { type Component, createMemo } from 'solid-js';
 
 import ArrowPathRoundedSquare from 'heroicons/24/outline/arrow-path-rounded-square.svg';
 import { Event as NostrEvent } from 'nostr-tools';
 
-import ColumnItem from '@/components/ColumnItem';
-import TextNoteDisplayById from '@/components/textNote/TextNoteDisplayById';
+// eslint-disable-next-line import/no-cycle
+import EventDisplayById from '@/components/event/EventDisplayById';
 import UserDisplayName from '@/components/UserDisplayName';
 import useFormatDate from '@/hooks/useFormatDate';
 import useModalState from '@/hooks/useModalState';
 import eventWrapper from '@/nostr/event';
 
-export type DeprecatedRepostProps = {
+export type RepostProps = {
   event: NostrEvent;
 };
 
-const DeprecatedRepost: Component<DeprecatedRepostProps> = (props) => {
+const Repost: Component<RepostProps> = (props) => {
   const { showProfile } = useModalState();
   const formatDate = useFormatDate();
-  const repostedId = () => props.event.tags.find(([tagName]) => tagName === 'e')?.[1];
   const event = createMemo(() => eventWrapper(props.event));
+  const eventId = () => event().lastTaggedEventId();
 
   return (
-    <ColumnItem>
+    <div>
       <div class="flex content-center text-xs">
         <div class="h-5 w-5 shrink-0 pr-1 text-green-500" aria-hidden="true">
           <ArrowPathRoundedSquare />
@@ -39,10 +39,10 @@ const DeprecatedRepost: Component<DeprecatedRepostProps> = (props) => {
         <div>{formatDate(event().createdAtAsDate())}</div>
       </div>
       <div class="pt-1">
-        <TextNoteDisplayById eventId={repostedId()} />
+        <EventDisplayById eventId={eventId()} />
       </div>
-    </ColumnItem>
+    </div>
   );
 };
 
-export default DeprecatedRepost;
+export default Repost;

src/components/event/TextNote.tsx

@@ -1,7 +1,8 @@
 import { Show, type Component } from 'solid-js';
 
 import ColumnItem from '@/components/ColumnItem';
-import TextNoteDisplay, { TextNoteDisplayProps } from '@/components/textNote/TextNoteDisplay';
+// eslint-disable-next-line import/no-cycle
+import TextNoteDisplay, { TextNoteDisplayProps } from '@/components/event/textNote/TextNoteDisplay';
 import useConfig from '@/core/useConfig';
 
 export type TextNoteProps = TextNoteDisplayProps;
@@ -11,9 +12,7 @@ const TextNote: Component<TextNoteProps> = (props) => {
 
   return (
     <Show when={!shouldMuteEvent(props.event)}>
-      <ColumnItem>
-        <TextNoteDisplay {...props} />
-      </ColumnItem>
+      <TextNoteDisplay {...props} />
     </Show>
   );
 };

src/components/event/textNote/MentionedEventDisplay.tsx

@@ -1,8 +1,8 @@
 import { Show } from 'solid-js';
 
-import EventLink from '@/components/EventLink';
 // eslint-disable-next-line import/no-cycle
-import TextNoteDisplayById from '@/components/textNote/TextNoteDisplayById';
+import EventDisplayById from '@/components/event/EventDisplayById';
+import EventLink from '@/components/EventLink';
 import { type MentionedEvent } from '@/nostr/parseTextNote';
 
 export type MentionedEventDisplayProps = {
@@ -16,7 +16,7 @@ const MentionedEventDisplay = (props: MentionedEventDisplayProps) => {
       fallback={<EventLink eventId={props.mentionedEvent.eventId} />}
     >
       <div class="my-1 rounded border p-1">
-        <TextNoteDisplayById
+        <EventDisplayById
           eventId={props.mentionedEvent.eventId}
           embedding={false}
           actions={false}

src/components/event/textNote/MentionedUserDisplay.tsx

@@ -1,4 +1,4 @@
-import GeneralUserMentionDisplay from '@/components/textNote/GeneralUserMentionDisplay';
+import GeneralUserMentionDisplay from '@/components/event/textNote/GeneralUserMentionDisplay';
 import useModalState from '@/hooks/useModalState';
 
 import type { MentionedUser } from '@/nostr/parseTextNote';

src/components/event/textNote/TextNoteContentDisplay.tsx

@@ -1,12 +1,12 @@
 import { For } from 'solid-js';
 
-import EventLink from '@/components/EventLink';
-import ImageDisplay from '@/components/textNote/ImageDisplay';
 // eslint-disable-next-line import/no-cycle
-import MentionedEventDisplay from '@/components/textNote/MentionedEventDisplay';
-import MentionedUserDisplay from '@/components/textNote/MentionedUserDisplay';
-import PlainTextDisplay from '@/components/textNote/PlainTextDisplay';
-import TextNoteDisplayById from '@/components/textNote/TextNoteDisplayById';
+import EventDisplayById from '@/components/event/EventDisplayById';
+import ImageDisplay from '@/components/event/textNote/ImageDisplay';
+import MentionedEventDisplay from '@/components/event/textNote/MentionedEventDisplay';
+import MentionedUserDisplay from '@/components/event/textNote/MentionedUserDisplay';
+import PlainTextDisplay from '@/components/event/textNote/PlainTextDisplay';
+import EventLink from '@/components/EventLink';
 import SafeLink from '@/components/utils/SafeLink';
 import { createSearchColumn } from '@/core/column';
 import useConfig from '@/core/useConfig';
@@ -57,18 +57,14 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
           if (item.data.type === 'note' && props.embedding) {
             return (
               <div class="my-1 rounded border p-1">
-                <TextNoteDisplayById eventId={item.data.data} actions={false} embedding={false} />
+                <EventDisplayById eventId={item.data.data} actions={false} embedding={false} />
               </div>
             );
           }
           if (item.data.type === 'nevent' && props.embedding) {
             return (
               <div class="my-1 rounded border p-1">
-                <TextNoteDisplayById
-                  eventId={item.data.data.id}
-                  actions={false}
-                  embedding={false}
-                />
+                <EventDisplayById eventId={item.data.data.id} actions={false} embedding={false} />
               </div>
             );
           }

src/components/event/textNote/TextNoteDisplay.tsx

@@ -11,12 +11,12 @@ import { nip19, type Event as NostrEvent } from 'nostr-tools';
 
 import ContextMenu, { MenuItem } from '@/components/ContextMenu';
 import EmojiPicker from '@/components/EmojiPicker';
-import NotePostForm from '@/components/NotePostForm';
-import ContentWarningDisplay from '@/components/textNote/ContentWarningDisplay';
-import GeneralUserMentionDisplay from '@/components/textNote/GeneralUserMentionDisplay';
 // eslint-disable-next-line import/no-cycle
-import TextNoteContentDisplay from '@/components/textNote/TextNoteContentDisplay';
-import TextNoteDisplayById from '@/components/textNote/TextNoteDisplayById';
+import EventDisplayById from '@/components/event/EventDisplayById';
+import ContentWarningDisplay from '@/components/event/textNote/ContentWarningDisplay';
+import GeneralUserMentionDisplay from '@/components/event/textNote/GeneralUserMentionDisplay';
+import TextNoteContentDisplay from '@/components/event/textNote/TextNoteContentDisplay';
+import NotePostForm from '@/components/NotePostForm';
 import { useTimelineContext } from '@/components/timeline/TimelineContext';
 import useConfig from '@/core/useConfig';
 import useFormatDate from '@/hooks/useFormatDate';
@@ -355,7 +355,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
             <Show when={showReplyEvent()} keyed>
               {(id) => (
                 <div class="mt-1 rounded border p-1">
-                  <TextNoteDisplayById eventId={id} actions={false} embedding={false} />
+                  <EventDisplayById eventId={id} actions={false} embedding={false} />
                 </div>
               )}
             </Show>

src/components/modal/ProfileEdit.tsx

@@ -30,12 +30,6 @@ const isInternetIdentifier = (s: string) => InternetIdentifierRegex.test(s);
 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('');
@@ -46,6 +40,13 @@ const ProfileEdit: Component<ProfileEditProps> = (props) => {
   const [nip05, setNIP05] = createSignal('');
   const [lightningAddress, setLightningAddress] = createSignal('');
 
+  const { profile, invalidateProfile, query } = useProfile(() =>
+    ensureNonNull([pubkey()] as const)(([pubkeyNonNull]) => ({
+      pubkey: pubkeyNonNull,
+    })),
+  );
+  const { updateProfile } = useCommands();
+
   const mutation = createMutation({
     mutationKey: ['updateProfile'],
     mutationFn: (...params: Parameters<typeof updateProfile>) =>
@@ -71,7 +72,9 @@ const ProfileEdit: Component<ProfileEditProps> = (props) => {
     },
   });
 
-  const disabled = () => query.isLoading || query.isError || mutation.isLoading;
+  const loading = () => query.isLoading || mutation.isLoading;
+  const disabled = () => loading();
+
   const otherProperties = () =>
     omit(profile(), [
       'picture',
@@ -141,7 +144,7 @@ const ProfileEdit: Component<ProfileEditProps> = (props) => {
   return (
     <BasicModal closeButton={() => <ArrowLeft />} onClose={props.onClose}>
       <div>
-        <Show when={banner().length > 0} fallback={<div class="h-12 shrink-0" />} keyed>
+        <Show when={banner().length > 0} fallback={<div class="h-24 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>
@@ -152,6 +155,9 @@ const ProfileEdit: Component<ProfileEditProps> = (props) => {
           </Show>
         </div>
       </div>
+      <Show when={loading()}>
+        <div class="px-4 pt-4">読み込み中...</div>
+      </Show>
       <div>
         <form class="flex flex-col gap-4 p-4" onSubmit={handleSubmit}>
           <div class="flex flex-col items-start gap-1">

src/components/notification/Reaction.tsx

@@ -1,86 +0,0 @@
-import { Switch, Match, type Component, Show } from 'solid-js';
-
-import HeartSolid from 'heroicons/24/solid/heart.svg';
-import { type Event as NostrEvent } from 'nostr-tools';
-
-import ColumnItem from '@/components/ColumnItem';
-import TextNoteDisplay from '@/components/textNote/TextNoteDisplay';
-import UserDisplayName from '@/components/UserDisplayName';
-import useModalState from '@/hooks/useModalState';
-import eventWrapper from '@/nostr/event';
-import useEvent from '@/nostr/useEvent';
-import useProfile from '@/nostr/useProfile';
-import ensureNonNull from '@/utils/ensureNonNull';
-
-type ReactionProps = {
-  event: NostrEvent;
-};
-
-const Reaction: Component<ReactionProps> = (props) => {
-  const { showProfile } = useModalState();
-  const event = () => eventWrapper(props.event);
-  const eventId = () => event().lastTaggedEventId();
-
-  const { profile } = useProfile(() => ({
-    pubkey: props.event.pubkey,
-  }));
-
-  const { event: reactedEvent, query: reactedEventQuery } = useEvent(() =>
-    ensureNonNull([eventId()] as const)(([eventIdNonNull]) => ({
-      eventId: eventIdNonNull,
-    })),
-  );
-
-  const isRemoved = () => reactedEventQuery.isSuccess && reactedEvent() == null;
-
-  return (
-    // if the reacted event is not found, it should be a removed event
-    <Show when={!isRemoved()}>
-      <ColumnItem>
-        <div class="flex gap-1 px-1 text-sm">
-          <div class="notification-icon flex place-items-center">
-            <Switch fallback={props.event.content}>
-              <Match when={props.event.content === '+'}>
-                <span class="h-4 w-4 pt-[1px] text-rose-400">
-                  <HeartSolid />
-                </span>
-              </Match>
-            </Switch>
-          </div>
-          <div class="notification-user flex gap-1 overflow-hidden">
-            <div class="author-icon h-5 w-5 shrink-0 overflow-hidden object-cover">
-              <Show when={profile()?.picture != null}>
-                <img
-                  src={profile()?.picture}
-                  alt="icon"
-                  // TODO autofit
-                  class="rounded"
-                />
-              </Show>
-            </div>
-            <div class="flex-1 overflow-hidden">
-              <button
-                class="truncate font-bold hover:text-blue-500 hover:underline"
-                onClick={() => showProfile(props.event.pubkey)}
-              >
-                <UserDisplayName pubkey={props.event.pubkey} />
-              </button>
-              {' がリアクション'}
-            </div>
-          </div>
-        </div>
-        <div class="notification-event py-1">
-          <Show
-            when={reactedEvent()}
-            fallback={<div class="truncate">読み込み中 {eventId()}</div>}
-            keyed
-          >
-            {(ev) => <TextNoteDisplay event={ev} />}
-          </Show>
-        </div>
-      </ColumnItem>
-    </Show>
-  );
-};
-
-export default Reaction;

src/components/timeline/Notification.tsx

@@ -2,9 +2,9 @@ import { For, Switch, Match, type Component } from 'solid-js';
 
 import { Kind, type Event as NostrEvent } from 'nostr-tools';
 
-import DeprecatedRepost from '@/components/DeprecatedRepost';
-import Reaction from '@/components/notification/Reaction';
-import TextNote from '@/components/TextNote';
+import Reaction from '@/components/event/Reaction';
+import Repost from '@/components/event/Repost';
+import TextNote from '@/components/event/TextNote';
 
 export type NotificationProps = {
   events: NostrEvent[];
@@ -23,7 +23,7 @@ const Notification: Component<NotificationProps> = (props) => {
           </Match>
           {/* TODO ちゃんとnotification用のコンポーネント使う */}
           <Match when={(event.kind as number) === 6}>
-            <DeprecatedRepost event={event} />
+            <Repost event={event} />
           </Match>
         </Switch>
       )}

src/components/timeline/Timeline.tsx

@@ -1,26 +1,26 @@
-import { For, Switch, Match, type Component } from 'solid-js';
+import { For, type Component, Show } from 'solid-js';
 
-import { Kind, type Event as NostrEvent } from 'nostr-tools';
+import { type Event as NostrEvent } from 'nostr-tools';
 
-import DeprecatedRepost from '@/components/DeprecatedRepost';
-import TextNote from '@/components/TextNote';
+import ColumnItem from '@/components/ColumnItem';
+import EventDisplay from '@/components/event/EventDisplay';
+import useConfig from '@/core/useConfig';
 
 export type TimelineProps = {
   events: NostrEvent[];
 };
 
 const Timeline: Component<TimelineProps> = (props) => {
+  const { shouldMuteEvent } = useConfig();
+
   return (
     <For each={props.events}>
       {(event) => (
-        <Switch fallback={<div>未対応のイベント種別（{event.kind}）</div>}>
-          <Match when={event.kind === Kind.Text}>
-            <TextNote event={event} />
-          </Match>
-          <Match when={(event.kind as number) === 6}>
-            <DeprecatedRepost event={event} />
-          </Match>
-        </Switch>
+        <Show when={!shouldMuteEvent(event)}>
+          <ColumnItem>
+            <EventDisplay event={event} />
+          </ColumnItem>
+        </Show>
       )}
     </For>
   );