Message thread appearance (#84)

Co-authored-by: me <me@kentcdodds.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

app/components/search-bar.tsx

@@ -20,14 +20,16 @@ export function SearchBar({
 	showDateFilter?: boolean
 }) {
 	const id = useId()
-	const dateId = `${id}-date`
+	const startDateId = `${id}-start-date`
+	const endDateId = `${id}-end-date`
 	const [searchParams] = useSearchParams()
 	const submit = useSubmit()
 	const isSubmitting = useIsPending({
 		formMethod: 'GET',
 		formAction: action,
 	})
-	const dateValue = searchParams.get('date') ?? ''
+	const startDateValue = searchParams.get('startDate') ?? ''
+	const endDateValue = searchParams.get('endDate') ?? ''
 
 	const handleFormChange = useDebounce((form: HTMLFormElement) => {
 		void submit(form)
@@ -55,17 +57,31 @@ export function SearchBar({
 				/>
 			</div>
 			{showDateFilter ? (
-				<div className="w-full sm:w-auto">
-					<Label htmlFor={dateId} className="sr-only">
-						Filter by date
-					</Label>
-					<Input
-						type="date"
-						name="date"
-						id={dateId}
-						defaultValue={dateValue}
-						className="w-full"
-					/>
+				<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+					<div className="w-full sm:w-[160px]">
+						<Label htmlFor={startDateId} className="sr-only">
+							Start date
+						</Label>
+						<Input
+							type="date"
+							name="startDate"
+							id={startDateId}
+							defaultValue={startDateValue}
+							className="w-full"
+						/>
+					</div>
+					<div className="w-full sm:w-[160px]">
+						<Label htmlFor={endDateId} className="sr-only">
+							End date
+						</Label>
+						<Input
+							type="date"
+							name="endDate"
+							id={endDateId}
+							defaultValue={endDateValue}
+							className="w-full"
+						/>
+					</div>
 				</div>
 			) : null}
 			<div>

app/routes/_app+/_layout.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, type CSSProperties } from 'react'
 import {
 	Form,
 	Link,
@@ -67,40 +67,52 @@ export default function Layout() {
 	const data = useLoaderData<typeof loader>()
 	const user = useOptionalUser()
 	const requestInfo = useRequestInfo()
+	const isRecipientsRoute = requestInfo.path.startsWith('/recipients')
+	const recipientsTheme = isRecipientsRoute
+		? ({
+				'--background': '0 0% 100%',
+				'--card': '0 0% 100%',
+			} as CSSProperties)
+		: undefined
 	return (
-		<div className="flex h-screen flex-col justify-between">
-			<header className="container py-5 md:py-6">
-				<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
-					<Logo />
-					<div className="flex items-center gap-10">
-						{user ? (
-							<div className="flex gap-4">
-								{data.isSubscribed ? null : (
-									<Button variant="outline" asChild>
-										<Link to="/settings/profile/subscription">
-											Start your free trial
-										</Link>
-									</Button>
-								)}
-								<UserDropdown />
-							</div>
-						) : (
-							<>
-								<Button
-									asChild
-									variant="default"
-									size="lg"
-									className="hidden sm:inline-flex"
-								>
-									<Link to="/login">Log In</Link>
-								</Button>
-								<div className="sm:hidden">
-									<MobileMenu />
+		<div
+			className="bg-background flex h-screen flex-col justify-between"
+			style={recipientsTheme}
+		>
+			<header className="border-border border-b">
+				<div className="container py-5 md:py-6">
+					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
+						<Logo />
+						<div className="flex items-center gap-10">
+							{user ? (
+								<div className="flex gap-4">
+									{data.isSubscribed ? null : (
+										<Button variant="outline" asChild>
+											<Link to="/settings/profile/subscription">
+												Start your free trial
+											</Link>
+										</Button>
+									)}
+									<UserDropdown />
 								</div>
-							</>
-						)}
-					</div>
-				</nav>
+							) : (
+								<>
+									<Button
+										asChild
+										variant="default"
+										size="lg"
+										className="hidden sm:inline-flex"
+									>
+										<Link to="/login">Log In</Link>
+									</Button>
+									<div className="sm:hidden">
+										<MobileMenu />
+									</div>
+								</>
+							)}
+						</div>
+					</nav>
+				</div>
 			</header>
 			<div className="flex-1">
 				<Outlet />