From a0ebb99cf9a9c5a8ab20bec30f29bdf7ccd25ecb Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Fri, 15 Dec 2023 22:05:57 +1100
Subject: [PATCH 1/3] fix reposts

---
 client/src/components/Home.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 188bc04..7c7eda0 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -21,7 +21,12 @@ const useUniqEvents = () => {
 
   const uniqEvents = uniqBy(events, "id");
 
-  const noteEvents = uniqEvents.filter(event => event.kind === 1);
+  const noteEvents = uniqEvents.filter(event => {
+    if (event.kind === 6) {
+      console.log(event);
+    }
+    return event.kind === 1 || event.kind === 6;
+  });
   const metadataEvents = uniqEvents.filter(event => event.kind === 0);
 
   return { noteEvents, metadataEvents };

From 88fefc8a1bb8a1cda47eb2a5ad54ebcb39c74018 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Fri, 15 Dec 2023 22:33:46 +1100
Subject: [PATCH 2/3] fix replies

---
 client/src/components/Forms/PostFormCard.tsx | 11 +++++++----
 client/src/components/Home.tsx               |  7 +------
 client/src/components/Thread.tsx             |  9 +++++----
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Forms/PostFormCard.tsx b/client/src/components/Forms/PostFormCard.tsx
index e978d83..73a847a 100644
--- a/client/src/components/Forms/PostFormCard.tsx
+++ b/client/src/components/Forms/PostFormCard.tsx
@@ -45,10 +45,13 @@ const NewNoteCard = ({
 
     useEffect(() => {
         if (refEvent && tagType && unsigned.tags.length === 0) {
-            const tags = tagMapping[tagType];
-            if (tags) {
-                tags.forEach(tag => unsigned.tags.push([tag, refEvent[tag === 'p' ? 'pubkey' : 'id']])); 
-                // Ref event should be the latest event they're replying to, and their event should include prev replies
+            if (tagType === 'Reply' && unsigned.tags.length === 0) {
+                unsigned.tags.push(['p', refEvent.pubkey]); 
+                unsigned.tags.push(['e', refEvent.id, 'root']); 
+            } else {
+                unsigned.tags = refEvent.tags
+                unsigned.tags.push(['p', refEvent.pubkey]); 
+                unsigned.tags.push(['e', refEvent.id]); 
             }
             if (tagType === 'Quote') {
                 setComment(comment + '\nnostr:' + nip19.noteEncode(refEvent.id));
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 7c7eda0..c74e287 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -21,12 +21,7 @@ const useUniqEvents = () => {
 
   const uniqEvents = uniqBy(events, "id");
 
-  const noteEvents = uniqEvents.filter(event => {
-    if (event.kind === 6) {
-      console.log(event);
-    }
-    return event.kind === 1 || event.kind === 6;
-  });
+  const noteEvents = uniqEvents.filter(event => event.kind === 1 || event.kind === 6);
   const metadataEvents = uniqEvents.filter(event => event.kind === 0);
 
   return { noteEvents, metadataEvents };
diff --git a/client/src/components/Thread.tsx b/client/src/components/Thread.tsx
index d4d17fa..15bf075 100644
--- a/client/src/components/Thread.tsx
+++ b/client/src/components/Thread.tsx
@@ -49,9 +49,10 @@ const Thread = () => {
 
     useEffect(() => {
         if (!hasRun && events.length > 0) {
-            let OPEvent = uniqEvents[0];
+            let OPEvent = uniqEvents.find(event => event.id === hexID);
             setOPEvent(OPEvent);
             
+            console.log(OPEvent)
             if (OPEvent && OPEvent.id !== hexID) {
             OPEvent = events.find(e => e.id === hexID) as Event;
             }
@@ -154,11 +155,11 @@ const Thread = () => {
                 {(showForm && postType) && 
                 <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
                     <span className='text-center'>{postType}-post</span>
-                    <NewNoteCard refEvent={uniqEvents[0]} tagType={postType}/>
+                    <NewNoteCard refEvent={OPEvent} tagType={postType}/>
                 </div>}
-                {showRepost && <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
+                {showRepost && OPEvent && <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
                     <span className='text-center'>Repost note</span>
-                    <RepostNote refEvent={uniqEvents[0]}/>
+                    <RepostNote refEvent={OPEvent}/>
                 </div>}
                 <div className="flex items-center justify-center w-full py-4">
                     <label htmlFor="toggleB" className="flex items-center cursor-pointer">

From 32a18232d548c963ffb02d7b746e5c6c42df22f3 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Fri, 15 Dec 2023 23:11:38 +1100
Subject: [PATCH 3/3] filter feed options

---
 client/src/components/Home.tsx              | 36 +------------
 client/src/components/Modals/OptionsBar.tsx | 57 +++++++++++++++++++++
 client/src/components/Thread.tsx            | 35 ++++---------
 3 files changed, 69 insertions(+), 59 deletions(-)
 create mode 100644 client/src/components/Modals/OptionsBar.tsx

diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index c74e287..2e19df0 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -6,6 +6,7 @@ import { verifyPow } from "../utils/mine";
 import { Event } from "nostr-tools";
 import NewNoteCard from "./Forms/PostFormCard";
 import RepostCard from "./Modals/RepostCard";
+import OptionsBar from "./Modals/OptionsBar";
 
 const DEFAULT_DIFFICULTY = 20;
 
@@ -74,40 +75,7 @@ const Home = () => {
       <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
         <NewNoteCard />
       </div>
-      <div className="flex w-full px-8 z-2">
-        <label htmlFor="toggleA" className="flex items-center cursor-pointer">
-          <div className="relative">
-            <input
-              id="toggleA"
-              type="checkbox"
-              className="sr-only"
-              checked={sortByTime}
-              onChange={toggleSort}
-            />
-            <div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
-            <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 ? 'Time' : 'PoW'}
-          </div>
-        </label>
-        <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
-          <div className="relative">
-            <input
-              id="toggleB"
-              type="checkbox"
-              className="sr-only"
-              checked={setAnon}
-              onChange={toggleAnon}
-            />
-            <div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
-            <div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${setAnon ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
-          </div>
-          <div className={`ml-2 text-neutral-500 text-sm ${setAnon ? 'text-neutral-500' : ''}`}>
-            {setAnon ? 'Namefags' : 'Anon'}
-          </div>
-        </label>
-      </div>
+      <OptionsBar sortByTime={sortByTime} setAnon={setAnon} toggleSort={toggleSort} toggleAnon={toggleAnon} />
       <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
         {sortedEvents.map((event) => (
           event.kind === 1 ?
diff --git a/client/src/components/Modals/OptionsBar.tsx b/client/src/components/Modals/OptionsBar.tsx
new file mode 100644
index 0000000..3c9b936
--- /dev/null
+++ b/client/src/components/Modals/OptionsBar.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useState } from 'react';
+
+interface OptionsBarProps {
+    sortByTime?: boolean;
+    setAnon?: boolean;
+    toggleSort?: () => void;
+    toggleAnon?: () => void;
+}
+
+const OptionsBar: React.FC<OptionsBarProps> = ({ sortByTime, setAnon, toggleSort, toggleAnon }) => {
+    const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+
+    return (
+        <div className="px-8">
+            <span onClick={() => setShowAdvancedSettings(!showAdvancedSettings)} className="text-xs text-neutral-600">
+                {">"} Alter Feed
+            </span>
+            <div className={`transition-height duration-200 ease-in-out overflow-hidden ${showAdvancedSettings ? 'h-auto' : 'h-0'} flex w-full z-2`}>
+                {toggleSort && <label htmlFor="toggleA" className="flex items-center cursor-pointer">
+                    <div className="relative">
+                        <input
+                            id="toggleA"
+                            type="checkbox"
+                            className="sr-only"
+                            checked={sortByTime}
+                            onChange={toggleSort}
+                        />
+                        <div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
+                        <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 ? 'Time' : 'PoW'}
+                    </div>
+                </label>}
+                {toggleAnon && <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
+                    <div className="relative">
+                        <input
+                            id="toggleB"
+                            type="checkbox"
+                            className="sr-only"
+                            checked={setAnon}
+                            onChange={toggleAnon}
+                        />
+                        <div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
+                        <div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${setAnon ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
+                    </div>
+                    <div className={`ml-2 text-neutral-500 text-sm ${setAnon ? 'text-neutral-500' : ''}`}>
+                        {setAnon ? 'Namefags' : 'Anon'}
+                    </div>
+                </label>}
+            </div>
+        </div>
+    );
+};
+
+export default OptionsBar;
\ No newline at end of file
diff --git a/client/src/components/Thread.tsx b/client/src/components/Thread.tsx
index 15bf075..7a4b3ac 100644
--- a/client/src/components/Thread.tsx
+++ b/client/src/components/Thread.tsx
@@ -10,6 +10,7 @@ import PostCard from './Modals/NoteCard';
 import Placeholder from './Modals/Placeholder';
 import NewNoteCard from './Forms/PostFormCard';
 import RepostNote from './Forms/RepostNote';
+import OptionsBar from './Modals/OptionsBar';
 
 type PostType = "" | "Reply" | "Quote" | undefined;
 
@@ -127,7 +128,7 @@ const Thread = () => {
                         ))}
                     {OPEvent && <PostCard event={OPEvent} metadata={getMetadataEvent(OPEvent)} replyCount={countReplies(OPEvent)} type={'OP'}/>}
                 </div>
-                <div className="col-span-full flex justify-center space-x-36">
+                <div className="col-span-full flex justify-center space-x-36 pb-4">
                     <DocumentTextIcon
                         className="h-5 w-5 text-gray-200 cursor-pointer"
                         onClick={() => {
@@ -154,36 +155,20 @@ const Thread = () => {
                 </div>
                 {(showForm && postType) && 
                 <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
-                    <span className='text-center'>{postType}-post</span>
+                    <div className='text-center'>
+                    <span >{postType}-post</span>
+                    </div>
                     <NewNoteCard refEvent={OPEvent} tagType={postType}/>
                 </div>}
                 {showRepost && OPEvent && <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
-                    <span className='text-center'>Repost note</span>
+                    <div className='text-center'>
+                    <span>Repost note</span>
+                    </div>
                     <RepostNote refEvent={OPEvent}/>
                 </div>}
-                <div className="flex items-center justify-center w-full py-4">
-                    <label htmlFor="toggleB" className="flex items-center cursor-pointer">
-                        <div className="relative">
-                            <input
-                                id="toggleB"
-                                type="checkbox"
-                                className="sr-only"
-                                checked={sortByTime}
-                                onChange={toggleSort}
-                            />
-                            <div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
-                            <div
-                                className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''
-                                    }`}
-                            ></div>
-                        </div>
-                        <div className={`ml-3 text-neutral-500 font-medium ${sortByTime ? 'text-neutral-500' : ''}`}>
-                            {sortByTime ? 'Sort by oldest' : 'Sort by PoW'}
-                        </div>
-                    </label>
-                </div>
+                <div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
+                <OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
                 <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 */}
                     {displayedEvents.map((event, index) => (
                         <PostCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
                     ))}