refactor

app/components/error-boundary.tsx

@@ -9,8 +9,11 @@ export function GeneralErrorBoundary() {
 
   return (
     <div className="flex flex-col items-center gap-1 text-center">
-      <div className="mx-auto flex size-10 items-center justify-center rounded-full bg-destructive">
-        <ExclamationTriangleIcon className="size-5 text-destructive-foreground" />
+      <div className="mx-auto flex size-10 items-center justify-center rounded-full bg-destructive [&_svg]:size-5">
+        <ExclamationTriangleIcon
+          className="text-destructive-foreground"
+          aria-hidden
+        />
       </div>
       <h3 className="mt-4 text-2xl font-bold tracking-tight">
         Oops! An error occurred…

app/components/ui/breadcrumb.tsx

@@ -87,7 +87,7 @@ export const BreadcrumbSeparator = ({
     aria-hidden
     {...props}
   >
-    {children ?? <ChevronRightIcon />}
+    {children ?? <ChevronRightIcon aria-hidden />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -105,7 +105,7 @@ export const BreadcrumbEllipsis = ({
     )}
     {...props}
   >
-    <DotsHorizontalIcon />
+    <DotsHorizontalIcon aria-hidden />
     <span className="sr-only">More</span>
   </span>
 );

app/components/ui/dropdown-menu.tsx

@@ -40,7 +40,7 @@ export const DropdownMenuSubTrigger = forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto" />
+    <ChevronRightIcon className="ml-auto" aria-hidden />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -114,7 +114,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator className="[&>svg]:size-4">
-        <CheckIcon />
+        <CheckIcon aria-hidden />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -137,7 +137,7 @@ export const DropdownMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator className="[&>svg]:size-2">
-        <DotFilledIcon className="fill-current" />
+        <DotFilledIcon className="fill-current" aria-hidden />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

app/hooks/use-clipboard.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useClipboard(value: string, timeout = 1500) {
+  const [{ state, i }, setState] = useState<{
+    state: "idle" | "copied";
+    i: number;
+  }>({ state: "idle", i: 0 });
+  const hasCopied = state === "copied";
+
+  const copy = useCallback(async () => {
+    await navigator.clipboard.writeText(value);
+    setState({ state: "copied", i: i + 1 });
+  }, [i, value]);
+
+  useEffect(() => {
+    if (hasCopied) {
+      const timeoutId = window.setTimeout(() => {
+        setState({ state: "idle", i: i + 1 });
+      }, timeout);
+
+      return function cleanup() {
+        window.clearTimeout(timeoutId);
+      };
+    }
+  }, [hasCopied, i, timeout]);
+
+  return { copy, hasCopied };
+}

app/lib/utils.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from "cva";
-import { useCallback, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type { VariantProps } from "cva";
@@ -10,33 +9,6 @@ export const { cva, cx, compose } = defineConfig({
   },
 });
 
-export function useClipboard(value: string, timeout = 1500) {
-  const [{ state, i }, setState] = useState<{
-    state: "idle" | "copied";
-    i: number;
-  }>({ state: "idle", i: 0 });
-  const hasCopied = state === "copied";
-
-  const copy = useCallback(async () => {
-    await navigator.clipboard.writeText(value);
-    setState({ state: "copied", i: i + 1 });
-  }, [i, value]);
-
-  useEffect(() => {
-    if (hasCopied) {
-      const timeoutId = window.setTimeout(() => {
-        setState({ state: "idle", i: i + 1 });
-      }, timeout);
-
-      return function cleanup() {
-        window.clearTimeout(timeoutId);
-      };
-    }
-  }, [hasCopied, i, timeout]);
-
-  return { copy, hasCopied };
-}
-
 /**
  * This should be used any time the redirect path is user-provided
  * (Like the query string on our login/signup pages). This avoids

app/routes/_dashboard.contacts.$contactId._index.tsx

@@ -52,7 +52,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
           >
             <Form action="edit">
               <Button type="submit" size="sm">
-                <Pencil1Icon className="mr-2" aria-hidden />
+                <Pencil1Icon aria-hidden />
                 Edit details
               </Button>
             </Form>

app/routes/_dashboard.contacts.$contactId.notes.tsx

@@ -14,9 +14,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
+import { useClipboard } from "~/hooks/use-clipboard";
 import { requireUserId } from "~/lib/auth.server";
 import { db } from "~/lib/db.server";
-import { useClipboard } from "~/lib/utils";
 import type { Route } from "./+types/_dashboard.contacts.$contactId.notes";
 
 type LoaderData = Route.ComponentProps["loaderData"];

app/routes/_dashboard.contacts.$contactId.notes_.$noteId.edit.tsx

@@ -128,7 +128,7 @@ export default function Component({
       >
         <input type="hidden" name="intent" value="deleteNote" />
         <Button size="sm" variant="destructive" disabled={isDeleting}>
-          <TrashIcon className="mr-2" aria-hidden />
+          <TrashIcon aria-hidden />
           {isDeleting ? "Deleting…" : "Delete this note…"}
         </Button>
       </Form>

app/routes/_dashboard.contacts.$contactId.tsx

@@ -173,7 +173,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
           <div className="ml-6 flex gap-4 pb-1">
             <Form action="edit">
               <Button type="submit" size="sm" variant="outline">
-                <Pencil1Icon className="mr-2" aria-hidden />
+                <Pencil1Icon aria-hidden />
                 Edit
               </Button>
             </Form>
@@ -190,7 +190,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
             >
               <input type="hidden" name="intent" value="deleteContact" />
               <Button type="submit" size="sm" variant="outline">
-                <TrashIcon className="mr-2" aria-hidden />
+                <TrashIcon aria-hidden />
                 Delete
               </Button>
             </Form>

app/routes/_dashboard.contacts._index.tsx

@@ -12,7 +12,7 @@ export default function Component() {
       >
         <Form method="post" action="/contacts">
           <Button type="submit" size="sm">
-            <PlusIcon className="mr-2" aria-hidden />
+            <PlusIcon aria-hidden />
             New contact
           </Button>
         </Form>

app/routes/_dashboard.contacts.tsx

@@ -82,7 +82,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
           </search>
           <Form method="POST">
             <Button type="submit" aria-label="New contact">
-              <PlusIcon className="mr-2" aria-hidden />
+              <PlusIcon aria-hidden />
               New
             </Button>
           </Form>

app/routes/_dashboard.tsx

@@ -37,10 +37,10 @@ function LogoutForm() {
             type="submit"
             size="icon"
             variant="ghost"
-            className="text-muted-foreground hover:bg-background hover:text-foreground"
+            className="text-muted-foreground hover:bg-background hover:text-foreground [&_svg]:size-5"
             aria-label={label}
           >
-            <ExitIcon className="size-5" aria-hidden />
+            <ExitIcon aria-hidden />
           </Button>
         </TooltipTrigger>
         <TooltipContent side="right">{label}</TooltipContent>