diff --git a/src/components/column/BookmarkColumn.tsx b/src/components/column/BookmarkColumn.tsx new file mode 100644 index 0000000..c7126e5 --- /dev/null +++ b/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 = (props) => { + const { removeColumn } = useConfig(); + + const { event } = useParameterizedReplaceableEvent(() => ({ + kind: 30001, + author: props.column.pubkey, + identifier: props.column.identifier, + })); + + return ( + } + settings={() => } + onClose={() => removeColumn(props.column.id)} + /> + } + width={props.column.width} + columnIndex={props.columnIndex} + lastColumn={props.lastColumn} + > + + {(ev) => } + + + ); +}; + +export default BookmarkColumn; diff --git a/src/components/column/Columns.tsx b/src/components/column/Columns.tsx index eb174b9..30ea38d 100644 --- a/src/components/column/Columns.tsx +++ b/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 = () => { /> )} + + {(bookmarkColumn) => ( + + )} + {(reactionsColumn) => ( { class="inline-block h-8 max-w-[128px] align-middle" src={emojiUrl} alt={item.content} + title={item.shortcode} /> ); } diff --git a/src/components/modal/AddColumn.tsx b/src/components/modal/AddColumn.tsx index 94ebd76..86c670b 100644 --- a/src/components/modal/AddColumn.tsx +++ b/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 = (props) => { チャンネル */} + {/* + + */}