Add editing/deleting properly

src/app/game/berry-dash/chatroom/page.tsx

@@ -1,9 +1,13 @@
 'use client'
 
+import './styles.css'
 import { BackButton } from '@/app/components/BackButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
 import { GetIconForUser } from '@/util/bd'
 import { getCookie } from '@/util/cookie'
+import { faTrashCan } from '@fortawesome/free-regular-svg-icons'
+import { faPencil } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import axios from 'axios'
 import { useEffect, useRef, useState } from 'react'
 
@@ -37,6 +41,7 @@ interface CustomIconEntry {
 export default function BerryDashChatroom () {
   const [connected, setConnected] = useState<boolean>(false)
   const [loggedIn, setLoggedIn] = useState<boolean>(false)
+  const [editing, setEditing] = useState<boolean>(false)
   const [token, setToken] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([])
@@ -178,43 +183,55 @@ export default function BerryDashChatroom () {
                     height={48}
                   ></img>
                   <div>
-                    <p>{item.username}</p>
-                    <p
-                      className='w-240 max-w-[calc(100vw-136px)] truncate select-text'
-                      contentEditable={item.editing}
-                      onDoubleClick={e => {
-                        if (
-                          Number(getCookie('accountId', '-1')) == item.userId
-                        ) {
-                          setMessages(prev =>
-                            prev.map(msg =>
-                              msg.id === item.id
-                                ? {
-                                    ...msg,
-                                    editing: !item.editing
-                                  }
-                                : msg
+                    {item.userId == Number(getCookie('accountId', '-1')) && (
+                      <div className='relative'>
+                        <div
+                          className='actionbutton mr-5'
+                          onClick={() => {
+                            setMessages(prev =>
+                              prev.map(msg =>
+                                msg.id === item.id
+                                  ? {
+                                      ...msg,
+                                      editing: !item.editing
+                                    }
+                                  : msg
+                              )
                             )
-                          )
-                          if (item.editing) {
-                            const text = e.currentTarget.textContent
-                            e.currentTarget.textContent = atob(item.content)
+                            setEditing(true)
+                            setInput(atob(item.content))
+                          }}
+                        >
+                          <FontAwesomeIcon
+                            icon={faPencil}
+                            className='text-[12px]'
+                          />
+                        </div>
+                        <div
+                          className='actionbutton -mr-1.5'
+                          onClick={() => {
                             ws?.send(
                               JSON.stringify({
-                                type: 'edit',
+                                type: 'delete',
                                 kind: 'chatroom_message',
                                 data: {
                                   id: item.id,
-                                  newContent: text,
                                   auth: token
                                 },
                                 timestamp: Date.now()
                               })
                             )
-                          }
-                        }
-                      }}
-                    >
+                          }}
+                        >
+                          <FontAwesomeIcon
+                            icon={faTrashCan}
+                            className='text-[12px] text-red-500'
+                          />
+                        </div>
+                      </div>
+                    )}
+                    <p>{item.username}</p>
+                    <p className='w-240 max-w-[calc(100vw-136px)] truncate select-text'>
                       {atob(item.content)}
                     </p>
                   </div>
@@ -227,29 +244,58 @@ export default function BerryDashChatroom () {
               onSubmit={e => {
                 e.preventDefault()
                 setInput('')
-                ws?.send(
-                  JSON.stringify({
-                    type: 'upload',
-                    kind: 'chatroom_message',
-                    data: {
-                      content: input,
-                      auth: token
-                    },
-                    timestamp: Date.now()
-                  })
-                )
+                if (!editing) {
+                  ws?.send(
+                    JSON.stringify({
+                      type: 'upload',
+                      kind: 'chatroom_message',
+                      data: {
+                        content: input,
+                        auth: token
+                      },
+                      timestamp: Date.now()
+                    })
+                  )
+                } else {
+                  const id = messages.find(item => item.editing === true)?.id
+                  setMessages(prev =>
+                    prev.map(msg =>
+                      msg.id === id
+                        ? {
+                            ...msg,
+                            editing: false
+                          }
+                        : msg
+                    )
+                  )
+                  setEditing(false)
+                  ws?.send(
+                    JSON.stringify({
+                      type: 'edit',
+                      kind: 'chatroom_message',
+                      data: {
+                        id,
+                        newContent: input,
+                        auth: token
+                      },
+                      timestamp: Date.now()
+                    })
+                  )
+                }
               }}
               className='flex flex-row gap-2 -mb-4 mt-6'
             >
               <input
                 type='text'
                 className='w-full -ml-4 text-center'
-                placeholder='Enter a message to send...'
+                placeholder={
+                  !editing ? 'Enter a message to send...' : undefined
+                }
                 maxLength={60}
                 value={input}
                 onChange={e => setInput(e.target.value)}
               ></input>
-              <button className='-mr-4'>Send</button>
+              <button className='-mr-4'>{!editing ? 'Send' : 'Edit'}</button>
             </form>
           ) : (
             <p className='text-center -mb-4 mt-6'>

src/app/game/berry-dash/chatroom/styles.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+.actionbutton {
+  @apply absolute right-0 w-6 h-6 bg-(--col6) hover:bg-(--col8) rounded-full -mt-1.5 flex justify-center items-center cursor-pointer transition-colors;
+}