blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-05-01 00:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: Add badge support to GroupedListItem component
Some checks failed
Build & Test / build (20.x) (push) Has been cancelled
Details
Build & Test / build (22.x) (push) Has been cancelled
Details

Browse source 
Implement badge in UsernameItem to display validation status and Fix button
This commit is contained in:
Shibo Lyu 2025-04-17 03:32:44 +08:00
parent c379933787
commit ca7783dc1b
2 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/lib/components/GroupedList/GroupedListItem.svelte
View file

@ -6,6 +6,7 @@
type Props = { type Props = {
icon?: IconSource | undefined; icon?: IconSource | undefined;
selected?: boolean; selected?: boolean;
badge?: import('svelte').Snippet;
children?: import('svelte').Snippet; children?: import('svelte').Snippet;
class?: string; class?: string;
} & ( } & (
@ -17,6 +18,7 @@
let { let {
icon = undefined, icon = undefined,
selected = false, selected = false,
badge,
children, children,
class: externalClass, class: externalClass,
...rest ...rest
@ -39,9 +41,12 @@
mini mini
/> />
{/if} {/if}
<div class="min-w-0 truncate text-start"> <div class="min-w-0 grow truncate text-start">
{@render children?.()} {@render children?.()}
</div> </div>
{#if badge}
<div class="flex shrink-0 items-center gap-2">{@render badge()}</div>
{/if}
{/snippet} {/snippet}
{#if 'href' in rest} {#if 'href' in rest}

25
src/routes/(app)/settings/account/profile/UsernameItem.svelte
View file

@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import Button from '$lib/components/Button.svelte';
import { GroupedListItem } from '$lib/components/GroupedList'; import { GroupedListItem } from '$lib/components/GroupedList';
import LoadingIndicator from '$lib/components/LoadingIndicator.svelte'; import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
import { idURLToUsername, validateIDURL } from '$lib/idURL'; import { idURLToUsername, validateIDURL } from '$lib/idURL';
import type { BlahIdentity } from '@blah-im/core/identity'; import type { BlahIdentity } from '@blah-im/core/identity';
import { ExclamationCircle, ExclamationTriangle, Icon } from 'svelte-hero-icons'; import { AtSymbol, ExclamationCircle, ExclamationTriangle, Icon } from 'svelte-hero-icons';
interface Props { interface Props {
url: string; url: string;
@ -19,13 +20,19 @@
</script> </script>
<GroupedListItem> <GroupedListItem>
<span class="before:opacity-80 before:content-['@']">{idURLToUsername(url)}</span> <div class="flex items-center gap-0.5">
<Icon micro src={AtSymbol} class="size-3.5 opacity-90" />
<span>{idURLToUsername(url)}</span>
</div>
{#await validate()} {#snippet badge()}
<LoadingIndicator /> {#await validate()}
{:then result} <LoadingIndicator />
{#if result && !result.valid} {:then result}
<Icon solid src={ExclamationCircle} class="size-5 text-red-500" /> {#if result && !result.valid}
{/if} <Icon mini src={ExclamationCircle} class="size-5 fill-red-500 dark:fill-red-400" />
{/await} <Button>Fix</Button>
{/if}
{/await}
{/snippet}
</GroupedListItem> </GroupedListItem>