From 97ffcd88e2661397af33617c373c7e73d40b83b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Fri, 6 Mar 2026 16:03:34 +0100 Subject: [PATCH] nicolium: announcement reactions bar UI consistency MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../src/components/animated-number.tsx | 2 +- .../src/components/announcements/reaction.tsx | 33 ++-- .../announcements/reactions-bar.tsx | 21 +- .../statuses/status-reactions-bar.tsx | 1 - .../status/components/detailed-status.tsx | 186 +++++++++--------- .../src/features/status/components/thread.tsx | 2 +- .../nicolium/src/styles/new/statuses.scss | 9 +- 7 files changed, 141 insertions(+), 113 deletions(-) diff --git a/packages/nicolium/src/components/animated-number.tsx b/packages/nicolium/src/components/animated-number.tsx index 99d786f4b..9ad13f274 100644 --- a/packages/nicolium/src/components/animated-number.tsx +++ b/packages/nicolium/src/components/animated-number.tsx @@ -85,7 +85,7 @@ const AnimatedNumber: React.FC = ({ value, obfuscate, short, ma }); if (reduceMotion) { - return <>{formattedValue}; + return formattedValue; } return ( diff --git a/packages/nicolium/src/components/announcements/reaction.tsx b/packages/nicolium/src/components/announcements/reaction.tsx index f01b6f8d5..0362617c9 100644 --- a/packages/nicolium/src/components/announcements/reaction.tsx +++ b/packages/nicolium/src/components/announcements/reaction.tsx @@ -1,6 +1,7 @@ import { animated, type AnimatedProps } from '@react-spring/web'; import clsx from 'clsx'; import React, { useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import AnimatedNumber from '@/components/animated-number'; import unicodeMapping from '@/features/emoji/mapping'; @@ -10,6 +11,13 @@ import Emoji from './emoji'; import type { AnnouncementReaction, CustomEmoji } from 'pl-api'; +const messages = defineMessages({ + emojiCount: { + id: 'status.reactions.label', + defaultMessage: '{count} {count, plural, one {person} other {people}} reacted with {emoji}', + }, +}); + interface IReaction { announcementId: string; reaction: AnnouncementReaction; @@ -18,6 +26,7 @@ interface IReaction { } const Reaction: React.FC = ({ announcementId, reaction, emojiMap, style }) => { + const intl = useIntl(); const [hovered, setHovered] = useState(false); const { addReaction, removeReaction } = useAnnouncements(); @@ -46,25 +55,23 @@ const Reaction: React.FC = ({ announcementId, reaction, emojiMap, sty return ( - - - - + + +

- +

); }; diff --git a/packages/nicolium/src/components/announcements/reactions-bar.tsx b/packages/nicolium/src/components/announcements/reactions-bar.tsx index 463b1924c..479183782 100644 --- a/packages/nicolium/src/components/announcements/reactions-bar.tsx +++ b/packages/nicolium/src/components/announcements/reactions-bar.tsx @@ -1,15 +1,22 @@ import { useTransition } from '@react-spring/web'; import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import EmojiPickerDropdown from '@/features/emoji/containers/emoji-picker-dropdown-container'; import { useAnnouncements } from '@/queries/announcements/use-announcements'; import { useSettings } from '@/stores/settings'; +import Icon from '../ui/icon'; + import Reaction from './reaction'; import type { Emoji, NativeEmoji } from '@/features/emoji'; import type { AnnouncementReaction, CustomEmoji } from 'pl-api'; +const messages = defineMessages({ + addEmoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, +}); + interface IReactionsBar { announcementId: string; reactions: Array; @@ -17,6 +24,7 @@ interface IReactionsBar { } const ReactionsBar: React.FC = ({ announcementId, reactions, emojiMap }) => { + const intl = useIntl(); const { reduceMotion } = useSettings(); const { addReaction } = useAnnouncements(); @@ -41,7 +49,7 @@ const ReactionsBar: React.FC = ({ announcementId, reactions, emoj }); return ( -
+
{transitions(({ scale }, reaction) => ( = ({ announcementId, reactions, emoj /> ))} - {visibleReactions.length < 8 && } + {visibleReactions.length < 8 && ( + + + + )}
); }; diff --git a/packages/nicolium/src/components/statuses/status-reactions-bar.tsx b/packages/nicolium/src/components/statuses/status-reactions-bar.tsx index 30e4e2395..30357438d 100644 --- a/packages/nicolium/src/components/statuses/status-reactions-bar.tsx +++ b/packages/nicolium/src/components/statuses/status-reactions-bar.tsx @@ -90,7 +90,6 @@ const StatusReaction: React.FC = ({ className={clsx('⁂-status-reactions-bar__button', { '⁂-status-reactions-bar__button--active': reaction.me, })} - key={reaction.name} onClick={handleClick} title={intl.formatMessage(messages.emojiCount, { emoji: `:${shortCode}:`, diff --git a/packages/nicolium/src/features/status/components/detailed-status.tsx b/packages/nicolium/src/features/status/components/detailed-status.tsx index 1fb5b7529..cc305d82c 100644 --- a/packages/nicolium/src/features/status/components/detailed-status.tsx +++ b/packages/nicolium/src/features/status/components/detailed-status.tsx @@ -98,112 +98,110 @@ const DetailedStatus: React.FC = ({ if (!account) return null; return ( -
-
- {renderStatusInfo()} +
+ {renderStatusInfo()} - {actualStatus.rss_feed ? ( - - ) : ( -
- -
- )} + {actualStatus.rss_feed ? ( + + ) : ( +
+ +
+ )} - + - - - - + + + + - {!status.rss_feed && ( - <> - + {!status.rss_feed && ( + <> + - - + + - - - - - - - + + + + + + + - {actualStatus.application && ( - <> - - - {actualStatus.application.name} - - - )} + {actualStatus.application && ( + <> + + + {actualStatus.application.name} + + + )} - {actualStatus.edited_at && ( - <> - - - - )} - - - + {actualStatus.edited_at && ( + <> + + + + )} + + + - + - - + - - )} -
+ + + )}
); }; diff --git a/packages/nicolium/src/features/status/components/thread.tsx b/packages/nicolium/src/features/status/components/thread.tsx index bb33a02a4..f54731846 100644 --- a/packages/nicolium/src/features/status/components/thread.tsx +++ b/packages/nicolium/src/features/status/components/thread.tsx @@ -303,7 +303,7 @@ const Thread = ({ }); setTimeout(() => { - (node.current?.querySelector('.detailed-actualStatus') as HTMLDivElement)?.focus(); + (node.current?.querySelector('.⁂-detailed-status') as HTMLDivElement)?.focus(); }, 100); }, 0); }, [status.id, statusIndex]); diff --git a/packages/nicolium/src/styles/new/statuses.scss b/packages/nicolium/src/styles/new/statuses.scss index 333b8abb5..d64c3294c 100644 --- a/packages/nicolium/src/styles/new/statuses.scss +++ b/packages/nicolium/src/styles/new/statuses.scss @@ -20,8 +20,15 @@ @apply mb-1 block text-sm text-gray-700 dark:text-gray-600; } +.⁂-status, +.⁂-detailed-status { + .⁂-status-reactions-bar { + padding-top: 0.5rem; + } +} + .⁂-status-reactions-bar { - @apply flex gap-2 flex-wrap pt-2; + @apply flex gap-2 flex-wrap; &__button { @apply flex cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-gray-400 px-1.5 py-1 transition-all bg-transparent dark:border-primary-700 dark:bg-primary-700 black:border-primary-800 black:bg-primary-800;