diff --git a/src/lib/components/RichTextInput.svelte b/src/lib/components/RichTextInput.svelte index 05771af..0d6be5c 100644 --- a/src/lib/components/RichTextInput.svelte +++ b/src/lib/components/RichTextInput.svelte @@ -1,8 +1,11 @@ -{#await loadClientComponent() then Input} - -{/await} + + {#await loadClientComponent()} +
+

{placeholder}

+
+ {:then Input} + + + + {/await} + diff --git a/src/lib/components/RichTextInput/ClientInput.svelte b/src/lib/components/RichTextInput/ClientInput.svelte index a9aaca3..2455b73 100644 --- a/src/lib/components/RichTextInput/ClientInput.svelte +++ b/src/lib/components/RichTextInput/ClientInput.svelte @@ -1,12 +1,8 @@ - -
- -
- +
+ +
diff --git a/src/lib/formatters.ts b/src/lib/formatters.ts new file mode 100644 index 0000000..7192080 --- /dev/null +++ b/src/lib/formatters.ts @@ -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); + } +}; diff --git a/src/lib/types/chat.ts b/src/lib/types/chat.ts new file mode 100644 index 0000000..af245a5 --- /dev/null +++ b/src/lib/types/chat.ts @@ -0,0 +1,6 @@ +export type Chat = { + id: string; + name: string; + profilePictureUrl?: string; + type: 'group' | 'peer' | 'channel'; +}; diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts new file mode 100644 index 0000000..043e5b3 --- /dev/null +++ b/src/lib/types/index.ts @@ -0,0 +1 @@ +export * from './chat'; diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte index 16abc8c..019206a 100644 --- a/src/routes/(app)/ChatListItem.svelte +++ b/src/routes/(app)/ChatListItem.svelte @@ -1,4 +1,5 @@

  • {chat.name}

    - +

    @@ -64,7 +39,7 @@ - {unreadCountFormatter.format(chat.unreadCount)} + {formatUnreadCount(chat.unreadCount)} {/if}

    diff --git a/src/routes/(app)/chats/[chatId]/+page.svelte b/src/routes/(app)/chats/[chatId]/+page.svelte index e36619e..f3102c2 100644 --- a/src/routes/(app)/chats/[chatId]/+page.svelte +++ b/src/routes/(app)/chats/[chatId]/+page.svelte @@ -1,6 +1,15 @@ -

    History Page for {$page.params.chatId}

    +
    + + + +
    diff --git a/src/routes/(app)/chats/[chatId]/ChatHeader.svelte b/src/routes/(app)/chats/[chatId]/ChatHeader.svelte new file mode 100644 index 0000000..89f1089 --- /dev/null +++ b/src/routes/(app)/chats/[chatId]/ChatHeader.svelte @@ -0,0 +1,32 @@ + + +
    + +
    +

    {chat.name}

    +
    + +
    diff --git a/src/routes/(app)/chats/[chatId]/ChatInput.svelte b/src/routes/(app)/chats/[chatId]/ChatInput.svelte new file mode 100644 index 0000000..7f17992 --- /dev/null +++ b/src/routes/(app)/chats/[chatId]/ChatInput.svelte @@ -0,0 +1,43 @@ + + +
    + + + +
    diff --git a/tailwind.config.ts b/tailwind.config.ts index c0423d6..ab29def 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,4 +1,5 @@ import type { Config } from 'tailwindcss'; +import colors from 'tailwindcss/colors'; export default { content: ['./src/**/*.{html,js,svelte,ts}'], @@ -14,6 +15,7 @@ export default { theme: { extend: { colors: { + accent: colors.blue, // Semantic Background sb: { primary: 'var(--weblah-color-sb-primary)',