Allow user to set a username; Show list of users on estimation screen

src/pages/Estimation/Estimation.tsx

@@ -7,6 +7,7 @@ import VoteList from './components/VoteList';
 import { Button, ButtonColor, Drawer } from '../../components';
 import CreateTicketForm from './components/CreateTicketForm';
 import CopyInput from '../../components/CopyInput';
+import PlayerList from './components/PlayerList';
 
 const fibonacciSequence = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 100];
 
@@ -35,6 +36,7 @@ const Estimation: React.FC = () => {
         currentPlayerVote,
         currentTicket,
       },
+      players,
     },
   } = estimationState;
 
@@ -84,6 +86,8 @@ const Estimation: React.FC = () => {
         )}
       </div>
 
+      <PlayerList players={players ?? []} />
+
       <Drawer isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}>
         <CreateTicketForm
           onCreate={async (ticket) => {

src/pages/Estimation/components/PlayerList.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { EntityModels } from '../../../lib/types';
+
+interface PlayerListProps {
+  players: EntityModels.Player[];
+  title?: string;
+}
+
+const PlayerList: React.FC<PlayerListProps> = ({
+  players,
+  title = 'Players',
+}) => {
+  return (
+    <div className="w-full max-w-sm rounded-lg bg-white p-6 shadow-lg dark:bg-nero-800">
+      <h2 className="mb-4 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        {title}
+      </h2>
+
+      <ul className="max-h-48 divide-y divide-gray-300 overflow-y-auto dark:divide-gray-600">
+        {players.length > 0 ? (
+          players.map((player, index) => (
+            <li
+              key={index}
+              className="py-2 text-sm text-gray-900 dark:text-gray-100"
+            >
+              {player.name}
+            </li>
+          ))
+        ) : (
+          <li className="text-sm text-gray-500 dark:text-gray-400">
+            No players available
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default PlayerList;

src/pages/Estimation/components/VoteList.tsx

@@ -16,7 +16,7 @@ const VoteList: React.FC<VoteListProps> = ({ className, votes, revealed }) => {
         itemComponent={({ item }, idx) => (
           <Card
             key={idx}
-            title={item.userId}
+            title={item.username}
             description={revealed ? item.estimate : 'Hidden'}
           />
         )}

src/pages/Profile.tsx

@@ -1,5 +1,52 @@
+import { useForm } from '@tanstack/react-form';
+import { Button, Input } from '../components';
+import { useUser } from '../lib/context/user';
+
 const Profile = () => {
-  return <p>TODO</p>;
+  const user = useUser();
+  const updateUsernameForm = useForm({
+    defaultValues: {
+      name: '',
+    },
+    onSubmit: async ({ value }) => {
+      await user.updateUsername(value.name);
+      updateUsernameForm.reset();
+    },
+  });
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 transition-colors dark:bg-nero-900">
+      <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-lg dark:bg-nero-800">
+        <h1 className="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          Update Name
+        </h1>
+        <form
+          className="space-y-6"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            updateUsernameForm.handleSubmit();
+          }}
+        >
+          <updateUsernameForm.Field
+            name="name"
+            children={(field) => (
+              <Input
+                label="Name"
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            )}
+          />
+          <Button type="submit" fullWidth>
+            Update
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
 };
 
 export default Profile;