daggerheart/templates/ui/sceneNavigation/scene-navigation.hbs

<nav id="scene-navigation" aria-roledescription="{{localize "SCENE_NAVIGATION.LABEL"}}" data-tooltip-direction="RIGHT">
    {{#if canExpand}}
    <a id="scene-navigation-expand" class="ui-control" data-action="toggleExpand">
        <i class="fa-solid fa-caret-down" inert></i>
    </a>
    {{/if}}
    {{#with scenes.viewed}}
        <menu id="scene-navigation-viewed" class="scene-navigation-menu flexcol">
            {{> ".scene" }}
        </menu>
    {{/with}}
    {{#if scenes.levels}}
        <menu id="scene-navigation-levels" class="scene-levels scene-navigation-menu flexcol" 
            style="--max-levels: {{ scenes.levels.length }}">
            {{#each scenes.levels}}
            <li class="level-row">
                <div class="ui-control scene scene-level {{ css }}" data-scene-id="{{ sceneId }}" data-level-id="{{ id }}" data-action="viewLevel">
                    <span class="ellipsis">{{ name }}</span>
                    {{#if users}}
                    <ul class="scene-players">
                        {{#each users}}
                        <li class="scene-player" style="--color-bg: {{ color }}; --color-border: {{ border }}" data-tooltip
                            aria-label="{{ name }}">{{ letter }}</li>
                        {{/each}}
                    </ul>
                    {{/if}}
                </div>
            </li>
            {{/each}}
        </menu>
    {{/if}}
    <menu id="scene-navigation-active" class="scene-navigation-menu flexcol">
        {{#each scenes.active}}
        {{> ".scene" }}
        {{/each}}
    </menu>
    <menu id="scene-navigation-inactive" class="scene-navigation-menu flexcol">
        {{#each scenes.inactive as |scene|}}
        {{> ".scene" }}
        {{/each}}
    </menu>
</nav>

{{#*inline ".scene"}}
<li class="scene-wrapper">
    <div class="ui-control scene {{ cssClass }}" data-scene-id="{{ id }}" data-action="viewScene" 
        {{#if tooltip}}data-tooltip-text="{{ tooltip }}"{{/if}}>
        <span class="scene-name ellipsis">{{ name }}</span>
        {{#if users}}
        <ul class="scene-players">
            {{#each users}}
            <li class="scene-player" style="--color-bg: {{ color }}; --color-border: {{ border }}" data-tooltip
                aria-label="{{ name }}">{{ letter }}</li>
            {{/each}}
        </ul>
        {{/if}}
    </div>
    {{#if hasEnvironments}}
        <button class="ui-control scene-environment {{#if (gt environments.length 1)}}many-environments{{/if}}" data-action="openSceneEnvironment" data-scene-id="{{id}}"><img src="{{environmentImage}}" /> </button>
    {{/if}}
</li>
{{/inline}}