Allow filtering on session fields.

components/common/FilterLink.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Link from 'next/link';
+import classNames from 'classnames';
+import usePageQuery from 'hooks/usePageQuery';
+import { safeDecodeURI } from 'lib/url';
+import Icon from './Icon';
+import External from 'assets/arrow-up-right-from-square.svg';
+import styles from './FilterLink.module.css';
+
+export default function FilterLink({ id, value, label, externalUrl }) {
+  const { resolve, query } = usePageQuery();
+  const active = query[id] !== undefined;
+  const selected = query[id] === value;
+
+  return (
+    <div className={styles.row}>
+      <Link href={resolve({ [id]: value })} replace>
+        <a
+          className={classNames(styles.label, {
+            [styles.inactive]: active && !selected,
+            [styles.active]: active && selected,
+          })}
+        >
+          {safeDecodeURI(label || value)}
+        </a>
+      </Link>
+      {externalUrl && (
+        <a href={externalUrl} target="_blank" rel="noreferrer noopener" className={styles.link}>
+          <Icon icon={<External />} className={styles.icon} />
+        </a>
+      )}
+    </div>
+  );
+}

components/common/FilterLink.module.css

@@ -0,0 +1,32 @@
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.row .inactive {
+  color: var(--gray500);
+}
+
+.row .active {
+  color: var(--gray900);
+  font-weight: 600;
+}
+
+.row .link {
+  display: none;
+  margin-left: 20px;
+}
+
+.row .label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row:hover .link {
+  display: block;
+}
+
+.icon {
+  cursor: pointer;
+}