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}}
    <menu id="scene-navigation-levels" class="scene-levels scene-navigation-menu flexcol levels-{{ scenes.levels.length }}">
        {{#each scenes.levels}}
        <li class="level-row">
            {{#with button}}
            <button type="button" class="ui-control icon fa-solid {{ css }}" data-action="cycleLevel"
                    data-direction="{{ direction }}" aria-label="{{ label }}"></button>
            {{/with}}
            <div class="ui-control scene scene-level {{ css }}" data-scene-id="{{ sceneId }}" data-level-id="{{ id }}" data-action="viewLevel">
                <span class="ellipsis">{{ name }}</span>
            </div>
        </li>
        {{/each}}
    </menu>
    <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>
    {{!-- <menu id="scene-navigation-active" class="scene-navigation-menu flexcol">
        {{#each scenes.active as |scene|}}
            <li class="scene-wrapper">
                <ul>
                    <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>
                        {{#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}}
                    </li>
                </ul>
                {{#if scene.hasEnvironments}}
                    <button class="ui-control scene-environment {{#if (gt scene.environments.length 1)}}many-environments{{/if}}" 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="scene-wrapper">
                <ul>
                <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>
                </ul>
            </li>
        {{/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}}