DirtyResourceUriInteractiveIconDisplay.razor

@{ 
	var dirtyResourceUriState = DirtyResourceUriService.GetDirtyResourceUriState();
	var iconBadgeIsActive = dirtyResourceUriState.DirtyResourceUriList.Count > 0;
	var showIconBadgeCssClassString = iconBadgeIsActive ? "luth_active" : "";
}

<button class="luth_button luth_web_dirty-text-editor-models-interactive-icon @CssClassString"
		id="@_buttonId"
        style="@CssStyleString"
		title="Unsaved file count: @dirtyResourceUriState.DirtyResourceUriList.Count"
        @onclick="ShowDialogOnClick">

    @* TODO: The icons are annoying because they are an integer value. Might need to make them more responsive. This is the <IconBell/> (2023-09-09) *@
    @* The: "calc(0.85em + 4px + 0.7em)" comes from the bottom panel height. I modified it slightly to allow the icon to fit. *@
    <svg width="calc(0.85em + 1px + 0.7em)" height="calc(0.85em + 1px + 0.7em)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z" /></svg>

    <IconBadgeDisplay CssClassString="@showIconBadgeCssClassString">
		@if (iconBadgeIsActive)
		{
			if (dirtyResourceUriState.DirtyResourceUriList.Count > 9)
	        {
	            @: 9+
	        }
	        else
	        {
	            @: @dirtyResourceUriState.DirtyResourceUriList.Count
	        }
		}
    </IconBadgeDisplay>
</button>