pop that shit

packages/desktop/src/components/ConversationDetails.tsx

@@ -92,6 +92,7 @@ export default function ConversationDetails() {
           <ConversationLabel
             users={selectedConversation.userCache ?? []}
             conversationName={selectedConversation.name}
+            isSelected={true}
           />
         </Box>
 

packages/desktop/src/components/ConversationList.tsx

@@ -117,6 +117,7 @@ function ConversationRow({ conversation }: { conversation: Conversation }) {
           <ConversationLabel
             users={conversation.userCache ?? []}
             conversationName={conversation.name}
+            isSelected={selectedConversation?.id === conversation.id}
           />
         </Box>
 

packages/desktop/src/components/NewConversationDialog.tsx

@@ -26,6 +26,7 @@ import { User } from '@nirvana/core/src/models/user.model';
 import useAuth from '../providers/AuthProvider';
 import UserDetailRow from '../subcomponents/UserDetailRow';
 import CircularProgress from '@mui/material/CircularProgress';
+import { NirvanaRules } from '../util/rules';
 
 export default function NewConversationDialog({
   open,
@@ -106,7 +107,12 @@ export default function NewConversationDialog({
 
   const handleSubmitLocal = useCallback(async () => {
     if (selectedUsers.length === 0) {
-      enqueueSnackbar('Must a person!', { variant: 'error' });
+      enqueueSnackbar('Must select a person!', { variant: 'error' });
+      return;
+    }
+
+    if (selectedUsers.length + 1 >= NirvanaRules.maxMembersPerConversation) {
+      enqueueSnackbar('A group can only have 8 people including you!', { variant: 'error' });
       return;
     }
 

packages/desktop/src/subcomponents/ConversationLabel.tsx

@@ -5,7 +5,7 @@ import { User } from '@nirvana/core/src/models/user.model';
 import { Typography } from '@mui/material';
 import useAuth from '../providers/AuthProvider';
 
-type IConversationLabel =
+type IConversationLabel = (
   | {
       conversationName?: string;
       users: User[];
@@ -13,18 +13,28 @@ type IConversationLabel =
   | {
       conversationName: string;
       users?: User[];
-    };
+    }
+) & { isSelected?: boolean };
 
 /**
  * if there is a name in the conversation, then return that
  * if not, then return first three names
  */
-export default function ConversationLabel({ conversationName, users }: IConversationLabel) {
+export default function ConversationLabel({
+  conversationName,
+  users,
+  isSelected = false,
+}: IConversationLabel) {
   const { user } = useAuth();
 
   if (conversationName) {
     return (
-      <Typography noWrap variant="overline">
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
         {conversationName}
       </Typography>
     );
@@ -36,7 +46,12 @@ export default function ConversationLabel({ conversationName, users }: IConversa
     const firstName = filteredUsers[0].displayName.split(' ')[0];
 
     return (
-      <Typography noWrap variant="overline">
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
         {firstName}
       </Typography>
     );
@@ -48,7 +63,12 @@ export default function ConversationLabel({ conversationName, users }: IConversa
     const formattedFirstnames = firstNames.slice(0, -1).join(',') + ' and ' + firstNames.slice(-1);
 
     return (
-      <Typography noWrap variant="overline">
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
         {formattedFirstnames}
       </Typography>
     );

packages/desktop/src/util/rules.ts

@@ -0,0 +1,5 @@
+// the rules of the game
+
+export const NirvanaRules = {
+  maxMembersPerConversation: 8,
+};