From 5482aa7e6f39bd9b587e13fd7060363635cf8019 Mon Sep 17 00:00:00 2001
From: Zachary Johnson <zachary.business@tutanota.com>
Date: Mon, 14 Oct 2024 21:59:06 -0400
Subject: [PATCH 1/2] move displayList into the project and utilize
 Intl.ListFormat

---
 src/app/shared/FeedSummary.svelte     |  4 +-
 src/app/views/ChannelCreate.svelte    |  3 +-
 src/app/views/ChannelsListItem.svelte |  2 +-
 src/app/views/RelayList.svelte        |  3 +-
 src/partials/Channel.svelte           |  4 +-
 src/partials/ImageInput.svelte        |  2 +-
 src/util/misc.ts                      | 14 +++++++
 tests/unit/util/misc.spec.ts          | 59 +++++++++++++++++++++++++++
 8 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 tests/unit/util/misc.spec.ts

diff --git a/src/app/shared/FeedSummary.svelte b/src/app/shared/FeedSummary.svelte
index 77a3b080a..9a41f1c6a 100644
--- a/src/app/shared/FeedSummary.svelte
+++ b/src/app/shared/FeedSummary.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {quantify, pluralize, displayList} from "hurdak"
+  import {quantify, pluralize} from "hurdak"
   import {
     isScopeFeed,
     isRelayFeed,
@@ -18,7 +18,7 @@
   } from "@welshman/feeds"
   import {displayRelayUrl} from "@welshman/util"
   import {displayProfileByPubkey} from "@welshman/app"
-  import {formatTimestampAsDate} from "src/util/misc"
+  import {displayList, formatTimestampAsDate} from "src/util/misc"
   import Chip from "src/partials/Chip.svelte"
 
   export let feed
diff --git a/src/app/views/ChannelCreate.svelte b/src/app/views/ChannelCreate.svelte
index d297f9c6d..ae9a74712 100644
--- a/src/app/views/ChannelCreate.svelte
+++ b/src/app/views/ChannelCreate.svelte
@@ -2,13 +2,14 @@
   import {derived} from "svelte/store"
   import {uniq} from "@welshman/lib"
   import {pubkey, displayProfileByPubkey, inboxRelaySelectionsByPubkey} from "@welshman/app"
-  import {displayList, pluralize} from "hurdak"
+  import {pluralize} from "hurdak"
   import Field from "src/partials/Field.svelte"
   import FlexColumn from "src/partials/FlexColumn.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import PersonSelect from "src/app/shared/PersonSelect.svelte"
   import {router} from "src/app/util/router"
   import {hasNip44} from "src/engine"
+  import {displayList} from "src/util/misc"
 
   let value = []
 
diff --git a/src/app/views/ChannelsListItem.svelte b/src/app/views/ChannelsListItem.svelte
index 4cca011cb..565200cdf 100644
--- a/src/app/views/ChannelsListItem.svelte
+++ b/src/app/views/ChannelsListItem.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import {without} from "ramda"
-  import {displayList} from "hurdak"
   import {derived} from "svelte/store"
   import {pubkey, profiles, displayProfileByPubkey} from "@welshman/app"
   import PersonCircles from "src/app/shared/PersonCircles.svelte"
   import Card from "src/partials/Card.svelte"
   import {router} from "src/app/util/router"
   import {channelHasNewMessages} from "src/engine"
+  import {displayList} from "src/util/misc"
 
   export let channel
 
diff --git a/src/app/views/RelayList.svelte b/src/app/views/RelayList.svelte
index 36bf02b0b..f0a120a12 100644
--- a/src/app/views/RelayList.svelte
+++ b/src/app/views/RelayList.svelte
@@ -2,7 +2,6 @@
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
   import {groupBy, sortBy, uniq} from "ramda"
-  import {displayList} from "hurdak"
   import {ctx, pushToMapKey} from "@welshman/lib"
   import {
     pubkey,
@@ -18,7 +17,7 @@
     relaySelectionsByPubkey,
   } from "@welshman/app"
   import {Tags, isShareableRelayUrl, normalizeRelayUrl, profileHasName} from "@welshman/util"
-  import {createScroller} from "src/util/misc"
+  import {createScroller, displayList} from "src/util/misc"
   import {showWarning} from "src/partials/Toast.svelte"
   import Tabs from "src/partials/Tabs.svelte"
   import Modal from "src/partials/Modal.svelte"
diff --git a/src/partials/Channel.svelte b/src/partials/Channel.svelte
index 2fe45c68d..e92323366 100644
--- a/src/partials/Channel.svelte
+++ b/src/partials/Channel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import cx from "classnames"
   import {onMount} from "svelte"
-  import {displayList, pluralize} from "hurdak"
+  import {pluralize} from "hurdak"
   import {derived} from "svelte/store"
   import {sleep, remove} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
@@ -14,7 +14,7 @@
   } from "@welshman/app"
   import {prop, max, reverse, pluck, sortBy, last} from "ramda"
   import {fly, slide} from "src/util/transition"
-  import {createScroller, formatTimestamp} from "src/util/misc"
+  import {createScroller, displayList, formatTimestamp} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Popover from "src/partials/Popover.svelte"
diff --git a/src/partials/ImageInput.svelte b/src/partials/ImageInput.svelte
index 540d6d4ad..8cfc805a6 100644
--- a/src/partials/ImageInput.svelte
+++ b/src/partials/ImageInput.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import {createEventDispatcher} from "svelte"
-  import {displayList} from "hurdak"
   import Input from "src/partials/Input.svelte"
   import Modal from "src/partials/Modal.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import {listenForFile} from "src/util/html"
   import {uploadFiles, getSetting} from "src/engine"
+  import {displayList} from "src/util/misc"
 
   export let icon = null
   export let value = null
diff --git a/src/util/misc.ts b/src/util/misc.ts
index 6801a439c..4d002d574 100644
--- a/src/util/misc.ts
+++ b/src/util/misc.ts
@@ -332,6 +332,20 @@ export const toSpliced = <T>(xs: T[], start: number, deleteCount: number = 0, ..
   ...xs.slice(start + deleteCount),
 ]
 
+export const displayList = <T>(xs: T[], conj = "and", n = 6, locale = "en-US") => {
+  // Convert all elements to strings for Intl.ListFormat
+  const stringItems = xs.map(String)
+
+  if (xs.length > n + 2) {
+    const formattedList = new Intl.ListFormat(locale, {style: "long", type: "unit"}).format(
+      stringItems.slice(0, n),
+    )
+    return `${formattedList}, ${conj} ${xs.length - n} others`
+  }
+
+  return new Intl.ListFormat(locale, {style: "long", type: "conjunction"}).format(stringItems)
+}
+
 // Local storage
 
 export const synced = <T>(key: string, defaultValue: T, delay = 300) => {
diff --git a/tests/unit/util/misc.spec.ts b/tests/unit/util/misc.spec.ts
new file mode 100644
index 000000000..c07ee715a
--- /dev/null
+++ b/tests/unit/util/misc.spec.ts
@@ -0,0 +1,59 @@
+import {describe, expect, it} from "vitest"
+import {displayList} from "../../../src/util/misc"
+
+describe("misc utils", () => {
+  describe("displayList", () => {
+    it("should return an empty string when the list is empty", () => {
+      const list = []
+      const output = displayList(list)
+
+      expect(output).toEqual("")
+    })
+
+    it("should return a single entry when list length is one", () => {
+      const list = ["Apple"]
+      const output = displayList(list)
+
+      expect(output).toEqual("Apple")
+    })
+
+    it("should return a string of both items when the list length is two", () => {
+      const list = ["Apple", "Banana"]
+      const output = displayList(list)
+
+      expect(output).toEqual("Apple and Banana")
+    })
+
+    it("should return a string of all items when the list length is three", () => {
+      const list = ["Apple", "Banana", "Cherry"]
+      const output = displayList(list)
+
+      expect(output).toEqual("Apple, Banana, and Cherry")
+    })
+
+    it("should return a truncated string of all items when the list is long", () => {
+      const list = [
+        "Apple",
+        "Banana",
+        "Orange",
+        "Pear",
+        "Grapes",
+        "Mango",
+        "Pineapple",
+        "Kiwi",
+        "Strawberry",
+        "Blueberry",
+      ]
+      const output = displayList(list)
+
+      expect(output).toEqual("Apple, Banana, Orange, Pear, Grapes, Mango, and 4 others")
+    })
+
+    it("should return a string of both items with list of two numbers", () => {
+      const list = [7, 17]
+      const output = displayList(list)
+
+      expect(output).toEqual("7 and 17")
+    })
+  })
+})

From cfec789403eaf6e518be68be005f21f85a55df66 Mon Sep 17 00:00:00 2001
From: Zachary Johnson <zachary.business@tutanota.com>
Date: Mon, 14 Oct 2024 22:29:48 -0400
Subject: [PATCH 2/2] target es2021 to make ts happy when utilizing ListFormt

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index 72a107a67..79718206c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "module": "esnext",
+    "target": "es2021",
     "paths": {
       "src/*": ["src/*"]
     },