mirror of
https://github.com/Blah-IM/Weblah.git
synced 2025-04-30 16:21:09 +00:00
refactor: migrate to svelte 5, vite 6 and bits-ui 1.
This commit is contained in:
Shibo Lyu
parent
0bb201636a
commit
1e95dc0830
45 changed files with 1069 additions and 793 deletions
20
package.json
20
package.json
|
|
@ -16,32 +16,32 @@
|
|||
"packageManager": "pnpm@9.14.4",
|
||||
"devDependencies": {
|
||||
"@melt-ui/pp": "^0.3.2",
|
||||
"@sveltejs/adapter-auto": "^3.3.1",
|
||||
"@sveltejs/kit": "^2.9.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
||||
"@sveltejs/adapter-auto": "^4.0.0",
|
||||
"@sveltejs/kit": "^2.19.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"@tailwindcss/postcss": "^4.0.14",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/eslint": "^9.6.1",
|
||||
"eslint": "^9.22.0",
|
||||
"eslint-config-prettier": "^10.1.1",
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"eslint-plugin-svelte": "^3.1.0",
|
||||
"globals": "^16.0.0",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"svelte": "^4.2.19",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.1.5",
|
||||
"tailwindcss": "^4.0.14",
|
||||
"typescript": "^5.8.2",
|
||||
"typescript-eslint": "^8.26.1",
|
||||
"vite": "^5.1.8",
|
||||
"vitest": "^2.1.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@blah-im/core": "^0.4.2",
|
||||
"@melt-ui/svelte": "^0.86.4",
|
||||
"@zeabur/svelte-adapter": "^1.0.0",
|
||||
"bits-ui": "^0.21.16",
|
||||
"bits-ui": "^1.3.12",
|
||||
"canonicalize": "^2.0.0",
|
||||
"idb": "^8.0.2",
|
||||
"svelte-boring-avatars": "^1.2.6",
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
"svelte-persisted-store": "^0.12.0",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"typewriter-editor": "^0.12.9",
|
||||
"virtua": "^0.35.1",
|
||||
"virtua": "^0.40.3",
|
||||
"zod": "^3.24.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1099
pnpm-lock.yaml
generated
1099
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
56
src/app.css
56
src/app.css
|
|
@ -45,35 +45,35 @@
|
|||
@apply [&_span[data-weblah-brt=underline]]:underline;
|
||||
}
|
||||
|
||||
@utility weblah-light-theme {
|
||||
--weblah-color-sb-overlay: var(--color-white);
|
||||
--weblah-color-sb-primary: var(--color-slate-50);
|
||||
--weblah-color-sb-secondary: var(--color-slate-100);
|
||||
--weblah-color-sb-tertiary: var(--color-slate-200);
|
||||
|
||||
--weblah-color-sf-primary: var(--color-slate-900);
|
||||
--weblah-color-sf-secondary: var(--color-slate-500);
|
||||
--weblah-color-sf-tertiary: var(--color-slate-400);
|
||||
|
||||
--weblah-color-ss-primary: var(--color-slate-300);
|
||||
--weblah-color-ss-secondary: --theme(--color-slate-300 / 60%);
|
||||
}
|
||||
|
||||
@utility weblah-dark-theme {
|
||||
--weblah-color-sb-overlay: var(--color-slate-800);
|
||||
--weblah-color-sb-primary: var(--color-slate-900);
|
||||
--weblah-color-sb-secondary: var(--color-slate-950);
|
||||
--weblah-color-sb-tertiary: var(--color-black);
|
||||
|
||||
--weblah-color-sf-primary: var(--color-slate-100);
|
||||
--weblah-color-sf-secondary: var(--color-slate-400);
|
||||
--weblah-color-sf-tertiary: var(--color-slate-500);
|
||||
|
||||
--weblah-color-ss-primary: var(--color-slate-700);
|
||||
--weblah-color-ss-secondary: --theme(--color-slate-700 / 60%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
.weblah-light-theme {
|
||||
--weblah-color-sb-overlay: var(--color-white);
|
||||
--weblah-color-sb-primary: var(--color-slate-50);
|
||||
--weblah-color-sb-secondary: var(--color-slate-100);
|
||||
--weblah-color-sb-tertiary: var(--color-slate-200);
|
||||
|
||||
--weblah-color-sf-primary: var(--color-slate-900);
|
||||
--weblah-color-sf-secondary: var(--color-slate-500);
|
||||
--weblah-color-sf-tertiary: var(--color-slate-400);
|
||||
|
||||
--weblah-color-ss-primary: var(--color-slate-300);
|
||||
--weblah-color-ss-secondary: --theme(--color-slate-300 / 60%);
|
||||
}
|
||||
|
||||
.weblah-dark-theme {
|
||||
--weblah-color-sb-overlay: var(--color-slate-800);
|
||||
--weblah-color-sb-primary: var(--color-slate-900);
|
||||
--weblah-color-sb-secondary: var(--color-slate-950);
|
||||
--weblah-color-sb-tertiary: var(--color-black);
|
||||
|
||||
--weblah-color-sf-primary: var(--color-slate-100);
|
||||
--weblah-color-sf-secondary: var(--color-slate-400);
|
||||
--weblah-color-sf-tertiary: var(--color-slate-500);
|
||||
|
||||
--weblah-color-ss-primary: var(--color-slate-700);
|
||||
--weblah-color-ss-secondary: --theme(--color-slate-700 / 60%);
|
||||
}
|
||||
|
||||
:root {
|
||||
@apply weblah-light-theme;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,15 @@
|
|||
import { tw } from '$lib/tw';
|
||||
import { patterns, type PatternName } from './BgPattern';
|
||||
|
||||
export let pattern: PatternName = 'rain';
|
||||
|
||||
let className: string = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
pattern?: PatternName;
|
||||
class?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { pattern = 'rain', class: className = '', children }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -15,5 +20,5 @@
|
|||
)}
|
||||
style:--pattern-image={`url("${patterns[pattern]}")`}
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,44 @@
|
|||
<script lang="ts">
|
||||
import { tw } from '$lib/tw';
|
||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
type HTMLButtonOrAnchorAttributes = Partial<HTMLAnchorAttributes> & Partial<HTMLButtonAttributes>;
|
||||
|
||||
interface $$Props extends HTMLButtonOrAnchorAttributes {
|
||||
interface Props {
|
||||
variant?: 'primary' | 'secondary';
|
||||
class?: string | null;
|
||||
href?: string | null;
|
||||
children?: import('svelte').Snippet;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export let variant: $$Props['variant'] = 'secondary';
|
||||
let className: string | null = '';
|
||||
export { className as class };
|
||||
|
||||
export let href: string | null = null;
|
||||
let {
|
||||
variant = 'secondary',
|
||||
class: className = '',
|
||||
href = null,
|
||||
children,
|
||||
...rest
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<svelte:element
|
||||
this={href ? 'a' : 'button'}
|
||||
{href}
|
||||
class={tw(
|
||||
'inline-flex cursor-default items-center justify-center rounded-md px-2 py-1 text-sf-secondary shadow-xs ring-1 ring-ss-secondary',
|
||||
'font-normal transition-shadow duration-200 hover:ring-ss-primary active:shadow-inner',
|
||||
'text-sf-secondary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2 py-1 shadow-xs ring-1',
|
||||
'hover:ring-ss-primary font-normal transition-shadow duration-200 active:shadow-inner',
|
||||
variant === 'primary' && [
|
||||
'relative text-slate-50 ring-0 duration-200',
|
||||
'before:absolute before:-inset-px before:rounded-[7px]',
|
||||
'before:bg-linear-to-b before:from-accent-400 before:from-40% before:to-accent-500 before:ring-1 before:ring-inset before:ring-black/10',
|
||||
'before:transition-shadow active:before:shadow-inner dark:before:from-accent-500 dark:before:to-accent-600'
|
||||
'before:from-accent-400 before:to-accent-500 before:bg-linear-to-b before:from-40% before:ring-1 before:ring-black/10 before:ring-inset',
|
||||
'dark:before:from-accent-500 dark:before:to-accent-600 before:transition-shadow active:before:shadow-inner'
|
||||
],
|
||||
className
|
||||
)}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
role="button"
|
||||
tabindex="0"
|
||||
{...rest}
|
||||
>
|
||||
{#if variant === 'primary'}
|
||||
<div class="z-10 drop-shadow-[0_-1px_0_--theme(--color-black/0.2)]"><slot /></div>
|
||||
<div class="z-10 drop-shadow-[0_-1px_0_--theme(--color-black/0.2)]">{@render children?.()}</div>
|
||||
{:else}
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
{/if}
|
||||
</svelte:element>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,15 @@
|
|||
import { expoOut } from 'svelte/easing';
|
||||
import { scale } from 'svelte/transition';
|
||||
|
||||
interface $$Props extends DropdownMenuContentProps {}
|
||||
let className: $$Props['class'] = '';
|
||||
export { className as class };
|
||||
|
||||
interface Props {
|
||||
class?: $$Props['class'];
|
||||
children?: import('svelte').Snippet;
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
let { class: className = '', children, ...rest }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Content
|
||||
|
|
@ -17,7 +23,7 @@
|
|||
sideOffset={4}
|
||||
transition={scale}
|
||||
transitionConfig={{ start: 0.96, duration: 300, easing: expoOut }}
|
||||
{...$$restProps}
|
||||
{...rest}
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</DropdownMenu.Content>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu, type DropdownMenuItemProps } from 'bits-ui';
|
||||
interface Props extends DropdownMenuItemProps {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
type $$Props = DropdownMenuItemProps;
|
||||
let { children, ...rest }: Props = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="cursor-default rounded-sm px-1.5 py-0.5 text-sf-primary transition-colors duration-200 hover:bg-accent-50 group-has-data-melt-dropdown-menu-radio-group:ps-6 dark:hover:bg-white/5"
|
||||
on:click
|
||||
{...$$restProps}
|
||||
class="text-sf-primary hover:bg-accent-50 cursor-default rounded-sm px-1.5 py-0.5 transition-colors duration-200 group-has-data-melt-dropdown-menu-radio-group:ps-6 dark:hover:bg-white/5"
|
||||
{...rest}
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</DropdownMenu.Item>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,21 @@
|
|||
import { DropdownMenu } from 'bits-ui';
|
||||
import { Check, Icon } from 'svelte-hero-icons';
|
||||
|
||||
type $$Props = DropdownMenuRadioItemProps;
|
||||
export let value: string;
|
||||
interface Props extends DropdownMenuRadioItemProps {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children: componentChildren, ...props }: Props = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenu.RadioItem
|
||||
class="flex cursor-default items-center gap-1 rounded-sm px-1.5 py-0.5 text-sf-primary transition-colors duration-200 hover:bg-accent-50 dark:hover:bg-white/5"
|
||||
{value}
|
||||
{...$$props}
|
||||
class="text-sf-primary hover:bg-accent-50 flex cursor-default items-center gap-1 rounded-sm px-1.5 py-0.5 transition-colors duration-200 dark:hover:bg-white/5"
|
||||
{...props}
|
||||
>
|
||||
<DropdownMenu.RadioIndicator class="relative size-4">
|
||||
<Icon src={Check} class="size-full" micro />
|
||||
</DropdownMenu.RadioIndicator>
|
||||
<slot />
|
||||
{#snippet children(itemProps)}
|
||||
{#if itemProps.checked}
|
||||
<Icon src={Check} class="size-full" micro />
|
||||
{/if}
|
||||
{@render componentChildren?.()}
|
||||
{/snippet}
|
||||
</DropdownMenu.RadioItem>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { DropdownMenu, type DropdownMenuTriggerProps } from 'bits-ui';
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
let { children, ...rest }: Props = $props();
|
||||
type $$Props = DropdownMenuTriggerProps;
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Trigger class="cursor-default" {...$$restProps}>
|
||||
<slot />
|
||||
<DropdownMenu.Trigger class="cursor-default" {...rest}>
|
||||
{@render children?.()}
|
||||
</DropdownMenu.Trigger>
|
||||
|
|
|
|||
|
|
@ -1 +1,9 @@
|
|||
<div class="mx-auto max-w-3xl"><slot /></div>
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-3xl">{@render children?.()}</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<label
|
||||
class="flex gap-2 px-4 py-3 font-medium text-sf-primary [align-items:first_baseline] [&>input]:flex-1 [&>input]:bg-transparent [&>input]:text-end [&>input]:outline-hidden [&>input]:placeholder:opacity-50"
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { createBubbler } from 'svelte/legacy';
|
||||
|
||||
const bubble = createBubbler();
|
||||
import { tw } from '$lib/tw';
|
||||
import { Icon, type IconSource } from 'svelte-hero-icons';
|
||||
|
||||
export let href: string | undefined = undefined;
|
||||
export let icon: IconSource | undefined = undefined;
|
||||
export let selected: boolean = false;
|
||||
interface Props {
|
||||
href?: string | undefined;
|
||||
icon?: IconSource | undefined;
|
||||
selected?: boolean;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
href = undefined,
|
||||
icon = undefined,
|
||||
selected = false,
|
||||
children
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<svelte:element
|
||||
|
|
@ -16,7 +29,7 @@
|
|||
)}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
on:click
|
||||
onclick={bubble('click')}
|
||||
>
|
||||
{#if icon}
|
||||
<Icon
|
||||
|
|
@ -25,5 +38,5 @@
|
|||
mini
|
||||
/>
|
||||
{/if}
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</svelte:element>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
header?: import('svelte').Snippet;
|
||||
children?: import('svelte').Snippet;
|
||||
footer?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { header, children, footer }: Props = $props();
|
||||
</script>
|
||||
|
||||
<section class="my-6 cursor-default px-4">
|
||||
{#if $$slots.header}
|
||||
{#if header}
|
||||
<h3 class="mb-1 truncate px-4 text-sm font-medium uppercase text-sf-tertiary">
|
||||
<slot name="header" />
|
||||
{@render header?.()}
|
||||
</h3>
|
||||
{/if}
|
||||
<div
|
||||
class="divide-y-[0.5px] divide-ss-secondary overflow-hidden rounded-lg border-[0.5px] border-ss-secondary bg-sb-primary shadow-xs"
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{#if $$slots.footer}
|
||||
{#if footer}
|
||||
<div class="mt-1 px-4 text-sm text-sf-tertiary">
|
||||
<slot name="footer" />
|
||||
{@render footer?.()}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
class?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { class: className = '', children }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<label
|
||||
|
|
@ -11,5 +16,5 @@
|
|||
className
|
||||
)}
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
export let href: string;
|
||||
export let variant: 'primary' | 'secondary' = 'primary';
|
||||
interface Props {
|
||||
href: string;
|
||||
variant?: 'primary' | 'secondary';
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { href, variant = 'primary', children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<a
|
||||
|
|
@ -12,5 +17,5 @@
|
|||
variant === 'primary'
|
||||
? 'text-accent-600 dark:text-accent-500'
|
||||
: 'text-accent-400 dark:text-accent-500'
|
||||
)}><slot /></a
|
||||
)}>{@render children?.()}</a
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { class: className = '' }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div class={tw('loading-indicator relative inline-block size-5 [&>div]:bg-sf-tertiary', className)}>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
class?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { class: className = '', children }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<header
|
||||
|
|
@ -11,5 +16,5 @@
|
|||
className
|
||||
)}
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
</script>
|
||||
|
||||
{#if account}
|
||||
|
|
@ -13,9 +17,9 @@
|
|||
<span class="sr-only">{account.profile.signee.payload.name}</span>
|
||||
{:else}
|
||||
<div
|
||||
class="box-border size-(--weblah-profile-pic-size) rounded-full border-2 border-dashed border-ss-primary"
|
||||
class="border-ss-primary box-border size-(--weblah-profile-pic-size) rounded-full border-2 border-dashed"
|
||||
style:--weblah-profile-pic-size={`${size}px`}
|
||||
aria-hidden
|
||||
/>
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<span class="sr-only">Account Unavailable</span>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,27 @@
|
|||
import InputFrame from '$lib/components/InputFrame.svelte';
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
export let delta: Delta | null = null;
|
||||
export let plainText: string | undefined = undefined;
|
||||
export let keyboardSubmitMethod: 'enter' | 'shiftEnter' | undefined = undefined;
|
||||
export let placeholder: string = '';
|
||||
export let editor: Editor | undefined;
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
delta?: Delta | null;
|
||||
plainText?: string | undefined;
|
||||
keyboardSubmitMethod?: 'enter' | 'shiftEnter' | undefined;
|
||||
placeholder?: string;
|
||||
editor: Editor | undefined;
|
||||
class?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
delta = $bindable(null),
|
||||
plainText = $bindable(undefined),
|
||||
keyboardSubmitMethod = undefined,
|
||||
placeholder = '',
|
||||
editor = $bindable(),
|
||||
class: className = '',
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
|
||||
const loadClientComponent = async () => {
|
||||
if (!browser) return;
|
||||
|
|
@ -26,8 +39,7 @@
|
|||
<p>{placeholder}</p>
|
||||
</div>
|
||||
{:then Input}
|
||||
<svelte:component
|
||||
this={Input}
|
||||
<Input
|
||||
bind:delta
|
||||
bind:plainText
|
||||
{placeholder}
|
||||
|
|
@ -35,7 +47,7 @@
|
|||
{keyboardSubmitMethod}
|
||||
on:keyboardSubmit
|
||||
>
|
||||
<slot />
|
||||
</svelte:component>
|
||||
{@render children?.()}
|
||||
</Input>
|
||||
{/await}
|
||||
</InputFrame>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,37 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { Delta, Editor, asRoot, h } from 'typewriter-editor';
|
||||
import { keyboardSubmit } from './keyboardSubmitModule';
|
||||
|
||||
export let delta: Delta = new Delta();
|
||||
export let plainText: string | undefined = undefined;
|
||||
export let placeholder: string = '';
|
||||
export let keyboardSubmitMethod: 'enter' | 'shiftEnter' | undefined = undefined;
|
||||
interface Props {
|
||||
delta?: Delta;
|
||||
plainText?: string | undefined;
|
||||
placeholder?: string;
|
||||
keyboardSubmitMethod?: 'enter' | 'shiftEnter' | undefined;
|
||||
onKeyboardSubmit?: () => void;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
keyboardSubmit: void;
|
||||
}>();
|
||||
let {
|
||||
delta = $bindable(new Delta()),
|
||||
plainText = $bindable(undefined),
|
||||
placeholder = '',
|
||||
keyboardSubmitMethod = undefined,
|
||||
onKeyboardSubmit,
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
let editor: Editor;
|
||||
let editor: Editor = $state(initEditor());
|
||||
|
||||
function initEditor() {
|
||||
const modules = keyboardSubmitMethod
|
||||
? { keyboardSubmit: keyboardSubmit(() => dispatch('keyboardSubmit'), keyboardSubmitMethod) }
|
||||
? {
|
||||
keyboardSubmit: keyboardSubmit(
|
||||
() => onKeyboardSubmit && onKeyboardSubmit(),
|
||||
keyboardSubmitMethod
|
||||
)
|
||||
}
|
||||
: undefined;
|
||||
editor = new Editor({ modules });
|
||||
const editor = new Editor({ modules });
|
||||
editor.typeset.formats.add({
|
||||
name: 'underline',
|
||||
selector: 'span[data-weblah-brt=underline]',
|
||||
|
|
@ -41,12 +54,20 @@
|
|||
delta = editor.getDelta();
|
||||
if (typeof plainText === 'string') plainText = editor.getText();
|
||||
});
|
||||
|
||||
return editor;
|
||||
}
|
||||
|
||||
$: if (keyboardSubmitMethod || typeof keyboardSubmitMethod === 'undefined') initEditor();
|
||||
$effect.pre(() => {
|
||||
if (keyboardSubmitMethod || typeof keyboardSubmitMethod === 'undefined') editor = initEditor();
|
||||
});
|
||||
|
||||
$: editor.setDelta(delta ?? new Delta());
|
||||
$: if (typeof plainText === 'string' && plainText !== editor.getText()) editor.setText(plainText);
|
||||
$effect.pre(() => {
|
||||
editor.setDelta(delta ?? new Delta());
|
||||
});
|
||||
$effect.pre(() => {
|
||||
if (typeof plainText === 'string' && plainText !== editor.getText()) editor.setText(plainText);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -59,5 +80,5 @@
|
|||
role="textbox"
|
||||
tabindex="0"
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,13 @@
|
|||
import RichTextSpan from './RichTextRenderer/RichTextSpan.svelte';
|
||||
import PlainTextRenderer from './RichTextRenderer/PlainTextRenderer.svelte';
|
||||
|
||||
export let content: BlahRichText;
|
||||
let className = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
content: BlahRichText;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { content, class: className = '' }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div class={tw('rich-text', className)}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<script lang="ts">
|
||||
export let text: string;
|
||||
interface Props {
|
||||
text: string;
|
||||
}
|
||||
|
||||
let { text }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#each text.split('\n') as segment, idx}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
|
||||
<script lang="ts">
|
||||
import type { BlahRichTextSpanAttributes } from '$lib/richText';
|
||||
import PlainTextRenderer from './PlainTextRenderer.svelte';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
let className: string = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
class?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { class: className = '', children }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -11,5 +16,5 @@
|
|||
className
|
||||
)}
|
||||
>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { onNavigate } from '$app/navigation';
|
||||
import ChatList from './ChatList.svelte';
|
||||
import SettingsList from './settings/SettingsList.svelte';
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
|
||||
onNavigate((navigation) => {
|
||||
if (!document.startViewTransition || navigation.from?.url.href === navigation.to?.url.href)
|
||||
|
|
@ -16,10 +21,10 @@
|
|||
});
|
||||
});
|
||||
|
||||
$: isSettings = $page.route.id?.startsWith('/(app)/settings') ?? true;
|
||||
$: mainVisible =
|
||||
!!$page.params.chatId ||
|
||||
(isSettings && !$page.route.id?.startsWith('/(app)/settings/_mobile_empty'));
|
||||
let isSettings = $derived($page.route.id?.startsWith('/(app)/settings') ?? true);
|
||||
let mainVisible =
|
||||
$derived(!!$page.params.chatId ||
|
||||
(isSettings && !$page.route.id?.startsWith('/(app)/settings/_mobile_empty')));
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -38,10 +43,10 @@
|
|||
<main
|
||||
class="absolute inset-0 w-full bg-sb-secondary shadow-lg [view-transition-name:main] sm:relative sm:flex-1 sm:shadow-none"
|
||||
>
|
||||
<slot></slot>
|
||||
{@render children?.()}
|
||||
</main>
|
||||
{:else}
|
||||
<div class="hidden flex-1 sm:block"><slot /></div>
|
||||
<div class="hidden flex-1 sm:block">{@render children?.()}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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('');
|
||||
</script>
|
||||
|
||||
<div class="flex h-[100dvh] flex-col justify-stretch">
|
||||
|
|
@ -18,14 +18,14 @@
|
|||
<div class="relative min-h-0 flex-1 touch-pan-y overflow-y-auto">
|
||||
<ul>
|
||||
{#if $chatList}
|
||||
{#each $chatList as chat}
|
||||
{#each $chatList as chat (chat.id)}
|
||||
<ChatListItem {chat} />
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{#if isSearchFocused || searchQuery}
|
||||
<div
|
||||
class="absolute inset-0 size-full origin-top touch-pan-y overflow-y-auto bg-sb-primary"
|
||||
class="bg-sb-primary absolute inset-0 size-full origin-top touch-pan-y overflow-y-auto"
|
||||
transition:scale={{ start: 0.9 }}
|
||||
>
|
||||
<SearchPanel {searchQuery} />
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
<Icon src={XCircle} class="size-4" mini />
|
||||
<span class="sr-only">Clear</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
import { AvatarBeam } from 'svelte-boring-avatars';
|
||||
|
||||
import { formatMessageDate, formatUnreadCount } from '$lib/formatters';
|
||||
|
|
@ -8,15 +10,19 @@
|
|||
import { page } from '$app/stores';
|
||||
import { tw } from '$lib/tw';
|
||||
|
||||
export let chat: Chat;
|
||||
|
||||
let urlSafeEndpoint: string;
|
||||
$: {
|
||||
const url = new URL(chat.server);
|
||||
urlSafeEndpoint = encodeURIComponent(url.hostname + url.pathname);
|
||||
interface Props {
|
||||
chat: Chat;
|
||||
}
|
||||
|
||||
$: isSelected = $page.params.chatId === chat.id;
|
||||
let { chat }: Props = $props();
|
||||
|
||||
let urlSafeEndpoint: string = $state();
|
||||
run(() => {
|
||||
const url = new URL(chat.server);
|
||||
urlSafeEndpoint = encodeURIComponent(url.hostname + url.pathname);
|
||||
});
|
||||
|
||||
let isSelected = $derived($page.params.chatId === chat.id);
|
||||
</script>
|
||||
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -7,9 +7,13 @@
|
|||
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let size: number = 32;
|
||||
interface Props {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
let accountStore: AccountStore;
|
||||
let { size = 32 }: Props = $props();
|
||||
|
||||
let accountStore: AccountStore = $state();
|
||||
|
||||
onMount(() => {
|
||||
openAccountStore().then((store) => {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
</script>
|
||||
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
import { page } from '$app/stores';
|
||||
import { BlahChatServerConnection } from '$lib/blah/connection/chatServer';
|
||||
import { browser } from '$app/environment';
|
||||
|
|
@ -7,22 +9,22 @@
|
|||
import ChatPage from './ChatPage.svelte';
|
||||
import { useChat } from '$lib/chat';
|
||||
|
||||
$: roomId = $page.params.chatId;
|
||||
let roomId = $derived($page.params.chatId);
|
||||
|
||||
let serverEndpoint: string = '';
|
||||
$: {
|
||||
let serverEndpoint: string = $state('');
|
||||
run(() => {
|
||||
const endpointString = decodeURIComponent($page.params.server);
|
||||
serverEndpoint = endpointString.startsWith('http')
|
||||
? endpointString
|
||||
: `https://${endpointString}`;
|
||||
}
|
||||
});
|
||||
|
||||
let server: BlahChatServerConnection | null;
|
||||
$: {
|
||||
let server: BlahChatServerConnection | null = $state();
|
||||
run(() => {
|
||||
if (browser) {
|
||||
server = chatServerConnectionPool.getConnection(serverEndpoint);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex h-full w-full flex-col items-center justify-center">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
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<MessageSection> | undefined;
|
||||
let { sectionedMessages = [], mySenderId }: Props = $props();
|
||||
|
||||
let ref: VList<MessageSection> | 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);
|
||||
});
|
||||
</script>
|
||||
|
||||
<VList data={sectionedMessages} let:item={messageSection} class="size-full pt-2" bind:this={ref}>
|
||||
{@const isMyself = mySenderId === messageSection.sender?.id}
|
||||
<VList data={sectionedMessages} class="size-full pt-2" bind:this={ref}>
|
||||
{#snippet children({ item: messageSection })}
|
||||
{@const isMyself = mySenderId === messageSection.sender?.id}
|
||||
|
||||
<div>
|
||||
{#if messageSection.date}
|
||||
<div class="pb-1.5 text-center">
|
||||
<ServiceMessage class="text-xs">
|
||||
{formatMessageSectionDate(messageSection.date)}
|
||||
</ServiceMessage>
|
||||
</div>
|
||||
{/if}
|
||||
<div class={tw('flex w-full items-end px-2', isMyself && 'flex-row-reverse')}>
|
||||
<div class="sticky bottom-1.5 mb-1.5 mt-1 w-8">
|
||||
<AvatarBeam size={32} name={messageSection.sender?.id} />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
{#if messageSection.sender && !isMyself}
|
||||
<div class="px-3 py-0.5 text-xs text-sf-tertiary">{messageSection.sender.name}</div>
|
||||
{/if}
|
||||
{#each messageSection.messages as message, idx}
|
||||
<ChatMessage
|
||||
{message}
|
||||
{isMyself}
|
||||
showBubbleTail={messageSection.messages.length - 1 === idx}
|
||||
/>
|
||||
{/each}
|
||||
<div>
|
||||
{#if messageSection.date}
|
||||
<div class="pb-1.5 text-center">
|
||||
<ServiceMessage class="text-xs">
|
||||
{formatMessageSectionDate(messageSection.date)}
|
||||
</ServiceMessage>
|
||||
</div>
|
||||
{/if}
|
||||
<div class={tw('flex w-full items-end px-2', isMyself && 'flex-row-reverse')}>
|
||||
<div class="sticky bottom-1.5 mb-1.5 mt-1 w-8">
|
||||
<AvatarBeam size={32} name={messageSection.sender?.id} />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
{#if messageSection.sender && !isMyself}
|
||||
<div class="px-3 py-0.5 text-xs text-sf-tertiary">{messageSection.sender.name}</div>
|
||||
{/if}
|
||||
{#each messageSection.messages as message, idx}
|
||||
<ChatMessage
|
||||
{message}
|
||||
{isMyself}
|
||||
showBubbleTail={messageSection.messages.length - 1 === idx}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</VList>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
</script>
|
||||
|
||||
<form
|
||||
class="flex w-full items-end gap-2 border-t border-ss-secondary bg-sb-primary p-2 shadow-xs"
|
||||
class="border-ss-secondary bg-sb-primary flex w-full items-end gap-2 border-t p-2 shadow-xs"
|
||||
bind:this={form}
|
||||
on:submit|preventDefault={submit}
|
||||
onsubmit={submit}
|
||||
>
|
||||
<Button class="p-1.5">
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -3,9 +3,13 @@
|
|||
import { tw } from '$lib/tw';
|
||||
import type { Message } from '$lib/types';
|
||||
|
||||
export let message: Message;
|
||||
export let showBubbleTail: boolean = true;
|
||||
export let isMyself: boolean;
|
||||
interface Props {
|
||||
message: Message;
|
||||
showBubbleTail?: boolean;
|
||||
isMyself: boolean;
|
||||
}
|
||||
|
||||
let { message, showBubbleTail = true, isMyself }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class={tw('mb-1.5 flex items-end gap-2 px-2', isMyself && 'flex-row-reverse')}>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,12 @@
|
|||
import type { BlahRichText } from '$lib/richText';
|
||||
import type { MessageSection } from '$lib/chat';
|
||||
|
||||
export let info: Readable<Chat>;
|
||||
export let sectionedMessages: Readable<MessageSection[]>;
|
||||
interface Props {
|
||||
info: Readable<Chat>;
|
||||
sectionedMessages: Readable<MessageSection[]>;
|
||||
}
|
||||
|
||||
let { info, sectionedMessages }: Props = $props();
|
||||
|
||||
interface $$Events {
|
||||
sendMessage: CustomEvent<BlahRichText>;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
import { flip } from 'svelte/animate';
|
||||
import { blur, scale } from 'svelte/transition';
|
||||
|
||||
let accountStore: AccountStore;
|
||||
let accountStore: AccountStore = $state();
|
||||
|
||||
onMount(() => {
|
||||
openAccountStore().then((store) => {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,12 @@
|
|||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import SettingsAccountSections from './SettingsAccountSections.svelte';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { class: className = '' }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -3,13 +3,18 @@
|
|||
import { GroupedListItem } from '$lib/components/GroupedList';
|
||||
import { type IconSource } from 'svelte-hero-icons';
|
||||
|
||||
export let icon: IconSource | undefined = undefined;
|
||||
export let route: string | undefined = undefined;
|
||||
interface Props {
|
||||
icon?: IconSource | undefined;
|
||||
route?: string | undefined;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
$: selected = route
|
||||
let { icon = undefined, route = undefined, children }: Props = $props();
|
||||
|
||||
let selected = $derived(route
|
||||
? $page.route.id?.startsWith(`/(app)/settings${route}`)
|
||||
: $page.route.id === '/(app)/settings';
|
||||
$: href = `/settings${route}`;
|
||||
: $page.route.id === '/(app)/settings');
|
||||
let href = $derived(`/settings${route}`);
|
||||
</script>
|
||||
|
||||
<GroupedListItem {icon} {selected} {href}><slot /></GroupedListItem>
|
||||
<GroupedListItem {icon} {selected} {href}>{@render children?.()}</GroupedListItem>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
|
||||
<GroupedListContainer>
|
||||
<GroupedListSection>
|
||||
<p slot="footer">New here? <a class="text-accent-500" href="new">Create a new account</a>.</p>
|
||||
{#snippet footer()}
|
||||
<p >New here? <a class="text-accent-500" href="new">Create a new account</a>.</p>
|
||||
{/snippet}
|
||||
</GroupedListSection>
|
||||
</GroupedListContainer>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { page } from '$app/state';
|
||||
import { goto } from '$app/navigation';
|
||||
import { currentAccountStore, openAccountStore } from '$lib/accounts/accountStore';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
|
|
@ -18,17 +18,17 @@
|
|||
import { onMount } from 'svelte';
|
||||
import type { Delta, Editor } from 'typewriter-editor';
|
||||
|
||||
let name: string = '';
|
||||
let editor: Editor | undefined;
|
||||
let delta: Delta;
|
||||
let plainText: string = '';
|
||||
let password: string = '';
|
||||
let repeatPassword: string = '';
|
||||
let identityServer: string = 'other.blue';
|
||||
let name: string = $state('');
|
||||
let editor: Editor | undefined = $state();
|
||||
let delta: Delta | undefined = $state();
|
||||
let plainText: string = $state('');
|
||||
let password: string = $state('');
|
||||
let repeatPassword: string = $state('');
|
||||
let identityServer: string = $state('other.blue');
|
||||
|
||||
let isBusy: boolean = false;
|
||||
let isBusy: boolean = $state(false);
|
||||
|
||||
let bioPlaceholder = 'Introduce yourself.';
|
||||
let bioPlaceholder = $state('Introduce yourself.');
|
||||
|
||||
const bioPlaceholders = [
|
||||
'a 23 yo. designer from Tokyo.',
|
||||
|
|
@ -38,9 +38,9 @@
|
|||
'a 28 yo. writer from London.'
|
||||
];
|
||||
|
||||
$: passwordMatch = password === repeatPassword;
|
||||
$: canCreate = name.length > 0 && password.length > 0 && passwordMatch;
|
||||
$: customize = $page.url.hash === '#customize';
|
||||
let passwordMatch = $derived(password === repeatPassword);
|
||||
let canCreate = $derived(name.length > 0 && password.length > 0 && passwordMatch);
|
||||
let customize = $derived(page.url.hash === '#customize');
|
||||
|
||||
onMount(() => {
|
||||
const bioPlaceholderRotateRef = setInterval(() => {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
{#if isBusy}
|
||||
<LoadingIndicator class="size-4" />
|
||||
{:else}
|
||||
<Button variant="primary" disabled={!canCreate} on:click={createAccount}>Create</Button>
|
||||
<Button variant="primary" disabled={!canCreate} onclick={createAccount}>Create</Button>
|
||||
{/if}
|
||||
</PageHeader>
|
||||
|
||||
|
|
@ -89,13 +89,15 @@
|
|||
bind:value={name}
|
||||
placeholder="Your Name"
|
||||
disabled={isBusy}
|
||||
class="ms-3 flex-1 bg-transparent text-lg leading-loose caret-accent-500 outline-hidden placeholder:opacity-50"
|
||||
class="caret-accent-500 ms-3 flex-1 bg-transparent text-lg leading-loose outline-hidden placeholder:opacity-50"
|
||||
/>
|
||||
</GroupedListItem>
|
||||
</GroupedListSection>
|
||||
|
||||
<GroupedListSection>
|
||||
<h4 slot="header">Bio</h4>
|
||||
{#snippet header()}
|
||||
<h4>Bio</h4>
|
||||
{/snippet}
|
||||
<RichTextInput
|
||||
class="p-4 shadow-none ring-0"
|
||||
bind:editor
|
||||
|
|
@ -103,11 +105,15 @@
|
|||
bind:plainText
|
||||
placeholder={bioPlaceholder}
|
||||
/>
|
||||
<p slot="footer">Introduce yourself. This will be public for everyone to see.</p>
|
||||
{#snippet footer()}
|
||||
<p>Introduce yourself. This will be public for everyone to see.</p>
|
||||
{/snippet}
|
||||
</GroupedListSection>
|
||||
|
||||
<GroupedListSection>
|
||||
<h4 slot="header">Security</h4>
|
||||
{#snippet header()}
|
||||
<h4>Security</h4>
|
||||
{/snippet}
|
||||
<GroupedListInputItem>
|
||||
Password
|
||||
<input type="password" bind:value={password} placeholder="Password" disabled={isBusy} />
|
||||
|
|
@ -121,33 +127,39 @@
|
|||
disabled={isBusy}
|
||||
/>
|
||||
</GroupedListInputItem>
|
||||
<div slot="footer" class="space-y-1">
|
||||
<p>
|
||||
Sensitive actions like signing in on new devices require your password. Make sure it's
|
||||
unique and secure. You'll lose access to your account if you forget it.
|
||||
</p>
|
||||
{#if !passwordMatch && repeatPassword}
|
||||
<p><strong>Passwords do not match.</strong></p>
|
||||
{/if}
|
||||
</div>
|
||||
{#snippet footer()}
|
||||
<div class="space-y-1">
|
||||
<p>
|
||||
Sensitive actions like signing in on new devices require your password. Make sure it's
|
||||
unique and secure. You'll lose access to your account if you forget it.
|
||||
</p>
|
||||
{#if !passwordMatch && repeatPassword}
|
||||
<p><strong>Passwords do not match.</strong></p>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</GroupedListSection>
|
||||
{#if customize}
|
||||
<GroupedListSection>
|
||||
<h4 slot="header">Identity Service</h4>
|
||||
{#snippet header()}
|
||||
<h4>Identity Service</h4>
|
||||
{/snippet}
|
||||
<GroupedListInputItem>
|
||||
Initial Service
|
||||
<input type="text" bind:value={identityServer} />
|
||||
</GroupedListInputItem>
|
||||
<div slot="footer" class="space-y-1">
|
||||
<p>
|
||||
Your profile is stored and served to other users on the identity service.
|
||||
<Link href="/" variant="secondary">Learn more about identity services...</Link>
|
||||
</p>
|
||||
<p>You can add, replace or remove identity services later in account settings.</p>
|
||||
</div>
|
||||
{#snippet footer()}
|
||||
<div class="space-y-1">
|
||||
<p>
|
||||
Your profile is stored and served to other users on the identity service.
|
||||
<Link href="/" variant="secondary">Learn more about identity services...</Link>
|
||||
</p>
|
||||
<p>You can add, replace or remove identity services later in account settings.</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</GroupedListSection>
|
||||
{/if}
|
||||
<div class="px-8 text-sm text-sf-tertiary">
|
||||
<div class="text-sf-tertiary px-8 text-sm">
|
||||
<p>
|
||||
By creating an account, you agree to Terms of Service and Privacy Policy of
|
||||
<em>{identityServer}</em>, which stores and serve your public profile to other users.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<script lang="ts">
|
||||
export let title: string = 'Color Palette';
|
||||
interface Props {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
let { title = 'Color Palette' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="rounded-xl bg-sb-secondary p-4 text-sf-primary">
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
import { deltaToBlahRichText } from '$lib/richText';
|
||||
import type { Delta } from 'typewriter-editor';
|
||||
|
||||
let delta: Delta;
|
||||
let delta: Delta = $state();
|
||||
|
||||
$: brt = delta ? deltaToBlahRichText(delta) : null;
|
||||
let brt = $derived(delta ? deltaToBlahRichText(delta) : null);
|
||||
</script>
|
||||
|
||||
<RichTextInput bind:delta class="m-4 max-h-32">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<script lang="ts">
|
||||
import '../app.css';
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue