Make all icon buttons use one component

src/App.tsx

@@ -13,6 +13,7 @@ import { Button } from "./components/Button";
 import { Ulist } from "./components/Ulist";
 import { Popup } from "./components/Popup";
 import { User } from "./components/User";
+import { IconButton } from "./components/IconButton";
 
 export const App = () => {
   const [showSideNav, setShowSideNav] = useState(false);
@@ -65,14 +66,14 @@ export const App = () => {
             <NotificationToggle />
             <DarkMode />
             <Account />
-            <button
+            <IconButton
               type="button"
               className="lg:hidden"
               aria-label="Close"
               onClick={() => setShowSideNav(false)}
             >
               <X aria-hidden />
-            </button>
+            </IconButton>
           </div>
         </Tabs.List>
         <Tabs.Content value="ulist">
@@ -105,11 +106,11 @@ const DarkMode = () => {
   }, [darkMode]);
 
   return (
-    <button type="button" onClick={() => setDarkMode((d) => !d)}>
+    <IconButton type="button" onClick={() => setDarkMode((d) => !d)}>
       {darkMode ?
         <Sun />
       : <Moon />}
-    </button>
+    </IconButton>
   );
 };
 
@@ -124,31 +125,31 @@ const NotificationToggle = () => {
 
   return (
     notificationState === "disabled" ?
-      <button
+      <IconButton
         type="button"
         aria-label="Enable notifications"
         onClick={enableNotifications}
       >
         <BellOff aria-hidden />
-      </button>
+      </IconButton>
     : notificationState === "enabled" ?
-      <button
+      <IconButton
         type="button"
         aria-label="Disable notifications"
         onClick={disableNotifications}
       >
         <Bell aria-hidden />
-      </button>
+      </IconButton>
     : <Popup
         triggerAsChild
         trigger={
-          <button
+          <IconButton
             className="opacity-70"
             type="button"
             aria-label="Enable notifications"
           >
             <BellOff aria-hidden />
-          </button>
+          </IconButton>
         }
       >
         <div className="flex flex-col items-start gap-2">

src/components/IconButton.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, ComponentPropsWithoutRef, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type IconButtonProps = ComponentPropsWithoutRef<"button"> & {
+  children: ReactNode;
+};
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props: IconButtonProps, ref) => {
+    const buttonProps = { ...props };
+    return (
+      <button
+        {...buttonProps}
+        ref={ref}
+        className={twMerge("", props.className)}
+      >
+        {props.children}
+      </button>
+    );
+  },
+);

src/components/MarkdownInput.tsx

@@ -16,6 +16,7 @@ import { Attachment } from "../lib/api/posts";
 import { Checkbox } from "./Checkbox";
 import { EmojiPicker } from "./EmojiPicker";
 import { Markdown } from "./Markdown";
+import { IconButton } from "./IconButton";
 
 export type MarkdownInputProps = {
   chat: string;
@@ -141,7 +142,7 @@ export const MarkdownInput = (props: MarkdownInputProps) => {
         before={
           <>
             {showAttachments ?
-              <button
+              <IconButton
                 type="button"
                 aria-label="Upload attachment"
                 disabled={state !== "writing"}
@@ -162,7 +163,7 @@ export const MarkdownInput = (props: MarkdownInputProps) => {
                   ref={fileInput}
                 />
                 <CirclePlus aria-hidden />
-              </button>
+              </IconButton>
             : undefined}
           </>
         }
@@ -171,22 +172,22 @@ export const MarkdownInput = (props: MarkdownInputProps) => {
             <EmojiPicker
               onEmoji={handleEmoji}
               trigger={
-                <button
+                <IconButton
                   type="button"
                   aria-label="Pick an emoji"
                   disabled={state !== "writing"}
                 >
                   <Smile aria-hidden />
-                </button>
+                </IconButton>
               }
             />
-            <button
+            <IconButton
               type="submit"
               aria-label="Send"
               disabled={state !== "writing"}
             >
               <SendHorizontal aria-hidden />
-            </button>
+            </IconButton>
           </div>
         }
         above={

src/components/Post.tsx

@@ -20,6 +20,7 @@ import { RelativeTime } from "./RelativeTime";
 import { twMerge } from "tailwind-merge";
 import { EmojiPicker } from "./EmojiPicker";
 import { DiscordEmoji } from "../lib/discordEmoji";
+import { IconButton } from "./IconButton";
 
 export type PostProps = {
   id: string;
@@ -218,29 +219,29 @@ const PostBase = memo((props: PostBaseProps) => {
                         onEmoji={handleReaction}
                         discordEmoji={false}
                         trigger={
-                          <button type="button" aria-label="React">
+                          <IconButton type="button" aria-label="React">
                             <SmilePlus className="h-5 w-5" aria-hidden />
-                          </button>
+                          </IconButton>
                         }
                       />
                       {isInbox ?
                         undefined
-                      : <button
+                      : <IconButton
                           type="button"
                           aria-label="Reply"
                           onClick={doReply}
                         >
                           <Reply className="h-6 w-6" aria-hidden />
-                        </button>
+                        </IconButton>
                       }
                       <Menu
                         trigger={
-                          <button
+                          <IconButton
                             aria-label="Actions"
                             className="flex items-center"
                           >
                             <MenuIcon className="h-6 w-6" aria-hidden />
-                          </button>
+                          </IconButton>
                         }
                       >
                         <MenuItem disabled>Report</MenuItem>

src/components/StoredAccounts.tsx

@@ -5,6 +5,7 @@ import { Popup } from "./Popup";
 import { UserView } from "./UserView";
 import { useAPI } from "../lib/api";
 import * as Dialog from "@radix-ui/react-dialog";
+import { IconButton } from "./IconButton";
 
 export type StoredAccountsProps = {
   children: ReactNode;
@@ -60,13 +61,13 @@ const StoredAccount = (props: StoredAccountProps) => {
         text={props.isLoggedIn ? "Logged in" : undefined}
         className="px-4"
       />
-      <button
+      <IconButton
         aria-label="Remove"
         className="bg-white px-4 py-1 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800"
         onClick={() => removeStoredAccount(props.username)}
       >
         <X aria-hidden />
-      </button>
+      </IconButton>
     </div>
   );
 };

src/components/User.tsx

@@ -9,6 +9,7 @@ import { Markdown } from "./Markdown";
 import { ProfilePicture } from "./ProfilePicture";
 import { RelativeTime } from "./RelativeTime";
 import { PERMISSIONS } from "../lib/permissions";
+import { IconButton } from "./IconButton";
 
 export type UserProps = {
   username: string;
@@ -86,11 +87,15 @@ export const User = (props: UserProps) => {
                   <Button type="button" onClick={dm}>
                     DM
                   </Button>
-                  <button type="button" aria-label="Copy link" onClick={copy}>
+                  <IconButton
+                    type="button"
+                    aria-label="Copy link"
+                    onClick={copy}
+                  >
                     {copiedUser ?
                       <Check className="h-5 w-5" aria-hidden />
                     : <Copy className="h-5 w-5" aria-hidden />}
-                  </button>
+                  </IconButton>
                 </div>
               : undefined}
             </div>