chore: Reorganise search file structure

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/ExternalPortalList.tsx

@@ -0,0 +1,42 @@
+import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const Root = styled(List)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  padding: theme.spacing(0.5, 0),
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.border.light}`,
+}));
+
+export const ExternalPortalList: React.FC = () => {
+  const externalPortals = useStore((state) => state.externalPortals);
+  const hasExternalPortals = Object.keys(externalPortals).length;
+
+  if (!hasExternalPortals) return null;
+
+  return (
+    <Box pt={2}>
+      <Typography variant="body1" mb={2}>
+        Your service also contains the following external portals, which have
+        not been searched:
+      </Typography>
+      <Root>
+        {Object.values(externalPortals).map(({ name, href }) => (
+          <ListItem key={`external-portal-card-${name}`} disablePadding>
+            <ListItemButton component="a" href={`../${href}`}>
+              <Typography variant="body2">
+                {href.replaceAll("/", " / ")}
+              </Typography>
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </Root>
+    </Box>
+  );
+};

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx

@@ -0,0 +1,32 @@
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { FONT_WEIGHT_BOLD } from "theme";
+
+interface Props {
+  text: string;
+  matchIndices: [number, number][];
+  variant: "data";
+}
+
+export const Headline: React.FC<Props> = ({ text, matchIndices }) => {
+  const isHighlighted = (index: number) =>
+    matchIndices.some(([start, end]) => index >= start && index <= end);
+
+  return (
+    <>
+      {text.split("").map((char, index) => (
+        <Typography
+          component="span"
+          variant="data"
+          key={`headline-character-${index}`}
+          sx={(theme) => ({
+            fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",
+            fontSize: theme.typography.body2.fontSize,
+          })}
+        >
+          {char}
+        </Typography>
+      ))}
+    </>
+  );
+};

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/NodeSearchResults.tsx

@@ -0,0 +1,38 @@
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { IndexedNode } from "@opensystemslab/planx-core/types";
+import type { SearchResults } from "hooks/useSearch";
+import React from "react";
+
+import { SearchResultCard } from "./SearchResultCard";
+
+export const Root = styled(List)(({ theme }) => ({
+  width: "100%",
+  gap: theme.spacing(2),
+  display: "flex",
+  flexDirection: "column",
+}));
+
+export const NodeSearchResults: React.FC<{
+  results: SearchResults<IndexedNode>;
+}> = ({ results }) => {
+  return (
+    <>
+      <Typography variant="h3" mb={1}>
+        {!results.length && "No matches found"}
+        {results.length === 1 && "1 result:"}
+        {results.length > 1 && `${results.length} results:`}
+      </Typography>
+
+      <Root>
+        {results.map((result) => (
+          <ListItem key={result.item.id} disablePadding>
+            <SearchResultCard result={result} />
+          </ListItem>
+        ))}
+      </Root>
+    </>
+  );
+};