Move index page into /app directory.

Use props drilling to get FallbackSuggestions into SpecInput instead of using context.

src/app/page.tsx

@@ -0,0 +1,11 @@
+import Landing from "^/components/Landing";
+import fallback from "^/lib/autocomplete/fallback";
+
+export interface IndexProps {}
+
+const IndexPage = async ({}: IndexProps) => {
+    const fallbackSuggestions = await fallback();
+    return <Landing fallbackSuggestions={fallbackSuggestions} />;
+};
+
+export default IndexPage;

src/components/Landing/Landing.tsx

@@ -1,16 +1,20 @@
+"use client";
 import { Stack, useBoolean } from "@chakra-ui/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { FunctionComponent, useState } from "react";
 import Layout from "^/components/Layout";
+import { AutocompleteSuggestion } from "^/lib/autocomplete";
 import { DEFAULT_DIFF_FILES_GLOB } from "^/lib/default-diff-files";
 import ExamplesList from "./ExamplesList";
 import Intro from "./Intro";
 import MainForm from "./MainForm/MainForm";
 import OptionsForm from "./OptionsForm";
 
-export interface LandingProps {}
+export interface LandingProps {
+    fallbackSuggestions: AutocompleteSuggestion[];
+}
 
-const Landing: FunctionComponent<LandingProps> = () => {
+const Landing: FunctionComponent<LandingProps> = ({ fallbackSuggestions }) => {
     const [overrides, setOverrides] = useState<{
         a: string | null;
         b: string | null;
@@ -41,10 +45,11 @@ const Landing: FunctionComponent<LandingProps> = () => {
     const goToDiff = (a: string | undefined, b: string | undefined): void => {
         setLoading.on();
 
-        router.push({
-            pathname: `/${a}...${b}`,
-            query,
-        });
+        router.push(
+            `/${a}...${b}?${Object.entries(query)
+                .map(([k, v]) => `${k}=${v}`)
+                .join("&")}`,
+        );
     };
 
     return (
@@ -56,6 +61,7 @@ const Landing: FunctionComponent<LandingProps> = () => {
                     overrideB={overrides.b}
                     isLoading={isLoading}
                     handleSubmit={goToDiff}
+                    fallbackSuggestions={fallbackSuggestions}
                 />
                 <OptionsForm files={diffFiles} filesChange={setDiffFiles} />
             </Stack>

src/components/Landing/MainForm/MainForm.tsx

@@ -9,6 +9,7 @@ import {
 import npa from "npm-package-arg";
 import { FormEvent, useCallback, useMemo, useRef, useState } from "react";
 import { Tooltip } from "^/components/theme";
+import { AutocompleteSuggestion } from "^/lib/autocomplete";
 import CenterInputAddon from "./CenterInputAddon";
 import SpecInput from "./SpecInput";
 
@@ -19,11 +20,20 @@ export interface MainFormProps extends StackProps {
     overrideB: string | null;
     isLoading: boolean;
     handleSubmit: (a: string | undefined, b: string | undefined) => void;
+    fallbackSuggestions: AutocompleteSuggestion[];
 }
 
 const MainForm = forwardRef<MainFormProps, typeof Flex>(
     (
-        { overrideA, overrideB, children, isLoading, handleSubmit, ...props },
+        {
+            overrideA,
+            overrideB,
+            children,
+            isLoading,
+            handleSubmit,
+            fallbackSuggestions,
+            ...props
+        },
         ref,
     ) => {
         const bRef = useRef<HTMLInputElement>(null);
@@ -97,6 +107,7 @@ const MainForm = forwardRef<MainFormProps, typeof Flex>(
                               }
                             : undefined),
                     }}
+                    fallbackSuggestions={fallbackSuggestions}
                 ></SpecInput>
                 <CenterInputAddon
                     size={SIZE}
@@ -123,6 +134,7 @@ const MainForm = forwardRef<MainFormProps, typeof Flex>(
                               }
                             : undefined),
                     }}
+                    fallbackSuggestions={fallbackSuggestions}
                 ></SpecInput>
                 <Box
                     marginInlineStart={{ lg: "2rem" }}

src/components/Landing/MainForm/SpecInput/SpecInput.tsx

@@ -1,6 +1,6 @@
 import { Spinner, Text } from "@chakra-ui/react";
-import { FunctionComponent, RefObject, useContext } from "react";
-import { FallbackSuggestionsContext } from "^/lib/contexts/FallbackSuggestions";
+import { FunctionComponent, RefObject } from "react";
+import { AutocompleteSuggestion } from "^/lib/autocomplete";
 import {
     useNpmCombobox,
     UseNpmComboboxProps,
@@ -22,6 +22,7 @@ export interface SpecInputProps extends Omit<UseNpmComboboxProps, "fallback"> {
     inputProps?: Omit<ComboboxInputProps, "isOpen">;
     inputRef?: RefObject<HTMLInputElement>;
     size: ComboboxBoxProps["size"];
+    fallbackSuggestions?: AutocompleteSuggestion[];
 }
 
 const SuggestionListText = ({
@@ -41,6 +42,7 @@ const SpecInput: FunctionComponent<SpecInputProps> = ({
     inputProps = {},
     inputRef,
     size,
+    fallbackSuggestions = [],
 
     ...useNpmComboboxProps
 }) => {
@@ -55,7 +57,7 @@ const SpecInput: FunctionComponent<SpecInputProps> = ({
         error,
     } = useNpmCombobox({
         ...useNpmComboboxProps,
-        fallback: useContext(FallbackSuggestionsContext),
+        fallback: fallbackSuggestions,
     });
 
     return (