partyserver and friends

- use `nanoid` for id generation. This lets us control the generated id lengths without sacrificing entropy, and avoids special characters like `-`.
- use `partysocket` as a websocket replacement, that comes inbuilt with buffering, resilience, reconnection, etc
- separates `mode` and `env` in `AppLoadContext`
- avoid a roundtrip when generating a new room
- rewrite the durable object with partyserver
  - enables hibernation
  - responds to pings without waking up the object
  - use the connection to store session data about the user
  - use an alarm to broadcast roomstate every 30 seconds

app/components/MuteUserButton.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useRoomContext } from '~/hooks/useRoomContext'
 import { useUserMetadata } from '~/hooks/useUserMetadata'
-import type { User } from '~/types/Messages'
+import type { ClientMessage, User } from '~/types/Messages'
 import AlertDialog from './AlertDialog'
 import type { ButtonProps } from './Button'
 import { Button } from './Button'
@@ -62,10 +62,12 @@ export const MuteUserButton: FC<MuteUserButtonProps> = ({
 						<AlertDialog.Action asChild>
 							<Button
 								onClick={() => {
-									room.signal.sendMessage({
-										type: 'muteUser',
-										id: user.id,
-									})
+									room.signal.send(
+										JSON.stringify({
+											type: 'muteUser',
+											id: user.id,
+										} satisfies ClientMessage)
+									)
 								}}
 								className="text-sm"
 								displayType="danger"

app/components/Toast.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react'
 import { style } from '~/utils/style'
 
+import { nanoid } from 'nanoid'
+
 export const Root = style(
 	Toast.Root,
 	'bg-white rounded dark:bg-zinc-500 shadow p-3 text-zinc-800 dark:text-zinc-50'
@@ -33,7 +35,7 @@ export const NotificationToastsProvider = (props: { children?: ReactNode }) => {
 				...ms,
 				{
 					...options,
-					id: crypto.randomUUID(),
+					id: nanoid(14),
 					content,
 				},
 			]),