diff --git a/src/components/BookmarkNote/BookmarkNote.module.scss b/src/components/BookmarkNote/BookmarkNote.module.scss index 92a7b1d..69da7bd 100644 --- a/src/components/BookmarkNote/BookmarkNote.module.scss +++ b/src/components/BookmarkNote/BookmarkNote.module.scss @@ -7,6 +7,11 @@ background-color: var(--text-tertiary); -webkit-mask: url(../../assets/icons/bookmark_empty.svg) no-repeat 0 / 16px; mask: url(../../assets/icons/bookmark_empty.svg) no-repeat 0 / 16px; + + &.large { + width: 20px; + height: 20px; + } } .fullBookmark { @@ -17,6 +22,11 @@ background-color: var(--active-bookmarked); -webkit-mask: url(../../assets/icons/bookmark_filled.svg) no-repeat 0 / 16px; mask: url(../../assets/icons/bookmark_filled.svg) no-repeat 0 / 16px; + + &.large { + width: 20px; + height: 20px; + } } &:hover { diff --git a/src/components/BookmarkNote/BookmarkNote.tsx b/src/components/BookmarkNote/BookmarkNote.tsx index 5d27e9d..2d52080 100644 --- a/src/components/BookmarkNote/BookmarkNote.tsx +++ b/src/components/BookmarkNote/BookmarkNote.tsx @@ -16,7 +16,7 @@ import styles from './BookmarkNote.module.scss'; import { saveBookmarks } from '../../lib/localStore'; import { importEvents, triggerImportEvents } from '../../lib/notes'; -const BookmarkNote: Component<{ note: PrimalNote }> = (props) => { +const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) => { const account = useAccountContext(); const app = useAppContext(); const intl = useIntl(); @@ -147,10 +147,10 @@ const BookmarkNote: Component<{ note: PrimalNote }> = (props) => { +
} > -
+
diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss index e2979e3..a7d4d89 100644 --- a/src/components/Note/Note.module.scss +++ b/src/components/Note/Note.module.scss @@ -245,8 +245,9 @@ background-color: var(--background-card); display: flex; flex-direction: column; - padding: 12px; + padding-inline: 12px; padding-top: 0; + padding-bottom: 12px; border-radius: 0; border: none; @@ -286,6 +287,29 @@ } } + + .time { + padding-block: 20px; + border-bottom: 1px solid var(--devider); + margin-bottom: 16px; + color: var(--text-tertiary); + font-size: 16px; + font-weight: 400; + line-height: 16px; + + .reactSummary { + &::before { + content: ' · '; + } + + .number { + color: var(--text-primary); + font-size: 16px; + font-weight: 600; + line-height: 16px; + } + } + } } } diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx index 96bb6bf..d2d9039 100644 --- a/src/components/Note/Note.tsx +++ b/src/components/Note/Note.tsx @@ -16,6 +16,7 @@ import NoteHeader from './NoteHeader/NoteHeader'; import { createStore } from 'solid-js/store'; import { CustomZapInfo, useAppContext } from '../../contexts/AppContext'; import NoteContextTrigger from './NoteContextTrigger'; +import { date, longDate, veryLongDate } from '../../lib/dates'; export type NoteFooterState = { likes: number, @@ -146,6 +147,12 @@ const Note: Component<{ ); } + const reactionSum = () => { + const { likes, zaps, reposts } = props.note.post; + + return (likes || 0) + (zaps || 0) + (reposts || 0); + }; + return ( @@ -200,12 +207,25 @@ const Note: Component<{ +
+ + {veryLongDate(props.note.post?.created_at).replace('at', '·')} + + + {reactionSum()} Reactions + +
+ diff --git a/src/components/Note/NoteAuthorInfo.tsx b/src/components/Note/NoteAuthorInfo.tsx index 34781e2..c1e7dd8 100644 --- a/src/components/Note/NoteAuthorInfo.tsx +++ b/src/components/Note/NoteAuthorInfo.tsx @@ -1,18 +1,11 @@ -import { A } from '@solidjs/router'; -import { Component, createSignal, Show } from 'solid-js'; -import { PrimalNote, PrimalUser } from '../../types/primal'; -import ParsedNote from '../ParsedNote/ParsedNote'; -import NoteFooter from './NoteFooter/NoteFooter'; -import NoteHeader from './NoteHeader/NoteHeader'; +import { Component, Show } from 'solid-js'; +import { PrimalUser } from '../../types/primal'; import styles from './Note.module.scss'; import { useThreadContext } from '../../contexts/ThreadContext'; import { useIntl } from '@cookbook/solid-intl'; -import { authorName, nip05Verification, truncateNpub } from '../../stores/profile'; -import { note as t } from '../../translations'; +import { authorName, nip05Verification } from '../../stores/profile'; import { hookForDev } from '../../lib/devTools'; -import NoteReplyHeader from './NoteHeader/NoteReplyHeader'; -import Avatar from '../Avatar/Avatar'; import { date } from '../../lib/dates'; import VerificationCheck from '../VerificationCheck/VerificationCheck'; diff --git a/src/components/Note/NoteContextMenu.tsx b/src/components/Note/NoteContextMenu.tsx index b712d33..30fe4fc 100644 --- a/src/components/Note/NoteContextMenu.tsx +++ b/src/components/Note/NoteContextMenu.tsx @@ -1,27 +1,17 @@ -import { A } from '@solidjs/router'; -import { Component, createEffect, createSignal, Show } from 'solid-js'; -import { MenuItem, NostrRelaySignedEvent, PrimalNote, PrimalRepost, PrimalUser } from '../../types/primal'; -import ParsedNote from '../ParsedNote/ParsedNote'; -import NoteFooter from './NoteFooter/NoteFooter'; -import NoteHeader from './NoteHeader/NoteHeader'; +import { Component, createEffect, createSignal } from 'solid-js'; +import { MenuItem, NostrRelaySignedEvent } from '../../types/primal'; import styles from './Note.module.scss'; -import { useThreadContext } from '../../contexts/ThreadContext'; import { useIntl } from '@cookbook/solid-intl'; -import { authorName, nip05Verification, truncateNpub, userName } from '../../stores/profile'; +import { authorName, userName } from '../../stores/profile'; import { note as t, actions as tActions, toast as tToast } from '../../translations'; import { hookForDev } from '../../lib/devTools'; -import NoteReplyHeader from './NoteHeader/NoteReplyHeader'; -import Avatar from '../Avatar/Avatar'; -import { date } from '../../lib/dates'; -import VerificationCheck from '../VerificationCheck/VerificationCheck'; import PrimalMenu from '../PrimalMenu/PrimalMenu'; import { useAccountContext } from '../../contexts/AccountContext'; import { APP_ID } from '../../App'; import { reportUser } from '../../lib/profile'; import { useToastContext } from '../Toaster/Toaster'; import { broadcastEvent } from '../../lib/notes'; -import { getScreenCordinates } from '../../utils'; import { NoteContextMenuInfo } from '../../contexts/AppContext'; import ConfirmModal from '../ConfirmModal/ConfirmModal'; diff --git a/src/components/Note/NoteFooter/NoteFooter.module.scss b/src/components/Note/NoteFooter/NoteFooter.module.scss index f126b56..60cec00 100644 --- a/src/components/Note/NoteFooter/NoteFooter.module.scss +++ b/src/components/Note/NoteFooter/NoteFooter.module.scss @@ -2,11 +2,23 @@ width: 16px; height: 16px; background-color: var(--text-tertiary-2); + + &.large { + width: 20px; + height: 20px; + } } @mixin typeDiv { display: flex; align-items: center; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + &.large { + font-size: 16px; + } } .contextButton { @@ -59,9 +71,6 @@ } .stat { - font-weight: 400; - font-size: 14px; - line-height: 16px; align-items: center; margin: 0px; padding: 0px; diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx index dc4e069..4b336d9 100644 --- a/src/components/Note/NoteFooter/NoteFooter.tsx +++ b/src/components/Note/NoteFooter/NoteFooter.tsx @@ -30,6 +30,7 @@ const NoteFooter: Component<{ state: NoteFooterState, updateState: SetStoreFunction, customZapInfo: CustomZapInfo, + large?: boolean, }> = (props) => { const account = useAccountContext(); @@ -321,6 +322,7 @@ const NoteFooter: Component<{ highlighted={props.state.replied} label={props.state.replies === 0 ? '' : truncateNumber(props.state.replies, 2)} title={props.state.replies.toLocaleString()} + large={props.large} />