feat(mentions): inbox window, toolbar badge, chat-history tab, ui-config + i18n

src/components/mentions/MentionRowView.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { IMentionEntry } from '../../api';
+import { Flex, Text } from '../../common';
+
+interface MentionRowViewProps
+{
+    mention: IMentionEntry;
+    onClick: (mention: IMentionEntry) => void;
+}
+
+export const MentionRowView: FC<MentionRowViewProps> = props =>
+{
+    const { mention, onClick } = props;
+
+    return (
+        <Flex pointer alignItems="center" className="p-1 hover:bg-black/5" gap={ 2 } onClick={ () => onClick(mention) }>
+            <span
+                className={ `inline-block w-[8px] h-[8px] rounded-full shrink-0 ${ mention.read ? 'bg-transparent' : 'bg-[#1e7295]' }` } />
+            <Flex grow column className="min-w-0" gap={ 0 }>
+                <Flex alignItems="center" gap={ 1 }>
+                    <Text bold={ !mention.read } truncate variant="primary">{ mention.senderUsername }</Text>
+                    { (mention.roomName && mention.roomName.length > 0) &&
+                        <Text small truncate variant="gray">{ mention.roomName }</Text> }
+                </Flex>
+                <Text truncate variant="black">{ mention.message }</Text>
+            </Flex>
+        </Flex>
+    );
+};

src/components/mentions/MentionsView.tsx

@@ -0,0 +1,43 @@
+import { MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../api';
+import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { useMentionsSnapshot } from '../../hooks';
+import { markAllRead } from '../../hooks/mentions/mentionsStore';
+import { MentionRowView } from './MentionRowView';
+import { useMentionRowClick } from './useMentionRowClick';
+
+interface MentionsViewProps
+{
+    onClose: () => void;
+}
+
+export const MentionsView: FC<MentionsViewProps> = props =>
+{
+    const { onClose } = props;
+    const { mentions } = useMentionsSnapshot();
+    const onRowClick = useMentionRowClick();
+
+    const onMarkAll = useCallback(() =>
+    {
+        markAllRead();
+        SendMessageComposer(new MarkMentionsReadComposer(0, 0));
+    }, []);
+
+    return (
+        <NitroCardView className="w-[340px] h-[420px]" theme="primary-slim" uniqueKey="mentions">
+            <NitroCardHeaderView headerText={ LocalizeText('mentions.window.title') } onCloseClick={ onClose } />
+            <NitroCardContentView gap={ 1 }>
+                <Flex grow column className="min-h-0 overflow-y-auto" gap={ 0 }>
+                    { (mentions.length === 0)
+                        ? <Text center variant="gray">{ LocalizeText('mentions.window.empty') }</Text>
+                        : mentions.map(mention => (
+                            <MentionRowView key={ mention.mentionId } mention={ mention } onClick={ onRowClick } />
+                        )) }
+                </Flex>
+                { (mentions.length > 0) &&
+                    <Button variant="primary" onClick={ onMarkAll }>{ LocalizeText('mentions.window.markall') }</Button> }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/components/mentions/index.ts

@@ -0,0 +1,3 @@
+export * from './MentionRowView';
+export * from './MentionsView';
+export * from './useMentionRowClick';

src/components/mentions/useMentionRowClick.ts

@@ -0,0 +1,20 @@
+import { CreateLinkEvent, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
+import { useCallback } from 'react';
+import { IMentionEntry, SendMessageComposer } from '../../api';
+import { markRead } from '../../hooks/mentions/mentionsStore';
+
+// Shared row-click handler used by both MentionsView and the chat-history
+// "Menzioni" tab so the mark-read + room-navigation behaviour can't diverge.
+export const useMentionRowClick = (): ((mention: IMentionEntry) => void) =>
+{
+    return useCallback((mention: IMentionEntry) =>
+    {
+        if(!mention.read)
+        {
+            markRead(mention.mentionId);
+            SendMessageComposer(new MarkMentionsReadComposer(1, mention.mentionId));
+        }
+
+        if(mention.roomId > 0) CreateLinkEvent(`navigator/goto/${ mention.roomId }`);
+    }, []);
+};