nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-10-01 17:31:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Collapse few zaps into a single row. Show three dots only when thee are more zaps than displayed

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-04-22 17:47:32 +02:00
parent a0be83b564
commit 8570fd4611
2 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Note/Note.module.scss
View File

@ -335,6 +335,12 @@
gap: 8px; gap: 8px;
align-items: flex-start; align-items: flex-start;
&.onlyFew {
flex-direction: row;
align-items: center;
gap: 6px;
}
.firstZap { .firstZap {
display: flex; display: flex;
align-items: center; align-items: center;

92
src/components/Note/Note.tsx
View File

@ -35,6 +35,7 @@ export type NoteFooterState = {
isZapping: boolean, isZapping: boolean,
showZapAnim: boolean, showZapAnim: boolean,
hideZapIcon: boolean, hideZapIcon: boolean,
moreZapsAvailable: boolean,
isRepostMenuVisible: boolean, isRepostMenuVisible: boolean,
}; };
@ -58,7 +59,7 @@ const Note: Component<{
threadContext?.actions.setPrimaryNote(note); threadContext?.actions.setPrimaryNote(note);
}; };
const [footerState, updateFooterState] = createStore({ const [reactionsState, updateReactionsState] = createStore<NoteFooterState>({
likes: props.note.post.likes, likes: props.note.post.likes,
liked: props.note.post.noteActions.liked, liked: props.note.post.noteActions.liked,
reposts: props.note.post.reposts, reposts: props.note.post.reposts,
@ -73,6 +74,7 @@ const Note: Component<{
isZapping: false, isZapping: false,
showZapAnim: false, showZapAnim: false,
hideZapIcon: false, hideZapIcon: false,
moreZapsAvailable: false,
isRepostMenuVisible: false, isRepostMenuVisible: false,
}); });
@ -81,11 +83,11 @@ const Note: Component<{
const onConfirmZap = (zapOption: ZapOption) => { const onConfirmZap = (zapOption: ZapOption) => {
app?.actions.closeCustomZapModal(); app?.actions.closeCustomZapModal();
batch(() => { batch(() => {
updateFooterState('zappedAmount', () => zapOption.amount || 0); updateReactionsState('zappedAmount', () => zapOption.amount || 0);
updateFooterState('satsZapped', (z) => z + (zapOption.amount || 0)); updateReactionsState('satsZapped', (z) => z + (zapOption.amount || 0));
// updateFooterState('zappedNow', () => true); // updateFooterState('zappedNow', () => true);
updateFooterState('zapped', () => true); updateReactionsState('zapped', () => true);
updateFooterState('showZapAnim', () => true) updateReactionsState('showZapAnim', () => true)
}); });
}; };
@ -93,13 +95,13 @@ const Note: Component<{
app?.actions.closeCustomZapModal(); app?.actions.closeCustomZapModal();
app?.actions.resetCustomZap(); app?.actions.resetCustomZap();
batch(() => { batch(() => {
updateFooterState('zapCount', (z) => z + 1); updateReactionsState('zapCount', (z) => z + 1);
// updateFooterState('satsZapped', (z) => z + (zapOption.amount || 0)); // updateFooterState('satsZapped', (z) => z + (zapOption.amount || 0));
updateFooterState('isZapping', () => false); updateReactionsState('isZapping', () => false);
// updateFooterState('zappedNow', () => false); // updateFooterState('zappedNow', () => false);
updateFooterState('showZapAnim', () => false); updateReactionsState('showZapAnim', () => false);
updateFooterState('hideZapIcon', () => false); updateReactionsState('hideZapIcon', () => false);
updateFooterState('zapped', () => true); updateReactionsState('zapped', () => true);
}); });
}; };
@ -107,13 +109,13 @@ const Note: Component<{
app?.actions.closeCustomZapModal(); app?.actions.closeCustomZapModal();
app?.actions.resetCustomZap(); app?.actions.resetCustomZap();
batch(() => { batch(() => {
updateFooterState('zappedAmount', () => -(zapOption.amount || 0)); updateReactionsState('zappedAmount', () => -(zapOption.amount || 0));
updateFooterState('satsZapped', (z) => z - (zapOption.amount || 0)); updateReactionsState('satsZapped', (z) => z - (zapOption.amount || 0));
updateFooterState('isZapping', () => false); updateReactionsState('isZapping', () => false);
// updateFooterState('zappedNow', () => true); // updateFooterState('zappedNow', () => true);
updateFooterState('showZapAnim', () => false); updateReactionsState('showZapAnim', () => false);
updateFooterState('hideZapIcon', () => false); updateReactionsState('hideZapIcon', () => false);
updateFooterState('zapped', () => props.note.post.noteActions.zapped); updateReactionsState('zapped', () => props.note.post.noteActions.zapped);
}); });
}; };
@ -121,13 +123,13 @@ const Note: Component<{
app?.actions.closeCustomZapModal(); app?.actions.closeCustomZapModal();
app?.actions.resetCustomZap(); app?.actions.resetCustomZap();
batch(() => { batch(() => {
updateFooterState('zappedAmount', () => -(zapOption.amount || 0)); updateReactionsState('zappedAmount', () => -(zapOption.amount || 0));
updateFooterState('satsZapped', (z) => z - (zapOption.amount || 0)); updateReactionsState('satsZapped', (z) => z - (zapOption.amount || 0));
updateFooterState('isZapping', () => false); updateReactionsState('isZapping', () => false);
// updateFooterState('zappedNow', () => true); // updateFooterState('zappedNow', () => true);
updateFooterState('showZapAnim', () => false); updateReactionsState('showZapAnim', () => false);
updateFooterState('hideZapIcon', () => false); updateReactionsState('hideZapIcon', () => false);
updateFooterState('zapped', () => props.note.post.noteActions.zapped); updateReactionsState('zapped', () => props.note.post.noteActions.zapped);
}); });
}; };
@ -141,9 +143,9 @@ const Note: Component<{
const openReactionModal = (openOn = 'likes') => { const openReactionModal = (openOn = 'likes') => {
app?.actions.openReactionModal(props.note.post.id, { app?.actions.openReactionModal(props.note.post.id, {
likes: footerState.likes, likes: reactionsState.likes,
zaps: footerState.zapCount, zaps: reactionsState.zapCount,
reposts: footerState.reposts, reposts: reactionsState.reposts,
quotes: 0, quotes: 0,
openOn, openOn,
}); });
@ -161,16 +163,17 @@ const Note: Component<{
} }
const reactionSum = () => { const reactionSum = () => {
const { likes, zapCount, reposts } = footerState; const { likes, zapCount, reposts } = reactionsState;
return (likes || 0) + (zapCount || 0) + (reposts || 0); return (likes || 0) + (zapCount || 0) + (reposts || 0);
}; };
const firstZap = createMemo(() => (threadContext?.topZaps[props.note.post.id] || [])[0]); const topZaps = createMemo( () => threadContext?.topZaps[props.note.post.id] || []);
const topZaps = createMemo(() => { const firstZap = createMemo(() => topZaps()[0]);
// return (threadContext?.topZaps[props.note.post.id] || []).slice(1);
const zaps = (threadContext?.topZaps[props.note.post.id] || []).slice(1); const restZaps = createMemo(() => {
const zaps = topZaps().slice(1);
let limit = 0; let limit = 0;
let digits = 0; let digits = 0;
@ -186,7 +189,16 @@ const Note: Component<{
limit++; limit++;
} }
return zaps.slice(0, limit); const rest = zaps.slice(0, limit);
if (rest.length < reactionsState.zapCount - 1) {
updateReactionsState('moreZapsAvailable', () => true);
}
else {
updateReactionsState('moreZapsAvailable', () => false);
}
return rest;
}) })
const zapSender = (zap: TopZap) => { const zapSender = (zap: TopZap) => {
@ -213,8 +225,8 @@ const Note: Component<{
<div class={styles.footer}> <div class={styles.footer}>
<NoteFooter <NoteFooter
note={props.note} note={props.note}
state={footerState} state={reactionsState}
updateState={updateFooterState} updateState={updateReactionsState}
customZapInfo={customZapInfo()} customZapInfo={customZapInfo()}
/> />
</div> </div>
@ -247,7 +259,7 @@ const Note: Component<{
<ParsedNote note={props.note} width={Math.min(574, window.innerWidth)} /> <ParsedNote note={props.note} width={Math.min(574, window.innerWidth)} />
</div> </div>
<div class={styles.zapHighlights}> <div class={`${styles.zapHighlights} ${topZaps().length < 4 ? styles.onlyFew : ''}`}>
<Show when={firstZap()}> <Show when={firstZap()}>
<button <button
class={styles.firstZap} class={styles.firstZap}
@ -264,7 +276,7 @@ const Note: Component<{
</Show> </Show>
<div class={styles.topZaps}> <div class={styles.topZaps}>
<div class={styles.zapList}> <div class={styles.zapList}>
<For each={topZaps()}> <For each={restZaps()}>
{zap => ( {zap => (
<button <button
class={styles.topZap} class={styles.topZap}
@ -279,7 +291,7 @@ const Note: Component<{
</For> </For>
</div> </div>
<Show when={topZaps().length > 0}> <Show when={reactionsState.moreZapsAvailable}>
<button <button
class={styles.moreZaps} class={styles.moreZaps}
onClick={() => openReactionModal('zaps')} onClick={() => openReactionModal('zaps')}
@ -308,8 +320,8 @@ const Note: Component<{
<NoteFooter <NoteFooter
note={props.note} note={props.note}
state={footerState} state={reactionsState}
updateState={updateFooterState} updateState={updateReactionsState}
customZapInfo={customZapInfo()} customZapInfo={customZapInfo()}
wide={true} wide={true}
large={true} large={true}
@ -371,8 +383,8 @@ const Note: Component<{
<NoteFooter <NoteFooter
note={props.note} note={props.note}
state={footerState} state={reactionsState}
updateState={updateFooterState} updateState={updateReactionsState}
customZapInfo={customZapInfo()} customZapInfo={customZapInfo()}
/> />
</div> </div>