div]:bg-sf-tertiary', className)}>
diff --git a/src/lib/components/PageHeader.svelte b/src/lib/components/PageHeader.svelte
index c85678d..94a6516 100644
--- a/src/lib/components/PageHeader.svelte
+++ b/src/lib/components/PageHeader.svelte
@@ -1,8 +1,13 @@
-
+ {@render children?.()}
diff --git a/src/lib/components/ProfilePicture.svelte b/src/lib/components/ProfilePicture.svelte
index b4d32f2..bd01f0b 100644
--- a/src/lib/components/ProfilePicture.svelte
+++ b/src/lib/components/ProfilePicture.svelte
@@ -2,8 +2,12 @@
import type { Account } from '$lib/accounts/accountStore';
import { AvatarBeam } from 'svelte-boring-avatars';
- export let account: Account | undefined;
- export let size: number = 32;
+ interface Props {
+ account: Account | undefined;
+ size?: number;
+ }
+
+ let { account, size = 32 }: Props = $props();
{#if account}
@@ -13,9 +17,9 @@
{account.profile.signee.payload.name}
{:else}
+ aria-hidden="true"
+ >
diff --git a/src/lib/components/RichTextRenderer/PlainTextRenderer.svelte b/src/lib/components/RichTextRenderer/PlainTextRenderer.svelte
index 1cc4027..e77b8d2 100644
--- a/src/lib/components/RichTextRenderer/PlainTextRenderer.svelte
+++ b/src/lib/components/RichTextRenderer/PlainTextRenderer.svelte
@@ -1,5 +1,9 @@
{#each text.split('\n') as segment, idx}
diff --git a/src/lib/components/RichTextRenderer/RichTextSpan.svelte b/src/lib/components/RichTextRenderer/RichTextSpan.svelte
index db64052..78b5ce7 100644
--- a/src/lib/components/RichTextRenderer/RichTextSpan.svelte
+++ b/src/lib/components/RichTextRenderer/RichTextSpan.svelte
@@ -1,3 +1,4 @@
+
-
+ {@render children?.()}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index a79ae87..4f2a158 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,8 +1,13 @@
-
-
+ {@render children?.()}
{:else}
-
+
{@render children?.()}
{/if}
diff --git a/src/routes/(app)/ChatList.svelte b/src/routes/(app)/ChatList.svelte
index 3515bc3..adf5069 100644
--- a/src/routes/(app)/ChatList.svelte
+++ b/src/routes/(app)/ChatList.svelte
@@ -9,8 +9,8 @@
const chatList = browser ? useChatList(chatServerConnectionPool.chatList) : null;
- let isSearchFocused: boolean;
- let searchQuery: string;
+ let isSearchFocused: boolean = $state(false);
+ let searchQuery: string = $state('');
@@ -18,14 +18,14 @@
{#if $chatList}
- {#each $chatList as chat}
+ {#each $chatList as chat (chat.id)}
{/each}
{/if}
{#if isSearchFocused || searchQuery}
diff --git a/src/routes/(app)/ChatListHeader.svelte b/src/routes/(app)/ChatListHeader.svelte
index 705ef37..a992e19 100644
--- a/src/routes/(app)/ChatListHeader.svelte
+++ b/src/routes/(app)/ChatListHeader.svelte
@@ -5,10 +5,14 @@
import { tw } from '$lib/tw';
import CurrentAccountPicture from './CurrentAccountPicture.svelte';
- export let searchQuery: string = '';
- export let isSearchFocused: boolean;
+ interface Props {
+ searchQuery?: string;
+ isSearchFocused: boolean;
+ }
- let inputElement: HTMLInputElement;
+ let { searchQuery = $bindable(''), isSearchFocused = $bindable() }: Props = $props();
+
+ let inputElement: HTMLInputElement = $state();
function onTapClear(e: MouseEvent) {
e.preventDefault();
@@ -37,10 +41,10 @@
class="w-full flex-1 bg-transparent text-sm leading-4 text-sf-primary focus:outline-hidden"
bind:value={searchQuery}
bind:this={inputElement}
- on:focus={() => {
+ onfocus={() => {
isSearchFocused = true;
}}
- on:blur={(e) => {
+ onblur={(e) => {
// If the related target is an anchor element, trigger the click as the user is trying to navigate
if (
e.relatedTarget instanceof HTMLAnchorElement ||
@@ -57,7 +61,7 @@
'-mx-2 -my-1.5 flex size-8 cursor-text items-center justify-center text-slate-300 opacity-0 transition-[opacity,transform] duration-200 dark:text-slate-500',
isSearchFocused && 'translate-x-full cursor-default opacity-100'
)}
- on:click={onTapClear}
+ onclick={onTapClear}
>
Clear
diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte
index 083af76..7510c29 100644
--- a/src/routes/(app)/ChatListItem.svelte
+++ b/src/routes/(app)/ChatListItem.svelte
@@ -1,4 +1,6 @@
{
openAccountStore().then((store) => {
diff --git a/src/routes/(app)/SearchChatResultSection.svelte b/src/routes/(app)/SearchChatResultSection.svelte
index 7f2b49d..d24be03 100644
--- a/src/routes/(app)/SearchChatResultSection.svelte
+++ b/src/routes/(app)/SearchChatResultSection.svelte
@@ -3,8 +3,12 @@
import ChatListItem from './ChatListItem.svelte';
- export let name: string;
- export let results: Chat[];
+ interface Props {
+ name: string;
+ results: Chat[];
+ }
+
+ let { name, results }: Props = $props();
diff --git a/src/routes/(app)/SearchPanel.svelte b/src/routes/(app)/SearchPanel.svelte
index 7236cc9..5faf0d1 100644
--- a/src/routes/(app)/SearchPanel.svelte
+++ b/src/routes/(app)/SearchPanel.svelte
@@ -4,7 +4,11 @@
import ChatListItem from './ChatListItem.svelte';
import SearchChatResultSection from './SearchChatResultSection.svelte';
- export let searchQuery: string;
+ interface Props {
+ searchQuery: string;
+ }
+
+ let { searchQuery }: Props = $props();
async function search(query: string) {
const results = await chatServerConnectionPool.searchManager.searchChats(query);
diff --git a/src/routes/(app)/chats/[server]/[chatId]/+page.svelte b/src/routes/(app)/chats/[server]/[chatId]/+page.svelte
index 683c235..3db25ef 100644
--- a/src/routes/(app)/chats/[server]/[chatId]/+page.svelte
+++ b/src/routes/(app)/chats/[server]/[chatId]/+page.svelte
@@ -1,4 +1,6 @@
diff --git a/src/routes/(app)/chats/[server]/[chatId]/ChatHeader.svelte b/src/routes/(app)/chats/[server]/[chatId]/ChatHeader.svelte
index 97c728c..18d80c8 100644
--- a/src/routes/(app)/chats/[server]/[chatId]/ChatHeader.svelte
+++ b/src/routes/(app)/chats/[server]/[chatId]/ChatHeader.svelte
@@ -5,8 +5,12 @@
import { AvatarBeam } from 'svelte-boring-avatars';
import { ChevronLeft, Icon } from 'svelte-hero-icons';
- export let info: Chat;
- export let outsideUnreadCount = 0;
+ interface Props {
+ info: Chat;
+ outsideUnreadCount?: number;
+ }
+
+ let { info, outsideUnreadCount = 0 }: Props = $props();
+ import { run } from 'svelte/legacy';
+
import { VList } from 'virtua/svelte';
import ChatMessage from './ChatMessage.svelte';
@@ -9,46 +11,54 @@
import ServiceMessage from '$lib/components/ServiceMessage.svelte';
import { formatMessageSectionDate } from '$lib/formatters';
- export let sectionedMessages: MessageSection[] = [];
- export let mySenderId: string;
+ interface Props {
+ sectionedMessages?: MessageSection[];
+ mySenderId: string;
+ }
- let ref: VList
| undefined;
+ let { sectionedMessages = [], mySenderId }: Props = $props();
+
+ let ref: VList | undefined = $state();
async function scrollToIndex(index: number, smooth = true) {
await tick();
ref?.scrollToIndex(index, { align: 'end', smooth });
}
- $: scrollToIndex(sectionedMessages.length - 1);
+ run(() => {
+ scrollToIndex(sectionedMessages.length - 1);
+ });
-
- {@const isMyself = mySenderId === messageSection.sender?.id}
+
+ {#snippet children({ item: messageSection })}
+ {@const isMyself = mySenderId === messageSection.sender?.id}
-
- {#if messageSection.date}
-
-
- {formatMessageSectionDate(messageSection.date)}
-
-
- {/if}
-
-
-
- {#if messageSection.sender && !isMyself}
-
{messageSection.sender.name}
- {/if}
- {#each messageSection.messages as message, idx}
-
- {/each}
+
+ {#if messageSection.date}
+
+
+ {formatMessageSectionDate(messageSection.date)}
+
+
+ {/if}
+
+
+
+ {#if messageSection.sender && !isMyself}
+
{messageSection.sender.name}
+ {/if}
+ {#each messageSection.messages as message, idx}
+
+ {/each}
+
-
+ {/snippet}
diff --git a/src/routes/(app)/chats/[server]/[chatId]/ChatInput.svelte b/src/routes/(app)/chats/[server]/[chatId]/ChatInput.svelte
index 362b65a..d94ccb3 100644
--- a/src/routes/(app)/chats/[server]/[chatId]/ChatInput.svelte
+++ b/src/routes/(app)/chats/[server]/[chatId]/ChatInput.svelte
@@ -5,10 +5,10 @@
import { createEventDispatcher } from 'svelte';
import type { Delta, Editor } from 'typewriter-editor';
- let editor: Editor | undefined;
- let delta: Delta;
- let plainText: string = '';
- let form: HTMLFormElement | null = null;
+ let editor: Editor | undefined = $state();
+ let delta: Delta | undefined = $state();
+ let plainText: string = $state('');
+ let form: HTMLFormElement | null = $state(null);
const dispatch = createEventDispatcher<{ sendMessage: BlahRichText }>();
@@ -17,8 +17,10 @@
form?.requestSubmit();
}
- async function submit() {
- if (plainText.trim() === '') return;
+ async function submit(event: SubmitEvent) {
+ event.preventDefault();
+
+ if (plainText.trim() === '' || !delta) return;
const brt = deltaToBlahRichText(delta);
dispatch('sendMessage', brt);
@@ -28,9 +30,9 @@