'init'

app/components/MentionList/MentionList.tsx

@@ -0,0 +1,74 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Box, Divider, Flex } from "@mantine/core";
+import { MentionRow } from "./MentionRow";
+import React, { useState } from "react";
+import { useHotkeys } from "@mantine/hooks";
+
+export interface Mention {
+    username: string;
+    title: string;
+    publicKey: string;
+}
+
+interface MentionListProps {
+    mentions: Mention[];
+    style?: React.CSSProperties;
+    onSelectMention?: (mention: Mention) => void;
+}
+
+export function MentionList(props: MentionListProps) {
+    const colors = useRosettaColors();
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+
+    useHotkeys([
+        ['ArrowDown', () => {
+            if(props.mentions.length === 1){
+                //setSelectedIndex(0);
+                return;
+            }
+            setSelectedIndex((prev) => (prev + 1) % props.mentions.length);
+        }],
+        ['ArrowUp', () => {
+            if(props.mentions.length === 1){
+                //setSelectedIndex(0);
+                return;
+            }
+            setSelectedIndex((prev) => (prev - 1 + props.mentions.length) % props.mentions.length);
+        }],
+        ['Enter', () => {
+            if(props.mentions.length === 1){
+                if(props.onSelectMention){
+                    props.onSelectMention(props.mentions[0]);
+                }
+                return;
+            }
+            if(selectedIndex >= 0 && selectedIndex < props.mentions.length) {
+                const mention = props.mentions[selectedIndex];
+                if(props.onSelectMention){
+                    props.onSelectMention(mention);
+                }
+            }
+        }]
+    ], [], true);  
+
+    const onClick = (mention: Mention) => {
+        if(props.onSelectMention){
+            props.onSelectMention(mention);
+        }
+    } 
+
+    return (
+        <Box style={props.style} bg={colors.mainColor}>
+            <Flex direction={'column'}>                        
+                {props.mentions.map((mention, index) => (
+                    <Box onClick={() => onClick(mention)} key={mention.publicKey}> 
+                        <MentionRow selected={selectedIndex === index} {...mention}></MentionRow> 
+                        {index < props.mentions.length - 1 && 
+                            <Divider color={colors.borderColor}></Divider>
+                        }
+                    </Box>
+                ))}
+            </Flex>
+        </Box>
+    );
+}

app/components/MentionList/MentionRow.tsx

@@ -0,0 +1,39 @@
+import { Avatar, Flex, Text, useMantineTheme } from "@mantine/core";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
+import { Mention } from "./MentionList";
+
+interface MentionRowProps extends Mention {
+    selected?: boolean;
+}
+
+export function MentionRow(props : MentionRowProps) {
+    const colors = useRosettaColors();
+    const avatars = useAvatars(props.publicKey, false);
+    const theme = useMantineTheme();
+
+    return (
+        <Flex align={'center'} bg={props.selected ? theme.colors.blue[8] + "10" : undefined} style={{
+            cursor: 'pointer'
+        }} gap={'sm'} p={'xs'} direction={'row'}>
+            {props.username == 'all' && <Avatar title="@" variant="filled" color={colors.brandColor}>@</Avatar>}
+            {props.username == 'admin' && <Avatar title="@" variant="filled" color={colors.error}>@</Avatar>}
+            {props.username != 'all' && props.username != 'admin' && <Avatar 
+                title={props.title} 
+                variant="filled" 
+                color="initials"
+                src={avatars.length > 0 ? avatars[0].avatar : null}
+            ></Avatar>}
+            <Flex direction={'column'}>
+                <Flex justify={'row'} align={'center'} gap={3}>
+                    <Text size="sm" fw={500}>
+                        {props.username == 'all' && 'All users'}
+                        {props.username == 'admin' && 'Administrator'}
+                        {props.username != 'all' && props.username != 'admin' && props.title}
+                    </Text>
+                </Flex>
+                <Text size={'xs'} c={'dimmed'}>@{props.username}</Text>
+            </Flex>
+        </Flex>
+    )
+}