Filter tag enhancements.

src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx

@@ -13,20 +13,19 @@ import WebsiteTableView from './WebsiteTableView';
 export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   const { data: website, isLoading, error } = useWebsite(websiteId);
   const pathname = usePathname();
-  const showLinks = !pathname.includes('/share/');
-
-  const {
-    query: { view, url, referrer, os, browser, device, country, region, city, title },
-  } = useNavigation();
+  const { query } = useNavigation();
 
   if (isLoading || error) {
     return <Page isLoading={isLoading} error={error} />;
   }
 
+  const showLinks = !pathname.includes('/share/');
+  const { view, ...params } = query;
+
   return (
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <FilterTags params={{ url, referrer, os, browser, device, country, region, city, title }} />
+      <FilterTags websiteId={websiteId} params={params} />
       <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.module.css

@@ -0,0 +1,3 @@
+.button {
+  font-weight: 700;
+}

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

@@ -1,8 +1,10 @@
+import classNames from 'classnames';
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
 import { useFields, useMessages, useNavigation } from 'components/hooks';
-import { OPERATORS } from 'lib/constants';
+import { OPERATOR_PREFIXES } from 'lib/constants';
+import styles from './WebsiteFilterButton.module.css';
 
 export function WebsiteFilterButton({
   websiteId,
@@ -16,22 +18,14 @@ export function WebsiteFilterButton({
   const { fields } = useFields();
 
   const handleAddFilter = ({ name, operator, value }) => {
-    let prefix = '';
-
-    if (operator === OPERATORS.notEquals) {
-      prefix = '!';
-    } else if (operator === OPERATORS.contains) {
-      prefix = '~';
-    } else if (operator === OPERATORS.doesNotContain) {
-      prefix = '!~';
-    }
+    const prefix = OPERATOR_PREFIXES[operator];
 
     router.push(renderUrl({ [name]: prefix + value }));
   };
 
   return (
     <PopupTrigger>
-      <Button className={className}>
+      <Button className={classNames(className, styles.button)} variant="quiet">
         <Icon>
           <Icons.Plus />
         </Icon>