(feat): add reply box to messages

(feat): update methanium ui
(fix): user data caching
(fix): other random stuff
(qol): update todo

packages/chat/src/components/input.tsx

@@ -1,20 +1,16 @@
 import Input from "@tensamin/markdown/input";
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
   Card,
   CardHeader,
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Skeleton,
 } from "@methanium/ui";
 import { useStorage } from "@tensamin/storage/context";
 import React, { useEffect, useState, useRef } from "react";
 import { Button } from "@methanium/ui";
 
-import { Plus, Laugh, FileVideo, Forward, X } from "lucide-react";
+import { Plus, Laugh, FileVideo } from "lucide-react";
 import { useChat, useReplyMessage } from "../context";
 import { useMTP } from "@tensamin/mtp";
 import { log, toast } from "@tensamin/shared/log";
@@ -25,8 +21,7 @@ import { useSession } from "@tensamin/storage/session";
 import GifPicker from "./gifPicker";
 import EmojiPicker from "./emojiPicker";
 import { useEmojiRanks, useRecordEmojiUse } from "./emojiRanks";
-import Wrapper from "@tensamin/user/wrapper";
-import Text from "@tensamin/markdown/text";
+import ReplyBox from "./replyBox";
 
 export default function InputComponent({
   value,
@@ -196,54 +191,15 @@ export default function InputComponent({
 
   return (
     <div className="flex flex-col">
+      {/* reply */}
       {replyTo !== undefined && (
-        <div className="self-center rounded-t-lg bg-background border-t border-x flex items-center justify-start w-[90%] p-1">
-          <div className="flex gap-1 w-full items-center">
-            <Forward
-              color="var(--muted-foreground)"
-              className="opacity-60"
-              size={18}
-            />
-            {replyMessage ? (
-              <>
-                <Wrapper
-                  userId={replyUserId ?? ownId}
-                  loading={<Skeleton className="rounded-full" />}
-                  component={(user) => (
-                    <Avatar>
-                      <AvatarImage src={user.Avatar} />
-                      <AvatarFallback>
-                        {user.Display.slice(2, 0).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
-                  )}
-                />
-                <div className="max-w-full max-h-5 h-5 text-xs truncate">
-                  <Text value={replyMessage.Content} />
-                </div>
-              </>
-            ) : (
-              <>
-                <Skeleton className="w-5 h-5 aspect-square rounded-full" />
-                <Skeleton className="w-full h-5" />
-              </>
-            )}
-            <Button
-              onClick={() => {
-                setReplyTo(undefined);
-              }}
-              className="w-5 h-5 rounded-md! p-0!"
-              size="xs"
-              variant="ghost"
-            >
-              <X
-                color="var(--muted-foreground)"
-                className="opacity-60"
-                size={18}
-              />
-            </Button>
-          </div>
-        </div>
+        <ReplyBox
+          content={replyMessage?.Content}
+          loading={!replyMessage}
+          onDismiss={() => setReplyTo(undefined)}
+          userId={replyUserId ?? ownId}
+          variant="composer"
+        />
       )}
       <Card
         ref={inputBoxRef}
@@ -267,7 +223,7 @@ export default function InputComponent({
           />
           <div className="w-full flex justify-between gap-1 p-1 pt-0">
             <div className="flex gap-1">
-              <Button className="w-9 h-9 p-0" variant="ghost">
+              <Button className="w-9 h-9! p-0" variant="ghost">
                 <Plus size={20} />
               </Button>
               <div className="w-auto flex text-red-500">
@@ -280,15 +236,16 @@ export default function InputComponent({
                 onOpenChange={setEmojiPopoverOpen}
               >
                 <PopoverTrigger
-                  render={
+                  render={({ onClick }) => (
                     <Button
+                      onClick={onClick}
                       aria-label="Open emoji picker"
-                      className="w-9 h-9 p-0"
+                      className="w-9 h-9! p-0"
                       variant="ghost"
                     >
                       <Laugh size={20} />
                     </Button>
-                  }
+                  )}
                 />
                 <PopoverContent className="w-auto p-0">
                   <EmojiPicker
@@ -302,11 +259,15 @@ export default function InputComponent({
               </Popover>
               <Popover open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
                 <PopoverTrigger
-                  render={
-                    <Button className="w-9 h-9 p-0" variant="ghost">
+                  render={({ onClick }) => (
+                    <Button
+                      onClick={onClick}
+                      className="w-9 h-9! p-0"
+                      variant="ghost"
+                    >
                       <FileVideo size={20} />
                     </Button>
-                  }
+                  )}
                 />
                 <PopoverContent
                   ref={gifPopoverRef}