clean up some small issues

website/src/app/f/[...path]/page.tsx

@@ -8,10 +8,13 @@ import { Box, Divider, Typography, Link, Chip } from "@mui/material";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { findType, interpretType } from "@/models/nix";
 import { FilterProvider } from "@/components/layout/filterContext";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { PositionLink } from "@/components/PositionLink";
 import { SearchNav } from "@/components/SearchNav";
 
+import fs from "fs";
+import path from "path";
+
 // Important the key ("path") in the returned dict MUST match the dynamic path segment ([...path])
 export async function generateStaticParams(): Promise<{ path: string[] }[]> {
   const paths = data.map((docItem) => {
@@ -136,9 +139,6 @@ const MDX = ({ source }: { source: string }) => (
   />
 );
 
-import fs from "fs";
-import path from "path";
-
 async function getManualSrc(item: Doc): Promise<string | null> {
   // Path must be at exactly [ "builtins" ":id" ]
   if (item?.meta?.path?.length != 2 || item?.meta?.path?.[0] !== "builtins") {
@@ -201,12 +201,12 @@ export default async function Page(props: { params: { path: string[] } }) {
         {meta?.path &&
           meta.path.map((attr, idx, all) =>
             idx === all.length - 1 ? (
-              <>
-                <meta key={idx} data-pagefind-meta={`name:${attr}`} />
-                <Box key={idx * 2} component="h3" sx={{ display: "none" }}>
+              <React.Fragment key={idx}>
+                <meta data-pagefind-meta={`name:${attr}`} />
+                <Box component="h3" sx={{ display: "none" }}>
                   {attr}
                 </Box>
-              </>
+              </React.Fragment>
             ) : (
               <meta key={idx} data-pagefind-meta={`category:${attr}`} />
             )
@@ -372,7 +372,7 @@ export default async function Page(props: { params: { path: string[] } }) {
           </div>
         </Box>
         <Divider flexItem sx={{ mt: 2 }} />
-        <Suspense fallback={<div />}>
+        <Suspense fallback={<div></div>}>
           <FilterProvider>
             <SearchNav />
           </FilterProvider>

website/src/components/SearchNav.tsx

@@ -4,8 +4,6 @@ import { Box, Button, Link, Typography } from "@mui/material";
 import { useSessionStorage } from "usehooks-ts";
 import { FilterOptions } from "./layout/filterContext";
 // import { useRouter } from "next/navigation";
-
-// import d from "./example.json";
 import { PagefindResult, usePagefindSearch } from "./Pagefind";
 import { useEffect, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
@@ -15,10 +13,8 @@ export const SearchNav = () => {
     "currentFilterOptions",
     null
   );
-  if (!filterOptions) {
-    return null;
-  }
-  return <Navigation filterOptions={filterOptions} />;
+
+  return filterOptions && <Navigation filterOptions={filterOptions} />;
 };
 
 // const prev = {
@@ -63,11 +59,9 @@ export const Navigation = ({
 
   useEffect(() => {
     const init = async () => {
-      console.log({ search, term, filters: { from, to } });
       if (search) {
         let raw =
           (await search(term, { filters: { from, to } }))?.results || [];
-
         let items = await Promise.all(raw.map(async (r) => await r.data()));
         setItems(items);
       }

website/src/components/filter.tsx

@@ -125,7 +125,7 @@ export const Filter = (props: FilterProps) => {
             </Button>
           )}
           <FormControl
-            fullWidth
+            fullWidth={true}
             sx={{
               my: 1,
               display: "flex",
@@ -148,7 +148,7 @@ export const Filter = (props: FilterProps) => {
             <ToggleButtonGroup
               aria-labelledby="input-type-label"
               exclusive
-              fullWidth
+              fullWidth={true}
               value={from}
               onChange={(e, values) => setFrom(values)}
               color={"primary"}
@@ -176,7 +176,7 @@ export const Filter = (props: FilterProps) => {
           </FormControl>
 
           <FormControl
-            fullWidth
+            fullWidth={true}
             sx={{
               my: 1,
               display: "flex",
@@ -199,7 +199,7 @@ export const Filter = (props: FilterProps) => {
             <ToggleButtonGroup
               aria-labelledby="return-type-label"
               exclusive
-              fullWidth
+              fullWidth={true}
               value={to}
               color={"primary"}
               onChange={(e, values) => setTo(values)}
@@ -224,8 +224,12 @@ export const Filter = (props: FilterProps) => {
 
           {!disableSubmit && (
             <>
-              <Button variant="outlined" type="submit" sx={{ width: "100%" }}>
-                Apply
+              <Button
+                variant="outlined"
+                type="submit"
+                sx={{ width: "100%", mt: 2 }}
+              >
+                Search
               </Button>
             </>
           )}