Get chat view started

src/lib/components/Avatar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import Icon from "@lib/components/Icon.svelte"
+
+  export let src
+  export let size = 7
+</script>
+
+<div
+  class={cx($$props.class, "!flex items-center justify-center rounded-full overflow-hidden")}
+  style={`width: ${size * 4}px; height: ${size * 4}px;`}>
+  {#if src}
+    <img alt="" {src} />
+  {:else}
+    <Icon icon="user-rounded" size={Math.round(size * .7)} />
+  {/if}
+</div>

src/lib/components/Icon.svelte

@@ -12,6 +12,7 @@
   import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
   import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
   import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl"
+  import ArrowRight from "@assets/icons/Arrow Right.svg?dataurl"
   import CheckCircle from "@assets/icons/Check Circle.svg?dataurl"
   import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
   import CloseCircle from "@assets/icons/Close Circle.svg?dataurl"
@@ -48,6 +49,7 @@
     "add-circle": AddCircle,
     "alt-arrow-right": AltArrowRight,
     "alt-arrow-left": AltArrowLeft,
+    "arrow-right": ArrowRight,
     "check-circle": CheckCircle,
     "clipboard-text": ClipboardText,
     "close-circle": CloseCircle,

src/lib/util.ts

@@ -60,3 +60,33 @@ export const createSearch = <V, T>(data: T[], opts: SearchOptions<V, T>) => {
     searchValues: (term: string) => search(term).map(opts.getValue),
   }
 }
+
+
+export const secondsToDate = (ts: number) => new Date(ts * 1000)
+
+export const dateToSeconds = (date: Date) => Math.round(date.valueOf() / 1000)
+
+export const getTimeZone = () => new Date().toString().match(/GMT[^\s]+/)
+
+export const createLocalDate = (dateString: any) => new Date(`${dateString} ${getTimeZone()}`)
+
+export const getLocale = () => new Intl.DateTimeFormat().resolvedOptions().locale
+
+export const formatTimestamp = (ts: number) => {
+  const formatter = new Intl.DateTimeFormat(getLocale(), {
+    dateStyle: "short",
+    timeStyle: "short",
+  })
+
+  return formatter.format(secondsToDate(ts))
+}
+
+export const formatTimestampAsDate = (ts: number) => {
+  const formatter = new Intl.DateTimeFormat(getLocale(), {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  })
+
+  return formatter.format(secondsToDate(ts))
+}