Pull homepage suggestions from edge config

Author: jakejarvis

.env.example

@@ -34,3 +34,14 @@ NEXT_PUBLIC_MAPBOX_TOKEN=
 
 # Optional: override user agent sent with upstream requests
 EXTERNAL_USER_AGENT=
+
+# Vercel Flags SDK secret for encryption, overrides, and Flags Explorer
+# Generate with: openssl rand -base64 32 | tr '+/' '-_' | tr -d '='
+FLAGS_SECRET=
+
+# Vercel Edge Config URL (set by Edge Config integration)
+EDGE_CONFIG=
+
+# Optional: Statsig Console API for Flags Explorer integration
+STATSIG_CONSOLE_API_KEY=
+STATSIG_PROJECT_ID=

app/.well-known/vercel/flags/route.ts

@@ -0,0 +1,33 @@
+import { getProviderData as getStatsigProviderData } from "@flags-sdk/statsig";
+import { mergeProviderData } from "flags";
+import { createFlagsDiscoveryEndpoint, getProviderData } from "flags/next";
+import * as flags from "@/flags";
+
+/**
+ * Flags Explorer API endpoint
+ *
+ * This endpoint is used by the Vercel Toolbar's Flags Explorer to:
+ * 1. Discover flags defined in code
+ * 2. Fetch metadata from Statsig (if configured)
+ * 3. Allow overriding flag values during development
+ *
+ * Authorization is handled automatically by createFlagsDiscoveryEndpoint.
+ */
+export const GET = createFlagsDiscoveryEndpoint(async () => {
+  const providers = [
+    // Expose flags declared in code
+    getProviderData(flags),
+  ];
+
+  // If Statsig Console API credentials are available, enhance with metadata
+  if (process.env.STATSIG_CONSOLE_API_KEY && process.env.STATSIG_PROJECT_ID) {
+    providers.push(
+      await getStatsigProviderData({
+        projectId: process.env.STATSIG_PROJECT_ID,
+        consoleApiKey: process.env.STATSIG_CONSOLE_API_KEY,
+      }),
+    );
+  }
+
+  return mergeProviderData(providers);
+});

app/layout.tsx

@@ -1,4 +1,5 @@
 import { Analytics } from "@vercel/analytics/next";
+import { VercelToolbar } from "@vercel/toolbar/next";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
@@ -46,6 +47,7 @@ export default function RootLayout({
           <Toaster />
         </Providers>
         <Analytics />
+        {process.env.NODE_ENV === "development" && <VercelToolbar />}
       </body>
     </html>
   );

app/not-found.tsx

@@ -24,7 +24,7 @@ export default function NotFound() {
           </EmptyDescription>
         </EmptyHeader>
         <EmptyContent className="w-full">
-          <DomainSearch showSuggestions={false} />
+          <DomainSearch variant="lg" />
         </EmptyContent>
       </Empty>
     </div>

app/page.tsx

@@ -1,15 +1,15 @@
-import { DomainSearch } from "@/components/domain/domain-search";
+import { DomainSuggestionsServer } from "@/components/domain/domain-suggestions-server";
 import { HomeHero } from "@/components/home-hero";
+import { HomeSearchSection } from "@/components/home-search-section";
 
 export default function Home() {
   return (
     <div className="container mx-auto my-auto flex items-center justify-center px-4 py-8">
       <div className="w-full space-y-6">
         <HomeHero />
-
-        <div className="mx-auto w-full max-w-3xl">
-          <DomainSearch variant="lg" />
-        </div>
+        <HomeSearchSection>
+          <DomainSuggestionsServer />
+        </HomeSearchSection>
       </div>
     </div>
   );

components/domain/domain-search.test.tsx

@@ -16,18 +16,6 @@ vi.mock("next/navigation", () => ({
   useParams: () => ({}),
 }));
 
-vi.mock("@/components/domain/domain-suggestions", () => ({
-  DomainSuggestions: ({
-    onSelectAction,
-  }: {
-    onSelectAction?: (domain: string) => void;
-  }) => (
-    <button type="button" onClick={() => onSelectAction?.("example.com")}>
-      example.com
-    </button>
-  ),
-}));
-
 vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
 
 describe("DomainSearch (form variant)", () => {
@@ -59,25 +47,29 @@ describe("DomainSearch (form variant)", () => {
     expect(toast.error).toHaveBeenCalled();
   });
 
-  it("fills input and navigates when a suggestion is clicked", async () => {
-    render(<DomainSearch variant="lg" />);
-    // Click the mocked suggestion button
-    await userEvent.click(
-      screen.getByRole("button", { name: /example\.com/i }),
+  it("handles external navigation trigger", async () => {
+    const onComplete = vi.fn();
+    const { rerender } = render(
+      <DomainSearch variant="lg" onNavigationComplete={onComplete} />,
     );
-    // Input should reflect the selected domain immediately
+
+    // Simulate external navigation request (e.g., from suggestion click)
+    rerender(
+      <DomainSearch
+        variant="lg"
+        externalNavigation={{ domain: "example.com", source: "suggestion" }}
+        onNavigationComplete={onComplete}
+      />,
+    );
+
+    // Input should reflect the triggered domain
     const input = screen.getByLabelText(
       /Search any domain/i,
     ) as HTMLInputElement;
     expect(input.value).toBe("example.com");
     // Navigation should have been triggered
     expect(nav.push).toHaveBeenCalledWith("/example.com");
-    // Submit button shows a loading spinner and is disabled while navigating
-    expect(screen.getByRole("button", { name: /loading/i })).toBeDisabled();
-    // Input should be disabled while loading
-    expect(
-      (screen.getByLabelText(/Search any domain/i) as HTMLInputElement)
-        .disabled,
-    ).toBe(true);
+    // Completion callback should be called
+    expect(onComplete).toHaveBeenCalled();
   });
 });

components/domain/domain-search.tsx

@@ -2,7 +2,6 @@
 
 import { ArrowRight, Search } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { DomainSuggestions } from "@/components/domain/domain-suggestions";
 import {
   InputGroup,
   InputGroupAddon,
@@ -17,16 +16,20 @@ import { cn } from "@/lib/utils";
 
 export type DomainSearchVariant = "sm" | "lg";
 
+type Source = "form" | "header" | "suggestion";
+
 export type DomainSearchProps = {
   variant?: DomainSearchVariant;
   initialValue?: string;
-  showSuggestions?: boolean;
+  externalNavigation?: { domain: string; source: Source } | null;
+  onNavigationComplete?: () => void;
 };
 
 export function DomainSearch({
   variant = "lg",
   initialValue = "",
-  showSuggestions = true,
+  externalNavigation,
+  onNavigationComplete,
 }: DomainSearchProps) {
   const { value, setValue, loading, inputRef, submit, navigateToDomain } =
     useDomainSearch({
@@ -42,6 +45,18 @@ export function DomainSearch({
   const [isFocused, setIsFocused] = useState(false);
   useEffect(() => setMounted(true), []);
 
+  // Handle external navigation requests (e.g., from suggestion clicks)
+  useEffect(() => {
+    if (externalNavigation) {
+      // Mirror the selected domain in the input so the form appears submitted
+      setValue(externalNavigation.domain);
+      // Trigger navigation
+      navigateToDomain(externalNavigation.domain, externalNavigation.source);
+      // Notify parent that navigation was handled
+      onNavigationComplete?.();
+    }
+  }, [externalNavigation, setValue, navigateToDomain, onNavigationComplete]);
+
   // Select all on first focus from keyboard or first click; allow precise cursor on next click.
   const pointerDownRef = useRef(false);
   const justFocusedRef = useRef(false);
@@ -181,17 +196,6 @@ export function DomainSearch({
           </InputGroup>
         </div>
       </form>
-
-      {variant === "lg" && showSuggestions && (
-        <DomainSuggestions
-          onSelectAction={(d) => {
-            // Mirror the selected domain in the input so the form
-            // appears submitted while navigation is in-flight.
-            setValue(d);
-            navigateToDomain(d, "suggestion");
-          }}
-        />
-      )}
     </div>
   );
 }

components/domain/domain-suggestions-client.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useHomeSearch } from "@/components/home-search-context";
+import { DomainSuggestions } from "./domain-suggestions";
+
+type DomainSuggestionsClientProps = {
+  suggestions: string[];
+  className?: string;
+  faviconSize?: number;
+  max?: number;
+};
+
+/**
+ * Client wrapper that connects DomainSuggestions to HomeSearchContext.
+ *
+ * This allows the server component DomainSuggestionsServer to pass suggestions
+ * while the click handler comes from the context provided by HomeSearchSection.
+ */
+export function DomainSuggestionsClient(props: DomainSuggestionsClientProps) {
+  const { onSuggestionClickAction } = useHomeSearch();
+
+  return (
+    <DomainSuggestions {...props} onSelectAction={onSuggestionClickAction} />
+  );
+}

components/domain/domain-suggestions-server.tsx

@@ -0,0 +1,24 @@
+import { domainSuggestionsFlag } from "@/flags";
+import { DomainSuggestionsClient } from "./domain-suggestions-client";
+
+type DomainSuggestionsServerProps = {
+  className?: string;
+  faviconSize?: number;
+  max?: number;
+};
+
+/**
+ * Server wrapper for DomainSuggestions that evaluates the feature flag.
+ *
+ * This component evaluates the domainSuggestionsFlag on the server side
+ * and passes the result to the client DomainSuggestions component.
+ *
+ * The onSelectAction handler is provided via HomeSearchContext from the parent.
+ */
+export async function DomainSuggestionsServer(
+  props: DomainSuggestionsServerProps,
+) {
+  const suggestions = await domainSuggestionsFlag();
+
+  return <DomainSuggestionsClient {...props} suggestions={suggestions} />;
+}

components/domain/domain-suggestions.test.tsx

@@ -5,6 +5,14 @@ import { createElement } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DomainSuggestions } from "@/components/domain/domain-suggestions";
 
+const TEST_SUGGESTIONS = [
+  "github.com",
+  "reddit.com",
+  "wikipedia.org",
+  "firefox.com",
+  "jarv.is",
+];
+
 vi.mock("@bprogress/next/app", () => ({
   useRouter: () => ({ push: vi.fn() }),
 }));
@@ -23,9 +31,9 @@ describe("DomainSuggestions", () => {
     localStorage.removeItem("search-history");
   });
 
-  it("renders default suggestions when there is no history", async () => {
-    render(<DomainSuggestions />);
-    // Wait for a known default like jarv.is to appear
+  it("renders provided suggestions when there is no history", async () => {
+    render(<DomainSuggestions suggestions={TEST_SUGGESTIONS} />);
+    // Wait for a known suggestion like jarv.is to appear
     expect(
       await screen.findByRole("button", { name: /jarv\.is/i }),
     ).toBeInTheDocument();
@@ -35,20 +43,20 @@ describe("DomainSuggestions", () => {
     ).toBeGreaterThan(0);
   });
 
-  it("merges history and defaults without duplicates, capped by max", async () => {
+  it("merges history and suggestions without duplicates, capped by max", async () => {
     localStorage.setItem(
       "search-history",
       JSON.stringify(["foo.com", "github.com", "bar.org"]),
     );
-    render(<DomainSuggestions max={4} />);
+    render(<DomainSuggestions suggestions={TEST_SUGGESTIONS} max={4} />);
     // History entries appear
     expect(
       await screen.findByRole("button", { name: /foo\.com/i }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: /bar\.org/i }),
     ).toBeInTheDocument();
-    // github.com appears only once (deduped with defaults)
+    // github.com appears only once (deduped with suggestions)
     expect(screen.getAllByRole("button", { name: /github\.com/i }).length).toBe(
       1,
     );
@@ -57,7 +65,12 @@ describe("DomainSuggestions", () => {
   it("invokes onSelect when a suggestion is clicked", async () => {
     const onSelect = vi.fn();
     localStorage.setItem("search-history", JSON.stringify(["example.com"]));
-    render(<DomainSuggestions onSelectAction={onSelect} />);
+    render(
+      <DomainSuggestions
+        suggestions={TEST_SUGGESTIONS}
+        onSelectAction={onSelect}
+      />,
+    );
     await userEvent.click(screen.getByRole("button", { name: /example.com/i }));
     expect(onSelect).toHaveBeenCalledWith("example.com");
   });