show the stack icon and name in stack action popups

This commit is contained in:
Jarek Krochmalski committed 2026-09-13 14:50:02 +02:00
1 parent fb37d931ae
commit 968fea0230
5 files changed
+29 -16

No files matched your search

+6 -2
View File
@@ -22,6 +22,8 @@
onOpenChange?: (open: boolean) => void;
children: Snippet<[{ open: boolean }]>;
extraContent?: Snippet;
/** Optional leading glyph rendered before the confirm text (e.g. a stack icon). */
icon?: Snippet;
}
let {
@@ -39,7 +41,8 @@
onConfirm,
onOpenChange,
children,
extraContent
extraContent,
icon
}: Props = $props();
const triggerClass = $derived(unstyled
@@ -109,7 +112,8 @@
>
<div class="flex flex-col gap-1.5">
<div class="flex items-center gap-2">
<span class="text-xs whitespace-nowrap">{action} {itemType} {#if displayName}<strong>{displayName}</strong>{/if}?</span>
{#if icon}{@render icon()}{/if}
<span class="text-xs whitespace-nowrap">{action} {itemType} {#if displayName}<strong class="font-semibold text-foreground">{displayName}</strong>{/if}?</span>
<Button size="sm" {variant} class="h-6 px-2 text-xs" onclick={handleConfirm}>
{confirmText}
</Button>
+7 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Box } from 'lucide-svelte';
import { Box, Layers } from 'lucide-svelte';
import { getStackIconComponent, isSelfhstIcon, selfhstRef, isCustomIcon } from '$lib/utils/icons';
import { selfhstIcons, requestSelfhst } from '$lib/stores/selfhst-icons';
@@ -23,8 +23,12 @@
const selfhst = $derived(selfhstRef(icon));
const custom = $derived(isCustomIcon(icon));
// Lucide is the fallback for any non-selfhst, non-custom value (incl. null).
const LucideIcon = $derived(!isSelfhstIcon(icon) && !custom ? getStackIconComponent(icon || '') : null);
// A named lucide icon resolves via the map; an EMPTY/null value falls back to Layers -
// the generic stack glyph used everywhere else in the stacks UI (page header, tiles,
// list). getStackIconComponent's own default is Boxes, which reads as a different icon.
const LucideIcon = $derived(
!isSelfhstIcon(icon) && !custom ? (icon ? getStackIconComponent(icon) : Layers) : null
);
// Resolve the selfh.st icon via the shared batch store (one request for the whole
// list) instead of a per-icon <img src>. `resolved`: data URI when ready, '' when it