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,14 +183,11 @@ export default function BerryDashChatroom () {
                     height={48}
                   ></img>
                   <div>
-                    <p>{item.username}</p>
+                    {item.userId == Number(getCookie('accountId', '-1')) && (
-                    <p
+                      <div className='relative'>
-                      className='w-240 max-w-[calc(100vw-136px)] truncate select-text'
+                        <div
-                      contentEditable={item.editing}
+                          className='actionbutton mr-5'
-                      onDoubleClick={e => {
+                          onClick={() => {
-                        if (
-                          Number(getCookie('accountId', '-1')) == item.userId
-                        ) {
                             setMessages(prev =>
                               prev.map(msg =>
                                 msg.id === item.id
@@ -196,25 +198,40 @@ export default function BerryDashChatroom () {
                                   : msg
                               )
                             )
-                          if (item.editing) {
+                            setEditing(true)
-                            const text = e.currentTarget.textContent
+                            setInput(atob(item.content))
-                            e.currentTarget.textContent = 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,6 +244,7 @@ export default function BerryDashChatroom () {
               onSubmit={e => {
                 e.preventDefault()
                 setInput('')
+                if (!editing) {
                   ws?.send(
                     JSON.stringify({
                       type: 'upload',
@@ -238,18 +256,46 @@ export default function BerryDashChatroom () {
                       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;
+}