refactor: separate search page instantsearch provider and layout

app/[locale]/search/layout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+import { ThomasBernhardInstantSearchProvider } from "@/components/instantsearch/thomas-bernhard/thomasbernhard-instantsearchprovider";
+
+interface SearchLayoutProps {
+	children: ReactNode;
+}
+
+export default function SearchLayout(props: SearchLayoutProps): ReactNode {
+	const { children } = props;
+
+	return (
+		<ThomasBernhardInstantSearchProvider
+			queryArgsToMenuFields={{
+				language: "language" as const,
+				category: "contains.work.category" as const,
+				work: "contains.work.short_title" as const,
+				translator: "contains.translators.name" as const,
+			}}
+		>
+			{children}
+		</ThomasBernhardInstantSearchProvider>
+	);
+}

app/[locale]/search/page.tsx

@@ -4,7 +4,7 @@ import { cn } from "@acdh-oeaw/style-variants";
 import { useTranslations } from "next-intl";
 import { Menu, type MenuProps } from "react-instantsearch";
 
-import { InstantSearchView } from "@/components/instantsearch-view";
+import { Results } from "@/components/instantsearch/results";
 import { MainContent } from "@/components/main-content";
 
 function FilterMenu(props: {
@@ -51,41 +51,36 @@ function FilterMenu(props: {
 export default function SearchPage() {
 	const tl = useTranslations("Languages");
 	return (
-		<MainContent className="mx-auto h-full w-screen max-w-screen-lg p-6">
-			<InstantSearchView
-				queryArgsToMenuFields={{
-					// the order of elements here determines the order of refinement lists in the UI
-					language: "language" as const,
-					category: "contains.work.category" as const,
-					work: "contains.work.short_title" as const,
-					translator: "contains.translators.name" as const,
-				}}
-			>
-				<div className="absolute h-full overflow-y-auto pr-5">
-					<FilterMenu attribute="contains.work.short_title" />
+		<MainContent>
+			<div className="grid h-full grid-cols-[25%_75%] gap-6 px-2">
+				<div className="relative h-full">
+					<div className="absolute size-full overflow-y-auto px-2">
+						<FilterMenu attribute="contains.work.short_title" />
 
-					<FilterMenu
-						attribute="language"
-						className="lowercase"
-						transformItems={(items) => {
-							return items.map((item) => {
-								// eslint-disable-next-line @typescript-eslint/no-explicit-any
-								item.label = tl(item.label as any);
-								return item;
-							});
-						}}
-					/>
+						<FilterMenu
+							attribute="language"
+							className="lowercase"
+							transformItems={(items) => {
+								return items.map((item) => {
+									// eslint-disable-next-line @typescript-eslint/no-explicit-any
+									item.label = tl(item.label as any);
+									return item;
+								});
+							}}
+						/>
 
-					{
-						// FIXME when changing the query removes a refinement from the list, that refinement
-						// should become inactive!? otherwise it's not clear that it's still toggled...
-						// TODO pass transform
-						// <FilterMenu attribute="contains.work.category" />
-					}
+						{
+							// FIXME when changing the query removes a refinement from the list, that refinement
+							// should become inactive!? otherwise it's not clear that it's still toggled...
+							// TODO pass transform
+							// <FilterMenu attribute="contains.work.category" />
+						}
 
-					<FilterMenu attribute="contains.translators.name" />
+						<FilterMenu attribute="contains.translators.name" />
+					</div>
 				</div>
-			</InstantSearchView>
+				<Results />
+			</div>
 		</MainContent>
 	);
 }