Harden authentication and writable endpoints

app/components/common/HighlightText.tsx

@@ -0,0 +1,23 @@
+import { Fragment, type ReactNode } from "react";
+
+export default function HighlightText({ text, query }: { text: unknown; query: string }): ReactNode {
+  const value = String(text ?? "");
+  if (!query) return value;
+
+  const haystack = value.toLocaleLowerCase();
+  const needle = query.toLocaleLowerCase();
+  if (!needle) return value;
+
+  const parts: ReactNode[] = [];
+  let start = 0;
+  let match = haystack.indexOf(needle, start);
+  while (match !== -1) {
+    if (match > start) parts.push(value.slice(start, match));
+    parts.push(<mark key={`${match}-${parts.length}`}>{value.slice(match, match + query.length)}</mark>);
+    start = match + query.length;
+    match = haystack.indexOf(needle, start);
+  }
+  if (start < value.length) parts.push(value.slice(start));
+
+  return <Fragment>{parts.length ? parts : value}</Fragment>;
+}