diff --git a/eslint.config.js b/eslint.config.js index 62dbd03..b38d7a5 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -25,6 +25,16 @@ export default [ parserOptions: { parser: ts.parser } + }, + rules: { + '@typescript-eslint/no-unused-vars': [ + 'error', + { varsIgnorePattern: '^(\\$\\$(Props|Events|Slots)$|_)' } + ], + '@typescript-eslint/no-empty-object-type': [ + 'error', + { allowInterfaces: 'with-single-extends' } + ] } }, { diff --git a/package.json b/package.json index a2b93f5..152df06 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "private": true, "scripts": { - "dev": "vite dev", + "dev": "vite dev --host", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", diff --git a/src/app.css b/src/app.css index a31e444..cb71f47 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,45 @@ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; + +@layer base { + .weblah-light-theme { + --weblah-color-sb-primary: theme(colors.slate.50); + --weblah-color-sb-secondary: theme(colors.slate.100); + --weblah-color-sb-tertiary: theme(colors.slate.200); + + --weblah-color-sf-primary: theme(colors.slate.900); + --weblah-color-sf-secondary: theme(colors.slate.500); + --weblah-color-sf-tertiary: theme(colors.slate.400); + + --weblah-color-ss-primary: theme(colors.slate.300); + --weblah-color-ss-secondary: theme(colors.slate.300 / 60%); + } + + .weblah-dark-theme { + --weblah-color-sb-primary: theme(colors.slate.950); + --weblah-color-sb-secondary: theme(colors.slate.900); + --weblah-color-sb-tertiary: theme(colors.slate.800); + + --weblah-color-sf-primary: theme(colors.slate.100); + --weblah-color-sf-secondary: theme(colors.slate.400); + --weblah-color-sf-tertiary: theme(colors.slate.500); + + --weblah-color-ss-primary: theme(colors.slate.700); + --weblah-color-ss-secondary: theme(colors.slate.700 / 60%); + } + + :root { + @apply weblah-light-theme; + } + + :is([data-weblah-color-scheme='dark'] *) { + @apply weblah-dark-theme; + } + + @media (prefers-color-scheme: dark) { + :not([data-weblah-color-scheme='light'] *) { + @apply weblah-dark-theme; + } + } +} diff --git a/src/app.html b/src/app.html index bd4b01d..1800846 100644 --- a/src/app.html +++ b/src/app.html @@ -1,14 +1,17 @@ - + - + %sveltekit.head%
%sveltekit.body%
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte new file mode 100644 index 0000000..e8e8160 --- /dev/null +++ b/src/lib/components/Button.svelte @@ -0,0 +1,28 @@ + + + + + diff --git a/src/lib/components/InputFrame.svelte b/src/lib/components/InputFrame.svelte new file mode 100644 index 0000000..6fdea09 --- /dev/null +++ b/src/lib/components/InputFrame.svelte @@ -0,0 +1,15 @@ + + +
+ +
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte new file mode 100644 index 0000000..9769f14 --- /dev/null +++ b/src/routes/(app)/+layout.svelte @@ -0,0 +1,68 @@ + + +
+ + {#if mainVisible} +
+ +
+ {:else} + + {/if} +
+ + diff --git a/src/routes/+page.svelte b/src/routes/(app)/+page.svelte similarity index 100% rename from src/routes/+page.svelte rename to src/routes/(app)/+page.svelte diff --git a/src/routes/ChatList.svelte b/src/routes/(app)/ChatList.svelte similarity index 54% rename from src/routes/ChatList.svelte rename to src/routes/(app)/ChatList.svelte index b844a64..0566554 100644 --- a/src/routes/ChatList.svelte +++ b/src/routes/(app)/ChatList.svelte @@ -5,13 +5,50 @@
-
+
    + + + + import Button from '$lib/components/Button.svelte'; + import InputFrame from '$lib/components/InputFrame.svelte'; import { AvatarBeam } from 'svelte-boring-avatars'; -
    +
    -
    + -
    - +
    diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte new file mode 100644 index 0000000..16abc8c --- /dev/null +++ b/src/routes/(app)/ChatListItem.svelte @@ -0,0 +1,73 @@ + + +
  • + +
    + +
    +
    +
    +

    {chat.name}

    + +
    +
    +

    + {#if chat.id !== chat.lastMessage.sender.id} + {chat.lastMessage.sender.name}: + {/if} + {chat.lastMessage.content} +

    + {#if chat.unreadCount} + + {unreadCountFormatter.format(chat.unreadCount)} + + {/if} +
    +
    +     +
    • diff --git a/src/routes/(app)/chats/[chatId]/+page.svelte b/src/routes/(app)/chats/[chatId]/+page.svelte new file mode 100644 index 0000000..e36619e --- /dev/null +++ b/src/routes/(app)/chats/[chatId]/+page.svelte @@ -0,0 +1,6 @@ + + +

    History Page for {$page.params.chatId}

    diff --git a/src/routes/(internal)/_design-system/+page.svelte b/src/routes/(internal)/_design-system/+page.svelte new file mode 100644 index 0000000..0421d08 --- /dev/null +++ b/src/routes/(internal)/_design-system/+page.svelte @@ -0,0 +1,16 @@ + + +
    +

    Colors

    + +
    +
    + +
    +
    + +
    +
    +
    diff --git a/src/routes/(internal)/_design-system/ColorPalette.svelte b/src/routes/(internal)/_design-system/ColorPalette.svelte new file mode 100644 index 0000000..61dfbf7 --- /dev/null +++ b/src/routes/(internal)/_design-system/ColorPalette.svelte @@ -0,0 +1,24 @@ + + +
    +

    {title}

    +
    +
    +
    Primary BG
    +

    Secondary FG

    +

    Tertiary FG

    +
    +
    +
    Secondary BG
    +

    Secondary FG

    +

    Tertiary FG

    +
    +
    +
    Tertiary BG
    +

    Secondary FG

    +

    Tertiary FG

    +
    +
    +
    diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e95d3f8..f87b35e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,33 +1,5 @@ - -
    - -
    - -
    -
    + diff --git a/src/routes/ChatListItem.svelte b/src/routes/ChatListItem.svelte deleted file mode 100644 index d471cbb..0000000 --- a/src/routes/ChatListItem.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - -
  • - -
    - -
    -
    -
    -

    {chat.name}

    - -
    -

    {chat.lastMessage.content}

    -
    -     -
    • diff --git a/src/routes/chats/[chatId]/+page.svelte b/src/routes/chats/[chatId]/+page.svelte deleted file mode 100644 index 98a6ea8..0000000 --- a/src/routes/chats/[chatId]/+page.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -

    Chat History Page for {$page.params.chatId}

    diff --git a/tailwind.config.ts b/tailwind.config.ts index d316e6d..c0423d6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,13 +1,36 @@ import type { Config } from 'tailwindcss'; -import colors from 'tailwindcss/colors'; export default { content: ['./src/**/*.{html,js,svelte,ts}'], + darkMode: [ + 'variant', + [ + '@media (prefers-color-scheme: dark) { &:not([data-weblah-color-scheme="light"] *) }', + '&:is([data-weblah-color-scheme="dark"] *)' + ] + ], + theme: { extend: { colors: { - accent: colors.blue + // Semantic Background + sb: { + primary: 'var(--weblah-color-sb-primary)', + secondary: 'var(--weblah-color-sb-secondary)', + tertiary: 'var(--weblah-color-sb-tertiary)' + }, + // Semantic Foreground + sf: { + primary: 'var(--weblah-color-sf-primary)', + secondary: 'var(--weblah-color-sf-secondary)', + tertiary: 'var(--weblah-color-sf-tertiary)' + }, + // Semantic Stroke + ss: { + primary: 'var(--weblah-color-ss-primary)', + secondary: 'var(--weblah-color-ss-secondary)' + } } } },