refactor: clean up components directory

jakejarvis · jakejarvis · commit 76cd28eb685f · 2025-11-07T11:10:16.000-05:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,8 +4,8 @@ import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
 import { Suspense } from "react";
 import { Providers } from "@/app/providers";
-import { AppFooter } from "@/components/app-footer";
-import { AppHeader } from "@/components/app-header";
+import { AppFooter } from "@/components/layout/app-footer";
+import { AppHeader } from "@/components/layout/app-header";
 import { Toaster } from "@/components/ui/sonner";
 import { BASE_URL } from "@/lib/constants";
 import { TRPCProvider } from "@/trpc/client";
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 import { DomainSuggestions } from "@/components/domain/domain-suggestions";
-import { HomeHero } from "@/components/home-hero";
-import { HomeSearchSection } from "@/components/home-search-section";
+import { HomeHero } from "@/components/layout/home-hero";
+import { HomeSearchSection } from "@/components/layout/home-search-section";
 
 export default function Home() {
   return (
diff --git a/components/copy-button.tsx b/components/copy-button.tsx
diff --git a/components/domain/certificates/certificates-section.test.tsx b/components/domain/certificates/certificates-section.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { CertificatesSection, equalHostname } from "./certificates-section";
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: ({ domain }: { domain: string }) => (
     <div data-testid="favicon" data-slot="favicon" data-domain={domain} />
   ),
diff --git a/components/domain/certificates/certificates-section.tsx b/components/domain/certificates/certificates-section.tsx
@@ -8,11 +8,11 @@ import {
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { Fragment, useState } from "react";
+import { Favicon } from "@/components/domain/favicon";
 import { KeyValue } from "@/components/domain/key-value";
 import { KeyValueGrid } from "@/components/domain/key-value-grid";
 import { RelativeExpiryString } from "@/components/domain/relative-expiry";
 import { Section } from "@/components/domain/section";
-import { Favicon } from "@/components/favicon";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
diff --git a/components/domain/dns/dns-record-list.test.tsx b/components/domain/dns/dns-record-list.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { DnsRecordList } from "@/components/domain/dns/dns-record-list";
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: ({ domain }: { domain: string }) => <div>icon:{domain}</div>,
 }));
 
diff --git a/components/domain/dns/dns-record-list.tsx b/components/domain/dns/dns-record-list.tsx
@@ -2,8 +2,8 @@
 
 import { useMemo } from "react";
 import { TtlBadge } from "@/components/domain/dns/ttl-badge";
+import { Favicon } from "@/components/domain/favicon";
 import { KeyValue } from "@/components/domain/key-value";
-import { Favicon } from "@/components/favicon";
 import {
   Tooltip,
   TooltipContent,
diff --git a/components/domain/domain-report-header.tsx b/components/domain/domain-report-header.tsx
@@ -2,9 +2,9 @@
 
 import { ExternalLink } from "lucide-react";
 import { ExportButton } from "@/components/domain/export-button";
+import { Favicon } from "@/components/domain/favicon";
 import { ScreenshotTooltip } from "@/components/domain/screenshot-tooltip";
 import { ToolsDropdown } from "@/components/domain/tools-dropdown";
-import { Favicon } from "@/components/favicon";
 import { captureClient } from "@/lib/analytics/client";
 
 interface DomainReportHeaderProps {
diff --git a/components/domain/domain-report-view.test.tsx b/components/domain/domain-report-view.test.tsx
@@ -96,7 +96,7 @@ vi.mock("@/components/domain/export-button", () => ({
   ),
 }));
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: () => <div>Favicon</div>,
 }));
 
diff --git a/components/domain/domain-suggestions-client.tsx b/components/domain/domain-suggestions-client.tsx
@@ -2,8 +2,8 @@
 
 import { X } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Favicon } from "@/components/favicon";
-import { useHomeSearch } from "@/components/home-search-context";
+import { Favicon } from "@/components/domain/favicon";
+import { useHomeSearch } from "@/components/layout/home-search-context";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
diff --git a/components/domain/domain-suggestions.test.tsx b/components/domain/domain-suggestions.test.tsx
@@ -4,13 +4,13 @@ import userEvent from "@testing-library/user-event";
 import { createElement } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DomainSuggestionsClient } from "@/components/domain/domain-suggestions-client";
-import { HomeSearchProvider } from "@/components/home-search-context";
+import { HomeSearchProvider } from "@/components/layout/home-search-context";
 
 vi.mock("@/hooks/use-router", () => ({
   useRouter: () => ({ push: vi.fn() }),
 }));
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: ({ domain }: { domain: string }) =>
     createElement("span", {
       "data-slot": "favicon",
diff --git a/components/domain/favicon.test.tsx b/components/domain/favicon.test.tsx
diff --git a/components/domain/favicon.tsx b/components/domain/favicon.tsx
diff --git a/components/domain/hosting/hosting-section.test.tsx b/components/domain/hosting/hosting-section.test.tsx
@@ -12,7 +12,7 @@ vi.mock("next/dynamic", () => ({
   },
 }));
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: ({ domain }: { domain: string }) => <div>icon:{domain}</div>,
 }));
 
diff --git a/components/domain/hosting/hosting-section.tsx b/components/domain/hosting/hosting-section.tsx
@@ -2,11 +2,11 @@
 
 import { hasFlag } from "country-flag-icons";
 import { MailQuestionMark } from "lucide-react";
+import { Favicon } from "@/components/domain/favicon";
 import { HostingMap } from "@/components/domain/hosting/hosting-map";
 import { KeyValue } from "@/components/domain/key-value";
 import { KeyValueGrid } from "@/components/domain/key-value-grid";
 import { Section } from "@/components/domain/section";
-import { Favicon } from "@/components/favicon";
 import {
   Empty,
   EmptyDescription,
diff --git a/components/domain/key-value.tsx b/components/domain/key-value.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CopyButton } from "@/components/domain/copy-button";
+import { CopyButton } from "@/components/copy-button";
 import {
   Tooltip,
   TooltipContent,
diff --git a/components/domain/provider-value.test.tsx b/components/domain/provider-value.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ProviderValue } from "./provider-value";
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: ({ domain }: { domain: string }) => <div>icon:{domain}</div>,
 }));
 
diff --git a/components/domain/provider-value.tsx b/components/domain/provider-value.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Favicon } from "@/components/favicon";
+import { Favicon } from "@/components/domain/favicon";
 
 export function ProviderValue({
   name,
diff --git a/components/domain/registration/registration-section.test.tsx b/components/domain/registration/registration-section.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { RegistrationSection } from "./registration-section";
 
-vi.mock("@/components/favicon", () => ({
+vi.mock("@/components/domain/favicon", () => ({
   Favicon: ({ domain }: { domain: string }) => (
     <div data-slot="favicon" data-domain={domain} />
   ),
diff --git a/components/domain/registration/registration-section.tsx b/components/domain/registration/registration-section.tsx
@@ -6,11 +6,11 @@ import {
   GraduationCap,
   HatGlasses,
 } from "lucide-react";
+import { Favicon } from "@/components/domain/favicon";
 import { KeyValue } from "@/components/domain/key-value";
 import { KeyValueGrid } from "@/components/domain/key-value-grid";
 import { RelativeExpiryString } from "@/components/domain/relative-expiry";
 import { Section } from "@/components/domain/section";
-import { Favicon } from "@/components/favicon";
 import {
   Tooltip,
   TooltipContent,
diff --git a/components/domain/tools-dropdown.tsx b/components/domain/tools-dropdown.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { MoreHorizontal, Plus } from "lucide-react";
-import { Favicon } from "@/components/favicon";
+import { Favicon } from "@/components/domain/favicon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
diff --git a/components/heart.tsx b/components/heart.tsx
@@ -1,13 +1,8 @@
 "use client";
 
 import { motion, type SVGMotionProps } from "motion/react";
-import { cn } from "@/lib/utils";
 
-interface HeartIconProps extends SVGMotionProps<SVGSVGElement> {
-  size?: number;
-}
-
-export const HeartAnimated = ({ className, ...props }: HeartIconProps) => {
+export function HeartAnimated(props: SVGMotionProps<SVGSVGElement>) {
   return (
     <motion.svg
       xmlns="http://www.w3.org/2000/svg"
@@ -23,10 +18,9 @@ export const HeartAnimated = ({ className, ...props }: HeartIconProps) => {
         repeat: Number.POSITIVE_INFINITY,
         repeatDelay: 0.8,
       }}
-      className={cn(className)}
       {...props}
     >
       <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
     </motion.svg>
   );
-};
+}
diff --git a/components/layout/app-footer.tsx b/components/layout/app-footer.tsx
diff --git a/components/layout/app-header.tsx b/components/layout/app-header.tsx
@@ -1,26 +1,14 @@
 import Link from "next/link";
 import { Suspense } from "react";
-import { BookmarkletDialog } from "@/components/bookmarklet-dialog";
-import { GithubStars } from "@/components/github-stars";
-import { HeaderSearch } from "@/components/header-search";
+import { BookmarkletDialog } from "@/components/layout/bookmarklet-dialog";
+import { GithubStars } from "@/components/layout/github-stars";
+import { GithubStarsSkeleton } from "@/components/layout/github-stars-skeleton";
+import { HeaderSearch } from "@/components/layout/header-search";
+import { HeaderSearchSkeleton } from "@/components/layout/header-search-skeleton";
+import { ThemeToggle } from "@/components/layout/theme-toggle";
 import { Logo } from "@/components/logo";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { Separator } from "@/components/ui/separator";
 
-function GithubStarsSkeleton() {
-  return (
-    <div className="h-[32px] w-[60px] animate-pulse rounded-md bg-muted/50" />
-  );
-}
-
-function HeaderSearchSkeleton() {
-  return (
-    <div className="flex flex-1 justify-center">
-      <div className="h-10 w-full max-w-2xl animate-pulse rounded-md bg-muted/50" />
-    </div>
-  );
-}
-
 export function AppHeader() {
   return (
     <header className="sticky top-0 z-40 grid h-20 grid-cols-[1fr_minmax(0,var(--container-2xl))_1fr] items-center gap-4 border-b bg-background/60 px-4 py-3 backdrop-blur sm:px-6">
diff --git a/components/layout/bookmarklet-dialog.test.tsx b/components/layout/bookmarklet-dialog.test.tsx
@@ -11,7 +11,7 @@ vi.mock("@/components/ui/video-player", () => ({
   VideoPlayerContent: () => <div data-testid="video-content" />,
 }));
 
-import { BookmarkletDialog } from "@/components/bookmarklet-dialog";
+import { BookmarkletDialog } from "@/components/layout/bookmarklet-dialog";
 
 describe("Bookmarklet", () => {
   it("sets Inspect Domain href to a javascript: url", async () => {
diff --git a/components/layout/bookmarklet-dialog.tsx b/components/layout/bookmarklet-dialog.tsx
diff --git a/components/layout/github-stars-skeleton.tsx b/components/layout/github-stars-skeleton.tsx
@@ -0,0 +1,5 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function GithubStarsSkeleton() {
+  return <Skeleton className="h-[32px] w-[60px]" />;
+}
diff --git a/components/layout/github-stars.tsx b/components/layout/github-stars.tsx
diff --git a/components/layout/header-search-skeleton.tsx b/components/layout/header-search-skeleton.tsx
@@ -0,0 +1,11 @@
+import { DomainSearchSkeleton } from "@/components/domain/domain-search-skeleton";
+
+export function HeaderSearchSkeleton() {
+  return (
+    <div className="flex flex-1 justify-center">
+      <div className="w-full max-w-2xl">
+        <DomainSearchSkeleton variant="sm" />
+      </div>
+    </div>
+  );
+}
diff --git a/components/layout/header-search.test.tsx b/components/layout/header-search.test.tsx
diff --git a/components/layout/header-search.tsx b/components/layout/header-search.tsx
diff --git a/components/layout/home-hero.tsx b/components/layout/home-hero.tsx
diff --git a/components/layout/home-search-context.tsx b/components/layout/home-search-context.tsx
diff --git a/components/layout/home-search-section.tsx b/components/layout/home-search-section.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { DomainSearch } from "@/components/domain/domain-search";
-import { HomeSearchProvider } from "@/components/home-search-context";
+import { HomeSearchProvider } from "@/components/layout/home-search-context";
 import type { Source } from "@/hooks/use-domain-search";
 
 type NavigationTrigger = {
diff --git a/components/layout/theme-toggle.tsx b/components/layout/theme-toggle.tsx
