Fixed metrics display.

components/common/FilterLink.js

@@ -1,27 +1,32 @@
+import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
 import usePageQuery from 'hooks/usePageQuery';
-import { Icon, Icons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
 export default function FilterLink({ id, value, label, externalUrl }) {
+  const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
   const selected = query[id] === value;
 
   return (
     <div className={styles.row}>
-      <Link
-        href={resolveUrl({ [id]: value })}
-        className={classNames(styles.label, {
-          [styles.inactive]: active && !selected,
-          [styles.active]: active && selected,
-        })}
-        replace
-      >
-        {safeDecodeURI(label || value)}
-      </Link>
+      {!value && <span className={styles.empty}>{label || formatMessage(labels.unknown)}</span>}
+      {value && (
+        <Link
+          href={resolveUrl({ [id]: value })}
+          className={classNames(styles.label, {
+            [styles.inactive]: active && !selected,
+            [styles.active]: active && selected,
+          })}
+          replace
+        >
+          {safeDecodeURI(label || value)}
+        </Link>
+      )}
       {externalUrl && (
         <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
           <Icon className={styles.icon}>

components/common/FilterLink.module.css

@@ -30,3 +30,7 @@
 .icon {
   cursor: pointer;
 }
+
+.empty {
+  color: var(--base400);
+}

components/common/Tag.module.css

@@ -1,6 +1,7 @@
 .tag {
-  padding: 2px 4px;
-  border: 1px solid var(--base300);
+  padding: 4px 6px;
   border-radius: 4px;
   margin-right: 10px;
+  color: var(--primary400);
+  background: var(--blue100);
 }