diff --git a/src/app/content/views/Main/index.tsx b/src/app/content/views/Main/index.tsx
index eff8da4..151b421 100644
--- a/src/app/content/views/Main/index.tsx
+++ b/src/app/content/views/Main/index.tsx
@@ -3,7 +3,6 @@ import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
import MessageList from '../../components/MessageList'
import MessageItem from '../../components/MessageItem'
-import MessageListDomain from '@/domain/MessageList'
import UserInfoDomain from '@/domain/UserInfo'
import RoomDomain from '@/domain/Room'
@@ -11,8 +10,7 @@ const Main: FC = () => {
const send = useRemeshSend()
const roomDomain = useRemeshDomain(RoomDomain())
const userInfoDomain = useRemeshDomain(UserInfoDomain())
- const messageListDomain = useRemeshDomain(MessageListDomain())
- const _messageList = useRemeshQuery(messageListDomain.query.ListQuery())
+ const _messageList = useRemeshQuery(roomDomain.query.MessageListQuery())
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
const messageList = _messageList.map((message) => ({
...message,
diff --git a/src/app/options/components/AvatarSelect.tsx b/src/app/options/components/AvatarSelect.tsx
index c2a88d7..40a041b 100644
--- a/src/app/options/components/AvatarSelect.tsx
+++ b/src/app/options/components/AvatarSelect.tsx
@@ -10,7 +10,7 @@ export interface AvatarSelectProps {
className?: string
disabled?: boolean
compressSize?: number
- onSuccess?: (blob: Blob) => void
+ onSuccess?: (blob: string) => void
onWarning?: (error: Error) => void
onError?: (error: Error) => void
onChange?: (src: string) => void
@@ -34,8 +34,9 @@ const AvatarSelect = React.forwardRef
(
const blob = await compressImage(file, compressSize)
const reader = new FileReader()
reader.onload = (e) => {
- onSuccess?.(blob)
- onChange?.(e.target?.result as string)
+ const base64 = e.target?.result as string
+ onSuccess?.(base64)
+ onChange?.(base64)
}
reader.onerror = () => onError?.(new Error('Failed to read image file.'))
reader.readAsDataURL(blob)
diff --git a/src/app/options/components/ProfileForm.tsx b/src/app/options/components/ProfileForm.tsx
index 6282273..6db2111 100644
--- a/src/app/options/components/ProfileForm.tsx
+++ b/src/app/options/components/ProfileForm.tsx
@@ -10,13 +10,15 @@ import { Button } from '@/components/ui/Button'
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form'
import { Input } from '@/components/ui/Input'
import UserInfoDomain, { type UserInfo } from '@/domain/UserInfo'
-import { checkSystemDarkMode } from '@/utils'
+import { checkSystemDarkMode, compressImage } from '@/utils'
import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup'
import { Label } from '@/components/ui/Label'
+import { RefreshCcwIcon } from 'lucide-react'
+import generateUglyAvatar from '@/lib/uglyAvatar'
// In chrome storage.sync, each key-value pair supports a maximum storage of 8kb
// Image is encoded as base64, and the size is increased by about 33%.
-const COMPRESS_SIZE = 8 * 1024 - 8 * 1024 * 0.33
+const COMPRESS_SIZE = 8 * 1024 * (1 - 0.33)
const defaultUserInfo: UserInfo = {
id: nanoid(),
@@ -80,6 +82,34 @@ const ProfileForm = () => {
toast.error(error.message)
}
+ const handleRandomAvatar = async () => {
+ const svgBlob = generateUglyAvatar()
+
+ // compressImage can't directly compress svg, need to convert to jpeg first
+ const jpegBlob = await new Promise((resolve, reject) => {
+ const image = new Image()
+ image.onload = async () => {
+ const canvas = new OffscreenCanvas(image.width, image.height)
+ const ctx = canvas.getContext('2d')
+ ctx?.drawImage(image, 0, 0)
+ const blob = await canvas.convertToBlob({ type: 'image/jpeg' })
+ resolve(blob)
+ }
+ image.onerror = () => reject(new Error('Failed to load SVG'))
+ image.src = URL.createObjectURL(svgBlob)
+ })
+ const miniAvatarBlob = await compressImage(jpegBlob, COMPRESS_SIZE)
+ const miniAvatarBase64 = await new Promise((resolve, reject) => {
+ const reader = new FileReader()
+ reader.onload = (e) => resolve(e.target?.result as string)
+ reader.onerror = () => reject(new Error('Failed to convert Blob to Base64'))
+ reader.readAsDataURL(miniAvatarBlob)
+ })
+ console.log('kb', miniAvatarBase64.length / 1024)
+
+ form.setValue('avatar', miniAvatarBase64)
+ }
+
return (