fix: add allowClickOutside prop to Modal for improved interaction

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }

platforms/blabsy/src/components/layout/common-layout.tsx

@@ -2,77 +2,139 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
 import { Aside } from '@components/aside/aside';
 import { Suggestions } from '@components/aside/suggestions';
 import { Placeholder } from '@components/common/placeholder';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect, useRef } from 'react';
 import { Modal } from '@components/modal/modal';
 import { Button } from '@components/ui/button';
-import { useAuth } from '@lib/context/auth-context';
 
 export type LayoutProps = {
  children: ReactNode;
 };
 
+const DISCLAIMER_KEY = 'blabsy-disclaimer-accepted';
+
+// Safe localStorage access for restricted environments
+const safeGetItem = (key: string): string | null => {
+ try {
+ return localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const safeSetItem = (key: string, value: string): void => {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ // Silently fail in restricted environments
+ }
+};
+
 export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
  const user = useRequireAuth();
- const { signOut } = useAuth();
 
  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false);
+ const [showHint, setShowHint] = useState(false);
+ const [isPulsing, setIsPulsing] = useState(false);
+
+ useEffect(() => {
+ let accepted = false;
+ try {
+ accepted = localStorage.getItem(DISCLAIMER_KEY) === 'true';
+ } catch {
+ // Storage may be unavailable; fall back to session-only acceptance.
+ }
+ setDisclaimerAccepted(accepted);
+ setDisclaimerChecked(true);
+ }, []);
+
+ const pulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+ const handleOutsideClick = () => {
+ setIsPulsing(true);
+ setShowHint(true);
+ if (pulseTimeoutRef.current) clearTimeout(pulseTimeoutRef.current);
+ pulseTimeoutRef.current = setTimeout(() => setIsPulsing(false), 400);
+ };
  if (!user) return <Placeholder />;
+ if (!disclaimerChecked) return <></>;
+ if (disclaimerAccepted) return <>{children}</>;
 
  return (
  <>
  {children}
- {!disclaimerAccepted ? (
- <Modal
- open={!disclaimerAccepted}
- closeModal={() => signOut()}
- className='max-w-lg mx-auto mt-24'
- modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
+ <Modal
+ open={true}
+ closeModal={handleOutsideClick}
+ className='max-w-lg mx-auto mt-24'
+ modalClassName={`bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2 ${isPulsing ? 'animate-pulse-scale' : ''}`}
+ >
+ <style>{`
+ @keyframes pulse-scale {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.01); }
+ 50% { transform: scale(0.99); }
+ 75% { transform: scale(1.005); }
+ 100% { transform: scale(1); }
+ }
+ .animate-pulse-scale {
+ animation: pulse-scale 0.4s ease-in-out;
+ }
+ `}</style>
+ <h1 className='text-xl text-center font-bold'>
+ Disclaimer from MetaState Foundation
+ </h1>
+ <p className='font-bold'>⚠️ Please note:</p>
+ <p>
+ Blabsy is a <b>functional prototype</b>, intended to
+ showcase <b>interoperability</b> and core concepts of
+ the W3DS ecosystem.
+ </p>
+ <p>
+ <b>It is not a production-grade platform</b> and may
+ lack full reliability, performance, and security
+ guarantees.
+ </p>
+ <p>
+ We <b>strongly recommend</b> that you avoid sharing{' '}
+ <b>sensitive or private content</b>, and kindly ask for
+ your understanding regarding any bugs, incomplete
+ features, or unexpected behaviours.
+ </p>
+ <p>
+ The app is still in development, so we kindly ask for
+ your understanding regarding any potential issues. If
+ you experience issues or have feedback, feel free to
+ contact us at:
+ </p>
+ <a
+ href='mailto:info@metastate.foundation'
+ className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400'
  >
- <h1 className='text-xl text-center font-bold'>
- Disclaimer from MetaState Foundation
- </h1>
- <p className='font-bold'>⚠️ Please note:</p>
- <p>
- Blabsy is a <b>functional prototype</b>, intended to
- showcase <b>interoperability</b> and core concepts of
- the W3DS ecosystem.
- </p>
- <p>
- <b>It is not a production-grade platform</b> and may
- lack full reliability, performance, and security
- guarantees.
- </p>
- <p>
- We <b>strongly recommend</b> that you avoid sharing{' '}
- <b>sensitive or private content</b>, and kindly ask for
- your understanding regarding any bugs, incomplete
- features, or unexpected behaviours.
- </p>
- <p>
- The app is still in development, so we kindly ask for
- your understanding regarding any potential issues. If
- you experience issues or have feedback, feel free to
- contact us at:
- </p>
- <a
- href='mailto:info@metastate.foundation'
- className='outline-none'
- >
- info@metastate.foundation
- </a>
+ info@metastate.foundation
+ </a>
+ <div className='relative mt-4'>
+ {showHint && (
+ <div className='mb-2 text-xs text-center text-yellow-400 bg-yellow-900/30 px-3 py-2 rounded'>
+ 💡 You must accept the disclaimer to continue. This will only appear once.
+ </div>
+ )}
  <Button
  type='button'
- className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+ className='w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
+
  onClick={() => {
+ try {
+ localStorage.setItem(DISCLAIMER_KEY, 'true');
+ } catch {
+ // Ignore storage failures; allow access for this session.
+ }
  setDisclaimerAccepted(true);
  }}
  >
  I Understand
  </Button>
- </Modal>
- ) : (
- <></>
- )}
+ </div>
+ </Modal>
  </>
  );
 }