Fix self-closing tags

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}

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">

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">

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>

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

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>

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>

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">

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>

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>

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>

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>

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,
                   }),
                 ]
               },

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})

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>

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>

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}}>

src/lib/components/EmojiPicker.svelte

@@ -22,4 +22,4 @@
   })
 </script>
 
-<emoji-picker bind:this={element} />
+<emoji-picker bind:this={element}></emoji-picker>

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>

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>

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>

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 />

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
 

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}

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}

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">