feat: upgrade nextjs to the latest version

2026-03-25 13:55:45 +07:00 · 2026-03-25 13:55:45 +07:00 · b71297db57
commit b71297db57
parent 1aa47351a4
41 changed files with 2043 additions and 1671 deletions
--- a/apps/frontend/eslint.config.mjs
+++ b/apps/frontend/eslint.config.mjs
@ -0,0 +1,18 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;
--- a/apps/frontend/src/app/(app)/(preview)/p/[id]/page.tsx
+++ b/apps/frontend/src/app/(app)/(preview)/p/[id]/page.tsx
@ -10,32 +10,30 @@ import utc from 'dayjs/plugin/utc';
 import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
 import { CopyClient } from '@gitroom/frontend/components/preview/copy.client';
 import { getT } from '@gitroom/react/translation/get.translation.service.backend';
-import dynamicLoad from 'next/dynamic';
-
-const RenderPreviewDate = dynamicLoad(
-  () =>
-    import('@gitroom/frontend/components/preview/render.preview.date').then(
-      (mod) => mod.RenderPreviewDate
-    ),
-  { ssr: false }
-);
+import { RenderPreviewDateClient } from '@gitroom/frontend/components/preview/render.preview.date.client';

 dayjs.extend(utc);
 export const metadata: Metadata = {
  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Preview`,
  description: '',
 };
-export default async function Auth({
-  params: { id },
-  searchParams,
-}: {
-  params: {
-    id: string;
-  };
-  searchParams?: {
-    share?: string;
-  };
-}) {
+export default async function Auth(
+  props: {
+    params: Promise<{
+      id: string;
+    }>;
+    searchParams?: Promise<{
+      share?: string;
+    }>;
+  }
+) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+
+  const {
+    id
+  } = params;
+
  const post = await (await internalFetch(`/public/posts/${id}`)).json();
  const t = await getT();
  if (!post.length) {
@ -102,7 +100,7 @@ export default async function Auth({
            )}
            <div className="flex-1">
              {t('publication_date', 'Publication Date:')}{' '}
-              <RenderPreviewDate date={post[0].publishDate} />
+              <RenderPreviewDateClient date={post[0].publishDate} />
            </div>
          </div>
        </div>
--- a/apps/frontend/src/app/(app)/(site)/settings/page.tsx
+++ b/apps/frontend/src/app/(app)/(site)/settings/page.tsx
@ -6,12 +6,11 @@ export const metadata: Metadata = {
  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Settings`,
  description: '',
 };
-export default async function Index({
-  searchParams,
-}: {
-  searchParams: {
+export default async function Index(props: {
+  searchParams: Promise<{
    code: string;
-  };
+  }>;
 }) {
+  const searchParams = await props.searchParams;
  return <SettingsPopup />;
 }
--- a/apps/frontend/src/app/(app)/api/uploads/[[...path]]/route.ts
+++ b/apps/frontend/src/app/(app)/api/uploads/[[...path]]/route.ts
@ -19,16 +19,17 @@ function iteratorToStream(iterator: any) {
    },
  });
 }
-export const GET = (
+export const GET = async (
  request: NextRequest,
  context: {
-    params: {
-      path: string[];
-    };
+    params: Promise<{
+      path?: string[];
+    }>;
  }
 ) => {
+  const { path } = await context.params;
  const filePath =
-    process.env.UPLOAD_DIRECTORY + '/' + context.params.path.join('/');
+    process.env.UPLOAD_DIRECTORY + '/' + (path ?? []).join('/');
  const response = createReadStream(filePath);
  const fileStats = statSync(filePath);
  const contentType = mime.getType(filePath) || 'application/octet-stream';
--- a/apps/frontend/src/app/(app)/auth/forgot/[token]/page.tsx
+++ b/apps/frontend/src/app/(app)/auth/forgot/[token]/page.tsx
@ -7,9 +7,9 @@ export const metadata: Metadata = {
  description: '',
 };
 export default async function Auth(params: {
-  params: {
+  params: Promise<{
    token: string;
-  };
+  }>;
 }) {
-  return <ForgotReturn token={params.params.token} />;
+  return <ForgotReturn token={(await params.params).token} />;
 }
--- a/apps/frontend/src/app/(app)/auth/page.tsx
+++ b/apps/frontend/src/app/(app)/auth/page.tsx
@ -10,13 +10,13 @@ export const metadata: Metadata = {
  title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Register`,
  description: '',
 };
-export default async function Auth(params: {searchParams: {provider: string}}) {
+export default async function Auth(params: {searchParams: Promise<{provider: string}>}) {
  const t = await getT();
  if (process.env.DISABLE_REGISTRATION === 'true') {
    const canRegister = (
      await (await internalFetch('/auth/can-register')).json()
    ).register;
-    if (!canRegister && !params?.searchParams?.provider) {
+    if (!canRegister && !(await params?.searchParams)?.provider) {
      return (
        <>
          <LoginWithOidc />
--- a/apps/frontend/src/app/(app)/integrations/social/[provider]/page.tsx
+++ b/apps/frontend/src/app/(app)/integrations/social/[provider]/page.tsx
@ -3,15 +3,21 @@ import { cookies } from 'next/headers';

 export const dynamic = 'force-dynamic';

-export default async function Page({
-  params: { provider },
-  searchParams,
-}: {
-  params: {
-    provider: string;
-  };
-  searchParams: any;
-}) {
-  const get = cookies().get('auth');
+export default async function Page(
+  props: {
+    params: Promise<{
+      provider: string;
+    }>;
+    searchParams: Promise<any>;
+  }
+) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+
+  const {
+    provider
+  } = params;
+
+  const get = (await cookies()).get('auth');
  return <ContinueIntegration searchParams={searchParams} provider={provider} logged={!!get?.name} />;
 }
--- a/apps/frontend/src/app/(app)/layout.tsx
+++ b/apps/frontend/src/app/(app)/layout.tsx
@ -34,7 +34,7 @@ const jakartaSans = Plus_Jakarta_Sans({
 });

 export default async function AppLayout({ children }: { children: ReactNode }) {
-  const allHeaders = headers();
+  const allHeaders = await headers();
  const Plausible = !!process.env.STRIPE_PUBLISHABLE_KEY
    ? PlausibleProvider
    : Fragment;
--- a/apps/frontend/src/app/(extension)/modal/[style]/[platform]/page.tsx
+++ b/apps/frontend/src/app/(extension)/modal/[style]/[platform]/page.tsx
@ -1,7 +1,7 @@
 'use client';

 import { StandaloneModal } from '@gitroom/frontend/components/standalone-modal/standalone.modal';
-export default async function Modal() {
+export default function Modal() {
  return (
    <div className="w-screen h-screen overflow-hidden bg-black">
      <div className="text-textColor h-[calc(100vh+80px)] w-[calc(100vw+80px)] -m-[40px]">
--- a/apps/frontend/src/app/global.scss
+++ b/apps/frontend/src/app/global.scss
@ -1,6 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
@import './colors.scss';
@import './polonto.css';
@import '@uppy/core/dist/style.css';
--- a/apps/frontend/src/components/analytics/stars.table.component.tsx
+++ b/apps/frontend/src/components/analytics/stars.table.component.tsx
@ -16,7 +16,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import clsx from 'clsx';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
-import ReactLoading from 'react-loading';
+import ReactLoading from '@gitroom/frontend/components/layout/loading';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';

 export const UpDown: FC<{
--- a/apps/frontend/src/components/billing/embedded.billing.tsx
+++ b/apps/frontend/src/components/billing/embedded.billing.tsx
@ -178,8 +178,8 @@ const StripeInputs: FC<{
              fill="none"
            >
              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                d="M45.9725 11.0075H39.7596C39.906 12.4952 40.9929 12.9731 42.2262 12.9731C43.4904 12.9731 44.5079 12.6879 45.3481 12.2408V14.8C44.2819 15.4135 43.0618 15.7078 41.8331 15.6479C38.7421 15.6479 36.5683 13.7208 36.5683 9.88208C36.5683 6.65229 38.4106 4.08542 41.4246 4.08542C44.4463 4.08542 46.0187 6.61375 46.0187 9.86667C46.0187 10.175 45.9879 10.8379 45.9725 11.0075ZM41.4092 6.67542C40.6152 6.67542 39.7365 7.23812 39.7365 8.66417H43.0125C43.0125 7.23812 42.1877 6.67542 41.4092 6.67542ZM31.5656 15.6479C30.4556 15.6479 29.7773 15.1854 29.3302 14.8462L29.3148 18.4152L26.139 19.0858V4.29354H29.0373L29.099 5.07979C29.7712 4.44215 30.6622 4.0863 31.5887 4.08542C33.8242 4.08542 35.9208 6.08958 35.9208 9.78958C35.9208 13.821 33.8396 15.6479 31.5656 15.6479ZM30.8333 6.89896C30.101 6.89896 29.6462 7.16104 29.3148 7.52333L29.3302 12.2408C29.6385 12.58 30.0856 12.8421 30.8333 12.8421C32.005 12.8421 32.7912 11.5702 32.7912 9.85896C32.7912 8.20167 31.9896 6.89896 30.8333 6.89896ZM21.7683 4.29354H24.9519V15.4244H21.7683V4.29354ZM21.7683 0.670625L24.9519 0V2.59L21.7683 3.26833V0.678333V0.670625ZM18.4383 7.87792V15.4244H15.2625V4.29354H18.1146L18.2071 5.23396C18.9779 3.86958 20.5735 4.14708 20.9975 4.29354V7.215C20.5967 7.08396 19.2323 6.88354 18.4383 7.87792ZM11.8477 11.5162C11.8477 13.3894 13.8519 12.8112 14.2527 12.6417V15.2317C13.8287 15.4629 13.0656 15.6479 12.025 15.6479C11.5913 15.6606 11.1595 15.5849 10.756 15.4254C10.3525 15.2659 9.98559 15.026 9.6777 14.7203C9.36981 14.4146 9.12733 14.0494 8.96502 13.647C8.8027 13.2446 8.72395 12.8134 8.73354 12.3796L8.74125 2.22771L11.84 1.56479V4.29354H14.2604V7.01458H11.8477V11.524V11.5162ZM8.06292 12.0558C8.06292 14.3452 6.28229 15.6479 3.64604 15.6479C2.46306 15.647 1.29288 15.403 0.208125 14.931V11.9017C1.27188 12.4798 2.59771 12.9115 3.64604 12.9115C4.35521 12.9115 4.82542 12.7265 4.82542 12.1406C4.82542 10.6144 0 11.1848 0 7.66979C0 5.42667 1.7575 4.08542 4.33208 4.08542C5.38042 4.08542 6.42875 4.23958 7.48479 4.66354V7.65438C6.50888 7.14076 5.42694 6.86103 4.32438 6.83729C3.66146 6.83729 3.21438 7.03 3.21438 7.53104C3.21438 8.95708 8.06292 8.27875 8.06292 12.0635V12.0558Z"
                fill="#635BFF"
              />
--- a/apps/frontend/src/components/billing/main.billing.component.tsx
+++ b/apps/frontend/src/components/billing/main.billing.component.tsx
@ -6,7 +6,7 @@ import { Button } from '@gitroom/react/form/button';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { Subscription } from '@prisma/client';
 import { useDebouncedCallback } from 'use-debounce';
-import ReactLoading from 'react-loading';
+import ReactLoading from '@gitroom/frontend/components/layout/loading';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 import { useToaster } from '@gitroom/react/toaster/toaster';
 import dayjs from 'dayjs';
--- a/apps/frontend/src/components/launches/add.provider.component.tsx
+++ b/apps/frontend/src/components/launches/add.provider.component.tsx
@ -86,7 +86,7 @@ export const AddProviderButton: FC<{
          viewBox="0 0 16 16"
          fill="none"
        >
-          <g clip-path="url(#clip0_2452_193804)">
+          <g clipPath="url(#clip0_2452_193804)">
            <path
              d="M6.6668 8.66599C6.9531 9.04875 7.31837 9.36545 7.73783 9.59462C8.1573 9.82379 8.62114 9.96007 9.0979 9.99422C9.57466 10.0284 10.0532 9.95957 10.501 9.79251C10.9489 9.62546 11.3555 9.36404 11.6935 9.02599L13.6935 7.02599C14.3007 6.39732 14.6366 5.55531 14.629 4.68132C14.6215 3.80733 14.2709 2.97129 13.6529 2.35326C13.0348 1.73524 12.1988 1.38467 11.3248 1.37708C10.4508 1.36948 9.60881 1.70547 8.98013 2.31266L7.83347 3.45266M9.33347 7.33266C9.04716 6.94991 8.68189 6.6332 8.26243 6.40403C7.84297 6.17486 7.37913 6.03858 6.90237 6.00444C6.4256 5.97029 5.94708 6.03908 5.49924 6.20614C5.0514 6.3732 4.64472 6.63461 4.3068 6.97266L2.3068 8.97266C1.69961 9.60133 1.36363 10.4433 1.37122 11.3173C1.37881 12.1913 1.72938 13.0274 2.3474 13.6454C2.96543 14.2634 3.80147 14.614 4.67546 14.6216C5.54945 14.6292 6.39146 14.2932 7.02013 13.686L8.16013 12.546"
              stroke="currentColor"
--- a/apps/frontend/src/components/launches/ai.image.tsx
+++ b/apps/frontend/src/components/launches/ai.image.tsx
@ -1,7 +1,7 @@
 import { Button } from '@gitroom/react/form/button';
 import { FC, useCallback, useState } from 'react';
 import clsx from 'clsx';
-import Loading from 'react-loading';
+import Loading from '@gitroom/frontend/components/layout/loading';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
 import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
@ -91,7 +91,7 @@ ${type}
              viewBox="0 0 16 16"
              fill="none"
            >
-              <g clip-path="url(#clip0_2352_53053)">
+              <g clipPath="url(#clip0_2352_53053)">
                <path
                  d="M8.33333 2.00033H5.2C4.07989 2.00033 3.51984 2.00033 3.09202 2.21831C2.71569 2.41006 2.40973 2.71602 2.21799 3.09234C2 3.52017 2 4.08022 2 5.20032V10.8003C2 11.9204 2 12.4805 2.21799 12.9083C2.40973 13.2846 2.71569 13.5906 3.09202 13.7823C3.51984 14.0003 4.07989 14.0003 5.2 14.0003H11.3333C11.9533 14.0003 12.2633 14.0003 12.5176 13.9322C13.2078 13.7472 13.7469 13.2081 13.9319 12.518C14 12.2636 14 11.9536 14 11.3337M7 5.66699C7 6.40337 6.40305 7.00033 5.66667 7.00033C4.93029 7.00033 4.33333 6.40337 4.33333 5.66699C4.33333 4.93061 4.93029 4.33366 5.66667 4.33366C6.40305 4.33366 7 4.93061 7 5.66699ZM9.99336 7.94576L4.3541 13.0724C4.03691 13.3607 3.87831 13.5049 3.86429 13.6298C3.85213 13.738 3.89364 13.8454 3.97546 13.9173C4.06985 14.0003 4.28419 14.0003 4.71286 14.0003H10.9707C11.9301 14.0003 12.4098 14.0003 12.7866 13.8391C13.2596 13.6368 13.6365 13.2599 13.8388 12.7869C14 12.4101 14 11.9304 14 10.971C14 10.6482 14 10.4867 13.9647 10.3364C13.9204 10.1475 13.8353 9.97056 13.7155 9.81792C13.6202 9.69646 13.4941 9.59562 13.242 9.39396L11.3772 7.9021C11.1249 7.70026 10.9988 7.59935 10.8599 7.56373C10.7374 7.53234 10.6086 7.53641 10.4884 7.57545C10.352 7.61975 10.2324 7.72842 9.99336 7.94576ZM13 1.01074L12.5932 1.82425C12.4556 2.09958 12.3868 2.23724 12.2948 2.35653C12.2132 2.46238 12.1183 2.55728 12.0125 2.63887C11.8932 2.73083 11.7555 2.79966 11.4802 2.93732L10.6667 3.34408L11.4802 3.75083C11.7555 3.88849 11.8932 3.95732 12.0125 4.04928C12.1183 4.13087 12.2132 4.22577 12.2948 4.33162C12.3868 4.45091 12.4556 4.58857 12.5932 4.8639L13 5.67741L13.4068 4.8639C13.5444 4.58857 13.6132 4.45091 13.7052 4.33162C13.7868 4.22577 13.8817 4.13087 13.9875 4.04928C14.1068 3.95732 14.2445 3.88849 14.5198 3.75083L15.3333 3.34408L14.5198 2.93732C14.2445 2.79966 14.1068 2.73083 13.9875 2.63887C13.8817 2.55728 13.7868 2.46238 13.7052 2.35653C13.6132 2.23724 13.5444 2.09958 13.4068 1.82425L13 1.01074Z"
                  stroke="currentColor"
--- a/apps/frontend/src/components/launches/ai.video.tsx
+++ b/apps/frontend/src/components/launches/ai.video.tsx
@ -1,7 +1,7 @@
 import { Button } from '@gitroom/react/form/button';
 import React, { FC, useCallback, useState } from 'react';
 import clsx from 'clsx';
-import Loading from 'react-loading';
+import Loading from '@gitroom/frontend/components/layout/loading';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
 import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
@ -231,7 +231,7 @@ export const AiVideo: FC<{
                viewBox="0 0 16 16"
                fill="none"
              >
-                <g clip-path="url(#clip0_2352_53058)">
+                <g clipPath="url(#clip0_2352_53058)">
                  <path
                    d="M8.06916 14.1663V2.04134M4.97208 14.1663V11.1351M4.97208 5.07259V2.04134M11.1662 14.1663V11.1351M9.09973 2.02152L4.8482 2.04134C3.80748 2.04134 3.28712 2.04134 2.88962 2.23957C2.53997 2.41394 2.25569 2.69218 2.07754 3.0344C1.875 3.42345 1.875 3.93275 1.875 4.95134L1.875 11.2563C1.875 12.2749 1.875 12.7842 2.07754 13.1733C2.25569 13.5155 2.53997 13.7937 2.88962 13.9681C3.28712 14.1663 3.80748 14.1663 4.8482 14.1663H11.2901C12.3308 14.1663 12.8512 14.1663 13.2487 13.9681C13.5984 13.7937 13.8826 13.5155 14.0608 13.1733C14.2633 12.7842 14.2633 12.2749 14.2633 11.2563V7.61426M1.875 5.07259L9.09973 5.06116M1.875 11.1351H14.2633M12.8141 1.20801L12.3949 2.02152C12.253 2.29684 12.1821 2.4345 12.0873 2.55379C12.0032 2.65965 11.9054 2.75455 11.7963 2.83614C11.6734 2.92809 11.5315 2.99692 11.2478 3.13458L10.4094 3.54134L11.2478 3.9481C11.5315 4.08576 11.6734 4.15459 11.7963 4.24654C11.9054 4.32814 12.0032 4.42303 12.0873 4.52889C12.1821 4.64818 12.253 4.78584 12.3949 5.06116L12.8141 5.87467L13.2333 5.06116C13.3751 4.78584 13.4461 4.64818 13.5408 4.52889C13.6249 4.42303 13.7227 4.32814 13.8318 4.24654C13.9548 4.15459 14.0966 4.08576 14.3804 3.9481L15.2188 3.54134L14.3804 3.13458C14.0966 2.99692 13.9548 2.92809 13.8318 2.83614C13.7227 2.75455 13.6249 2.65965 13.5408 2.55379C13.4461 2.4345 13.3751 2.29684 13.2333 2.02152L12.8141 1.20801Z"
                    stroke="currentColor"
--- a/apps/frontend/src/components/launches/comments/comment.component.tsx
+++ b/apps/frontend/src/components/launches/comments/comment.component.tsx
@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, Fragment, useCallback, useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
 import { useModals } from '@gitroom/frontend/components/layout/new-modal';
@ -291,9 +291,8 @@ export const CommentComponent: FC<{

      <div>
        {commentsList.map((comment, index) => (
-          <>
+          <Fragment key={`comment_${index}_${comment.content}`}>
            <div
-              key={`comment_${index}_${comment.content}`}
              className={clsx(
                `flex relative flex-col`,
                comment?.childrenComment?.length && 'gap-[10px]'
@ -365,7 +364,7 @@ export const CommentComponent: FC<{
                />
              </div>
            </div>
-          </>
+          </Fragment>
        ))}
        <CommentBox type="textarea" onChange={addComment} />
      </div>
--- a/apps/frontend/src/components/launches/information.component.tsx
+++ b/apps/frontend/src/components/launches/information.component.tsx
@ -37,7 +37,7 @@ const Invalid: FC = () => {
      viewBox="0 0 16 16"
      fill="none"
    >
-      <g clip-path="url(#clip0_2482_97670)">
+      <g clipPath="url(#clip0_2482_97670)">
        <path
          d="M8.00049 6.00015V8.66682M8.00049 11.3335H8.00715M7.07737 2.59464L1.59411 12.0657C1.28997 12.591 1.1379 12.8537 1.16038 13.0693C1.17998 13.2573 1.2785 13.4282 1.4314 13.5394C1.60671 13.6668 1.91022 13.6668 2.51723 13.6668H13.4837C14.0908 13.6668 14.3943 13.6668 14.5696 13.5394C14.7225 13.4282 14.821 13.2573 14.8406 13.0693C14.8631 12.8537 14.711 12.591 14.4069 12.0657L8.92361 2.59463C8.62056 2.07119 8.46904 1.80947 8.27135 1.72157C8.09892 1.64489 7.90206 1.64489 7.72962 1.72157C7.53193 1.80947 7.38041 2.07119 7.07737 2.59464Z"
          stroke="white"
--- a/apps/frontend/src/components/launches/launches.component.tsx
+++ b/apps/frontend/src/components/launches/launches.component.tsx
@ -259,7 +259,6 @@ export const MenuComponent: FC<
            'data-tooltip-content': integration.name,
          }
        : {})}
-      key={integration.id}
      className={clsx(
        'flex gap-[12px] items-center bg-newBgColorInner hover:bg-boxHover group/profile transition-all rounded-e-[8px]',
        integration.refreshNeeded && 'cursor-pointer'
--- a/apps/frontend/src/components/launches/menu/menu.tsx
+++ b/apps/frontend/src/components/launches/menu/menu.tsx
@ -69,7 +69,7 @@ export const Menu: FC<{
  const ref = useClickOutside<HTMLDivElement>(() => {
    setShow(false);
  });
-  const showRef = useRef();
+  const showRef = useRef(undefined);

  // Adjust menu position if it would overflow viewport
  useLayoutEffect(() => {
--- a/apps/frontend/src/components/layout/check.payment.tsx
+++ b/apps/frontend/src/components/layout/check.payment.tsx
@ -1,5 +1,5 @@
 import { FC, ReactNode, useCallback, useEffect, useState } from 'react';
-import Loading from 'react-loading';
+import Loading from '@gitroom/frontend/components/layout/loading';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { timer } from '@gitroom/helpers/utils/timer';
 import { useToaster } from '@gitroom/react/toaster/toaster';
--- a/apps/frontend/src/components/layout/loading.tsx
+++ b/apps/frontend/src/components/layout/loading.tsx
@ -1,15 +1,39 @@
 'use client';

-import ReactLoading from 'react-loading';
 import { FC } from 'react';
+
+const Spinner: FC<{
+  type?: string;
+  color?: string;
+  width?: number;
+  height?: number;
+}> = ({ color = '#612bd3', width = 100, height = 100 }) => {
+  const size = Math.min(width, height);
+  const borderWidth = Math.max(2, Math.round(size / 8));
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        border: `${borderWidth}px solid transparent`,
+        borderTopColor: color,
+        borderRadius: '50%',
+        animation: 'spin 0.8s linear infinite',
+      }}
+    />
+  );
+};
+
+export { Spinner as default };
+
 export const LoadingComponent: FC<{
  width?: number;
  height?: number;
 }> = (props) => {
  return (
    <div className="flex-1 flex justify-center pt-[100px]">
-      <ReactLoading
-        type="spin"
+      <Spinner
        color="#612bd3"
        width={props.width || 100}
        height={props.height || 100}
--- a/apps/frontend/src/components/new-launch/a.component.tsx
+++ b/apps/frontend/src/components/new-launch/a.component.tsx
@ -47,7 +47,7 @@ export const AComponent: FC<{
        viewBox="0 0 16 16"
        fill="none"
      >
-        <g clip-path="url(#clip0_2452_193804)">
+        <g clipPath="url(#clip0_2452_193804)">
          <path
            d="M6.6668 8.66599C6.9531 9.04875 7.31837 9.36545 7.73783 9.59462C8.1573 9.82379 8.62114 9.96007 9.0979 9.99422C9.57466 10.0284 10.0532 9.95957 10.501 9.79251C10.9489 9.62546 11.3555 9.36404 11.6935 9.02599L13.6935 7.02599C14.3007 6.39732 14.6366 5.55531 14.629 4.68132C14.6215 3.80733 14.2709 2.97129 13.6529 2.35326C13.0348 1.73524 12.1988 1.38467 11.3248 1.37708C10.4508 1.36948 9.60881 1.70547 8.98013 2.31266L7.83347 3.45266M9.33347 7.33266C9.04716 6.94991 8.68189 6.6332 8.26243 6.40403C7.84297 6.17486 7.37913 6.03858 6.90237 6.00444C6.4256 5.97029 5.94708 6.03908 5.49924 6.20614C5.0514 6.3732 4.64472 6.63461 4.3068 6.97266L2.3068 8.97266C1.69961 9.60133 1.36363 10.4433 1.37122 11.3173C1.37881 12.1913 1.72938 13.0274 2.3474 13.6454C2.96543 14.2634 3.80147 14.614 4.67546 14.6216C5.54945 14.6292 6.39146 14.2932 7.02013 13.686L8.16013 12.546"
            stroke="currentColor"
--- a/apps/frontend/src/components/new-launch/editor.tsx
+++ b/apps/frontend/src/components/new-launch/editor.tsx
@ -562,7 +562,7 @@ export const Editor: FC<{
  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
  const t = useT();
  const toaster = useToaster();
-  const editorRef = useRef<undefined | { editor: any }>();
+  const editorRef = useRef<undefined | { editor: any }>(undefined);
  const [loading, setLoading] = useState(false);

  const uppy = useUppyUploader({
--- a/apps/frontend/src/components/new-launch/manage.modal.tsx
+++ b/apps/frontend/src/components/new-launch/manage.modal.tsx
@ -694,7 +694,7 @@ const Scrollable: FC<{
  scrollClasses: string;
  children: ReactNode;
 }> = ({ className, scrollClasses, children }) => {
-  const ref = useRef();
+  const ref = useRef(undefined);
  const hasScroll = useHasScroll(ref);
  return (
    <div className={clsx(className, hasScroll && scrollClasses)} ref={ref}>
--- a/apps/frontend/src/components/new-launch/providers/linkedin/linkedin.preview.tsx
+++ b/apps/frontend/src/components/new-launch/providers/linkedin/linkedin.preview.tsx
@ -390,7 +390,7 @@ export const LinkedinPreview: FC<{
            viewBox="0 0 18 25"
            fill="none"
          >
-            <g clip-path="url(#clip0_2511_140348)">
+            <g clipPath="url(#clip0_2511_140348)">
              <path
                d="M14.69 4.17L10.2 0H7.56L11.08 3.27H3.61C1.62 3.27 0 4.89 0 6.88V15.94H1.8V6.88C1.8 5.88 2.61 5.07 3.61 5.07H11.08L7.58 8.32H10.22L14.69 4.17Z"
                fill="currentColor"
@ -482,8 +482,8 @@ export const LinkedinPreview: FC<{
                          fill="#1485BD"
                        />
                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
+                          fillRule="evenodd"
+                          clipRule="evenodd"
                          d="M15.7769 9.49337H15.0318C14.964 9.49337 14.8286 9.24182 14.4899 8.88434C13.9886 8.35474 13.4331 7.6795 13.0402 7.30878C12.0654 6.48197 11.2686 5.4738 10.6965 4.34304C10.3713 3.6678 10.3442 3.36328 9.68038 3.36328C9.41819 3.39637 9.17864 3.5255 9.01014 3.72458C8.84164 3.92366 8.75676 4.17783 8.77267 4.43572C8.77267 4.62108 8.86751 5.26983 8.90815 5.49491C9.19833 6.53009 9.65567 7.51338 10.2629 8.4077H10.9945H5.19604C5.03181 8.40533 4.86888 8.43654 4.71771 8.49931C4.56654 8.56209 4.43047 8.65505 4.31821 8.77223C4.20596 8.88941 4.12001 9.02823 4.06587 9.17978C4.01173 9.33132 3.9906 9.49226 4.00383 9.65225C4.02471 9.96246 4.16748 10.2528 4.40229 10.4625C4.63709 10.6722 4.94577 10.7852 5.26378 10.7776H5.48055C5.34176 10.7811 5.20503 10.8112 5.07816 10.8663C4.95129 10.9214 4.83678 11.0004 4.74116 11.0988C4.64554 11.1971 4.57069 11.3129 4.52089 11.4396C4.47108 11.5662 4.44731 11.7012 4.45091 11.8368C4.45326 12.1036 4.55728 12.36 4.74266 12.5558C4.92804 12.7517 5.18147 12.873 5.45345 12.896C5.28789 13.0198 5.16238 13.1876 5.09194 13.3794C5.0215 13.5711 5.00913 13.7786 5.05632 13.977C5.10351 14.1755 5.20824 14.3564 5.35797 14.4981C5.50771 14.6398 5.69609 14.7364 5.90053 14.7761C5.77072 14.9963 5.72737 15.2552 5.7786 15.5043C5.84797 15.7489 5.99897 15.9638 6.2076 16.1149C6.41624 16.266 6.67055 16.3447 6.93017 16.3384H10.0326C10.4391 16.3384 10.8441 16.2881 11.2384 16.1928L13.1622 15.6367H15.7363C17.1181 15.5837 17.4839 9.49337 15.7769 9.49337Z"
                          fill="#E6F7FF"
                        />
--- a/apps/frontend/src/components/new-launch/select.current.tsx
+++ b/apps/frontend/src/components/new-launch/select.current.tsx
@ -16,7 +16,7 @@ import {
  useModals,
 } from '@gitroom/frontend/components/layout/new-modal';

-export function useHasScroll(ref: RefObject<HTMLElement>): boolean {
+export function useHasScroll(ref: RefObject<HTMLElement | null>): boolean {
  const [hasHorizontalScroll, setHasHorizontalScroll] = useState(false);

  useEffect(() => {
--- a/apps/frontend/src/components/notifications/notification.component.tsx
+++ b/apps/frontend/src/components/notifications/notification.component.tsx
@ -5,7 +5,7 @@ import useSWR from 'swr';
 import { FC, useCallback, useState } from 'react';
 import clsx from 'clsx';
 import { useClickAway } from '@uidotdev/usehooks';
-import ReactLoading from 'react-loading';
+import ReactLoading from '@gitroom/frontend/components/layout/loading';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
 function replaceLinks(text: string) {
  const urlRegex =
--- a/apps/frontend/src/components/preview/render.preview.date.client.tsx
+++ b/apps/frontend/src/components/preview/render.preview.date.client.tsx
@ -0,0 +1,15 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const RenderPreviewDate = dynamic(
+  () =>
+    import('@gitroom/frontend/components/preview/render.preview.date').then(
+      (mod) => mod.RenderPreviewDate
+    ),
+  { ssr: false }
+);
+
+export const RenderPreviewDateClient = ({ date }: { date: string }) => {
+  return <RenderPreviewDate date={date} />;
+};
--- a/apps/frontend/src/components/settings/github.component.tsx
+++ b/apps/frontend/src/components/settings/github.component.tsx
@ -2,7 +2,7 @@

 import Image from 'next/image';
 import { Button } from '@gitroom/react/form/button';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, Fragment, useCallback, useEffect, useState } from 'react';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 import { Input } from '@gitroom/react/form/input';
@ -180,7 +180,7 @@ export const GithubComponent: FC<{
  return (
    <>
      {githubState.map((g) => (
-        <>
+        <Fragment key={g.id}>
          {!g.login ? (
            <ConnectComponent
              deleteRepository={deleteConnect(g)}
@ -191,7 +191,7 @@ export const GithubComponent: FC<{
          ) : (
            <ConnectedComponent deleteRepository={deleteConnect(g)} {...g} />
          )}
-        </>
+        </Fragment>
      ))}
      {githubState.filter((f) => !f.login).length === 0 && (
        <div className="my-[16px] mt-[16px] h-[90px] bg-sixth border-fifth border rounded-[4px] p-[24px]">
--- a/apps/frontend/src/components/settings/metric.component.tsx
+++ b/apps/frontend/src/components/settings/metric.component.tsx
@ -34,12 +34,11 @@ const MetricComponent = () => {
  return (
    <div className="my-[16px] mt-[16px] bg-sixth border-fifth border rounded-[4px] p-[24px] flex flex-col gap-[24px]">
      <div className="mt-[4px]">Date Metrics</div>
-      <Select name="metric" disableForm={true} label="" onChange={changeMetric}>
+      <Select name="metric" disableForm={true} label="" onChange={changeMetric} value={currentMetric ? 'US' : 'GLOBAL'}>
        {dateMetrics.map((metric) => (
          <option
            key={metric.value}
            value={metric.value}
-            selected={currentMetric === (metric.value === 'US')}
          >
            {metric.label}
          </option>
--- a/apps/frontend/src/components/settings/signatures.component.tsx
+++ b/apps/frontend/src/components/settings/signatures.component.tsx
@ -225,10 +225,10 @@ const AddOrRemoveSignature: FC<{
              setValueAs: (value) => value === 'true',
            })}
          >
-            <option value="false" selected={!autoAdd}>
+            <option value="false">
              {t('no', 'No')}
            </option>
-            <option value="true" selected={autoAdd}>
+            <option value="true">
              {t('yes', 'Yes')}
            </option>
          </Select>
--- a/apps/frontend/src/components/ui/icons/index.tsx
+++ b/apps/frontend/src/components/ui/icons/index.tsx
@ -795,9 +795,9 @@ export const NoMediaIcon: FC = () => {
          <path
            d="M109.75 59.0141C104.489 59.0141 113.46 -5.73557 91.0289 1.57563C69.7021 8.5269 99.5229 59.0141 94.5119 59.0141C89.5009 59.0141 54.4775 56.107 52.1458 71.9377C49.5418 89.6178 95.4225 79.7216 96.7894 81.9895C98.1563 84.2573 78.775 111.109 91.0289 119.324C103.724 127.835 119.934 96.3491 122.711 96.3491C125.489 96.3491 139.845 147.93 151.514 133.684C160.997 122.106 138.391 96.3491 142.873 96.3491C147.355 96.3491 180.793 98.9658 186.076 81.9895C192.534 61.2424 134.828 76.0575 131.352 71.9377C127.876 67.818 159.167 34.7484 142.873 25.987C126.785 17.3361 115.012 59.0141 109.75 59.0141Z"
            stroke="#DACBFB"
-            stroke-opacity="0.4"
-            stroke-width="2"
-            stroke-linecap="round"
+            strokeOpacity="0.4"
+            strokeWidth="2"
+            strokeLinecap="round"
          />
          <rect
            x="22.6328"
--- a/apps/frontend/src/components/ui/is.scroll.hook.tsx
+++ b/apps/frontend/src/components/ui/is.scroll.hook.tsx
@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';

 export function useHasScroll(
-  ref: React.RefObject<HTMLElement>,
+  ref: React.RefObject<HTMLElement | null>,
 ) {
  const [hasScroll, setHasScroll] = useState(false);
  useEffect(() => {
--- a/apps/frontend/src/middleware.ts
+++ b/apps/frontend/src/middleware.ts
@ -12,7 +12,7 @@ import {
 acceptLanguage.languages(languages);

 // This function can be marked `async` if using `await` inside
-export async function middleware(request: NextRequest) {
+export async function proxy(request: NextRequest) {
  const nextUrl = request.nextUrl;
  const authCookie =
    request.cookies.get('auth') ||
--- a/apps/frontend/tailwind.config.cjs
+++ b/apps/frontend/tailwind.config.cjs
--- a/libraries/helpers/src/utils/internal.fetch.ts
+++ b/libraries/helpers/src/utils/internal.fetch.ts
@ -1,9 +1,11 @@
 import { cookies } from 'next/headers';
 import { customFetch } from '@gitroom/helpers/utils/custom.fetch.func';

-export const internalFetch = (url: string, options: RequestInit = {}) =>
-  customFetch(
+export const internalFetch = async (url: string, options: RequestInit = {}) => {
+  const cookieStore = await cookies();
+  return customFetch(
    { baseUrl: process.env.BACKEND_INTERNAL_URL! },
-    cookies()?.get('auth')?.value!,
-    cookies()?.get('showorg')?.value!
+    cookieStore?.get('auth')?.value!,
+    cookieStore?.get('showorg')?.value!
  )(url, options);
+};
--- a/libraries/nestjs-libraries/src/services/stripe.service.ts
+++ b/libraries/nestjs-libraries/src/services/stripe.service.ts
@ -169,7 +169,7 @@ export class StripeService {

    const users = await this._organizationService.getTeam(organization.id);
    const customer = await stripe.customers.create({
-      email: users.users[0].user.email,
+      email: users.users[0].user.email.indexOf('@') > -1 ? users.users[0].user.email : `${users.users[0].user.email}@postiz.com`,
      name: organization.name,
    });
    await this._subscriptionService.updateCustomerId(
@ -434,7 +434,7 @@ export class StripeService {

    try {
      await stripe.customers.update(customer, {
-        email: user.email,
+        email: user.email.indexOf('@') > -1 ? user.email : `${user.email}@postiz.com`,
        ...(body.dub
          ? {
              metadata: {
--- a/libraries/react-shared-libraries/src/form/button.tsx
+++ b/libraries/react-shared-libraries/src/form/button.tsx
@ -9,7 +9,22 @@ import {
  useState,
 } from 'react';
 import { clsx } from 'clsx';
-import ReactLoading from 'react-loading';
+const ReactLoading = ({ color = '#fff', width = 20, height = 20 }: { type?: string; color?: string; width?: number; height?: number }) => {
+  const size = Math.min(width, height);
+  const borderWidth = Math.max(2, Math.round(size / 8));
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        border: `${borderWidth}px solid transparent`,
+        borderTopColor: color,
+        borderRadius: '50%',
+        animation: 'spin 0.8s linear infinite',
+      }}
+    />
+  );
+};
 export const Button: FC<
  DetailedHTMLProps<
    ButtonHTMLAttributes<HTMLButtonElement>,
@ -19,7 +34,7 @@ export const Button: FC<
    loading?: boolean;
    innerClassName?: string;
  }
-> = ({ children, loading, innerClassName, ...props }) => {
+> = ({ children, loading, innerClassName, secondary, ...props }) => {
  const ref = useRef<HTMLButtonElement | null>(null);
  const [height, setHeight] = useState<number | null>(null);
  useEffect(() => {
@ -33,7 +48,7 @@ export const Button: FC<
      className={clsx(
        (props.disabled || loading) && 'opacity-50 pointer-events-none',
        `${
-          props.secondary ? 'bg-third' : 'bg-forth text-white'
+          secondary ? 'bg-third' : 'bg-forth text-white'
        } px-[24px] h-[40px] cursor-pointer items-center justify-center flex relative`,
        props?.className
      )}
--- a/package.json
+++ b/package.json
@ -76,7 +76,7 @@
    "@nestjs/swagger": "^7.3.0",
    "@nestjs/throttler": "^6.3.0",
    "@neynar/nodejs-sdk": "^3.112.0",
-    "@neynar/react": "^0.9.7",
+    "@neynar/react": "^1.2.22",
    "@pigment-css/react": "^0.0.30",
    "@postiz/wallets": "^0.0.1",
    "@prisma/client": "6.5.0",
@ -186,7 +186,7 @@
    "nestjs-command": "^3.1.4",
    "nestjs-real-ip": "^3.0.1",
    "nestjs-temporal-core": "^3.2.0",
-    "next": "14.2.35",
+    "next": "16.2.1",
    "next-plausible": "^3.12.0",
    "node-fetch": "^3.3.2",
    "node-telegram-bot-api": "^0.66.0",
@ -197,12 +197,12 @@
    "parse5": "^6.0.1",
    "polotno": "^2.10.5",
    "posthog-js": "^1.178.0",
-    "react": "18.3.1",
+    "react": "19.1.0",
    "react-colorful": "^5.6.1",
    "react-country-flag": "^3.1.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.1.0",
    "react-dropzone": "^14.3.5",
    "react-hook-form": "^7.58.1",
    "react-hotkeys-hook": "^5.1.0",
@ -261,7 +261,7 @@
    "@swc/cli": "0.3.14",
    "@swc/core": "1.5.7",
    "@tailwindcss/vite": "^4.0.17",
-    "@testing-library/react": "15.0.6",
+    "@testing-library/react": "16.3.0",
    "@types/cache-manager-redis-store": "^2.0.4",
    "@types/chrome": "^0.0.319",
    "@types/compression": "^1.8.1",
@ -269,8 +269,8 @@
    "@types/jest": "29.5.12",
    "@types/node": "18.16.9",
    "@types/node-telegram-bot-api": "^0.64.7",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
    "@types/uuid": "^9.0.8",
    "@types/webextension-polyfill": "^0.12.3",
    "@types/yargs": "^17.0.32",
@ -283,7 +283,7 @@
    "babel-jest": "29.7.0",
    "cross-env": "^10.0.0",
    "eslint": "8.57.0",
-    "eslint-config-next": "15.2.1",
+    "eslint-config-next": "16.2.1",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
@ -318,7 +318,11 @@
  },
  "pnpm": {
    "overrides": {
-      "next": "14.2.35"
+      "next": "16.2.1",
+      "react": "19.1.0",
+      "react-dom": "19.1.0",
+      "@types/react": "19.1.8",
+      "@types/react-dom": "19.1.6"
    },
    "onlyBuiltDependencies": [
      "bcrypt"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml