Enable selection from hierarchy

studio-frontend/src/app/app.element.scss

@@ -112,9 +112,7 @@
 	box-sizing: border-box;
 	width: 290px;
 	max-height: calc(100vh - 32px);
-	padding: 10px 15px {
-		inline-end: 30px;
-	}
+	padding: 10px 15px;
 
 	background: #0006;
 	backdrop-filter: blur(16px);

studio-frontend/src/app/tree.element.scss

@@ -3,9 +3,14 @@
 	flex-direction: column;
 }
 
+:host {
+	min-width: min-content;
+}
+
 header {
 	display: flex;
-	padding-block: 5px;
+	align-items: center;
+	border-radius: 4px;
 
 	font: {
 		family: "Fira Sans", sans-serif;
@@ -20,14 +25,28 @@ header {
 	user-select: none;
 
 	color: #FFFC;
+	transition: {
+		property: background, color;
+		duration: 0.1s;
+		timing-function: linear;
+	}
+
+	&:hover:not(:has(.toggle-expanded:hover)) {
+		background: #0000001F;
+	}
 
 	&.selected {
-		font-weight: 500;
+		background: #7A2C34E3;
 		color: #FFF;
+		font-weight: 500;
+
+		&:hover {
+			background: #90363F !important;
+		}
 	}
 }
 
-.button {
+.toggle-expanded {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -54,7 +73,11 @@ header {
 }
 
 .name {
-	padding-inline-start: 5px;
+	flex: 1 0 0;
+	padding: {
+		block: 5px;
+		inline: 5px 10px;
+	}
 }
 
 .children {

studio-frontend/src/app/tree.element.ts

@@ -1,5 +1,8 @@
+import { on } from "@storyteller/framework";
+import * as studio from "@storyteller/studio";
+import { type EntitySelectEvent } from "@storyteller/studio";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
 import "./icon.element";
@@ -20,15 +23,26 @@ export class TreeElement extends LitElement {
 	@property() treeChildren?: Tree[];
 	@property() expanded = false;
 
+	@state() selected = false;
+
 	toggleExpanded(): void {
 		this.expanded = !this.expanded;
 	}
 
+	@on("window:entity-select")
+	onEntitySelect({ detail: entity }: EntitySelectEvent): void {
+		this.selected = this.id === entity;
+	}
+
+	selectEntity(): void {
+		studio.select(this.id);
+	}
+
 	// TODO: A11y
 	protected override render = () => html`
-		<header>
+		<header class=${classMap({ selected: this.selected })}>
 			${this.treeChildren?.length ? html`
-				<button class="button"
+				<button class="toggle-expanded"
 					@click=${this.toggleExpanded}
 				>
 					<sts-icon
@@ -41,7 +55,9 @@ export class TreeElement extends LitElement {
 					></sts-icon>
 				</button>
 			` : nothing}
-			<span class="name">
+			<span class="name"
+				@click=${this.selectEntity}
+			>
 				${this.name}
 			</span>
 		</header>