Merge pull request #463 from bzzim/select_entities_friendly_name

Select entities with friendly name

src/lib/Components/Select.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
 	import ComputeIcon from '$lib/Components/ComputeIcon.svelte';
-	import { motion, states } from '$lib/Stores';
+	import { motion } from '$lib/Stores';
 	import { tick } from 'svelte';
 	import VirtualList, { type Alignment, type ScrollBehaviour } from 'svelte-tiny-virtual-list';
 	import { scale, slide } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
 	import Icon from '@iconify/svelte';
 	import { expoOut } from 'svelte/easing';
-	import { getName } from '$lib/Utils';
 
 	export let value: string | undefined;
 	export let placeholder: string;
 	export let computeIcons: boolean | undefined = undefined;
 	export let getIconString: boolean | undefined = undefined;
 	export let defaultIcon: string | undefined = undefined;
-	export let renderName: boolean | undefined = undefined;
 	export let clearable: boolean | undefined = undefined;
 	export let options: {
 		id: string;
 		label: string;
+		hint?: string;
 		icon?: string;
 	}[];
 
@@ -255,13 +254,12 @@
 					{/if}
 
 					<div class="label">
-						{#if renderName}
+						{filter?.[index]?.label}
+						{#if filter?.[index]?.hint}
 							<span class="name">
-								{getName(undefined, $states?.[filter?.[index]?.label])}
+								{filter?.[index]?.hint}
 							</span>
 						{/if}
-
-						{filter?.[index]?.label}
 					</div>
 				</div>
 			</button>
@@ -304,6 +302,7 @@
 	/* list */
 
 	.wrapper {
+		margin-top: 0.2rem;
 		position: relative;
 		background-color: #1d1b18;
 		border-radius: 0.6rem;

src/lib/Modal/BarConfig.svelte

@@ -8,7 +8,8 @@
 		history,
 		historyIndex,
 		ripple,
-		record
+		record,
+		entityList
 	} from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import { slide } from 'svelte/transition';
@@ -38,10 +39,7 @@
 
 	$: math = sel?.math || '';
 
-	$: options = Object.keys($states)
-		.filter((key) => key.startsWith('sensor.'))
-		.sort()
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('sensor');
 
 	function set(key: string, event?: any) {
 		sel = updateObj(sel, key, event);

src/lib/Modal/ButtonConfig.svelte

@@ -7,7 +7,8 @@
 		ripple,
 		history,
 		historyIndex,
-		templates
+		templates,
+		entityList
 	} from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import Button from '$lib/Main/Button.svelte';
@@ -40,11 +41,7 @@
 	let state = sel?.state;
 	let computedIcon: string;
 
-	$: options =
-		$states &&
-		Object.keys($states)
-			.sort()
-			.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('');
 
 	$: template = $templates?.[sel?.id];
 

src/lib/Modal/CameraConfig.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-	import { states, dashboard, lang, history, historyIndex, record, ripple } from '$lib/Stores';
+	import {
+		states,
+		dashboard,
+		lang,
+		history,
+		historyIndex,
+		record,
+		ripple,
+		entityList
+	} from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import Select from '$lib/Components/Select.svelte';
 	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
@@ -25,10 +34,7 @@
 
 	$: entity = $states?.[sel?.entity_id];
 
-	$: options = Object.keys($states)
-		.filter((key) => key.startsWith('camera.'))
-		.sort()
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('camera');
 
 	onDestroy(() => $record());
 </script>

src/lib/Modal/HistoryConfig.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { states, dashboard, lang, record, history, historyIndex, ripple } from '$lib/Stores';
+	import { dashboard, lang, record, history, historyIndex, ripple, entityList } from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import History from '$lib/Sidebar/History.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -20,9 +20,7 @@
 		set('entity_id', demo);
 	}
 
-	$: options = Object.keys($states)
-		.sort()
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('');
 
 	const periodOptions = [
 		{ id: '5minute', label: $lang('period_5minute') },

src/lib/Modal/ImageConfig.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { states, dashboard, lang, history, historyIndex, record, ripple } from '$lib/Stores';
+	import { dashboard, lang, history, historyIndex, record, ripple, entityList } from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import Image from '$lib/Sidebar/Image.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -23,10 +23,7 @@
 
 	let url = sel?.url;
 
-	$: options = Object.entries($states)
-		.filter(([key]) => key.startsWith('image.'))
-		.sort()
-		.map(([key]) => ({ id: key, label: key }));
+	$: options = $entityList('image');
 
 	function set(key: string, event?: any) {
 		sel = updateObj(sel, key, event);

src/lib/Modal/RadialConfig.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-	import { states, dashboard, lang, history, historyIndex, record, ripple } from '$lib/Stores';
+	import {
+		states,
+		dashboard,
+		lang,
+		history,
+		historyIndex,
+		record,
+		ripple,
+		entityList
+	} from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import Radial from '$lib/Sidebar/Radial.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -33,10 +42,7 @@
 		max: 15
 	};
 
-	$: options = Object.keys($states)
-		.sort()
-		.filter((key) => key.startsWith('sensor.'))
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('sensor');
 
 	function minMax(key: string | number | undefined) {
 		return Math.min(Math.max(parseInt(key as string), range.min), range.max);

src/lib/Modal/SensorConfig.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-	import { dashboard, history, historyIndex, lang, record, ripple, states } from '$lib/Stores';
+	import {
+		dashboard,
+		entityList,
+		history,
+		historyIndex,
+		lang,
+		record,
+		ripple,
+		states
+	} from '$lib/Stores';
 	import { onDestroy, tick } from 'svelte';
 	import Sensor from '$lib/Sidebar/Sensor.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -29,10 +38,7 @@
 
 	$: date = sel?.date;
 
-	$: options = Object.keys($states)
-		.filter((key) => key.startsWith('sensor.'))
-		.sort()
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('sensor');
 
 	function set(key: string, event?: any) {
 		sel = updateObj(sel, key, event);

src/lib/Modal/TimerConfig.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { states, dashboard, lang, history, historyIndex, record, ripple } from '$lib/Stores';
+	import { dashboard, lang, history, historyIndex, record, ripple, entityList } from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import Timer from '$lib/Sidebar/Timer.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -20,10 +20,7 @@
 		set('entity_id', demo);
 	}
 
-	$: options = Object.entries($states)
-		.filter(([key]) => key.startsWith('timer.'))
-		.sort()
-		.map(([key]) => ({ id: key, label: key }));
+	$: options = $entityList('timer');
 
 	function set(key: string, event?: any) {
 		sel = updateObj(sel, key, event);

src/lib/Modal/WeatherConfig.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-	import { states, dashboard, lang, record, ripple, history, historyIndex } from '$lib/Stores';
+	import {
+		states,
+		dashboard,
+		lang,
+		record,
+		ripple,
+		history,
+		historyIndex,
+		entityList
+	} from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import Weather from '$lib/Sidebar/Weather.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -28,10 +37,7 @@
 
 	const iconOptions = [{ id: 'meteocons', label: 'meteocons' }];
 
-	$: options = Object.keys($states)
-		.filter((key) => key.startsWith('weather.'))
-		.sort()
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('weather');
 
 	$: sensorOptions = Object.keys($states)
 		.filter((key) => key.startsWith('sensor.'))

src/lib/Modal/WeatherForecastConfig.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-	import { states, dashboard, lang, record, ripple, history, historyIndex } from '$lib/Stores';
+	import {
+		states,
+		dashboard,
+		lang,
+		record,
+		ripple,
+		history,
+		historyIndex,
+		entityList
+	} from '$lib/Stores';
 	import { onDestroy } from 'svelte';
 	import WeatherForecast from '$lib/Sidebar/WeatherForecast.svelte';
 	import Select from '$lib/Components/Select.svelte';
@@ -38,10 +47,7 @@
 		{ id: 'materialsymbolslight', label: 'materialsymbolslight' }
 	];
 
-	$: options = Object.keys($states)
-		.filter((key) => key.startsWith('weather.'))
-		.sort()
-		.map((key) => ({ id: key, label: key }));
+	$: options = $entityList('weather');
 
 	$: range = {
 		min: 1,

src/lib/Stores.ts

@@ -13,6 +13,7 @@ import type {
 	HassEntities,
 	HassServices
 } from 'home-assistant-js-websocket';
+import { getName } from './Utils';
 
 // hass
 export const connection = writable<Connection>();
@@ -155,6 +156,17 @@ export const dragging = writable<boolean>(false);
 // codemirror
 export const autocompleteOpen = writable(false);
 export const autocompleteList = derived(states, ($states) => Object.keys($states));
+export const entityList = derived(
+	states,
+	($states) => (filter: string) =>
+		Object.keys($states)
+			.filter((key) => (filter.length > 0 ? key.startsWith(filter + '.') : true))
+			.sort()
+			.map((key) => {
+				const name = getName(undefined, $states[key]);
+				return { id: key, label: name ?? key, hint: name == key ? undefined : key };
+			})
+);
 export const pasteContent = writable<string | undefined>();
 
 // event