Merge pull request #16 from jhbruhn/feature/show-browser-hint

feature: Add browser compatibility detection for Web Bluetooth

.github/workflows/autolabel.yaml

@@ -1,3 +1,5 @@
+name: Autolabel
+
 on:
   pull_request:
     types: [opened, reopened, synchronize]

src/App.tsx

@@ -12,6 +12,7 @@ import { BluetoothDevicePicker } from './components/BluetoothDevicePicker';
 import { getErrorDetails } from './utils/errorCodeHelpers';
 import { getStateVisualInfo } from './utils/machineStateHelpers';
 import { CheckCircleIcon, BoltIcon, PauseCircleIcon, ExclamationTriangleIcon, ArrowPathIcon, XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/solid';
+import { isBluetoothSupported } from './utils/bluetoothSupport';
 import './App.css';
 
 function App() {
@@ -333,8 +334,10 @@ function App() {
         <div className="flex-1 grid grid-cols-1 lg:grid-cols-[480px_1fr] gap-4 md:gap-5 lg:gap-6 lg:overflow-hidden">
           {/* Left Column - Controls */}
           <div className="flex flex-col gap-4 md:gap-5 lg:gap-6 lg:overflow-hidden">
-            {/* Connect Button - Show when disconnected */}
+            {/* Connect Button or Browser Hint - Show when disconnected */}
             {!isConnected && (
+              <>
+                {isBluetoothSupported() ? (
                   <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md border-l-4 border-gray-400 dark:border-gray-600">
                     <div className="flex items-start gap-3 mb-3">
                       <div className="w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5">
@@ -354,6 +357,37 @@ function App() {
                       Connect to Machine
                     </button>
                   </div>
+                ) : (
+                  <div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-lg shadow-md border-l-4 border-amber-500 dark:border-amber-600">
+                    <div className="flex items-start gap-3">
+                      <ExclamationTriangleIcon className="w-6 h-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-base font-semibold text-amber-900 dark:text-amber-100 mb-2">Browser Not Supported</h3>
+                        <p className="text-sm text-amber-800 dark:text-amber-200 mb-3">
+                          Your browser doesn't support Web Bluetooth, which is required to connect to your embroidery machine.
+                        </p>
+                        <div className="space-y-2">
+                          <p className="text-sm font-semibold text-amber-900 dark:text-amber-100">Please try one of these options:</p>
+                          <ul className="text-sm text-amber-800 dark:text-amber-200 space-y-1.5 ml-4 list-disc">
+                            <li>Use a supported browser (Chrome, Edge, or Opera)</li>
+                            <li>
+                              Download the Desktop app from{' '}
+                              <a
+                                href="https://github.com/jhbruhn/respira/releases/latest"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="font-semibold underline hover:text-amber-900 dark:hover:text-amber-50 transition-colors"
+                              >
+                                GitHub Releases
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </>
             )}
 
             {/* Pattern File - Show during upload stage (before pattern is uploaded) */}

src/utils/bluetoothSupport.ts

@@ -0,0 +1,17 @@
+/**
+ * Check if the current browser/environment supports Web Bluetooth API
+ * @returns true if Web Bluetooth is supported (or running in Electron), false otherwise
+ */
+export function isBluetoothSupported(): boolean {
+  // Always supported in Electron app
+  if (typeof window !== "undefined" && "electronAPI" in window) {
+    return true;
+  }
+
+  // Check for Web Bluetooth API support in browser
+  if (typeof navigator !== "undefined" && "bluetooth" in navigator) {
+    return true;
+  }
+
+  return false;
+}