update

src/components/column/BookmarkColumn.tsx

@@ -0,0 +1,50 @@
+import { Component, Show, createEffect, onCleanup, onMount } from 'solid-js';
+
+import BookmarkIcon from 'heroicons/24/outline/bookmark.svg';
+
+import BasicColumnHeader from '@/components/column/BasicColumnHeader';
+import Column from '@/components/column/Column';
+import ColumnSettings from '@/components/column/ColumnSettings';
+import Bookmark from '@/components/timeline/Bookmark';
+import { BookmarkColumnType } from '@/core/column';
+import useConfig from '@/core/useConfig';
+import useDecrypt from '@/nostr/useDecrypt';
+import useParameterizedReplaceableEvent from '@/nostr/useParameterizedReplaceableEvent';
+
+type BookmarkColumnDisplayProps = {
+  columnIndex: number;
+  lastColumn: boolean;
+  column: BookmarkColumnType;
+};
+
+const BookmarkColumn: Component<BookmarkColumnDisplayProps> = (props) => {
+  const { removeColumn } = useConfig();
+
+  const { event } = useParameterizedReplaceableEvent(() => ({
+    kind: 30001,
+    author: props.column.pubkey,
+    identifier: props.column.identifier,
+  }));
+
+  return (
+    <Column
+      header={
+        <BasicColumnHeader
+          name={props.column.name ?? 'ブックマーク'}
+          icon={<BookmarkIcon />}
+          settings={() => <ColumnSettings column={props.column} columnIndex={props.columnIndex} />}
+          onClose={() => removeColumn(props.column.id)}
+        />
+      }
+      width={props.column.width}
+      columnIndex={props.columnIndex}
+      lastColumn={props.lastColumn}
+    >
+      <Show when={event()} keyed>
+        {(ev) => <Bookmark event={ev} />}
+      </Show>
+    </Column>
+  );
+};
+
+export default BookmarkColumn;

src/components/column/Columns.tsx

@@ -1,5 +1,6 @@
 import { For, Switch, Match } from 'solid-js';
 
+import BookmarkColumn from '@/components/column/BookmarkColumn';
 import FollowingColumn from '@/components/column/FollwingColumn';
 import NotificationColumn from '@/components/column/NotificationColumn';
 import PostsColumn from '@/components/column/PostsColumn';
@@ -64,6 +65,15 @@ const Columns = () => {
                   />
                 )}
               </Match>
+              <Match when={column.columnType === 'Bookmark' && column} keyed>
+                {(bookmarkColumn) => (
+                  <BookmarkColumn
+                    column={bookmarkColumn}
+                    columnIndex={columnIndex()}
+                    lastColumn={lastColumn()}
+                  />
+                )}
+              </Match>
               <Match when={column.columnType === 'Search' && column} keyed>
                 {(reactionsColumn) => (
                   <SearchColumn

src/components/event/textNote/TextNoteContentDisplay.tsx

@@ -14,7 +14,7 @@ import { createSearchColumn } from '@/core/column';
 import useConfig from '@/core/useConfig';
 import { useRequestCommand } from '@/hooks/useCommandBus';
 import { textNote } from '@/nostr/event';
-import parseTextNote, { type ParsedTextNoteNode } from '@/nostr/parseTextNote';
+import { type ParsedTextNoteNode } from '@/nostr/parseTextNote';
 import { isImageUrl } from '@/utils/imageUrl';
 
 export type TextNoteContentDisplayProps = {
@@ -112,6 +112,7 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
               class="inline-block h-8 max-w-[128px] align-middle"
               src={emojiUrl}
               alt={item.content}
+              title={item.shortcode}
             />
           );
         }

src/components/modal/AddColumn.tsx

@@ -1,6 +1,7 @@
 import { Component } from 'solid-js';
 
 import Bell from 'heroicons/24/outline/bell.svg';
+import BookmarkIcon from 'heroicons/24/outline/bookmark.svg';
 import ChatBubbleLeftRight from 'heroicons/24/outline/chat-bubble-left-right.svg';
 import GlobeAlt from 'heroicons/24/outline/globe-alt.svg';
 import Heart from 'heroicons/24/outline/heart.svg';
@@ -115,6 +116,17 @@ const AddColumn: Component<AddColumnProps> = (props) => {
           チャンネル
         </button>
         */}
+        {/*
+        <button
+          class="flex basis-1/2 flex-col items-center gap-2 py-8 sm:basis-1/4"
+          onClick={() => addBookmarkColumn()}
+        >
+          <span class="inline-block h-8 w-8">
+            <BookmarkIcon />
+          </span>
+          ブックマーク
+        </button>
+        */}
         <button
           class="flex basis-1/2 flex-col items-center gap-2 py-8 sm:basis-1/4"
           onClick={() => addSearchColumn()}

src/components/timeline/Bookmark.tsx

@@ -0,0 +1,50 @@
+import { For, type Component, createMemo } from 'solid-js';
+
+import { Kind, type Event as NostrEvent } from 'nostr-tools';
+
+import ColumnItem from '@/components/ColumnItem';
+import EventDisplayById from '@/components/event/EventDisplayById';
+import { genericEvent } from '@/nostr/event';
+import { parseTags } from '@/nostr/event/Tags';
+import useDecrypt from '@/nostr/useDecrypt';
+
+export type BookmarkProps = {
+  event: NostrEvent;
+};
+
+const Bookmark: Component<BookmarkProps> = (props) => {
+  const bookmark = createMemo(() => genericEvent(props.event));
+
+  const decrypted = useDecrypt(() => {
+    const { content } = bookmark();
+    if (content == null || content.length === 0) return null;
+    return { id: bookmark().id, encrypted: content };
+  });
+
+  const bookmarkedEventIdsPrivate = () => {
+    const json = decrypted();
+    if (json == null) return [];
+    console.log(json);
+
+    try {
+      return parseTags(json).taggedEventIds();
+    } catch (err) {
+      console.warn(err);
+      return [];
+    }
+  };
+
+  const bookmarkedEventIds = () => bookmark().taggedEventIds();
+
+  return (
+    <For each={[...bookmarkedEventIds(), ...bookmarkedEventIdsPrivate()]}>
+      {(eventId) => (
+        <ColumnItem>
+          <EventDisplayById eventId={eventId} ensureKinds={[Kind.Text]} />
+        </ColumnItem>
+      )}
+    </For>
+  );
+};
+
+export default Bookmark;