From bf8c891c414095d68cd41bccf5c527493e812c57 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 23 Aug 2023 21:29:16 -0700
Subject: [PATCH 1/7] Fixed mobile menu being hidden.

---
 src/components/common/MobileMenu.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/common/MobileMenu.js b/src/components/common/MobileMenu.js
index 2228a3e9..de1e9ffa 100644
--- a/src/components/common/MobileMenu.js
+++ b/src/components/common/MobileMenu.js
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
@@ -28,10 +29,11 @@ export function MobileMenu({ items = [], onClose }) {
     </div>
   );
 
-  return (
+  return createPortal(
     <div className={classNames(styles.menu)}>
       <Items items={items} />
-    </div>
+    </div>,
+    document.body,
   );
 }
 

From 7107336b491d3634376dcbd26ae77e4a6825268a Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 24 Aug 2023 16:17:46 -0700
Subject: [PATCH 2/7] Added loading to event data.

---
 src/components/pages/websites/WebsiteEventData.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/websites/WebsiteEventData.js b/src/components/pages/websites/WebsiteEventData.js
index ea8e473b..d38ca1ad 100644
--- a/src/components/pages/websites/WebsiteEventData.js
+++ b/src/components/pages/websites/WebsiteEventData.js
@@ -1,4 +1,4 @@
-import { Flexbox } from 'react-basics';
+import { Flexbox, Loading } from 'react-basics';
 import EventDataTable from 'components/pages/event-data/EventDataTable';
 import EventDataValueTable from 'components/pages/event-data/EventDataValueTable';
 import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetricsBar';
@@ -28,13 +28,14 @@ export default function WebsiteEventData({ websiteId }) {
   const {
     query: { event },
   } = usePageQuery();
-  const { data } = useData(websiteId, event);
+  const { data, isLoading } = useData(websiteId, event);
 
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
       {!event && <EventDataTable data={data} />}
-      {event && <EventDataValueTable event={event} data={data} />}
+      {isLoading && <Loading position="page" />}
+      {event && data && <EventDataValueTable event={event} data={data} />}
     </Flexbox>
   );
 }

From a6c52c210c4377d6337d88555f883b79bdf2ae3a Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Fri, 25 Aug 2023 15:03:49 -0700
Subject: [PATCH 3/7] update tooltip

---
 src/components/pages/websites/WebsiteMetricsBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/websites/WebsiteMetricsBar.js b/src/components/pages/websites/WebsiteMetricsBar.js
index 35605804..75fdab6a 100644
--- a/src/components/pages/websites/WebsiteMetricsBar.js
+++ b/src/components/pages/websites/WebsiteMetricsBar.js
@@ -71,7 +71,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
   const WebsiteFilterButton = () => {
     return (
       <PopupTrigger>
-        <TooltipPopup label={formatMessage(labels.addFilter)} position="top">
+        <TooltipPopup label={formatMessage(labels.filter)} position="top">
           <Button>
             <Icon>
               <Icons.Plus />

From 88458e482cbd5f90e5e820187e6a0798f9386316 Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Fri, 25 Aug 2023 15:04:54 -0700
Subject: [PATCH 4/7] Remove tooltip.

---
 .../pages/websites/WebsiteMetricsBar.js          | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/websites/WebsiteMetricsBar.js b/src/components/pages/websites/WebsiteMetricsBar.js
index 75fdab6a..41ae859f 100644
--- a/src/components/pages/websites/WebsiteMetricsBar.js
+++ b/src/components/pages/websites/WebsiteMetricsBar.js
@@ -7,7 +7,7 @@ import MetricsBar from 'components/metrics/MetricsBar';
 import FilterSelectForm from 'components/pages/reports/FilterSelectForm';
 import PopupForm from 'components/pages/reports/PopupForm';
 import { formatShortTime } from 'lib/format';
-import { Button, Column, Icon, Icons, Popup, PopupTrigger, Row, TooltipPopup } from 'react-basics';
+import { Button, Column, Icon, Icons, Popup, PopupTrigger, Row } from 'react-basics';
 import styles from './WebsiteMetricsBar.module.css';
 
 export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
@@ -71,14 +71,12 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
   const WebsiteFilterButton = () => {
     return (
       <PopupTrigger>
-        <TooltipPopup label={formatMessage(labels.filter)} position="top">
-          <Button>
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-            {formatMessage(labels.filter)}
-          </Button>
-        </TooltipPopup>
+        <Button>
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+          {formatMessage(labels.filter)}
+        </Button>
         <Popup position="bottom" alignment="start" className={styles.popup}>
           {close => {
             return (

From 35f80d9b0055f29a907137d4eebe3a8a6de7d354 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 25 Aug 2023 15:06:47 -0700
Subject: [PATCH 5/7] Fixed scripts.

---
 rollup.components.config.mjs       | 10 ----------
 scripts/download-country-names.js  |  2 +-
 scripts/download-language-names.js |  2 +-
 scripts/format-lang.js             |  4 ++--
 4 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/rollup.components.config.mjs b/rollup.components.config.mjs
index a0b8efbd..c4481d0e 100644
--- a/rollup.components.config.mjs
+++ b/rollup.components.config.mjs
@@ -29,16 +29,6 @@ const aliasConfig = {
   customResolver,
 };
 
-const external = [
-  'react',
-  'react-dom',
-  'react/jsx-runtime',
-  'react-intl',
-  'react-basics',
-  'classnames',
-  'next',
-];
-
 const jsBundle = {
   input: 'src/index.ts',
   output: [
diff --git a/scripts/download-country-names.js b/scripts/download-country-names.js
index f56d91f9..6dbbbbdc 100644
--- a/scripts/download-country-names.js
+++ b/scripts/download-country-names.js
@@ -4,7 +4,7 @@ const path = require('path');
 const https = require('https');
 const chalk = require('chalk');
 
-const src = path.resolve(__dirname, '../lang');
+const src = path.resolve(__dirname, '../src/lang');
 const dest = path.resolve(__dirname, '../public/intl/country');
 const files = fs.readdirSync(src);
 
diff --git a/scripts/download-language-names.js b/scripts/download-language-names.js
index 5cea88cf..5478fb8d 100644
--- a/scripts/download-language-names.js
+++ b/scripts/download-language-names.js
@@ -4,7 +4,7 @@ const path = require('path');
 const https = require('https');
 const chalk = require('chalk');
 
-const src = path.resolve(__dirname, '../lang');
+const src = path.resolve(__dirname, '../src/lang');
 const dest = path.resolve(__dirname, '../public/intl/language');
 const files = fs.readdirSync(src);
 
diff --git a/scripts/format-lang.js b/scripts/format-lang.js
index 941fd672..593e296d 100644
--- a/scripts/format-lang.js
+++ b/scripts/format-lang.js
@@ -3,7 +3,7 @@ const path = require('path');
 const del = require('del');
 const prettier = require('prettier');
 
-const src = path.resolve(__dirname, '../lang');
+const src = path.resolve(__dirname, '../src/lang');
 const dest = path.resolve(__dirname, '../build/messages');
 const files = fs.readdirSync(src);
 
@@ -17,7 +17,7 @@ async function run() {
   await fs.ensureDir(dest);
 
   files.forEach(file => {
-    const lang = require(`../lang/${file}`);
+    const lang = require(`../src/lang/${file}`);
     const keys = Object.keys(lang).sort();
 
     const formatted = keys.reduce((obj, key) => {

From 080eb34d579ccd8ab3cdd15899b22acb5561fb52 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 25 Aug 2023 16:05:02 -0700
Subject: [PATCH 6/7] Update date filter buttons.

---
 package.json                                  |  2 +-
 src/components/input/WebsiteDateFilter.js     | 34 +++++++++----------
 .../input/WebsiteDateFilter.module.css        | 11 ++++++
 src/components/layout/AppLayout.module.css    |  2 +-
 src/components/metrics/FilterTags.js          |  3 +-
 src/components/metrics/FilterTags.module.css  | 12 ++++---
 .../pages/websites/WebsiteDetailsPage.js      |  4 +--
 .../pages/websites/WebsiteMetricsBar.js       |  4 +--
 8 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 1ff1730d..64e09463 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/src/components/input/WebsiteDateFilter.js b/src/components/input/WebsiteDateFilter.js
index 5ab19e60..a8403db6 100644
--- a/src/components/input/WebsiteDateFilter.js
+++ b/src/components/input/WebsiteDateFilter.js
@@ -8,7 +8,6 @@ import styles from './WebsiteDateFilter.module.css';
 export function WebsiteDateFilter({ websiteId }) {
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate, selectedUnit } = dateRange;
-
   const isFutureDate =
     value !== 'all' && isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
 
@@ -21,7 +20,21 @@ export function WebsiteDateFilter({ websiteId }) {
   };
 
   return (
-    <>
+    <Flexbox justifyContent="center" gap={10}>
+      {value !== 'all' && (
+        <Flexbox justifyContent="center" className={styles.buttons}>
+          <Button onClick={() => handleIncrement(1)}>
+            <Icon rotate={90}>
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+          <Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
+            <Icon rotate={270}>
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+        </Flexbox>
+      )}
       <DateFilter
         className={styles.dropdown}
         value={value}
@@ -31,22 +44,7 @@ export function WebsiteDateFilter({ websiteId }) {
         onChange={handleChange}
         showAllTime={true}
       />
-      {value !== 'all' && (
-        <Flexbox justifyContent="center" gap={10} className={styles.container}>
-          <Button onClick={() => handleIncrement(1)}>
-            <Icon rotate={90}>
-              <Icons.ChevronDown />
-            </Icon>
-          </Button>
-
-          <Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
-            <Icon rotate={270}>
-              <Icons.ChevronDown />
-            </Icon>
-          </Button>
-        </Flexbox>
-      )}
-    </>
+    </Flexbox>
   );
 }
 
diff --git a/src/components/input/WebsiteDateFilter.module.css b/src/components/input/WebsiteDateFilter.module.css
index 13234c55..986f5c17 100644
--- a/src/components/input/WebsiteDateFilter.module.css
+++ b/src/components/input/WebsiteDateFilter.module.css
@@ -1,3 +1,14 @@
 .dropdown {
   min-width: 200px;
 }
+
+.buttons button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.buttons button:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid var(--base400) !important;
+}
diff --git a/src/components/layout/AppLayout.module.css b/src/components/layout/AppLayout.module.css
index be51f83c..bcce963f 100644
--- a/src/components/layout/AppLayout.module.css
+++ b/src/components/layout/AppLayout.module.css
@@ -10,7 +10,7 @@
   width: 100vw;
   grid-column: 1;
   grid-row: 1 / 2;
-  z-index: 1;
+  z-index: var(--z-index-popup);
 }
 
 .body {
diff --git a/src/components/metrics/FilterTags.js b/src/components/metrics/FilterTags.js
index 30857a6b..cb88a7db 100644
--- a/src/components/metrics/FilterTags.js
+++ b/src/components/metrics/FilterTags.js
@@ -1,8 +1,8 @@
 import { safeDecodeURI } from 'next-basics';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import usePageQuery from 'components/hooks/usePageQuery';
-import styles from './FilterTags.module.css';
 import useMessages from 'components/hooks/useMessages';
+import styles from './FilterTags.module.css';
 
 export function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
@@ -26,6 +26,7 @@ export function FilterTags({ params }) {
 
   return (
     <div className={styles.filters}>
+      <div className={styles.label}>{formatMessage(labels.filters)}</div>
       {Object.keys(params).map(key => {
         if (!params[key]) {
           return null;
diff --git a/src/components/metrics/FilterTags.module.css b/src/components/metrics/FilterTags.module.css
index 1c8458ac..c228dc4e 100644
--- a/src/components/metrics/FilterTags.module.css
+++ b/src/components/metrics/FilterTags.module.css
@@ -4,19 +4,23 @@
   gap: 10px;
 }
 
+.label {
+  font-weight: 700;
+}
+
 .tag {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   font-size: var(--font-size-sm);
-  border: 1px solid var(--base600);
+  border: 1px solid var(--blue400);
   border-radius: var(--border-radius);
-  line-height: 30px;
-  padding: 0 8px;
+  padding: 8px 16px;
   cursor: pointer;
+  background: var(--blue100);
 }
 
 .tag:hover {
-  background: var(--base75);
+  background: var(--blue200);
 }
diff --git a/src/components/pages/websites/WebsiteDetailsPage.js b/src/components/pages/websites/WebsiteDetailsPage.js
index c5ac4775..222d94d9 100644
--- a/src/components/pages/websites/WebsiteDetailsPage.js
+++ b/src/components/pages/websites/WebsiteDetailsPage.js
@@ -22,12 +22,12 @@ export default function WebsiteDetailsPage({ websiteId }) {
   return (
     <Page loading={isLoading} error={error}>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
-      <WebsiteChart websiteId={websiteId} />
       <FilterTags
         websiteId={websiteId}
         params={{ url, referrer, os, browser, device, country, region, city, title }}
       />
+      <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
+      <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {website && (
         <>
diff --git a/src/components/pages/websites/WebsiteMetricsBar.js b/src/components/pages/websites/WebsiteMetricsBar.js
index 41ae859f..0d1a20f0 100644
--- a/src/components/pages/websites/WebsiteMetricsBar.js
+++ b/src/components/pages/websites/WebsiteMetricsBar.js
@@ -10,7 +10,7 @@ import { formatShortTime } from 'lib/format';
 import { Button, Column, Icon, Icons, Popup, PopupTrigger, Row } from 'react-basics';
 import styles from './WebsiteMetricsBar.module.css';
 
-export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
+export function WebsiteMetricsBar({ websiteId, showFilter = true, showRefresh = true, sticky }) {
   const { formatMessage, labels } = useMessages();
 
   const { get, useQuery } = useApi();
@@ -161,8 +161,8 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
       <Column defaultSize={12} xl={4}>
         <div className={styles.actions}>
           {showFilter && <WebsiteFilterButton />}
+          {showRefresh && <RefreshButton websiteId={websiteId} />}
           <WebsiteDateFilter websiteId={websiteId} />
-          <RefreshButton websiteId={websiteId} />
         </div>
       </Column>
     </Row>

From cf1dd422fee79c08711be6c05030f3f36093012d Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Fri, 25 Aug 2023 16:23:10 -0700
Subject: [PATCH 7/7] Disable filter on custom range.

---
 src/components/input/WebsiteDateFilter.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/input/WebsiteDateFilter.js b/src/components/input/WebsiteDateFilter.js
index a8403db6..6903a708 100644
--- a/src/components/input/WebsiteDateFilter.js
+++ b/src/components/input/WebsiteDateFilter.js
@@ -9,7 +9,9 @@ export function WebsiteDateFilter({ websiteId }) {
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate, selectedUnit } = dateRange;
   const isFutureDate =
-    value !== 'all' && isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
+    value !== 'all' &&
+    selectedUnit &&
+    isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
 
   const handleChange = value => {
     setDateRange(value);
@@ -21,7 +23,7 @@ export function WebsiteDateFilter({ websiteId }) {
 
   return (
     <Flexbox justifyContent="center" gap={10}>
-      {value !== 'all' && (
+      {value !== 'all' && selectedUnit && (
         <Flexbox justifyContent="center" className={styles.buttons}>
           <Button onClick={() => handleIncrement(1)}>
             <Icon rotate={90}>