diff --git a/src/lib/ui/shared/button/ButtonGroup.svelte b/src/lib/ui/shared/button/ButtonGroup.svelte new file mode 100644 --- /dev/null +++ b/src/lib/ui/shared/button/ButtonGroup.svelte @@ -0,0 +1,50 @@ + + +
+ {@render children?.()} +
+ + diff --git a/src/lib/ui/shared/index.ts b/src/lib/ui/shared/index.ts --- a/src/lib/ui/shared/index.ts +++ b/src/lib/ui/shared/index.ts @@ -1,33 +1,38 @@ // Reexport your entry components here -export { default as Button } from './button/Button.svelte' -export { buttonColor, buttonSize, buttonShadow } from './button/Button.svelte' +export { + default as Button, + buttonColor, + buttonShadow, + buttonSize, +} from './button/Button.svelte' +export { default as ButtonGroup } from './button/ButtonGroup.svelte' export { default as Spinner } from './loader/Spinner.svelte' export { default as TextLoader } from './loader/TextLoader.svelte' export { default as Material } from './materials/Material.svelte' +export { default as FileInput } from './forms/FileInput.svelte' export { default as Label } from './forms/Label.svelte' -export { default as FileInput } from './forms/FileInput.svelte' +export { default as TextArea } from './forms/TextArea.svelte' export { default as TextInput } from './forms/TextInput.svelte' -export { default as TextArea } from './forms/TextArea.svelte' +export { default as Option } from './forms/select/Option.svelte' export { default as Select } from './forms/select/Select.svelte' -export { default as Option } from './forms/select/Option.svelte' export { default as Switch } from './forms/Switch.svelte' -export { default as Popover } from './popover/Popover.svelte' -export { default as Menu } from './popover/Menu.svelte' -export { default as MenuDivider } from './popover/MenuDivider.svelte' -export { default as MenuButton } from './popover/MenuButton.svelte' export { default as Disclosure } from './disclosure/Disclosure.svelte' export { default as Expandable } from './disclosure/Expandable.svelte' export { default as Modal } from './modal/Modal.svelte' -export { modal, action } from './modal/modal.js' export { default as ModalContainer } from './modal/ModalContainer.svelte' +export { action, modal } from './modal/modal.js' +export { default as Menu } from './popover/Menu.svelte' +export { default as MenuButton } from './popover/MenuButton.svelte' +export { default as MenuDivider } from './popover/MenuDivider.svelte' +export { default as Popover } from './popover/Popover.svelte' -export { toast, removeToast, toasts, toastColors } from './toast/toasts.js' export { default as ToastContainer } from './toast/ToastContainer.svelte' +export { removeToast, toast, toastColors, toasts } from './toast/toasts.js' +export { default as Badge } from './badge/Badge.svelte' export { default as Note } from './note/Note.svelte' -export { default as Badge } from './badge/Badge.svelte' export { default as Search } from './search/Search.svelte' diff --git a/src/lib/ui/shared/modal/Modal.svelte b/src/lib/ui/shared/modal/Modal.svelte --- a/src/lib/ui/shared/modal/Modal.svelte +++ b/src/lib/ui/shared/modal/Modal.svelte @@ -5,7 +5,7 @@ import { Button } from 'mono-svelte' import Portal from 'mono-svelte/popover/Portal.svelte' import type { Snippet } from 'svelte' import { XMark } from 'svelte-hero-icons/dist' - import { backOut } from 'svelte/easing' + import { expoOut } from 'svelte/easing' import type { ClassValue } from 'svelte/elements' import { fade, scale } from 'svelte/transition' import { trapFocus } from 'trap-focus-svelte' @@ -97,7 +97,7 @@ bind:this={el} use:trapFocus={true} transition:scale|global={{ start: 0.97, - easing: backOut, + easing: expoOut, duration: 300, }} class={[ diff --git a/src/routes/inbox/+page.svelte b/src/routes/inbox/+page.svelte --- a/src/routes/inbox/+page.svelte +++ b/src/routes/inbox/+page.svelte @@ -102,10 +102,17 @@ description={$t('routes.inbox.empty.description')} class="self-center justify-self-center my-auto" /> {:else} - - {#snippet item(item)} - - {/snippet} + + {#each data.inbox.value as item} +
  • + +
    • + {/each}     {/if} {#if !(data.page == 1 && (data?.inbox?.value.length ?? 0) == 0)} diff --git a/src/routes/inbox/+page.ts b/src/routes/inbox/+page.ts --- a/src/routes/inbox/+page.ts +++ b/src/routes/inbox/+page.ts @@ -19,7 +19,7 @@ (url.searchParams.get('type') as InboxFeedType) || 'all' const client = getClient(undefined, fetch) const page = Number(url.searchParams.get('page')) || 1 const unreadOnly: boolean = - (url.searchParams.get('unreadOnly') || 'true') == 'true' + (url.searchParams.get('unreadOnly') || 'false') == 'true' const params = { limit: 20, diff --git a/src/routes/inbox/InboxItem.svelte b/src/routes/inbox/InboxItem.svelte --- a/src/routes/inbox/InboxItem.svelte +++ b/src/routes/inbox/InboxItem.svelte @@ -9,7 +9,7 @@ import type { InboxItem } from '$lib/feature/inbox' import PrivateMessage from '$lib/feature/inbox/PrivateMessage.svelte' import Avatar from '$lib/ui/generic/Avatar.svelte' import { publishedToDate } from '$lib/ui/util/date' - import { Button, Expandable } from 'mono-svelte' + import { Button, ButtonGroup, Expandable } from 'mono-svelte' import RelativeDate from 'mono-svelte/util/RelativeDate.svelte' import { Eye, EyeSlash } from 'svelte-hero-icons/dist' @@ -22,7 +22,7 @@ let loading = $state(false) async function markAsRead(isRead: boolean) { - if (!profile.current?.jwt) return + if (isRead && item.read) return loading = true @@ -96,7 +96,7 @@
    -
    +
    + {/snippet} {#snippet extended()} -
    + -
    + {/snippet} {#snippet content()} {#if item.type == 'comment_reply' || item.type == 'person_mention'} diff --git a/src/routes/inbox/messages/+page.svelte b/src/routes/inbox/messages/+page.svelte --- a/src/routes/inbox/messages/+page.svelte +++ b/src/routes/inbox/messages/+page.svelte @@ -137,7 +137,10 @@ {/if} {#snippet item(preview)} - +
    {preview.user.name}