From 3f3aa3c79af4bc318408729238d2bc3c67d08870 Mon Sep 17 00:00:00 2001
From: Hakan Shehu <hakanshehu15@gmail.com>
Date: Mon, 21 Jul 2025 10:17:45 +0200
Subject: [PATCH] Add a message that Colanode is not supported in mobile
 devices (#143)

---
 .../src/components/mobile-not-supported.tsx   | 23 +++++++++++++++++++
 apps/web/src/lib/utils.ts                     |  7 ++++++
 apps/web/src/main.tsx                         | 11 +++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/mobile-not-supported.tsx

diff --git a/apps/web/src/components/mobile-not-supported.tsx b/apps/web/src/components/mobile-not-supported.tsx
new file mode 100644
index 00000000..dafb147f
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index de9c0b09..03a51e9f 100644
--- a/apps/web/src/lib/utils.ts
+++ b/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);
+};
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 9f9053e1..79aaba18 100644
--- a/apps/web/src/main.tsx
+++ b/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 />);