From bdec63bcf15d840bca535506a988ad62c45096df Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Mon, 12 Aug 2024 19:02:36 +1000
Subject: [PATCH] loading state UI changes

---
 client/src/App.tsx                            |  2 ++
 client/src/components/Forms/PostFormCard.tsx  |  2 +-
 .../Modals/CheckMobile/CheckMobile.tsx        | 10 ++++-----
 client/src/components/Modals/OptionsBar.tsx   |  2 +-
 client/src/components/Modals/Placeholder.tsx  |  2 +-
 client/src/components/TestUI.tsx              | 21 +++++++++++++++++++
 client/src/components/Thread.tsx              |  6 +++++-
 7 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/TestUI.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 32f3bd1..43e5340 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -6,6 +6,7 @@ import Thread from "./components/Thread";
 import Header from "./components/Header/Header";
 import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
 import Notifications from "./components/Notifications";
+import TestUI from "./components/TestUI";
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/thread/:id" element={<Thread />} />
         <Route path="/notifications" element={<Notifications />} />
+        <Route path="/test" element={<TestUI />} />
       </Routes>
       <AddToHomeScreenPrompt/>
     </Router>
diff --git a/client/src/components/Forms/PostFormCard.tsx b/client/src/components/Forms/PostFormCard.tsx
index 129fbb0..3aec30d 100644
--- a/client/src/components/Forms/PostFormCard.tsx
+++ b/client/src/components/Forms/PostFormCard.tsx
@@ -163,7 +163,7 @@ const NewNoteCard = ({
                             <CpuChipIcon className="h-4 w-4" />
                         </div>
                         <p className="text-xs font-medium text-neutral-400">
-                            {difficulty} PoW
+                            {difficulty} Work
                         </p>
                     </div>
                     <div>
diff --git a/client/src/components/Modals/CheckMobile/CheckMobile.tsx b/client/src/components/Modals/CheckMobile/CheckMobile.tsx
index 32a8ff8..d2691ae 100644
--- a/client/src/components/Modals/CheckMobile/CheckMobile.tsx
+++ b/client/src/components/Modals/CheckMobile/CheckMobile.tsx
@@ -29,11 +29,11 @@ const AddToHomeScreenPrompt: React.FC = () => {
         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))
+                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))
             );
         };
 
diff --git a/client/src/components/Modals/OptionsBar.tsx b/client/src/components/Modals/OptionsBar.tsx
index a2edff8..7c6d1de 100644
--- a/client/src/components/Modals/OptionsBar.tsx
+++ b/client/src/components/Modals/OptionsBar.tsx
@@ -30,7 +30,7 @@ const OptionsBar: React.FC<OptionsBarProps> = ({ sortByTime, setAnon, toggleSort
                         <div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
                     </div>
                     <div className={`ml-2 text-neutral-500 text-sm ${sortByTime ? 'text-neutral-500' : ''}`}>
-                        {sortByTime ? 'PoW' : 'Time'}
+                        {sortByTime ? 'Sort by Work' : 'Sort by Time'}
                     </div>
                 </label>}
                 {toggleAnon && <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
diff --git a/client/src/components/Modals/Placeholder.tsx b/client/src/components/Modals/Placeholder.tsx
index 408f59b..5cb827b 100644
--- a/client/src/components/Modals/Placeholder.tsx
+++ b/client/src/components/Modals/Placeholder.tsx
@@ -1,7 +1,7 @@
 const Placeholder = () => {
 
     return (
-        <div className="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+        <div className="mx-auto gap-4 p-4">
             <div className="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
                 <div className="animate-pulse flex space-x-4">
                     <div className="rounded-full bg-slate-700 h-10 w-10"></div>
diff --git a/client/src/components/TestUI.tsx b/client/src/components/TestUI.tsx
new file mode 100644
index 0000000..50598fb
--- /dev/null
+++ b/client/src/components/TestUI.tsx
@@ -0,0 +1,21 @@
+import { useState } from "react";
+import Placeholder from "./Modals/Placeholder";
+import OptionsBar from "./Modals/OptionsBar";
+
+const TestUI = () => {
+    const [sortByTime, setSortByTime] = useState(true);
+
+    const toggleSort = () => {
+        setSortByTime(prev => !prev);
+    };
+        return (
+            <>
+                <Placeholder />
+                <div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
+                <OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
+            </>
+        );
+    
+};
+
+export default TestUI;
\ No newline at end of file
diff --git a/client/src/components/Thread.tsx b/client/src/components/Thread.tsx
index 6c0f033..a36e0c1 100644
--- a/client/src/components/Thread.tsx
+++ b/client/src/components/Thread.tsx
@@ -110,7 +110,11 @@ const Thread = () => {
 
     if (uniqEvents.length === 0) {
         return (
-            <Placeholder />
+            <>
+                <Placeholder />
+                <div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
+                <OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
+            </>
         );
     }
     return (