fix: w2g initial sync state, chat bug on message send

feat: message toasts for w2g

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.3.59",
+	"version": "6.3.60",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",

src/lib/components/ui/chat/MessageToast.svelte

@@ -0,0 +1,24 @@
+<script lang='ts'>
+  import type { ChatMessage } from '.'
+
+  export let msg: ChatMessage
+
+  $: ({ user, message, date } = msg)
+</script>
+
+<div class='w-full flex flex-row-reverse'>
+  <img src={user.avatar?.large ?? 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'} alt='ProfilePicture' class='w-10 h-10 rounded-full p-1 mt-auto' loading='lazy' decoding='async' />
+  <div class='flex flex-col px-2 items-end flex-auto'>
+    <div class='pb-1 flex flex-row items-center px-1'>
+      <div class='font-bold text-sm'>
+        {user.name}
+      </div>
+      <div class='text-muted-foreground pl-2 text-[10px] leading-relaxed'>
+        {date.toLocaleTimeString()}
+      </div>
+    </div>
+    <div class='bg-muted py-2 px-3 rounded-t-xl rounded-l-xl mb-1 select-all text-xs whitespace-pre-wrap max-w-[calc(100%-100px)]'>
+      {message}
+    </div>
+  </div>
+</div>

src/lib/components/ui/chat/Messages.svelte

@@ -21,8 +21,8 @@
 
 {#each groupMessages($messages) as { type, user, date, messages }, i (i)}
   {@const incoming = type === 'incoming'}
-  <div class='message flex flex-row mt-3' class:flex-row={incoming} class:flex-row-reverse={!incoming}>
-    <img src={user.avatar?.large ?? ''} alt='ProfilePicture' class='w-10 h-10 rounded-full p-1 mt-auto' loading='lazy' decoding='async' />
+  <div class='flex flex-row mt-3' class:flex-row={incoming} class:flex-row-reverse={!incoming}>
+    <img src={user.avatar?.large ?? 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'} alt='ProfilePicture' class='w-10 h-10 rounded-full p-1 mt-auto' loading='lazy' decoding='async' />
     <div class='flex flex-col px-2 items-start flex-auto' class:items-start={incoming} class:items-end={!incoming}>
       <div class='pb-1 flex flex-row items-center px-1'>
         <div class='font-bold text-sm'>
@@ -42,12 +42,3 @@
     </div>
   </div>
 {/each}
-
-<style>
-  .message {
-    --base-border-radius: 1.3rem;
-  }
-  .flex-auto {
-    flex: auto;
-  }
-</style>

src/lib/components/ui/chat/UserList.svelte

@@ -18,7 +18,7 @@
   <div>
     {#each processed as [key, user] (key)}
       <div class='flex items-center pb-2'>
-        <img src={user.avatar?.large} alt='ProfilePicture' class='w-10 h-10 rounded-full p-1 mt-auto' loading='lazy' decoding='async' />
+        <img src={user.avatar?.large ?? 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'} alt='ProfilePicture' class='w-10 h-10 rounded-full p-1 mt-auto' loading='lazy' decoding='async' />
         <div class='text-md pl-2'>
           {user.name}
         </div>

src/lib/components/ui/chat/index.ts

@@ -12,3 +12,4 @@ export interface ChatMessage {
 
 export { default as UserList } from './UserList.svelte'
 export { default as Messages } from './Messages.svelte'
+export { default as MessageToast } from './MessageToast.svelte'

src/lib/modules/w2g/index.ts

@@ -3,13 +3,15 @@ import { EventEmitter } from 'events'
 import Debug from 'debug'
 import P2PT, { type Peer } from 'p2pt'
 import { writable } from 'simple-store-svelte'
+import { toast } from 'svelte-sonner'
 
 import client from '../anilist/client.js'
 import { server } from '../torrent'
 
 import Event, { type MediaState, type PlayerState, type W2GEvents } from './events.js'
 
-import type { ChatMessage, ChatUser } from '$lib/components/ui/chat'
+import { page } from '$app/state'
+import { MessageToast, type ChatMessage, type ChatUser } from '$lib/components/ui/chat'
 
 const debug = Debug('ui:w2g')
 
@@ -58,11 +60,11 @@ export class W2GClient extends EventEmitter<{index: [number], player: [PlayerSta
     return `https://hayas.ee/w2g/${this.code}`
   }
 
-  constructor (code: string, isHost: boolean) {
+  constructor (code: string, isHost: boolean, media?: MediaState) {
     super()
     this.isHost = isHost
-
     this.code = code
+    this.media = media
 
     debug(`W2GClient: ${this.code}, ${this.isHost}`)
 
@@ -192,7 +194,14 @@ export class W2GClient extends EventEmitter<{index: [number], player: [PlayerSta
         break
       }
       case 'message': {
-        this.messages.update(messages => [...messages, ({ message: data.payload, user: this.peers.value[peer.id]!.user, type: 'incoming', date: new Date() })])
+        const msg: ChatMessage = { message: data.payload, user: this.peers.value[peer.id]!.user, type: 'incoming', date: new Date() }
+        if (page.route.id !== '/app/w2g/[id]') {
+          toast.custom(MessageToast, {
+            classes: { toast: '!bg-transparent w-full !shadow-none h-auto flex' },
+            componentProps: { msg }
+          })
+        }
+        this.messages.update(messages => [...messages, msg])
         break
       }
       default:

src/routes/+layout.svelte

@@ -26,7 +26,7 @@
 
 <div class='w-full h-full flex flex-col backface-hidden bg-black relative overflow-clip border-l-2 [border-image:linear-gradient(to_bottom,white_var(--progress),#2dcf58_var(--progress))_1] preserve-3d' bind:this={root} id='root' style:--progress='{100 - updateProgress}%'>
   <ProgressBar zIndex={100} />
-  <Toaster />
+  <Toaster position='top-right' expand={true} />
 
   <Menubar />
   <Online />

src/routes/app/w2g/+page.ts

@@ -1,10 +1,13 @@
 import { redirect } from '@sveltejs/kit'
+import { get } from 'svelte/store'
 
+import { server } from '$lib/modules/torrent'
 import { generateRandomHexCode, W2GClient } from '$lib/modules/w2g'
 import { w2globby } from '$lib/modules/w2g/lobby'
 
 export function load () {
-  w2globby.value ??= new W2GClient(generateRandomHexCode(16), true)
+  const lastVal = get(server.last)
+  w2globby.value ??= new W2GClient(generateRandomHexCode(16), true, lastVal?.media.id ? { mediaId: lastVal.media.id, episode: lastVal.episode, torrent: lastVal.id } : undefined)
 
   redirect(302, '/app/w2g/' + w2globby.value.code)
 }

src/routes/app/w2g/[id]/+page.svelte

@@ -29,11 +29,13 @@
   function sendMessage () {
     $w2globby?.message(message.trim())
     message = ''
+    rows = 1
   }
 
   async function checkInput (e: KeyboardEvent) {
     if (e.key === 'Enter' && !e.shiftKey && message.trim()) {
       sendMessage()
+      e.preventDefault()
     } else {
       rows = message.split('\n').length || 1
     }
@@ -58,7 +60,7 @@
 
 <div class='flex flex-col w-full relative px-md-4 h-full overflow-hidden'>
   <div class='flex md:flex-row flex-col-reverse w-full h-full pt-4'>
-    <div class='flex flex-col justify-end overflow-hidden flex-grow px-4 md:pb-4'>
+    <div class='flex flex-col justify-end overflow-hidden flex-grow px-4 pb-4'>
       <Messages {messages} />
       <div class='flex mt-4 gap-2'>
         <Button on:click={quit} size='icon' class='border-0 shrink-0' variant='outline'>