diff --git a/packages/desktop/src/components/ConversationList.tsx b/packages/desktop/src/components/ConversationList.tsx
index f23b295..75193ae 100644
--- a/packages/desktop/src/components/ConversationList.tsx
+++ b/packages/desktop/src/components/ConversationList.tsx
@@ -15,13 +15,14 @@ import {
Typography,
} from '@mui/material';
import { FiActivity, FiCircle, FiSun } from 'react-icons/fi';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useKeyPressEvent, useRendersCount } from 'react-use';
import Conversation from '@nirvana/core/src/models/conversation.model';
import ConversationLabel from '../subcomponents/ConversationLabel';
+import KeyboardShortcutLabel from './KeyboardShortcutLabel';
import { SUPPORT_DISPLAY_NAME } from '../util/support';
import useAuth from '../providers/AuthProvider';
-import { useRendersCount } from 'react-use';
import useTerminal from './Terminal';
// sort conversations based on the different data sources: type, conversations, audio clips, etc.
@@ -69,10 +70,11 @@ export function ConversationList({ lookingForSomeone = false }: { lookingForSome
>
{lookingForSomeone && }
- {Object.values(conversationMap).map((currentConversation) => (
+ {Object.values(conversationMap).map((currentConversation, index) => (
))}
@@ -94,18 +96,37 @@ export function ConversationList({ lookingForSomeone = false }: { lookingForSome
);
}
-export function ConversationRow({ conversation }: { conversation: Conversation }) {
+/**
+ *
+ * @param index is used for keyboard shortcut if this convo row is in a list
+ * @returns
+ */
+export function ConversationRow({
+ conversation,
+ index,
+}: {
+ conversation: Conversation;
+ index?: number;
+}) {
const { user } = useAuth();
const { getUser, selectedConversation, selectConversation } = useTerminal();
const rendersCount = useRendersCount();
console.warn('RENDER COUNT | CONVERSATION LIST ROW | ', rendersCount);
+ const keyboardShortcut = useMemo(() => index + 1, [index]);
+
+ const handleSelectConversation = useCallback(
+ () => selectConversation(conversation.id),
+ [conversation.id, selectConversation],
+ );
+ useKeyPressEvent(`${keyboardShortcut.toString()}`, handleSelectConversation);
+
return (
selectConversation(conversation.id)}
+ onClick={handleSelectConversation}
>
{conversation.membersInRoom?.length > 0 ? (
@@ -117,13 +138,14 @@ export function ConversationRow({ conversation }: { conversation: Conversation }
)}
-
+
+
-
+
diff --git a/packages/desktop/src/components/KeyboardShortcutLabel.tsx b/packages/desktop/src/components/KeyboardShortcutLabel.tsx
index 72d22ae..03979a7 100644
--- a/packages/desktop/src/components/KeyboardShortcutLabel.tsx
+++ b/packages/desktop/src/components/KeyboardShortcutLabel.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
import { Box, Paper, Typography } from '@mui/material';
+
+import React from 'react';
import { blueGrey } from '@mui/material/colors';
export default function KeyboardShortcutLabel({ label }: { label: string }) {
@@ -10,7 +11,6 @@ export default function KeyboardShortcutLabel({ label }: { label: string }) {
sx={{
px: 1,
py: 0.25,
- border: `1px solid`,
bgcolor: blueGrey[50],
color: blueGrey[300],
}}