Spruce up reply rendering

src/app/shared/Note.svelte

@@ -4,7 +4,7 @@
   import {onMount, onDestroy} from "svelte"
   import {quantify, ensurePlural, batch} from "hurdak"
   import {Tags} from "paravel"
-  import {fly} from "src/util/transition"
+  import {fly, slide} from "src/util/transition"
   import {
     getIdOrAddress,
     isChildOf,
@@ -17,7 +17,7 @@
   } from "src/util/nostr"
   import {formatTimestamp} from "src/util/misc"
   import Popover from "src/partials/Popover.svelte"
-  import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
+  import AltColor from "src/partials/AltColor.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Card from "src/partials/Card.svelte"
@@ -101,7 +101,9 @@
   const goToParent = () =>
     router
       .at("notes")
-      .of(getParentId(event), {relays: mergeHints([getPubkeyHints(event.pubkey, 'read'), tags.getReplyHints()])})
+      .of(getParentId(event), {
+        relays: mergeHints([getPubkeyHints(event.pubkey, "read"), tags.getReplyHints()]),
+      })
       .cx({context: ctx.concat(event)})
       .open()
 
@@ -236,16 +238,30 @@
 
 {#if ready}
   {@const showReply = replyId && !getParentIds(event).includes(anchor) && showParent}
-  {@const showRoot = rootId && !getRootIds(event).includes(anchor) && rootId !== replyId && showParent}
+  {@const showRoot =
+    rootId && !getRootIds(event).includes(anchor) && rootId !== replyId && showParent}
   <div>
     <NoteMeta note={event} {showGroup} />
     <div class="note relative" class:py-2={!showParent && !topLevel}>
       {#if !showParent && !topLevel}
-        <AlternatingBackground class="absolute -left-4 h-[2px] w-4" style="top: 27px;" />
+        <AltColor let:isAlt>
+          <svg height="36" width="36" class="absolute -left-[18px] top-2">
+            <circle
+              cx="18"
+              cy="18"
+              r="14"
+              fill="transparent"
+              stroke-width="4"
+              stroke-dashoffset="54"
+              stroke-dasharray="100 100"
+              transform-origin="center"
+              class={isAlt ? "stroke-cocoa" : "stroke-dark"} />
+          </svg>
+        </AltColor>
         {#if isLastReply}
-          <AlternatingBackground class="absolute -left-4 w-[2px]" style="height: 19px;" />
+          <AltColor background class="absolute -left-4 h-[19px] w-1" let:isAlt />
         {:else}
-          <AlternatingBackground class="absolute -left-4 h-full w-[2px]" />
+          <AltColor background class="absolute -left-4 h-full w-1" let:isAlt />
         {/if}
       {/if}
       <div class="group relative">
@@ -311,27 +327,26 @@
         </Card>
       </div>
 
-      {#if !replyIsActive && visibleReplies.length > 0 && !showEntire && depth > 0}
-        <div class="relative">
-          <div
-            class="absolute right-0 top-0 -mr-2 -mt-4 flex h-6 w-6 cursor-pointer items-center
-                   justify-center rounded-full border border-solid border-mid bg-dark text-lightest"
+      {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
+        <div class="relative h-4">
+          <AltColor
+            background
+            class="absolute left-0 top-0 -mr-2 -mt-5 flex h-8 w-8 cursor-pointer items-center
+                   justify-center rounded-full"
             on:click={() => {
               collapsed = !collapsed
             }}>
             <Popover triggerType="mouseenter">
               <div slot="trigger">
-                {#if collapsed}
-                  <i class="fa fa-xs fa-up-right-and-down-left-from-center" />
-                {:else}
-                  <i class="fa fa-xs fa-down-left-and-up-right-to-center" />
-                {/if}
+                <i
+                  class="fa fa-arrow-up text-lighter transition-all"
+                  class:rotate-180={collapsed} />
               </div>
               <div slot="tooltip">
                 {collapsed ? "Show replies" : "Hide replies"}
               </div>
             </Popover>
-          </div>
+          </AltColor>
         </div>
       {/if}
 
@@ -351,7 +366,10 @@
         }} />
 
       {#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
-        <div class="note-children relative ml-4 mt-2 flex flex-col">
+        <div
+          class="note-children relative ml-4 mt-2 flex flex-col"
+          in:fly|local={{y: 20}}
+          out:slide|local>
           {#if hiddenReplies.length > 0}
             <button
               class="mb-2 mt-2 cursor-pointer rounded-md bg-gradient-to-l from-transparent to-cocoa py-2 text-lightest outline-0 transition-colors hover:bg-cocoa"
@@ -362,10 +380,10 @@
               Show {quantify(hiddenReplies.length, "other reply", "more replies")}
             </button>
             {#if visibleReplies.length > 0}
-              <AlternatingBackground class="absolute -left-4 -top-4 h-20 w-[2px]" />
+              <AltColor background class="absolute -left-4 -top-10 h-28 w-1" />
             {/if}
           {:else if visibleReplies.length > 0}
-            <AlternatingBackground class="absolute -left-4 -top-4 h-8 w-[2px]" />
+            <AltColor background class="absolute -left-4 -top-10 h-14 w-1" />
           {/if}
           {#if visibleReplies.length}
             <div in:fly={{y: 20}} class="-mb-2">

src/app/shared/NoteCreateInline.svelte

@@ -7,7 +7,7 @@
   import Popover from "src/partials/Popover.svelte"
   import Compose from "src/app/shared/Compose.svelte"
   import ImageInput from "src/partials/ImageInput.svelte"
-  import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
+  import AltColor from "src/partials/AltColor.svelte"
   import NsecWarning from "src/app/shared/NsecWarning.svelte"
   import PersonCircle from "src/app/shared/PersonCircle.svelte"
   import NoteOptions from "src/app/shared/NoteOptions.svelte"
@@ -97,8 +97,7 @@
 </script>
 
 <form on:submit|preventDefault={() => onSubmit()}>
-  <AlternatingBackground class="z-feature overflow-hidden rounded p-3">
-    <div class="flex gap-4 text-lightest">
+  <AltColor background class="z-feature flex gap-4 overflow-hidden rounded p-3 text-lightest">
     <PersonCircle class="h-10 w-10" pubkey={$pubkey} />
     <div class="w-full">
       <Compose placeholder="What's up?" bind:this={compose} {onSubmit} style="min-height: 3em;" />
@@ -123,8 +122,7 @@
         <Anchor button accent on:click={() => onSubmit()}>Send</Anchor>
       </div>
     </div>
-    </div>
-  </AlternatingBackground>
+  </AltColor>
 </form>
 
 <NoteOptions

src/app/shared/NoteReply.svelte

@@ -5,7 +5,7 @@
   import {asNostrEvent} from "src/util/nostr"
   import {slide} from "src/util/transition"
   import ImageInput from "src/partials/ImageInput.svelte"
-  import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
+  import AltColor from "src/partials/AltColor.svelte"
   import Chip from "src/partials/Chip.svelte"
   import Compose from "src/app/shared/Compose.svelte"
   import NsecWarning from "src/app/shared/NsecWarning.svelte"
@@ -149,9 +149,9 @@
     bind:this={container}
     on:click|stopPropagation>
     {#if showBorder}
-      <AlternatingBackground class="absolute bottom-0 left-4 top-0 z-none -my-2 w-px" />
+      <AltColor background class="absolute bottom-0 left-4 top-0 z-none -my-2 w-px" />
     {/if}
-    <AlternatingBackground class="z-feature overflow-hidden rounded">
+    <AltColor background class="z-feature overflow-hidden rounded">
       <div class="p-3 text-lightest" class:rounded-b={mentions.length === 0}>
         <Compose autofocus bind:this={compose} onSubmit={() => send()} style="min-height: 4rem">
           <div class="flex flex-col justify-start" slot="addon">
@@ -190,7 +190,7 @@
           <div class="-mb-2" />
         </div>
       </div>
-    </AlternatingBackground>
+    </AltColor>
   </div>
 {/if}
 

src/engine/people/utils.ts

@@ -37,7 +37,7 @@ export const getPersonWithDefault = pubkey => ({pubkey, ...people.key(pubkey).ge
 export const displayNpub = pubkey => {
   const d = nip19.npubEncode(pubkey)
 
-  return d.slice(0, 8) + "..." + d.slice(-5)
+  return d.slice(0, 8) + "…" + d.slice(-5)
 }
 
 export const displayPerson = ({pubkey, profile}: Person) => {

src/partials/AltColor.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {onMount} from "svelte"
+
+  export let background = false
+
+  let element, isAlt
+
+  onMount(() => {
+    let cur = element
+    let count = 0
+    while (cur.parentElement) {
+      if (cur.parentElement.classList.contains("bg-swap")) {
+        count++
+      }
+
+      cur = cur.parentElement
+    }
+
+    isAlt = count % 2 === 0
+  })
+</script>
+
+<div
+  on:click
+  bind:this={element}
+  class={cx("bg-swap", $$props.class)}
+  class:bg-cocoa={background && isAlt}
+  class:bg-dark={background && !isAlt}>
+  <slot {isAlt} />
+</div>

src/partials/AlternatingBackground.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import cx from "classnames"
-  import {onMount} from "svelte"
-
-  export let interactive = false
-  export let border = false
-
-  let element, className
-
-  onMount(() => {
-    let cur = element
-    let count = 0
-    while (cur.parentElement) {
-      if (cur.parentElement.classList.contains("bg-swap")) {
-        count++
-      }
-
-      cur = cur.parentElement
-    }
-
-    const isAlt = count % 2 === 0
-
-    className = cx({
-      "border-r-4 border-transparent": border,
-      "cursor-pointer transition-colors": interactive,
-      "hover:border-accent": border && interactive,
-      "bg-cocoa": isAlt,
-      //  "hover:bg-cocoa-d": isAlt && interactive && !border,
-      "bg-dark": !isAlt,
-      //  "hover:bg-dark-d": !isAlt && interactive && !border,
-    })
-  })
-</script>
-
-<div {...$$props} class={cx($$props.class, "bg-swap", className)} bind:this={element}>
-  <slot />
-</div>

src/partials/Card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import cx from "classnames"
   import {createEventDispatcher} from "svelte"
-  import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
+  import AltColor from "src/partials/AltColor.svelte"
 
   export let interactive = false
   export let stopPropagation = false
@@ -41,10 +41,12 @@
 </script>
 
 <div on:mousedown={startClick} on:touchstart={startClick} on:click={onClick}>
-  <AlternatingBackground
-    border
-    {interactive}
-    class={cx($$props.class, "rounded py-5 px-7 text-lightest")}>
+  <AltColor
+    background
+    class={cx($$props.class, "rounded px-7 py-5 text-lightest", {
+      "cursor-pointer border-r-4 border-transparent transition-colors hover:border-mid":
+        interactive,
+    })}>
     <slot />
-  </AlternatingBackground>
+  </AltColor>
 </div>

src/partials/Modal.svelte

@@ -2,7 +2,7 @@
   import {randomId} from "hurdak"
   import {onMount} from "svelte"
   import {fly, fade} from "src/util/transition"
-  import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
+  import AltColor from "src/partials/AltColor.svelte"
   import {router} from "src/app/router"
 
   export let mini = false
@@ -114,14 +114,15 @@
             </div>
           </div>
         {/if}
-        <AlternatingBackground class="absolute mt-12 h-full w-full" />
+        <AltColor background class="absolute mt-12 h-full w-full" />
         <div on:click|stopPropagation>
-          <AlternatingBackground
+          <AltColor
+            background
             class="relative h-full w-full cursor-auto overflow-hidden rounded-t-2xl pb-10 pt-2">
-            <div class="m-auto flex max-w-2xl flex-col gap-4 p-2 modal-content-inner">
+            <div class="modal-content-inner m-auto flex max-w-2xl flex-col gap-4 p-2">
               <slot />
             </div>
-          </AlternatingBackground>
+          </AltColor>
         </div>
       </div>
     </div>