From 0981a220a709612cb1bc64bcc9b701a9c625516c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Apr 2024 19:19:08 +0100
Subject: [PATCH 1/2] Theme Context: refactored to use `byTypeAndFilter`

---
 .../src/packages/core/themes/theme.context.ts                 | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts
index f411529ebb..cdc86b88eb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts
@@ -34,9 +34,7 @@ export class UmbThemeContext extends UmbContextBase<UmbThemeContext> {
 		if (themeAlias) {
 			localStorage.setItem(LOCAL_STORAGE_KEY, themeAlias);
 			this.#themeObserver = this.observe(
-				umbExtensionsRegistry
-					.byType('theme')
-					.pipe(map((extensions) => extensions.filter((extension) => extension.alias === themeAlias))),
+				umbExtensionsRegistry.byTypeAndFilter('theme', (extension) => extension.alias === themeAlias),
 				async (themes) => {
 					this.#styleElement?.remove();
 					if (themes.length > 0 && themes[0].css) {

From 9225638c0c59e0b76842b0d44f82660e5ef22fd9 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Apr 2024 19:22:02 +0100
Subject: [PATCH 2/2] Profile Theme picker: refactor/tidy-up

- Use `<uui-box>` instead of custom styles
- Use `Option` model for the `uui-select` input
- Prevent `ManifestTheme` from bleeding through
---
 ...ent-user-theme-user-profile-app.element.ts | 44 +++++++------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts
index c3c294372e..84e443680d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts
@@ -1,10 +1,9 @@
-import type { UmbThemeContext } from '@umbraco-cms/backoffice/themes';
-import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { ManifestTheme } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
+import type { UmbThemeContext } from '@umbraco-cms/backoffice/themes';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-current-user-theme-user-profile-app')
 export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
@@ -14,7 +13,7 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
 	private _themeAlias: string | null = null;
 
 	@state()
-	private _themes: Array<ManifestTheme> = [];
+	private _themes: Array<Option> = [];
 
 	constructor() {
 		super();
@@ -31,14 +30,14 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
 			this.observe(
 				umbExtensionsRegistry.byType('theme'),
 				(themes) => {
-					this._themes = themes;
+					this._themes = themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
 				},
 				'_observeThemeExtensions',
 			);
 		});
 	}
 
-	#handleThemeChange(event: UUISelectEvent) {
+	#onThemeChange(event: UUISelectEvent) {
 		if (!this.#themeContext) return;
 
 		const theme = event.target.value.toString();
@@ -46,32 +45,23 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
 		this.#themeContext.setThemeByAlias(theme);
 	}
 
-	get #options() {
-		return this._themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
-	}
-
 	render() {
+		if (!this._themes.length) return nothing;
 		return html`
-			<b>Select Theme</b>
-			<uui-select
-				label="theme select"
-				@change=${this.#handleThemeChange}
-				.value=${this._themeAlias}
-				.options=${this.#options}></uui-select>
+			<uui-box headline="Select theme">
+				<uui-select
+					label="Select theme"
+					.options=${this._themes}
+					.value=${this._themeAlias}
+					@change=${this.#onThemeChange}></uui-select>
+			</uui-box>
 		`;
 	}
 
 	static styles = [
 		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-				padding: var(--uui-size-space-5);
-				background: var(--uui-color-surface);
-				color: var(--uui-color-text);
-				border-radius: var(--uui-border-radius);
-				box-shadow: var(--uui-shadow-depth-1);
+			uui-select {
+				width: 100%;
 			}
 		`,
 	];