(feat): big methanium/ui migration
(feat): update message state icons (qol): update todo (qol): formatted
This commit is contained in:
parent
5e79893137
commit
ace7973dff
SSH key fingerprint:
SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
24 changed files with 842 additions and 541 deletions
|
|
@ -2,21 +2,40 @@ import MDInput from "@tensamin/markdown/input";
|
|||
import { useMTP } from "@tensamin/mtp";
|
||||
import { mtp } from "@tensamin/shared/data";
|
||||
import { useStorage } from "@tensamin/storage/context";
|
||||
import { Avatar, AvatarFallback, AvatarImage, Button, cn, Input, useIsMobile } from "@methanium/ui";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
Button,
|
||||
cn,
|
||||
Input,
|
||||
useIsMobile,
|
||||
} from "@methanium/ui";
|
||||
import { useUser, type User } from "@tensamin/user/context";
|
||||
import { Check } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
async function prepImage(file: File, size = 300, quality = 0.8): Promise<string> {
|
||||
async function prepImage(
|
||||
file: File,
|
||||
size = 300,
|
||||
quality = 0.8,
|
||||
): Promise<string> {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = size; canvas.height = size;
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) throw new Error("Could not get canvas context");
|
||||
const scale = Math.max(size / bitmap.width, size / bitmap.height);
|
||||
const width = bitmap.width * scale;
|
||||
const height = bitmap.height * scale;
|
||||
context.drawImage(bitmap, (size - width) / 2, (size - height) / 2, width, height);
|
||||
context.drawImage(
|
||||
bitmap,
|
||||
(size - width) / 2,
|
||||
(size - height) / 2,
|
||||
width,
|
||||
height,
|
||||
);
|
||||
return canvas.toDataURL("image/webp", quality);
|
||||
}
|
||||
|
||||
|
|
@ -31,14 +50,22 @@ export default function Page() {
|
|||
const [saveSucceeded, setSaveSucceeded] = useState(false);
|
||||
const avatarUploadRef = useRef<HTMLInputElement>(null);
|
||||
const draftInitializedRef = useRef(false);
|
||||
const effectiveAvatar = draftUser.Avatar === "none" ? undefined : draftUser.Avatar;
|
||||
const updateDraftUser = (updater: (previous: Partial<User>) => Partial<User>) => {
|
||||
setSaveSucceeded(false); setErrorMessage(""); setDraftUser(updater);
|
||||
const effectiveAvatar =
|
||||
draftUser.Avatar === "none" ? undefined : draftUser.Avatar;
|
||||
const updateDraftUser = (
|
||||
updater: (previous: Partial<User>) => Partial<User>,
|
||||
) => {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("");
|
||||
setDraftUser(updater);
|
||||
};
|
||||
useEffect(() => { void (async () => setCurrentUser(await get(await load("user_id"))))(); }, [get, load]);
|
||||
useEffect(() => {
|
||||
void (async () => setCurrentUser(await get(await load("user_id"))))();
|
||||
}, [get, load]);
|
||||
useEffect(() => {
|
||||
if (!currentUser || draftInitializedRef.current) return;
|
||||
setDraftUser(currentUser); draftInitializedRef.current = true;
|
||||
setDraftUser(currentUser);
|
||||
draftInitializedRef.current = true;
|
||||
}, [currentUser]);
|
||||
async function handleAvatarUpload(file: File) {
|
||||
const avatar = await prepImage(file);
|
||||
|
|
@ -46,22 +73,128 @@ export default function Page() {
|
|||
if (avatarUploadRef.current) avatarUploadRef.current.value = "";
|
||||
}
|
||||
if (!currentUser) return <p>Loading...</p>;
|
||||
return <>
|
||||
<input ref={avatarUploadRef} hidden onChange={(event) => event.target.files?.[0] && handleAvatarUpload(event.target.files[0])} type="file" />
|
||||
<div className={cn("flex flex-col gap-5", isMobile ? "w-full" : "w-80")}>
|
||||
<div className="flex items-center gap-3"><Avatar className="size-14"><AvatarImage src={effectiveAvatar} /><AvatarFallback className="text-2xl">{draftUser.Display?.slice(0, 2).toUpperCase() || currentUser.Display.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar><div className="flex flex-col gap-1"><p>Avatar</p><div className="flex gap-1"><Button onClick={() => avatarUploadRef.current?.click()}>Upload avatar</Button><Button onClick={() => updateDraftUser((previous) => ({ ...previous, avatar: "none" }))} variant="destructive" disabled={effectiveAvatar === undefined}>Remove</Button></div><p className="text-sm text-muted-foreground">GIFs are supported in decentralised mode or with Tensamin Premium.<br />Maximum file size is 16mb.</p></div></div>
|
||||
<Input className="w-full" onChange={(event) => updateDraftUser((previous) => ({ ...previous, display: event.target.value }))} placeholder="Display Name" value={draftUser.Display || ""} />
|
||||
<Input className="w-full" onChange={(event) => updateDraftUser((previous) => ({ ...previous, username: event.target.value }))} placeholder="Username" value={draftUser.Username || ""} />
|
||||
<MDInput styled paddingY="4px" paddingX="10px" fontSize=".875rem" placeholder="About Me" setValue={(value) => updateDraftUser((previous) => ({ ...previous, about: value }))} value={draftUser.About || ""} />
|
||||
<Button onClick={async () => {
|
||||
const { Avatar, ...draftUsersWithoutAvatar } = draftUser;
|
||||
const payload = { ...draftUsersWithoutAvatar, ...(typeof Avatar === "string" ? { avatar: Avatar.startsWith("data:") ? (Avatar.split(",", 2)[1] ?? "") : Avatar } : {}) };
|
||||
const validation = mtp.ChangeUserData.request.safeParse(payload);
|
||||
if (!validation.success) { setSaveSucceeded(false); setErrorMessage(validation.error.issues[0]?.message ?? "Invalid profile data"); return; }
|
||||
try { await send("ChangeUserData", validation.data); setSaveSucceeded(true); setErrorMessage(""); }
|
||||
catch (error) { setSaveSucceeded(false); setErrorMessage("Failed to update profile: " + error); }
|
||||
}}>{saveSucceeded ? <span className="inline-flex items-center gap-1.5"><Check className="size-4" />Saved</span> : "Save"}</Button>
|
||||
{errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
|
||||
</div>
|
||||
</>;
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
ref={avatarUploadRef}
|
||||
hidden
|
||||
onChange={(event) =>
|
||||
event.target.files?.[0] && handleAvatarUpload(event.target.files[0])
|
||||
}
|
||||
type="file"
|
||||
/>
|
||||
<div className={cn("flex flex-col gap-5", isMobile ? "w-full" : "w-80")}>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="size-14">
|
||||
<AvatarImage src={effectiveAvatar} />
|
||||
<AvatarFallback className="text-2xl">
|
||||
{draftUser.Display?.slice(0, 2).toUpperCase() ||
|
||||
currentUser.Display.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p>Avatar</p>
|
||||
<div className="flex gap-1">
|
||||
<Button onClick={() => avatarUploadRef.current?.click()}>
|
||||
Upload avatar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() =>
|
||||
updateDraftUser((previous) => ({
|
||||
...previous,
|
||||
avatar: "none",
|
||||
}))
|
||||
}
|
||||
variant="destructive"
|
||||
disabled={effectiveAvatar === undefined}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
GIFs are supported in decentralised mode or with Tensamin Premium.
|
||||
<br />
|
||||
Maximum file size is 16mb.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
className="w-full"
|
||||
onChange={(event) =>
|
||||
updateDraftUser((previous) => ({
|
||||
...previous,
|
||||
display: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Display Name"
|
||||
value={draftUser.Display || ""}
|
||||
/>
|
||||
<Input
|
||||
className="w-full"
|
||||
onChange={(event) =>
|
||||
updateDraftUser((previous) => ({
|
||||
...previous,
|
||||
username: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Username"
|
||||
value={draftUser.Username || ""}
|
||||
/>
|
||||
<MDInput
|
||||
styled
|
||||
paddingY="4px"
|
||||
paddingX="10px"
|
||||
fontSize=".875rem"
|
||||
placeholder="About Me"
|
||||
setValue={(value) =>
|
||||
updateDraftUser((previous) => ({ ...previous, about: value }))
|
||||
}
|
||||
value={draftUser.About || ""}
|
||||
/>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const { Avatar, ...draftUsersWithoutAvatar } = draftUser;
|
||||
const payload = {
|
||||
...draftUsersWithoutAvatar,
|
||||
...(typeof Avatar === "string"
|
||||
? {
|
||||
avatar: Avatar.startsWith("data:")
|
||||
? (Avatar.split(",", 2)[1] ?? "")
|
||||
: Avatar,
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
const validation = mtp.ChangeUserData.request.safeParse(payload);
|
||||
if (!validation.success) {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage(
|
||||
validation.error.issues[0]?.message ?? "Invalid profile data",
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await send("ChangeUserData", validation.data);
|
||||
setSaveSucceeded(true);
|
||||
setErrorMessage("");
|
||||
} catch (error) {
|
||||
setSaveSucceeded(false);
|
||||
setErrorMessage("Failed to update profile: " + error);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{saveSucceeded ? (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Check className="size-4" />
|
||||
Saved
|
||||
</span>
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</Button>
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-destructive">{errorMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue