coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Fix thunk indicator

Browse Source
This commit is contained in:
Jon Staab
2025-04-16 14:19:09 -07:00
parent 8c3e52ce8c
commit c8bc8ee8bf
2 changed files with 34 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ChannelMessage.svelte
+1 -3
View File
@@ -6,7 +6,6 @@
pubkey, pubkey,
formatTimestampAsDate, formatTimestampAsDate,
formatTimestampAsTime, formatTimestampAsTime,
thunkIsComplete,
deriveProfile, deriveProfile,
deriveProfileDisplay, deriveProfileDisplay,
} from "@welshman/app" } from "@welshman/app"
@@ -42,7 +41,6 @@
const profile = deriveProfile(event.pubkey, [url]) const profile = deriveProfile(event.pubkey, [url])
const profileDisplay = deriveProfileDisplay(event.pubkey, [url]) const profileDisplay = deriveProfileDisplay(event.pubkey, [url])
const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length] const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
const hideMenuButton = $derived($thunk && !thunkIsComplete($thunk))
const reply = () => replyTo!(event) const reply = () => replyTo!(event)
@@ -100,7 +98,7 @@
<div class="row-2 ml-10 mt-1"> <div class="row-2 ml-10 mt-1">
<ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right" /> <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right" />
</div> </div>
{#if !isMobile && !hideMenuButton} {#if !isMobile}
<button <button
class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all" class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
class:group-hover:opacity-100={!isMobile}> class:group-hover:opacity-100={!isMobile}>
src/app/components/ThunkStatus.svelte
+33 -40
View File
@@ -9,7 +9,6 @@
thunkHasStatus, thunkHasStatus,
} from "@welshman/app" } from "@welshman/app"
import type {Thunk} from "@welshman/app" import type {Thunk} from "@welshman/app"
import {fade} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Tippy from "@lib/components/Tippy.svelte" import Tippy from "@lib/components/Tippy.svelte"
import ThunkStatusDetail from "@app/components/ThunkStatusDetail.svelte" import ThunkStatusDetail from "@app/components/ThunkStatusDetail.svelte"
@@ -36,7 +35,7 @@
const failedUrls = $derived( const failedUrls = $derived(
statuses statuses
.filter(([_, status]) => [PublishStatus.Failure, PublishStatus.Timeout].includes(status)) .filter(([_, status]) => [PublishStatus.Failure, PublishStatus.Timeout].includes(status))
.map(nth(1)), .map(nth(0)),
) )
const showFailure = $derived(thunkIsComplete($thunk) && failedUrls.length > 0) const showFailure = $derived(thunkIsComplete($thunk) && failedUrls.length > 0)
@@ -57,43 +56,37 @@
}) })
</script> </script>
{#if showFailure || showPending} {#if showFailure}
<div class="relative" out:fade> {@const url = failedUrls[0]}
<div class="absolute right-0 top-2"> {@const status = $thunk.status[url]}
{#if showFailure} {@const message = $thunk.details[url]}
{@const url = failedUrls[0]} <div class="flex justify-end px-1 text-xs {restProps.class}">
{@const status = $thunk.status[url]} <Tippy
{@const message = $thunk.details[url]} class="flex items-center {restProps.class}"
<div class="flex justify-end px-1 text-xs {restProps.class}"> component={ThunkStatusDetail}
<Tippy props={{url, message, status, retry}}
class="flex items-center {restProps.class}" params={{interactive: true}}>
component={ThunkStatusDetail} {#snippet children()}
props={{url, message, status, retry}} <span class="flex cursor-pointer items-center gap-1 text-error">
params={{interactive: true}}> <Icon icon="danger" size={3} />
{#snippet children()} <span>Failed to send!</span>
<span class="flex cursor-pointer items-center gap-1 text-error"> </span>
<Icon icon="danger" size={3} /> {/snippet}
<span>Failed to send!</span> </Tippy>
</span> </div>
{/snippet} {:else if showPending}
</Tippy> <div class="flex justify-end px-1 text-xs {restProps.class}">
</div> <span class="flex items-center gap-1 {restProps.class}">
{:else if canCancel || isPending} <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span>
<div class="flex justify-end px-1 text-xs {restProps.class}"> <span class="opacity-50">Sending...</span>
<span class="flex items-center gap-1 {restProps.class}"> <button
<span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span> type="button"
<span class="opacity-50">Sending...</span> class="underline transition-all"
<button class:link={canCancel}
type="button" class:opacity-25={!canCancel}
class="underline transition-all" onclick={abort}>
class:link={canCancel} Cancel
class:opacity-25={!canCancel} </button>
onclick={abort}> </span>
Cancel
</button>
</span>
</div>
{/if}
</div>
</div> </div>
{/if} {/if}