add PWA detector

client/src/App.tsx

@@ -4,6 +4,7 @@ import Settings from "./components/Settings";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Thread from "./components/Thread";
 import Header from "./components/Header/Header";
+import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
 
 function App() {
 
@@ -15,6 +16,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/thread/:id" element={<Thread />} />
       </Routes>
+      <AddToHomeScreenPrompt/>
     </Router>
   );
 }

client/src/components/Forms/PostFormCard.tsx

@@ -267,7 +267,7 @@ const NewNoteCard = ({
                             </div>
                             <button
                                 type="submit"
-                                className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile || comment === "" ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
+                                className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
                                 disabled={doingWorkProp || uploadingFile}
                             >
                                 Submit

client/src/components/Header/Header.tsx

@@ -19,9 +19,6 @@ export default function Header() {
           href="/settings"
           className="text-neutral-300 inline-flex gap-4 items-center"
         >
-          <button>
-            <QuestionMarkCircleIcon className="h-5 w-5" />
-          </button>
           <button>
             <Cog6ToothIcon className="h-5 w-5" />
           </button>

client/src/components/Modals/CheckMobile/CheckMobile.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { ArrowUpOnSquareIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
+
+declare global {
+    interface Navigator {
+        standalone?: boolean;
+    }
+}
+
+const AddToHomeScreenPrompt: React.FC = () => {
+    const [inMobileBrowser, setInMobileBrowser] = useState(false);
+
+    useEffect(() => {
+        const checkPWA = () => {
+            return (
+                !window.navigator.standalone ||
+                !window.matchMedia('(display-mode: standalone)').matches
+            );
+        };
+
+        // Function to detect mobile browser
+        const detectMobileBrowser = () => {
+            return (
+                (navigator.userAgent.match(/Android/i) ||
+                    navigator.userAgent.match(/webOS/i) ||
+                    navigator.userAgent.match(/iPhone/i) ||
+                    navigator.userAgent.match(/iPad/i) ||
+                    navigator.userAgent.match(/iPod/i) ||
+                    navigator.userAgent.match(/Windows Phone/i))
+            );
+        };
+
+        const timer = setTimeout(() => {
+            setInMobileBrowser(Boolean(checkPWA() && detectMobileBrowser()));
+        }, 2000); // 3000 milliseconds = 3 seconds
+
+        // Cleanup function to clear the timeout if the component unmounts before the timeout finishes
+        return () => clearTimeout(timer);
+    }, []);
+
+    if (!inMobileBrowser) {
+        return null;
+    }
+
+    return (
+        <div className="overscroll-contain fixed inset-0 bg-gray-800/40 flex items-center justify-center animate-fade-in">
+            <div className="fixed bottom-0 left-0 right-0 p-4 bg-neutral-900 rounded-lg m-2 border border-neutral-700 shadow-md flex justify-between items-center animate-slide-up">
+                <div className="flex flex-col text-white">
+                    <span className="font-semibold">Stay Wired</span>
+                    <p className="text-xs">Add Wired to your home screen for a better experience</p>
+                    <ul className="list-none mt-2 text-sm">
+                        <li>
+                            <div className="flex items-center">
+                                <span className="mr-2">{'>'}</span> Click on <ArrowUpOnSquareIcon className="h-6 w-6 ml-1 text-blue-500" /> <span className="font-semibold text-blue-500">Share</span>
+                            </div>
+                        </li>
+                        <li>
+                            <div className="flex items-center">
+                                <span className="mr-2">{'>'}</span> Click <PlusCircleIcon className="h-6 w-6 ml-1 text-blue-500" /> <span className="font-semibold text-blue-500">Add to Home Screen</span>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <button className="absolute top-2 right-2" onClick={() => {setInMobileBrowser(!inMobileBrowser);}}>
+                    <XMarkIcon className="h-6 w-6 text-white" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default AddToHomeScreenPrompt;

client/tailwind.config.js

@@ -2,7 +2,22 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        'fade-in': 'fadeIn 0.25s ease-in-out',
+        'slide-up': 'slideUp 0.25s ease-in-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
+    },
   },
   plugins: [
     require('@tailwindcss/forms'),