Zen components conversion.

next.config.js

@@ -200,24 +200,6 @@ const config = {
   typescript: {
     ignoreBuildErrors: true,
   },
-  experimental: {
-    turbo: {
-      rules: {
-        '*.svg': {
-          loaders: ['@svgr/webpack'],
-          as: '*.js',
-        },
-      },
-    },
-  },
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.(js|ts)x?$/,
-      use: ['@svgr/webpack'],
-    });
-    return config;
-  },
   async headers() {
     return headers;
   },

package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/umami-software/umami.git"
   },
   "scripts": {
-    "dev": "next dev -p 3000 --turbo",
+    "dev": "next dev -p 3000",
     "build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app",
     "start": "next start",
     "build-docker": "npm-run-all build-db build-tracker build-geo build-app",
@@ -71,12 +71,13 @@
     "@dicebear/core": "^9.2.2",
     "@fontsource/inter": "^4.5.15",
     "@hello-pangea/dnd": "^17.0.0",
-    "@prisma/client": "6.1.0",
+    "@internationalized/date": "^3.7.0",
+    "@prisma/client": "6.4.1",
     "@prisma/extension-read-replicas": "^0.4.0",
     "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^5.66.11",
     "@umami/prisma-client": "^0.14.0",
-    "@umami/react-zen": "^0.62.0",
+    "@umami/react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen",
     "@umami/redis-client": "^0.26.0",
     "bcryptjs": "^2.4.3",
     "chalk": "^4.1.2",
@@ -105,10 +106,10 @@
     "lucide-react": "^0.475.0",
     "maxmind": "^4.3.24",
     "md5": "^2.3.0",
-    "next": "15.2.0",
+    "next": "15.2.1",
     "node-fetch": "^3.3.2",
     "npm-run-all": "^4.1.5",
-    "prisma": "6.1.0",
+    "prisma": "6.4.1",
     "pure-rand": "^6.1.0",
     "react": "^19.0.0",
     "react-aria-components": "^1.6.0",
@@ -119,7 +120,6 @@
     "react-simple-maps": "^2.3.0",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen",
     "request-ip": "^3.3.0",
     "semver": "^7.7.1",
     "serialize-error": "^12.0.0",
@@ -196,7 +196,7 @@
       "sharp"
     ],
     "overrides": {
-      "react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen"
+      "@umami/react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen"
     }
   }
 }

src/app/(main)/App.tsx

@@ -6,7 +6,7 @@ import { UpdateNotice } from './UpdateNotice';
 import { NavBar } from '@/app/(main)/NavBar';
 import { Page } from '@/components/layout/Page';
 import { useLogin, useConfig } from '@/components/hooks';
-import { SideNav } from '@/app/(main)/SideNav';
+import { Nav } from '@/app/(main)/Nav';
 
 export function App({ children }) {
   const { user, isLoading, error } = useLogin();
@@ -30,8 +30,8 @@ export function App({ children }) {
   }
 
   return (
-    <Grid>
-      <SideNav />
+    <Grid height="100vh" width="100%" columns="auto 1fr">
+      <Nav />
       <Grid rows="auto 1fr">
         <NavBar />
         <Page>

src/app/(main)/SideNav.tsx → src/app/(main)/Nav.tsx

@@ -1,11 +1,21 @@
+import { useState } from 'react';
 import Link from 'next/link';
-import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
+import {
+  SideNav,
+  SideNavHeader,
+  SideNavSection,
+  SideNavItem,
+  Button,
+  Icon,
+  Row,
+} from '@umami/react-zen';
 import { Lucide, Icons } from '@/components/icons';
 import { useMessages, useTeamUrl } from '@/components/hooks';
 
-export function SideNav() {
+export function Nav() {
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
+  const [isCollapsed, setCollapsed] = useState(false);
 
   const links = [
     {
@@ -36,7 +46,7 @@ export function SideNav() {
   ].filter(n => n);
 
   return (
-    <Nav>
+    <SideNav isCollapsed={isCollapsed}>
       <SideNavSection>
         <SideNavHeader name="umami" icon={<Icons.Logo />} />
       </SideNavSection>
@@ -49,6 +59,15 @@ export function SideNav() {
           );
         })}
       </SideNavSection>
-    </Nav>
+      <SideNavSection>
+        <Row justifyContent="flex-start">
+          <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
+            <Icon>
+              <Lucide.PanelLeft />
+            </Icon>
+          </Button>
+        </Row>
+      </SideNavSection>
+    </SideNav>
   );
 }

src/app/(main)/console/TestConsole.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'react-basics';
+import { Button } from '@umami/react-zen';
 import Link from 'next/link';
 import Script from 'next/script';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';

src/app/(main)/dashboard/DashboardEdit.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import classNames from 'classnames';
-import { Button, Loading, Toggle, SearchField } from 'react-basics';
+import { Button, Loading, Toggle, SearchField } from '@umami/react-zen';
 import { firstBy } from 'thenby';
 import { useDashboard, saveDashboard } from '@/store/dashboard';
 import { useMessages, useWebsites } from '@/components/hooks';

src/app/(main)/dashboard/DashboardPage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Icon, Icons, Loading, Text } from 'react-basics';
+import { Icon, Icons, Loading, Text } from '@umami/react-zen';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { Pager } from '@/components/common/Pager';
 import { WebsiteChartList } from '../websites/[websiteId]/WebsiteChartList';

src/app/(main)/dashboard/DashboardSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
+import { Row, TooltipTrigger, Tooltip, Icon, Text, Button } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { saveDashboard } from '@/store/dashboard';
 import { useMessages } from '@/components/hooks';
@@ -15,20 +15,21 @@ export function DashboardSettingsButton() {
   };
 
   return (
-    <Flexbox gap={10}>
-      <TooltipPopup label={formatMessage(labels.toggleCharts)} position="bottom">
-        <Button onClick={handleToggleCharts}>
+    <Row gap="3">
+      <TooltipTrigger>
+        <Button onPress={handleToggleCharts}>
           <Icon>
             <Icons.BarChart />
           </Icon>
         </Button>
-      </TooltipPopup>
-      <Button onClick={handleEdit}>
+        <Tooltip placement="bottom">{formatMessage(labels.toggleCharts)}</Tooltip>
+      </TooltipTrigger>
+      <Button onPress={handleEdit}>
         <Icon>
           <Icons.Edit />
         </Icon>
         <Text>{formatMessage(labels.edit)}</Text>
       </Button>
-    </Flexbox>
+    </Row>
   );
 }

src/app/(main)/profile/DateRangeSetting.tsx

@@ -1,5 +1,5 @@
 import { DateFilter } from '@/components/input/DateFilter';
-import { Button, Flexbox } from 'react-basics';
+import { Button, Flexbox } from '@umami/react-zen';
 import { useDateRange, useMessages } from '@/components/hooks';
 import { DEFAULT_DATE_RANGE } from '@/lib/constants';
 import { DateRange } from '@/lib/types';

src/app/(main)/profile/LanguageSetting.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Dropdown, Item, Flexbox } from 'react-basics';
+import { Button, Dropdown, Item, Flexbox } from '@umami/react-zen';
 import { useLocale, useMessages } from '@/components/hooks';
 import { DEFAULT_LOCALE } from '@/lib/constants';
 import { languages } from '@/lib/lang';

src/app/(main)/profile/PasswordChangeButton.tsx

@@ -1,29 +1,29 @@
-import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
+import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
 import { PasswordEditForm } from '@/app/(main)/profile/PasswordEditForm';
 import { Icons } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function PasswordChangeButton() {
   const { formatMessage, labels, messages } = useMessages();
-  const { showToast } = useToasts();
+  const { toast } = useToast();
 
   const handleSave = () => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    toast(formatMessage(messages.saved));
   };
 
   return (
-    <>
-      <ModalTrigger>
-        <Button>
-          <Icon>
-            <Icons.Lock />
-          </Icon>
-          <Text>{formatMessage(labels.changePassword)}</Text>
-        </Button>
-        <Modal title={formatMessage(labels.changePassword)}>
-          {close => <PasswordEditForm onSave={handleSave} onClose={close} />}
-        </Modal>
-      </ModalTrigger>
-    </>
+    <DialogTrigger>
+      <Button>
+        <Icon>
+          <Icons.Lock />
+        </Icon>
+        <Text>{formatMessage(labels.changePassword)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.changePassword)}>
+          {({ close }) => <PasswordEditForm onSave={handleSave} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
   );
 }

src/app/(main)/profile/PasswordEditForm.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from '@umami/react-zen';
 import { useApi, useMessages } from '@/components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {

src/app/(main)/profile/ProfileSettings.tsx

@@ -1,4 +1,4 @@
-import { Form, FormRow } from 'react-basics';
+import { Form, FormRow } from '@umami/react-zen';
 import { TimezoneSetting } from '@/app/(main)/profile/TimezoneSetting';
 import { DateRangeSetting } from '@/app/(main)/profile/DateRangeSetting';
 import { LanguageSetting } from '@/app/(main)/profile/LanguageSetting';

src/app/(main)/profile/ThemeSetting.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Button, Icon } from 'react-basics';
+import { Button, Icon } from '@umami/react-zen';
 import { useTheme } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import styles from './ThemeSetting.module.css';