show the stack icon and name in stack action popups
This commit is contained in:
5 files changed
+29
-16
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in new issue
Block a user