button

src/components/Composer.tsx

···
 import { useQueryPost } from "~/utils/useQuery";
 
 import { ProfileThing } from "./Login";
+import { Button } from "./radix-m3-rd/Button";
 import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer";
 
 const MAX_POST_LENGTH = 300;
 
 export function Composer() {
   const [composerState, setComposerState] = useAtom(composerAtom);
+  const [closeConfirmState, setCloseConfirmState] = useState<boolean>(false);
   const { agent } = useAuth();
 
   const [postText, setPostText] = useState("");
···
       setPosting(false);
     }
   }
-  // if (composerState.kind === "closed") {
-  //   return null;
-  // }
 
   const getPlaceholder = () => {
     switch (composerState.kind) {
···
   const isPostButtonDisabled =
     posting || !postText.trim() || isParentLoading || charsLeft < 0;
 
+  function handleAttemptClose() {
+    if (postText.trim() && !posting) {
+      setCloseConfirmState(true);
+    } else {
+      setComposerState({ kind: "closed" });
+    }
+  }
+
+  function handleConfirmClose() {
+    setComposerState({ kind: "closed" });
+    setCloseConfirmState(false);
+    setPostText("");
+  }
+
   return (
-    <Dialog.Root
-      open={composerState.kind !== "closed"}
-      onOpenChange={(open) => {
-        if (!open) setComposerState({ kind: "closed" });
-      }}
-    >
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed disablegutter inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" />
+    <>
+      <Dialog.Root
+        open={composerState.kind !== "closed"}
+        onOpenChange={(open) => {
+          if (!open) handleAttemptClose();
+        }}
+      >
+        <Dialog.Portal>
+          <Dialog.Overlay className="disablegutter fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" />
 
-        <Dialog.Content className="fixed gutter overflow-y-scroll inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 pb-[50dvh] sm:pb-[50dvh]">
-          <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4">
-            <div className="flex flex-row justify-between p-2">
-              <Dialog.Close asChild>
-                <button
-                  className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
-                  disabled={posting}
-                  aria-label="Close"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
+          <Dialog.Content className="fixed overflow-y-auto gutter inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 pb-[50dvh] sm:pb-[50dvh]">
+            <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4">
+              <div className="flex flex-row justify-between p-2">
+                <Dialog.Close asChild>
+                  <button
+                    className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+                    disabled={posting}
+                    aria-label="Close"
+                    onClick={handleAttemptClose}
                   >
-                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                  </svg>
-                </button>
-              </Dialog.Close>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </button>
+                </Dialog.Close>
 
-              <div className="flex-1" />
-              <div className="flex items-center gap-4">
-                <span
-                  className={`text-sm ${charsLeft < 0 ? "text-red-500" : "text-gray-500"}`}
-                >
-                  {charsLeft}
-                </span>
-                <button
-                  className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                  onClick={handlePost}
-                  disabled={isPostButtonDisabled}
-                >
-                  {posting ? "Posting..." : "Post"}
-                </button>
+                <div className="flex-1" />
+                <div className="flex items-center gap-4">
+                  <span
+                    className={`text-sm ${charsLeft < 0 ? "text-red-500" : "text-gray-500"}`}
+                  >
+                    {charsLeft}
+                  </span>
+                  <Button
+                    onClick={handlePost}
+                    disabled={isPostButtonDisabled}
+                  >
+                    {posting ? "Posting..." : "Post"}
+                  </Button>
+                </div>
               </div>
-            </div>
+
+              {postSuccess ? (
+                <div className="flex flex-col items-center justify-center py-16">
+                  <span className="text-gray-500 text-6xl mb-4">✓</span>
+                  <span className="text-xl font-bold text-black dark:text-white">
+                    Posted!
+                  </span>
+                </div>
+              ) : (
+                <div className="px-4">
+                  {composerState.kind === "reply" && (
+                    <div className="mb-1 -mx-4">
+                      {isParentLoading ? (
+                        <div className="text-sm text-gray-500 animate-pulse">
+                          Loading parent post...
+                        </div>
+                      ) : parentUri ? (
+                        <UniversalPostRendererATURILoader
+                          atUri={parentUri}
+                          bottomReplyLine
+                          bottomBorder={false}
+                        />
+                      ) : (
+                        <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
+                          Could not load parent post.
+                        </div>
+                      )}
+                    </div>
+                  )}
 
-            {postSuccess ? (
-              <div className="flex flex-col items-center justify-center py-16">
-                <span className="text-gray-500 text-6xl mb-4">✓</span>
-                <span className="text-xl font-bold text-black dark:text-white">
-                  Posted!
-                </span>
-              </div>
-            ) : (
-              <div className="px-4">
-                {composerState.kind === "reply" && (
-                  <div className="mb-1 -mx-4">
-                    {isParentLoading ? (
-                      <div className="text-sm text-gray-500 animate-pulse">
-                        Loading parent post...
-                      </div>
-                    ) : parentUri ? (
-                      <UniversalPostRendererATURILoader
-                        atUri={parentUri}
-                        bottomReplyLine
-                        bottomBorder={false}
+                  <div className="flex w-full gap-1 flex-col">
+                    <ProfileThing agent={agent} large />
+                    <div className="flex pl-[50px]">
+                      <AutoGrowTextarea
+                        className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2"
+                        rows={5}
+                        placeholder={getPlaceholder()}
+                        value={postText}
+                        onChange={(e) => setPostText(e.target.value)}
+                        disabled={posting}
+                        autoFocus
                       />
-                    ) : (
-                      <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
-                        Could not load parent post.
-                      </div>
-                    )}
+                    </div>
                   </div>
-                )}
 
-                <div className="flex w-full gap-1 flex-col">
-                  <ProfileThing agent={agent} large />
-                  <div className="flex pl-[50px]">
-                    <AutoGrowTextarea
-                      className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2"
-                      rows={5}
-                      placeholder={getPlaceholder()}
-                      value={postText}
-                      onChange={(e) => setPostText(e.target.value)}
-                      disabled={posting}
-                      autoFocus
-                    />
-                  </div>
+                  {composerState.kind === "quote" && (
+                    <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                      {isParentLoading ? (
+                        <div className="text-sm text-gray-500 animate-pulse">
+                          Loading parent post...
+                        </div>
+                      ) : parentUri ? (
+                        <UniversalPostRendererATURILoader
+                          atUri={parentUri}
+                          isQuote
+                        />
+                      ) : (
+                        <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
+                          Could not load parent post.
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {postError && (
+                    <div className="text-red-500 text-sm my-2 text-center">
+                      {postError}
+                    </div>
+                  )}
                 </div>
+              )}
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
 
-                {composerState.kind === "quote" && (
-                  <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
-                    {isParentLoading ? (
-                      <div className="text-sm text-gray-500 animate-pulse">
-                        Loading parent post...
-                      </div>
-                    ) : parentUri ? (
-                      <UniversalPostRendererATURILoader
-                        atUri={parentUri}
-                        isQuote
-                      />
-                    ) : (
-                      <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
-                        Could not load parent post.
-                      </div>
-                    )}
-                  </div>
-                )}
+      {/* Close confirmation dialog */}
+      <Dialog.Root open={closeConfirmState} onOpenChange={setCloseConfirmState}>
+        <Dialog.Portal>
+          
+          <Dialog.Overlay className="disablegutter fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" />
 
-                {postError && (
-                  <div className="text-red-500 text-sm my-2 text-center">
-                    {postError}
-                  </div>
-                )}
+          <Dialog.Content className="fixed gutter inset-0 z-50 flex items-start justify-center pt-30 sm:pt-40">
+            <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-md relative mx-4 py-6">
+              <div className="text-xl mb-4 text-center">
+                Discard your post?
+              </div>
+              <div className="text-md mb-4 text-center">
+                You will lose your draft
+              </div>
+              <div className="flex justify-end gap-2 px-6">
+                <Button
+                  onClick={handleConfirmClose}
+                >
+                  Discard
+                </Button>
+                <Button
+                  variant={"outlined"}
+                  onClick={() => setCloseConfirmState(false)}
+                >
+                  Cancel
+                </Button>
               </div>
-            )}
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
   );
 }
 

src/components/Login.tsx

···
 import { imgCDNAtom } from "~/utils/atoms";
 import { useQueryIdentity, useQueryProfile } from "~/utils/useQuery";
 
+import { Button } from "./radix-m3-rd/Button";
+
 // --- 1. The Main Component (Orchestrator with `compact` prop) ---
 export default function Login({
   compact = false,
···
               You are logged in!
             </p>
             <ProfileThing agent={agent} large />
-            <button
+            <Button
               onClick={logout}
-              className="bg-gray-600 mt-4 hover:bg-gray-700 text-white rounded-full px-6 py-2 font-semibold text-base transition-colors"
+              className="mt-4"
             >
               Log out
-            </button>
+            </Button>
           </div>
         </div>
       );

src/components/UniversalPostRenderer.tsx

···
                     className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600"
                   />
                   <div className=" flex-1 flex flex-row align-middle justify-end">
+                  <div className=" flex flex-col justify-start">
                     <FollowButton targetdidorhandle={post.author.did} />
+                  </div>
                   </div>
                 </div>
                 <div className="flex flex-col gap-3">

src/components/radix-m3-rd/Button.tsx

···
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import * as React from "react";
+
+export type ButtonVariant = "filled" | "outlined" | "text" | "secondary";
+export type ButtonSize = "sm" | "md" | "lg";
+
+const variantClasses: Record<ButtonVariant, string> = {
+  filled:
+    "bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500",
+  secondary:
+    "bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500",
+  outlined:
+    "border border-gray-800 text-gray-800 hover:bg-gray-100 dark:border-gray-200 dark:text-gray-200 dark:hover:bg-gray-800/10",
+  text: "bg-transparent text-gray-800 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800/10",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg",
+};
+
+export function Button({
+  variant = "filled",
+  size = "md",
+  asChild = false,
+  ref,
+  className,
+  children,
+  ...props
+}: {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  asChild?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLButtonElement>;
+} & React.ComponentPropsWithoutRef<"button">) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      className={clsx(
+        //focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 dark:focus:ring-gray-300
+        "inline-flex items-center justify-center rounded-full transition-colors  disabled:opacity-50 disabled:cursor-not-allowed",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+Button.displayName = "Button";

src/routes/profile.$did/index.tsx

···
 import React, { type ReactNode, useEffect, useState } from "react";
 
 import { Header } from "~/components/Header";
+import { Button } from "~/components/radix-m3-rd/Button";
 import {
   renderTextWithFacets,
   UniversalPostRendererATURILoader,
···
             also save it persistently
           */}
           <FollowButton targetdidorhandle={did} />
-          <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
+          <Button className="rounded-full" variant={"secondary"}>
             ... {/* todo: icon */}
-          </button>
+          </Button>
         </div>
 
         {/* Info Card */}
···
       {identity?.did !== agent?.did ? (
         <>
           {!(followRecords?.length && followRecords?.length > 0) ? (
-            <button
+            <Button
               onClick={(e) => {
                 e.stopPropagation();
                 toggleFollow({
···
                   queryClient: queryClient,
                 });
               }}
-              className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
             >
               Follow
-            </button>
+            </Button>
           ) : (
-            <button
+            <Button
               onClick={(e) => {
                 e.stopPropagation();
                 toggleFollow({
···
                   queryClient: queryClient,
                 });
               }}
-              className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
             >
               Unfollow
-            </button>
+            </Button>
           )}
         </>
       ) : (
-        <button className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]">
-          Edit Profile
-        </button>
+        <Button variant={"secondary"}>Edit Profile</Button>
       )}
     </>
   );