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}}
    <menu id="scene-navigation-active" class="scene-navigation-menu flexcol">
        {{#each scenes.active as |scene|}}
            <li class="scene-wrapper">
                <div class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene"
                    {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}>
                    <span class="scene-name ellipsis">{{scene.name}}</span>
                    {{#if scene.users}}
                    <ul class="scene-players">
                        {{#each scene.users as |user|}}
                        <li class="scene-player" style="--color-bg:{{user.color}}; --color-border:{{user.border}}"
                            data-tooltip aria-label="{{user.name}}">{{user.letter}}</li>
                        {{/each}}
                    </ul>
                    {{/if}}
                </div>
                {{#if scene.hasEnvironments}}
                    <button class="ui-control scene-environment" data-action="openSceneEnvironment" data-scene-id="{{scene.id}}"><img src="{{scene.environmentImage}}" /> </button>
                {{/if}}
            </li>
        {{/each}}
    </menu>
    <menu id="scene-navigation-inactive" class="scene-navigation-menu flexcol">
        {{#each scenes.inactive as |scene|}}
            <li class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene"
                {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}>
            <span class="scene-name ellipsis">{{scene.name}}</span>
        </li>
        {{/each}}
    </menu>
</nav>