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} /> @@ -373,7 +377,10 @@ const NoteFooter: Component<{ - + ) diff --git a/src/components/Note/NoteFooter/NoteFooterActionButton.tsx b/src/components/Note/NoteFooter/NoteFooterActionButton.tsx index d9377ce..0790955 100644 --- a/src/components/Note/NoteFooter/NoteFooterActionButton.tsx +++ b/src/components/Note/NoteFooter/NoteFooterActionButton.tsx @@ -23,6 +23,7 @@ const NoteFooterActionButton: Component<{ label: string | number, hidden?: boolean, title?: string, + large?: boolean, }> = (props) => { return ( @@ -36,9 +37,9 @@ const NoteFooterActionButton: Component<{ onTouchEnd={props.onTouchEnd ?? (() => {})} disabled={props.disabled} > - + {props.label || ''} diff --git a/src/components/Note/NoteHeader/NoteHeader.tsx b/src/components/Note/NoteHeader/NoteHeader.tsx index e6d4e72..20b66c7 100644 --- a/src/components/Note/NoteHeader/NoteHeader.tsx +++ b/src/components/Note/NoteHeader/NoteHeader.tsx @@ -222,17 +222,7 @@ const NoteHeader: Component<{ } /> - - - {props.primary ? - longDate(props.note.post?.created_at) : - date(props.note.post?.created_at).label} - { return dtf.format(date); }; +export const veryLongDate = (timestamp: number | undefined) => { + if (!timestamp || timestamp < 0) { + return ''; + } + const date = new Date(timestamp * 1000); + const dtf = new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short'}); + + return dtf.format(date); +}; + export const date = (postTimestamp: number, style: Intl.RelativeTimeFormatStyle = 'short', since?: number) => { const today = since ?? Math.floor((new Date()).getTime() / 1000); const date = new Date(postTimestamp * 1000); diff --git a/src/pages/Thread.tsx b/src/pages/Thread.tsx index fb84ea7..b4bf9fc 100644 --- a/src/pages/Thread.tsx +++ b/src/pages/Thread.tsx @@ -3,9 +3,7 @@ import Note from '../components/Note/Note'; import styles from './Thread.module.scss'; import { useNavigate, useParams } from '@solidjs/router'; import { PrimalNote, SendNoteResult } from '../types/primal'; -import NotePrimary from '../components/Note/NotePrimary/NotePrimary'; import PeopleList from '../components/PeopleList/PeopleList'; -import PageNav from '../components/PageNav/PageNav'; import ReplyToNote from '../components/ReplyToNote/ReplyToNote'; import { nip19 } from 'nostr-tools'; @@ -13,7 +11,6 @@ import { useThreadContext } from '../contexts/ThreadContext'; import Wormhole from '../components/Wormhole/Wormhole'; import { useAccountContext } from '../contexts/AccountContext'; import { sortByRecency } from '../stores/note'; -import { scrollWindowTo } from '../lib/scroll'; import { useIntl } from '@cookbook/solid-intl'; import Search from '../components/Search/Search'; import { placeholders as tPlaceholders, thread as t } from '../translations';