From 3ca72662cae05aed8e9a6a60cd23de3def811cb4 Mon Sep 17 00:00:00 2001 From: Xylight Date: Tue, 22 Oct 2024 17:47:36 -0700 Subject: [PATCH 01/15] misc: tweak reroute depth --- src/lib/components/lemmy/comment/Comment.svelte | 10 ++++------ src/lib/components/lemmy/comment/Comments.svelte | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/lib/components/lemmy/comment/Comment.svelte b/src/lib/components/lemmy/comment/Comment.svelte index f5c6cd91..299b8ba4 100644 --- a/src/lib/components/lemmy/comment/Comment.svelte +++ b/src/lib/components/lemmy/comment/Comment.svelte @@ -38,7 +38,6 @@ export let meta: boolean = true export let open = true - let childrenOpen = true export let replying = false @@ -121,6 +120,7 @@ class="flex flex-row cursor-pointer gap-2 items-center group text-[13px] flex-wrap w-full z-0 group relative" > +
- -
- {/if} +
+ +
{/if} diff --git a/src/lib/components/lemmy/comment/Comments.svelte b/src/lib/components/lemmy/comment/Comments.svelte index 0187652a..a18d5cc0 100644 --- a/src/lib/components/lemmy/comment/Comments.svelte +++ b/src/lib/components/lemmy/comment/Comments.svelte @@ -141,7 +141,7 @@ class="font-normal text-slate-600 dark:text-zinc-400" loaderWidth={16} on:click={() => { - if (node.depth > 7) { + if (node.depth > 4) { goto( `/comment/${$page.params.instance}/${node.comment_view.comment.id}#comments` ) From 0718c8e0c628f92c5213f10d94c55b3ef303d9bc Mon Sep 17 00:00:00 2001 From: Xylight Date: Wed, 23 Oct 2024 19:55:20 -0700 Subject: [PATCH 02/15] prep: replace $$props.class with props --- .../components/error/ErrorContainer.svelte | 4 +- src/lib/components/input/FreeTextInput.svelte | 4 +- src/lib/components/input/Link.svelte | 7 +- src/lib/components/input/Switch.svelte | 8 ++- src/lib/components/lemmy/SiteCard.svelte | 4 +- .../components/lemmy/comment/Comment.svelte | 8 ++- .../lemmy/comment/CommentItem.svelte | 4 +- .../lemmy/community/CommunityCard.svelte | 6 +- .../lemmy/community/CommunityHeader.svelte | 4 +- .../lemmy/community/CommunityItem.svelte | 7 +- .../lemmy/community/CommunityLink.svelte | 9 ++- .../components/lemmy/dropdowns/Sort.svelte | 5 +- .../lemmy/inbox/PrivateMessage.svelte | 4 +- .../lemmy/moderation/ShieldIcon.svelte | 7 +- src/lib/components/lemmy/post/Post.svelte | 8 ++- .../components/lemmy/post/PostActions.svelte | 4 +- src/lib/components/lemmy/post/PostBody.svelte | 9 ++- src/lib/components/lemmy/post/PostMeta.svelte | 7 +- .../lemmy/post/media/PostIframe.svelte | 7 +- .../lemmy/post/media/PostMediaCompact.svelte | 9 +-- src/lib/components/lemmy/user/UserItem.svelte | 8 +-- src/lib/components/lemmy/user/UserLink.svelte | 9 ++- .../components/lemmy/util/SearchBar.svelte | 6 +- src/lib/components/markdown/Markdown.svelte | 8 ++- .../components/markdown/MarkdownEditor.svelte | 7 +- src/lib/components/ui/Avatar.svelte | 9 ++- src/lib/components/ui/EndPlaceholder.svelte | 8 ++- src/lib/components/ui/EntityHeader.svelte | 5 +- src/lib/components/ui/Expandable.svelte | 7 +- src/lib/components/ui/ExpandableImage.svelte | 4 +- src/lib/components/ui/LabelStat.svelte | 17 +++-- src/lib/components/ui/Placeholder.svelte | 6 +- src/lib/components/ui/SectionTitle.svelte | 4 +- src/lib/components/ui/StickyCard.svelte | 7 +- src/lib/components/ui/layout/Shell.svelte | 5 +- .../components/ui/layout/pages/Header.svelte | 10 +-- .../components/ui/layout/pages/Tabs.svelte | 4 +- .../components/ui/list/EditableList.svelte | 4 +- src/lib/components/ui/navbar/NavButton.svelte | 4 +- src/lib/components/ui/navbar/Navbar.svelte | 7 +- src/lib/components/ui/navbar/Profile.svelte | 4 +- .../ui/navbar/commands/CommandItem.svelte | 4 +- src/lib/components/ui/sidebar/Sidebar.svelte | 8 ++- .../ui/sidebar/SidebarButton.svelte | 4 +- src/lib/components/ui/text/TextProps.svelte | 4 +- .../components/util/FormattedNumber.svelte | 5 +- src/lib/components/util/RelativeDate.svelte | 10 ++- src/lib/mono/badge/Badge.svelte | 69 ++++++++++--------- src/lib/mono/button/Button.svelte | 5 +- src/lib/mono/code/Codeblock.svelte | 5 +- src/lib/mono/code/Snippet.svelte | 5 +- src/lib/mono/disclosure/Disclosure.svelte | 4 +- src/lib/mono/forms/ChoiceboxGroup.svelte | 8 +-- src/lib/mono/forms/FileInput.svelte | 5 +- src/lib/mono/forms/Form.svelte | 31 +++++---- src/lib/mono/forms/Label.svelte | 33 +++++---- src/lib/mono/forms/RadioGroup.svelte | 6 +- src/lib/mono/forms/Select.svelte | 6 +- src/lib/mono/forms/Switch.svelte | 8 ++- src/lib/mono/forms/TextArea.svelte | 8 ++- src/lib/mono/forms/TextInput.svelte | 8 ++- src/lib/mono/materials/Material.svelte | 4 +- src/lib/mono/popover/Menu.svelte | 4 +- src/lib/mono/popover/MenuButton.svelte | 4 +- src/lib/mono/popover/Popover.svelte | 10 +-- src/lib/mono/popover/Portal.svelte | 47 +++++++------ src/routes/about/Profile.svelte | 5 +- src/routes/settings/Setting.svelte | 14 ++-- src/routes/theme/ColorSwatch.svelte | 5 +- 69 files changed, 383 insertions(+), 214 deletions(-) diff --git a/src/lib/components/error/ErrorContainer.svelte b/src/lib/components/error/ErrorContainer.svelte index db74cc06..938b233d 100644 --- a/src/lib/components/error/ErrorContainer.svelte +++ b/src/lib/components/error/ErrorContainer.svelte @@ -33,11 +33,13 @@ onDestroy(() => { clearErrorScope(scope) }) + let clazz: string = '' + export { clazz as class } {#if scopedErrors.length > 0}
diff --git a/src/lib/components/input/FreeTextInput.svelte b/src/lib/components/input/FreeTextInput.svelte index 1519501c..6313d6b5 100644 --- a/src/lib/components/input/FreeTextInput.svelte +++ b/src/lib/components/input/FreeTextInput.svelte @@ -16,6 +16,8 @@ textarea.style.height = `${textarea.scrollHeight}px` // Set height to the scrollHeight } } + let clazz: string = '' + export { clazz as class } diff --git a/src/lib/components/input/Link.svelte b/src/lib/components/input/Link.svelte index f8f8d9fb..facb9e6b 100644 --- a/src/lib/components/input/Link.svelte +++ b/src/lib/components/input/Link.svelte @@ -14,6 +14,9 @@ export let nowrap: boolean = false $: richURL = $$slots.default ? undefined : parseURL(href) + + let clazz: string = '' + export { clazz as class } {#if richURL} diff --git a/src/lib/components/input/Switch.svelte b/src/lib/components/input/Switch.svelte index 41a3e7d0..f90625a1 100644 --- a/src/lib/components/input/Switch.svelte +++ b/src/lib/components/input/Switch.svelte @@ -10,6 +10,10 @@ export let selected: T export let headless: boolean = false + let clazz: string = '' + export let buttonClazz: string = '' + export { clazz as class } + const dispatcher = createEventDispatcher<{ select: T }>() $: { @@ -19,7 +23,7 @@ let containerClass = ` flex flex-row rtl:flex-row-reverse items-center w-max max-w-full overflow-auto ${headless ? 'pb-1 gap-1' : ''} - ${$$props.class} + ${clazz} ` const buttonClass = (selected: boolean) => ` @@ -27,7 +31,7 @@ last:rounded-r-lg last:border-r last:dark:border-r-transparent rounded-l-none rounded-r-none - px-3 py-1.5 text-sm hover:brightness-110 ${$$props.buttonClass || ''} + px-3 py-1.5 text-sm hover:brightness-110 ${buttonClazz || ''} ${ !selected ? `hover:dark:bg-zinc-800 border-slate-100 border-t border-b border-b-slate-300 dark:border-b-0 diff --git a/src/lib/components/lemmy/SiteCard.svelte b/src/lib/components/lemmy/SiteCard.svelte index 9d2d793c..2e573b6a 100644 --- a/src/lib/components/lemmy/SiteCard.svelte +++ b/src/lib/components/lemmy/SiteCard.svelte @@ -26,9 +26,11 @@ export let taglines: Tagline[] | undefined = undefined export let admins: PersonView[] | undefined = undefined export let version: string | undefined = undefined + let clazz: string = '' + export { clazz as class } - + {#if site.site.banner}
{#if meta} @@ -194,7 +198,7 @@ {/if} {#if open}
diff --git a/src/lib/components/lemmy/community/CommunityCard.svelte b/src/lib/components/lemmy/community/CommunityCard.svelte index eb1b98f9..b8e73691 100644 --- a/src/lib/components/lemmy/community/CommunityCard.svelte +++ b/src/lib/components/lemmy/community/CommunityCard.svelte @@ -140,11 +140,11 @@ loading.subscribing = false } + let clazz: string = '' + export { clazz as class } - + @@ -42,7 +45,7 @@ {#if showInstance} @{new URL(community.actor_id).hostname} diff --git a/src/lib/components/lemmy/dropdowns/Sort.svelte b/src/lib/components/lemmy/dropdowns/Sort.svelte index 5fd4283a..96056701 100644 --- a/src/lib/components/lemmy/dropdowns/Sort.svelte +++ b/src/lib/components/lemmy/dropdowns/Sort.svelte @@ -37,9 +37,12 @@ $: changeDefault ? ($userSettings.defaultSort.sort = selected as SortType) : undefined + + let clazz: string = '' + export { clazz as class } -
+
diff --git a/src/lib/components/input/ImagePreviewInput.svelte b/src/lib/components/input/ImagePreviewInput.svelte index 8a4b9180..50b982b0 100644 --- a/src/lib/components/input/ImagePreviewInput.svelte +++ b/src/lib/components/input/ImagePreviewInput.svelte @@ -13,9 +13,7 @@
- + - - + {@render icon?.()} + {#if children}{@render children()}{:else} - export let value: number - export let min: number = 0 - export let max: number = 100 - export let step: number = 1 + import { createBubbler } from 'svelte/legacy' + + const bubble = createBubbler() + interface Props { + value: number + min?: number + max?: number + step?: number + } + + let { value = $bindable(), min = 0, max = 100, step = 1 }: Props = $props() diff --git a/src/lib/components/input/Switch.svelte b/src/lib/components/input/Switch.svelte index f90625a1..ff670320 100644 --- a/src/lib/components/input/Switch.svelte +++ b/src/lib/components/input/Switch.svelte @@ -1,24 +1,39 @@ {#if type == 'community'} @@ -35,33 +48,35 @@ on:select bind:query={q} {showWhenEmpty} - {...$$restProps} - let:item - let:select + {...rest} > -
- {#if q == '' && showWhenEmpty} - dispatcher('select', undefined)}> - + {#snippet noresults()} +
+ {#if q == '' && showWhenEmpty} + dispatcher('select', undefined)}> + +
+ None +
+ + {:else} + No results. + {/if} +
+ {/snippet} + {#snippet children({ item, select })} +
+ select(item)}> +
- None + {item.title} + + {new URL(item.actor_id).hostname} +
- {:else} - No results. - {/if} -
-
- select(item)}> - -
- {item.title} - - {new URL(item.actor_id).hostname} - -
- -
+
+ {/snippet} {:else if type == 'instance'} i.software === 'lemmy' && i.domain.includes(q) + (i) => i.software === 'lemmy' && i.domain.includes(q), ) : [] }} @@ -78,28 +93,30 @@ on:select bind:query={q} {showWhenEmpty} - {...$$restProps} - let:item - let:select + {...rest} > -
- {#if q == '' && showWhenEmpty} - dispatcher('select', undefined)}> + {#snippet noresults()} +
+ {#if q == '' && showWhenEmpty} + dispatcher('select', undefined)}> +
+ None (Start typing to search) +
+ + {:else} + No results. + {/if} +
+ {/snippet} + {#snippet children({ item, select })} +
+ select(item)}> +
- None (Start typing to search) + {item.domain}
- {:else} - No results. - {/if} -
-
- select(item)}> - -
- {item.domain} -
- -
+
+ {/snippet} {/if} diff --git a/src/lib/components/lemmy/SiteCard.svelte b/src/lib/components/lemmy/SiteCard.svelte index 2e573b6a..0d46308a 100644 --- a/src/lib/components/lemmy/SiteCard.svelte +++ b/src/lib/components/lemmy/SiteCard.svelte @@ -22,12 +22,21 @@ import { userSettings } from '$lib/settings' import { optimizeImageURL } from './post/helpers' - export let site: SiteView - export let taglines: Tagline[] | undefined = undefined - export let admins: PersonView[] | undefined = undefined - export let version: string | undefined = undefined - let clazz: string = '' - export { clazz as class } + interface Props { + site: SiteView + taglines?: Tagline[] | undefined + admins?: PersonView[] | undefined + version?: string | undefined + class?: string + } + + let { + site, + taglines = undefined, + admins = undefined, + version = undefined, + class: clazz = '', + }: Props = $props() @@ -45,13 +54,14 @@
{/if} - + {#snippet customIcon()} + + {/snippet}
{/if} diff --git a/src/lib/components/lemmy/comment/CommentActions.svelte b/src/lib/components/lemmy/comment/CommentActions.svelte index f43d5fb2..4dee6295 100644 --- a/src/lib/components/lemmy/comment/CommentActions.svelte +++ b/src/lib/components/lemmy/comment/CommentActions.svelte @@ -30,14 +30,22 @@ import { text } from '$lib/components/translate/translation' import { userSettings } from '$lib/settings' - export let comment: CommentView - export let replying: boolean = false - export let disabled = false + interface Props { + comment: CommentView + replying?: boolean + disabled?: boolean + } + + let { + comment = $bindable(), + replying = $bindable(false), + disabled = false, + }: Props = $props() const dispatcher = createEventDispatcher<{ edit: CommentView }>() let reply = '' - let translating = false + let translating = $state(false) {#if translating} @@ -69,22 +77,19 @@ {/if} - + {#snippet target()} + + {/snippet} {$t('comment.actions.label')} { @@ -104,7 +109,9 @@ translating = !translating }} > - + {#snippet prefix()} + + {/snippet} {$t('post.actions.more.translate')} {/if} @@ -134,7 +141,7 @@ comment.comment.deleted = await deleteItem( comment, !comment.comment.deleted, - $profile.jwt + $profile.jwt, ) }} > @@ -154,5 +161,5 @@ {/if} {/if} -
+
diff --git a/src/lib/components/lemmy/comment/CommentForm.svelte b/src/lib/components/lemmy/comment/CommentForm.svelte index e0a24160..30b80d47 100644 --- a/src/lib/components/lemmy/comment/CommentForm.svelte +++ b/src/lib/components/lemmy/comment/CommentForm.svelte @@ -12,26 +12,39 @@ import { errorMessage } from '$lib/lemmy/error' import { Icon, XMark } from 'svelte-hero-icons' - export let postId: number - export let parentId: number | undefined = undefined - export let locked: boolean = false - export let banned: boolean = false - export let rows: number = 7 - export let placeholder: string | undefined = undefined - const dispatch = createEventDispatcher<{ comment: CommentResponse confirm: string cancel: boolean }>() - export let value = '' - export let actions = true + interface Props { + postId: number + parentId?: number | undefined + locked?: boolean + banned?: boolean + rows?: number + placeholder?: string | undefined + value?: string + actions?: boolean + preview?: boolean + [key: string]: any + } - let previewAction = true - export { previewAction as preview } + let { + postId, + parentId = undefined, + locked = false, + banned = false, + rows = 7, + placeholder = undefined, + value = $bindable(''), + actions = true, + preview: previewAction = true, + ...rest + }: Props = $props() - let loading = false + let loading = $state(false) let preview = false async function submit() { @@ -70,7 +83,7 @@
{:else} -
+
{#if actions}
diff --git a/src/lib/components/lemmy/comment/CommentListVirtualizer.svelte b/src/lib/components/lemmy/comment/CommentListVirtualizer.svelte index 17ab52ea..53279853 100644 --- a/src/lib/components/lemmy/comment/CommentListVirtualizer.svelte +++ b/src/lib/components/lemmy/comment/CommentListVirtualizer.svelte @@ -1,4 +1,6 @@ @@ -149,34 +155,39 @@ name={community_view.community.title} label="!{fullCommunityName( community_view.community.name, - community_view.community.actor_id + community_view.community.actor_id, )}" > - + {#snippet customIcon()} + + {/snippet}
- - - {$t('cards.site.about')} - + {#snippet title()} + + + {$t('cards.site.about')} + + {/snippet}
- - - {$t('cards.site.stats')} - + {#snippet title()} + + + {$t('cards.site.stats')} + + {/snippet}
0}
- - - {$t('cards.community.moderators')} - + {#snippet title()} + + + {$t('cards.community.moderators')} + + {/snippet} ({ id: m.moderator.id, @@ -224,12 +237,13 @@ on:click={subscribe} class="flex-1 relative z-[inherit]" > - + {#snippet prefix()} + + {/snippet} {community_view.subscribed == 'Subscribed' || community_view.subscribed == 'Pending' ? $t('cards.community.subscribed') @@ -240,17 +254,23 @@ {/if} - + {#snippet target()} + + {/snippet} {$t('cards.community.modlog')} @@ -262,7 +282,9 @@ on:click={() => block(community_view.community.id, !community_view.blocked)} > - + {#snippet prefix()} + + {/snippet} {community_view.blocked ? $t('cards.community.unblock') : $t('cards.community.block')} @@ -273,7 +295,9 @@ size="lg" on:click={() => blockInstance(community_view.community.instance_id)} > - + {#snippet prefix()} + + {/snippet} {$t('cards.community.blockInstance')} {/if} @@ -301,7 +325,9 @@ type: 'error', })} > - + {#snippet prefix()} + + {/snippet} {$t('admin.purge')} {/if} diff --git a/src/lib/components/lemmy/community/CommunityForm.svelte b/src/lib/components/lemmy/community/CommunityForm.svelte index 8c3ce656..701ba541 100644 --- a/src/lib/components/lemmy/community/CommunityForm.svelte +++ b/src/lib/components/lemmy/community/CommunityForm.svelte @@ -1,4 +1,6 @@ - + {#if formtitle}{@render formtitle()}{:else}
{$t('routes.createCommunity')}
- + {/if} {$t('routes.admin.config.icon')} + {#snippet nameDetail()} + + {/snippet} {#if moderators.length > 0} - + {#snippet title()} {$t('cards.community.moderators')} - + {/snippet} ({ id: m.moderator.id, @@ -114,30 +125,32 @@ dark:border-zinc-800 border-slate-300 border-opacity-50 text-slate-700 dark:text counts: counts ?? {}, subscribed: subscribed, }} - let:subscribe - let:subscribing > - + {#snippet children({ subscribe, subscribing })} + + {/snippet} {/if} @@ -150,7 +163,7 @@ dark:border-zinc-800 border-slate-300 border-opacity-50 text-slate-700 dark:text rounding="xl" href="/c/{fullCommunityName( community.name, - community.actor_id + community.actor_id, )}/settings" style="height: 38px; width: 38px;" > @@ -158,14 +171,13 @@ dark:border-zinc-800 border-slate-300 border-opacity-50 text-slate-700 dark:text {/if} - + {#snippet target()} + + {/snippet} {$t('cards.community.modlog')} @@ -176,7 +188,9 @@ dark:border-zinc-800 border-slate-300 border-opacity-50 text-slate-700 dark:text size="lg" on:click={() => block(community.id, !blocked)} > - + {#snippet prefix()} + + {/snippet} {blocked ? $t('cards.community.unblock') : $t('cards.community.block')} @@ -187,7 +201,9 @@ dark:border-zinc-800 border-slate-300 border-opacity-50 text-slate-700 dark:text size="lg" on:click={() => blockInstance(community.instance_id)} > - + {#snippet prefix()} + + {/snippet} {$t('cards.community.blockInstance')} {/if} @@ -215,7 +231,9 @@ dark:border-zinc-800 border-slate-300 border-opacity-50 text-slate-700 dark:text type: 'error', })} > - + {#snippet prefix()} + + {/snippet} {$t('admin.purge')} {/if} diff --git a/src/lib/components/lemmy/community/CommunityItem.svelte b/src/lib/components/lemmy/community/CommunityItem.svelte index bff71559..2fe66798 100644 --- a/src/lib/components/lemmy/community/CommunityItem.svelte +++ b/src/lib/components/lemmy/community/CommunityItem.svelte @@ -23,13 +23,22 @@ import { t } from '$lib/translations' import Entity from '$lib/components/ui/Entity.svelte' - export let community: CommunityView - export let view: 'cozy' | 'compact' = 'compact' - export let showCounts: boolean = true + let showInfo = $state(false) + interface Props { + community: CommunityView + view?: 'cozy' | 'compact' + showCounts?: boolean + class?: string + icon?: import('svelte').Snippet + } - let showInfo = false - let clazz: string = 'py-4 flex flex-col gap-4 text-sm max-w-full relative' - export { clazz as class } + let { + community = $bindable(), + view = 'compact', + showCounts = true, + class: clazz = 'py-4 flex flex-col gap-4 text-sm max-w-full relative', + icon, + }: Props = $props() {#if showInfo} @@ -48,7 +57,7 @@ - + {#if icon}{@render icon()}{:else} - + {/if}
@@ -92,50 +101,55 @@ - - + community.subscribed = newSubscribed + addSubscription( + community.community, + newSubscribed == 'Subscribed', + ) + } + }} + size="custom" + title={isSubscribed(community.subscribed) + ? $t('cards.community.subscribed') + : $t('cards.community.subscribe')} + color={isSubscribed(community.subscribed) + ? 'elevatedLow' + : 'primary'} + class="{isSubscribed(community.subscribed) + ? 'text-slate-600 dark:text-zinc-400' + : ''} + aspect-square h-8 @md:px-2 @md:min-w-32 @md:aspect-auto" + > + {#snippet prefix()} + + {/snippet} + + + {/snippet}
diff --git a/src/lib/components/lemmy/community/CommunityLink.svelte b/src/lib/components/lemmy/community/CommunityLink.svelte index b94e31b8..64e785bd 100644 --- a/src/lib/components/lemmy/community/CommunityLink.svelte +++ b/src/lib/components/lemmy/community/CommunityLink.svelte @@ -5,25 +5,37 @@ import type { Community } from 'lemmy-js-client' import { ExclamationTriangle, Icon } from 'svelte-hero-icons' - export let community: Community - - export let avatar: boolean = false - export let name: boolean = true - export let avatarSize: number = 24 - export let showInstance: boolean = $userSettings.showInstances.community - export let displayName: boolean = true - - export let badges = { - nsfw: false, + interface Props { + community: Community + avatar?: boolean + name?: boolean + avatarSize?: number + showInstance?: boolean + displayName?: boolean + badges?: any + class?: string + instanceClass?: string + [key: string]: any } - let clazz: string = '' - export let instanceClass: string = '' - export { clazz as class } + let { + community, + avatar = false, + name = true, + avatarSize = 24, + showInstance = $userSettings.showInstances.community, + displayName = true, + badges = { + nsfw: false, + }, + class: clazz = '', + instanceClass = '', + ...rest + }: Props = $props()
diff --git a/src/lib/components/lemmy/dropdowns/Location.svelte b/src/lib/components/lemmy/dropdowns/Location.svelte index dc82a253..95efa1dc 100644 --- a/src/lib/components/lemmy/dropdowns/Location.svelte +++ b/src/lib/components/lemmy/dropdowns/Location.svelte @@ -1,4 +1,6 @@ { @@ -52,10 +68,12 @@ if (navigate) searchParam($page.url, 'sort', selected, 'page', 'cursor') }} > - - - {$t('filter.sort.label')} - + {#snippet label()} + + + {$t('filter.sort.label')} + + {/snippet}