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

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

@ -1,9 +1,10 @@
<script lang="ts">
import Button from '$lib/components/Button.svelte';
import { GroupedListItem } from '$lib/components/GroupedList';
import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
import { idURLToUsername, validateIDURL } from '$lib/idURL';
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 {
url: string;
@ -19,13 +20,19 @@
</script>
<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>
{#snippet badge()}
{#await validate()}
<LoadingIndicator />
{:then result}
{#if result && !result.valid}
<Icon solid src={ExclamationCircle} class="size-5 text-red-500" />
<Icon mini src={ExclamationCircle} class="size-5 fill-red-500 dark:fill-red-400" />
<Button>Fix</Button>
{/if}
{/await}
{/snippet}
</GroupedListItem>