feat: add unique initials and user list

hugohutri · hugohutri · commit 08d258a3f6ce · 2025-04-24T12:41:06.000+03:00
diff --git a/src/hooks/useGuests.tsx b/src/hooks/useGuests.tsx
@@ -137,6 +137,45 @@ export const getInitials = (guest: Guest) => {
     .toUpperCase();
 };
 
+const getSuperscriptNumber = (num: number): string => {
+  const superscriptDigits = ['⁰', '¹', '²', '³', '⁴', '⁵', '⁶', '⁷', '⁸', '⁹'];
+
+  // Convert number to string and map each digit to its superscript equivalent
+  return num
+    .toString()
+    .split('')
+    .map((digit) => superscriptDigits[parseInt(digit)])
+    .join('');
+};
+
+export const useUniqueInitials = (guest?: Guest) => {
+  const { guests } = useGuests();
+
+  if (!guest) return undefined;
+  const initials = getInitials(guest);
+
+  // Get all guests with the same initials
+  const guestsWithSameInitials = guests.filter(
+    (g) => getInitials(g) === initials && g.name !== guest.name
+  );
+
+  // If no duplicates, return regular initials
+  if (guestsWithSameInitials.length === 0) {
+    return initials;
+  }
+
+  // Sort guests by name to ensure consistent ordering
+  const sortedGuests = [guest, ...guestsWithSameInitials].sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+
+  // Find index of current guest in sorted array (adding 1 to make it 1-based)
+  const currentIndex = sortedGuests.findIndex((g) => g.name === guest.name) + 1;
+
+  // Return initials with superscript number
+  return `${initials}${getSuperscriptNumber(currentIndex)}`;
+};
+
 // Name guests with same name like this:
 // John Doe, John Doe (2), John Doe (3), John Doe (4)
 const getNextAvailableName = (guests: Guest[], guest: Guest) => {
diff --git a/src/pages/editor/Editor.tsx b/src/pages/editor/Editor.tsx
@@ -5,7 +5,7 @@ import { Canvas } from './components/Canvas';
 import 'react-indiana-drag-scroll/dist/style.css';
 import { ColorInfo } from './components/ColorInfo';
 import { SeatInfo } from './components/SeatInfo';
-
+import { UserListInfo } from './components/UserListInfo';
 export const Editor = () => {
   return (
     <Grid>
@@ -14,6 +14,7 @@ export const Editor = () => {
         <InfoBoxes>
           <ColorInfo />
           <SeatInfo />
+          <UserListInfo />
         </InfoBoxes>
       </CanvasWindow>
 
diff --git a/src/pages/editor/components/UserListInfo.tsx b/src/pages/editor/components/UserListInfo.tsx
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { Body } from '../../../components/uikit/Body';
+import { Guest } from '../../../hooks/types';
+import { useGuests, useUniqueInitials } from '../../../hooks/useGuests';
+import { InfoContainer } from './InfoContainer';
+
+export const UserListInfo = () => {
+  const guests = useGuests((s) => s.guests);
+
+  return (
+    <InfoContainer>
+      <Body variant="bold">Guests</Body>
+      <div
+        style={{ display: 'flex', flexDirection: 'column', gap: '0.125rem' }}
+      >
+        {guests.map((guest) => (
+          <GuestName key={guest.name} guest={guest} />
+        ))}
+      </div>
+    </InfoContainer>
+  );
+};
+
+const GuestName = ({ guest }: { guest: Guest }) => {
+  const initials = useUniqueInitials(guest);
+  return (
+    <StyledName>
+      {guest.name} ({initials})
+    </StyledName>
+  );
+};
+
+const StyledName = styled.span`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+`;
diff --git a/src/pages/editor/components/table/Seat.tsx b/src/pages/editor/components/table/Seat.tsx
@@ -2,7 +2,7 @@ import { MouseEventHandler, useState } from 'react';
 import styled from 'styled-components';
 import { PaperSvg } from '../../../../components/PaperSvg';
 import { Seat as SeatType, Side } from '../../../../hooks/types';
-import { getInitials, useGuests } from '../../../../hooks/useGuests';
+import { useGuests, useUniqueInitials } from '../../../../hooks/useGuests';
 import { useHighlightedSeats } from '../../../../hooks/useSeatHighlight';
 import { SEAT_SIZE } from '../config';
 import { useJesse } from '../Jesse';
@@ -35,6 +35,8 @@ export const Seat = ({ seat }: { seat: SeatType }) => {
 
   const highlight = getHighlight();
 
+  const initials = useUniqueInitials(guest);
+
   return (
     <StyledSeat
       id={seat.id}
@@ -51,7 +53,7 @@ export const Seat = ({ seat }: { seat: SeatType }) => {
         height={SEAT_SIZE}
         color={highlight.color}
       />
-      {guest && <GuestName>{getInitials(guest)}</GuestName>}
+      {guest && <GuestName>{initials}</GuestName>}
       {guest && isHovering && <Tooltip side={seat.side}>{guest.name}</Tooltip>}
     </StyledSeat>
   );
