From 2d3a7f90350465bf37a033b419738ead000af5d3 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Thu, 2 Nov 2023 23:58:13 +1100
Subject: [PATCH] smol changes per comment

---
 client/src/components/Home.tsx                |   4 +-
 .../src/components/PostCard/CardContainer.tsx |   4 +-
 .../src/components/PostCard/NewThreadCard.tsx |   4 +-
 client/src/components/PostCard/PostCard.tsx   |   4 +-
 client/src/components/Thread/OPCard.tsx       |  19 ++-
 client/src/components/Thread/ReplyCard.tsx    |  23 ++--
 client/src/components/Thread/Thread.tsx       |  68 ++++++-----
 client/src/components/Thread/ThreadPost.tsx   | 113 ++++++++++--------
 client/src/utils/FileUpload.tsx               |   4 +-
 9 files changed, 138 insertions(+), 105 deletions(-)

diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index fb1672d..c56666b 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -72,10 +72,10 @@ const Home = () => {
   return (
     <main className="text-white mb-20">
       {/* {inBrowser && <PWAInstallPopup onClose={() => setInBrowser(false)} />} */}
-      <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-16">
+      <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
         <NewThreadCard />
       </div>
-      <div className="columns-1 md:columns-2 lg:columns-3 [column-fill:_balance] box-border gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
         {filteredAndSortedEvents.map((event) => (
           <PostCard
             key={event.id}
diff --git a/client/src/components/PostCard/CardContainer.tsx b/client/src/components/PostCard/CardContainer.tsx
index c9829cb..8e28b75 100644
--- a/client/src/components/PostCard/CardContainer.tsx
+++ b/client/src/components/PostCard/CardContainer.tsx
@@ -2,8 +2,8 @@ import { PropsWithChildren } from "react";
 
 export default function CardContainer({ children }: PropsWithChildren) {
   return (
-    <div className="card break-inside-avoid mb-4 bg-neutral-900 border border-transparent hover:border-neutral-800">
-      <div className="card-body">{children}</div>
+    <div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
+      <div className="card-body pb-2">{children}</div>
     </div>
   );
 }
diff --git a/client/src/components/PostCard/NewThreadCard.tsx b/client/src/components/PostCard/NewThreadCard.tsx
index f89b85d..f23e0cf 100644
--- a/client/src/components/PostCard/NewThreadCard.tsx
+++ b/client/src/components/PostCard/NewThreadCard.tsx
@@ -118,7 +118,7 @@ const NewThreadCard: React.FC = () => {
       >
         Start a New Thread
       </div>
-      <div className="px-4 pt-4 flex flex-col bg-neutral-900 border border-neutral-800 rounded-lg">
+      <div className="px-4 pt-4 flex flex-col bg-neutral-900 rounded-lg">
         <textarea
           name="com"
           wrap="soft"
@@ -133,7 +133,7 @@ const NewThreadCard: React.FC = () => {
               <CpuChipIcon className="h-4 w-4" />
             </div>
             <p className="text-xs font-medium text-neutral-400">
-              {difficulty} POW
+              {difficulty} PoW
             </p>
           </div>
           <div>
diff --git a/client/src/components/PostCard/PostCard.tsx b/client/src/components/PostCard/PostCard.tsx
index 7b30b89..368d35a 100644
--- a/client/src/components/PostCard/PostCard.tsx
+++ b/client/src/components/PostCard/PostCard.tsx
@@ -1,5 +1,5 @@
 import CardContainer from "./CardContainer";
-import { ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
+import { FolderIcon } from "@heroicons/react/24/outline";
 import { parseContent } from "../../utils/content";
 import { Event } from "nostr-tools";
 import { nip19 } from "nostr-tools";
@@ -112,7 +112,7 @@ const PostCard = ({
               </div>
               <span className="text-neutral-700">·</span>
               <div className="inline-flex items-center gap-1.5">
-                <ChatBubbleLeftEllipsisIcon className="h-4 w-4 text-neutral-600" />
+                <FolderIcon className="h-4 w-4 text-neutral-600" />
                 <span className="text-xs text-neutral-600">{replyCount}</span>
               </div>
             </div>
diff --git a/client/src/components/Thread/OPCard.tsx b/client/src/components/Thread/OPCard.tsx
index f60989c..9386608 100644
--- a/client/src/components/Thread/OPCard.tsx
+++ b/client/src/components/Thread/OPCard.tsx
@@ -81,11 +81,20 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
               </>
             }
             </div>
-            <div className="flex items-center ml-auto">
-              <div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
-              <FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
-              <span className="text-xs text-gray-500">{replyCount}</span>
-            </div>  
+            <div className="flex items-center ml-auto gap-2.5">
+              <div className="text-xs text-neutral-600">
+                {event.id.match(/^0*([^\0]{2})/)?.[0] || 0}
+              </div>
+              <span className="text-neutral-700">·</span>
+              <div className="text-xs font-semibold text-neutral-600">
+                {timeAgo(event.created_at)}
+              </div>
+              <span className="text-neutral-700">·</span>
+              <div className="inline-flex items-center gap-1.5">
+                <FolderIcon className="h-4 w-4 text-neutral-600" />
+                <span className="text-xs text-neutral-600">{replyCount}</span>
+              </div>
+            </div>
           </div>
           <div className="mr-2 flex flex-col break-words">
             <ContentPreview key={event.id} comment={comment} />
diff --git a/client/src/components/Thread/ReplyCard.tsx b/client/src/components/Thread/ReplyCard.tsx
index 20bbb93..86a2486 100644
--- a/client/src/components/Thread/ReplyCard.tsx
+++ b/client/src/components/Thread/ReplyCard.tsx
@@ -87,21 +87,26 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
                                     </>
                                 }
                             </div>
-                            <div className="flex items-center ml-auto">
-                                <div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
-                                <FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
-                                <span className="text-xs text-gray-500">{replyCount}</span>
+                            <div className="flex items-center ml-auto gap-2.5">
+                                <div className="text-xs font-semibold text-neutral-600">
+                                    {timeAgo(event.created_at)}
+                                </div>
+                                <span className="text-neutral-700">·</span>
+                                <div className="inline-flex items-center gap-1.5">
+                                    <FolderIcon className="h-4 w-4 text-neutral-600" />
+                                    <span className="text-xs text-neutral-600">{replyCount}</span>
+                                </div>
                             </div>
                         </div>
                         <div className="flex items-center my-1" >
                             <span className="text-xs text-gray-500">Reply to: </span>
                             {uniqBy(repliedTo, 'pubkey').map((event, index) => (
                                 <div key={index}>
-                                {event.kind == 0 ? (
-                                    <img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
-                                ) : (
-                                    <div className={`h-5 w-5 bg-gradient-to-r ${getColorFromHash(event.pubkey, colorCombos)} rounded-full`} />
-                                )}
+                                    {event.kind == 0 ? (
+                                        <img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
+                                    ) : (
+                                        <div className={`h-5 w-5 bg-gradient-to-r ${getColorFromHash(event.pubkey, colorCombos)} rounded-full`} />
+                                    )}
                                 </div>
                             ))}
                         </div>
diff --git a/client/src/components/Thread/Thread.tsx b/client/src/components/Thread/Thread.tsx
index 072304a..531d66c 100644
--- a/client/src/components/Thread/Thread.tsx
+++ b/client/src/components/Thread/Thread.tsx
@@ -52,7 +52,7 @@ const Thread = () => {
             setHasRun(true);
             setPreOPEvents(OPNoteEvents)
             subNotesOnce(OPNoteEvents, onEvent)
-          }
+        }
     }, [uniqEvents, hasRun]);
 
     const getMetadataEvent = (event: Event) => {
@@ -72,11 +72,11 @@ const Thread = () => {
     }
 
     const earlierEvents = uniqEvents
-    .filter(event => 
-      event.kind === 1 &&
-      preOPEvents.includes(event.id)
-    )
-    .sort((a, b) => (b.created_at as any) - (a.created_at as any));
+        .filter(event =>
+            event.kind === 1 &&
+            preOPEvents.includes(event.id)
+        )
+        .sort((a, b) => (b.created_at as any) - (a.created_at as any));
 
     if (!uniqEvents[0]) {
         return (
@@ -104,39 +104,41 @@ const Thread = () => {
     return (
         <>
             <main className="bg-black text-white min-h-screen">
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-                        {earlierEvents
-                            .filter(event => event.kind === 1)
-                            .sort((a, b) => a.created_at - b.created_at).map((event, index) => (
-                                <OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
-                            ))}
+                <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
+                    {earlierEvents
+                        .filter(event => event.kind === 1)
+                        .sort((a, b) => a.created_at - b.created_at).map((event, index) => (
+                            <OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} />
+                        ))}
                     <OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
-                    <div className="col-span-full flex justify-center space-x-36    ">
-                        <DocumentTextIcon
-                            className="h-5 w-5 text-gray-200"
-                            onClick={() => {
-                                setShowForm(prevShowForm => !prevShowForm);
-                                setPostType('r');
-                            }}
-                        />
+                </div>
+                <div className="col-span-full flex justify-center space-x-36">
+                    <DocumentTextIcon
+                        className="h-5 w-5 text-gray-200"
+                        onClick={() => {
+                            setShowForm(prevShowForm => !prevShowForm);
+                            setPostType('r');
+                        }}
+                    />
 
-                        <FolderPlusIcon
-                            className="h-5 w-5 text-gray-200"
-                            onClick={() => {
-                                setShowForm(prevShowForm => !prevShowForm);
-                                setPostType('q');
-                            }}
-                        />
-                    </div>
-                    <div>
-                        <ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
-                    </div>
+                    <FolderPlusIcon
+                        className="h-5 w-5 text-gray-200"
+                        onClick={() => {
+                            setShowForm(prevShowForm => !prevShowForm);
+                            setPostType('q');
+                        }}
+                    />
+                </div>
+                <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
+                    <ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
                     <div className="col-span-full h-0.5 bg-neutral-900"></div>  {/* This is the white line separator */}
-                        {uniqEvents
+                    {uniqEvents
                         .slice(1)
                         .filter(event => event.kind === 1)
                         .sort((a, b) => a.created_at - b.created_at).map((event, index) => (
-                            <ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)}/>
+                            <ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
                         ))}
                 </div>
             </main>
diff --git a/client/src/components/Thread/ThreadPost.tsx b/client/src/components/Thread/ThreadPost.tsx
index 35cdf1d..603df87 100644
--- a/client/src/components/Thread/ThreadPost.tsx
+++ b/client/src/components/Thread/ThreadPost.tsx
@@ -131,58 +131,75 @@ const ThreadPost = ({ OPEvent, state, type }: { OPEvent: NostrEvent, state: Bool
                     <div id="togglePostFormLink" className="text-lg font-semibold">
                         {type === 'r' ? <span>Reply To Post</span> : <span>Quote Post</span>}
                     </div>
-                    <div>
-                        <textarea
-                            name="com"
-                            wrap="soft"
-                            className="w-full p-2 rounded bg-gradient-to-r from-blue-900 to-cyan-500 text-white border-none placeholder-blue-300"
-                            placeholder='Shitpost here...'
-                            value={comment}
-                            onChange={(e) => setComment(e.target.value)}
-                        />
-                    </div>
-                    <div className="relative">
-                        {file != '' &&
-                            <button onClick={() => setFile('')}><XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" /></button>
-                        }
-                        {renderMedia(file)}
-                    </div>
-                    <div className="flex justify-between items-center">
-                        <div className="flex items-center">
-                            <ArrowUpTrayIcon
-                                className="h-6 w-6 text-white cursor-pointer"
-                                onClick={() => document.getElementById('file_input')?.click()}
+                    <div className="px-4 pt-4 flex flex-col bg-neutral-900 border border-neutral-800 rounded-lg">
+                        <div>
+                            <textarea
+                                name="com"
+                                wrap="soft"
+                                className="shadow-lg w-full px-4 py-3 h-28 rounded-md outline-none focus:outline-none bg-neutral-800 border border-neutral-700 text-white placeholder:text-neutral-500"
+                                placeholder='Shitpost here...'
+                                value={comment}
+                                onChange={(e) => setComment(e.target.value)}
                             />
-                            <input
-                                type="file"
-                                name="file_input"
-                                id="file_input"
-                                style={{ display: 'none' }}
-                                onChange={(e) => {
-                                    const file_input = e.target.files?.[0];
-                                    if (file_input) {
-                                        attachFile(file_input);
-                                    }
-                                }}
-                            />
-                            {uploadingFile ? (
-                                <div className='flex animate-spin text-sm text-gray-300'>
-                                    <ArrowPathIcon className="h-4 w-4 ml-auto" />
+                        </div>
+                        <div className="h-14 flex items-center justify-between">
+                            <div className="inline-flex items-center gap-2 bg-neutral-800 px-1.5 py-1 rounded-lg">
+                                <div className="inline-flex items-center gap-1.5 text-neutral-300">
+                                    <CpuChipIcon className="h-4 w-4" />
                                 </div>
-                            ) : null}
+                                <p className="text-xs font-medium text-neutral-400">
+                                    {difficulty} PoW
+                                </p>
+                            </div>
+                            <div>
+                                <div className="relative">
+                                    {file !== "" && (
+                                        <button onClick={() => setFile("")}>
+                                            <XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" />
+                                        </button>
+                                    )}
+                                    {renderMedia(file)}
+                                </div>
+                                <div className="flex items-center gap-4">
+                                    <div className="flex items-center">
+                                        <ArrowUpTrayIcon
+                                            className="h-4 w-4 text-neutral-400 cursor-pointer"
+                                            onClick={() => document.getElementById("file_input")?.click()}
+                                        />
+                                        <input
+                                            type="file"
+                                            name="file_input"
+                                            id="file_input"
+                                            style={{ display: "none" }}
+                                            onChange={(e) => {
+                                                const file_input = e.target.files?.[0];
+                                                if (file_input) {
+                                                    attachFile(file_input);
+                                                }
+                                            }}
+                                        />
+                                        {uploadingFile ? (
+                                            <div className="flex animate-spin text-sm text-gray-300">
+                                                <ArrowPathIcon className="h-4 w-4 ml-auto" />
+                                            </div>
+                                        ) : null}
+                                    </div>
+                                    <button
+                                        type="submit"
+                                        className="h-9 inline-flex items-center justify-center px-4 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium text-sm"
+                                    >
+                                        Submit
+                                    </button>
+                                </div>
+                                {doingWorkProp ? (
+                                    <div className="flex animate-pulse text-sm text-gray-300">
+                                        <CpuChipIcon className="h-4 w-4 ml-auto" />
+                                        <span>Generating Proof-of-Work...</span>
+                                    </div>
+                                ) : null}
+                            </div>
                         </div>
-                        <span className="flex items-center"><CpuChipIcon className="h-6 w-6 text-white" />: {difficulty}</span>
-                        <button type="submit" className="px-4 py-2 bg-gradient-to-r from-cyan-900 to-blue-500 rounded text-white font-semibold">
-                            Submit
-                        </button>
                     </div>
-                    {doingWorkProp ? (
-                        <div className='flex animate-pulse text-sm text-gray-300'>
-                            <CpuChipIcon className="h-4 w-4 ml-auto" />
-                            <span>Generating Proof-of-Work...</span>
-                        </div>
-                    ) : null}
-                    <div id="postFormError" className="text-red-500" />
                 </form>)}
         </>
     );
diff --git a/client/src/utils/FileUpload.tsx b/client/src/utils/FileUpload.tsx
index 522c846..b206914 100644
--- a/client/src/utils/FileUpload.tsx
+++ b/client/src/utils/FileUpload.tsx
@@ -40,7 +40,7 @@ export const renderMedia = (file: string) => {
         controls
         muted
         preload="metadata"
-        className="thumb mt-2 rounded-md w-full ring-1 ring-neutral-800"
+        className="thumb mt-2 rounded-md w-full"
       >
         <source src={file} type="video/mp4" />
       </video>
@@ -52,7 +52,7 @@ export const renderMedia = (file: string) => {
       <img
         alt="Invalid thread"
         loading="lazy"
-        className="thumb mt-2 rounded-md w-full ring-1 ring-neutral-800"
+        className="thumb mt-2 rounded-md w-full"
         src={file}
       />
     );