diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx index 4398009e..4a4985fd 100644 --- a/src/app/(main)/SideNav.tsx +++ b/src/app/(main)/SideNav.tsx @@ -9,7 +9,8 @@ import { SidebarProps, ThemeButton, } from '@umami/react-zen'; -import { Globe, LinkIcon, LogoSvg, Grid2x2, PanelLeft } from '@/components/icons'; +import { Globe, LinkIcon, Grid2x2, PanelLeft } from '@/components/icons'; +import { Logo } from '@/components/svg'; import { useMessages, useNavigation, useGlobalState } from '@/components/hooks'; import { NavButton } from '@/components/input/NavButton'; import { PanelButton } from '@/components/input/PanelButton'; @@ -53,7 +54,7 @@ export function SideNav(props: SidebarProps) { setIsCollapsed(false)}> : } + icon={isCollapsed && !hasNav ? : } style={{ maxHeight: 40 }} > {!isCollapsed && !hasNav && } diff --git a/src/app/(main)/settings/layout.tsx b/src/app/(main)/settings/layout.tsx index fcc7392a..c934d596 100644 --- a/src/app/(main)/settings/layout.tsx +++ b/src/app/(main)/settings/layout.tsx @@ -3,7 +3,7 @@ import { SettingsLayout } from './SettingsLayout'; export default function ({ children }) { if (process.env.cloudMode) { - return null; + //return null; } return {children}; diff --git a/src/app/(main)/teams/[teamId]/TeamEditForm.tsx b/src/app/(main)/teams/[teamId]/TeamEditForm.tsx index debea5d4..eb05d362 100644 --- a/src/app/(main)/teams/[teamId]/TeamEditForm.tsx +++ b/src/app/(main)/teams/[teamId]/TeamEditForm.tsx @@ -5,9 +5,12 @@ import { FormSubmitButton, TextField, Button, + IconLabel, + Row, } from '@umami/react-zen'; import { getRandomChars } from '@/lib/generate'; import { useMessages, useTeam, useUpdateQuery } from '@/components/hooks'; +import { RefreshCw } from '@/components/icons'; const generateId = () => `team_${getRandomChars(16)}`; @@ -54,15 +57,25 @@ export function TeamEditForm({ {showAccessCode && ( - - - + + + + + {allowEdit && ( + + )} + )} {allowEdit && ( - - + {formatMessage(labels.save)} diff --git a/src/app/(main)/teams/[teamId]/TeamSettings.tsx b/src/app/(main)/teams/[teamId]/TeamSettings.tsx index 9649c4f7..7ddd3b2f 100644 --- a/src/app/(main)/teams/[teamId]/TeamSettings.tsx +++ b/src/app/(main)/teams/[teamId]/TeamSettings.tsx @@ -1,8 +1,7 @@ -import Link from 'next/link'; -import { Column, Icon, Text, Row } from '@umami/react-zen'; -import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks'; +import { Column } from '@umami/react-zen'; +import { useLoginQuery, useNavigation, useTeam } from '@/components/hooks'; import { ROLES } from '@/lib/constants'; -import { Users, ArrowRight } from '@/components/icons'; +import { Users } from '@/components/icons'; import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton'; import { TeamManage } from './TeamManage'; import { TeamEditForm } from './TeamEditForm'; @@ -13,7 +12,6 @@ import { Panel } from '@/components/common/Panel'; export function TeamSettings({ teamId }: { teamId: string }) { const team: any = useTeam(); const { user } = useLoginQuery(); - const { formatMessage, labels } = useMessages(); const { pathname } = useNavigation(); const isAdmin = pathname.includes('/admin'); @@ -31,32 +29,21 @@ export function TeamSettings({ teamId }: { teamId: string }) { user.role !== ROLES.viewOnly); return ( - <> - - - - - - {formatMessage(labels.teams)} - - - - - }> - {!isTeamOwner && !isAdmin && } - + + }> + {!isTeamOwner && !isAdmin && } + + + + + + + + {isTeamOwner && ( - + - - - - {isTeamOwner && ( - - - - )} - - + )} + ); } diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx index 7237dc9c..cbd9b894 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx @@ -1,7 +1,8 @@ import { Grid, Column, Row, Text, Icon, ProgressBar, Dialog, Box } from '@umami/react-zen'; import { useMessages, useResultQuery } from '@/components/hooks'; import { LoadingPanel } from '@/components/common/LoadingPanel'; -import { File, LightningSvg, User } from '@/components/icons'; +import { File, User } from '@/components/icons'; +import { Lightning } from '@/components/svg'; import { formatLongNumber } from '@/lib/format'; import { ReportEditButton } from '@/components/input/ReportEditButton'; import { FunnelEditForm } from './FunnelEditForm'; @@ -92,7 +93,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) { - {type === 'path' ? : } + {type === 'path' ? : } {value} diff --git a/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx b/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx index d930a9b7..9ef5840c 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx @@ -1,7 +1,7 @@ import { Grid, Row, Column, Text, Icon, ProgressBar, Dialog } from '@umami/react-zen'; import { ReportEditButton } from '@/components/input/ReportEditButton'; import { useMessages, useResultQuery } from '@/components/hooks'; -import { File, LightningSvg, User } from '@/components/icons'; +import { File, Lightning, User } from '@/components/icons'; import { LoadingPanel } from '@/components/common/LoadingPanel'; import { formatLongNumber } from '@/lib/format'; import { GoalEditForm } from './GoalEditForm'; @@ -68,7 +68,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate - {parameters.type === 'path' ? : } + {parameters.type === 'path' ? : } {parameters.value} diff --git a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx index 581d69ab..965e7a31 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx @@ -3,7 +3,7 @@ import { TooltipTrigger, Tooltip, Focusable, Icon, Text, Row, Column } from '@um import { firstBy } from 'thenby'; import classNames from 'classnames'; import { useEscapeKey, useMessages, useResultQuery } from '@/components/hooks'; -import { File, LightningSvg } from '@/components/icons'; +import { File, Lightning } from '@/components/icons'; import { objectToArray } from '@/lib/data'; import { formatLongNumber } from '@/lib/format'; import { LoadingPanel } from '@/components/common/LoadingPanel'; @@ -215,7 +215,7 @@ export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps) onClick={() => handleClick(name, columnIndex, paths)} > - {name.startsWith('/') ? : } + {name.startsWith('/') ? : } {name}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx index 115b5d26..9fac4c8e 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx @@ -19,10 +19,10 @@ import { Languages, Monitor, Cpu, - LightningSvg, Network, Tag, } from '@/components/icons'; +import { Lightning } from '@/components/svg'; export function WebsiteExpandedView({ websiteId, @@ -161,7 +161,7 @@ export function WebsiteExpandedView({ id: 'event', label: formatMessage(labels.event), path: updateParams({ view: 'event' }), - icon: , + icon: , }, { id: 'hostname', diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx index 0aa57a2c..4a2ffdf0 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx @@ -46,7 +46,7 @@ const ShareButton = ({ websiteId, shareId }) => { Share - + {({ close }) => { return ; }} diff --git a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx index 98e7582d..2ec171b4 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx @@ -1,20 +1,5 @@ -import { - Eye, - LightningSvg, - User, - Clock, - Sheet, - TargetSvg, - FunnelSvg, - PathSvg, - MagnetSvg, - Tag, - MoneySvg, - NetworkSvg, - ChartPie, - UserPlus, - CompareSvg, -} from '@/components/icons'; +import { Eye, User, Clock, Sheet, Tag, ChartPie, UserPlus } from '@/components/icons'; +import { Lightning, Path, Money, Compare, Target, Funnel, Magnet, Network } from '@/components/svg'; import { useMessages, useNavigation } from '@/components/hooks'; import { SideMenu } from '@/components/common/SideMenu'; import { WebsiteSelect } from '@/components/input/WebsiteSelect'; @@ -44,7 +29,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) { { id: 'events', label: formatMessage(labels.events), - icon: , + icon: , path: renderPath('/events'), }, { @@ -62,7 +47,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) { { id: 'compare', label: formatMessage(labels.compare), - icon: , + icon: , path: renderPath('/compare'), }, { @@ -79,25 +64,25 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) { { id: 'goals', label: formatMessage(labels.goals), - icon: , + icon: , path: renderPath('/goals'), }, { id: 'funnel', label: formatMessage(labels.funnels), - icon: , + icon: , path: renderPath('/funnels'), }, { id: 'journeys', label: formatMessage(labels.journeys), - icon: , + icon: , path: renderPath('/journeys'), }, { id: 'retention', label: formatMessage(labels.retention), - icon: , + icon: , path: renderPath('/retention'), }, ], @@ -131,13 +116,13 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) { { id: 'revenue', label: formatMessage(labels.revenue), - icon: , + icon: , path: renderPath('/revenue'), }, { id: 'attribution', label: formatMessage(labels.attribution), - icon: , + icon: , path: renderPath('/attribution'), }, ], diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx index 7150f43f..31044982 100644 --- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx +++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx @@ -3,7 +3,8 @@ import { useFormat, useMessages, useNavigation } from '@/components/hooks'; import { Empty } from '@/components/common/Empty'; import { Avatar } from '@/components/common/Avatar'; import Link from 'next/link'; -import { LightningSvg, Eye } from '@/components/icons'; +import { Eye } from '@/components/icons'; +import { Lightning } from '@/components/svg'; import { DateDistance } from '@/components/common/DateDistance'; import { TypeIcon } from '@/components/common/TypeIcon'; @@ -25,7 +26,7 @@ export function EventsTable({ data = [] }) { - {row.eventName ? : } + {row.eventName ? : } {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)} diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx index e994831d..07690ff1 100644 --- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx +++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx @@ -8,7 +8,7 @@ import { useTimezone, useWebsite, } from '@/components/hooks'; -import { Eye, User, LightningSvg } from '@/components/icons'; +import { Eye, User, Lightning } from '@/components/icons'; import { BROWSERS, OS_NAMES } from '@/lib/constants'; import { stringToColor } from '@/lib/format'; import { useMemo, useState } from 'react'; @@ -24,7 +24,7 @@ const TYPE_EVENT = 'event'; const icons = { [TYPE_PAGEVIEW]: , [TYPE_SESSION]: , - [TYPE_EVENT]: , + [TYPE_EVENT]: , }; export function RealtimeLog({ data }: { data: any }) { diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx index 4ef120f7..7cc931e9 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx @@ -12,7 +12,7 @@ import { Dialog, } from '@umami/react-zen'; import { LoadingPanel } from '@/components/common/LoadingPanel'; -import { LightningSvg, Eye, FileText } from '@/components/icons'; +import { Lightning, Eye, FileText } from '@/components/icons'; import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks'; import { EventData } from '@/components/metrics/EventData'; @@ -52,7 +52,7 @@ export function SessionActivity({ {formatTimezoneDate(createdAt, 'pp')} - {eventName ? : } + {eventName ? : } {eventName ? formatMessage(labels.triggeredEvent) diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx index 2ec515f9..4ebb462c 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx @@ -2,7 +2,8 @@ import { ReactNode } from 'react'; import { Icon, TextField, Column, Row, Label, Text } from '@umami/react-zen'; import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks'; import { TypeIcon } from '@/components/common/TypeIcon'; -import { LocationSvg, KeyRound, Calendar } from '@/components/icons'; +import { KeyRound, Calendar } from '@/components/icons'; +import { Location } from '@/components/svg'; import { DateDistance } from '@/components/common/DateDistance'; export function SessionInfo({ data }) { @@ -36,11 +37,11 @@ export function SessionInfo({ data }) { {formatValue(data?.country, 'country')} - }> + }> {getRegionName(data?.region)} - }> + }> {data?.city} diff --git a/src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx b/src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx index dc2fe689..f89d25fd 100644 --- a/src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx +++ b/src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx @@ -8,10 +8,12 @@ import { Column, Label, Row, + IconLabel, } from '@umami/react-zen'; import { useState } from 'react'; import { getRandomChars } from '@/lib/generate'; -import { useMessages, useUpdateQuery } from '@/components/hooks'; +import { useMessages, useUpdateQuery, useConfig } from '@/components/hooks'; +import { RefreshCcw } from 'lucide-react'; const generateId = () => getRandomChars(16); @@ -24,22 +26,31 @@ export interface WebsiteShareFormProps { export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: WebsiteShareFormProps) { const { formatMessage, labels, messages, getErrorMessage } = useMessages(); - const [id, setId] = useState(shareId); + const [currentId, setCurrentId] = useState(shareId); const { mutateAsync, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`); + const { cloudMode } = useConfig(); - const url = `${window?.location.origin || ''}${process.env.basePath || ''}/share/${id}`; + const getUrl = (shareId: string) => { + if (cloudMode) { + return `${process.env.cloudUrl}/share/${shareId}`; + } + + return `${window?.location.origin}${process.env.basePath || ''}/share/${shareId}`; + }; + + const url = getUrl(currentId); const handleGenerate = () => { - setId(generateId()); + setCurrentId(generateId()); }; const handleSwitch = () => { - setId(id ? null : generateId()); + setCurrentId(currentId ? null : generateId()); }; const handleSave = async () => { const data = { - shareId: id, + shareId: currentId, }; await mutateAsync(data, { onSuccess: async () => { @@ -54,19 +65,23 @@ export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: Websit return (
- + {formatMessage(labels.enableShareUrl)} - {id && ( - - - - - )} - - - {id && } + {currentId && ( + + + + + + + + + )} + {onClose && } {formatMessage(labels.save)} diff --git a/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx b/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx index 7e1a10bc..bdc49c75 100644 --- a/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx +++ b/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx @@ -16,11 +16,17 @@ export function WebsiteTrackingCode({ const trackerScriptName = config?.trackerScriptName?.split(',')?.map((n: string) => n.trim())?.[0] || SCRIPT_NAME; - const url = trackerScriptName?.startsWith('http') - ? trackerScriptName - : `${hostUrl || window?.location.origin || ''}${ - process.env.basePath || '' - }/${trackerScriptName}`; + const getUrl = () => { + if (config?.cloudMode) { + return `${process.env.cloudUrl}/${trackerScriptName}`; + } + + return `${hostUrl || window?.location?.origin || ''}${ + process.env.basePath || '' + }/${trackerScriptName}`; + }; + + const url = trackerScriptName?.startsWith('http') ? trackerScriptName : getUrl(); const code = ``; diff --git a/src/app/login/LoginForm.tsx b/src/app/login/LoginForm.tsx index 90ac981a..33a2ca71 100644 --- a/src/app/login/LoginForm.tsx +++ b/src/app/login/LoginForm.tsx @@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation'; import { useMessages, useUpdateQuery } from '@/components/hooks'; import { setUser } from '@/store/app'; import { setClientAuthToken } from '@/lib/client'; -import { LogoSvg } from '@/components/icons'; +import { Logo } from '@/components/svg'; export function LoginForm() { const { formatMessage, labels, getErrorMessage } = useMessages(); @@ -34,7 +34,7 @@ export function LoginForm() { return ( - + umami diff --git a/src/app/share/[...shareId]/Header.tsx b/src/app/share/[...shareId]/Header.tsx index d01adb38..ef4fe5ea 100644 --- a/src/app/share/[...shareId]/Header.tsx +++ b/src/app/share/[...shareId]/Header.tsx @@ -1,7 +1,7 @@ import { Row, Icon, Text, ThemeButton } from '@umami/react-zen'; import { LanguageButton } from '@/components/input/LanguageButton'; import { PreferencesButton } from '@/components/input/PreferencesButton'; -import { LogoSvg } from '@/components/icons'; +import { Logo } from '@/components/svg'; export function Header() { return ( @@ -9,7 +9,7 @@ export function Header() { - + umami diff --git a/src/components/icons.ts b/src/components/icons.ts index e0e7c678..fe433d5d 100644 --- a/src/components/icons.ts +++ b/src/components/icons.ts @@ -1,14 +1 @@ export * from 'lucide-react'; -export { - Compare as CompareSvg, - Funnel as FunnelSvg, - Lightning as LightningSvg, - Location as LocationSvg, - Logo as LogoSvg, - Magnet as MagnetSvg, - Money as MoneySvg, - Network as NetworkSvg, - Path as PathSvg, - Switch as SwitchSvg, - Target as TargetSvg, -} from '@/components/svg'; diff --git a/src/components/input/NavButton.tsx b/src/components/input/NavButton.tsx index 240c6735..257cd685 100644 --- a/src/components/input/NavButton.tsx +++ b/src/components/input/NavButton.tsx @@ -24,8 +24,8 @@ import { Settings, User, Users, - SwitchSvg, } from '@/components/icons'; +import { Switch } from '@/components/svg'; import { DOCS_URL } from '@/lib/constants'; import { ArrowRight } from 'lucide-react'; @@ -79,7 +79,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) { - } label={formatMessage(labels.switchAccount)} /> + } label={formatMessage(labels.switchAccount)} />