Refactor Dialog abstraction (#90)

This PR overhauls the Dialog abstractions in `studio-ui` to be more
flexible for a wider variety of use cases, and adds a placeholder
"Import Asset" sub-dialog to the Media Library dialog.

studio-web/src/lib/media-library-dialog.element.scss

@@ -1,78 +1,18 @@
 @use "sass:math";
 
-*, *::before, *::after {
-	font-family: "Fira Sans", sans-serif;
-	box-sizing: border-box;
-}
-
 :host {
-	display: flex;
-	flex-direction: column;
 	width: 1024px;
 	height: 640px;
 	max-width: 80%;
 	max-height: 80%;
-
-	background: #0006;
-	color: #FFFC;
-	backdrop-filter: blur(32px);
-	border-radius: 0.5rem;
-	overflow: hidden;
-}
-
-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 3rem;
-	padding: 0 {
-		inline-start: 1rem;
-	}
-	background: #0006;
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: math.div(12, 16) * 1rem;
-
-	sts-icon {
-		color: #FFFC;
-		opacity: 0.75;
-	}
-
-	h3 {
-		color: #FFFC;
-		font: {
-			weight: 500;
-			size: math.div(15, 16) * 1rem;
-		}
-	}
-}
-
-.close {
-	width: 3rem;
-	height: 3rem;
-	font-size: 1rem;
-	color: #FFFC;
-	opacity: 0.75;
-
-	&:hover {
-		color: #FFFF;
-		opacity: 1;
-	}
 }
 
 .main {
-	display: flex;
-	flex: 1 0 0;
 	max-height: calc(80vh - 3rem);
 }
 
 .sidebar {
 	flex: 0 0 256px;
-	padding: 1rem;
-	background: #0004;
 
 	&__list {
 		list-style: none;
@@ -102,16 +42,7 @@ header {
 }
 
 .content {
-	display: flex;
-	flex-direction: column;
-	flex: 0 0 auto;
 	width: calc(100% - 256px);
-	gap: 1rem;
-	border: {
-		inline-end: 0.5rem solid #0004;
-		block-end: 0.5rem solid #0004;
-	}
-	padding: 1rem;
 	position: relative;
 
 	&__ui {
@@ -222,7 +153,6 @@ header {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	aling-self: center;
 
 	.heading, p {
 		text-align: center;

studio-web/src/lib/media-library-dialog.element.ts

@@ -1,4 +1,5 @@
 import { bind, inject } from "@storyteller/framework";
+import { ButtonElement } from "@storyteller/studio-ui/button";
 import { DialogBaseElement } from "@storyteller/studio-ui/dialog";
 import {
 	type MediaFile as IMediaFile,
@@ -16,8 +17,9 @@ import {
 	type PropertyValues,
 	TemplateResult,
 	unsafeCSS,
+	css,
 } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, queryAll, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -29,7 +31,12 @@ import styles from "./media-library-dialog.element.scss?inline";
 
 @customElement("sts-media-library-dialog")
 export class MediaLibraryDialogElement extends DialogBaseElement {
-	static override styles = unsafeCSS(styles);
+	static override styles = css`
+		${DialogBaseElement.styles}
+		${unsafeCSS(styles)}
+	`;
+
+	override heading = "Media Library";
 
 	@state() _mediaFiles?: MediaFile[];
 	@state() _searchTerm = "";
@@ -41,6 +48,9 @@ export class MediaLibraryDialogElement extends DialogBaseElement {
 	@inject(StorytellerApi)
 	_api!: StorytellerApi;
 
+	@queryAll("[data-import-trigger]")
+	importTriggers!: ButtonElement[];
+
 	#dateFmt = new Intl.DateTimeFormat("en-us");
 
 	get #mediaFiles() {
@@ -136,25 +146,23 @@ export class MediaLibraryDialogElement extends DialogBaseElement {
 		this._selected = [];
 	}
 
+	get importDialogTemplate() {
+		return html`
+			<sts-dialog-header icon="import">
+				Import Asset
+			</sts-dialog-header>
+
+			<p>Lorem ipsum dolor sit amet</p>
+		`;
+	}
+
 	protected override render = (): TemplateResult => html`
-		<header part="header">
-			<div class="title">
-				<sts-icon icon="photo-film-music"></sts-icon>
-				<h3>Media Library</h3>
-			</div>
-			${/*
-				Note: "Close" button is intentionally hidden from the a11y tree
-				because because the Esc key is the ARIA-standard interaction for
-				closing a dialog.
-			*/ nothing}
-			<sts-icon
-				class="close"
-				icon="xmark"
-				@click=${() => this.dispatchEvent(new CustomEvent("close"))}
-			></sts-icon>
-		</header>
+		<sts-dialog-header icon="photo-film-music">
+			${this.heading}
+		</sts-dialog-header>
+
 		<section class="main">
-			<nav class="sidebar">
+			<nav class="sidebar" part="sidebar">
 				<ul class="sidebar__list">
 					${MEDIA_FILE_CATEGORIES.map(cat => html`
 						<li class="sidebar__listitem">
@@ -181,6 +189,7 @@ export class MediaLibraryDialogElement extends DialogBaseElement {
 					<sts-button
 						class="btn-secondary"
 						icon="import"
+						data-import-trigger
 					>
 						Import...
 					</sts-button>
@@ -211,6 +220,7 @@ export class MediaLibraryDialogElement extends DialogBaseElement {
 								<sts-button
 									class="btn-secondary"
 									icon="import"
+									data-import-trigger
 								>
 									Import...
 								</sts-button>
@@ -258,6 +268,11 @@ export class MediaLibraryDialogElement extends DialogBaseElement {
 				` : nothing}
 			</section>
 		</section>
+
+		<sts-dialog
+			.trigger=${this.importTriggers}
+			.template=${[this, this.importDialogTemplate] as const}
+		></sts-dialog>
 	`;
 }