some improvements

Author: kentcdodds

.gitignore

@@ -24,3 +24,5 @@ node_modules
 
 # generated files
 /app/components/ui/icons
+
+vite.config.ts.timestamp*

app/routes/_app+/recipients+/$recipientId_.edit.tsx renamed to app/routes/_app+/recipients+/$recipientId.edit.tsx

@@ -1,12 +1,6 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node'
-import {
-	Link,
-	json,
-	useLoaderData,
-	useMatches,
-	useOutlet,
-} from '@remix-run/react'
+import { Link, Outlet, json, useLoaderData, useMatches } from '@remix-run/react'
 import { useEffect, useRef } from 'react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.js'
 import { Icon } from '#app/components/ui/icon.js'
@@ -58,7 +52,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export default function RecipientRoute() {
 	const data = useLoaderData<typeof loader>()
 	const firstLinkRef = useRef<HTMLAnchorElement | null>(null)
-	const outlet = useOutlet()
 	const matches = useMatches()
 	const lastMatch = matches[matches.length - 1]
 	const idPortion = lastMatch?.id.split('.')?.at(-1) ?? '.'
@@ -135,7 +128,7 @@ export default function RecipientRoute() {
 					<Link
 						to="edit"
 						className={`flex items-center gap-2 rounded-md px-3 py-2 transition-colors ${
-							currentPath === 'past'
+							currentPath === 'edit'
 								? 'bg-accent text-accent-foreground'
 								: 'hover:bg-accent/50'
 						}`}
@@ -144,7 +137,9 @@ export default function RecipientRoute() {
 					</Link>
 				</nav>
 			</div>
-			<div className="overflow-y-auto px-4 py-6">{outlet}</div>
+			<div className="overflow-y-auto px-4 py-6">
+				<Outlet />
+			</div>
 		</div>
 	)
 }

app/routes/_app+/recipients+/$recipientId.tsx

@@ -2,6 +2,11 @@ import { json, type LoaderFunctionArgs } from '@remix-run/node'
 import { Link, NavLink, Outlet, useLoaderData } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ButtonLink } from '#app/components/ui/button.tsx'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '#app/components/ui/dropdown-menu.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { SimpleTooltip } from '#app/components/ui/tooltip.js'
 import { requireUserId } from '#app/utils/auth.server.js'
@@ -46,30 +51,11 @@ export default function RecipientsLayout() {
 
 			<div className="bg-background-alt flex min-h-0 flex-1 flex-col">
 				<div className="flex flex-col gap-4 overflow-visible border-b-2 py-4 pl-1 pr-4">
-					<details
-						className="relative"
-						onBlur={(e) => {
-							const relatedTarget = e.relatedTarget
-							if (!e.currentTarget.contains(relatedTarget)) {
-								const el = e.currentTarget
-								// seems to cause the browser to crash if relatedTarget is null
-								// (like clicking within the details, but not on anything in particular)
-								// so we wrap it in a requestAnimationFrame and it closes fine.
-								requestAnimationFrame(() => {
-									el.removeAttribute('open')
-								})
-							}
-						}}
-						onKeyDown={(e) => {
-							if (e.key === 'Escape') {
-								e.currentTarget.removeAttribute('open')
-							}
-						}}
-					>
-						<summary className="hover:bg-background-alt-hover cursor-pointer px-2 py-1">
-							Select recipient
-						</summary>
-						<div className="bg-background-alt absolute left-0 top-full z-10 mt-1 min-w-64 max-w-full border p-2 shadow-lg">
+					<DropdownMenu>
+						<DropdownMenuTrigger className="hover:bg-background-alt-hover cursor-pointer px-2 py-1">
+							<Icon name="chevron-down">Select recipient</Icon>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent className="min-w-64">
 							{recipients.map((recipient) => (
 								<NavLink
 									key={recipient.id}
@@ -80,9 +66,6 @@ export default function RecipientsLayout() {
 											isActive ? 'underline' : '',
 										)
 									}
-									onClick={(e) => {
-										e.currentTarget.closest('details')?.removeAttribute('open')
-									}}
 								>
 									{({ isActive }) => (
 										<div className="flex items-center gap-1">
@@ -113,10 +96,10 @@ export default function RecipientsLayout() {
 									No recipients found. Add one to get started.
 								</div>
 							)}
-						</div>
-					</details>
+						</DropdownMenuContent>
+					</DropdownMenu>
 				</div>
-				<main className="flex flex-1 overflow-auto">
+				<main className="flex-1 overflow-auto">
 					<Outlet />
 				</main>
 			</div>