feat(workbench): scope-active badge on scene pills

Phase 3 follow-up from docs/plans/scene-scope-empty-state.md — a small
Funnel icon now sits next to the scene count whenever the scene has an
explicit `scopeTagIds` set. Users can see at a glance that a scope
filter is active even when the module lists aren't empty, instead of
only noticing the filter when a list turns up zero results.

Only marks explicit scene-level scope; the agent-derived scope is
already signalled by the bound-agent avatar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-18 16:59:53 +02:00
parent f09a84ac8e
commit dcec0d31ee

View file

@ -3,7 +3,7 @@
Rendered by the layout's bottom-stack via bottomBarStore.
-->
<script lang="ts">
import { Plus, Check, X } from '@mana/shared-icons';
import { Plus, Check, X, Funnel } from '@mana/shared-icons';
import { tick } from 'svelte';
import type { CarouselPage } from '$lib/components/page-carousel/types';
import type { WorkbenchScene } from '$lib/types/workbench-scenes';
@ -82,6 +82,7 @@
{#if isActive && pages.length > 0}
{@const boundAgent = scene.viewingAsAgentId ? agentById.get(scene.viewingAsAgentId) : null}
{@const hasScope = (scene.scopeTagIds?.length ?? 0) > 0}
<!-- Active scene + its app tabs wrapped in a visual group -->
<div class="scene-group">
<button
@ -95,6 +96,11 @@
<span class="scene-agent-avatar">{boundAgent.avatar ?? '🤖'}</span>
{/if}
<span class="scene-name">{scene.name}</span>
{#if hasScope}
<span class="scope-badge" title="Bereichsfilter aktiv">
<Funnel size={10} weight="fill" />
</span>
{/if}
<span class="scene-count">{scene.openApps.length}</span>
</button>
<span class="group-sep"></span>
@ -121,6 +127,7 @@
</div>
{:else}
{@const boundAgent = scene.viewingAsAgentId ? agentById.get(scene.viewingAsAgentId) : null}
{@const hasScope = (scene.scopeTagIds?.length ?? 0) > 0}
<button
type="button"
class="scene-pill"
@ -133,6 +140,11 @@
<span class="scene-agent-avatar">{boundAgent.avatar ?? '🤖'}</span>
{/if}
<span class="scene-name">{scene.name}</span>
{#if hasScope}
<span class="scope-badge" title="Bereichsfilter aktiv">
<Funnel size={10} weight="fill" />
</span>
{/if}
<span class="scene-count">{scene.openApps.length}</span>
</button>
{/if}
@ -245,6 +257,14 @@
font-weight: 500;
color: hsl(var(--color-muted-foreground));
}
.scope-badge {
display: inline-flex;
align-items: center;
justify-content: center;
color: hsl(var(--color-primary));
opacity: 0.8;
flex-shrink: 0;
}
.group-sep {
width: 1px;
height: 1.25rem;