watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 12:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Updated icons.

Browse source
This commit is contained in:
Mike Cao 2025-09-22 20:11:31 -07:00
parent d8b3c8d13c
commit bf16ade184
23 changed files with 159 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/(main)/SideNav.tsx
View file

@ -8,7 +8,7 @@ import {
SidebarProps,
ThemeButton,
} from '@umami/react-zen';
import { Globe, Link as LinkIcon, Logo, Pixel, PanelLeft } from '@/components/icons';
import { Globe, LinkIcon, LogoSvg, Grid2x2, PanelLeft } from '@/components/icons';
import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
import { TeamsButton } from '@/components/input/TeamsButton';
import { PanelButton } from '@/components/input/PanelButton';
@ -39,7 +39,7 @@ export function SideNav(props: SidebarProps) {
id: 'pixels',
label: formatMessage(labels.pixels),
path: '/pixels',
icon: <Pixel />,
icon: <Grid2x2 />,
},
];
@ -53,7 +53,7 @@ export function SideNav(props: SidebarProps) {
<SidebarSection onClick={() => setIsCollapsed(false)}>
<SidebarHeader
label="umami"
icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
icon={isCollapsed && !hasNav ? <PanelLeft /> : <LogoSvg />}
style={{ maxHeight: 40 }}
>
{!isCollapsed && !hasNav && <PanelButton />}

4
src/app/(main)/links/LinkEditForm.tsx
View file

@ -13,7 +13,7 @@ import {
} from '@umami/react-zen';
import { useConfig, useLinkQuery } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Refresh } from '@/components/icons';
import { RefreshCw } from '@/components/icons';
import { getRandomChars } from '@/lib/generate';
import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
import { LINKS_URL } from '@/lib/constants';
@ -127,7 +127,7 @@ export function LinkEditForm({
onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
>
<Icon>
<Refresh />
<RefreshCw />
</Icon>
</Button>
</Row>

4
src/app/(main)/pixels/PixelEditForm.tsx
View file

@ -12,7 +12,7 @@ import {
} from '@umami/react-zen';
import { useConfig, usePixelQuery } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Refresh } from '@/components/icons';
import { RefreshCw } from '@/components/icons';
import { getRandomChars } from '@/lib/generate';
import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
import { useEffect, useState } from 'react';
@ -111,7 +111,7 @@ export function PixelEditForm({
onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
>
<Icon>
<Refresh />
<RefreshCw />
</Icon>
</Button>
</Row>

4
src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx
View file

@ -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, Lightning, User } from '@/components/icons';
import { File, LightningSvg, 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
</Row>
<Row alignItems="center" justifyContent="space-between" gap>
<Row alignItems="center" gap>
<Icon>{parameters.type === 'path' ? <File /> : <Lightning />}</Icon>
<Icon>{parameters.type === 'path' ? <File /> : <LightningSvg />}</Icon>
<Text>{parameters.value}</Text>
</Row>
<Row alignItems="center" gap>

42
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -2,6 +2,27 @@ import { Grid, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
import { SideMenu } from '@/components/common/SideMenu';
import {
Link,
LogOut,
LogIn,
Search,
Type,
ArrowRight,
Megaphone,
Earth,
Globe,
Landmark,
MapPin,
AppWindow,
Laptop,
Languages,
Monitor,
Cpu,
LightningSvg,
LucideCaseSensitive,
Tag,
} from '@/components/icons';
export function WebsiteExpandedView({
websiteId,
@ -24,26 +45,31 @@ export function WebsiteExpandedView({
id: 'path',
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
icon: <Link />,
},
{
id: 'entry',
label: formatMessage(labels.entry),
path: updateParams({ view: 'entry' }),
icon: <LogIn />,
},
{
id: 'exit',
label: formatMessage(labels.exit),
path: updateParams({ view: 'exit' }),
icon: <LogOut />,
},
{
id: 'title',
label: formatMessage(labels.title),
path: updateParams({ view: 'title' }),
icon: <Type />,
},
{
id: 'query',
label: formatMessage(labels.query),
path: updateParams({ view: 'query' }),
icon: <Search />,
},
],
},
@ -54,16 +80,19 @@ export function WebsiteExpandedView({
id: 'referrer',
label: formatMessage(labels.referrer),
path: updateParams({ view: 'referrer' }),
icon: <ArrowRight />,
},
{
id: 'channel',
label: formatMessage(labels.channel),
path: updateParams({ view: 'channel' }),
icon: <Megaphone />,
},
{
id: 'domain',
label: formatMessage(labels.domain),
path: updateParams({ view: 'domain' }),
icon: <Globe />,
},
],
},
@ -74,16 +103,19 @@ export function WebsiteExpandedView({
id: 'country',
label: formatMessage(labels.country),
path: updateParams({ view: 'country' }),
icon: <Earth />,
},
{
id: 'region',
label: formatMessage(labels.region),
path: updateParams({ view: 'region' }),
icon: <MapPin />,
},
{
id: 'city',
label: formatMessage(labels.city),
path: updateParams({ view: 'city' }),
icon: <Landmark />,
},
],
},
@ -94,26 +126,31 @@ export function WebsiteExpandedView({
id: 'browser',
label: formatMessage(labels.browser),
path: updateParams({ view: 'browser' }),
icon: <AppWindow />,
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
icon: <Cpu />,
},
{
id: 'device',
label: formatMessage(labels.device),
path: updateParams({ view: 'device' }),
icon: <Laptop />,
},
{
id: 'language',
label: formatMessage(labels.language),
path: updateParams({ view: 'language' }),
icon: <Languages />,
},
{
id: 'screen',
label: formatMessage(labels.screen),
path: updateParams({ view: 'screen' }),
icon: <Monitor />,
},
],
},
@ -124,16 +161,19 @@ export function WebsiteExpandedView({
id: 'event',
label: formatMessage(labels.event),
path: updateParams({ view: 'event' }),
icon: <LightningSvg />,
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
icon: <LucideCaseSensitive />,
},
{
id: 'tag',
label: formatMessage(labels.tag),
path: updateParams({ view: 'tag' }),
icon: <Tag />,
},
],
},
@ -142,7 +182,7 @@ export function WebsiteExpandedView({
return (
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" border="right" paddingRight="3">
<SideMenu items={items} selectedKey={view} />
<SideMenu items={items} selectedKey={view} muteItems={false} />
</Column>
<Column overflow="hidden">
<MetricsExpandedTable

28
src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
View file

@ -1,19 +1,19 @@
import {
Eye,
Lightning,
LightningSvg,
User,
Clock,
Sheet,
Target,
Funnel,
Path,
Magnet,
TargetSvg,
FunnelSvg,
PathSvg,
MagnetSvg,
Tag,
Money,
MoneySvg,
Network,
ChartPie,
UserPlus,
Compare,
CompareSvg,
} from '@/components/icons';
import { useMessages, useNavigation } from '@/components/hooks';
import { SideMenu } from '@/components/common/SideMenu';
@ -44,7 +44,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'events',
label: formatMessage(labels.events),
icon: <Lightning />,
icon: <LightningSvg />,
path: renderPath('/events'),
},
{
@ -62,7 +62,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'compare',
label: formatMessage(labels.compare),
icon: <Compare />,
icon: <CompareSvg />,
path: renderPath('/compare'),
},
{
@ -79,25 +79,25 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'goals',
label: formatMessage(labels.goals),
icon: <Target />,
icon: <TargetSvg />,
path: renderPath('/goals'),
},
{
id: 'funnel',
label: formatMessage(labels.funnels),
icon: <Funnel />,
icon: <FunnelSvg />,
path: renderPath('/funnels'),
},
{
id: 'journeys',
label: formatMessage(labels.journeys),
icon: <Path />,
icon: <PathSvg />,
path: renderPath('/journeys'),
},
{
id: 'retention',
label: formatMessage(labels.retention),
icon: <Magnet />,
icon: <MagnetSvg />,
path: renderPath('/retention'),
},
],
@ -131,7 +131,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'revenue',
label: formatMessage(labels.revenue),
icon: <Money />,
icon: <MoneySvg />,
path: renderPath('/revenue'),
},
{

6
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -2,7 +2,7 @@ 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 { Location, KeyRound, Calendar } from '@/components/icons';
import { LocationSvg, KeyRound, Calendar } from '@/components/icons';
import { DateDistance } from '@/components/common/DateDistance';
export function SessionInfo({ data }) {
@ -36,11 +36,11 @@ export function SessionInfo({ data }) {
{formatValue(data?.country, 'country')}
</Info>
<Info label={formatMessage(labels.region)} icon={<Location />}>
<Info label={formatMessage(labels.region)} icon={<LocationSvg />}>
{getRegionName(data?.region)}
</Info>
<Info label={formatMessage(labels.city)} icon={<Location />}>
<Info label={formatMessage(labels.city)} icon={<LocationSvg />}>
{data?.city}
</Info>

4
src/app/login/LoginForm.tsx
View file

@ -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 { Logo } from '@/components/icons';
import { LogoSvg } from '@/components/icons';
export function LoginForm() {
const { formatMessage, labels, getErrorMessage } = useMessages();
@ -34,7 +34,7 @@ export function LoginForm() {
return (
<Column justifyContent="center" alignItems="center" gap="6">
<Icon size="lg">
<Logo />
<LogoSvg />
</Icon>
<Heading>umami</Heading>
<Form onSubmit={handleSubmit} error={getErrorMessage(error)}>

4
src/components/common/ErrorMessage.tsx
View file

@ -1,6 +1,6 @@
import { Icon, Text, Row } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { Alert } from '@/components/icons';
import { AlertTriangle } from '@/components/icons';
export function ErrorMessage() {
const { formatMessage, messages } = useMessages();
@ -8,7 +8,7 @@ export function ErrorMessage() {
return (
<Row alignItems="center" justifyContent="center" gap>
<Icon>
<Alert />
<AlertTriangle />
</Icon>
<Text>{formatMessage(messages.error)}</Text>
</Row>

4
src/components/common/FilterRecord.tsx
View file

@ -1,7 +1,7 @@
import { useState } from 'react';
import { Grid, Column, TextField, Label, Select, Icon, Button, ListItem } from '@umami/react-zen';
import { useFilters, useFormat, useWebsiteValuesQuery } from '@/components/hooks';
import { Close } from '@/components/icons';
import { X } from '@/components/icons';
import { isSearchOperator } from '@/lib/params';
import { Empty } from '@/components/common/Empty';
@ -107,7 +107,7 @@ export function FilterRecord({
<Column justifyContent="flex-end">
<Button variant="quiet" onPress={() => onRemove?.(name)}>
<Icon>
<Close />
<X />
</Icon>
</Button>
</Column>

6
src/components/common/Pager.tsx
View file

@ -1,6 +1,6 @@
import { Button, Icon, Row, Text } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { Chevron } from '@/components/icons';
import { ChevronRight } from '@/components/icons';
export interface PagerProps {
page: string | number;
@ -45,12 +45,12 @@ export function Pager({ page, pageSize, count, onPageChange }: PagerProps) {
<Row gap="1">
<Button variant="outline" onPress={() => handlePageChange(-1)} isDisabled={firstPage}>
<Icon size="sm" rotate={180}>
<Chevron />
<ChevronRight />
</Icon>
</Button>
<Button variant="outline" onPress={() => handlePageChange(1)} isDisabled={lastPage}>
<Icon size="sm">
<Chevron />
<ChevronRight />
</Icon>
</Button>
</Row>

4
src/components/common/Panel.tsx
View file

@ -9,7 +9,7 @@ import {
Tooltip,
Heading,
} from '@umami/react-zen';
import { Maximize, Close } from '@/components/icons';
import { Maximize, X } from '@/components/icons';
import { useMessages } from '@/components/hooks';
export interface PanelProps extends ColumnProps {
@ -59,7 +59,7 @@ export function Panel({
<Row justifyContent="flex-end" alignItems="center">
<TooltipTrigger delay={0} isDisabled={isFullscreen}>
<Button variant="quiet" onPress={handleFullscreen}>
<Icon>{isFullscreen ? <Close /> : <Maximize />}</Icon>
<Icon>{isFullscreen ? <X /> : <Maximize />}</Icon>
</Button>
<Tooltip>{formatMessage(labels.maximize)}</Tooltip>
</TooltipTrigger>

84
src/components/icons.ts
View file

@ -1,71 +1,17 @@
export * from 'lucide-react';
export {
AlertTriangle as Alert,
ArrowRight as Arrow,
Bookmark,
Calendar,
ChartPie,
ChevronRight as Chevron,
Clock,
Copy,
Database,
Download,
Edit,
Ellipsis,
Equal,
Eye,
ExternalLink,
File,
FileJson,
FileText,
Globe,
Grid2X2 as Pixel,
KeyRound,
LayoutDashboard,
Link,
ListCheck,
ListFilter,
LockKeyhole,
LogOut,
Maximize,
Menu,
Minimize,
Moon,
MoreHorizontal as More,
Paperclip,
PanelLeft,
Plus,
RefreshCw as Refresh,
Settings,
Settings2 as Knobs,
Share,
Sheet,
Slash,
SquarePen,
SquarePlus,
Sun,
Trash,
Upload,
User,
CircleUserRound as UserCircle,
Users,
UserPlus,
X as Close,
} from 'lucide-react';
export {
Logo,
Bolt,
Change,
Compare,
Funnel,
Lightbulb,
Lightning,
Location,
Magnet,
Money,
Network,
Path,
Tag,
Target,
AddUser,
Visitor,
Logo as LogoSvg,
Bolt as BoltSvg,
Change as ChangeSvg,
Compare as CompareSvg,
Funnel as FunnelSvg,
Lightbulb as LightbulbSvg,
Lightning as LightningSvg,
Location as LocationSvg,
Magnet as MagnetSvg,
Money as MoneySvg,
Network as NetworkSvg,
Path as PathSvg,
Tag as TagSvg,
Target as TargetSvg,
} from '@/components/svg';

6
src/components/input/FilterBar.tsx
View file

@ -16,7 +16,7 @@ import {
useFilters,
useWebsiteSegmentQuery,
} from '@/components/hooks';
import { Close, Bookmark } from '@/components/icons';
import { X, Bookmark } from '@/components/icons';
import { isSearchOperator } from '@/lib/params';
import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
@ -111,7 +111,7 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
<TooltipTrigger delay={0}>
<Button variant="zero" onPress={handleResetFilter}>
<Icon>
<Close />
<X />
</Icon>
</Button>
<Tooltip>
@ -146,7 +146,7 @@ const FilterItem = ({ name, label, operator, value, onRemove }) => {
</Text>
</Row>
<Icon onClick={() => onRemove(name)} size="xs" style={{ cursor: 'pointer' }}>
<Close />
<X />
</Icon>
</Row>
</Row>

8
src/components/input/ReportEditButton.tsx
View file

@ -13,7 +13,7 @@ import {
Text,
Row,
} from '@umami/react-zen';
import { Edit, More, Trash } from '@/components/icons';
import { Edit, MoreHorizontal, Trash } from '@/components/icons';
export function ReportEditButton({
id,
@ -61,7 +61,7 @@ export function ReportEditButton({
<MenuTrigger>
<Button variant="quiet">
<Icon>
<More />
<MoreHorizontal />
</Icon>
</Button>
<Popover placement="bottom">
@ -90,9 +90,7 @@ export function ReportEditButton({
onCancel={handleClose}
isDanger
>
<Row gap="1">
{formatMessage(messages.confirmDelete, { target: <b key={name}>{name}</b> })}
</Row>
<Row gap="1">{formatMessage(messages.confirmDelete, { target: name })}</Row>
</AlertDialog>
)}
</Modal>

4
src/components/input/TeamsButton.tsx
View file

@ -13,7 +13,7 @@ import {
Loading,
} from '@umami/react-zen';
import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
import { Chevron, User, Users } from '@/components/icons';
import { ChevronRight, User, Users } from '@/components/icons';
export interface TeamsButtonProps {
showText?: boolean;
@ -50,7 +50,7 @@ export function TeamsButton({ showText = true, onAction }: TeamsButtonProps) {
</Row>
{showText && (
<Icon rotate={90} size="sm">
<Chevron />
<ChevronRight />
</Icon>
)}
</Row>

6
src/components/input/WebsiteDateFilter.tsx
View file

@ -1,6 +1,6 @@
import { Button, Icon, Row, Text, Select, ListItem } from '@umami/react-zen';
import { isAfter } from 'date-fns';
import { Chevron } from '@/components/icons';
import { ChevronRight } from '@/components/icons';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { DateFilter } from './DateFilter';
@ -49,12 +49,12 @@ export function WebsiteDateFilter({
<Row gap="1">
<Button onPress={() => handleIncrement(-1)} variant="outline">
<Icon rotate={180}>
<Chevron />
<ChevronRight />
</Icon>
</Button>
<Button onPress={() => handleIncrement(1)} variant="outline" isDisabled={disableForward}>
<Icon>
<Chevron />
<ChevronRight />
</Icon>
</Button>
</Row>

4
src/components/metrics/ChangeLabel.tsx
View file

@ -1,6 +1,6 @@
import { Icon, Text, Row, RowProps } from '@umami/react-zen';
import { ReactNode } from 'react';
import { Arrow } from '@/components/icons';
import { ArrowRight } from '@/components/icons';
const STYLES = {
positive: {
@ -51,7 +51,7 @@ export function ChangeLabel({
>
{!neutral && (
<Icon rotate={positive ? -90 : 90} size={size}>
<Arrow />
<ArrowRight />
</Icon>
)}
<Text>{children || value}</Text>

4
src/components/metrics/MetricsExpandedTable.tsx
View file

@ -2,7 +2,7 @@ import { ReactNode, useState } from 'react';
import { Button, Column, DataColumn, DataTable, Icon, Row, SearchField } from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useMessages, useWebsiteExpandedMetricsQuery } from '@/components/hooks';
import { Close } from '@/components/icons';
import { X } from '@/components/icons';
import { DownloadButton } from '@/components/input/DownloadButton';
import { formatShortTime } from '@/lib/format';
import { MetricLabel } from '@/components/metrics/MetricLabel';
@ -55,7 +55,7 @@ export function MetricsExpandedTable({
{onClose && (
<Button onPress={onClose} variant="quiet">
<Icon>
<Close />
<X />
</Icon>
</Button>
)}

20
src/permissions/website.ts
View file

@ -14,6 +14,10 @@ export async function canViewWebsite({ user, shareToken }: Auth, websiteId: stri
const website = await getWebsite(websiteId);
if (!website) {
return false;
}
if (website.userId) {
return user.id === website.userId;
}
@ -46,6 +50,10 @@ export async function canUpdateWebsite({ user }: Auth, websiteId: string) {
const website = await getWebsite(websiteId);
if (!website) {
return false;
}
if (website.userId) {
return user.id === website.userId;
}
@ -66,6 +74,10 @@ export async function canDeleteWebsite({ user }: Auth, websiteId: string) {
const website = await getWebsite(websiteId);
if (!website) {
return false;
}
if (website.userId) {
return user.id === website.userId;
}
@ -82,6 +94,10 @@ export async function canDeleteWebsite({ user }: Auth, websiteId: string) {
export async function canTransferWebsiteToUser({ user }: Auth, websiteId: string, userId: string) {
const website = await getWebsite(websiteId);
if (!website) {
return false;
}
if (website.teamId && user.id === userId) {
const teamUser = await getTeamUser(website.teamId, userId);
@ -94,6 +110,10 @@ export async function canTransferWebsiteToUser({ user }: Auth, websiteId: string
export async function canTransferWebsiteToTeam({ user }: Auth, websiteId: string, teamId: string) {
const website = await getWebsite(websiteId);
if (!website) {
return false;
}
if (website.userId && website.userId === user.id) {
const teamUser = await getTeamUser(teamId, user.id);

10
src/store/app.ts
View file

@ -11,17 +11,9 @@ import {
import { getItem } from '@/lib/storage';
import { getTimezone } from '@/lib/date';
function getDefaultTheme() {
return typeof window !== 'undefined'
? window?.matchMedia('(prefers-color-scheme: dark)')?.matches
? 'dark'
: 'light'
: 'light';
}
const initialState = {
locale: getItem(LOCALE_CONFIG) || process.env.defaultLocale || DEFAULT_LOCALE,
theme: getItem(THEME_CONFIG) || getDefaultTheme() || DEFAULT_THEME,
theme: getItem(THEME_CONFIG) || DEFAULT_THEME,
timezone: getItem(TIMEZONE_CONFIG) || getTimezone(),
dateRangeValue: getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
shareToken: null,