fix: checks hydration issues

src/app/components/Checks.tsx

@@ -1,9 +1,15 @@
 'use client';
 
-import { AlertDialog, Button, Flex, Heading, Text } from '@radix-ui/themes';
+import {
+  AlertDialog,
+  Button,
+  Flex,
+  Heading,
+  Link,
+  Text,
+} from '@radix-ui/themes';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Link } from '../../components/Link';
 import { extendAuth } from '../../core/blitz/extendAuth';
 import { logout } from '../../core/blitz/logout';
 import isDev from '../../core/blitzkit/isDev';
@@ -20,6 +26,7 @@ export function Checks() {
   );
   const pathname = usePathname();
   const isLegal = pathname.startsWith('/legal');
+  const [showPoliciesAgreement, setShowPoliciesAgreement] = useState(false);
 
   useEffect(() => {
     setShowDevBuildAlert(
@@ -29,6 +36,11 @@ export function Checks() {
           DEV_BUILD_AGREEMENT_COOLDOWN,
     );
   }, []);
+  useEffect(() => {
+    setShowPoliciesAgreement(
+      policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX && !isLegal,
+    );
+  }, [policiesAgreementIndex, isLegal]);
 
   useEffect(() => {
     if (!login) return;
@@ -72,8 +84,7 @@ export function Checks() {
         </AlertDialog.Content>
       </AlertDialog.Root>
 
-      {policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX &&
-        !isLegal && (
+      {showPoliciesAgreement && (
         <Flex
           align="end"
           style={{
@@ -112,14 +123,13 @@ export function Checks() {
                 <Text>
                   This website utilizes cookies to perform analytics and
                   personalize your experience. You can learn more through{' '}
-                    <Link href="/legal/privacy-policy">our privacy policy</Link>
-                    . You may opt out of personalized advertizement by visiting{' '}
+                  <Link href="/legal/privacy-policy">our privacy policy</Link>.
+                  You may opt out of personalized advertizement by visiting{' '}
                   <Link href="https://www.google.com/settings/ads">
                     Google Ad Settings
                   </Link>
                   . By using BlitzKit, you also agree to our{' '}
-                    <Link href="/legal/terms-of-service">terms of service</Link>
-                    .
+                  <Link href="/legal/terms-of-service">terms of service</Link>.
                 </Text>
               </Flex>
 

src/app/layout.tsx

@@ -5,9 +5,7 @@ import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
-import { ReactNode, Suspense } from 'react';
-import { Footer } from '../components/Footer';
-import { Loader } from '../components/Loader';
+import { ReactNode } from 'react';
 import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import { Checks } from './components/Checks';
@@ -72,7 +70,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
             <Checks />
 
-            <Suspense
+            {/* <Suspense
               fallback={
                 <div style={{ flex: 1 }}>
                   <Loader />
@@ -80,9 +78,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
               }
             >
               {children}
-            </Suspense>
+            </Suspense> */}
 
-            {!isEmbed && <Footer />}
+            {/* {!isEmbed && <Footer />} */}
           </Flex>
         </Theme>
       </body>

src/components/Navbar/index.tsx

@@ -190,6 +190,7 @@ export default function Navbar() {
         <Flex mt="6" gap="3" justify="center" wrap="wrap">
           {TOOLS.filter((tool) => !tool.href).map((tool) => (
             <Link
+              key={tool.id}
               href={tool.href ?? `/tools/${tool.id}`}
               target={tool.href ? '_blank' : undefined}
               className={styles.toolCard}