improve information displayed

Author: kentcdodds

app/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

app/components/ui/tooltip.tsx

@@ -26,3 +26,19 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+
+export function SimpleTooltip({
+	content,
+	children,
+}: {
+	content: string | null
+	children: React.ReactNode
+}) {
+	if (!content) return children
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{children}</TooltipTrigger>
+			<TooltipContent>{content}</TooltipContent>
+		</Tooltip>
+	)
+}

app/root.tsx

@@ -34,6 +34,7 @@ import {
 } from './components/ui/dropdown-menu.tsx'
 import { Icon, href as iconsHref } from './components/ui/icon.tsx'
 import { EpicToaster } from './components/ui/sonner.tsx'
+import { TooltipProvider } from './components/ui/tooltip.tsx'
 import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
 import tailwindStyleSheetUrl from './styles/tailwind.css?url'
 import { getUserId, logout } from './utils/auth.server.ts'
@@ -248,9 +249,11 @@ function Logo() {
 function AppWithProviders() {
 	const data = useLoaderData<typeof loader>()
 	return (
-		<HoneypotProvider {...data.honeyProps}>
-			<App />
-		</HoneypotProvider>
+		<TooltipProvider>
+			<HoneypotProvider {...data.honeyProps}>
+				<App />
+			</HoneypotProvider>
+		</TooltipProvider>
 	)
 }
 

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

@@ -7,14 +7,21 @@ import {
 	type LoaderFunctionArgs,
 	type SerializeFrom,
 } from '@remix-run/node'
-import { useFetcher, useLoaderData } from '@remix-run/react'
-import cronParser from 'cron-parser'
+import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, TextareaField } from '#app/components/forms.js'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.js'
+import {
+	SimpleTooltip,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip.js'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { formatSendTime, getSendTime } from '#app/utils/cron.server.js'
 import { prisma } from '#app/utils/db.server.ts'
 import { useDoubleCheck } from '#app/utils/misc.js'
 import { sendTextToRecipient } from '#app/utils/text.server.js'
@@ -39,8 +46,6 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
 	const { messages, ...recipientProps } = recipient
 
-	const interval = cronParser.parseExpression(recipientProps.scheduleCron)
-
 	return json({
 		recipient: recipientProps,
 		futureMessages: messages
@@ -55,17 +60,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 				const isLast = i === arr.length - 1
 				const earlierOrder = isFirst ? null : (oneBefore + twoBefore) / 2
 				const laterOrder = isLast ? null : (oneAfter + twoAfter) / 2
-				const sendAtDisplay = interval
-					.next()
-					.toDate()
-					.toLocaleDateString('en-US', {
-						weekday: 'short',
-						year: 'numeric',
-						month: 'short',
-						day: 'numeric',
-						hour: 'numeric',
-						minute: 'numeric',
-					})
+				const sendAtDisplay = formatSendTime(
+					getSendTime(recipient.scheduleCron, i),
+				)
 				return {
 					id: m.id,
 					content: m.content,
@@ -215,11 +212,17 @@ export default function RecipientRoute() {
 
 	return (
 		<ul className="flex flex-col gap-12">
-			{data.futureMessages.map(m => (
-				<li key={m.id} className="flex justify-start gap-2 align-top">
-					<MessageForms message={m} />
-				</li>
-			))}
+			{data.futureMessages.length ? (
+				data.futureMessages.map(m => (
+					<li key={m.id} className="flex justify-start gap-2 align-top">
+						<MessageForms message={m} />
+					</li>
+				))
+			) : (
+				<Link to="new" className="underline">
+					Create a new message
+				</Link>
+			)}
 		</ul>
 	)
 }
@@ -316,10 +319,15 @@ function UpdateOrderForm({
 				name="intent"
 				value={updateMessageActionIntent}
 			>
+				{/* TODO: the tooltip doesn't seem to be working... */}
 				{direction === 'later' ? (
-					<Icon size="lg" name="chevron-down" title="Move later" />
+					<SimpleTooltip content="Move later">
+						<Icon size="lg" name="chevron-down" />
+					</SimpleTooltip>
 				) : (
-					<Icon size="lg" name="chevron-up" title="Move earlier" />
+					<SimpleTooltip content="Move earlier">
+						<Icon size="lg" name="chevron-up" />
+					</SimpleTooltip>
 				)}
 			</StatusButton>
 			<ErrorList id={fields.order.errorId} errors={fields.order.errors} />

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

@@ -30,6 +30,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
 	return json({
 		recipient: recipientProps,
+		messageCountDisplay: messages.length.toLocaleString(),
 		pastMessages: messages
 			.filter(m => m.sentAt)
 			.sort((m1, m2) => m2.sentAt!.getTime() - m1.sentAt!.getTime())
@@ -60,19 +61,26 @@ export default function RecipientRoute() {
 	const data = useLoaderData<typeof loader>()
 
 	return (
-		<ul className="flex flex-col gap-2">
-			{data.pastMessages.map(m => (
-				<li
-					key={m.id}
-					className="flex flex-col justify-start gap-2 align-top lg:flex-row"
-				>
-					<span className="text-muted-secondary-foreground min-w-36">
-						{m.sentAtDisplay}
-					</span>
-					<span>{m.content}</span>
-				</li>
-			))}
-		</ul>
+		<div>
+			<p className="mb-8">
+				You have sent <strong>{data.messageCountDisplay}</strong>{' '}
+				{data.pastMessages.length === 1 ? 'message' : 'messages'} to{' '}
+				{data.recipient.name}.
+			</p>
+			<ul className="flex flex-col gap-2">
+				{data.pastMessages.map(m => (
+					<li
+						key={m.id}
+						className="flex flex-col justify-start gap-2 align-top lg:flex-row"
+					>
+						<span className="min-w-36 text-muted-secondary-foreground">
+							{m.sentAtDisplay}
+						</span>
+						<span>{m.content}</span>
+					</li>
+				))}
+			</ul>
+		</div>
 	)
 }
 

app/routes/recipients+/$recipientId.tsx

@@ -13,13 +13,24 @@ import { GeneralErrorBoundary } from '#app/components/error-boundary.js'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.js'
 import { Button } from '#app/components/ui/button.js'
 import { Icon } from '#app/components/ui/icon.js'
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from '#app/components/ui/popover.tsx'
 import {
 	Tabs,
 	TabsContent,
 	TabsList,
 	TabsTrigger,
 } from '#app/components/ui/tabs.js'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip.js'
 import { requireUserId } from '#app/utils/auth.server.js'
+import { formatSendTime, getSendTime } from '#app/utils/cron.server.js'
 import { prisma } from '#app/utils/db.server.js'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
@@ -30,13 +41,19 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 			id: true,
 			name: true,
 			phoneNumber: true,
+			scheduleCron: true,
 			verified: true,
 		},
 	})
 
 	invariantResponse(recipient, 'Not found', { status: 404 })
 
-	return json({ recipient })
+	return json({
+		recipient,
+		formattedNextSendTime: formatSendTime(
+			getSendTime(recipient.scheduleCron, 0),
+		),
+	})
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -84,7 +101,7 @@ export default function RecipientRoute() {
 			<div className="absolute inset-0 flex flex-col px-10">
 				<h2 className="mb-2 h-36 pt-12 text-h2 lg:mb-6">
 					{data.recipient.name}
-					<small className="block text-sm text-secondary-foreground">
+					<small className="block text-sm font-normal text-secondary-foreground">
 						{data.recipient.phoneNumber}{' '}
 						{data.recipient.verified ? (
 							''
@@ -96,6 +113,12 @@ export default function RecipientRoute() {
 								(unverified)
 							</Link>
 						)}
+						<Tooltip>
+							<TooltipTrigger className="cursor-default">
+								{data.formattedNextSendTime}
+							</TooltipTrigger>
+							<TooltipContent>Next send time</TooltipContent>
+						</Tooltip>
 					</small>
 				</h2>
 				<div className="absolute left-3 right-3 top-[8.7rem] rounded-lg bg-muted/80 px-2 py-2 shadow-xl shadow-accent backdrop-blur-sm">

app/routes/recipients+/_layout.tsx

@@ -2,14 +2,23 @@ import { json, type LoaderFunctionArgs } from '@remix-run/node'
 import { NavLink, Outlet, useLoaderData } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip.js'
 import { requireUserId } from '#app/utils/auth.server.js'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn } from '#app/utils/misc.tsx'
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const userId = await requireUserId(request)
 	const recipients = await prisma.recipient.findMany({
-		select: { id: true, name: true },
+		select: {
+			id: true,
+			name: true,
+			_count: { select: { messages: { where: { sentAt: null } } } },
+		},
 		where: { userId },
 	})
 
@@ -48,10 +57,26 @@ export default function RecipientsRoute() {
 										preventScrollReset
 										prefetch="intent"
 										className={({ isActive }) =>
-											cn(navLinkDefaultClassName, isActive && 'bg-accent')
+											cn(
+												navLinkDefaultClassName,
+												isActive && 'bg-accent',
+												'flex gap-1',
+											)
 										}
 									>
-										{recipient.name}
+										<span>{recipient.name}</span>
+										{recipient._count.messages <= 0 ? (
+											<Tooltip>
+												<TooltipTrigger>
+													<Icon
+														size="xs"
+														name="exclamation-circle-outline"
+														className="self-start"
+													/>
+												</TooltipTrigger>
+												<TooltipContent>No new messages</TooltipContent>
+											</Tooltip>
+										) : null}
 									</NavLink>
 								</li>
 							))}

app/utils/cron.server.ts

@@ -115,3 +115,21 @@ export async function sendNextTexts() {
 	if (reminderSentCount) console.log(`Sent ${reminderSentCount} reminders`)
 	if (dueSentCount) console.log(`Sent ${dueSentCount} due texts`)
 }
+
+export function getSendTime(scheduleCron: string, number: number) {
+	const interval = cronParser.parseExpression(scheduleCron)
+	let next = interval.next().toDate()
+	while (number-- > 0) next = interval.next().toDate()
+	return next
+}
+
+export function formatSendTime(date: Date) {
+	return date.toLocaleDateString('en-US', {
+		weekday: 'short',
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: 'numeric',
+	})
+}