Refactor project structure and update dependencies

- Renamed project from "whoozle" to "hoot.sh" and updated version to 0.0.0-beta.1 in package.json. - Updated various dependencies in package.json and pnpm-lock.yaml for improved compatibility and performance. - Cleaned up imports across multiple components, ensuring consistent formatting and removing unnecessary lines. - Enhanced layout and styling in several components for better user experience and visual consistency.
2025-10-18 22:34:25 -04:00 · 2025-09-13 08:58:50 -04:00
parent 2a13bd7c4f
commit bc3ea24f1b
75 changed files with 1841 additions and 1505 deletions
--- a/app/[domain]/page.tsx
+++ b/app/[domain]/page.tsx
@@ -1,20 +1,24 @@
-import { notFound } from "next/navigation"
-import { DomainReportView } from "@/components/domain/domain-report-view"
+import { notFound } from "next/navigation";
+import { DomainReportView } from "@/components/domain/domain-report-view";

-export default async function DomainPage({ params }: { params: Promise<{ domain: string }> }) {
-  const { domain: raw } = await params
-  const domain = decodeURIComponent(raw)
-  if (!isValidDomain(domain)) return notFound()
+export default async function DomainPage({
+  params,
+}: {
+  params: Promise<{ domain: string }>;
+}) {
+  const { domain: raw } = await params;
+  const domain = decodeURIComponent(raw);
+  if (!isValidDomain(domain)) return notFound();

  return (
    <div className="container mx-auto max-w-4xl px-4 py-6">
      <DomainReportView domain={domain} />
    </div>
-  )
+  );
 }

 function isValidDomain(v: string) {
-  return /^(?=.{1,253}$)(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.[A-Za-z]{2,})+$/.test(v)
+  return /^(?=.{1,253}$)(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.[A-Za-z]{2,})+$/.test(
+    v,
+  );
 }
-
-
--- a/app/api/trpc/[trpc]/route.ts
+++ b/app/api/trpc/[trpc]/route.ts
@@ -1,5 +1,5 @@
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
-import { appRouter } from "@/server/routers/_app"
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import { appRouter } from "@/server/routers/_app";

 const handler = (req: Request) =>
  fetchRequestHandler({
@@ -7,8 +7,6 @@ const handler = (req: Request) =>
    req,
    router: appRouter,
    createContext: () => ({}),
-  })
-
-export { handler as GET, handler as POST }
-
+  });

+export { handler as GET, handler as POST };
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "@/components/ui/sonner";
 import { ModeToggle } from "@/components/mode-toggle";
+import { ThemeProvider } from "@/components/theme-provider";
 import { TRPCProvider } from "@/components/trpc-provider";
+import { Toaster } from "@/components/ui/sonner";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -28,7 +28,8 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ThemeProvider>
          {/* Solid background for light/dark modes */}
@@ -38,7 +39,7 @@ export default function RootLayout({
          <TRPCProvider>
            <div className="min-h-svh flex flex-col">
              <header className="sticky top-0 z-40 flex items-center justify-between px-4 sm:px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-                <div className="font-semibold tracking-tight">whoozle</div>
+                <div className="font-semibold tracking-tight">hoot.sh</div>
                <ModeToggle />
              </header>
              <main className="flex-1">{children}</main>
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,12 +1,16 @@
-import { DomainSearchForm } from "@/components/domain/domain-search-form"
+import { DomainSearchForm } from "@/components/domain/domain-search-form";

 export default function Home() {
  return (
    <div className="min-h-svh flex items-center justify-center px-4">
      <div className="w-full max-w-3xl">
        <div className="text-center space-y-3 mb-6">
-          <h1 className="text-3xl sm:text-4xl font-semibold tracking-tight">Domain Intelligence</h1>
-          <p className="text-muted-foreground">WHOIS, DNS, SSL, headers — all in one place.</p>
+          <h1 className="text-3xl sm:text-4xl font-semibold tracking-tight">
+            Domain Intelligence
+          </h1>
+          <p className="text-muted-foreground">
+            WHOIS, DNS, SSL, headers — all in one place.
+          </p>
        </div>
        <DomainSearchForm />
      </div>
--- a/components/domain/dns-group.tsx
+++ b/components/domain/dns-group.tsx
@@ -1,6 +1,13 @@
-import * as React from "react"
+import * as React from "react";

-type DnsGroupColor = "slate" | "blue" | "cyan" | "green" | "orange" | "purple" | "indigo"
+type DnsGroupColor =
+  | "slate"
+  | "blue"
+  | "cyan"
+  | "green"
+  | "orange"
+  | "purple"
+  | "indigo";

 export function DnsGroup({
  title,
@@ -8,22 +15,39 @@ export function DnsGroup({
  color = "slate",
  chart,
 }: {
-  title: string
-  children: React.ReactNode
-  color?: DnsGroupColor
-  chart?: 1 | 2 | 3 | 4 | 5
+  title: string;
+  children: React.ReactNode;
+  color?: DnsGroupColor;
+  chart?: 1 | 2 | 3 | 4 | 5;
 }) {
-  const count = React.Children.count(children)
-  if (count === 0) return null
-  const chartVar = chart === 1 ? "--dns-a" : chart === 2 ? "--dns-aaaa" : chart === 3 ? "--dns-mx" : chart === 4 ? "--dns-cname" : chart === 5 ? "--dns-txt" : undefined
+  const count = React.Children.count(children);
+  if (count === 0) return null;
+  const chartVar =
+    chart === 1
+      ? "--dns-a"
+      : chart === 2
+        ? "--dns-aaaa"
+        : chart === 3
+          ? "--dns-mx"
+          : chart === 4
+            ? "--dns-cname"
+            : chart === 5
+              ? "--dns-txt"
+              : undefined;
  const colorClass =
-    color === "blue" ? "bg-blue-500/15 text-blue-400 dark:text-blue-300" :
-    color === "cyan" ? "bg-cyan-500/15 text-cyan-400 dark:text-cyan-300" :
-    color === "green" ? "bg-green-500/15 text-green-400 dark:text-green-300" :
-    color === "orange" ? "bg-orange-500/15 text-orange-400 dark:text-orange-300" :
-    color === "purple" ? "bg-purple-500/15 text-purple-400 dark:text-purple-300" :
-    color === "indigo" ? "bg-indigo-500/15 text-indigo-400 dark:text-indigo-300" :
-    "bg-foreground/10 text-foreground/80"
+    color === "blue"
+      ? "bg-blue-500/15 text-blue-400 dark:text-blue-300"
+      : color === "cyan"
+        ? "bg-cyan-500/15 text-cyan-400 dark:text-cyan-300"
+        : color === "green"
+          ? "bg-green-500/15 text-green-400 dark:text-green-300"
+          : color === "orange"
+            ? "bg-orange-500/15 text-orange-400 dark:text-orange-300"
+            : color === "purple"
+              ? "bg-purple-500/15 text-purple-400 dark:text-purple-300"
+              : color === "indigo"
+                ? "bg-indigo-500/15 text-indigo-400 dark:text-indigo-300"
+                : "bg-foreground/10 text-foreground/80";
  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
@@ -32,19 +56,19 @@ export function DnsGroup({
        </div>
        <span
          className={`inline-flex h-5 min-w-5 items-center justify-center rounded-full text-[10px] px-1.5 ${chartVar ? "" : colorClass}`}
-          style={chartVar ? ({
-            color: `var(${chartVar})`,
-            background: `color-mix(in oklch, var(${chartVar}) 18%, transparent)`,
-          } as React.CSSProperties) : undefined}
+          style={
+            chartVar
+              ? ({
+                  color: `var(${chartVar})`,
+                  background: `color-mix(in oklch, var(${chartVar}) 18%, transparent)`,
+                } as React.CSSProperties)
+              : undefined
+          }
        >
          {count}
        </span>
      </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        {children}
-      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">{children}</div>
    </div>
-  )
+  );
 }
-
-
--- a/components/domain/domain-report-view.tsx
+++ b/components/domain/domain-report-view.tsx
@@ -1,43 +1,66 @@
-"use client"
+"use client";

-import { Accordion } from "@/components/ui/accordion"
-import { Button } from "@/components/ui/button"
-import { Copy, Download } from "lucide-react"
-import { Favicon } from "./favicon"
-import { trpc } from "@/lib/trpc/client"
-import { Section } from "./section"
-import { KeyValue } from "./key-value"
-import { Shield, Server, Globe, Lock } from "lucide-react"
-import { DnsGroup } from "./dns-group"
-import { Skeletons } from "./skeletons"
-import { ProviderLogo } from "./provider-logo"
+import { Copy, Download, Globe, Lock, Server, Shield } from "lucide-react";
+import { Accordion } from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { trpc } from "@/lib/trpc/client";
+import { DnsGroup } from "./dns-group";
+import { Favicon } from "./favicon";
+import { KeyValue } from "./key-value";
+import { ProviderLogo } from "./provider-logo";
+import { Section } from "./section";
+import { Skeletons } from "./skeletons";

 export function DomainReportView({ domain }: { domain: string }) {
-  const resolvedDomain = domain
-  const whois = trpc.domain.whois.useQuery({ domain: resolvedDomain }, { enabled: !!domain, retry: 1 })
-  const dns = trpc.domain.dns.useQuery({ domain: resolvedDomain }, { enabled: !!domain, retry: 2 })
-  const hosting = trpc.domain.hosting.useQuery({ domain: resolvedDomain }, { enabled: !!domain, retry: 1 })
-  const certs = trpc.domain.certificates.useQuery({ domain: resolvedDomain }, { enabled: !!domain, retry: 0 })
-  const headers = trpc.domain.headers.useQuery({ domain: resolvedDomain }, { enabled: !!domain, retry: 1 })
+  const resolvedDomain = domain;
+  const whois = trpc.domain.whois.useQuery(
+    { domain: resolvedDomain },
+    { enabled: !!domain, retry: 1 },
+  );
+  const dns = trpc.domain.dns.useQuery(
+    { domain: resolvedDomain },
+    { enabled: !!domain, retry: 2 },
+  );
+  const hosting = trpc.domain.hosting.useQuery(
+    { domain: resolvedDomain },
+    { enabled: !!domain, retry: 1 },
+  );
+  const certs = trpc.domain.certificates.useQuery(
+    { domain: resolvedDomain },
+    { enabled: !!domain, retry: 0 },
+  );
+  const headers = trpc.domain.headers.useQuery(
+    { domain: resolvedDomain },
+    { enabled: !!domain, retry: 1 },
+  );
  function copy(text: string) {
-    navigator.clipboard.writeText(text)
+    navigator.clipboard.writeText(text);
  }

  function exportJson() {
-    const blob = new Blob([JSON.stringify({
-      domain: resolvedDomain,
-      whois: whois.data,
-      dns: dns.data,
-      hosting: hosting.data,
-      certificates: certs.data,
-      headers: headers.data,
-    }, null, 2)], { type: "application/json" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = `${resolvedDomain}-whoozle.json`
-    a.click()
-    URL.revokeObjectURL(url)
+    const blob = new Blob(
+      [
+        JSON.stringify(
+          {
+            domain: resolvedDomain,
+            whois: whois.data,
+            dns: dns.data,
+            hosting: hosting.data,
+            certificates: certs.data,
+            headers: headers.data,
+          },
+          null,
+          2,
+        ),
+      ],
+      { type: "application/json" },
+    );
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${resolvedDomain}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
  }

  return (
@@ -46,12 +69,18 @@ export function DomainReportView({ domain }: { domain: string }) {
        <div>
          <div className="flex items-center gap-2">
            <Favicon domain={resolvedDomain} size={20} className="rounded" />
-            <h2 className="text-xl font-semibold tracking-tight">{resolvedDomain}</h2>
+            <h2 className="text-xl font-semibold tracking-tight">
+              {resolvedDomain}
+            </h2>
          </div>
          <p className="text-muted-foreground text-sm">Mock data</p>
        </div>
        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={() => copy(resolvedDomain)}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => copy(resolvedDomain)}
+          >
            <Copy className="mr-2 h-4 w-4" /> Copy domain
          </Button>
          <Button variant="default" size="sm" onClick={exportJson}>
@@ -67,22 +96,43 @@ export function DomainReportView({ domain }: { domain: string }) {
          help="WHOIS shows registrar, registration dates, and registrant details."
          icon={<Shield className="h-4 w-4" />}
          accent="purple"
-          status={whois.isLoading ? "loading" : whois.isError ? "error" : "ready"}
+          status={
+            whois.isLoading ? "loading" : whois.isError ? "error" : "ready"
+          }
        >
          {whois.data ? (
            <>
-              <KeyValue label="Registrar" value={whois.data.registrar} leading={<ProviderLogo name={whois.data.registrar} />} />
-              <KeyValue label="Created" value={formatDate(whois.data.creationDate)} />
-              <KeyValue label="Expires" value={formatDate(whois.data.expirationDate)} />
-              <KeyValue label="Registrant" value={`${whois.data.registrant.organization} (${whois.data.registrant.country})`} />
+              <KeyValue
+                label="Registrar"
+                value={whois.data.registrar}
+                leading={<ProviderLogo name={whois.data.registrar} />}
+              />
+              <KeyValue
+                label="Created"
+                value={formatDate(whois.data.creationDate)}
+              />
+              <KeyValue
+                label="Expires"
+                value={formatDate(whois.data.expirationDate)}
+              />
+              <KeyValue
+                label="Registrant"
+                value={`${whois.data.registrant.organization} (${whois.data.registrant.country})`}
+              />
            </>
+          ) : whois.isError ? (
+            <div className="text-sm text-destructive flex items-center gap-2">
+              Failed to load WHOIS.
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => whois.refetch()}
+              >
+                Retry
+              </Button>
+            </div>
          ) : (
-            whois.isError ? (
-              <div className="text-sm text-destructive flex items-center gap-2">
-                Failed to load WHOIS.
-                <Button variant="outline" size="sm" onClick={() => whois.refetch()}>Retry</Button>
-              </div>
-            ) : <Skeletons count={4} />
+            <Skeletons count={4} />
          )}
        </Section>

@@ -97,38 +147,55 @@ export function DomainReportView({ domain }: { domain: string }) {
          {dns.data ? (
            <div className="space-y-4">
              <DnsGroup title="A Records" chart={1}>
-                {dns.data.filter((d) => d.type === "A").map((r, i) => (
-                  <KeyValue key={`A-${i}`} value={r.value} copyable />
-                ))}
+                {dns.data
+                  .filter((d) => d.type === "A")
+                  .map((r, i) => (
+                    <KeyValue key={`A-${i}`} value={r.value} copyable />
+                  ))}
              </DnsGroup>
              <DnsGroup title="AAAA Records" chart={2}>
-                {dns.data.filter((d) => d.type === "AAAA").map((r, i) => (
-                  <KeyValue key={`AAAA-${i}`} value={r.value} copyable />
-                ))}
+                {dns.data
+                  .filter((d) => d.type === "AAAA")
+                  .map((r, i) => (
+                    <KeyValue key={`AAAA-${i}`} value={r.value} copyable />
+                  ))}
              </DnsGroup>
              <DnsGroup title="MX Records" chart={3}>
-                {dns.data.filter((d) => d.type === "MX").map((r, i) => (
-                  <KeyValue key={`MX-${i}`} label={`${r.priority ? `Priority ${r.priority}` : ""}`} value={r.value} copyable />
-                ))}
+                {dns.data
+                  .filter((d) => d.type === "MX")
+                  .map((r, i) => (
+                    <KeyValue
+                      key={`MX-${i}`}
+                      label={`${r.priority ? `Priority ${r.priority}` : ""}`}
+                      value={r.value}
+                      copyable
+                    />
+                  ))}
              </DnsGroup>
              <DnsGroup title="TXT Records" chart={5}>
-                {dns.data.filter((d) => d.type === "TXT").map((r, i) => (
-                  <KeyValue key={`TXT-${i}`} value={r.value} copyable />
-                ))}
+                {dns.data
+                  .filter((d) => d.type === "TXT")
+                  .map((r, i) => (
+                    <KeyValue key={`TXT-${i}`} value={r.value} copyable />
+                  ))}
              </DnsGroup>
              <DnsGroup title="NS Records" chart={1}>
-                {dns.data.filter((d) => d.type === "NS").map((r, i) => (
-                  <KeyValue key={`NS-${i}`} value={r.value} copyable />
-                ))}
+                {dns.data
+                  .filter((d) => d.type === "NS")
+                  .map((r, i) => (
+                    <KeyValue key={`NS-${i}`} value={r.value} copyable />
+                  ))}
              </DnsGroup>
            </div>
+          ) : dns.isError ? (
+            <div className="text-sm text-destructive flex items-center gap-2">
+              Failed to load DNS.
+              <Button variant="outline" size="sm" onClick={() => dns.refetch()}>
+                Retry
+              </Button>
+            </div>
          ) : (
-            dns.isError ? (
-              <div className="text-sm text-destructive flex items-center gap-2">
-                Failed to load DNS.
-                <Button variant="outline" size="sm" onClick={() => dns.refetch()}>Retry</Button>
-              </div>
-            ) : <Skeletons count={6} />
+            <Skeletons count={6} />
          )}
        </Section>

@@ -138,21 +205,41 @@ export function DomainReportView({ domain }: { domain: string }) {
          help="Hosting provider serves your site; email provider handles your domain's email."
          icon={<Server className="h-4 w-4" />}
          accent="green"
-          status={hosting.isLoading ? "loading" : hosting.isError ? "error" : "ready"}
+          status={
+            hosting.isLoading ? "loading" : hosting.isError ? "error" : "ready"
+          }
        >
          {hosting.data ? (
            <>
-              <KeyValue label="Hosting" value={hosting.data.hostingProvider} leading={<ProviderLogo name={hosting.data.hostingProvider} />} />
-              <KeyValue label="Email" value={hosting.data.emailProvider} leading={<ProviderLogo name={hosting.data.emailProvider} />} />
-              <KeyValue label="IP" value={`${hosting.data.ipAddress} (${hosting.data.geo.city}, ${hosting.data.geo.country})`} copyable />
+              <KeyValue
+                label="Hosting"
+                value={hosting.data.hostingProvider}
+                leading={<ProviderLogo name={hosting.data.hostingProvider} />}
+              />
+              <KeyValue
+                label="Email"
+                value={hosting.data.emailProvider}
+                leading={<ProviderLogo name={hosting.data.emailProvider} />}
+              />
+              <KeyValue
+                label="IP"
+                value={`${hosting.data.ipAddress} (${hosting.data.geo.city}, ${hosting.data.geo.country})`}
+                copyable
+              />
            </>
+          ) : hosting.isError ? (
+            <div className="text-sm text-destructive flex items-center gap-2">
+              Failed to load hosting details.
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => hosting.refetch()}
+              >
+                Retry
+              </Button>
+            </div>
          ) : (
-            hosting.isError ? (
-              <div className="text-sm text-destructive flex items-center gap-2">
-                Failed to load hosting details.
-                <Button variant="outline" size="sm" onClick={() => hosting.refetch()}>Retry</Button>
-              </div>
-            ) : <Skeletons count={3} />
+            <Skeletons count={3} />
          )}
        </Section>

@@ -162,27 +249,42 @@ export function DomainReportView({ domain }: { domain: string }) {
          help="SSL/TLS certificates encrypt traffic and verify your domain's identity."
          icon={<Lock className="h-4 w-4" />}
          accent="orange"
-          status={certs.isLoading ? "loading" : certs.isError ? "error" : "ready"}
+          status={
+            certs.isLoading ? "loading" : certs.isError ? "error" : "ready"
+          }
        >
-          {certs.data ? certs.data.map((c, i) => (
-            <div key={i} className="rounded-lg border p-3">
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                <KeyValue label="Issuer" value={c.issuer} />
-                <KeyValue label="Subject" value={c.subject} />
-                <KeyValue label="Valid from" value={formatDate(c.validFrom)} />
-                <KeyValue label="Valid to" value={formatDate(c.validTo)} />
-                <KeyValue label="Key" value={c.keyType} />
-                <KeyValue label="Signature" value={c.signatureAlgorithm} />
+          {certs.data ? (
+            certs.data.map((c, i) => (
+              <div key={i} className="rounded-lg border p-3">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  <KeyValue label="Issuer" value={c.issuer} />
+                  <KeyValue label="Subject" value={c.subject} />
+                  <KeyValue
+                    label="Valid from"
+                    value={formatDate(c.validFrom)}
+                  />
+                  <KeyValue label="Valid to" value={formatDate(c.validTo)} />
+                  <KeyValue label="Key" value={c.keyType} />
+                  <KeyValue label="Signature" value={c.signatureAlgorithm} />
+                </div>
+                <div className="mt-2 text-xs text-muted-foreground">
+                  Chain: {c.chain.join(" → ")}
+                </div>
              </div>
-              <div className="mt-2 text-xs text-muted-foreground">Chain: {c.chain.join(" → ")}</div>
+            ))
+          ) : certs.isError ? (
+            <div className="text-sm text-destructive flex items-center gap-2">
+              Failed to load certificates.
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => certs.refetch()}
+              >
+                Retry
+              </Button>
            </div>
-          )) : (
-            certs.isError ? (
-              <div className="text-sm text-destructive flex items-center gap-2">
-                Failed to load certificates.
-                <Button variant="outline" size="sm" onClick={() => certs.refetch()}>Retry</Button>
-              </div>
-            ) : <Skeletons count={1} />
+          ) : (
+            <Skeletons count={1} />
          )}
        </Section>

@@ -192,7 +294,9 @@ export function DomainReportView({ domain }: { domain: string }) {
          help="Headers include server info and security/caching directives returned by your site."
          icon={<Server className="h-4 w-4" />}
          accent="purple"
-          status={headers.isLoading ? "loading" : headers.isError ? "error" : "ready"}
+          status={
+            headers.isLoading ? "loading" : headers.isError ? "error" : "ready"
+          }
        >
          {headers.data ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -200,26 +304,30 @@ export function DomainReportView({ domain }: { domain: string }) {
                <KeyValue key={i} label={h.name} value={h.value} copyable />
              ))}
            </div>
+          ) : headers.isError ? (
+            <div className="text-sm text-destructive flex items-center gap-2">
+              Failed to load headers.
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => headers.refetch()}
+              >
+                Retry
+              </Button>
+            </div>
          ) : (
-            headers.isError ? (
-              <div className="text-sm text-destructive flex items-center gap-2">
-                Failed to load headers.
-                <Button variant="outline" size="sm" onClick={() => headers.refetch()}>Retry</Button>
-              </div>
-            ) : <Skeletons count={4} />
+            <Skeletons count={4} />
          )}
        </Section>
      </Accordion>
    </div>
-  )
+  );
 }

 function formatDate(iso: string) {
  try {
-    return new Date(iso).toLocaleString()
+    return new Date(iso).toLocaleString();
  } catch {
-    return iso
+    return iso;
  }
 }
-
-
--- a/components/domain/domain-search-form.tsx
+++ b/components/domain/domain-search-form.tsx
@@ -1,65 +1,73 @@
-"use client"
+"use client";

-import * as React from "react"
-import { useRouter } from "next/navigation"
-import { z } from "zod"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { Search, Loader2 } from "lucide-react"
-import { toast } from "sonner"
-import { Favicon } from "./favicon"
+import { Loader2, Search } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Favicon } from "./favicon";

 const domainSchema = z
  .string()
  .trim()
  .toLowerCase()
-  .refine((v) => /^(?=.{1,253}$)(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.[A-Za-z]{2,})+$/.test(v), {
-    message: "Enter a valid domain like example.com",
-  })
+  .refine(
+    (v) =>
+      /^(?=.{1,253}$)(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.[A-Za-z]{2,})+$/.test(v),
+    {
+      message: "Enter a valid domain like example.com",
+    },
+  );

 export function DomainSearchForm({
  initialValue = "",
  showHistory = true,
 }: {
-  initialValue?: string
-  showHistory?: boolean
+  initialValue?: string;
+  showHistory?: boolean;
 }) {
-  const router = useRouter()
-  const [value, setValue] = React.useState(initialValue)
-  const [loading, setLoading] = React.useState(false)
-  const [history, setHistory] = React.useState<string[]>([])
-  const inputRef = React.useRef<HTMLInputElement>(null)
+  const router = useRouter();
+  const [value, setValue] = React.useState(initialValue);
+  const [loading, setLoading] = React.useState(false);
+  const [history, setHistory] = React.useState<string[]>([]);
+  const inputRef = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
-    const stored = localStorage.getItem("whoozle-history")
-    if (stored) setHistory(JSON.parse(stored))
-  }, [])
+    const stored = localStorage.getItem("hoot-history");
+    if (stored) setHistory(JSON.parse(stored));
+  }, []);

  function updateHistory(domain: string) {
-    const next = [domain, ...history.filter((d) => d !== domain)].slice(0, 5)
-    setHistory(next)
-    localStorage.setItem("whoozle-history", JSON.stringify(next))
+    const next = [domain, ...history.filter((d) => d !== domain)].slice(0, 5);
+    setHistory(next);
+    localStorage.setItem("hoot-history", JSON.stringify(next));
  }

  async function onSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    const parsed = domainSchema.safeParse(value)
+    e.preventDefault();
+    const parsed = domainSchema.safeParse(value);
    if (!parsed.success) {
-      const issue = parsed.error.issues?.[0]
-      toast.error(issue?.message ?? "Invalid domain")
-      inputRef.current?.focus()
-      return
+      const issue = parsed.error.issues?.[0];
+      toast.error(issue?.message ?? "Invalid domain");
+      inputRef.current?.focus();
+      return;
    }
-    setLoading(true)
-    updateHistory(parsed.data)
-    router.push(`/${encodeURIComponent(parsed.data)}`)
+    setLoading(true);
+    updateHistory(parsed.data);
+    router.push(`/${encodeURIComponent(parsed.data)}`);
  }

  return (
    <>
      <form
-        role="search"
        aria-label="Domain search"
        className="relative flex items-center gap-2 rounded-xl border bg-background/60 backdrop-blur supports-[backdrop-filter]:bg-background/60 p-2 shadow-sm"
        onSubmit={onSubmit}
@@ -68,7 +76,10 @@ export function DomainSearchForm({
          Domain
        </label>
        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" aria-hidden />
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+            aria-hidden
+          />
          <Input
            id="domain"
            ref={inputRef}
@@ -81,7 +92,9 @@ export function DomainSearchForm({
            onChange={(e) => setValue(e.target.value)}
            className="pl-9 h-12"
          />
-          <span id="domain-help" className="sr-only">Enter a domain like example.com</span>
+          <span id="domain-help" className="sr-only">
+            Enter a domain like example.com
+          </span>
        </div>
        <TooltipProvider>
          <Tooltip>
@@ -101,9 +114,14 @@ export function DomainSearchForm({
      </form>

      {showHistory && history.length > 0 && (
-        <div className="mt-3 flex flex-wrap gap-2" aria-label="Recent searches">
+        <div className="mt-3 flex flex-wrap gap-2">
          {history.map((d) => (
-            <Button key={d} variant="secondary" size="sm" onClick={() => router.push(`/${encodeURIComponent(d)}`)}>
+            <Button
+              key={d}
+              variant="secondary"
+              size="sm"
+              onClick={() => router.push(`/${encodeURIComponent(d)}`)}
+            >
              <span className="inline-flex items-center gap-2">
                <Favicon domain={d} size={14} className="rounded" />
                {d}
@@ -113,7 +131,5 @@ export function DomainSearchForm({
        </div>
      )}
    </>
-  )
+  );
 }
-
-
--- a/components/domain/favicon.tsx
+++ b/components/domain/favicon.tsx
@@ -1,7 +1,15 @@
-import Image from "next/image"
+import Image from "next/image";

-export function Favicon({ domain, size = 16, className }: { domain: string; size?: number; className?: string }) {
-  const src = `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=128`
+export function Favicon({
+  domain,
+  size = 16,
+  className,
+}: {
+  domain: string;
+  size?: number;
+  className?: string;
+}) {
+  const src = `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=128`;
  return (
    <Image
      src={src}
@@ -10,7 +18,5 @@ export function Favicon({ domain, size = 16, className }: { domain: string; size
      height={size}
      className={className}
    />
-  )
+  );
 }
-
-
--- a/components/domain/key-value.tsx
+++ b/components/domain/key-value.tsx
@@ -1,13 +1,28 @@
-import { Button } from "@/components/ui/button"
-import { Copy } from "lucide-react"
-import { toast } from "sonner"
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";

-export function KeyValue({ label, value, copyable, leading }: { label?: string; value: string; copyable?: boolean; leading?: React.ReactNode }) {
+export function KeyValue({
+  label,
+  value,
+  copyable,
+  leading,
+}: {
+  label?: string;
+  value: string;
+  copyable?: boolean;
+  leading?: React.ReactNode;
+}) {
  return (
    <div className="flex items-center justify-between gap-4 rounded-2xl border border-white/12 dark:border-white/10 bg-background/40 backdrop-blur-lg px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
      <div className="min-w-0">
-        <div className="text-[10px] uppercase tracking-[0.08em] text-foreground/75 dark:text-foreground/80">{label}</div>
-        <div className="text-[13px] leading-[1.2] truncate text-foreground/95 flex items-center gap-2" title={value}>
+        <div className="text-[10px] uppercase tracking-[0.08em] text-foreground/75 dark:text-foreground/80">
+          {label}
+        </div>
+        <div
+          className="text-[13px] leading-[1.2] truncate text-foreground/95 flex items-center gap-2"
+          title={value}
+        >
          {leading}
          <span className="truncate">{value}</span>
        </div>
@@ -18,13 +33,14 @@ export function KeyValue({ label, value, copyable, leading }: { label?: string;
          size="sm"
          className="shrink-0 h-7 px-2 bg-background/50 backdrop-blur border-white/20 dark:border-white/10"
          aria-label={`Copy ${label}`}
-          onClick={() => { navigator.clipboard.writeText(value); toast.success("Copied") }}
+          onClick={() => {
+            navigator.clipboard.writeText(value);
+            toast.success("Copied");
+          }}
        >
          <Copy className="mr-1 h-3.5 w-3.5" /> Copy
        </Button>
      )}
    </div>
-  )
+  );
 }
-
-
--- a/components/domain/provider-logo.tsx
+++ b/components/domain/provider-logo.tsx
@@ -1,37 +1,45 @@
-import { Favicon } from "./favicon"
-import { Globe } from "lucide-react"
+import { Globe } from "lucide-react";
+import { Favicon } from "./favicon";

-export function ProviderLogo({ name, size = 14, className }: { name: string; size?: number; className?: string }) {
-  const domain = mapProviderToDomain(name)
+export function ProviderLogo({
+  name,
+  size = 14,
+  className,
+}: {
+  name: string;
+  size?: number;
+  className?: string;
+}) {
+  const domain = mapProviderToDomain(name);
  if (!domain) {
-    return <Globe className={className} width={size} height={size} />
+    return <Globe className={className} width={size} height={size} />;
  }
-  return <Favicon domain={domain} size={size} className={className} />
+  return <Favicon domain={domain} size={size} className={className} />;
 }

 function mapProviderToDomain(name: string): string | undefined {
-  const n = name.toLowerCase()
+  const n = name.toLowerCase();
  // Hosting
-  if (n.includes("vercel")) return "vercel.com"
-  if (n.includes("netlify")) return "netlify.com"
-  if (n.includes("cloudflare")) return "cloudflare.com"
-  if (n.includes("digitalocean")) return "digitalocean.com"
-  if (n === "aws" || n.includes("amazon web services") || n.includes("amazon")) return "aws.amazon.com"
+  if (n.includes("vercel")) return "vercel.com";
+  if (n.includes("netlify")) return "netlify.com";
+  if (n.includes("cloudflare")) return "cloudflare.com";
+  if (n.includes("digitalocean")) return "digitalocean.com";
+  if (n === "aws" || n.includes("amazon web services") || n.includes("amazon"))
+    return "aws.amazon.com";

  // Email
-  if (n.includes("google workspace") || n.includes("gmail")) return "google.com"
-  if (n.includes("microsoft 365") || n.includes("office")) return "office.com"
-  if (n.includes("fastmail")) return "fastmail.com"
-  if (n.includes("zoho")) return "zoho.com"
-  if (n.includes("proton")) return "proton.me"
+  if (n.includes("google workspace") || n.includes("gmail"))
+    return "google.com";
+  if (n.includes("microsoft 365") || n.includes("office")) return "office.com";
+  if (n.includes("fastmail")) return "fastmail.com";
+  if (n.includes("zoho")) return "zoho.com";
+  if (n.includes("proton")) return "proton.me";

  // Registrars
-  if (n.includes("namecheap")) return "namecheap.com"
-  if (n.includes("godaddy")) return "godaddy.com"
-  if (n.includes("google domains")) return "domains.google"
-  if (n.includes("cloudflare registrar")) return "cloudflare.com"
+  if (n.includes("namecheap")) return "namecheap.com";
+  if (n.includes("godaddy")) return "godaddy.com";
+  if (n.includes("google domains")) return "domains.google";
+  if (n.includes("cloudflare registrar")) return "cloudflare.com";

-  return undefined
+  return undefined;
 }
-
-
--- a/components/domain/section.tsx
+++ b/components/domain/section.tsx
@@ -1,8 +1,22 @@
-import { Info, Loader2 } from "lucide-react"
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
+import { Info, Loader2 } from "lucide-react";
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";

 export function Section({
  title,
@@ -13,13 +27,13 @@ export function Section({
  status,
  children,
 }: {
-  title: string
-  description?: string
-  help?: string
-  icon?: React.ReactNode
-  accent?: "blue" | "purple" | "green" | "orange"
-  status?: "loading" | "ready" | "error"
-  children: React.ReactNode
+  title: string;
+  description?: string;
+  help?: string;
+  icon?: React.ReactNode;
+  accent?: "blue" | "purple" | "green" | "orange";
+  status?: "loading" | "ready" | "error";
+  children: React.ReactNode;
 }) {
  return (
    <AccordionItem value={title} className="border-none">
@@ -29,13 +43,19 @@ export function Section({
          aria-hidden
          className={cn(
            "pointer-events-none absolute -inset-x-8 -top-8 h-24 blur-2xl opacity-30",
-            accent === "blue" && "bg-[radial-gradient(closest-side,oklch(0.82_0.08_230),transparent)]",
-            accent === "purple" && "bg-[radial-gradient(closest-side,oklch(0.78_0.10_310),transparent)]",
-            accent === "green" && "bg-[radial-gradient(closest-side,oklch(0.86_0.09_160),transparent)]",
-            accent === "orange" && "bg-[radial-gradient(closest-side,oklch(0.86_0.12_60),transparent)]",
+            accent === "blue" &&
+              "bg-[radial-gradient(closest-side,oklch(0.82_0.08_230),transparent)]",
+            accent === "purple" &&
+              "bg-[radial-gradient(closest-side,oklch(0.78_0.10_310),transparent)]",
+            accent === "green" &&
+              "bg-[radial-gradient(closest-side,oklch(0.86_0.09_160),transparent)]",
+            accent === "orange" &&
+              "bg-[radial-gradient(closest-side,oklch(0.86_0.12_60),transparent)]",
          )}
        />
-        <AccordionTrigger className={cn("px-5 py-4 hover:no-underline no-underline")}> 
+        <AccordionTrigger
+          className={cn("px-5 py-4 hover:no-underline no-underline")}
+        >
          <div className="flex w-full items-center gap-3 text-left">
            {icon && (
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-foreground/10 text-foreground/80">
@@ -51,8 +71,15 @@ export function Section({
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
-                          <span role="img" aria-label={`More info about ${title}`} className="inline-flex">
-                            <Info className="h-3.5 w-3.5 opacity-60" aria-hidden />
+                          <span
+                            role="img"
+                            aria-label={`More info about ${title}`}
+                            className="inline-flex"
+                          >
+                            <Info
+                              className="h-3.5 w-3.5 opacity-60"
+                              aria-hidden
+                            />
                          </span>
                        </TooltipTrigger>
                        <TooltipContent>{help}</TooltipContent>
@@ -78,11 +105,11 @@ export function Section({
          </div>
        </AccordionTrigger>
        <AccordionContent>
-          <CardContent className="pt-0 px-5 pb-5 space-y-3">{children}</CardContent>
+          <CardContent className="pt-0 px-5 pb-5 space-y-3">
+            {children}
+          </CardContent>
        </AccordionContent>
      </Card>
    </AccordionItem>
-  )
+  );
 }
-
-
--- a/components/domain/skeletons.tsx
+++ b/components/domain/skeletons.tsx
@@ -1,14 +1,15 @@
 export function Skeletons({ count = 3 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-      {Array.from({ length: count }).map((_, i) => (
-        <div
-          key={i}
-          className="h-10 rounded-2xl bg-foreground/5 dark:bg-foreground/10 animate-pulse"
-        />
-      ))}
+      {Array.from({ length: count }).map((_, i) => {
+        const key = `sk-${count}-${i}`;
+        return (
+          <div
+            key={key}
+            className="h-10 rounded-2xl bg-foreground/5 dark:bg-foreground/10 animate-pulse"
+          />
+        );
+      })}
    </div>
-  )
+  );
 }
-
-
--- a/components/mode-toggle.tsx
+++ b/components/mode-toggle.tsx
@@ -1,17 +1,22 @@
-"use client"
+"use client";

-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";

 export function ModeToggle() {
-  const { theme, setTheme, systemTheme } = useTheme()
-  const current = theme === "system" ? systemTheme : theme
-  const isDark = current === "dark"
+  const { theme, setTheme, systemTheme } = useTheme();
+  const current = theme === "system" ? systemTheme : theme;
+  const isDark = current === "dark";

  function toggleTheme() {
-    setTheme(isDark ? "light" : "dark")
+    setTheme(isDark ? "light" : "dark");
  }

  return (
@@ -34,7 +39,5 @@ export function ModeToggle() {
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
-  )
+  );
 }
-
-
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import type * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type * as React from "react";

-type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>
+type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>;

 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return (
@@ -16,7 +16,5 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
    >
      {children}
    </NextThemesProvider>
-  )
+  );
 }
-
-
--- a/components/trpc-provider.tsx
+++ b/components/trpc-provider.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";

-import * as React from "react"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { trpc } from "@/lib/trpc/client"
-import { httpBatchStreamLink, loggerLink } from "@trpc/client"
-import superjson from "superjson"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchStreamLink, loggerLink } from "@trpc/client";
+import * as React from "react";
+import superjson from "superjson";
+import { trpc } from "@/lib/trpc/client";

 export function TRPCProvider({ children }: { children: React.ReactNode }) {
-  const [queryClient] = React.useState(() => new QueryClient())
+  const [queryClient] = React.useState(() => new QueryClient());
  const [trpcClient] = React.useState(() =>
    trpc.createClient({
      links: [
@@ -18,14 +18,12 @@ export function TRPCProvider({ children }: { children: React.ReactNode }) {
        }),
        httpBatchStreamLink({ url: "/api/trpc", transformer: superjson }),
      ],
-    })
-  )
+    }),
+  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
-  )
+  );
 }
-
-
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Accordion({
  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }

 function AccordionItem({
@@ -22,7 +22,7 @@ function AccordionItem({
      className={cn("border-b last:border-b-0", className)}
      {...props}
    />
-  )
+  );
 }

 function AccordionTrigger({
@@ -36,7 +36,7 @@ function AccordionTrigger({
        data-slot="accordion-trigger"
        className={cn(
          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
+          className,
        )}
        {...props}
      >
@@ -44,7 +44,7 @@ function AccordionTrigger({
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
-  )
+  );
 }

 function AccordionContent({
@@ -60,7 +60,7 @@ function AccordionContent({
    >
      <div className={cn("pt-0 pb-4", className)}>{children}</div>
    </AccordionPrimitive.Content>
-  )
+  );
 }

-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -1,15 +1,14 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";

 function AlertDialog({
  ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }

 function AlertDialogTrigger({
@@ -17,7 +16,7 @@ function AlertDialogTrigger({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  );
 }

 function AlertDialogPortal({
@@ -25,7 +24,7 @@ function AlertDialogPortal({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  );
 }

 function AlertDialogOverlay({
@@ -37,11 +36,11 @@ function AlertDialogOverlay({
      data-slot="alert-dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function AlertDialogContent({
@@ -55,12 +54,12 @@ function AlertDialogContent({
        data-slot="alert-dialog-content"
        className={cn(
          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
-  )
+  );
 }

 function AlertDialogHeader({
@@ -73,7 +72,7 @@ function AlertDialogHeader({
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
-  )
+  );
 }

 function AlertDialogFooter({
@@ -85,11 +84,11 @@ function AlertDialogFooter({
      data-slot="alert-dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function AlertDialogTitle({
@@ -102,7 +101,7 @@ function AlertDialogTitle({
      className={cn("text-lg font-semibold", className)}
      {...props}
    />
-  )
+  );
 }

 function AlertDialogDescription({
@@ -115,7 +114,7 @@ function AlertDialogDescription({
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 function AlertDialogAction({
@@ -127,7 +126,7 @@ function AlertDialogAction({
      className={cn(buttonVariants(), className)}
      {...props}
    />
-  )
+  );
 }

 function AlertDialogCancel({
@@ -139,7 +138,7 @@ function AlertDialogCancel({
      className={cn(buttonVariants({ variant: "outline" }), className)}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -154,4 +153,4 @@ export {
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
-}
+};
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -16,8 +16,8 @@ const alertVariants = cva(
    defaultVariants: {
      variant: "default",
    },
-  }
-)
+  },
+);

 function Alert({
  className,
@@ -31,7 +31,7 @@ function Alert({
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
-  )
+  );
 }

 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -40,11 +40,11 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="alert-title"
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function AlertDescription({
@@ -56,11 +56,11 @@ function AlertDescription({
      data-slot="alert-description"
      className={cn(
        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
--- a/components/ui/aspect-ratio.tsx
+++ b/components/ui/aspect-ratio.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";

-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";

 function AspectRatio({
  ...props
 }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
 }

-export { AspectRatio }
+export { AspectRatio };
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Avatar({
  className,
@@ -14,11 +14,11 @@ function Avatar({
      data-slot="avatar"
      className={cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function AvatarImage({
@@ -31,7 +31,7 @@ function AvatarImage({
      className={cn("aspect-square size-full", className)}
      {...props}
    />
-  )
+  );
 }

 function AvatarFallback({
@@ -43,11 +43,11 @@ function AvatarFallback({
      data-slot="avatar-fallback"
      className={cn(
        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
@@ -22,8 +22,8 @@ const badgeVariants = cva(
    defaultVariants: {
      variant: "default",
    },
-  }
-)
+  },
+);

 function Badge({
  className,
@@ -32,7 +32,7 @@ function Badge({
  ...props
 }: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+  const Comp = asChild ? Slot : "span";

  return (
    <Comp
@@ -40,7 +40,7 @@ function Badge({
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
-  )
+  );
 }

-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }

 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@@ -14,11 +14,11 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -28,7 +28,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
-  )
+  );
 }

 function BreadcrumbLink({
@@ -36,9 +36,9 @@ function BreadcrumbLink({
  className,
  ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";

  return (
    <Comp
@@ -46,20 +46,18 @@ function BreadcrumbLink({
      className={cn("hover:text-foreground transition-colors", className)}
      {...props}
    />
-  )
+  );
 }

 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-normal", className)}
      {...props}
    />
-  )
+  );
 }

 function BreadcrumbSeparator({
@@ -77,7 +75,7 @@ function BreadcrumbSeparator({
    >
      {children ?? <ChevronRight />}
    </li>
-  )
+  );
 }

 function BreadcrumbEllipsis({
@@ -95,7 +93,7 @@ function BreadcrumbEllipsis({
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
-  )
+  );
 }

 export {
@@ -106,4 +104,4 @@ export {
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
-}
+};
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -32,8 +32,8 @@ const buttonVariants = cva(
      variant: "default",
      size: "default",
    },
-  }
-)
+  },
+);

 function Button({
  className,
@@ -43,9 +43,9 @@ function Button({
  ...props
 }: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
  }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";

  return (
    <Comp
@@ -53,7 +53,7 @@ function Button({
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
-  )
+  );
 }

-export { Button, buttonVariants }
+export { Button, buttonVariants };
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,15 +1,18 @@
-"use client"
+"use client";

-import * as React from "react"
 import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+} from "lucide-react";
+import * as React from "react";
+import {
+  type DayButton,
+  DayPicker,
+  getDefaultClassNames,
+} from "react-day-picker";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";

 function Calendar({
  className,
@@ -21,9 +24,9 @@ function Calendar({
  components,
  ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();

  return (
    <DayPicker
@@ -32,7 +35,7 @@ function Calendar({
        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+        className,
      )}
      captionLayout={captionLayout}
      formatters={{
@@ -44,82 +47,82 @@ function Calendar({
        root: cn("w-fit", defaultClassNames.root),
        months: cn(
          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
+          defaultClassNames.months,
        ),
        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
        nav: cn(
          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
+          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
        ),
        month_caption: cn(
          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
+          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
+          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          "select-none font-medium",
          captionLayout === "label"
            ? "text-sm"
            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
+          defaultClassNames.caption_label,
        ),
        table: "w-full border-collapse",
        weekdays: cn("flex", defaultClassNames.weekdays),
        weekday: cn(
          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
+          defaultClassNames.weekday,
        ),
        week: cn("flex w-full mt-2", defaultClassNames.week),
        week_number_header: cn(
          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
+          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
+          defaultClassNames.week_number,
        ),
        day: cn(
          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          defaultClassNames.day
+          defaultClassNames.day,
        ),
        range_start: cn(
          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
+          defaultClassNames.range_start,
        ),
        range_middle: cn("rounded-none", defaultClassNames.range_middle),
        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
        today: cn(
          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          defaultClassNames.today,
        ),
        outside: cn(
          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          defaultClassNames.outside,
        ),
        disabled: cn(
          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          defaultClassNames.disabled,
        ),
        hidden: cn("invisible", defaultClassNames.hidden),
        ...classNames,
@@ -133,13 +136,13 @@ function Calendar({
              className={cn(className)}
              {...props}
            />
-          )
+          );
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === "left") {
            return (
              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            );
          }

          if (orientation === "right") {
@@ -148,12 +151,12 @@ function Calendar({
                className={cn("size-4", className)}
                {...props}
              />
-            )
+            );
          }

          return (
            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          );
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
@@ -163,13 +166,13 @@ function Calendar({
                {children}
              </div>
            </td>
-          )
+          );
        },
        ...components,
      }}
      {...props}
    />
-  )
+  );
 }

 function CalendarDayButton({
@@ -178,12 +181,12 @@ function CalendarDayButton({
  modifiers,
  ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();

-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);

  return (
    <Button
@@ -203,11 +206,11 @@ function CalendarDayButton({
      className={cn(
        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
        defaultClassNames.day,
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
@@ -8,11 +8,11 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -21,11 +21,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
-  )
+  );
 }

 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -54,11 +54,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("px-6", className)}
      {...props}
    />
-  )
+  );
 }

 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -89,4 +89,4 @@ export {
  CardAction,
  CardDescription,
  CardContent,
-}
+};
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,45 +1,44 @@
-"use client"
+"use client";

-import * as React from "react"
 import useEmblaCarousel, {
  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";

-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];

 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};

 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;

-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);

 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);

  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
  }

-  return context
+  return context;
 }

 function Carousel({
@@ -56,53 +55,53 @@ function Carousel({
      ...opts,
      axis: orientation === "horizontal" ? "x" : "y",
    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);

  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);

  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
+    api?.scrollPrev();
+  }, [api]);

  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
+    api?.scrollNext();
+  }, [api]);

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
+        event.preventDefault();
+        scrollPrev();
      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
+        event.preventDefault();
+        scrollNext();
      }
    },
-    [scrollPrev, scrollNext]
-  )
+    [scrollPrev, scrollNext],
+  );

  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);

  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);

    return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);

  return (
    <CarouselContext.Provider
@@ -129,11 +128,11 @@ function Carousel({
        {children}
      </div>
    </CarouselContext.Provider>
-  )
+  );
 }

 function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
+  const { carouselRef, orientation } = useCarousel();

  return (
    <div
@@ -145,16 +144,16 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+          className,
        )}
        {...props}
      />
    </div>
-  )
+  );
 }

 function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
+  const { orientation } = useCarousel();

  return (
    <div
@@ -164,11 +163,11 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CarouselPrevious({
@@ -177,7 +176,7 @@ function CarouselPrevious({
  size = "icon",
  ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();

  return (
    <Button
@@ -189,7 +188,7 @@ function CarouselPrevious({
        orientation === "horizontal"
          ? "top-1/2 -left-12 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
@@ -198,7 +197,7 @@ function CarouselPrevious({
      <ArrowLeft />
      <span className="sr-only">Previous slide</span>
    </Button>
-  )
+  );
 }

 function CarouselNext({
@@ -207,7 +206,7 @@ function CarouselNext({
  size = "icon",
  ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel();

  return (
    <Button
@@ -219,7 +218,7 @@ function CarouselNext({
        orientation === "horizontal"
          ? "top-1/2 -right-12 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
@@ -228,7 +227,7 @@ function CarouselNext({
      <ArrowRight />
      <span className="sr-only">Next slide</span>
    </Button>
-  )
+  );
 }

 export {
@@ -238,4 +237,4 @@ export {
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
-}
+};
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -1,37 +1,37 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;

 export type ChartConfig = {
  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};

 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};

-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);

 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);

  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
  }

-  return context
+  return context;
 }

 function ChartContainer({
@@ -41,13 +41,13 @@ function ChartContainer({
  config,
  ...props
 }: React.ComponentProps<"div"> & {
-  config: ChartConfig
+  config: ChartConfig;
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  >["children"];
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;

  return (
    <ChartContext.Provider value={{ config }}>
@@ -56,7 +56,7 @@ function ChartContainer({
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
+          className,
        )}
        {...props}
      >
@@ -66,16 +66,16 @@ function ChartContainer({
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
-  )
+  );
 }

 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
+    ([, config]) => config.theme || config.color,
+  );

  if (!colorConfig.length) {
-    return null
+    return null;
  }

  return (
@@ -89,20 +89,20 @@ ${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
  })
  .join("\n")}
 }
-`
+`,
          )
          .join("\n"),
      }}
    />
-  )
-}
+  );
+};

-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;

 function ChartTooltipContent({
  active,
@@ -120,40 +120,40 @@ function ChartTooltipContent({
  labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
  }) {
-  const { config } = useChart()
+  const { config } = useChart();

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
-      return null
+      return null;
    }

-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+        : itemConfig?.label;

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
-      )
+      );
    }

    if (!value) {
-      return null
+      return null;
    }

-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
  }, [
    label,
    labelFormatter,
@@ -162,34 +162,34 @@ function ChartTooltipContent({
    labelClassName,
    config,
    labelKey,
-  ])
+  ]);

  if (!active || !payload?.length) {
-    return null
+    return null;
  }

-  const nestLabel = payload.length === 1 && indicator !== "dot"
+  const nestLabel = payload.length === 1 && indicator !== "dot";

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
+        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-          const indicatorColor = color || item.payload.fill || item.color
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;

          return (
            <div
              key={item.dataKey}
              className={cn(
                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                indicator === "dot" && "items-center"
+                indicator === "dot" && "items-center",
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
@@ -209,7 +209,7 @@ function ChartTooltipContent({
                            "w-0 border-[1.5px] border-dashed bg-transparent":
                              indicator === "dashed",
                            "my-0.5": nestLabel && indicator === "dashed",
-                          }
+                          },
                        )}
                        style={
                          {
@@ -223,7 +223,7 @@ function ChartTooltipContent({
                  <div
                    className={cn(
                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center"
+                      nestLabel ? "items-end" : "items-center",
                    )}
                  >
                    <div className="grid gap-1.5">
@@ -241,14 +241,14 @@ function ChartTooltipContent({
                </>
              )}
            </div>
-          )
+          );
        })}
      </div>
    </div>
-  )
+  );
 }

-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;

 function ChartLegendContent({
  className,
@@ -258,13 +258,13 @@ function ChartLegendContent({
  nameKey,
 }: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
+    hideIcon?: boolean;
+    nameKey?: string;
  }) {
-  const { config } = useChart()
+  const { config } = useChart();

  if (!payload?.length) {
-    return null
+    return null;
  }

  return (
@@ -272,18 +272,18 @@ function ChartLegendContent({
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
+        className,
      )}
    >
      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);

        return (
          <div
            key={item.value}
            className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
            )}
          >
            {itemConfig?.icon && !hideIcon ? (
@@ -298,20 +298,20 @@ function ChartLegendContent({
            )}
            {itemConfig?.label}
          </div>
-        )
+        );
      })}
    </div>
-  )
+  );
 }

 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
-  key: string
+  key: string,
 ) {
  if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
  }

  const payloadPayload =
@@ -319,15 +319,15 @@ function getPayloadConfigFromPayload(
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
-      : undefined
+      : undefined;

-  let configLabelKey: string = key
+  let configLabelKey: string = key;

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
  } else if (
    payloadPayload &&
    key in payloadPayload &&
@@ -335,12 +335,12 @@ function getPayloadConfigFromPayload(
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
  }

  return configLabelKey in config
    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }

 export {
@@ -350,4 +350,4 @@ export {
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
-}
+};
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Checkbox({
  className,
@@ -15,7 +15,7 @@ function Checkbox({
      data-slot="checkbox"
      className={cn(
        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
      )}
      {...props}
    >
@@ -26,7 +26,7 @@ function Checkbox({
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
-  )
+  );
 }

-export { Checkbox }
+export { Checkbox };
--- a/components/ui/collapsible.tsx
+++ b/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";

-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";

 function Collapsible({
  ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }

 function CollapsibleTrigger({
@@ -16,7 +16,7 @@ function CollapsibleTrigger({
      data-slot="collapsible-trigger"
      {...props}
    />
-  )
+  );
 }

 function CollapsibleContent({
@@ -27,7 +27,7 @@ function CollapsibleContent({
      data-slot="collapsible-content"
      {...props}
    />
-  )
+  );
 }

-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -1,17 +1,16 @@
-"use client"
+"use client";

-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
-} from "@/components/ui/dialog"
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";

 function Command({
  className,
@@ -22,11 +21,11 @@ function Command({
      data-slot="command"
      className={cn(
        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CommandDialog({
@@ -37,10 +36,10 @@ function CommandDialog({
  showCloseButton = true,
  ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
  return (
    <Dialog {...props}>
@@ -57,7 +56,7 @@ function CommandDialog({
        </Command>
      </DialogContent>
    </Dialog>
-  )
+  );
 }

 function CommandInput({
@@ -74,12 +73,12 @@ function CommandInput({
        data-slot="command-input"
        className={cn(
          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
        )}
        {...props}
      />
    </div>
-  )
+  );
 }

 function CommandList({
@@ -91,11 +90,11 @@ function CommandList({
      data-slot="command-list"
      className={cn(
        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CommandEmpty({
@@ -107,7 +106,7 @@ function CommandEmpty({
      className="py-6 text-center text-sm"
      {...props}
    />
-  )
+  );
 }

 function CommandGroup({
@@ -119,11 +118,11 @@ function CommandGroup({
      data-slot="command-group"
      className={cn(
        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CommandSeparator({
@@ -136,7 +135,7 @@ function CommandSeparator({
      className={cn("bg-border -mx-1 h-px", className)}
      {...props}
    />
-  )
+  );
 }

 function CommandItem({
@@ -148,11 +147,11 @@ function CommandItem({
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function CommandShortcut({
@@ -164,11 +163,11 @@ function CommandShortcut({
      data-slot="command-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -181,4 +180,4 @@ export {
  CommandItem,
  CommandShortcut,
  CommandSeparator,
-}
+};
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function ContextMenu({
  ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }

 function ContextMenuTrigger({
@@ -17,7 +17,7 @@ function ContextMenuTrigger({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
  return (
    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
+  );
 }

 function ContextMenuGroup({
@@ -25,7 +25,7 @@ function ContextMenuGroup({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
  return (
    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
+  );
 }

 function ContextMenuPortal({
@@ -33,13 +33,13 @@ function ContextMenuPortal({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
  return (
    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
+  );
 }

 function ContextMenuSub({
  ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
 }

 function ContextMenuRadioGroup({
@@ -50,7 +50,7 @@ function ContextMenuRadioGroup({
      data-slot="context-menu-radio-group"
      {...props}
    />
-  )
+  );
 }

 function ContextMenuSubTrigger({
@@ -59,7 +59,7 @@ function ContextMenuSubTrigger({
  children,
  ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
  return (
    <ContextMenuPrimitive.SubTrigger
@@ -67,14 +67,14 @@ function ContextMenuSubTrigger({
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto" />
    </ContextMenuPrimitive.SubTrigger>
-  )
+  );
 }

 function ContextMenuSubContent({
@@ -86,11 +86,11 @@ function ContextMenuSubContent({
      data-slot="context-menu-sub-content"
      className={cn(
        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function ContextMenuContent({
@@ -103,12 +103,12 @@ function ContextMenuContent({
        data-slot="context-menu-content"
        className={cn(
          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          className,
        )}
        {...props}
      />
    </ContextMenuPrimitive.Portal>
-  )
+  );
 }

 function ContextMenuItem({
@@ -117,8 +117,8 @@ function ContextMenuItem({
  variant = "default",
  ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
  return (
    <ContextMenuPrimitive.Item
@@ -127,11 +127,11 @@ function ContextMenuItem({
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function ContextMenuCheckboxItem({
@@ -145,7 +145,7 @@ function ContextMenuCheckboxItem({
      data-slot="context-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      checked={checked}
      {...props}
@@ -157,7 +157,7 @@ function ContextMenuCheckboxItem({
      </span>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
-  )
+  );
 }

 function ContextMenuRadioItem({
@@ -170,7 +170,7 @@ function ContextMenuRadioItem({
      data-slot="context-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    >
@@ -181,7 +181,7 @@ function ContextMenuRadioItem({
      </span>
      {children}
    </ContextMenuPrimitive.RadioItem>
-  )
+  );
 }

 function ContextMenuLabel({
@@ -189,7 +189,7 @@ function ContextMenuLabel({
  inset,
  ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
  return (
    <ContextMenuPrimitive.Label
@@ -197,11 +197,11 @@ function ContextMenuLabel({
      data-inset={inset}
      className={cn(
        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function ContextMenuSeparator({
@@ -214,7 +214,7 @@ function ContextMenuSeparator({
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
-  )
+  );
 }

 function ContextMenuShortcut({
@@ -226,11 +226,11 @@ function ContextMenuShortcut({
      data-slot="context-menu-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -249,4 +249,4 @@ export {
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
-}
+};
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,33 +1,33 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Dialog({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }

 function DialogTrigger({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }

 function DialogPortal({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }

 function DialogClose({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }

 function DialogOverlay({
@@ -39,11 +39,11 @@ function DialogOverlay({
      data-slot="dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
  showCloseButton = true,
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
  return (
    <DialogPortal data-slot="dialog-portal">
@@ -61,7 +61,7 @@ function DialogContent({
        data-slot="dialog-content"
        className={cn(
          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          className,
        )}
        {...props}
      >
@@ -77,7 +77,7 @@ function DialogContent({
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
-  )
+  );
 }

 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
-  )
+  );
 }

 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -96,11 +96,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DialogTitle({
@@ -113,7 +113,7 @@ function DialogTitle({
      className={cn("text-lg leading-none font-semibold", className)}
      {...props}
    />
-  )
+  );
 }

 function DialogDescription({
@@ -126,7 +126,7 @@ function DialogDescription({
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -140,4 +140,4 @@ export {
  DialogPortal,
  DialogTitle,
  DialogTrigger,
-}
+};
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -1,32 +1,32 @@
-"use client"
+"use client";

-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import type * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Drawer({
  ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }

 function DrawerTrigger({
  ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }

 function DrawerPortal({
  ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }

 function DrawerClose({
  ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }

 function DrawerOverlay({
@@ -38,11 +38,11 @@ function DrawerOverlay({
      data-slot="drawer-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DrawerContent({
@@ -61,7 +61,7 @@ function DrawerContent({
          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
+          className,
        )}
        {...props}
      >
@@ -69,7 +69,7 @@ function DrawerContent({
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
-  )
+  );
 }

 function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,11 +78,11 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="drawer-header"
      className={cn(
        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -92,7 +92,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
-  )
+  );
 }

 function DrawerTitle({
@@ -105,7 +105,7 @@ function DrawerTitle({
      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
-  )
+  );
 }

 function DrawerDescription({
@@ -118,7 +118,7 @@ function DrawerDescription({
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -132,4 +132,4 @@ export {
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
-}
+};
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function DropdownMenu({
  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }

 function DropdownMenuPortal({
@@ -17,7 +17,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }

 function DropdownMenuTrigger({
@@ -28,7 +28,7 @@ function DropdownMenuTrigger({
      data-slot="dropdown-menu-trigger"
      {...props}
    />
-  )
+  );
 }

 function DropdownMenuContent({
@@ -43,12 +43,12 @@ function DropdownMenuContent({
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
-  )
+  );
 }

 function DropdownMenuGroup({
@@ -56,7 +56,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }

 function DropdownMenuItem({
@@ -65,8 +65,8 @@ function DropdownMenuItem({
  variant = "default",
  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
  return (
    <DropdownMenuPrimitive.Item
@@ -75,11 +75,11 @@ function DropdownMenuItem({
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DropdownMenuCheckboxItem({
@@ -93,7 +93,7 @@ function DropdownMenuCheckboxItem({
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      checked={checked}
      {...props}
@@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }

 function DropdownMenuRadioGroup({
@@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
-  )
+  );
 }

 function DropdownMenuRadioItem({
@@ -129,7 +129,7 @@ function DropdownMenuRadioItem({
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    >
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }

 function DropdownMenuLabel({
@@ -148,7 +148,7 @@ function DropdownMenuLabel({
  inset,
  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
  return (
    <DropdownMenuPrimitive.Label
@@ -156,11 +156,11 @@ function DropdownMenuLabel({
      data-inset={inset}
      className={cn(
        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DropdownMenuSeparator({
@@ -173,7 +173,7 @@ function DropdownMenuSeparator({
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
-  )
+  );
 }

 function DropdownMenuShortcut({
@@ -185,17 +185,17 @@ function DropdownMenuShortcut({
      data-slot="dropdown-menu-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function DropdownMenuSub({
  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }

 function DropdownMenuSubTrigger({
@@ -204,7 +204,7 @@ function DropdownMenuSubTrigger({
  children,
  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
  return (
    <DropdownMenuPrimitive.SubTrigger
@@ -212,14 +212,14 @@ function DropdownMenuSubTrigger({
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
+        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }

 function DropdownMenuSubContent({
@@ -231,11 +231,11 @@ function DropdownMenuSubContent({
      data-slot="dropdown-menu-sub-content"
      className={cn(
        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -254,4 +254,4 @@ export {
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
-}
+};
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,33 +1,32 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
-} from "react-hook-form"
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";

-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
+const Form = FormProvider;

 type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};

 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);

 const FormField = <
  TFieldValues extends FieldValues = FieldValues,
@@ -39,21 +38,21 @@ const FormField = <
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
-  )
-}
+  );
+};

 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);

  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
  }

-  const { id } = itemContext
+  const { id } = itemContext;

  return {
    id,
@@ -62,19 +61,19 @@ const useFormField = () => {
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
-  }
-}
+  };
+};

 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};

 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);

 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
+  const id = React.useId();

  return (
    <FormItemContext.Provider value={{ id }}>
@@ -84,14 +83,14 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
        {...props}
      />
    </FormItemContext.Provider>
-  )
+  );
 }

 function FormLabel({
  className,
  ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();

  return (
    <Label
@@ -101,11 +100,12 @@ function FormLabel({
      htmlFor={formItemId}
      {...props}
    />
-  )
+  );
 }

 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();

  return (
    <Slot
@@ -119,11 +119,11 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
      aria-invalid={!!error}
      {...props}
    />
-  )
+  );
 }

 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();

  return (
    <p
@@ -132,15 +132,15 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;

  if (!body) {
-    return null
+    return null;
  }

  return (
@@ -152,7 +152,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
    >
      {body}
    </p>
-  )
+  );
 }

 export {
@@ -164,4 +164,4 @@ export {
  FormDescription,
  FormMessage,
  FormField,
-}
+};
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function HoverCard({
  ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }

 function HoverCardTrigger({
@@ -16,7 +16,7 @@ function HoverCardTrigger({
 }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
+  );
 }

 function HoverCardContent({
@@ -33,12 +33,12 @@ function HoverCardContent({
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
+          className,
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
-  )
+  );
 }

-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -1,29 +1,29 @@
-"use client"
+"use client";

-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function InputOTP({
  className,
  containerClassName,
  ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
+  containerClassName?: string;
 }) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn(
        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
+        containerClassName,
      )}
      className={cn("disabled:cursor-not-allowed", className)}
      {...props}
    />
-  )
+  );
 }

 function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -33,7 +33,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex items-center", className)}
      {...props}
    />
-  )
+  );
 }

 function InputOTPSlot({
@@ -41,10 +41,10 @@ function InputOTPSlot({
  className,
  ...props
 }: React.ComponentProps<"div"> & {
-  index: number
+  index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};

  return (
    <div
@@ -52,7 +52,7 @@ function InputOTPSlot({
      data-active={isActive}
      className={cn(
        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
-        className
+        className,
      )}
      {...props}
    >
@@ -63,7 +63,7 @@ function InputOTPSlot({
        </div>
      )}
    </div>
-  )
+  );
 }

 function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
@@ -71,7 +71,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
    <div data-slot="input-otp-separator" role="separator" {...props}>
      <MinusIcon />
    </div>
-  )
+  );
 }

-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
@@ -11,11 +11,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Input }
+export { Input };
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Label({
  className,
@@ -14,11 +14,11 @@ function Label({
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Label }
+export { Label };
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Menubar({
  className,
@@ -15,29 +15,29 @@ function Menubar({
      data-slot="menubar"
      className={cn(
        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function MenubarMenu({
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
 }

 function MenubarGroup({
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
 }

 function MenubarPortal({
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
 }

 function MenubarRadioGroup({
@@ -45,7 +45,7 @@ function MenubarRadioGroup({
 }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
  return (
    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
+  );
 }

 function MenubarTrigger({
@@ -57,11 +57,11 @@ function MenubarTrigger({
      data-slot="menubar-trigger"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function MenubarContent({
@@ -80,12 +80,12 @@ function MenubarContent({
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
+          className,
        )}
        {...props}
      />
    </MenubarPortal>
-  )
+  );
 }

 function MenubarItem({
@@ -94,8 +94,8 @@ function MenubarItem({
  variant = "default",
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
  return (
    <MenubarPrimitive.Item
@@ -104,11 +104,11 @@ function MenubarItem({
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function MenubarCheckboxItem({
@@ -122,7 +122,7 @@ function MenubarCheckboxItem({
      data-slot="menubar-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      checked={checked}
      {...props}
@@ -134,7 +134,7 @@ function MenubarCheckboxItem({
      </span>
      {children}
    </MenubarPrimitive.CheckboxItem>
-  )
+  );
 }

 function MenubarRadioItem({
@@ -147,7 +147,7 @@ function MenubarRadioItem({
      data-slot="menubar-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    >
@@ -158,7 +158,7 @@ function MenubarRadioItem({
      </span>
      {children}
    </MenubarPrimitive.RadioItem>
-  )
+  );
 }

 function MenubarLabel({
@@ -166,7 +166,7 @@ function MenubarLabel({
  inset,
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
  return (
    <MenubarPrimitive.Label
@@ -174,11 +174,11 @@ function MenubarLabel({
      data-inset={inset}
      className={cn(
        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function MenubarSeparator({
@@ -191,7 +191,7 @@ function MenubarSeparator({
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
-  )
+  );
 }

 function MenubarShortcut({
@@ -203,17 +203,17 @@ function MenubarShortcut({
      data-slot="menubar-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function MenubarSub({
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }

 function MenubarSubTrigger({
@@ -222,7 +222,7 @@ function MenubarSubTrigger({
  children,
  ...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
  return (
    <MenubarPrimitive.SubTrigger
@@ -230,14 +230,14 @@ function MenubarSubTrigger({
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className
+        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto h-4 w-4" />
    </MenubarPrimitive.SubTrigger>
-  )
+  );
 }

 function MenubarSubContent({
@@ -249,11 +249,11 @@ function MenubarSubContent({
      data-slot="menubar-sub-content"
      className={cn(
        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -273,4 +273,4 @@ export {
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
-}
+};
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function NavigationMenu({
  className,
@@ -11,7 +11,7 @@ function NavigationMenu({
  viewport = true,
  ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
+  viewport?: boolean;
 }) {
  return (
    <NavigationMenuPrimitive.Root
@@ -19,14 +19,14 @@ function NavigationMenu({
      data-viewport={viewport}
      className={cn(
        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
+        className,
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
-  )
+  );
 }

 function NavigationMenuList({
@@ -38,11 +38,11 @@ function NavigationMenuList({
      data-slot="navigation-menu-list"
      className={cn(
        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function NavigationMenuItem({
@@ -55,12 +55,12 @@ function NavigationMenuItem({
      className={cn("relative", className)}
      {...props}
    />
-  )
+  );
 }

 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);

 function NavigationMenuTrigger({
  className,
@@ -79,7 +79,7 @@ function NavigationMenuTrigger({
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
-  )
+  );
 }

 function NavigationMenuContent({
@@ -92,11 +92,11 @@ function NavigationMenuContent({
      className={cn(
        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function NavigationMenuViewport({
@@ -106,19 +106,19 @@ function NavigationMenuViewport({
  return (
    <div
      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
+        "absolute top-full left-0 isolate z-50 flex justify-center",
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
+          className,
        )}
        {...props}
      />
    </div>
-  )
+  );
 }

 function NavigationMenuLink({
@@ -130,11 +130,11 @@ function NavigationMenuLink({
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function NavigationMenuIndicator({
@@ -146,13 +146,13 @@ function NavigationMenuIndicator({
      data-slot="navigation-menu-indicator"
      className={cn(
        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
+        className,
      )}
      {...props}
    >
      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
-  )
+  );
 }

 export {
@@ -165,4 +165,4 @@ export {
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
-}
+};
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,23 +1,21 @@
-import * as React from "react"
 import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+} from "lucide-react";
+import type * as React from "react";
+import { type Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";

 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
-      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
-  )
+  );
 }

 function PaginationContent({
@@ -30,17 +28,17 @@ function PaginationContent({
      className={cn("flex flex-row items-center gap-1", className)}
      {...props}
    />
-  )
+  );
 }

 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
+  return <li data-slot="pagination-item" {...props} />;
 }

 type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;

 function PaginationLink({
  className,
@@ -58,11 +56,11 @@ function PaginationLink({
          variant: isActive ? "outline" : "ghost",
          size,
        }),
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function PaginationPrevious({
@@ -79,7 +77,7 @@ function PaginationPrevious({
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
-  )
+  );
 }

 function PaginationNext({
@@ -96,7 +94,7 @@ function PaginationNext({
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
-  )
+  );
 }

 function PaginationEllipsis({
@@ -113,7 +111,7 @@ function PaginationEllipsis({
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
-  )
+  );
 }

 export {
@@ -124,4 +122,4 @@ export {
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
-}
+};
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,20 +1,20 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Popover({
  ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }

 function PopoverTrigger({
  ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }

 function PopoverContent({
@@ -31,18 +31,18 @@ function PopoverContent({
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
+          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
-  )
+  );
 }

 function PopoverAnchor({
  ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }

-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Progress({
  className,
@@ -15,7 +15,7 @@ function Progress({
      data-slot="progress"
      className={cn(
        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
+        className,
      )}
      {...props}
    >
@@ -25,7 +25,7 @@ function Progress({
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
-  )
+  );
 }

-export { Progress }
+export { Progress };
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function RadioGroup({
  className,
@@ -16,7 +16,7 @@ function RadioGroup({
      className={cn("grid gap-3", className)}
      {...props}
    />
-  )
+  );
 }

 function RadioGroupItem({
@@ -28,7 +28,7 @@ function RadioGroupItem({
      data-slot="radio-group-item"
      className={cn(
        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
      )}
      {...props}
    >
@@ -39,7 +39,7 @@ function RadioGroupItem({
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
-  )
+  );
 }

-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVerticalIcon } from "lucide-react";
+import type * as React from "react";
+import * as ResizablePrimitive from "react-resizable-panels";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function ResizablePanelGroup({
  className,
@@ -15,17 +15,17 @@ function ResizablePanelGroup({
      data-slot="resizable-panel-group"
      className={cn(
        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function ResizablePanel({
  ...props
 }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }

 function ResizableHandle({
@@ -33,14 +33,14 @@ function ResizableHandle({
  className,
  ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
  return (
    <ResizablePrimitive.PanelResizeHandle
      data-slot="resizable-handle"
      className={cn(
        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
+        className,
      )}
      {...props}
    >
@@ -50,7 +50,7 @@ function ResizableHandle({
        </div>
      )}
    </ResizablePrimitive.PanelResizeHandle>
-  )
+  );
 }

-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function ScrollArea({
  className,
@@ -25,7 +25,7 @@ function ScrollArea({
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
-  )
+  );
 }

 function ScrollBar({
@@ -43,7 +43,7 @@ function ScrollBar({
          "h-full w-2.5 border-l border-l-transparent",
        orientation === "horizontal" &&
          "h-2.5 flex-col border-t border-t-transparent",
-        className
+        className,
      )}
      {...props}
    >
@@ -52,7 +52,7 @@ function ScrollBar({
        className="bg-border relative flex-1 rounded-full"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+  );
 }

-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Select({
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }

 function SelectGroup({
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }

 function SelectValue({
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }

 function SelectTrigger({
@@ -30,7 +30,7 @@ function SelectTrigger({
  children,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: "sm" | "default";
 }) {
  return (
    <SelectPrimitive.Trigger
@@ -38,7 +38,7 @@ function SelectTrigger({
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    >
@@ -47,7 +47,7 @@ function SelectTrigger({
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
-  )
+  );
 }

 function SelectContent({
@@ -64,7 +64,7 @@ function SelectContent({
          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
        )}
        position={position}
        {...props}
@@ -74,7 +74,7 @@ function SelectContent({
          className={cn(
            "p-1",
            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
          )}
        >
          {children}
@@ -82,7 +82,7 @@ function SelectContent({
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
-  )
+  );
 }

 function SelectLabel({
@@ -95,7 +95,7 @@ function SelectLabel({
      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
      {...props}
    />
-  )
+  );
 }

 function SelectItem({
@@ -108,7 +108,7 @@ function SelectItem({
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
      )}
      {...props}
    >
@@ -119,7 +119,7 @@ function SelectItem({
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
-  )
+  );
 }

 function SelectSeparator({
@@ -132,7 +132,7 @@ function SelectSeparator({
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
-  )
+  );
 }

 function SelectScrollUpButton({
@@ -144,13 +144,13 @@ function SelectScrollUpButton({
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
-        className
+        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }

 function SelectScrollDownButton({
@@ -162,13 +162,13 @@ function SelectScrollDownButton({
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
-        className
+        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }

 export {
@@ -182,4 +182,4 @@ export {
  SelectSeparator,
  SelectTrigger,
  SelectValue,
-}
+};
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Separator({
  className,
@@ -18,11 +18,11 @@ function Separator({
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Separator }
+export { Separator };
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,31 +1,31 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }

 function SheetTrigger({
  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }

 function SheetClose({
  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }

 function SheetPortal({
  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }

 function SheetOverlay({
@@ -37,11 +37,11 @@ function SheetOverlay({
      data-slot="sheet-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SheetContent({
@@ -50,7 +50,7 @@ function SheetContent({
  side = "right",
  ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+  side?: "top" | "right" | "bottom" | "left";
 }) {
  return (
    <SheetPortal>
@@ -67,7 +67,7 @@ function SheetContent({
            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
          side === "bottom" &&
            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
+          className,
        )}
        {...props}
      >
@@ -78,7 +78,7 @@ function SheetContent({
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
-  )
+  );
 }

 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -88,7 +88,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props}
    />
-  )
+  );
 }

 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,7 +98,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
-  )
+  );
 }

 function SheetTitle({
@@ -111,7 +111,7 @@ function SheetTitle({
      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
-  )
+  );
 }

 function SheetDescription({
@@ -124,7 +124,7 @@ function SheetDescription({
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -136,4 +136,4 @@ export {
  SheetFooter,
  SheetTitle,
  SheetDescription,
-}
+};
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -1,56 +1,55 @@
-"use client"
+"use client";

-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";

-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";

 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};

-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);

 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error("useSidebar must be used within a SidebarProvider.");
  }

-  return context
+  return context;
 }

 function SidebarProvider({
@@ -62,36 +61,36 @@ function SidebarProvider({
  children,
  ...props
 }: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);

  // This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
+      const openState = typeof value === "function" ? value(open) : value;
      if (setOpenProp) {
-        setOpenProp(openState)
+        setOpenProp(openState);
      } else {
-        _setOpen(openState)
+        _setOpen(openState);
      }

      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
    },
-    [setOpenProp, open]
-  )
+    [setOpenProp, open],
+  );

  // Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen]);

  // Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
@@ -100,18 +99,18 @@ function SidebarProvider({
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
-        event.preventDefault()
-        toggleSidebar()
+        event.preventDefault();
+        toggleSidebar();
      }
-    }
+    };

-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);

  // We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
+  const state = open ? "expanded" : "collapsed";

  const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
@@ -123,8 +122,8 @@ function SidebarProvider({
      setOpenMobile,
      toggleSidebar,
    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+  );

  return (
    <SidebarContext.Provider value={contextValue}>
@@ -140,7 +139,7 @@ function SidebarProvider({
          }
          className={cn(
            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className
+            className,
          )}
          {...props}
        >
@@ -148,7 +147,7 @@ function SidebarProvider({
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
-  )
+  );
 }

 function Sidebar({
@@ -159,11 +158,11 @@ function Sidebar({
  children,
  ...props
 }: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

  if (collapsible === "none") {
    return (
@@ -171,13 +170,13 @@ function Sidebar({
        data-slot="sidebar"
        className={cn(
          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
+          className,
        )}
        {...props}
      >
        {children}
      </div>
-    )
+    );
  }

  if (isMobile) {
@@ -202,7 +201,7 @@ function Sidebar({
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
-    )
+    );
  }

  return (
@@ -223,7 +222,7 @@ function Sidebar({
          "group-data-[side=right]:rotate-180",
          variant === "floating" || variant === "inset"
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
        )}
      />
      <div
@@ -237,7 +236,7 @@ function Sidebar({
          variant === "floating" || variant === "inset"
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
+          className,
        )}
        {...props}
      >
@@ -250,7 +249,7 @@ function Sidebar({
        </div>
      </div>
    </div>
-  )
+  );
 }

 function SidebarTrigger({
@@ -258,7 +257,7 @@ function SidebarTrigger({
  onClick,
  ...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();

  return (
    <Button
@@ -268,19 +267,19 @@ function SidebarTrigger({
      size="icon"
      className={cn("size-7", className)}
      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
+        onClick?.(event);
+        toggleSidebar();
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
-  )
+  );
 }

 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();

  return (
    <button
@@ -297,11 +296,11 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
@@ -311,11 +310,11 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
      className={cn(
        "bg-background relative flex w-full flex-1 flex-col",
        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarInput({
@@ -329,7 +328,7 @@ function SidebarInput({
      className={cn("bg-background h-8 w-full shadow-none", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -340,7 +339,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -351,7 +350,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarSeparator({
@@ -365,7 +364,7 @@ function SidebarSeparator({
      className={cn("bg-sidebar-border mx-2 w-auto", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -375,11 +374,11 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -390,7 +389,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarGroupLabel({
@@ -398,7 +397,7 @@ function SidebarGroupLabel({
  asChild = false,
  ...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : "div";

  return (
    <Comp
@@ -407,11 +406,11 @@ function SidebarGroupLabel({
      className={cn(
        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarGroupAction({
@@ -419,7 +418,7 @@ function SidebarGroupAction({
  asChild = false,
  ...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";

  return (
    <Comp
@@ -430,11 +429,11 @@ function SidebarGroupAction({
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "group-data-[collapsible=icon]:hidden",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarGroupContent({
@@ -448,7 +447,7 @@ function SidebarGroupContent({
      className={cn("w-full text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
@@ -459,7 +458,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -470,7 +469,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
      className={cn("group/menu-item relative", className)}
      {...props}
    />
-  )
+  );
 }

 const sidebarMenuButtonVariants = cva(
@@ -492,8 +491,8 @@ const sidebarMenuButtonVariants = cva(
      variant: "default",
      size: "default",
    },
-  }
-)
+  },
+);

 function SidebarMenuButton({
  asChild = false,
@@ -504,12 +503,12 @@ function SidebarMenuButton({
  className,
  ...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
-  const { isMobile, state } = useSidebar()
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();

  const button = (
    <Comp
@@ -520,16 +519,16 @@ function SidebarMenuButton({
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
-  )
+  );

  if (!tooltip) {
-    return button
+    return button;
  }

  if (typeof tooltip === "string") {
    tooltip = {
      children: tooltip,
-    }
+    };
  }

  return (
@@ -542,7 +541,7 @@ function SidebarMenuButton({
        {...tooltip}
      />
    </Tooltip>
-  )
+  );
 }

 function SidebarMenuAction({
@@ -551,10 +550,10 @@ function SidebarMenuAction({
  showOnHover = false,
  ...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
+  asChild?: boolean;
+  showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";

  return (
    <Comp
@@ -570,11 +569,11 @@ function SidebarMenuAction({
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarMenuBadge({
@@ -592,11 +591,11 @@ function SidebarMenuBadge({
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarMenuSkeleton({
@@ -604,12 +603,12 @@ function SidebarMenuSkeleton({
  showIcon = false,
  ...props
 }: React.ComponentProps<"div"> & {
-  showIcon?: boolean
+  showIcon?: boolean;
 }) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);

  return (
    <div
@@ -634,7 +633,7 @@ function SidebarMenuSkeleton({
        }
      />
    </div>
-  )
+  );
 }

 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
@@ -645,11 +644,11 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
      className={cn(
        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
        "group-data-[collapsible=icon]:hidden",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function SidebarMenuSubItem({
@@ -663,7 +662,7 @@ function SidebarMenuSubItem({
      className={cn("group/menu-sub-item relative", className)}
      {...props}
    />
-  )
+  );
 }

 function SidebarMenuSubButton({
@@ -673,11 +672,11 @@ function SidebarMenuSubButton({
  className,
  ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";

  return (
    <Comp
@@ -691,11 +690,11 @@ function SidebarMenuSubButton({
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -723,4 +722,4 @@ export {
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
-}
+};
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
@@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("bg-accent animate-pulse rounded-md", className)}
      {...props}
    />
-  )
+  );
 }

-export { Skeleton }
+export { Skeleton };
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Slider({
  className,
@@ -20,8 +20,8 @@ function Slider({
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
-    [value, defaultValue, min, max]
-  )
+    [value, defaultValue, min, max],
+  );

  return (
    <SliderPrimitive.Root
@@ -32,20 +32,20 @@ function Slider({
      max={max}
      className={cn(
        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className
+        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
        )}
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
          )}
        />
      </SliderPrimitive.Track>
@@ -57,7 +57,7 @@ function Slider({
        />
      ))}
    </SliderPrimitive.Root>
-  )
+  );
 }

-export { Slider }
+export { Slider };
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import { useTheme } from "next-themes"
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";

 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = "system" } = useTheme();

  return (
    <Sonner
@@ -19,7 +19,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
      }
      {...props}
    />
-  )
-}
+  );
+};

-export { Toaster }
+export { Toaster };
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Switch({
  className,
@@ -14,18 +14,18 @@ function Switch({
      data-slot="switch"
      className={cn(
        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
        )}
      />
    </SwitchPrimitive.Root>
-  )
+  );
 }

-export { Switch }
+export { Switch };
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";

-import * as React from "react"
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
@@ -16,7 +16,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
        {...props}
      />
    </div>
-  )
+  );
 }

 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
@@ -26,7 +26,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
      className={cn("[&_tr]:border-b", className)}
      {...props}
    />
-  )
+  );
 }

 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
@@ -36,7 +36,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
-  )
+  );
 }

 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
@@ -45,11 +45,11 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
      data-slot="table-footer"
      className={cn(
        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
@@ -58,11 +58,11 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
      data-slot="table-row"
      className={cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
@@ -71,11 +71,11 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
      data-slot="table-head"
      className={cn(
        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
@@ -84,11 +84,11 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function TableCaption({
@@ -101,7 +101,7 @@ function TableCaption({
      className={cn("text-muted-foreground mt-4 text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 export {
@@ -113,4 +113,4 @@ export {
  TableRow,
  TableCell,
  TableCaption,
-}
+};
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Tabs({
  className,
@@ -15,7 +15,7 @@ function Tabs({
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
-  )
+  );
 }

 function TabsList({
@@ -27,11 +27,11 @@ function TabsList({
      data-slot="tabs-list"
      className={cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function TabsTrigger({
@@ -43,11 +43,11 @@ function TabsTrigger({
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function TabsContent({
@@ -60,7 +60,7 @@ function TabsContent({
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
-  )
+  );
 }

-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
@@ -8,11 +8,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
      data-slot="textarea"
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-export { Textarea }
+export { Textarea };
--- a/components/ui/toggle-group.tsx
+++ b/components/ui/toggle-group.tsx
@@ -1,18 +1,17 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";

 const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
 >({
  size: "default",
  variant: "default",
-})
+});

 function ToggleGroup({
  className,
@@ -29,7 +28,7 @@ function ToggleGroup({
      data-size={size}
      className={cn(
        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
+        className,
      )}
      {...props}
    >
@@ -37,7 +36,7 @@ function ToggleGroup({
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
-  )
+  );
 }

 function ToggleGroupItem({
@@ -48,7 +47,7 @@ function ToggleGroupItem({
  ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.useContext(ToggleGroupContext);

  return (
    <ToggleGroupPrimitive.Item
@@ -61,13 +60,13 @@ function ToggleGroupItem({
          size: context.size || size,
        }),
        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
+        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
-  )
+  );
 }

-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
@@ -25,8 +25,8 @@ const toggleVariants = cva(
      variant: "default",
      size: "default",
    },
-  }
-)
+  },
+);

 function Toggle({
  className,
@@ -41,7 +41,7 @@ function Toggle({
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
-  )
+  );
 }

-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function TooltipProvider({
  delayDuration = 0,
@@ -15,7 +15,7 @@ function TooltipProvider({
      delayDuration={delayDuration}
      {...props}
    />
-  )
+  );
 }

 function Tooltip({
@@ -25,13 +25,13 @@ function Tooltip({
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
-  )
+  );
 }

 function TooltipTrigger({
  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }

 function TooltipContent({
@@ -47,7 +47,7 @@ function TooltipContent({
        sideOffset={sideOffset}
        className={cn(
          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          className,
        )}
        {...props}
      >
@@ -55,7 +55,7 @@ function TooltipContent({
        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
-  )
+  );
 }

-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/hooks/use-mobile.ts
+++ b/hooks/use-mobile.ts
@@ -1,19 +1,21 @@
-import * as React from "react"
+import * as React from "react";

-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;

 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );

  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);

-  return !!isMobile
+  return !!isMobile;
 }
--- a/lib/trpc/client.ts
+++ b/lib/trpc/client.ts
@@ -1,8 +1,6 @@
-"use client"
-
-import { createTRPCReact } from "@trpc/react-query"
-import type { AppRouter } from "@/server/routers/_app"
-
-export const trpc = createTRPCReact<AppRouter>()
+"use client";

+import { createTRPCReact } from "@trpc/react-query";
+import type { AppRouter } from "@/server/routers/_app";

+export const trpc = createTRPCReact<AppRouter>();
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";

 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "whoozle",
-  "version": "0.1.0",
+  "name": "hoot.sh",
+  "version": "0.0.0-beta.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
@@ -10,11 +10,6 @@
    "format": "biome format --write"
  },
  "dependencies": {
-    "@tanstack/react-query": "^5.87.4",
-    "@trpc/client": "^11.5.1",
-    "@trpc/react-query": "^11.5.1",
-    "@trpc/server": "^11.5.1",
-    "superjson": "^2.2.2",
    "@hookform/resolvers": "^5.2.1",
    "@radix-ui/react-accordion": "^1.2.12",
    "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -42,6 +37,10 @@
    "@radix-ui/react-toggle": "^1.1.10",
    "@radix-ui/react-toggle-group": "^1.1.11",
    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.87.4",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
@@ -58,18 +57,19 @@
    "react-resizable-panels": "^3.0.6",
    "recharts": "^2.15.4",
    "sonner": "^2.0.7",
+    "superjson": "^2.2.2",
    "tailwind-merge": "^3.3.1",
    "vaul": "^1.1.2",
    "zod": "^4.1.8"
  },
  "devDependencies": {
    "@biomejs/biome": "2.2.4",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "tailwindcss": "^4",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^24.3.3",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "tailwindcss": "^4.1.13",
    "tw-animate-css": "^1.3.8",
-    "typescript": "^5"
+    "typescript": "5.9.2"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,25 +166,25 @@ importers:
        specifier: 2.2.4
        version: 2.2.4
      '@tailwindcss/postcss':
-        specifier: ^4
+        specifier: ^4.1.13
        version: 4.1.13
      '@types/node':
-        specifier: ^24
+        specifier: ^24.3.3
        version: 24.3.3
      '@types/react':
-        specifier: ^19
+        specifier: ^19.1.13
        version: 19.1.13
      '@types/react-dom':
-        specifier: ^19
+        specifier: ^19.1.9
        version: 19.1.9(@types/react@19.1.13)
      tailwindcss:
-        specifier: ^4
+        specifier: ^4.1.13
        version: 4.1.13
      tw-animate-css:
        specifier: ^1.3.8
        version: 1.3.8
      typescript:
-        specifier: ^5
+        specifier: 5.9.2
        version: 5.9.2

 packages:
--- a/server/routers/_app.ts
+++ b/server/routers/_app.ts
@@ -1,10 +1,8 @@
-import { router } from "../trpc"
-import { domainRouter } from "./domain"
+import { router } from "../trpc";
+import { domainRouter } from "./domain";

 export const appRouter = router({
  domain: domainRouter,
-})
-
-export type AppRouter = typeof appRouter
-
+});

+export type AppRouter = typeof appRouter;
--- a/server/routers/domain.ts
+++ b/server/routers/domain.ts
@@ -1,50 +1,64 @@
-import { z } from "zod"
-import { publicProcedure, router } from "../trpc"
-import { TRPCError } from "@trpc/server"
-import { resolveAll } from "../services/dns"
-import { probeHeaders } from "../services/headers"
-import { fetchWhois } from "../services/rdap"
-import { detectHosting } from "../services/hosting"
-import { getCertificates } from "../services/tls"
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import { resolveAll } from "../services/dns";
+import { probeHeaders } from "../services/headers";
+import { detectHosting } from "../services/hosting";
+import { fetchWhois } from "../services/rdap";
+import { getCertificates } from "../services/tls";
+import { publicProcedure, router } from "../trpc";

-const domainInput = z.object({ domain: z.string().min(1) })
+const domainInput = z.object({ domain: z.string().min(1) });

 export const domainRouter = router({
  whois: publicProcedure.input(domainInput).query(async ({ input }) => {
    try {
-      return await fetchWhois(input.domain)
-    } catch (err) {
-      throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "WHOIS lookup failed" })
+      return await fetchWhois(input.domain);
+    } catch (_err) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "WHOIS lookup failed",
+      });
    }
  }),
  dns: publicProcedure.input(domainInput).query(async ({ input }) => {
    try {
-      return await resolveAll(input.domain)
-    } catch (err) {
-      throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "DNS resolution failed" })
+      return await resolveAll(input.domain);
+    } catch (_err) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "DNS resolution failed",
+      });
    }
  }),
  hosting: publicProcedure.input(domainInput).query(async ({ input }) => {
    try {
-      return await detectHosting(input.domain)
-    } catch (err) {
-      throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Hosting detection failed" })
+      return await detectHosting(input.domain);
+    } catch (_err) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Hosting detection failed",
+      });
    }
  }),
  certificates: publicProcedure.input(domainInput).query(async ({ input }) => {
    try {
-      return await getCertificates(input.domain)
-    } catch (err) {
-      throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Certificate fetch failed" })
+      return await getCertificates(input.domain);
+    } catch (_err) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Certificate fetch failed",
+      });
    }
  }),
  headers: publicProcedure.input(domainInput).query(async ({ input }) => {
    try {
-      const res = await probeHeaders(input.domain)
-      return res.headers
-    } catch (err) {
-      throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Header probe failed" })
+      const res = await probeHeaders(input.domain);
+      return res.headers;
+    } catch (_err) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Header probe failed",
+      });
    }
  }),
-})
-
+});
--- a/server/services/cache.ts
+++ b/server/services/cache.ts
@@ -1,31 +1,32 @@
 export class TTLCache<Key, Value> {
-  private store = new Map<string, { value: Value; expiresAt: number }>()
+  private store = new Map<string, { value: Value; expiresAt: number }>();

-  constructor(private ttlMs: number, private serializeKey: (k: Key) => string) {}
+  constructor(
+    private ttlMs: number,
+    private serializeKey: (k: Key) => string,
+  ) {}

  get(key: Key): Value | undefined {
-    const sk = this.serializeKey(key)
-    const entry = this.store.get(sk)
-    if (!entry) return undefined
+    const sk = this.serializeKey(key);
+    const entry = this.store.get(sk);
+    if (!entry) return undefined;
    if (Date.now() > entry.expiresAt) {
-      this.store.delete(sk)
-      return undefined
+      this.store.delete(sk);
+      return undefined;
    }
-    return entry.value
+    return entry.value;
  }

  set(key: Key, value: Value) {
-    const sk = this.serializeKey(key)
-    this.store.set(sk, { value, expiresAt: Date.now() + this.ttlMs })
+    const sk = this.serializeKey(key);
+    this.store.set(sk, { value, expiresAt: Date.now() + this.ttlMs });
  }

  async getOrSet(key: Key, loader: () => Promise<Value>): Promise<Value> {
-    const cached = this.get(key)
-    if (cached !== undefined) return cached
-    const value = await loader()
-    this.set(key, value)
-    return value
+    const cached = this.get(key);
+    if (cached !== undefined) return cached;
+    const value = await loader();
+    this.set(key, value);
+    return value;
  }
 }
-
-
--- a/server/services/dns.ts
+++ b/server/services/dns.ts
@@ -1,90 +1,103 @@
-import { TTLCache } from "./cache"
+import { TTLCache } from "./cache";

 export type DnsRecord = {
-  type: "A" | "AAAA" | "MX" | "CNAME" | "TXT" | "NS"
-  name: string
-  value: string
-  ttl?: number
-  priority?: number
-}
+  type: "A" | "AAAA" | "MX" | "CNAME" | "TXT" | "NS";
+  name: string;
+  value: string;
+  ttl?: number;
+  priority?: number;
+};

-type DnsType = DnsRecord["type"]
-const TYPES: DnsType[] = ["A", "AAAA", "MX", "CNAME", "TXT", "NS"]
+type DnsType = DnsRecord["type"];
+const TYPES: DnsType[] = ["A", "AAAA", "MX", "CNAME", "TXT", "NS"];

 const cache = new TTLCache<{ domain: string; type: DnsType }, DnsRecord[]>(
  5 * 60 * 1000,
-  (k) => `${k.domain}:${k.type}`
-)
+  (k) => `${k.domain}:${k.type}`,
+);

 export async function resolveAll(domain: string): Promise<DnsRecord[]> {
-  const results: DnsRecord[] = []
+  const results: DnsRecord[] = [];
  for (const type of TYPES) {
-    const cached = cache.get({ domain, type })
+    const cached = cache.get({ domain, type });
    if (cached) {
-      results.push(...cached)
-      continue
+      results.push(...cached);
+      continue;
    }
-    const recs = await resolveType(domain, type).catch(() => [] as DnsRecord[])
-    cache.set({ domain, type }, recs)
-    results.push(...recs)
+    const recs = await resolveType(domain, type).catch(() => [] as DnsRecord[]);
+    cache.set({ domain, type }, recs);
+    results.push(...recs);
  }
-  return results
+  return results;
 }

-async function resolveType(domain: string, type: DnsType): Promise<DnsRecord[]> {
-  const q = new URL("https://cloudflare-dns.com/dns-query")
-  q.searchParams.set("name", domain)
-  q.searchParams.set("type", type)
+async function resolveType(
+  domain: string,
+  type: DnsType,
+): Promise<DnsRecord[]> {
+  const q = new URL("https://cloudflare-dns.com/dns-query");
+  q.searchParams.set("name", domain);
+  q.searchParams.set("type", type);
  const res = await fetch(q, {
    headers: {
      accept: "application/dns-json",
-      "user-agent": "whoozle/0.1",
+      "user-agent": "hoot.sh/0.1",
    },
-  })
-  if (!res.ok) throw new Error(`DoH failed: ${res.status}`)
-  const json = (await res.json()) as CloudflareDnsJson
-  const ans = json.Answer ?? []
-  return ans.map((a) => normalizeAnswer(domain, type, a)).filter(Boolean) as DnsRecord[]
+  });
+  if (!res.ok) throw new Error(`DoH failed: ${res.status}`);
+  const json = (await res.json()) as CloudflareDnsJson;
+  const ans = json.Answer ?? [];
+  return ans
+    .map((a) => normalizeAnswer(domain, type, a))
+    .filter(Boolean) as DnsRecord[];
 }

-function normalizeAnswer(domain: string, type: DnsType, a: CloudflareAnswer): DnsRecord | undefined {
-  const name = trimDot(a.name)
-  const ttl = a.TTL
+function normalizeAnswer(
+  _domain: string,
+  type: DnsType,
+  a: CloudflareAnswer,
+): DnsRecord | undefined {
+  const name = trimDot(a.name);
+  const ttl = a.TTL;
  switch (type) {
    case "A":
    case "AAAA":
    case "NS":
-      return { type, name, value: trimDot(a.data), ttl }
+      return { type, name, value: trimDot(a.data), ttl };
    case "TXT":
-      return { type, name, value: stripTxtQuotes(a.data), ttl }
+      return { type, name, value: stripTxtQuotes(a.data), ttl };
    case "CNAME":
-      return { type, name, value: trimDot(a.data), ttl }
+      return { type, name, value: trimDot(a.data), ttl };
    case "MX": {
-      const [prioStr, ...hostParts] = a.data.split(" ")
-      const priority = Number(prioStr)
-      const host = trimDot(hostParts.join(" "))
-      return { type, name, value: host, ttl, priority: Number.isFinite(priority) ? priority : undefined }
+      const [prioStr, ...hostParts] = a.data.split(" ");
+      const priority = Number(prioStr);
+      const host = trimDot(hostParts.join(" "));
+      return {
+        type,
+        name,
+        value: host,
+        ttl,
+        priority: Number.isFinite(priority) ? priority : undefined,
+      };
    }
  }
 }

 function trimDot(s: string) {
-  return s.endsWith(".") ? s.slice(0, -1) : s
+  return s.endsWith(".") ? s.slice(0, -1) : s;
 }
 function stripTxtQuotes(s: string) {
  // Cloudflare may return quoted strings; remove leading/trailing quotes
-  return s.replace(/^"|"$/g, "")
+  return s.replace(/^"|"$/g, "");
 }

 type CloudflareDnsJson = {
-  Status: number
-  Answer?: CloudflareAnswer[]
-}
+  Status: number;
+  Answer?: CloudflareAnswer[];
+};
 type CloudflareAnswer = {
-  name: string
-  type: number
-  TTL: number
-  data: string
-}
-
-
+  name: string;
+  type: number;
+  TTL: number;
+  data: string;
+};
--- a/server/services/headers.ts
+++ b/server/services/headers.ts
@@ -1,32 +1,53 @@
-import { TTLCache } from "./cache"
+import { TTLCache } from "./cache";

-export type HttpHeader = { name: string; value: string }
+export type HttpHeader = { name: string; value: string };

-const cache = new TTLCache<string, { url: string; status: number; headers: HttpHeader[] }>(
-  10 * 60 * 1000,
-  (k) => k
-)
+const cache = new TTLCache<
+  string,
+  { url: string; status: number; headers: HttpHeader[] }
+>(10 * 60 * 1000, (k) => k);

 export async function probeHeaders(domain: string) {
-  const key = domain.toLowerCase()
-  const cached = cache.get(key)
-  if (cached) return cached
+  const key = domain.toLowerCase();
+  const cached = cache.get(key);
+  if (cached) return cached;

-  const url = `https://${domain}/`
-  const res = await fetch(url, { method: "HEAD", redirect: "follow" as RequestRedirect })
+  const url = `https://${domain}/`;
+  const res = await fetch(url, {
+    method: "HEAD",
+    redirect: "follow" as RequestRedirect,
+  });
  // Some origins disallow HEAD, fall back to GET
-  const final = res.ok ? res : await fetch(url, { method: "GET", redirect: "follow" as RequestRedirect })
-  const headers: HttpHeader[] = []
-  final.headers.forEach((value, name) => headers.push({ name, value }))
-  const out = { url: final.url, status: final.status, headers: normalize(headers) }
-  cache.set(key, out)
-  return out
+  const final = res.ok
+    ? res
+    : await fetch(url, {
+        method: "GET",
+        redirect: "follow" as RequestRedirect,
+      });
+  const headers: HttpHeader[] = [];
+  final.headers.forEach((value, name) => headers.push({ name, value }));
+  const out = {
+    url: final.url,
+    status: final.status,
+    headers: normalize(headers),
+  };
+  cache.set(key, out);
+  return out;
 }

 function normalize(h: HttpHeader[]): HttpHeader[] {
  // sort important first
-  const important = new Set(["strict-transport-security", "content-security-policy", "x-frame-options", "referrer-policy", "server", "cache-control"])
-  return [...h].sort((a, b) => Number(important.has(b.name)) - Number(important.has(a.name)) || a.name.localeCompare(b.name))
+  const important = new Set([
+    "strict-transport-security",
+    "content-security-policy",
+    "x-frame-options",
+    "referrer-policy",
+    "server",
+    "cache-control",
+  ]);
+  return [...h].sort(
+    (a, b) =>
+      Number(important.has(b.name)) - Number(important.has(a.name)) ||
+      a.name.localeCompare(b.name),
+  );
 }
-
-
--- a/server/services/hosting.ts
+++ b/server/services/hosting.ts
@@ -1,78 +1,95 @@
-import { TTLCache } from "./cache"
-import { resolveAll } from "./dns"
-import { probeHeaders } from "./headers"
+import { TTLCache } from "./cache";
+import { resolveAll } from "./dns";
+import { probeHeaders } from "./headers";

 export type HostingInfo = {
-  hostingProvider: string
-  emailProvider: string
-  ipAddress: string | null
-  geo: { city: string; region: string; country: string }
-}
+  hostingProvider: string;
+  emailProvider: string;
+  ipAddress: string | null;
+  geo: { city: string; region: string; country: string };
+};

-const cache = new TTLCache<string, HostingInfo>(24 * 60 * 60 * 1000, (k) => k.toLowerCase())
+const cache = new TTLCache<string, HostingInfo>(24 * 60 * 60 * 1000, (k) =>
+  k.toLowerCase(),
+);

 export async function detectHosting(domain: string): Promise<HostingInfo> {
-  const key = domain.toLowerCase()
-  const cached = cache.get(key)
-  if (cached) return cached
+  const key = domain.toLowerCase();
+  const cached = cache.get(key);
+  if (cached) return cached;

-  const dns = await resolveAll(domain)
-  const a = dns.find((d) => d.type === "A")
-  const mx = dns.filter((d) => d.type === "MX")
-  const ip = a?.value ?? null
+  const dns = await resolveAll(domain);
+  const a = dns.find((d) => d.type === "A");
+  const mx = dns.filter((d) => d.type === "MX");
+  const ip = a?.value ?? null;

-  const headers = await probeHeaders(domain).catch(() => ({ headers: [] as { name: string; value: string }[] }))
-  const provider = detectHostingProvider(headers.headers)
-  const email = detectEmailProvider(mx.map((m) => m.value))
+  const headers = await probeHeaders(domain).catch(() => ({
+    headers: [] as { name: string; value: string }[],
+  }));
+  const provider = detectHostingProvider(headers.headers);
+  const email = detectEmailProvider(mx.map((m) => m.value));

-  const geo = ip ? await lookupGeo(ip) : { city: "", region: "", country: "" }
+  const geo = ip ? await lookupGeo(ip) : { city: "", region: "", country: "" };

  const out: HostingInfo = {
    hostingProvider: provider,
    emailProvider: email,
    ipAddress: ip,
    geo,
-  }
-  cache.set(key, out)
-  return out
+  };
+  cache.set(key, out);
+  return out;
 }

-function detectHostingProvider(headers: { name: string; value: string }[]): string {
-  const byName = Object.fromEntries(headers.map((h) => [h.name.toLowerCase(), h.value])) as Record<string, string>
-  const server = (byName["server"] || "").toLowerCase()
-  const headerNames = headers.map((h) => h.name.toLowerCase())
-  if (server.includes("vercel") || headerNames.some((n) => n.startsWith("x-vercel"))) return "Vercel"
-  if (server.includes("cloudflare") || byName["cf-ray"]) return "Cloudflare"
-  if (server.includes("netlify")) return "Netlify"
-  if (server.includes("github")) return "GitHub Pages"
-  if (server.includes("fly.io")) return "Fly.io"
-  if (server.includes("akamai")) return "Akamai"
-  return server ? capitalize(server.split("/")[0]) : "Unknown"
+function detectHostingProvider(
+  headers: { name: string; value: string }[],
+): string {
+  const byName = Object.fromEntries(
+    headers.map((h) => [h.name.toLowerCase(), h.value]),
+  ) as Record<string, string>;
+  const server = (byName.server || "").toLowerCase();
+  const headerNames = headers.map((h) => h.name.toLowerCase());
+  if (
+    server.includes("vercel") ||
+    headerNames.some((n) => n.startsWith("x-vercel"))
+  )
+    return "Vercel";
+  if (server.includes("cloudflare") || byName["cf-ray"]) return "Cloudflare";
+  if (server.includes("netlify")) return "Netlify";
+  if (server.includes("github")) return "GitHub Pages";
+  if (server.includes("fly.io")) return "Fly.io";
+  if (server.includes("akamai")) return "Akamai";
+  return server ? capitalize(server.split("/")[0]) : "Unknown";
 }

 function detectEmailProvider(mxHosts: string[]): string {
-  const hosts = mxHosts.join(" ").toLowerCase()
-  if (hosts.includes("google")) return "Google Workspace"
-  if (hosts.includes("outlook") || hosts.includes("protection.outlook.com")) return "Microsoft 365"
-  if (hosts.includes("fastmail")) return "Fastmail"
-  if (hosts.includes("zoho")) return "Zoho"
-  if (hosts.includes("proton")) return "Proton"
-  return mxHosts[0] ? mxHosts[0] : "Unknown"
+  const hosts = mxHosts.join(" ").toLowerCase();
+  if (hosts.includes("google")) return "Google Workspace";
+  if (hosts.includes("outlook") || hosts.includes("protection.outlook.com"))
+    return "Microsoft 365";
+  if (hosts.includes("fastmail")) return "Fastmail";
+  if (hosts.includes("zoho")) return "Zoho";
+  if (hosts.includes("proton")) return "Proton";
+  return mxHosts[0] ? mxHosts[0] : "Unknown";
 }

-async function lookupGeo(ip: string): Promise<{ city: string; region: string; country: string }> {
+async function lookupGeo(
+  ip: string,
+): Promise<{ city: string; region: string; country: string }> {
  try {
-    const res = await fetch(`https://ipwho.is/${encodeURIComponent(ip)}`)
-    if (!res.ok) throw new Error("geo fail")
-    const j = (await res.json()) as any
-    return { city: j.city || "", region: j.region || j.state || "", country: j.country || "" }
+    const res = await fetch(`https://ipwho.is/${encodeURIComponent(ip)}`);
+    if (!res.ok) throw new Error("geo fail");
+    const j = (await res.json()) as any;
+    return {
+      city: j.city || "",
+      region: j.region || j.state || "",
+      country: j.country || "",
+    };
  } catch {
-    return { city: "", region: "", country: "" }
+    return { city: "", region: "", country: "" };
  }
 }

 function capitalize(s: string) {
-  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
 }
-
-
--- a/server/services/rdap.ts
+++ b/server/services/rdap.ts
@@ -1,52 +1,103 @@
-import { TTLCache } from "./cache"
+import { TTLCache } from "./cache";

 export type Whois = {
-  registrar: string
-  creationDate: string
-  expirationDate: string
-  registrant: { organization: string; country: string; state?: string }
-  status?: string[]
-}
+  registrar: string;
+  creationDate: string;
+  expirationDate: string;
+  registrant: { organization: string; country: string; state?: string };
+  status?: string[];
+};

-const cache = new TTLCache<string, Whois>(24 * 60 * 60 * 1000, (k) => k)
+type RdapEvent = { eventAction?: string; eventDate?: string };
+type RdapEntity = { roles?: string[]; vcardArray?: [string, unknown[]] };
+type RdapJson = {
+  registrar?: { name?: string };
+  entities?: RdapEntity[];
+  events?: RdapEvent[];
+  status?: string[];
+};
+
+const cache = new TTLCache<string, Whois>(24 * 60 * 60 * 1000, (k) => k);

 export async function fetchWhois(domain: string): Promise<Whois> {
-  const key = domain.toLowerCase()
-  const cached = cache.get(key)
-  if (cached) return cached
+  const key = domain.toLowerCase();
+  const cached = cache.get(key);
+  if (cached) return cached;

-  const rdapBase = await rdapBaseForDomain(domain)
-  const url = `${rdapBase}/domain/${encodeURIComponent(domain)}`
-  const res = await fetch(url, { headers: { accept: "application/rdap+json" } })
-  if (!res.ok) throw new Error(`RDAP failed ${res.status}`)
-  const json = (await res.json()) as any
+  const rdapBase = await rdapBaseForDomain(domain);
+  const url = `${rdapBase}/domain/${encodeURIComponent(domain)}`;
+  const res = await fetch(url, {
+    headers: { accept: "application/rdap+json" },
+  });
+  if (!res.ok) throw new Error(`RDAP failed ${res.status}`);
+  const json = (await res.json()) as unknown as RdapJson;
+
+  const registrarName =
+    json.registrar?.name ??
+    findVcardValue(findEntity(json.entities, "registrar"), "fn") ??
+    "Unknown";
+  const creationDate =
+    json.events?.find((e) => e.eventAction === "registration")?.eventDate ?? "";
+  const expirationDate =
+    json.events?.find((e) => e.eventAction === "expiration")?.eventDate ?? "";
+  const registrantEnt = findEntity(json.entities, "registrant");
+  const organization = findVcardValue(registrantEnt, "org") ?? "";
+  const adr = findVcardEntry(registrantEnt, "adr");
+  const country =
+    Array.isArray(adr?.[3]) && typeof adr?.[3]?.[6] === "string"
+      ? (adr?.[3]?.[6] as string)
+      : "";
+  const state =
+    Array.isArray(adr?.[3]) && typeof adr?.[3]?.[4] === "string"
+      ? (adr?.[3]?.[4] as string)
+      : undefined;

  const out: Whois = {
-    registrar: json?.registrar?.name || json?.entities?.find((e: any) => (e.roles || []).includes("registrar"))?.vcardArray?.[1]?.find((v: any[]) => v[0] === "fn")?.[3] || "Unknown",
-    creationDate: json?.events?.find((e: any) => e.eventAction === "registration")?.eventDate || "",
-    expirationDate: json?.events?.find((e: any) => e.eventAction === "expiration")?.eventDate || "",
-    registrant: {
-      organization:
-        json?.entities?.find((e: any) => (e.roles || []).includes("registrant"))?.vcardArray?.[1]?.find((v: any[]) => v[0] === "org")?.[3] || "",
-      country:
-        json?.entities?.find((e: any) => (e.roles || []).includes("registrant"))?.vcardArray?.[1]?.find((v: any[]) => v[0] === "adr")?.[3]?.[6] || "",
-      state:
-        json?.entities?.find((e: any) => (e.roles || []).includes("registrant"))?.vcardArray?.[1]?.find((v: any[]) => v[0] === "adr")?.[3]?.[4] || undefined,
-    },
-    status: (json?.status as string[]) || [],
-  }
+    registrar: registrarName,
+    creationDate,
+    expirationDate,
+    registrant: { organization, country, state },
+    status: json.status ?? [],
+  };

-  cache.set(key, out)
-  return out
+  cache.set(key, out);
+  return out;
 }

 async function rdapBaseForDomain(domain: string): Promise<string> {
-  const tld = domain.split(".").pop() || "com"
+  const tld = domain.split(".").pop() || "com";
  // IANA bootstrap
-  const iana = await fetch(`https://data.iana.org/rdap/dns.json`).then((r) => r.json() as Promise<any>)
-  const entry = iana.services?.find((s: any[]) => (s[0] as string[]).includes(tld))
-  const base = (entry?.[1]?.[0] as string) || "https://rdap.verisign.com/com/v1"
-  return base.replace(/\/$/, "")
+  const iana = (await fetch(`https://data.iana.org/rdap/dns.json`).then((r) =>
+    r.json(),
+  )) as { services?: [string[], string[]][] };
+  const entry = iana.services?.find((s) => s[0].includes(tld));
+  const base = entry?.[1]?.[0] || "https://rdap.verisign.com/com/v1";
+  return base.replace(/\/$/, "");
 }

+function findEntity(
+  entities: RdapEntity[] | undefined,
+  role: string,
+): RdapEntity | undefined {
+  return entities?.find((e) => e.roles?.includes(role));
+}

+function findVcardEntry(
+  entity: RdapEntity | undefined,
+  key: string,
+): unknown[] | undefined {
+  const arr = entity?.vcardArray?.[1];
+  if (!Array.isArray(arr)) return undefined;
+  return arr.find((v) => Array.isArray(v) && v[0] === key) as
+    | unknown[]
+    | undefined;
+}
+
+function findVcardValue(
+  entity: RdapEntity | undefined,
+  key: string,
+): string | undefined {
+  const entry = findVcardEntry(entity, key);
+  const value = entry?.[3];
+  return typeof value === "string" ? value : undefined;
+}
--- a/server/services/tls.ts
+++ b/server/services/tls.ts
@@ -1,39 +1,55 @@
-import tls from "tls"
-import { TTLCache } from "./cache"
+import tls from "node:tls";
+import { TTLCache } from "./cache";

 export type Certificate = {
-  issuer: string
-  subject: string
-  validFrom: string
-  validTo: string
-  signatureAlgorithm: string
-  keyType: string
-  chain: string[]
-}
+  issuer: string;
+  subject: string;
+  validFrom: string;
+  validTo: string;
+  signatureAlgorithm: string;
+  keyType: string;
+  chain: string[];
+};

-const cache = new TTLCache<string, Certificate[]>(12 * 60 * 60 * 1000, (k) => k.toLowerCase())
+const cache = new TTLCache<string, Certificate[]>(12 * 60 * 60 * 1000, (k) =>
+  k.toLowerCase(),
+);

 export async function getCertificates(domain: string): Promise<Certificate[]> {
-  const cached = cache.get(domain)
-  if (cached) return cached
+  const cached = cache.get(domain);
+  if (cached) return cached;

-  const chain = await new Promise<tls.DetailedPeerCertificate[]>((resolve, reject) => {
-    const socket = tls.connect({ host: domain, port: 443, servername: domain, rejectUnauthorized: false }, () => {
-      const peer = socket.getPeerCertificate(true) as tls.DetailedPeerCertificate
-      const chain: tls.DetailedPeerCertificate[] = []
-      let current: any = peer
-      while (current) {
-        chain.push(current)
-        current = current.issuerCertificate && current.issuerCertificate !== current ? current.issuerCertificate : null
-      }
-      socket.end()
-      resolve(chain)
-    })
-    socket.setTimeout(6000, () => {
-      socket.destroy(new Error("TLS timeout"))
-    })
-    socket.on("error", reject)
-  })
+  const chain = await new Promise<tls.DetailedPeerCertificate[]>(
+    (resolve, reject) => {
+      const socket = tls.connect(
+        {
+          host: domain,
+          port: 443,
+          servername: domain,
+          rejectUnauthorized: false,
+        },
+        () => {
+          const peer = socket.getPeerCertificate(
+            true,
+          ) as tls.DetailedPeerCertificate;
+          const chain: tls.DetailedPeerCertificate[] = [];
+          let current: tls.DetailedPeerCertificate | null = peer;
+          while (current) {
+            chain.push(current);
+            const next = (current as unknown as { issuerCertificate?: unknown })
+              .issuerCertificate as tls.DetailedPeerCertificate | undefined;
+            current = next && next !== current ? next : null;
+          }
+          socket.end();
+          resolve(chain);
+        },
+      );
+      socket.setTimeout(6000, () => {
+        socket.destroy(new Error("TLS timeout"));
+      });
+      socket.on("error", reject);
+    },
+  );

  const out: Certificate[] = chain.map((c) => ({
    issuer: toName(c.issuer),
@@ -42,21 +58,22 @@ export async function getCertificates(domain: string): Promise<Certificate[]> {
    validTo: new Date(c.valid_to).toISOString(),
    signatureAlgorithm: (c as any).signatureAlgorithm || "",
    // Ensure we never return Buffers/typed arrays (which break superjson)
-    keyType: typeof (c as any).publicKeyAlgorithm === "string" ? (c as any).publicKeyAlgorithm : "",
+    keyType:
+      typeof (c as any).publicKeyAlgorithm === "string"
+        ? (c as any).publicKeyAlgorithm
+        : "",
    chain: [],
-  }))
+  }));
  // Add simple subject chain for readability
-  if (out.length > 0) out[0].chain = out.map((c) => c.issuer)
+  if (out.length > 0) out[0].chain = out.map((c) => c.issuer);

-  cache.set(domain, out)
-  return out
+  cache.set(domain, out);
+  return out;
 }

 function toName(subject: tls.PeerCertificate["subject"] | undefined) {
-  if (!subject) return ""
-  const cn = (subject as any).CN
-  const o = (subject as any).O
-  return cn ? `CN=${cn}` : o ? `O=${o}` : JSON.stringify(subject)
+  if (!subject) return "";
+  const cn = (subject as any).CN;
+  const o = (subject as any).O;
+  return cn ? `CN=${cn}` : o ? `O=${o}` : JSON.stringify(subject);
 }
-
-
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -1,13 +1,11 @@
-import { initTRPC } from "@trpc/server"
-import superjson from "superjson"
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";

-export type Context = {}
+export type Context = Record<string, never>;

 const t = initTRPC.context<Context>().create({
  transformer: superjson,
-})
-
-export const router = t.router
-export const publicProcedure = t.procedure
-
+});

+export const router = t.router;
+export const publicProcedure = t.procedure;