Merge tag '13.11.3' into merge-upstream

packages/frontend/src/components/MkMediaBanner.vue

@@ -31,7 +31,7 @@
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import VuePlyr from 'vue-plyr';
-import { ColdDeviceStorage } from '@/store';
+import { soundConfigStore } from '@/scripts/sound';
 import 'vue-plyr/dist/vue-plyr.css';
 import { i18n } from '@/i18n';
 
@@ -44,11 +44,11 @@ const audioEl = $shallowRef<HTMLAudioElement | null>();
 let hide = $ref(true);
 
 function volumechange() {
-	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
+	if (audioEl) soundConfigStore.set('mediaVolume', audioEl.volume);
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) audioEl.volume = soundConfigStore.state.mediaVolume;
 });
 </script>
 

packages/frontend/src/components/MkTimeline.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
 	list?: string;
 	antenna?: string;
 	channel?: string;
+	role?: string;
 	sound?: boolean;
 }>();
 
@@ -121,6 +122,15 @@ if (props.src === 'antenna') {
 		channelId: props.channel,
 	});
 	connection.on('note', prepend);
+} else if (props.src === 'role') {
+	endpoint = 'roles/notes';
+	query = {
+		roleId: props.role,
+	};
+	connection = stream.useChannel('roleTimeline', {
+		roleId: props.role,
+	});
+	connection.on('note', prepend);
 }
 
 const pagination = {

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -5,7 +5,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getStaticImageUrl } from '@/scripts/media-proxy';
+import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy';
 import { defaultStore } from '@/store';
 import { customEmojis } from '@/custom-emojis';
 
@@ -15,25 +15,38 @@ const props = defineProps<{
 	noStyle?: boolean;
 	host?: string | null;
 	url?: string;
+	useOriginalSize?: boolean;
 }>();
 
 const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substr(1, props.name.length - 2) : props.name).replace('@.', ''));
+const isLocal = computed(() => !props.host && (customEmojiName.value.endsWith('@.') || !customEmojiName.value.includes('@')));
 
 const rawUrl = computed(() => {
 	if (props.url) {
 		return props.url;
 	}
-	if (props.host == null && !customEmojiName.value.includes('@')) {
+	if (isLocal.value) {
 		return customEmojis.value.find(x => x.name === customEmojiName.value)?.url ?? null;
 	}
 	return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
 });
 
-const url = computed(() =>
-	defaultStore.reactiveState.disableShowingAnimatedImages.value && rawUrl.value
-		? getStaticImageUrl(rawUrl.value)
-		: rawUrl.value,
-);
+const url = computed(() => {
+	if (rawUrl.value == null) return null;
+
+	const proxied =
+		(rawUrl.value.startsWith('/emoji/') || (props.useOriginalSize && isLocal.value))
+			? rawUrl.value
+			: getProxiedImageUrl(
+				rawUrl.value,
+				props.useOriginalSize ? undefined : 'emoji',
+				false,
+				true,
+			);
+	return defaultStore.reactiveState.disableShowingAnimatedImages.value
+		? getStaticImageUrl(proxied)
+		: proxied;
+});
 
 const alt = computed(() => `:${customEmojiName.value}:`);
 let errored = $ref(url.value == null);

packages/frontend/src/components/mfm.ts

@@ -51,6 +51,10 @@ export default defineComponent({
 			type: Object,
 			default: null,
 		},
+		rootScale: {
+			type: Number,
+			default: 1,
+		}
 	},
 
 	render() {
@@ -65,7 +69,12 @@ export default defineComponent({
 
 		const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
 
-		const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
+		/**
+		 * Gen Vue Elements from MFM AST
+		 * @param ast MFM AST
+		 * @param scale How times large the text is
+		 */
+		const genEl = (ast: mfm.MfmNode[], scale: number) => ast.map((token): VNode | string | (VNode | string)[] => {
 			switch (token.type) {
 				case 'text': {
 					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
@@ -84,17 +93,17 @@ export default defineComponent({
 				}
 
 				case 'bold': {
-					return [h('b', genEl(token.children))];
+					return [h('b', genEl(token.children, scale))];
 				}
 
 				case 'strike': {
-					return [h('del', genEl(token.children))];
+					return [h('del', genEl(token.children, scale))];
 				}
 
 				case 'italic': {
 					return h('i', {
 						style: 'font-style: oblique;',
-					}, genEl(token.children));
+					}, genEl(token.children, scale));
 				}
 
 				case 'fn': {
@@ -155,17 +164,17 @@ export default defineComponent({
 						case 'x2': {
 							return h('span', {
 								class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
-							}, genEl(token.children));
+							}, genEl(token.children, scale * 2));
 						}
 						case 'x3': {
 							return h('span', {
 								class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
-							}, genEl(token.children));
+							}, genEl(token.children, scale * 3));
 						}
 						case 'x4': {
 							return h('span', {
 								class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
-							}, genEl(token.children));
+							}, genEl(token.children, scale * 4));
 						}
 						case 'font': {
 							const family =
@@ -182,7 +191,7 @@ export default defineComponent({
 						case 'blur': {
 							return h('span', {
 								class: '_mfm_blur_',
-							}, genEl(token.children));
+							}, genEl(token.children, scale));
 						}
 						case 'rainbow': {
 							const speed = validTime(token.props.args.speed) ?? '1s';
@@ -191,9 +200,9 @@ export default defineComponent({
 						}
 						case 'sparkle': {
 							if (!useAnim) {
-								return genEl(token.children);
+								return genEl(token.children, scale);
 							}
-							return h(MkSparkle, {}, genEl(token.children));
+							return h(MkSparkle, {}, genEl(token.children, scale));
 						}
 						case 'rotate': {
 							const degrees = parseFloat(token.props.args.deg ?? '90');
@@ -214,7 +223,8 @@ export default defineComponent({
 							}
 							const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
 							const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
-							style = `transform: scale(${x}, ${y});`;
+							style = `transform: scale(${x}, ${y});`; 
+							scale = scale * Math.max(x, y);
 							break;
 						}
 						case 'fg': {
@@ -231,24 +241,24 @@ export default defineComponent({
 						}
 					}
 					if (style == null) {
-						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
+						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']);
 					} else {
 						return h('span', {
 							style: 'display: inline-block; ' + style,
-						}, genEl(token.children));
+						}, genEl(token.children, scale));
 					}
 				}
 
 				case 'small': {
 					return [h('small', {
 						style: 'opacity: 0.7;',
-					}, genEl(token.children))];
+					}, genEl(token.children, scale))];
 				}
 
 				case 'center': {
 					return [h('div', {
 						style: 'text-align:center;',
-					}, genEl(token.children))];
+					}, genEl(token.children, scale))];
 				}
 
 				case 'url': {
@@ -264,7 +274,7 @@ export default defineComponent({
 						key: Math.random(),
 						url: token.props.url,
 						rel: 'nofollow noopener',
-					}, genEl(token.children))];
+					}, genEl(token.children, scale))];
 				}
 
 				case 'mention': {
@@ -303,11 +313,11 @@ export default defineComponent({
 					if (!this.nowrap) {
 						return [h('div', {
 							style: QUOTE_STYLE,
-						}, genEl(token.children))];
+						}, genEl(token.children, scale))];
 					} else {
 						return [h('span', {
 							style: QUOTE_STYLE,
-						}, genEl(token.children))];
+						}, genEl(token.children, scale))];
 					}
 				}
 
@@ -319,6 +329,7 @@ export default defineComponent({
 							name: token.props.name,
 							normal: this.plain,
 							host: null,
+							useOriginalSize: scale >= 2.5,
 						})];
 					} else {
 						// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -332,6 +343,7 @@ export default defineComponent({
 								url: this.emojiUrls ? this.emojiUrls[token.props.name] : null,
 								normal: this.plain,
 								host: this.author.host,
+								useOriginalSize: scale >= 2.5,
 							})];
 						}
 					}
@@ -360,7 +372,7 @@ export default defineComponent({
 				}
 
 				case 'plain': {
-					return [h('span', genEl(token.children))];
+					return [h('span', genEl(token.children, scale))];
 				}
 
 				default: {
@@ -373,6 +385,6 @@ export default defineComponent({
 		}).flat(Infinity) as (VNode | string)[];
 
 		// Parse ast to DOM
-		return h('span', genEl(ast));
+		return h('span', genEl(ast, this.rootScale));
 	},
 });

packages/frontend/src/pages/about-misskey.vue

@@ -218,6 +218,7 @@ const patrons = [
 	'Ebise Lutica',
 	'巣黒るい@リスケモ男の娘VTuber!',
 	'ふぇいぽむ',
+	'依古田イコ',
 ];
 
 let thereIsTreasure = $ref($i && !claimedAchievements.includes('foundTreasure'));

packages/frontend/src/pages/channels.vue

@@ -65,7 +65,7 @@ const props = defineProps<{
 }>();
 
 let key = $ref('');
-let tab = $ref('search');
+let tab = $ref('featured');
 let searchQuery = $ref('');
 let searchType = $ref('nameAndDescription');
 let channelPagination = $ref();

packages/frontend/src/pages/explore.vue

@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div class="lznhrdub">
+	<div>
 		<div v-if="tab === 'featured'">
 			<XFeatured/>
 		</div>

packages/frontend/src/pages/role.vue

@@ -1,13 +1,16 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
 
-	<MkSpacer :content-max="1200">
+	<MkSpacer v-if="tab === 'users'" :content-max="1200">
 		<div class="_gaps_s">
 			<div v-if="role">{{ role.description }}</div>
 			<MkUserList :pagination="users" :extractor="(item) => item.user"/>
 		</div>
 	</MkSpacer>
+	<MkSpacer v-else-if="tab === 'timeline'" :content-max="700">
+		<MkTimeline ref="timeline" src="role" :role="props.role"/>
+	</MkSpacer>
 </MkStickyContainer>
 </template>
 
@@ -16,11 +19,17 @@ import { computed, watch } from 'vue';
 import * as os from '@/os';
 import MkUserList from '@/components/MkUserList.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import MkTimeline from '@/components/MkTimeline.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	role: string;
-}>();
+	initialTab?: string;
+}>(), {
+	initialTab: 'users',
+});
 
+let tab = $ref(props.initialTab);
 let role = $ref();
 
 watch(() => props.role, () => {
@@ -39,6 +48,16 @@ const users = $computed(() => ({
 	},
 }));
 
+const headerTabs = $computed(() => [{
+	key: 'users',
+	icon: 'ti ti-users',
+	title: i18n.ts.users,
+}, {
+	key: 'timeline',
+	icon: 'ti ti-pencil',
+	title: i18n.ts.timeline,
+}]);
+
 definePageMetadata(computed(() => ({
 	title: role?.name,
 	icon: 'ti ti-badge',

packages/frontend/src/pages/settings/sounds.vue

@@ -7,7 +7,7 @@
 	<FormSection>
 		<template #label>{{ i18n.ts.sounds }}</template>
 		<div class="_gaps_s">
-			<MkFolder v-for="type in Object.keys(sounds)" :key="type">
+			<MkFolder v-for="type in soundsKeys" :key="type">
 				<template #label>{{ i18n.t('_sfx.' + type) }}</template>
 				<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
 
@@ -21,51 +21,44 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { Ref, computed, ref } from 'vue';
 import XSound from './sounds.sound.vue';
 import MkRange from '@/components/MkRange.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import { ColdDeviceStorage } from '@/store';
+import { soundConfigStore } from '@/scripts/sound';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const masterVolume = computed({
-	get: () => {
-		return ColdDeviceStorage.get('sound_masterVolume');
-	},
-	set: (value) => {
-		ColdDeviceStorage.set('sound_masterVolume', value);
-	},
+const masterVolume = computed(soundConfigStore.makeGetterSetter('sound_masterVolume'));
+
+const soundsKeys = ['note', 'noteMy', 'notification', 'chat', 'chatBg', 'antenna', 'channel'] as const;
+
+const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({
+	note: soundConfigStore.reactiveState.sound_note,
+	noteMy: soundConfigStore.reactiveState.sound_noteMy,
+	notification: soundConfigStore.reactiveState.sound_notification,
+	chat: soundConfigStore.reactiveState.sound_chat,
+	chatBg: soundConfigStore.reactiveState.sound_chatBg,
+	antenna: soundConfigStore.reactiveState.sound_antenna,
+	channel: soundConfigStore.reactiveState.sound_channel,
 });
 
-const volumeIcon = computed(() => masterVolume.value === 0 ? 'ti ti-volume-3' : 'ti ti-volume');
-
-const sounds = ref({
-	note: ColdDeviceStorage.get('sound_note'),
-	noteMy: ColdDeviceStorage.get('sound_noteMy'),
-	notification: ColdDeviceStorage.get('sound_notification'),
-	chat: ColdDeviceStorage.get('sound_chat'),
-	chatBg: ColdDeviceStorage.get('sound_chatBg'),
-	antenna: ColdDeviceStorage.get('sound_antenna'),
-	channel: ColdDeviceStorage.get('sound_channel'),
-});
-
-async function updated(type, sound) {
+async function updated(type: keyof typeof sounds.value, sound) {
 	const v = {
 		type: sound.type,
 		volume: sound.volume,
 	};
 
-	ColdDeviceStorage.set('sound_' + type, v);
+	soundConfigStore.set(`sound_${type}`, v);
 	sounds.value[type] = v;
 }
 
 function reset() {
-	for (const sound of Object.keys(sounds.value)) {
-		const v = ColdDeviceStorage.default['sound_' + sound];
-		ColdDeviceStorage.set('sound_' + sound, v);
+	for (const sound of Object.keys(sounds.value) as Array<keyof typeof sounds.value>) {
+		const v = soundConfigStore.def[`sound_${sound}`].default;
+		soundConfigStore.set(`sound_${sound}`, v);
 		sounds.value[sound] = v;
 	}
 }

packages/frontend/src/scripts/media-proxy.ts

@@ -2,7 +2,7 @@ import { query } from '@/scripts/url';
 import { url } from '@/config';
 import { instance } from '@/instance';
 
-export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigin: boolean = false): string {
+export function getProxiedImageUrl(imageUrl: string, type?: 'preview' | 'emoji' | 'avatar', mustOrigin: boolean = false, noFallback: boolean = false): string {
 	const localProxy = `${url}/proxy`;
 
 	if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/') || imageUrl.startsWith(localProxy + '/')) {
@@ -15,7 +15,7 @@ export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigi
 		: 'image.webp'
 	}?${query({
 		url: imageUrl,
-		fallback: '1',
+		...(!noFallback ? { 'fallback': '1' } : {}),
 		...(type ? { [type]: '1' } : {}),
 		...(mustOrigin ? { origin: '1' } : {}),
 	})}`;

packages/frontend/src/scripts/sound.ts

@@ -1,4 +1,56 @@
-import { ColdDeviceStorage } from '@/store';
+import { markRaw } from 'vue';
+import { Storage } from '@/pizzax';
+
+export const soundConfigStore = markRaw(new Storage('sound', {
+	mediaVolume: {
+		where: 'device',
+		default: 0.5
+	},
+	sound_masterVolume: {
+		where: 'device',
+		default: 0.3
+	},
+	sound_note: {
+		where: 'account',
+		default: { type: 'syuilo/n-aec', volume: 1 }
+	},
+	sound_noteMy: {
+		where: 'account',
+		default: { type: 'syuilo/n-cea-4va', volume: 1 }
+	},
+	sound_notification: {
+		where: 'account',
+		default: { type: 'syuilo/n-ea', volume: 1 }
+	},
+	sound_chat: {
+		where: 'account',
+		default: { type: 'syuilo/pope1', volume: 1 }
+	},
+	sound_chatBg: {
+		where: 'account',
+		default: { type: 'syuilo/waon', volume: 1 }
+	},
+	sound_antenna: {
+		where: 'account',
+		default: { type: 'syuilo/triple', volume: 1 }
+	},
+	sound_channel: {
+		where: 'account',
+		default: { type: 'syuilo/square-pico', volume: 1 }
+	},
+}));
+
+await soundConfigStore.ready;
+
+//#region サウンドのColdDeviceStorage => indexedDBのマイグレーション
+for (const target of Object.keys(soundConfigStore.state) as Array<keyof typeof soundConfigStore.state>) {
+	const value = localStorage.getItem(`miux:${target}`);
+	if (value) {
+		soundConfigStore.set(target, JSON.parse(value) as typeof soundConfigStore.def[typeof target]['default']);
+		localStorage.removeItem(`miux:${target}`);
+	}
+}
+//#endregion
 
 const cache = new Map<string, HTMLAudioElement>();
 
@@ -128,19 +180,20 @@ export function getAudio(file: string, useCache = true): HTMLAudioElement {
 }
 
 export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement {
-	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
+	const masterVolume = soundConfigStore.state.sound_masterVolume;
 	audio.volume = masterVolume - ((1 - volume) * masterVolume);
 	return audio;
 }
 
 export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification') {
-	const sound = ColdDeviceStorage.get(`sound_${type}`);
+	const sound = soundConfigStore.state[`sound_${type}`];
+	if (_DEV_) console.log('play', type, sound);
 	if (sound.type == null) return;
 	playFile(sound.type, sound.volume);
 }
 
 export function playFile(file: string, volume: number) {
-	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
+	const masterVolume = soundConfigStore.state.sound_masterVolume;
 	if (masterVolume === 0) return;
 
 	const audio = setVolume(getAudio(file), volume);

packages/frontend/src/store.ts

@@ -343,15 +343,6 @@ export class ColdDeviceStorage {
 		darkTheme,
 		syncDeviceDarkMode: true,
 		plugins: [] as Plugin[],
-		mediaVolume: 0.5,
-		sound_masterVolume: 0.5,
-		sound_note: { type: 'syuilo/n-eca', volume: 0.5 },
-		sound_noteMy: { type: 'syuilo/n-cea-4va', volume: 0.5 },
-		sound_notification: { type: 'syuilo/n-ea', volume: 0.5 },
-		sound_chat: { type: 'syuilo/pope1', volume: 0.5 },
-		sound_chatBg: { type: 'syuilo/waon', volume: 0.5 },
-		sound_antenna: { type: 'syuilo/triple', volume: 0.5 },
-		sound_channel: { type: 'syuilo/square-pico', volume: 0.5 },
 	};
 
 	public static watchers: Watcher[] = [];

packages/frontend/src/ui/deck.vue

@@ -152,6 +152,7 @@ const addColumn = async (ev) => {
 		'channel',
 		'mentions',
 		'direct',
+		'roleTimeline',
 	];
 
 	const { canceled, result: column } = await os.select({

packages/frontend/src/ui/deck/column-core.vue

@@ -10,6 +10,7 @@
 <XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
 <XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
 <XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XRoleTimelineColumn v-else-if="column.type === 'roleTimeline'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
 </template>
 
 <script lang="ts" setup>
@@ -23,6 +24,7 @@ import XNotificationsColumn from './notifications-column.vue';
 import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
+import XRoleTimelineColumn from './role-timeline-column.vue';
 import { Column } from './deck-store';
 
 defineProps<{

packages/frontend/src/ui/deck/deck-store.ts

@@ -22,6 +22,7 @@ export type Column = {
 	antennaId?: string;
 	listId?: string;
 	channelId?: string;
+	roleId?: string;
 	includingTypes?: typeof notificationTypes[number][];
 	tl?: 'home' | 'local' | 'social' | 'global';
 };

packages/frontend/src/ui/deck/role-timeline-column.vue

@@ -0,0 +1,67 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header>
+		<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<MkTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId" @after="() => emit('loaded')"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import XColumn from './column.vue';
+import { updateColumn, Column } from './deck-store';
+import MkTimeline from '@/components/MkTimeline.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'loaded'): void;
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
+
+onMounted(() => {
+	if (props.column.roleId == null) {
+		setRole();
+	}
+});
+
+async function setRole() {
+	const roles = await os.api('roles/list');
+	const { canceled, result: role } = await os.select({
+		title: i18n.ts.role,
+		items: roles.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: props.column.roleId,
+	});
+	if (canceled) return;
+	updateColumn(props.column.id, {
+		roleId: role.id,
+	});
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.role,
+	action: setRole,
+}];
+
+/*
+function focus() {
+	timeline.focus();
+}
+
+defineExpose({
+	focus,
+});
+*/
+</script>