matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicolium: replace react-helmet-async dependency with react 19 features

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-13 13:14:52 +01:00
parent c00a42e0b8
commit 389cbff281
6 changed files with 34 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/nicolium/package.json
View File

@@ -111,7 +111,6 @@
"react-color": "^2.19.3",
"react-datepicker": "^9.1.0",
"react-dom": "^19.2.4",
"react-helmet-async": "^3.0.0",
"react-hot-toast": "^2.6.0",
"react-inlinesvg": "^4.2.0",
"react-intl": "^8.1.3",

27
packages/nicolium/src/components/helmet.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { Helmet as ReactHelmet } from 'react-helmet-async';
import React, { useEffect } from 'react';
import { useStatContext } from '@/contexts/stat-context';
import { useInstance } from '@/hooks/use-instance';
@@ -12,10 +11,11 @@ import FaviconService from '@/utils/favicon-service';
FaviconService.initFaviconService();
interface IHelmet {
children: React.ReactNode;
title?: string;
children?: React.ReactNode;
}
const Helmet: React.FC<IHelmet> = ({ children }) => {
const Helmet: React.FC<IHelmet> = ({ title, children }) => {
const instance = useInstance();
const { unreadChatsCount } = useStatContext();
const { data: awaitingApprovalCount = 0 } = usePendingUsersCount();
@@ -33,26 +33,23 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
const addCounter = (string: string) =>
hasUnreadNotifications ? `(${unreadCount}) ${string}` : string;
const updateFaviconBadge = () => {
useEffect(() => {
if (hasUnreadNotifications) {
FaviconService.drawFaviconBadge();
} else {
FaviconService.clearFaviconBadge();
}
};
React.useEffect(() => {
updateFaviconBadge();
}, [unreadCount, demetricator]);
const formattedTitle = title
? addCounter(`${title} | ${instance.title}`)
: addCounter(instance.title);
return (
<ReactHelmet
titleTemplate={addCounter(`%s | ${instance.title}`)}
defaultTitle={addCounter(instance.title)}
defer={false}
>
<>
<title>{formattedTitle}</title>
{children}
</ReactHelmet>
</>
);
};

5
packages/nicolium/src/components/ui/column.tsx
View File

@@ -106,12 +106,9 @@ const Column: React.FC<IColumn> = (props): React.JSX.Element => {
variant={transparent ? undefined : 'rounded'}
className={clsx('⁂-column', className)}
>
<Helmet>
<title>{label}</title>
<Helmet title={label}>
{frontendConfig.appleAppId && (
<meta
data-react-helmet='true'
name='apple-itunes-app'
content={`app-id=${frontendConfig.appleAppId}, app-argument=${location.href}`}
/>

30
packages/nicolium/src/init/nicolium-head.tsx
View File

@@ -13,7 +13,7 @@ import { useSettings } from '@/stores/settings';
const Helmet = React.lazy(() => import('@/components/helmet'));
/** Injects metadata into site head with Helmet. */
/** Injects metadata into site head. */
const NicoliumHead = () => {
const locale = useLocale();
const direction = useLocaleDirection(locale);
@@ -70,6 +70,21 @@ const NicoliumHead = () => {
};
}, []);
useEffect(() => {
document.documentElement.lang = locale;
document.documentElement.className = clsx(`text-${themeSettings?.interfaceSize ?? 'md'}`, {
dark: theme === 'dark',
'black dark': theme === 'black',
'window-controls-overlay': wcoVisible,
'window-controls-overlay--right': wcoRight,
});
}, [locale, themeSettings?.interfaceSize, theme, wcoVisible, wcoRight]);
useEffect(() => {
document.body.className = bodyClass;
document.body.dir = direction;
}, [bodyClass, direction]);
const color = useMemo(() => {
if (wcoVisible) {
return window.getComputedStyle(document.body, null).getPropertyValue('background-color');
@@ -79,18 +94,7 @@ const NicoliumHead = () => {
return (
<>
<Helmet>
<html
lang={locale}
className={clsx(`text-${themeSettings?.interfaceSize ?? 'md'}`, {
dark: theme === 'dark',
'black dark': theme === 'black',
'window-controls-overlay': wcoVisible,
'window-controls-overlay--right': wcoRight,
})}
/>
<body className={bodyClass} dir={direction} />
</Helmet>
<Helmet />
<meta name='theme-color' content={color} />
<InlineStyle>{`:root { ${themeCss} }`}</InlineStyle>
{['dark', 'black'].includes(theme) && (

11
packages/nicolium/src/init/nicolium.tsx
View File

@@ -1,6 +1,5 @@
import { QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import { HelmetProvider } from 'react-helmet-async';
import { Provider } from 'react-redux';
import { preload } from '@/actions/preload';
@@ -23,12 +22,10 @@ const Nicolium: React.FC = () => (
<QueryClientProvider client={queryClient}>
<DefaultCurrentAccountProvider>
<StatProvider>
<HelmetProvider>
<NicoliumHead />
<NicoliumLoad>
<NicoliumMount />
</NicoliumLoad>
</HelmetProvider>
<NicoliumHead />
<NicoliumLoad>
<NicoliumMount />
</NicoliumLoad>
</StatProvider>
</DefaultCurrentAccountProvider>
</QueryClientProvider>