dmitryplyaskin · dmitryplyaskin · Jul 30, 2026 · Jul 30, 2026
diff --git a/web/package.json b/web/package.json
@@ -18,24 +18,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@mantine/carousel": "^8.3.12",
-    "@mantine/charts": "^8.3.12",
-    "@mantine/code-highlight": "^8.3.12",
-    "@mantine/core": "^8.3.12",
-    "@mantine/dates": "^8.3.12",
-    "@mantine/dropzone": "^8.3.12",
-    "@mantine/hooks": "^8.3.12",
-    "@mantine/modals": "^8.3.12",
-    "@mantine/notifications": "^8.3.12",
-    "@mantine/nprogress": "^8.3.12",
-    "@mantine/spotlight": "^8.3.12",
-    "@mantine/tiptap": "^8.3.12",
+    "@floating-ui/dom": "^1.8.0",
+    "@mantine/carousel": "^9.5.0",
+    "@mantine/charts": "^9.5.0",
+    "@mantine/code-highlight": "^9.5.0",
+    "@mantine/core": "^9.5.0",
+    "@mantine/dates": "^9.5.0",
+    "@mantine/dropzone": "^9.5.0",
+    "@mantine/hooks": "^9.5.0",
+    "@mantine/modals": "^9.5.0",
+    "@mantine/notifications": "^9.5.0",
+    "@mantine/nprogress": "^9.5.0",
+    "@mantine/spotlight": "^9.5.0",
+    "@mantine/tiptap": "^9.5.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-virtual": "^3.13.18",
-    "@tiptap/extension-link": "^3.15.3",
-    "@tiptap/pm": "^3.15.3",
-    "@tiptap/react": "^3.15.3",
-    "@tiptap/starter-kit": "^3.15.3",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-link": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/react": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
     "@xyflow/react": "^12.10.0",
     "autoprefixer": "^10.4.23",
     "axios": "^1.13.2",
@@ -44,20 +46,20 @@
     "effector": "^23.4.4",
     "effector-react": "^23.3.0",
     "elkjs": "^0.11.1",
-    "embla-carousel": "8.5.2",
-    "embla-carousel-react": "8.5.2",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "handlebars": "^4.7.8",
     "i18next": "^25.8.4",
     "immer": "^11.1.3",
     "patronum": "^2.3.0",
     "postcss": "^8.5.6",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-hook-form": "^7.71.1",
     "react-i18next": "^16.5.4",
-    "react-icons": "^5.5.0",
+    "react-is": "^19.2.8",
     "react-markdown": "^10.1.0",
-    "recharts": "^3.6.0",
+    "recharts": "^3.10.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-breaks": "^4.0.0",
@@ -68,7 +70,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.2",

diff --git a/web/src/features/auth/account-chooser.tsx b/web/src/features/auth/account-chooser.tsx
@@ -12,7 +12,8 @@ import {
 } from '@mantine/core';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuCheck, LuChevronRight, LuKeyRound } from 'react-icons/lu';
+
+import { CheckIcon, CaretRightIcon, KeyIcon } from '@ui/icons';
 
 import type { AuthUser } from '../../api/auth';
 
@@ -88,7 +89,7 @@ export function AccountChooser({
 											{account.displayName}
 										</Text>
 										{current && (
-											<Badge size="xs" variant="light" leftSection={<LuCheck size={11} />}>
+											<Badge size="xs" variant="light" leftSection={<CheckIcon size={11} />}>
 												{t('auth.chooser.current')}
 											</Badge>
 										)}
@@ -98,18 +99,18 @@ export function AccountChooser({
 									</Text>
 								</Box>
 								{account.hasPassword ? (
-									<LuKeyRound
+									<KeyIcon
 										size={17}
 										aria-label={t('auth.chooser.passwordProtected')}
 										color="var(--mantine-color-dimmed)"
 									/>
 								) : (
-									<LuChevronRight size={18} color="var(--mantine-color-dimmed)" />
+									<CaretRightIcon size={18} color="var(--mantine-color-dimmed)" />
 								)}
 							</Group>
 						</UnstyledButton>
 
-						<Collapse in={selected && !current}>
+						<Collapse expanded={selected && !current}>
 							<Stack
 								gap="sm"
 								p="sm"

diff --git a/web/src/features/auth/account-manager.tsx b/web/src/features/auth/account-manager.tsx
@@ -2,7 +2,7 @@ import { Alert, Button, Tabs } from '@mantine/core';
 import { useUnit } from 'effector-react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuCircleAlert, LuKeyRound, LuShield, LuUserRound } from 'react-icons/lu';
+
 
 import {
 	$authError,
@@ -24,6 +24,7 @@ import {
 	userPasswordResetSubmitted,
 } from '@model/auth';
 import { Dialog } from '@ui/dialog';
+import { WarningCircleIcon, KeyIcon, ShieldCheckIcon, UserIcon } from '@ui/icons';
 
 import { AccountOverviewSection } from './account-overview-section';
 import { AccountSecuritySection } from './account-security-section';
@@ -88,20 +89,20 @@ export function AccountManager({ opened, onClose }: { opened: boolean; onClose:
 			}
 		>
 			{error && (
-				<Alert color="red" variant="light" icon={<LuCircleAlert size={18} />}>
+				<Alert color="red" variant="light" icon={<WarningCircleIcon size={18} />}>
 					{error}
 				</Alert>
 			)}
 			<Tabs defaultValue="account" keepMounted={false}>
 				<Tabs.List grow mb="lg">
-					<Tabs.Tab value="account" leftSection={<LuUserRound size={16} />}>
+					<Tabs.Tab value="account" leftSection={<UserIcon size={16} />}>
 						{t('auth.accounts.tabs.account')}
 					</Tabs.Tab>
-					<Tabs.Tab value="security" leftSection={<LuKeyRound size={16} />}>
+					<Tabs.Tab value="security" leftSection={<KeyIcon size={16} />}>
 						{t('auth.accounts.tabs.security')}
 					</Tabs.Tab>
 					{status.user?.role === 'admin' && (
-						<Tabs.Tab value="users" leftSection={<LuShield size={16} />}>
+						<Tabs.Tab value="users" leftSection={<ShieldCheckIcon size={16} />}>
 							{t('auth.accounts.tabs.users')}
 						</Tabs.Tab>
 					)}

diff --git a/web/src/features/auth/account-overview-section.tsx b/web/src/features/auth/account-overview-section.tsx
@@ -10,7 +10,8 @@ import {
 } from '@mantine/core';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuLogOut, LuRefreshCw } from 'react-icons/lu';
+
+import { SignOutIcon, ArrowsClockwiseIcon } from '@ui/icons';
 
 import { AccountChooser } from './account-chooser';
 import { AuthCredentialsForm } from './auth-credentials-form';
@@ -78,7 +79,7 @@ export function AccountOverviewSection({
 				{status.mode === 'public' && !manualSwitch && (
 					<Button
 						variant="light"
-						leftSection={<LuRefreshCw size={17} />}
+						leftSection={<ArrowsClockwiseIcon size={17} />}
 						onClick={() => setManualSwitch(true)}
 					>
 						{t('auth.accounts.switchAction')}
@@ -107,7 +108,7 @@ export function AccountOverviewSection({
 				<Button
 					color="red"
 					variant="subtle"
-					leftSection={<LuLogOut size={17} />}
+					leftSection={<SignOutIcon size={17} />}
 					loading={pending}
 					onClick={onLogout}
 				>

diff --git a/web/src/features/auth/account-security-section.tsx b/web/src/features/auth/account-security-section.tsx
@@ -1,7 +1,8 @@
 import { Box, Button, Group, PasswordInput, Stack, Text } from '@mantine/core';
 import { useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuKeyRound } from 'react-icons/lu';
+
+import { KeyIcon } from '@ui/icons';
 
 import type { AuthStatus } from '../../api/auth';
 
@@ -38,7 +39,7 @@ export function AccountSecuritySection({
 				{hasPassword && (
 					<PasswordInput
 						label={t('auth.accounts.currentPassword')}
-						leftSection={<LuKeyRound size={16} />}
+						leftSection={<KeyIcon size={16} />}
 						value={currentPassword}
 						onChange={(event) => setCurrentPassword(event.currentTarget.value)}
 						autoComplete="current-password"
@@ -47,7 +48,7 @@ export function AccountSecuritySection({
 				<PasswordInput
 					label={t('auth.accounts.newPassword')}
 					description={status.mode === 'local' ? t('auth.fields.passwordOptional') : undefined}
-					leftSection={<LuKeyRound size={16} />}
+					leftSection={<KeyIcon size={16} />}
 					value={newPassword}
 					onChange={(event) => setNewPassword(event.currentTarget.value)}
 					autoComplete="new-password"

diff --git a/web/src/features/auth/account-user-row.tsx b/web/src/features/auth/account-user-row.tsx
@@ -14,7 +14,8 @@ import {
 } from '@mantine/core';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuChevronDown, LuKeyRound } from 'react-icons/lu';
+
+import { CaretDownIcon, KeyIcon } from '@ui/icons';
 
 import type { AuthUser } from '../../api/auth';
 
@@ -65,7 +66,7 @@ export function AccountUserRow({
 					aria-label={t('auth.accounts.manageUser', { name: user.displayName })}
 					onClick={() => setOpened((value) => !value)}
 				>
-					<LuChevronDown
+					<CaretDownIcon
 						size={18}
 						style={{
 							transform: opened ? 'rotate(180deg)' : undefined,
@@ -75,7 +76,7 @@ export function AccountUserRow({
 				</ActionIcon>
 			</Group>
 
-			<Collapse in={opened}>
+			<Collapse expanded={opened}>
 				<Stack gap="md" pt="md">
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
 						<Select
@@ -107,7 +108,7 @@ export function AccountUserRow({
 						<PasswordInput
 							label={t('auth.accounts.newPassword')}
 							description={allowEmptyPassword ? t('auth.fields.passwordOptional') : undefined}
-							leftSection={<LuKeyRound size={16} />}
+							leftSection={<KeyIcon size={16} />}
 							value={newPassword}
 							disabled={pending}
 							onChange={(event) => setNewPassword(event.currentTarget.value)}

diff --git a/web/src/features/auth/account-users-section.tsx b/web/src/features/auth/account-users-section.tsx
@@ -13,7 +13,8 @@ import {
 } from '@mantine/core';
 import { useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuPlus, LuUsers } from 'react-icons/lu';
+
+import { PlusIcon, UsersIcon } from '@ui/icons';
 
 import { AccountUserRow } from './account-user-row';
 
@@ -66,7 +67,7 @@ export function AccountUsersSection({
 			<Group justify="space-between" align="flex-start">
 				<Box>
 					<Group gap="xs">
-						<LuUsers size={18} />
+						<UsersIcon size={18} />
 						<Text fw={650}>{t('auth.accounts.users')}</Text>
 					</Group>
 					<Text size="sm" c="dimmed">
@@ -75,14 +76,14 @@ export function AccountUsersSection({
 				</Box>
 				<Button
 					variant={creating ? 'subtle' : 'light'}
-					leftSection={<LuPlus size={17} />}
+					leftSection={<PlusIcon size={17} />}
 					onClick={() => setCreating((value) => !value)}
 				>
 					{creating ? t('common.cancel') : t('auth.accounts.create')}
 				</Button>
 			</Group>
 
-			<Collapse in={creating}>
+			<Collapse expanded={creating}>
 				<Box
 					component="form"
 					onSubmit={submit}

diff --git a/web/src/features/auth/auth-gate.tsx b/web/src/features/auth/auth-gate.tsx
@@ -7,7 +7,7 @@ import {
 import { useUnit } from 'effector-react';
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuPlus } from 'react-icons/lu';
+
 
 import { appStarted } from '@model/app-init';
 import {
@@ -21,6 +21,7 @@ import {
 	registerSubmitted,
 	setupSubmitted,
 } from '@model/auth';
+import { PlusIcon } from '@ui/icons';
 
 import { AccountChooser } from './account-chooser';
 import { AuthCredentialsForm } from './auth-credentials-form';
@@ -94,7 +95,7 @@ export function AuthGate({ children }: { children: ReactNode }) {
 					{status.registrationAllowed && (
 						<Button
 							variant="subtle"
-							leftSection={<LuPlus size={17} />}
+							leftSection={<PlusIcon size={17} />}
 							onClick={() => setView('create')}
 						>
 							{t('auth.register.open')}
@@ -111,7 +112,7 @@ export function AuthGate({ children }: { children: ReactNode }) {
 					{(status.setupRequired || status.registrationAllowed) && (
 						<Button
 							variant={status.setupRequired ? 'filled' : 'light'}
-							leftSection={<LuPlus size={17} />}
+							leftSection={<PlusIcon size={17} />}
 							onClick={() => setView('create')}
 						>
 							{status.setupRequired ? t('auth.setup.open') : t('auth.register.open')}

diff --git a/web/src/features/auth/auth-welcome-shell.tsx b/web/src/features/auth/auth-welcome-shell.tsx
@@ -14,7 +14,8 @@ import {
 } from '@mantine/core';
 import { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LuCircleAlert, LuSparkles } from 'react-icons/lu';
+
+import { WarningCircleIcon, SparkleIcon } from '@ui/icons';
 
 import type { AccessMode } from '../../api/auth';
 
@@ -60,7 +61,7 @@ export function AuthWelcomeShell({
 							<Group justify="space-between" align="flex-start">
 								<Group gap="sm">
 									<ThemeIcon size={42} radius="md" variant="light" color="cyan">
-										<LuSparkles size={22} />
+										<SparkleIcon size={22} />
 									</ThemeIcon>
 									<Box>
 										<Title order={1} size="h2">
@@ -85,7 +86,7 @@ export function AuthWelcomeShell({
 								</Text>
 							</Stack>
 							{error && (
-								<Alert color="red" variant="light" icon={<LuCircleAlert size={18} />}>
+								<Alert color="red" variant="light" icon={<WarningCircleIcon size={18} />}>
 									{error}
 								</Alert>
 							)}

diff --git a/web/src/features/chat-window/avatar-preview-panel.tsx b/web/src/features/chat-window/avatar-preview-panel.tsx
@@ -1,6 +1,7 @@
 import { ActionIcon, Box, Flex, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { LuX } from 'react-icons/lu';
+
+import { XIcon } from '@ui/icons';
 
 export type ChatAvatarPreview = {
 	src: string;
@@ -36,7 +37,7 @@ export const AvatarPreviewPanel: React.FC<AvatarPreviewPanelProps> = ({ preview,
 					aria-label={t('chat.avatarPreview.close')}
 					title={t('chat.avatarPreview.close')}
 				>
-					<LuX />
+					<XIcon />
 				</ActionIcon>
 			</Flex>