From 2a15e089e583b5f8ea762f2c2baa45e381a3ba79 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Wed, 28 Feb 2024 08:07:19 +0000
Subject: [PATCH] feat: show/hide thread replies

so that it is easier to read large threads and
connect replies to their parent message
---
 .../components/events/ThreadWrapper.svelte    | 54 ++++++++++++++++-
 src/lib/components/icons.ts                   |  8 +++
 src/lib/wrappers/Thread.svelte                |  2 +-
 src/lib/wrappers/ThreadTree.svelte            | 58 ++++++++++++++-----
 4 files changed, 103 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/components/icons.ts

diff --git a/src/lib/components/events/ThreadWrapper.svelte b/src/lib/components/events/ThreadWrapper.svelte
index c6a9ecd..1fb5b77 100644
--- a/src/lib/components/events/ThreadWrapper.svelte
+++ b/src/lib/components/events/ThreadWrapper.svelte
@@ -1,3 +1,51 @@
-<div class="border-l border-blue-500 pl-1">
-  <slot />
-</div>
+<script lang="ts">
+  import { icons_misc } from '../icons'
+
+  let show_replies = true
+  export let num_replies = 0
+
+  const toggle_replies = () => {
+    show_replies = !show_replies
+  }
+</script>
+
+{#if num_replies > 0}
+  <div class="border-l border-blue-500 pl-1">
+    {#if show_replies}
+      <div class="opacity-20 hover:opacity-70" class:relative={show_replies}>
+        <button
+          on:click={() => {
+            toggle_replies()
+          }}
+          class=" right-0 -mt-8 p-1"
+          class:absolute={show_replies}
+        >
+          <span class="inline text-xs"
+            >{show_replies ? 'hide' : 'show'} {num_replies} replies</span
+          >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            class="inline h-7 w-7 flex-none fill-base-content pt-1"
+          >
+            {#each show_replies ? icons_misc.chevron_up : icons_misc.chevron_down as p}
+              <path d={p} />
+            {/each}
+          </svg>
+        </button>
+      </div>
+    {:else}
+      <button
+        on:click={() => {
+          toggle_replies()
+        }}
+        class="w-full cursor-pointer bg-base-300 p-3 text-left hover:bg-base-400"
+      >
+        show {num_replies} hidden replies
+      </button>
+    {/if}
+    <div class:hidden={!show_replies}>
+      <slot />
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/icons.ts b/src/lib/components/icons.ts
new file mode 100644
index 0000000..65dd727
--- /dev/null
+++ b/src/lib/components/icons.ts
@@ -0,0 +1,8 @@
+export const icons_misc = {
+  chevron_down: [
+    'M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1c.3-.3.8-.3 1.1 0l2.7 2.7l2.7-2.7c.3-.3.8-.3 1.1 0c.3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3',
+  ],
+  chevron_up: [
+    'M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1c.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0c.3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4',
+  ],
+}
diff --git a/src/lib/wrappers/Thread.svelte b/src/lib/wrappers/Thread.svelte
index 5814a80..08d897d 100644
--- a/src/lib/wrappers/Thread.svelte
+++ b/src/lib/wrappers/Thread.svelte
@@ -40,7 +40,7 @@
 
 <EventCard {type} {event} />
 
-<ThreadWrapper>
+<ThreadWrapper num_replies={$thread_tree_store.length}>
   {#each $thread_tree_store as tree}
     <ThreadTree {type} {tree} />
   {/each}
diff --git a/src/lib/wrappers/ThreadTree.svelte b/src/lib/wrappers/ThreadTree.svelte
index f16017b..ec06766 100644
--- a/src/lib/wrappers/ThreadTree.svelte
+++ b/src/lib/wrappers/ThreadTree.svelte
@@ -5,67 +5,95 @@
 
   export let tree: ThreadTreeNode
   export let type: 'proposal' | 'issue' = 'proposal'
+  const countReplies = (tree: ThreadTreeNode, starting: number = 0): number => {
+    return (
+      tree.child_nodes.length +
+      tree.child_nodes.reduce((a, c) => a + countReplies(c), starting)
+    )
+  }
 </script>
 
 <EventCard {type} event={tree.event} />
-<ThreadWrapper>
+<ThreadWrapper num_replies={countReplies(tree)}>
   {#each tree.child_nodes as layer1}
     <EventCard {type} event={layer1.event} />
-    <ThreadWrapper>
+    <ThreadWrapper num_replies={countReplies(layer1)}>
       {#each layer1.child_nodes as layer2}
         <EventCard {type} event={layer2.event} />
-        <ThreadWrapper>
+        <ThreadWrapper num_replies={countReplies(layer2)}>
           {#each layer2.child_nodes as layer3}
             <EventCard {type} event={layer3.event} />
-            <ThreadWrapper>
+            <ThreadWrapper num_replies={countReplies(layer3)}>
               {#each layer3.child_nodes as layer4}
                 <EventCard {type} event={layer4.event} />
-                <ThreadWrapper>
+                <ThreadWrapper num_replies={countReplies(layer4)}>
                   {#each layer4.child_nodes as layer5}
                     <EventCard {type} event={layer5.event} />
-                    <ThreadWrapper>
+                    <ThreadWrapper num_replies={countReplies(layer5)}>
                       {#each layer5.child_nodes as layer6}
                         <EventCard {type} event={layer6.event} />
-                        <ThreadWrapper>
+                        <ThreadWrapper num_replies={countReplies(layer6)}>
                           {#each layer6.child_nodes as layer7}
                             <EventCard {type} event={layer7.event} />
-                            <ThreadWrapper>
+                            <ThreadWrapper num_replies={countReplies(layer7)}>
                               {#each layer7.child_nodes as layer8}
                                 <EventCard {type} event={layer8.event} />
-                                <ThreadWrapper>
+                                <ThreadWrapper
+                                  num_replies={countReplies(layer8)}
+                                >
                                   {#each layer8.child_nodes as layer9}
                                     <EventCard {type} event={layer9.event} />
-                                    <ThreadWrapper>
+                                    <ThreadWrapper
+                                      num_replies={countReplies(layer9)}
+                                    >
                                       {#each layer9.child_nodes as layer10}
                                         <EventCard
                                           {type}
                                           event={layer10.event}
                                         />
-                                        <ThreadWrapper>
+                                        <ThreadWrapper
+                                          num_replies={countReplies(layer10)}
+                                        >
                                           {#each layer10.child_nodes as layer11}
                                             <EventCard
                                               {type}
                                               event={layer11.event}
                                             />
-                                            <ThreadWrapper>
+                                            <ThreadWrapper
+                                              num_replies={countReplies(
+                                                layer11
+                                              )}
+                                            >
                                               {#each layer11.child_nodes as layer12}
                                                 <EventCard
                                                   {type}
                                                   event={layer12.event}
                                                 />
-                                                <ThreadWrapper>
+                                                <ThreadWrapper
+                                                  num_replies={countReplies(
+                                                    layer12
+                                                  )}
+                                                >
                                                   {#each layer12.child_nodes as layer13}
                                                     <EventCard
                                                       {type}
                                                       event={layer13.event}
                                                     />
-                                                    <ThreadWrapper>
+                                                    <ThreadWrapper
+                                                      num_replies={countReplies(
+                                                        layer13
+                                                      )}
+                                                    >
                                                       {#each layer13.child_nodes as layer14}
                                                         <EventCard
                                                           {type}
                                                           event={layer14.event}
                                                         />
-                                                        <ThreadWrapper>
+                                                        <ThreadWrapper
+                                                          num_replies={countReplies(
+                                                            layer14
+                                                          )}
+                                                        >
                                                           {#each layer14.child_nodes as layer15}
                                                             <EventCard
                                                               {type}