web: expand thread button

This doesn't query the full thread yet, but expands what is hidden from
the thread due to the max thread depth of 3 in the home timeline.

webv2/damus.css

@@ -16,6 +16,10 @@
     width: 60px;
 }
 
+.clickable {
+	cursor: pointer;
+}
+
 .line-top {
 	width: 2px;
 	height: 5px;
@@ -74,15 +78,11 @@ textarea, input {
 	width: 80%;
 }
 
-.replying-to {
+.small-txt {
 	font-size: 0.6em;
 	color: rgba(255,255,255,0.8);
 }
 
-.can-react {
-	cursor: pointer;
-}
-
 .reaction-group {
 	display: inline-flex;
 	background-color: rgba(255,255,255,0.15);
@@ -186,7 +186,8 @@ html {
 
 
 .thread-collapsed {
-	margin: auto;
+	margin: 0 auto 5px auto;
+	width: 56.3%;
 }
 
 .comment {

webv2/damus.js

@@ -40,6 +40,7 @@ function init_home_model() {
 		notifications: 0,
 		rendered: {},
 		all_events: {},
+		expanded: new Set(),
 		reactions_to: {},
 		events: [],
 		profiles: {},
@@ -483,17 +484,27 @@ function render_home_view(model) {
 	`
 }
 
+function render_home_event(model, ev)
+{
+	let max_depth = 3
+	if (ev.refs && ev.refs.root && model.expanded.has(ev.refs.root)) {
+		max_depth = null
+	}
+
+	return render_event(model, ev, {max_depth})
+}
+
 function render_events(model) {
 	return model.events
 		.filter((ev, i) => i < 140)
-		.map((ev) => render_event(model, ev, {max_depth: 3})).join("\n")
+		.map((ev) => render_home_event(model, ev)).join("\n")
 }
 
 function determine_event_refs_positionally(pubkeys, ids)
 {
 	if (ids.length === 1)
 		return {root: ids[0], reply: ids[0], pubkeys}
-	else if (ids.length === 2)
+	else if (ids.length >= 2)
 		return {root: ids[0], reply: ids[1], pubkeys}
 
 	return {pubkeys}
@@ -544,6 +555,29 @@ const DEFAULT_PROFILE = {
 	display_name: "Anonymous",
 }
 
+function render_thread_collapsed(model, reply_ev)
+{
+	return `<div onclick="expand_thread('${reply_ev.id}')" class="thread-collapsed clickable">...</div>`
+}
+
+function* yield_etags(tags)
+{
+	for (const tag of tags) {
+		if (tag.length >= 2 && tag[0] === "e")
+			yield tag
+	}
+}
+
+function expand_thread(id) {
+	const ev = DSTATE.all_events[id]
+	if (ev) {
+		for (const tag of yield_etags(ev.tags))
+			DSTATE.expanded.add(tag[1])
+	}
+	DSTATE.expanded.add(id)
+	redraw_events(DSTATE)
+}
+
 function render_replied_events(model, ev, opts)
 {
 	if (!(ev.refs && ev.refs.reply))
@@ -553,10 +587,9 @@ function render_replied_events(model, ev, opts)
 	if (!reply_ev)
 		return ""
 
-
 	opts.replies = opts.replies == null ? 1 : opts.replies + 1
 	if (!(opts.max_depth == null || opts.replies < opts.max_depth))
-		return ""
+		return render_thread_collapsed(model, reply_ev, opts)
 
 	opts.is_reply = true
 	return render_event(model, reply_ev, opts)
@@ -567,7 +600,7 @@ function render_replying_to_chat(model, ev) {
 	const pks = ev.refs.pubkeys || []
 	const names = pks.map(pk => render_mentioned_name(pk, model.profiles[pk])).join(", ")
 	const to_users = pks.length === 0 ? "" : ` to ${names}`
-	return `<div class="replying-to">replying${to_users} in ${roomid} chatroom</div>`
+	return `<div class="replying-to small-txt">replying${to_users} in ${roomid} chatroom</div>`
 }
 
 function render_replying_to(model, ev) {
@@ -581,7 +614,7 @@ function render_replying_to(model, ev) {
 	if (pubkeys.length === 0 && ev.refs.reply) {
 		const replying_to = model.all_events[ev.refs.reply]
 		if (!replying_to)
-			return `<div class="replying-to">reply to ${ev.refs.reply}</div>`
+			return `<div class="replying-to small-txt">reply to ${ev.refs.reply}</div>`
 
 		pubkeys = [replying_to.pubkey]
 	}
@@ -589,14 +622,14 @@ function render_replying_to(model, ev) {
 	const names = ev.refs.pubkeys.map(pk => render_mentioned_name(pk, model.profiles[pk])).join(", ")
 
 	return `
-	<div class="replying-to">
+	<div class="replying-to small-txt">
 		replying to ${names}
 	</div>
 	`
 }
 
 function render_event(model, ev, opts={}) {
-	if (!opts.is_composing && model.rendered[ev.id])
+	if (!opts.is_composing && !model.expanded.has(ev.id) && model.rendered[ev.id])
 		return ""
 	model.rendered[ev.id] = true
 	const profile = model.profiles[ev.pubkey] || DEFAULT_PROFILE
@@ -665,7 +698,7 @@ function render_reaction_group(model, emoji, reactions, reacting_to) {
 	let classes = ""
 	if (!reactions[model.pubkey]) {
 		onclick = `onclick="send_reply('${emoji}', '${reacting_to.id}')"`
-		classes = "can-react"
+		classes = "clickable"
 	}
 
 	return `

webv2/index.html

@@ -6,7 +6,7 @@
 
         <title>Damus</title>
 
-        <link rel="stylesheet" href="damus.css?v=10">
+        <link rel="stylesheet" href="damus.css?v=11">
     </head>
     <body>
 	<section class="header">
@@ -41,7 +41,7 @@
     <script src="noble-secp256k1.js?v=1"></script>
     <script src="bech32.js?v=1"></script>
     <script src="nostr.js?v=6"></script>
-    <script src="damus.js?v=41"></script>
+    <script src="damus.js?v=43"></script>
     <script>
 	// I have to delay loading to wait for nos2x
 	const relay = setTimeout(damus_web_init, 100)