From 8c7cde5fe8f98c08c7713bb41d3f4ad1f40584ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Daniel=20Ba=C3=B1ares?= <joshxfi.dev@gmail.com>
Date: Wed, 17 Jul 2024 18:59:37 +0800
Subject: [PATCH] feat: implement progress dialog for forms (#223)

* feat: implement progress dialog for forms

* fix: revert tailwind config

* chore: add header for notes
---
 .../(user)/to/[username]/components/form.tsx  | 115 ++++++++++--------
 .../[username]/components/unauthenticated.tsx |  10 +-
 .../www/src/app/(user)/to/[username]/page.tsx |   6 +-
 .../src/app/components/progress-dialog.tsx    |  86 +++++++++++++
 apps/www/src/app/notes/components/form.tsx    |  52 +++++---
 .../src/app/notes/components/reply-drawer.tsx | 104 +++++++++-------
 apps/www/src/app/notes/page.tsx               |   4 +
 packages/ui/components.json                   |   4 +
 packages/ui/package.json                      |   1 +
 packages/ui/src/components/ad-container.tsx   |  12 +-
 packages/ui/src/components/ui/progress.tsx    |  28 +++++
 packages/ui/tsconfig.json                     |   6 +-
 pnpm-lock.yaml                                | 103 +++++++++++++++-
 13 files changed, 399 insertions(+), 132 deletions(-)
 create mode 100644 apps/www/src/app/components/progress-dialog.tsx
 create mode 100644 packages/ui/src/components/ui/progress.tsx

diff --git a/apps/www/src/app/(user)/to/[username]/components/form.tsx b/apps/www/src/app/(user)/to/[username]/components/form.tsx
index c4583143..2bb339ea 100644
--- a/apps/www/src/app/(user)/to/[username]/components/form.tsx
+++ b/apps/www/src/app/(user)/to/[username]/components/form.tsx
@@ -16,6 +16,7 @@ import useBotDetection from "@/hooks/use-bot-detection";
 import { Textarea } from "@umamin/ui/components/textarea";
 import { useDynamicTextarea } from "@/hooks/use-dynamic-textarea";
 import type { UserByUsernameQueryResult } from "../../../queries";
+import { ProgressDialog } from "@/app/components/progress-dialog";
 
 const CREATE_MESSAGE_MUTATION = graphql(`
   mutation CreateMessage($input: CreateMessageInput!) {
@@ -27,7 +28,7 @@ const CREATE_MESSAGE_MUTATION = graphql(`
 
 const createMessagePersisted = graphql.persisted(
   "3550bab6df63cc9b4f891263677b487dbf67eba1b5cc9af9fec5fc037d2e49f0",
-  CREATE_MESSAGE_MUTATION,
+  CREATE_MESSAGE_MUTATION
 );
 
 type Props = {
@@ -40,6 +41,7 @@ export default function ChatForm({ currentUserId, user }: Props) {
   const [content, setContent] = useState("");
   const [message, setMessage] = useState("");
   const [isFetching, setIsFetching] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
 
   const inputRef = useDynamicTextarea(content);
 
@@ -74,65 +76,76 @@ export default function ChatForm({ currentUserId, user }: Props) {
         return;
       }
 
-      setMessage(content.replace(/(\r\n|\n|\r){2,}/g, "\n\n"));
-      setContent("");
-      toast.success("Message sent");
+      setDialogOpen(true);
       setIsFetching(false);
 
       logEvent(analytics, "send_message");
     } catch (err: any) {
-      toast.error(err.message);
+      toast.error("An error occured");
       setIsFetching(false);
     }
   }
 
   return (
-    <div
-      className={cn(
-        "flex flex-col justify-between pb-6 h-full max-h-[400px] relative w-full min-w-0",
-        user?.quietMode ? "min-h-[250px]" : "min-h-[350px]",
-      )}
-    >
-      <div className="flex flex-col h-full overflow-scroll pt-10 px-5 sm:px-7 pb-5 w-full relative min-w-0 ">
-        <ChatList
-          imageUrl={user?.imageUrl}
-          question={user?.question ?? ""}
-          reply={message}
-        />
-      </div>
-
-      {user?.quietMode ? (
-        <span className="text-muted-foreground text-center text-sm">
-          User has enabled quiet mode
-        </span>
-      ) : (
-        <form
-          onSubmit={handleSubmit}
-          className="px-5 sm:px-7 flex items-center space-x-2 w-full self-center pt-2 max-w-lg"
-        >
-          <Textarea
-            id="message"
-            required
-            ref={inputRef}
-            value={content}
-            onChange={(e) => {
-              setContent(e.target.value);
-            }}
-            maxLength={500}
-            placeholder="Type your message..."
-            className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20"
-            autoComplete="off"
+    <>
+      <ProgressDialog
+        type="Message"
+        description="Your message is anonymous and encrypted. It will be delivered to the recipient's inbox."
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onProgressComplete={() => {
+          setMessage(content.replace(/(\r\n|\n|\r){2,}/g, "\n\n"));
+          setContent("");
+        }}
+      />
+      <div
+        className={cn(
+          "flex flex-col justify-between pb-6 h-full max-h-[400px] relative w-full min-w-0",
+          user?.quietMode ? "min-h-[250px]" : "min-h-[350px]"
+        )}
+      >
+        <div className="flex flex-col h-full overflow-scroll pt-10 px-5 sm:px-7 pb-5 w-full relative min-w-0 ">
+          <ChatList
+            imageUrl={user?.imageUrl}
+            question={user?.question ?? ""}
+            reply={message}
           />
-          <Button type="submit" size="icon" disabled={isFetching}>
-            {isFetching ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <Send className="h-4 w-4" />
-            )}
-            <span className="sr-only">Send</span>
-          </Button>
-        </form>
-      )}
-    </div>
+        </div>
+
+        {user?.quietMode ? (
+          <span className="text-muted-foreground text-center text-sm">
+            User has enabled quiet mode
+          </span>
+        ) : (
+          <form
+            onSubmit={handleSubmit}
+            className="px-5 sm:px-7 flex items-center space-x-2 w-full self-center pt-2 max-w-lg"
+          >
+            <Textarea
+              id="message"
+              required
+              ref={inputRef}
+              value={content}
+              disabled={isFetching}
+              onChange={(e) => {
+                setContent(e.target.value);
+              }}
+              maxLength={500}
+              placeholder="Type your message..."
+              className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20"
+              autoComplete="off"
+            />
+            <Button type="submit" size="icon" disabled={isFetching}>
+              {isFetching ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Send className="h-4 w-4" />
+              )}
+              <span className="sr-only">Send</span>
+            </Button>
+          </form>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/apps/www/src/app/(user)/to/[username]/components/unauthenticated.tsx b/apps/www/src/app/(user)/to/[username]/components/unauthenticated.tsx
index cc92879a..3e479c79 100644
--- a/apps/www/src/app/(user)/to/[username]/components/unauthenticated.tsx
+++ b/apps/www/src/app/(user)/to/[username]/components/unauthenticated.tsx
@@ -14,11 +14,15 @@ import {
   AlertDialogTitle,
 } from "@umamin/ui/components/alert-dialog";
 
-export default function UnauthenticatedDialog({ isLoggedIn }: { isLoggedIn: boolean }) {
-  const [open, setOpen] = useState(!isLoggedIn);
+export default function UnauthenticatedDialog({
+  isLoggedIn,
+}: {
+  isLoggedIn: boolean;
+}) {
+  const [open, onOpenChange] = useState(!isLoggedIn);
 
   return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="flex items-center justify-center">
diff --git a/apps/www/src/app/(user)/to/[username]/page.tsx b/apps/www/src/app/(user)/to/[username]/page.tsx
index dced0d18..9319e52d 100644
--- a/apps/www/src/app/(user)/to/[username]/page.tsx
+++ b/apps/www/src/app/(user)/to/[username]/page.tsx
@@ -7,7 +7,6 @@ import { getUserByUsername } from "../../queries";
 import { ShareButton } from "@/app/components/share-button";
 import { Card, CardHeader } from "@umamin/ui/components/card";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
 const ChatForm = dynamic(() => import("./components/form"));
 const UnauthenticatedDialog = dynamic(
   () => import("./components/unauthenticated"),
@@ -65,10 +64,7 @@ export default async function SendMessage({
   const { session } = await getSession();
 
   return (
-    <main className="pb-24 min-h-screen flex flex-col">
-      {/* v2-send-to */}
-      <AdContainer className="mb-5 w-full mt-20 max-w-2xl mx-auto" slotId="9163326848" />
-
+    <main className="pb-24 min-h-screen flex flex-col justify-center">
       <div className="container w-full max-w-2xl">
         <Card className="border flex flex-col w-full">
           <CardHeader className="bg-background border-b w-full item-center rounded-t-2xl flex justify-between flex-row">
diff --git a/apps/www/src/app/components/progress-dialog.tsx b/apps/www/src/app/components/progress-dialog.tsx
new file mode 100644
index 00000000..fbb2c74c
--- /dev/null
+++ b/apps/www/src/app/components/progress-dialog.tsx
@@ -0,0 +1,86 @@
+import { toast } from "sonner";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@umamin/ui/components/alert-dialog";
+import { Progress } from "@umamin/ui/components/progress";
+
+const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+
+type Props = {
+  type: string;
+  description: string;
+  open: boolean;
+  onProgressComplete?: () => void;
+  // eslint-disable-next-line no-unused-vars
+  onOpenChange: (open: boolean) => void;
+};
+
+export function ProgressDialog({
+  type,
+  description,
+  open,
+  onOpenChange,
+  onProgressComplete,
+}: Props) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (open) {
+      setProgress(0);
+
+      const duration = 5000;
+      const intervalTime = 100;
+      const totalIntervals = duration / intervalTime;
+      let currentInterval = 0;
+
+      const interval = setInterval(() => {
+        currentInterval += 1;
+        setProgress(Math.min(100, (currentInterval / totalIntervals) * 100));
+
+        if (currentInterval >= totalIntervals) {
+          clearInterval(interval);
+          toast.success(`${type} sent successfully`);
+
+          if (onProgressComplete) {
+            onProgressComplete();
+          }
+        }
+      }, intervalTime);
+
+      return () => clearInterval(interval);
+    }
+  }, [open, type]);
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="px-0 max-w-full">
+        <AlertDialogHeader className="px-4">
+          <AlertDialogTitle>
+            {progress === 100 ? `${type} Sent` : `Sending ${type}`}
+          </AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AdContainer className="w-full" slotId="9163326848" />
+
+        <AlertDialogFooter className="px-4">
+          {progress !== 100 ? (
+            <Progress value={progress} className="h-2" />
+          ) : (
+            <AlertDialogAction disabled={progress !== 100}>
+              Continue
+            </AlertDialogAction>
+          )}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/www/src/app/notes/components/form.tsx b/apps/www/src/app/notes/components/form.tsx
index 4b616680..797d205f 100644
--- a/apps/www/src/app/notes/components/form.tsx
+++ b/apps/www/src/app/notes/components/form.tsx
@@ -22,6 +22,7 @@ import { Switch } from "@umamin/ui/components/switch";
 import useBotDetection from "@/hooks/use-bot-detection";
 import { Textarea } from "@umamin/ui/components/textarea";
 import { useDynamicTextarea } from "@/hooks/use-dynamic-textarea";
+import { ProgressDialog } from "@/app/components/progress-dialog";
 
 const UPDATE_NOTE_MUTATION = graphql(`
   mutation UpdateNote($content: String!, $isAnonymous: Boolean!) {
@@ -43,12 +44,12 @@ const DELETE_NOTE_MUTATION = graphql(`
 
 const updateNotePersisted = graphql.persisted(
   "ee74fb98a70e158ec538193fef5c090523d87c18151e2d3687bc60def53169f2",
-  UPDATE_NOTE_MUTATION,
+  UPDATE_NOTE_MUTATION
 );
 
 const deleteNotePersisted = graphql.persisted(
   "fc93cc2e396e0300768942f32a039bf1e92ddf6e2bcea99af54c537feacdf133",
-  DELETE_NOTE_MUTATION,
+  DELETE_NOTE_MUTATION
 );
 
 type Props = {
@@ -59,6 +60,7 @@ type Props = {
 export default function NoteForm({ user, currentNote }: Props) {
   useBotDetection();
   const [content, setContent] = useState("");
+  const [dialogOpen, setDialogOpen] = useState(false);
   const [isFetching, setIsFetching] = useState(false);
   const [isAnonymous, setIsAnonymous] = useState(false);
   const [textAreaCount, setTextAreaCount] = useState(0);
@@ -97,29 +99,41 @@ export default function NoteForm({ user, currentNote }: Props) {
     e.preventDefault();
     setIsFetching(true);
 
-    const res = await client.mutation(updateNotePersisted, {
-      content,
-      isAnonymous,
-    });
+    try {
+      const res = await client.mutation(updateNotePersisted, {
+        content,
+        isAnonymous,
+      });
 
-    if (res.error) {
-      toast.error(formatError(res.error.message));
-      setIsFetching(false);
-      return;
-    }
+      if (res.error) {
+        toast.error(formatError(res.error.message));
+        setIsFetching(false);
+        return;
+      }
 
-    if (res.data) {
-      setContent("");
-      updateNote(res.data.updateNote);
-      toast.success("Note updated");
-    }
+      if (res.data) {
+        setDialogOpen(true);
+        setContent("");
+        updateNote(res.data.updateNote);
+      }
 
-    setIsFetching(false);
-    logEvent(analytics, "update_note");
+      setIsFetching(false);
+      logEvent(analytics, "update_note");
+    } catch (err: any) {
+      toast.error("An error occured");
+      setIsFetching(false);
+    }
   };
 
   return (
     <section>
+      <ProgressDialog
+        type="Note"
+        description="Your previous note will be replaced with the new one."
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+      />
+
       <form
         onSubmit={handleSubmit}
         className="mb-8 flex flex-col gap-y-4 items-end container"
@@ -156,7 +170,7 @@ export default function NoteForm({ user, currentNote }: Props) {
             <span
               className={cn(
                 textAreaCount > 500 ? "text-red-500" : "text-zinc-500",
-                "text-sm",
+                "text-sm"
               )}
             >
               {textAreaCount >= 450 ? 500 - textAreaCount : null}
diff --git a/apps/www/src/app/notes/components/reply-drawer.tsx b/apps/www/src/app/notes/components/reply-drawer.tsx
index d2018b40..8077ea47 100644
--- a/apps/www/src/app/notes/components/reply-drawer.tsx
+++ b/apps/www/src/app/notes/components/reply-drawer.tsx
@@ -17,6 +17,7 @@ import { Textarea } from "@umamin/ui/components/textarea";
 import { useDynamicTextarea } from "@/hooks/use-dynamic-textarea";
 import { Drawer, DrawerContent } from "@umamin/ui/components/drawer";
 import { Dialog, DialogContent } from "@umamin/ui/components/dialog";
+import { ProgressDialog } from "@/app/components/progress-dialog";
 
 type ChatFormProps = {
   note: NotesQueryResult[0];
@@ -76,6 +77,7 @@ const createMessagePersisted = graphql.persisted(
 const ChatForm = ({ note, currentUserId, setOpen }: ChatFormProps) => {
   const [content, setContent] = useState("");
   const [message, setMessage] = useState("");
+  const [dialogOpen, setDialogOpen] = useState(false);
   const [isSending, setIsSending] = useState(false);
   const inputRef = useDynamicTextarea(content);
 
@@ -109,9 +111,7 @@ const ChatForm = ({ note, currentUserId, setOpen }: ChatFormProps) => {
         return;
       }
 
-      setMessage(content.replace(/(\r\n|\n|\r){2,}/g, "\n\n"));
-      setContent("");
-      toast.success("Reply sent");
+      setDialogOpen(true);
       setIsSending(false);
 
       logEvent(analytics, "send_note_reply");
@@ -121,49 +121,63 @@ const ChatForm = ({ note, currentUserId, setOpen }: ChatFormProps) => {
       setOpen(false);
     }
   }
+
   return (
-    <div
-      className={cn(
-        "max-w-xl w-full flex flex-col justify-between px-5 sm:px-7 py-10 h-full max-h-[500px] overflow-scroll rounded-lg",
-        user?.quietMode ? "min-h-[250px]" : "min-h-[350px]",
-        !message ? "pb-28" : ""
-      )}
-    >
-      <ChatList
-        imageUrl={user?.imageUrl}
-        question={note.content ?? ""}
-        reply={message}
+    <>
+      <ProgressDialog
+        type="Reply"
+        description="Your message is anonymous and encrypted. It will be delivered to the recipient's inbox."
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onProgressComplete={() => {
+          setMessage(content.replace(/(\r\n|\n|\r){2,}/g, "\n\n"));
+          setContent("");
+        }}
       />
-      {!message && (
-        <div className="fixed px-5 sm:px-7 bottom-0 left-1/2 -translate-x-1/2 w-full pb-4 rounded-b-lg bg-background pt-3 max-w-xl">
-          <form
-            onSubmit={handleSubmit}
-            className="flex items-center space-x-2 w-full self-center"
-          >
-            <Textarea
-              id="message"
-              required
-              ref={inputRef}
-              value={content}
-              onChange={(e) => {
-                setContent(e.target.value);
-              }}
-              maxLength={500}
-              placeholder="Type your anonymous reply..."
-              className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20"
-              autoComplete="off"
-            />
-            <Button type="submit" size="icon" disabled={isSending}>
-              {isSending ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : (
-                <Send className="h-4 w-4" />
-              )}
-              <span className="sr-only">Send</span>
-            </Button>
-          </form>
-        </div>
-      )}
-    </div>
+
+      <div
+        className={cn(
+          "max-w-xl w-full flex flex-col justify-between px-5 sm:px-7 py-10 h-full max-h-[500px] overflow-scroll rounded-lg",
+          user?.quietMode ? "min-h-[250px]" : "min-h-[350px]",
+          !message ? "pb-28" : ""
+        )}
+      >
+        <ChatList
+          imageUrl={user?.imageUrl}
+          question={note.content ?? ""}
+          reply={message}
+        />
+        {!message && (
+          <div className="fixed px-5 sm:px-7 bottom-0 left-1/2 -translate-x-1/2 w-full pb-4 rounded-b-lg bg-background pt-3 max-w-xl">
+            <form
+              onSubmit={handleSubmit}
+              className="flex items-center space-x-2 w-full self-center"
+            >
+              <Textarea
+                id="message"
+                required
+                ref={inputRef}
+                value={content}
+                onChange={(e) => {
+                  setContent(e.target.value);
+                }}
+                maxLength={500}
+                placeholder="Type your anonymous reply..."
+                className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20"
+                autoComplete="off"
+              />
+              <Button type="submit" size="icon" disabled={isSending}>
+                {isSending ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <Send className="h-4 w-4" />
+                )}
+                <span className="sr-only">Send</span>
+              </Button>
+            </form>
+          </div>
+        )}
+      </div>
+    </>
   );
 };
diff --git a/apps/www/src/app/notes/page.tsx b/apps/www/src/app/notes/page.tsx
index 49c8ef1d..a846cb9b 100644
--- a/apps/www/src/app/notes/page.tsx
+++ b/apps/www/src/app/notes/page.tsx
@@ -50,6 +50,10 @@ export default async function Page() {
 
   return (
     <main className="mt-28 max-w-xl mx-auto pb-32">
+      <h1 className="font-extrabold sm:text-5xl text-[8vw] leading-none dark:bg-gradient-to-b from-foreground dark:to-zinc-400 bg-zinc-800 bg-clip-text text-transparent tracking-tighter text-center my-6">
+        Umamin Notes
+      </h1>
+
       {user ? (
         <NoteForm user={user} currentNote={currentNote} />
       ) : (
diff --git a/packages/ui/components.json b/packages/ui/components.json
index 1ee6beb2..4c168719 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -9,5 +9,9 @@
     "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fdc85871..729d5f71 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -39,6 +39,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
diff --git a/packages/ui/src/components/ad-container.tsx b/packages/ui/src/components/ad-container.tsx
index 990c70ae..abdeb99f 100644
--- a/packages/ui/src/components/ad-container.tsx
+++ b/packages/ui/src/components/ad-container.tsx
@@ -30,10 +30,14 @@ const AdContainer = ({ slotId, className }: Props) => {
 
   return (
     <div
-      className={cn(className, {
-        "h-44 border border-yellow-500 rounded":
-          process.env.NODE_ENV === "development",
-      })}
+      className={cn(
+        "w-full",
+        {
+          "h-44 border border-yellow-500 rounded":
+            process.env.NODE_ENV === "development",
+        },
+        className
+      )}
     >
       <ins
         className="adsbygoogle"
diff --git a/packages/ui/src/components/ui/progress.tsx b/packages/ui/src/components/ui/progress.tsx
new file mode 100644
index 00000000..a20f143d
--- /dev/null
+++ b/packages/ui/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../../lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-zinc-300 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index eed1a619..1c370262 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "extends": "@umamin/tsconfig/react-library.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "rootDir": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ae9ba79..3cd24d41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -449,6 +449,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.0.2
         version: 2.0.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-progress':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.3.3)(react@18.3.1)
@@ -2164,6 +2167,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.1.0':
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-context@1.0.1':
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
@@ -2173,6 +2185,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.0':
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dialog@1.0.5':
     resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
     peerDependencies:
@@ -2343,6 +2364,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.0.0':
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.0':
+    resolution: {integrity: sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.0.4':
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
@@ -2365,6 +2412,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.1.0':
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-switch@1.0.3':
     resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
     peerDependencies:
@@ -4512,6 +4568,7 @@ packages:
 
   libsql@0.3.19:
     resolution: {integrity: sha512-Aj5cQ5uk/6fHdmeW0TiXK42FqUlwx7ytmMLPSaUQPin5HKKKuUPD62MAbN4OEweGBBI7q1BekoEN4gPUEL6MZA==}
+    cpu: [x64, arm64, wasm32]
     os: [darwin, linux, win32]
 
   lilconfig@2.1.0:
@@ -7726,6 +7783,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-context@1.0.1(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -7733,6 +7796,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-context@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-dialog@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -7925,6 +7994,25 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-progress@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -7951,6 +8039,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-switch@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -9615,7 +9710,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.2(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -9633,7 +9728,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.3(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -9687,7 +9782,7 @@ snapshots:
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -9762,7 +9857,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5