Add a message that Colanode is not supported in mobile devices (#143)

apps/web/src/components/mobile-not-supported.tsx

@@ -0,0 +1,23 @@
+import { Smartphone } from 'lucide-react';
+
+export const MobileNotSupported = () => {
+  return (
+    <div className="min-w-screen flex h-full min-h-screen w-full items-center justify-center">
+      <div className="flex flex-col items-center gap-8 text-center w-128">
+        <Smartphone className="h-10 w-10 text-gray-800" />
+        <h2 className="text-4xl text-gray-800">Mobile not supported</h2>
+        <p className="text-sm text-gray-500">
+          Hey there! Thanks for checking out Colanode.
+        </p>
+        <p className="text-sm text-gray-500">
+          Right now, Colanode is not quite ready for mobile devices just yet.
+          For the best experience, please hop onto a desktop or laptop. We're
+          working hard to bring you an awesome mobile experience soon.
+        </p>
+        <p className="text-sm text-gray-500 mt-4">
+          Thanks for your patience and support!
+        </p>
+      </div>
+    </div>
+  );
+};

apps/web/src/lib/utils.ts

@@ -16,3 +16,10 @@ export const isOpfsSupported = async (): Promise<boolean> => {
     return false;
   }
 };
+
+const mobileDeviceRegex =
+  /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i;
+
+export const isMobileDevice = (): boolean => {
+  return mobileDeviceRegex.test(navigator.userAgent);
+};

apps/web/src/main.tsx

@@ -3,14 +3,21 @@ import { createRoot } from 'react-dom/client';
 
 import { eventBus } from '@colanode/client/lib';
 import { BrowserNotSupported } from '@colanode/web/components/browser-not-supported';
+import { MobileNotSupported } from '@colanode/web/components/mobile-not-supported';
 import { ColanodeWorkerApi } from '@colanode/web/lib/types';
-import { isOpfsSupported } from '@colanode/web/lib/utils';
+import { isMobileDevice, isOpfsSupported } from '@colanode/web/lib/utils';
 import { Root } from '@colanode/web/root';
 import DedicatedWorker from '@colanode/web/workers/dedicated?worker';
 
 const initializeApp = async () => {
-  const hasOpfsSupport = await isOpfsSupported();
+  const isMobile = isMobileDevice();
+  if (isMobile) {
+    const root = createRoot(document.getElementById('root') as HTMLElement);
+    root.render(<MobileNotSupported />);
+    return;
+  }
 
+  const hasOpfsSupport = await isOpfsSupported();
   if (!hasOpfsSupport) {
     const root = createRoot(document.getElementById('root') as HTMLElement);
     root.render(<BrowserNotSupported />);