refactor(web): Empty has three sizes

apps/web/src/components/NoProjectsHero.tsx

@@ -12,10 +12,10 @@ export function NoProjectsHero() {
   return (
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
-        <Empty className="flex-1">
+        <Empty size="hero" className="flex-1">
           <div className="w-full max-w-lg px-8 py-12">
             <EmptyHeader className="max-w-none">
-              <EmptyTitle className="text-2xl sm:text-3xl">What should we work on?</EmptyTitle>
+              <EmptyTitle>What should we work on?</EmptyTitle>
               <EmptyDescription>Add a project to start your first thread.</EmptyDescription>
               <div className="mt-6 flex justify-center">
                 <Button size="sm" onClick={openAddProject}>

apps/web/src/components/clerk/MobileClientsUserProfilePage.tsx

@@ -87,13 +87,13 @@ function MobileClientsSkeleton() {
 
 function EmptyMobileClients() {
   return (
-    <Empty className="min-h-64 gap-4 border-t px-6 py-10 md:p-10">
-      <EmptyMedia className="mb-0" variant="icon">
+    <Empty size="compact">
+      <EmptyMedia variant="icon">
         <SmartphoneIcon />
       </EmptyMedia>
       <EmptyHeader>
-        <EmptyTitle className="text-[1.0625rem] leading-6">No mobile clients</EmptyTitle>
-        <EmptyDescription className="text-[0.8125rem] leading-[1.125rem]">
+        <EmptyTitle>No mobile clients</EmptyTitle>
+        <EmptyDescription>
           Sign in to T3 Code on your iPhone to register it for push notifications and Live
           Activities.
         </EmptyDescription>
@@ -147,7 +147,9 @@ export function MobileClientsUserProfilePage() {
             ))}
           </ul>
         ) : (
-          <EmptyMobileClients />
+          <div className="border-t">
+            <EmptyMobileClients />
+          </div>
         )}
       </div>
     </ClerkUserProfilePage>

apps/web/src/components/clerk/T3ConnectUserProfilePage.tsx

@@ -233,19 +233,20 @@ export function T3ConnectUserProfilePage() {
             ))}
           </ul>
         ) : environmentsState.error ? null : (
-          <Empty className="min-h-64 gap-4 border-t px-6 py-10 md:p-10">
-            <EmptyMedia className="mb-0" variant="icon">
-              <ServerIcon />
-            </EmptyMedia>
-            <EmptyHeader>
-              <EmptyTitle className="text-[1.0625rem] leading-6">
-                No T3 Connect environments
-              </EmptyTitle>
-              <EmptyDescription className="text-[0.8125rem] leading-[1.125rem]">
-                Link an environment from its local Settings to make it available through T3 Connect.
-              </EmptyDescription>
-            </EmptyHeader>
-          </Empty>
+          <div className="border-t">
+            <Empty size="compact">
+              <EmptyMedia variant="icon">
+                <ServerIcon />
+              </EmptyMedia>
+              <EmptyHeader>
+                <EmptyTitle>No T3 Connect environments</EmptyTitle>
+                <EmptyDescription>
+                  Link an environment from its local Settings to make it available through T3
+                  Connect.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          </div>
         )}
       </div>
     </ClerkUserProfilePage>

apps/web/src/components/pullRequest/PullRequestListEmptyState.tsx

@@ -100,7 +100,7 @@ export function PullRequestListEmptyState({
   // Ahead of the search and the filters, because neither can produce a row until a project does.
   if (!hasProjects) {
     return (
-      <Empty className="py-16">
+      <Empty>
         <BranchMark joined={false} />
         <EmptyHeader>
           <EmptyTitle>No projects in this workspace</EmptyTitle>
@@ -131,7 +131,7 @@ export function PullRequestListEmptyState({
 
   if (query.length > 0) {
     return (
-      <Empty className="py-16">
+      <Empty>
         <BranchMark joined={false} />
         <EmptyHeader>
           {/* A pasted paragraph is still a search, but it is not a title. */}
@@ -142,7 +142,7 @@ export function PullRequestListEmptyState({
             The hosts were searched for it. Try fewer words, or search by number, author or branch.
           </EmptyDescription>
         </EmptyHeader>
-        <EmptyContent className="flex-row flex-wrap justify-center gap-2">
+        <div className="flex flex-wrap justify-center gap-2">
           <Button size="sm" variant="outline" onClick={onClearQuery}>
             <SearchIcon className="size-3.5" />
             Clear search
@@ -153,13 +153,13 @@ export function PullRequestListEmptyState({
             <RefreshIcon size="sm" refreshing={refreshing} />
             {refreshing ? "Checking..." : "Check again"}
           </Button>
-        </EmptyContent>
+        </div>
       </Empty>
     );
   }
 
   return (
-    <Empty className="py-16">
+    <Empty>
       <BranchMark joined={false} />
       <EmptyHeader>
         <EmptyTitle>{filtered ? "Nothing under these filters" : "No pull requests"}</EmptyTitle>
@@ -169,7 +169,7 @@ export function PullRequestListEmptyState({
             : "Pull requests from every project in this workspace appear here."}
         </EmptyDescription>
       </EmptyHeader>
-      <EmptyContent className="flex-row flex-wrap justify-center gap-2">
+      <div className="flex flex-wrap justify-center gap-2">
         {canLoadMore ? (
           <Button size="sm" variant="outline" disabled={loadingMore} onClick={onLoadMore}>
             {loadingMore ? "Loading..." : "Load more pull requests"}
@@ -179,7 +179,7 @@ export function PullRequestListEmptyState({
           <RefreshIcon size="sm" refreshing={refreshing} />
           {refreshing ? "Checking..." : "Check again"}
         </Button>
-      </EmptyContent>
+      </div>
     </Empty>
   );
 }

apps/web/src/components/pullRequest/PullRequestsUnavailableState.tsx

@@ -2,14 +2,7 @@ import { RefreshIcon } from "~/components/ui/refresh-icon";
 import { ExternalLinkIcon } from "lucide-react";
 
 import { Button } from "../ui/button";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "../ui/empty";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
 import { PullRequestGlyph } from "./pullRequestIcons";
 
 export function PullRequestsUnavailableState({
@@ -26,7 +19,7 @@ export function PullRequestsUnavailableState({
   gitHubUrl?: string;
 }) {
   return (
-    <Empty className="min-h-0 justify-center-safe overflow-y-auto px-4 py-16 md:px-4 [&>*]:shrink-0">
+    <Empty className="min-h-0 justify-center-safe overflow-y-auto [&>*]:shrink-0">
       <EmptyMedia variant="icon">
         <PullRequestGlyph.pullRequest />
       </EmptyMedia>
@@ -37,7 +30,7 @@ export function PullRequestsUnavailableState({
         <EmptyDescription>{error}</EmptyDescription>
       </EmptyHeader>
       {onRetry || gitHubUrl ? (
-        <EmptyContent className="flex-row flex-wrap justify-center gap-2">
+        <div className="flex flex-wrap justify-center gap-2">
           {onRetry ? (
             <Button
               size="sm"
@@ -60,7 +53,7 @@ export function PullRequestsUnavailableState({
               Open on GitHub
             </Button>
           ) : null}
-        </EmptyContent>
+        </div>
       ) : null}
     </Empty>
   );

apps/web/src/components/settings/ProviderSettingsPanel.tsx

@@ -203,7 +203,7 @@ function ProviderSettingsPlaceholder({
         divided={false}
         className={cn(providerCardHeightClassName, "flex overflow-x-hidden overflow-y-auto")}
       >
-        <Empty className="min-h-88">
+        <Empty>
           <EmptyMedia variant="icon">{icon}</EmptyMedia>
           <EmptyHeader>
             <EmptyTitle>{title}</EmptyTitle>

apps/web/src/components/settings/SourceControlSettings.tsx

@@ -476,7 +476,7 @@ function EmptySourceControlDiscovery({
 
   return (
     <SettingsSection id={searchableSetting("source-control").id} title="Server environment">
-      <Empty className="min-h-88">
+      <Empty>
         <EmptyMedia variant="icon">
           <PullRequestGlyph.pullRequest />
         </EmptyMedia>

apps/web/src/components/ui/empty.tsx

@@ -2,11 +2,25 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "~/lib/utils";
 
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
+// Size sets how much room the state claims and how large its title reads:
+// "compact" is a card-sized notice, "hero" fills a whole route.
+const emptySizeClassName = {
+  compact:
+    "min-h-64 gap-4 p-6 md:p-10 [&_[data-slot=empty-media]]:mb-0 [&_[data-slot=empty-title]]:text-[1.0625rem] [&_[data-slot=empty-title]]:leading-6 [&_[data-slot=empty-description]]:text-[0.8125rem] [&_[data-slot=empty-description]]:leading-[1.125rem]",
+  default: "gap-6 p-6 md:p-12",
+  hero: "gap-6 p-6 md:p-12 [&_[data-slot=empty-title]]:text-2xl sm:[&_[data-slot=empty-title]]:text-3xl",
+} as const;
+
+function Empty({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: keyof typeof emptySizeClassName }) {
   return (
     <div
       className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance p-6 text-center md:p-12",
+        "flex min-w-0 flex-1 flex-col items-center justify-center text-balance text-center",
+        emptySizeClassName[size],
         className,
       )}
       data-slot="empty"

scripts/lint-restyle-ceiling.ts

@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 766;
+export const RESTYLE_CEILING = 737;
 
 const RULE = "shadcn(no-restyle)";