refactor(frontend): os.select, MkSelectのitem指定をオブジェクトによる定義に統一し、型を狭める (#16475)

* refactor(frontend): MkSelectのitem指定をオブジェクトによる定義に統一

* fix

* spdx

* fix

* fix os.select

* fix lint

* add comment

* fix

* fix: os.select対応漏れを修正

* fix

* fix

* fix: MkSelectのmodelに対する型チェックを厳格化

* fix

* fix

* fix

* Update packages/frontend/src/components/MkEmbedCodeGenDialog.vue

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* fix

* fix types

* fix

* fix

* Update packages/frontend/src/pages/admin/roles.editor.vue

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* fix: MkSelectに直接配列を指定している場合に正常に型が解決されるように

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

6 files changed, 32 insertions, 23 deletions

diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 9f6d8267f7..e2ee4b658e 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -168,7 +168,7 @@ const addColumn = async (ev) => {
 	const { canceled, result: column } = await os.select({
 		title: i18n.ts._deck.addColumn,
 		items: columnTypes.map(column => ({
-			value: column, text: i18n.ts._deck._columns[column],
+			value: column, label: i18n.ts._deck._columns[column],
 		})),
 	});
 	if (canceled || column == null) return;
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index 0042882728..0423a22ce1 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -51,22 +51,24 @@ watch(soundSetting, v => {
 
 async function setAntenna() {
 	const antennas = await misskeyApi('antennas/list');
-	const { canceled, result: antenna } = await os.select<MisskeyEntities.Antenna | '_CREATE_'>({
+	const { canceled, result: antennaIdOrOperation } = await os.select({
 		title: i18n.ts.selectAntenna,
 		items: [
-			{ value: '_CREATE_', text: i18n.ts.createNew },
+			{ value: '_CREATE_', label: i18n.ts.createNew },
 			(antennas.length > 0 ? {
-				sectionTitle: i18n.ts.createdAntennas,
+				type: 'group' as const,
+				label: i18n.ts.createdAntennas,
 				items: antennas.map(x => ({
-					value: x, text: x.name,
+					value: x.id, label: x.name,
 				})),
 			} : undefined),
 		],
 		default: props.column.antennaId,
 	});
-	if (canceled || antenna == null) return;
 
-	if (antenna === '_CREATE_') {
+	if (canceled || antennaIdOrOperation == null) return;
+
+	if (antennaIdOrOperation === '_CREATE_') {
 		const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkAntennaEditorDialog.vue').then(x => x.default), {}, {
 			created: (newAntenna: MisskeyEntities.Antenna) => {
 				antennasCache.delete();
@@ -82,6 +84,8 @@ async function setAntenna() {
 		return;
 	}
 
+	const antenna = antennas.find(x => x.id === antennaIdOrOperation)!;
+
 	updateColumn(props.column.id, {
 		antennaId: antenna.id,
 		timelineNameCache: antenna.name,
diff --git a/packages/frontend/src/ui/deck/channel-column.vue b/packages/frontend/src/ui/deck/channel-column.vue
index c02499e2d7..35ca9f5cc6 100644
--- a/packages/frontend/src/ui/deck/channel-column.vue
+++ b/packages/frontend/src/ui/deck/channel-column.vue
@@ -58,14 +58,15 @@ watch(soundSetting, v => {
 
 async function setChannel() {
 	const channels = await favoritedChannelsCache.fetch();
-	const { canceled, result: chosenChannel } = await os.select({
+	const { canceled, result: chosenChannelId } = await os.select({
 		title: i18n.ts.selectChannel,
 		items: channels.map(x => ({
-			value: x, text: x.name,
+			value: x.id, label: x.name,
 		})),
 		default: props.column.channelId,
 	});
-	if (canceled || chosenChannel == null) return;
+	if (canceled || chosenChannelId == null) return;
+	const chosenChannel = channels.find(x => x.id === chosenChannelId)!;
 	updateColumn(props.column.id, {
 		channelId: chosenChannel.id,
 		timelineNameCache: chosenChannel.name,
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index 5c5891ece8..7fb0aba1e1 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -58,22 +58,23 @@ watch(soundSetting, v => {
 
 async function setList() {
 	const lists = await misskeyApi('users/lists/list');
-	const { canceled, result: list } = await os.select<MisskeyEntities.UserList | '_CREATE_'>({
+	const { canceled, result: listIdOrOperation } = await os.select({
 		title: i18n.ts.selectList,
 		items: [
-			{ value: '_CREATE_', text: i18n.ts.createNew },
+			{ value: '_CREATE_', label: i18n.ts.createNew },
 			(lists.length > 0 ? {
-				sectionTitle: i18n.ts.createdLists,
+				type: 'group' as const,
+				label: i18n.ts.createdLists,
 				items: lists.map(x => ({
-					value: x, text: x.name,
+					value: x.id, label: x.name,
 				})),
 			} : undefined),
 		],
 		default: props.column.listId,
 	});
-	if (canceled || list == null) return;
+	if (canceled || listIdOrOperation == null) return;
 
-	if (list === '_CREATE_') {
+	if (listIdOrOperation === '_CREATE_') {
 		const { canceled, result: name } = await os.inputText({
 			title: i18n.ts.enterListName,
 		});
@@ -87,6 +88,8 @@ async function setList() {
 			timelineNameCache: res.name,
 		});
 	} else {
+		const list = lists.find(x => x.id === listIdOrOperation)!;
+
 		updateColumn(props.column.id, {
 			listId: list.id,
 			timelineNameCache: list.name,
diff --git a/packages/frontend/src/ui/deck/role-timeline-column.vue b/packages/frontend/src/ui/deck/role-timeline-column.vue
index 0aafeb56d7..beb679169c 100644
--- a/packages/frontend/src/ui/deck/role-timeline-column.vue
+++ b/packages/frontend/src/ui/deck/role-timeline-column.vue
@@ -49,14 +49,15 @@ watch(soundSetting, v => {
 
 async function setRole() {
 	const roles = (await misskeyApi('roles/list')).filter(x => x.isExplorable);
-	const { canceled, result: role } = await os.select({
+	const { canceled, result: roleId } = await os.select({
 		title: i18n.ts.role,
 		items: roles.map(x => ({
-			value: x, text: x.name,
+			value: x.id, label: x.name,
 		})),
 		default: props.column.roleId,
 	});
-	if (canceled || role == null) return;
+	if (canceled || roleId == null) return;
+	const role = roles.find(x => x.id === roleId)!;
 	updateColumn(props.column.id, {
 		roleId: role.id,
 		timelineNameCache: role.name,
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
index 37814f0914..afaa08e6d0 100644
--- a/packages/frontend/src/ui/deck/tl-column.vue
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -96,13 +96,13 @@ async function setType() {
 	const { canceled, result: src } = await os.select({
 		title: i18n.ts.timeline,
 		items: [{
-			value: 'home' as const, text: i18n.ts._timelines.home,
+			value: 'home', label: i18n.ts._timelines.home,
 		}, {
-			value: 'local' as const, text: i18n.ts._timelines.local,
+			value: 'local', label: i18n.ts._timelines.local,
 		}, {
-			value: 'social' as const, text: i18n.ts._timelines.social,
+			value: 'social', label: i18n.ts._timelines.social,
 		}, {
-			value: 'global' as const, text: i18n.ts._timelines.global,
+			value: 'global', label: i18n.ts._timelines.global,
 		}],
 	});
 	if (canceled) {