+
{content()}
)
diff --git a/src/Element/NoteCreator.css b/src/Element/NoteCreator.css
index 47d9ea3..ad0a7d6 100644
--- a/src/Element/NoteCreator.css
+++ b/src/Element/NoteCreator.css
@@ -116,7 +116,7 @@
@media (min-width: 1020px) {
.note-create-button {
- right: 25vw;
+ right: calc(50% - 360px);
}
}
diff --git a/src/Element/NoteFooter.tsx b/src/Element/NoteFooter.tsx
index 27bea55..60e0016 100644
--- a/src/Element/NoteFooter.tsx
+++ b/src/Element/NoteFooter.tsx
@@ -168,7 +168,7 @@ export default function NoteFooter(props: NoteFooterProps) {
body: JSON.stringify({
q: ev.Content,
source: "auto",
- target: "en"
+ target: lang,
}),
headers: { "Content-Type": "application/json" }
});
diff --git a/src/Element/NoteGhost.tsx b/src/Element/NoteGhost.tsx
index 6eaa268..4b51df6 100644
--- a/src/Element/NoteGhost.tsx
+++ b/src/Element/NoteGhost.tsx
@@ -2,8 +2,9 @@ import "./Note.css";
import ProfileImage from "Element/ProfileImage";
export default function NoteGhost(props: any) {
+ const className = `note card ${props.className ? props.className : ''}`
return (
-
+
@@ -14,4 +15,4 @@ export default function NoteGhost(props: any) {
);
-}
\ No newline at end of file
+}
diff --git a/src/Element/NoteToSelf.css b/src/Element/NoteToSelf.css
index b33de86..e5f49c2 100644
--- a/src/Element/NoteToSelf.css
+++ b/src/Element/NoteToSelf.css
@@ -25,11 +25,6 @@
text-decoration: none;
}
-.nts a:hover {
- text-decoration: underline;
- text-decoration-color: var(--gray-superlight);
-}
-
.nts .name {
margin-top: -.2em;
display: flex;
diff --git a/src/Element/ProfileImage.css b/src/Element/ProfileImage.css
index 4c83acc..6143ad9 100644
--- a/src/Element/ProfileImage.css
+++ b/src/Element/ProfileImage.css
@@ -6,6 +6,7 @@
.pfp .avatar-wrapper {
margin-right: 8px;
+ z-index: 2;
}
.pfp .avatar {
@@ -15,7 +16,7 @@
}
.pfp a {
- text-decoration: none;
+ text-decoration: none;
}
.pfp .username {
diff --git a/src/Element/ShowMore.css b/src/Element/ShowMore.css
new file mode 100644
index 0000000..fcfc4b3
--- /dev/null
+++ b/src/Element/ShowMore.css
@@ -0,0 +1,14 @@
+.show-more {
+ background: none;
+ border: none;
+ color: var(--highlight);
+ font-weight: normal;
+}
+
+.show-more:hover {
+ color: var(--highlight);
+ background: none;
+ border: none;
+ font-weight: normal;
+ text-decoration: underline;
+}
diff --git a/src/Element/ShowMore.tsx b/src/Element/ShowMore.tsx
new file mode 100644
index 0000000..666e02b
--- /dev/null
+++ b/src/Element/ShowMore.tsx
@@ -0,0 +1,20 @@
+import './ShowMore.css'
+
+interface ShowMoreProps {
+ text?: string
+ className?: string
+ onClick: () => void
+}
+
+const ShowMore = ({ text = "Show more", onClick, className = "" }: ShowMoreProps) => {
+ const classNames = className ? `show-more ${className}` : "show-more"
+ return (
+
+
+
+ )
+}
+
+export default ShowMore
diff --git a/src/Element/Tabs.css b/src/Element/Tabs.css
new file mode 100644
index 0000000..2b854d9
--- /dev/null
+++ b/src/Element/Tabs.css
@@ -0,0 +1,36 @@
+.tabs {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ overflow-x: auto;
+ scrollbar-width: none; /* Firefox */
+ margin-bottom: 18px;
+}
+
+.tabs::-webkit-scrollbar{
+ display: none;
+}
+
+.tab {
+ border: 1px solid var(--gray-secondary);
+ border-radius: 16px;
+ text-align: center;
+ font-weight: 600;
+ line-height: 19px;
+ padding: 8px 12px;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ color: #A3A3A3;
+ margin-right: 12px;
+}
+
+.tab.active {
+ border-color: var(--font-color);
+ color: var(--font-color);
+}
+
+
+.tabs>div {
+ cursor: pointer;
+}
diff --git a/src/Element/Tabs.tsx b/src/Element/Tabs.tsx
new file mode 100644
index 0000000..b1703ff
--- /dev/null
+++ b/src/Element/Tabs.tsx
@@ -0,0 +1,39 @@
+import './Tabs.css'
+
+export interface Tab {
+ text: string, value: number
+}
+
+interface TabsProps {
+ tabs: Tab[]
+ tab: Tab
+ setTab: (t: Tab) => void
+}
+
+interface TabElementProps extends Omit
{
+ t: Tab
+}
+
+export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
+ return (
+ setTab(t)}>
+ {t.text}
+
+ )
+}
+
+const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
+ return (
+
+ {tabs.map((t) => {
+ return (
+
setTab(t)}>
+ {t.text}
+
+ )
+ })}
+
0 ? 'subthread-multi' : ''}`}>
+
+
+
+
+
+ {notes.map(renderSubthread)}
+
+ )
+}
+
+interface ThreadNoteProps extends Omit {
+ note: NEvent
+ isLast: boolean
+}
+
+const ThreadNote = ({ active, note, isLast, path, isLastSubthread, from, related, chains, onNavigate }: ThreadNoteProps) => {
+ const replies = getReplies(note.Id, chains)
+ const activeInReplies = replies.map(r => r.Id).includes(active)
+ const [collapsed, setCollapsed] = useState(!activeInReplies)
+ const hasMultipleNotes = replies.length > 0
+ const isLastVisibleNote = isLastSubthread && isLast && !hasMultipleNotes
+ const className = `subthread-container ${isLast && collapsed ? 'subthread-last' : 'subthread-multi subthread-mid'}`
+ return (
+ <>
+
+ {replies.length > 0 && (
+ activeInReplies ? (
+
+ ) : (
+
+
+
+ )
+ )}
+
+ )
+}
+
+const TierTwo = ({ active, isLastSubthread, path, from, notes, related, chains, onNavigate }: SubthreadProps) => {
+ const [first, ...rest] = notes
+
+ return (
+ <>
+
+
+ {rest.map((r: NEvent, idx: number) => {
+ const lastReply = idx === rest.length - 1
+ return (
+
+ )
+ })
+ }
+
+
+ )
+}
+
+const TierThree = ({ active, path, isLastSubthread, from, notes, related, chains, onNavigate }: SubthreadProps) => {
+ const [first, ...rest] = notes
+ const replies = getReplies(first.Id, chains)
+ const activeInReplies = notes.map(r => r.Id).includes(active) || replies.map(r => r.Id).includes(active)
+ const hasMultipleNotes = rest.length > 0 || replies.length > 0
+ const isLast = replies.length === 0 && rest.length === 0
+ return (
+ <>
+
+
+ {path.length <= 1 || !activeInReplies ? (
+ replies.length > 0 && (
+
+
+
+ )
+ ) : (
+ replies.length > 0 && (
+
+ )
+ )}
+
+ {rest.map((r: NEvent, idx: number) => {
+ const lastReply = idx === rest.length - 1
+ const lastNote = isLastSubthread && lastReply
+ return (
+
+ )
+ })
+ }
+
+
+ )
+}
+
export interface ThreadProps {
this?: u256,
notes?: TaggedRawEvent[]
}
+
export default function Thread(props: ThreadProps) {
- const thisEvent = props.this;
const notes = props.notes ?? [];
const parsedNotes = notes.map(a => new NEvent(a));
-
// root note has no thread info
const root = useMemo(() => parsedNotes.find(a => a.Thread === null), [notes]);
+ const [path, setPath] = useState([])
+ const currentId = path.length > 0 && path[path.length - 1]
+ const currentRoot = useMemo(() => parsedNotes.find(a => a.Id === currentId), [notes, currentId]);
+ const [navigated, setNavigated] = useState(false)
+ const navigate = useNavigate()
+ const isSingleNote = parsedNotes.filter(a => a.Kind === EventKind.TextNote).length === 1
+ const location = useLocation()
+ const urlNoteId = location?.pathname.slice(3)
+ const urlNoteHex = urlNoteId && bech32ToHex(urlNoteId)
+ const rootNoteId = root && hexToBech32('note', root.Id)
const chains = useMemo(() => {
let chains = new Map();
@@ -40,70 +292,102 @@ export default function Thread(props: ThreadProps) {
return chains;
}, [notes]);
+ useEffect(() => {
+ if (!root) {
+ return
+ }
+
+ if (navigated) {
+ return
+ }
+
+ if (root.Id === urlNoteHex) {
+ setPath([root.Id])
+ setNavigated(true)
+ return
+ }
+
+ let subthreadPath = []
+ let parent = getParent(urlNoteHex, chains)
+ while (parent) {
+ subthreadPath.unshift(parent)
+ parent = getParent(parent, chains)
+ }
+ setPath(subthreadPath)
+ setNavigated(true)
+ }, [root, navigated, urlNoteHex, chains])
+
const brokenChains = useMemo(() => {
return Array.from(chains?.keys()).filter(a => !parsedNotes?.some(b => b.Id === a));
}, [chains]);
- const mentionsRoot = useMemo(() => {
- return parsedNotes?.filter(a => a.Kind === EventKind.TextNote && a.Thread)
- }, [chains]);
-
- function renderRoot() {
- if (root) {
- return
+ function renderRoot(note: NEvent) {
+ const className = `thread-root ${isSingleNote ? 'thread-root-single' : ''}`
+ if (note) {
+ return
} else {
- return
+ return (
+
Loading thread root.. ({notes?.length} notes loaded)
-
+
+ )
}
}
- function renderChain(from: u256) {
- if (from && chains) {
- let replies = chains.get(from);
- if (replies) {
- return (
-
- {replies.map(a => {
- return (
- <>
-
- {renderChain(a.Id)}
-
- )
- })}
-
- )
- }
+ function onNavigate(to: u256) {
+ setPath([...path, to])
+ }
+
+ function renderChain(from: u256): ReactNode {
+ if (!from || !chains) {
+ return
}
+ let replies = chains.get(from);
+ if (replies) {
+ return
+ }
+ }
+
+ function goBack() {
+ if (path.length > 1) {
+ const newPath = path.slice(0, path.length - 1)
+ setPath(newPath)
+ } else {
+ navigate("/")
+ }
}
return (
- <>
-
-
- {renderRoot()}
- {root ? renderChain(root.Id) : null}
- {root ? null : <>
-
Other Replies
- {brokenChains.map(a => {
- return (
- <>
-
- Missing event {a.substring(0, 8)}
-
- {renderChain(a)}
-
- )
- })}
- }
-
-
+
+
1 ? "Parent" : "Back"} />
+
+ {currentRoot && renderRoot(currentRoot)}
+ {currentRoot && renderChain(currentRoot.Id)}
+ {currentRoot === root && (
+ <>
+ {brokenChains.length > 0 &&
Other replies
}
+ {brokenChains.map(a => {
+ return (
+
+
+ Missing event {a.substring(0, 8)}
+
+ {renderChain(a)}
+
+ )
+ })}
+
+ )}
+