mirror of
https://github.com/Blah-IM/Weblah.git
synced 2025-08-21 03:22:40 +00:00
feat: chat detail frame
This commit is contained in:
parent
78339cd0b9
commit
793217a2a0
10 changed files with 176 additions and 51 deletions
|
@ -1,8 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import type { Delta } from 'typewriter-editor';
|
||||
import InputFrame from '$lib/components/InputFrame.svelte';
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
export let delta: Delta;
|
||||
export let delta: Delta | null = null;
|
||||
export let placeholder: string = '';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
|
@ -14,6 +17,14 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
{#await loadClientComponent() then Input}
|
||||
<svelte:component this={Input} bind:delta class={className}><slot /></svelte:component>
|
||||
{/await}
|
||||
<InputFrame class={tw('overflow-y-auto', className)}>
|
||||
{#await loadClientComponent()}
|
||||
<div class="rich-text opacity-50">
|
||||
<p>{placeholder}</p>
|
||||
</div>
|
||||
{:then Input}
|
||||
<svelte:component this={Input} bind:delta class={className} {placeholder}>
|
||||
<slot />
|
||||
</svelte:component>
|
||||
{/await}
|
||||
</InputFrame>
|
||||
|
|
|
@ -1,12 +1,8 @@
|
|||
<script lang="ts">
|
||||
import InputFrame from '$lib/components/InputFrame.svelte';
|
||||
import { tw } from '$lib/tw';
|
||||
import { Delta, Editor, asRoot } from 'typewriter-editor';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
|
||||
export let delta: Delta;
|
||||
export let delta: Delta = new Delta();
|
||||
export let placeholder: string = '';
|
||||
|
||||
const editor = new Editor();
|
||||
delta = editor.getDelta();
|
||||
|
@ -17,8 +13,13 @@
|
|||
$: editor.setDelta(delta);
|
||||
</script>
|
||||
|
||||
<InputFrame class={tw('overflow-y-auto', className)}>
|
||||
<div class="rich-text w-full outline-none" use:asRoot={editor}>
|
||||
<slot />
|
||||
</div>
|
||||
</InputFrame>
|
||||
<div
|
||||
class="rich-text relative w-full outline-none before:absolute before:hidden before:leading-tight before:opacity-50 before:content-[attr(data-weblah-placeholder)] data-[weblah-is-empty]:before:block"
|
||||
use:asRoot={editor}
|
||||
data-weblah-is-empty={!delta || (delta.ops.length === 1 && delta.ops[0].insert === '\n')
|
||||
? 'true'
|
||||
: undefined}
|
||||
data-weblah-placeholder={placeholder}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
45
src/lib/formatters.ts
Normal file
45
src/lib/formatters.ts
Normal file
|
@ -0,0 +1,45 @@
|
|||
const unreadCountFormatter = new Intl.NumberFormat('default', {
|
||||
notation: 'compact',
|
||||
compactDisplay: 'short'
|
||||
});
|
||||
|
||||
export function formatUnreadCount(count: number) {
|
||||
return unreadCountFormatter.format(count);
|
||||
}
|
||||
|
||||
const sameDayFormatter = new Intl.DateTimeFormat('default', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
const sameYearFormatter = new Intl.DateTimeFormat('default', {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
const otherYearFormatter = new Intl.DateTimeFormat('default', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
const fullDateTimeFormatter = new Intl.DateTimeFormat('default', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
|
||||
export const formatMessageDate = (date: Date, full: boolean = false) => {
|
||||
if (full) return fullDateTimeFormatter.format(date);
|
||||
|
||||
const now = new Date();
|
||||
if (date.getFullYear() === now.getFullYear()) {
|
||||
if (date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
|
||||
return sameDayFormatter.format(date);
|
||||
} else {
|
||||
return sameYearFormatter.format(date);
|
||||
}
|
||||
} else {
|
||||
return otherYearFormatter.format(date);
|
||||
}
|
||||
};
|
6
src/lib/types/chat.ts
Normal file
6
src/lib/types/chat.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
export type Chat = {
|
||||
id: string;
|
||||
name: string;
|
||||
profilePictureUrl?: string;
|
||||
type: 'group' | 'peer' | 'channel';
|
||||
};
|
1
src/lib/types/index.ts
Normal file
1
src/lib/types/index.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export * from './chat';
|
Loading…
Add table
Add a link
Reference in a new issue