fix: setup banner without icon, button actions, plainer activity rows

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Diego Imbert
2026-09-30 13:18:46 +02:00
co-authored by Claude Opus 5.5
parent 146f770626
commit dcd2fc4912
4 changed files with 26 additions and 18 deletions
@@ -409,7 +409,7 @@
{/if}
{#if producer}
{#if producer.runState}
<RunStateChip runState={producer.runState} class="mr-1" />
<RunStateChip runState={producer.runState} class="mr-1 h-5 px-1.5 rounded-md" />
{/if}
<button
type="button"
@@ -416,7 +416,7 @@
onmouseenter={() => onHoverRun?.([e.path])}
onmouseleave={() => onHoverRun?.(undefined)}
class={twMerge(
'w-full flex items-center gap-2 px-2 py-1 rounded-sm hover:bg-surface-hover text-xs text-left',
'w-full flex items-center gap-2 px-2 py-1.5 rounded-sm font-normal hover:bg-surface-hover text-xs text-left',
isMember && 'pl-7',
expanded && 'bg-surface-selected'
)}
@@ -445,7 +445,7 @@
{:else}
<Code2 size={12} class="shrink-0 text-tertiary" />
{/if}
<span class="flex-1 min-w-0 truncate font-mono text-2xs" title={e.path}>
<span class="flex-1 min-w-0 truncate text-xs" title={e.path}>
{e.path}
</span>
{#if showSource}
@@ -533,7 +533,7 @@
onclick={() => toggleGroup(g.key)}
onmouseenter={() => onHoverRun?.(g.members.map((m) => m.path))}
onmouseleave={() => onHoverRun?.(undefined)}
class="w-full flex items-center gap-2 px-2 py-1 rounded-sm hover:bg-surface-hover text-xs text-left"
class="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm font-normal hover:bg-surface-hover text-xs text-left"
title={collapsed ? 'Expand cascade runs' : 'Collapse cascade runs'}
>
<span class="shrink-0 text-tertiary">
@@ -549,7 +549,7 @@
{/if}
</span>
<Workflow size={12} class="shrink-0 text-indigo-500" />
<span class="flex-1 min-w-0 truncate font-mono text-2xs" title={groupTitle(g)}>
<span class="flex-1 min-w-0 truncate text-xs" title={groupTitle(g)}>
{groupTitle(g)}
</span>
<span
@@ -4,6 +4,7 @@
import { base } from '$lib/base'
import { CircleCheck, CircleAlert, Database, HardDrive, ArrowRight } from 'lucide-svelte'
import Alert from '$lib/components/common/alert/Alert.svelte'
import { Button } from '$lib/components/common'
interface Props {
workspace: string
@@ -74,7 +75,7 @@
</script>
{#if show}
<Alert type="warning" title="Finish setting up pipelines">
<Alert type="warning" title="Finish setting up pipelines" hideIcon>
<div class="flex flex-col gap-3">
<p>
Pipelines materialize data into DuckLake tables backed by object storage. Configure the
@@ -96,13 +97,15 @@
<span class="text-2xs text-secondary">{step.description}</span>
</div>
{#if step.done !== true}
<a
<Button
variant="default"
unifiedSize="sm"
href={step.href}
class="shrink-0 inline-flex items-center gap-1 text-xs text-accent hover:underline whitespace-nowrap"
endIcon={{ icon: ArrowRight }}
wrapperClasses="shrink-0"
>
{step.cta}
<ArrowRight size={12} />
</a>
</Button>
{:else}
<span class="shrink-0 text-2xs text-green-700 dark:text-green-400">Configured</span>
{/if}
@@ -16,6 +16,8 @@
bgClass?: string | undefined
bgStyle?: string | undefined
iconClass?: string | undefined
/** Drop the type's icon; the text starts at the alert's edge. */
hideIcon?: boolean
iconStyle?: string | undefined
titleClass?: string | undefined
titleStyle?: string | undefined
@@ -37,6 +39,7 @@
bgClass = undefined,
bgStyle = undefined,
iconClass = undefined,
hideIcon = false,
iconStyle = undefined,
titleClass = undefined,
titleStyle = undefined,
@@ -73,14 +76,16 @@
<div class="flex flex-row items-center">
<!-- shrink-0: the badge's min-content width is the 16px icon, so without it a
narrow container squeezes the circle into an oval. -->
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
<SvelteComponent
class={twMerge(classes[type].iconClass, iconClass)}
style={iconStyle}
size={16}
/>
</div>
<div class={twMerge('ml-1 w-full')}>
{#if !hideIcon}
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
<SvelteComponent
class={twMerge(classes[type].iconClass, iconClass)}
style={iconStyle}
size={16}
/>
</div>
{/if}
<div class={twMerge(!hideIcon && 'ml-1', 'w-full')}>
{#if hasTitleRow}
<div class={twMerge('w-full flex flex-row items-center justify-between')}>
<span