Added a dialog with each opportunity's details and releases

Every row has a details icon under the Find a Tender link. It opens a
dialog with the opportunity's details from the list, and fetches the
opportunity with its releases, shown as tabs, newest first. Each tab
summarises the release's tender, awards and contracts, links to its
Find a Tender notice where it is one, and has the release's JSON,
pretty-printed and highlighted, in a section laid out only when it's
opened.

The JSON is highlighted by splitting it into tokens shown as text, not
HTML, as releases come from outside sources. The README's saved
preferences now include the filters.

web/src/components/JsonView.tsx

@@ -0,0 +1,35 @@
+import type { JSX } from 'solid-js';
+import { createMemo, For } from 'solid-js';
+
+import type { JsonTokenKind } from '@/lib/jsonTokens';
+import { tokeniseJson } from '@/lib/jsonTokens';
+
+interface Props {
+  /** JSON text, shown as it is: pretty-print it first. */
+  json: string;
+}
+
+const TOKEN_CLASS: Record<JsonTokenKind, string> = {
+  key: 'text-code-key',
+  string: 'text-code-string',
+  number: 'text-code-number',
+  literal: 'text-code-literal',
+  plain: '',
+};
+
+/**
+ * JSON text, syntax highlighted. Each token is a text span, never HTML, as
+ * releases come from outside sources.
+ */
+export function JsonView(props: Props): JSX.Element {
+  const tokens = createMemo(() => tokeniseJson(props.json));
+  return (
+    <pre class="max-h-[50vh] overflow-auto rounded-md border border-line-soft bg-paper p-3 font-mono text-[13px] leading-relaxed">
+      <code>
+        <For each={tokens()}>
+          {(token) => <span class={TOKEN_CLASS[token.kind]}>{token.text}</span>}
+        </For>
+      </code>
+    </pre>
+  );
+}