From cfbff94b4c174de798e5ea7a5bcd42fe67e40206 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 3 Feb 2025 15:01:42 -0800
Subject: [PATCH] Fix self-closing tags

---
 src/app/components/ChannelMessage.svelte            | 2 +-
 src/app/components/ChatItem.svelte                  | 2 +-
 src/app/components/ContentLinkBlock.svelte          | 2 +-
 src/app/components/EventReport.svelte               | 2 +-
 src/app/components/MenuSpace.svelte                 | 4 ++--
 src/app/components/MenuSpaceButton.svelte           | 2 +-
 src/app/components/MenuSpacesItem.svelte            | 2 +-
 src/app/components/PrimaryNav.svelte                | 2 +-
 src/app/components/ProfileEdit.svelte               | 3 ++-
 src/app/components/QRCode.svelte                    | 3 ++-
 src/app/components/ThreadActions.svelte             | 2 +-
 src/app/components/ThunkStatus.svelte               | 2 +-
 src/app/editor/index.ts                             | 3 ++-
 src/app/modal.ts                                    | 8 ++++----
 src/lib/components/Dialog.svelte                    | 4 +++-
 src/lib/components/Divider.svelte                   | 4 ++--
 src/lib/components/Drawer.svelte                    | 4 +++-
 src/lib/components/EmojiPicker.svelte               | 2 +-
 src/lib/components/Icon.svelte                      | 3 ++-
 src/lib/components/PrimaryNavItem.svelte            | 4 ++--
 src/lib/components/SecondaryNavItem.svelte          | 4 ++--
 src/lib/components/Spinner.svelte                   | 2 +-
 src/lib/components/Tippy.svelte                     | 6 +++---
 src/routes/+layout.svelte                           | 4 ++--
 src/routes/spaces/[relay]/+page.svelte              | 5 +++--
 src/routes/spaces/[relay]/threads/[id]/+page.svelte | 2 +-
 26 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index 2932af24..78a41c0e 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/src/app/components/ChannelMessage.svelte
@@ -65,7 +65,7 @@
         <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
       </Button>
     {:else}
-      <div class="w-8 min-w-8 max-w-8" />
+      <div class="w-8 min-w-8 max-w-8"></div>
     {/if}
     <div class="min-w-0 flex-grow pr-1">
       {#if showPubkey}
diff --git a/src/app/components/ChatItem.svelte b/src/app/components/ChatItem.svelte
index 9ee2d6e2..24cc45ae 100644
--- a/src/app/components/ChatItem.svelte
+++ b/src/app/components/ChatItem.svelte
@@ -50,7 +50,7 @@
           {/if}
         </div>
         {#if !active && $notifications.has(path)}
-          <div class="h-2 w-2 rounded-full bg-primary" transition:fade />
+          <div class="h-2 w-2 rounded-full bg-primary" transition:fade></div>
         {/if}
       </div>
       <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
diff --git a/src/app/components/ContentLinkBlock.svelte b/src/app/components/ContentLinkBlock.svelte
index 855d330e..c48f9dc6 100644
--- a/src/app/components/ContentLinkBlock.svelte
+++ b/src/app/components/ContentLinkBlock.svelte
@@ -35,7 +35,7 @@
     {:else}
       {#await loadPreview()}
         <div class="center my-12 w-full">
-          <span class="loading loading-spinner" />
+          <span class="loading loading-spinner"></span>
         </div>
       {:then preview}
         <div class="bg-alt flex max-w-xl flex-col leading-normal">
diff --git a/src/app/components/EventReport.svelte b/src/app/components/EventReport.svelte
index e0848f4f..30440ea4 100644
--- a/src/app/components/EventReport.svelte
+++ b/src/app/components/EventReport.svelte
@@ -57,7 +57,7 @@
   </Field>
   <Field>
     <p slot="label">Details</p>
-    <textarea slot="input" class="textarea textarea-bordered" bind:value={content} />
+    <textarea slot="input" class="textarea textarea-bordered" bind:value={content}></textarea>
     <p slot="info">Please provide any additional details relevant to your report.</p>
   </Field>
   <ModalFooter>
diff --git a/src/app/components/MenuSpace.svelte b/src/app/components/MenuSpace.svelte
index 0e75ede5..7dafd7e2 100644
--- a/src/app/components/MenuSpace.svelte
+++ b/src/app/components/MenuSpace.svelte
@@ -115,13 +115,13 @@
       <SecondaryNavItem href={threadsPath} notification={$notifications.has(threadsPath)}>
         <Icon icon="notes-minimalistic" /> Threads
       </SecondaryNavItem>
-      <div class="h-2" />
+      <div class="h-2"></div>
       <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
       {#each $userRooms as room, i (room)}
         <MenuSpaceRoomItem notify {url} {room} />
       {/each}
       {#if $otherRooms.length > 0}
-        <div class="h-2" />
+        <div class="h-2"></div>
         <SecondaryNavHeader>
           {#if $userRooms.length > 0}
             Other Rooms
diff --git a/src/app/components/MenuSpaceButton.svelte b/src/app/components/MenuSpaceButton.svelte
index f0981e78..25e7ce65 100644
--- a/src/app/components/MenuSpaceButton.svelte
+++ b/src/app/components/MenuSpaceButton.svelte
@@ -16,6 +16,6 @@
 <Button on:click={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
   <Icon icon="menu-dots" />
   {#if $notifications.has(path)}
-    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary" />
+    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary"></div>
   {/if}
 </Button>
diff --git a/src/app/components/MenuSpacesItem.svelte b/src/app/components/MenuSpacesItem.svelte
index 1e0099fe..44ad15a2 100644
--- a/src/app/components/MenuSpacesItem.svelte
+++ b/src/app/components/MenuSpacesItem.svelte
@@ -18,7 +18,7 @@
     <div slot="title" class="flex gap-1">
       <RelayName {url} />
       {#if $notifications.has(path)}
-        <div class="relative top-1 h-2 w-2 rounded-full bg-primary" />
+        <div class="relative top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
     </div>
     <div slot="info"><RelayDescription {url} /></div>
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 0851e946..3b71c4c7 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -73,7 +73,7 @@
 <slot />
 
 <!-- a little extra something for ios -->
-<div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden" />
+<div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden"></div>
 <div
   class="border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
diff --git a/src/app/components/ProfileEdit.svelte b/src/app/components/ProfileEdit.svelte
index be210651..d818dc20 100644
--- a/src/app/components/ProfileEdit.svelte
+++ b/src/app/components/ProfileEdit.svelte
@@ -50,7 +50,8 @@
       class="textarea textarea-bordered leading-4"
       rows="3"
       bind:value={values.about}
-      slot="input" />
+      slot="input">
+    </textarea>
   </Field>
   <Field>
     <p slot="label">Nostr Address</p>
diff --git a/src/app/components/QRCode.svelte b/src/app/components/QRCode.svelte
index b105a530..95500173 100644
--- a/src/app/components/QRCode.svelte
+++ b/src/app/components/QRCode.svelte
@@ -29,6 +29,7 @@
     <canvas
       class="rounded-box"
       bind:this={canvas}
-      style={`transform-origin: top left; transform: scale(${scale}, ${scale})`} />
+      style={`transform-origin: top left; transform: scale(${scale}, ${scale})`}>
+    </canvas>
   </div>
 </Button>
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index 8884c099..d2c8348f 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/src/app/components/ThreadActions.svelte
@@ -69,7 +69,7 @@
       </div>
       <div class="btn btn-neutral btn-xs relative hidden rounded-full sm:flex">
         {#if $notifications.has(path)}
-          <div class="h-2 w-2 rounded-full bg-primary" />
+          <div class="h-2 w-2 rounded-full bg-primary"></div>
         {/if}
         Active {formatTimestampRelative(lastActive)}
       </div>
diff --git a/src/app/components/ThunkStatus.svelte b/src/app/components/ThunkStatus.svelte
index fdd63838..6cda88e8 100644
--- a/src/app/components/ThunkStatus.svelte
+++ b/src/app/components/ThunkStatus.svelte
@@ -59,7 +59,7 @@
 {:else if canCancel || isPending}
   <div class="flex justify-end px-1 text-xs {$$props.class}">
     <span class="flex items-center gap-1 {$$props.class}">
-      <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
+      <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span>
       <span class="opacity-50">Sending...</span>
       {#if canCancel}
         <Button class="link" on:click={abort}>Cancel</Button>
diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts
index 1a57cca8..fd787e9b 100644
--- a/src/app/editor/index.ts
+++ b/src/app/editor/index.ts
@@ -1,3 +1,4 @@
+import type {Component} from "svelte"
 import type {Writable} from "svelte/store"
 import {derived} from "svelte/store"
 import {createEditor, SvelteNodeViewRenderer} from "svelte-tiptap"
@@ -83,7 +84,7 @@ export const makeEditor = ({
                     editor: (this as any).editor,
                     search: derived(profileSearch, s => s.searchValues),
                     getRelays: (pubkey: string) => ctx.app.router.FromPubkeys([pubkey]).getUrls(),
-                    component: ProfileSuggestion,
+                    component: ProfileSuggestion as unknown as Component,
                   }),
                 ]
               },
diff --git a/src/app/modal.ts b/src/app/modal.ts
index 2b80d6ab..04a417c5 100644
--- a/src/app/modal.ts
+++ b/src/app/modal.ts
@@ -1,4 +1,4 @@
-import type {ComponentType} from "svelte"
+import type {Component} from "svelte"
 import {writable} from "svelte/store"
 import {randomId, always, assoc, Emitter} from "@welshman/lib"
 import {goto} from "$app/navigation"
@@ -12,7 +12,7 @@ export type ModalOptions = {
 
 export type Modal = {
   id: string
-  component: ComponentType
+  component: Component
   props: Record<string, any>
   options: ModalOptions
 }
@@ -22,7 +22,7 @@ export const emitter = new Emitter()
 export const modals = writable<Record<string, Modal>>({})
 
 export const pushModal = (
-  component: ComponentType,
+  component: Component,
   props: Record<string, any> = {},
   options: ModalOptions = {},
 ) => {
@@ -37,7 +37,7 @@ export const pushModal = (
 }
 
 export const pushDrawer = (
-  component: ComponentType,
+  component: Component,
   props: Record<string, any> = {},
   options: ModalOptions = {},
 ) => pushModal(component, props, {...options, drawer: true})
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index 0ba9241d..f580de88 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -12,9 +12,11 @@
 
 <div class="center fixed inset-0 z-modal">
   <button
+    aria-label="Close dialog"
     class="absolute inset-0 cursor-pointer bg-black opacity-75"
     transition:fade={{duration: 300}}
-    on:click={onClose} />
+    on:click={onClose}>
+  </button>
   <div class="scroll-container relative {extraClass}" transition:fly={{duration: 300}}>
     <slot />
   </div>
diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte
index b7a37d98..f1f446c2 100644
--- a/src/lib/components/Divider.svelte
+++ b/src/lib/components/Divider.svelte
@@ -1,7 +1,7 @@
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
-  <div class="h-px flex-grow bg-base-content opacity-25" />
+  <div class="h-px flex-grow bg-base-content opacity-25"></div>
   {#if $$slots.default}
     <p><slot /></p>
-    <div class="h-px flex-grow bg-base-content opacity-25" />
+    <div class="h-px flex-grow bg-base-content opacity-25"></div>
   {/if}
 </div>
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
index 190d26e3..e3e8f84d 100644
--- a/src/lib/components/Drawer.svelte
+++ b/src/lib/components/Drawer.svelte
@@ -6,9 +6,11 @@
 
 <div class="drawer fixed inset-0 z-modal">
   <button
+    aria-label="Close drawer"
     class="absolute inset-0 cursor-pointer bg-black opacity-50"
     transition:fade
-    on:click={onClose} />
+    on:click={onClose}>
+  </button>
   <div
     class="scroll-container saiy sair absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:translate={{axis: "x", duration: 300}}>
diff --git a/src/lib/components/EmojiPicker.svelte b/src/lib/components/EmojiPicker.svelte
index b038d7d8..74ef14b3 100644
--- a/src/lib/components/EmojiPicker.svelte
+++ b/src/lib/components/EmojiPicker.svelte
@@ -22,4 +22,4 @@
   })
 </script>
 
-<emoji-picker bind:this={element} />
+<emoji-picker bind:this={element}></emoji-picker>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index af86eae1..3fe6f688 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -174,4 +174,5 @@
 
 <div
   class={cx("inline-block", $$props.class)}
-  style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;" />
+  style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;">
+</div>
diff --git a/src/lib/components/PrimaryNavItem.svelte b/src/lib/components/PrimaryNavItem.svelte
index c3c64db1..433eab9b 100644
--- a/src/lib/components/PrimaryNavItem.svelte
+++ b/src/lib/components/PrimaryNavItem.svelte
@@ -19,7 +19,7 @@
       data-tip={title}>
       <slot />
       {#if !active && notification}
-        <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary" />
+        <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
     </div>
   </a>
@@ -32,7 +32,7 @@
       data-tip={title}>
       <slot />
       {#if !active && notification}
-        <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary" />
+        <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
     </div>
   </Button>
diff --git a/src/lib/components/SecondaryNavItem.svelte b/src/lib/components/SecondaryNavItem.svelte
index a44c89ce..ee76c3f9 100644
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -44,7 +44,7 @@
     class:bg-base-100={active}>
     <slot />
     {#if !active && notification}
-      <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade />
+      <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
   </a>
 {:else}
@@ -58,7 +58,7 @@
     class:text-base-content={active}
     class:bg-base-100={active}>
     {#if !active && notification}
-      <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade />
+      <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
     <slot />
   </button>
diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
index 0d999619..7b98e192 100644
--- a/src/lib/components/Spinner.svelte
+++ b/src/lib/components/Spinner.svelte
@@ -7,7 +7,7 @@
 <span class="flex min-h-10 items-center">
   {#if loading}
     <span class="pr-3" transition:slide|local={{axis: "x"}}>
-      <span class="loading loading-spinner" transition:fade|local={{duration: 100}} />
+      <span class="loading loading-spinner" transition:fade|local={{duration: 100}}></span>
     </span>
   {/if}
   <slot />
diff --git a/src/lib/components/Tippy.svelte b/src/lib/components/Tippy.svelte
index 1f3e392a..005764e9 100644
--- a/src/lib/components/Tippy.svelte
+++ b/src/lib/components/Tippy.svelte
@@ -2,14 +2,14 @@
   import "tippy.js/animations/shift-away.css"
 
   import {onMount} from "svelte"
-  import type {SvelteComponent, ComponentType, ComponentProps} from "svelte"
+  import type {Component, ComponentProps} from "svelte"
   import tippy, {type Instance, type Props} from "tippy.js"
 
-  export let component: ComponentType
+  export let component: Component
   export let props: ComponentProps<any> = {}
   export let params: Partial<Props> = {}
   export let popover: Instance | undefined = undefined
-  export let instance: SvelteComponent | undefined = undefined
+  export let instance: Component | undefined = undefined
 
   let element: Element
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 508a46a7..6c701401 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -255,13 +255,13 @@
 </svelte:head>
 
 {#await ready}
-  <div data-theme={$theme} />
+  <div data-theme={$theme}></div>
 {:then}
   <div data-theme={$theme}>
     <AppContainer>
       <slot />
     </AppContainer>
     <ModalContainer />
-    <div class="tippy-target" />
+    <div class="tippy-target"></div>
   </div>
 {/await}
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index 02bed553..761e6c58 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -126,7 +126,8 @@
           {#if $notifications.has(threadsPath)}
             <div
               class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
-              transition:fade />
+              transition:fade>
+            </div>
           {/if}
         </div>
       </Link>
@@ -142,7 +143,7 @@
             <ChannelName {url} {room} />
           </div>
           {#if $notifications.has(roomPath)}
-            <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary" transition:fade />
+            <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary" transition:fade></div>
           {/if}
         </Link>
       {/each}
diff --git a/src/routes/spaces/[relay]/threads/[id]/+page.svelte b/src/routes/spaces/[relay]/threads/[id]/+page.svelte
index 2936c714..3b81a6f0 100644
--- a/src/routes/spaces/[relay]/threads/[id]/+page.svelte
+++ b/src/routes/spaces/[relay]/threads/[id]/+page.svelte
@@ -53,7 +53,7 @@
 </script>
 
 <div class="relative flex flex-col-reverse gap-3 px-2">
-  <div class="absolute left-[51px] top-32 h-[calc(100%-248px)] w-[2px] bg-neutral" />
+  <div class="absolute left-[51px] top-32 h-[calc(100%-248px)] w-[2px] bg-neutral"></div>
   {#if $event}
     {#if !showReply}
       <div class="flex justify-end px-2 pb-2">