Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/app/(main)/App.tsx

src/app/(main)/NavBar.js

@@ -14,6 +14,7 @@ import styles from './NavBar.module.css';
 export function NavBar() {
   const pathname = usePathname();
   const { formatMessage, labels } = useMessages();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const links = [
     { label: formatMessage(labels.dashboard), url: '/dashboard' },
@@ -22,6 +23,40 @@ export function NavBar() {
     { label: formatMessage(labels.settings), url: '/settings' },
   ].filter(n => n);
 
+  const menuItems = [
+    {
+      label: formatMessage(labels.dashboard),
+      url: '/dashboard',
+    },
+    !cloudMode && {
+      label: formatMessage(labels.settings),
+      url: '/settings',
+      children: [
+        {
+          label: formatMessage(labels.websites),
+          url: '/settings/websites',
+        },
+        {
+          label: formatMessage(labels.teams),
+          url: '/settings/teams',
+        },
+        {
+          label: formatMessage(labels.users),
+          url: '/settings/users',
+        },
+        {
+          label: formatMessage(labels.profile),
+          url: '/settings/profile',
+        },
+      ],
+    },
+    cloudMode && {
+      label: formatMessage(labels.profile),
+      url: '/settings/profile',
+    },
+    !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
+  ].filter(n => n);
+
   return (
     <div className={styles.navbar}>
       <div className={styles.logo}>
@@ -49,7 +84,7 @@ export function NavBar() {
         <ProfileButton />
       </div>
       <div className={styles.mobile}>
-        <HamburgerButton />
+        <HamburgerButton menuItems={menuItems} />
       </div>
     </div>
   );

src/app/(main)/UpdateNotice.js

@@ -0,0 +1,65 @@
+'use client';
+import { useEffect, useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from 'react-basics';
+import { setItem } from 'next-basics';
+import useStore, { checkVersion } from 'store/version';
+import { REPO_URL, VERSION_CHECK } from 'lib/constants';
+import styles from './UpdateNotice.module.css';
+import useMessages from 'components/hooks/useMessages';
+import { usePathname } from 'next/navigation';
+
+export function UpdateNotice({ user, config }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { latest, checked, hasUpdate, releaseUrl } = useStore();
+  const pathname = usePathname();
+  const [dismissed, setDismissed] = useState(checked);
+  const allowUpdate =
+    user?.isAdmin &&
+    !config?.updatesDisabled &&
+    !config?.cloudMode &&
+    !pathname.includes('/share/') &&
+    !dismissed;
+
+  const updateCheck = useCallback(() => {
+    setItem(VERSION_CHECK, { version: latest, time: Date.now() });
+  }, [latest]);
+
+  function handleViewClick() {
+    updateCheck();
+    setDismissed(true);
+    open(releaseUrl || REPO_URL, '_blank');
+  }
+
+  function handleDismissClick() {
+    updateCheck();
+    setDismissed(true);
+  }
+
+  useEffect(() => {
+    if (allowUpdate) {
+      checkVersion();
+    }
+  }, [allowUpdate]);
+
+  if (!allowUpdate || !hasUpdate) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={styles.notice}>
+      <div className={styles.message}>
+        {formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
+      </div>
+      <div className={styles.buttons}>
+        <Button variant="primary" onClick={handleViewClick}>
+          {formatMessage(labels.viewDetails)}
+        </Button>
+        <Button onClick={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default UpdateNotice;

src/app/(main)/UpdateNotice.module.css

@@ -0,0 +1,35 @@
+.notice {
+  position: absolute;
+  max-width: 800px;
+  gap: 20px;
+  margin: 80px auto;
+  align-self: center;
+  background: var(--base50);
+  padding: 20px;
+  border: 1px solid var(--base300);
+  border-radius: var(--border-radius);
+  z-index: var(--z-index-popup);
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--font-color100);
+  font-weight: 700;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
+  flex: 0;
+}
+
+@media only screen and (max-width: 992px) {
+  .message {
+    height: 80px;
+  }
+}

src/app/(main)/websites/[id]/WebsiteTableView.js

@@ -5,7 +5,7 @@ import ReferrersTable from 'components/metrics/ReferrersTable';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import OSTable from 'components/metrics/OSTable';
 import DevicesTable from 'components/metrics/DevicesTable';
-import WorldMap from 'components/common/WorldMap';
+import WorldMap from 'components/metrics/WorldMap';
 import CountriesTable from 'components/metrics/CountriesTable';
 import EventsTable from 'components/metrics/EventsTable';
 import EventsChart from 'components/metrics/EventsChart';

src/app/(main)/websites/[id]/realtime/Realtime.js

@@ -5,7 +5,7 @@ import firstBy from 'thenby';
 import { Grid, GridRow } from 'components/layout/Grid';
 import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
-import WorldMap from 'components/common/WorldMap';
+import WorldMap from 'components/metrics/WorldMap';
 import RealtimeLog from './RealtimeLog';
 import RealtimeHeader from './RealtimeHeader';
 import RealtimeUrls from './RealtimeUrls';