packages/frontend/package.json

@@ -72,6 +72,7 @@
 		"tsc-alias": "1.8.16",
 		"tsconfig-paths": "4.2.0",
 		"typescript": "5.8.3",
+		"uuid": "11.1.0",
 		"v-code-diff": "1.13.1",
 		"vite": "6.3.5",
 		"vue": "3.5.16",

packages/frontend/src/aiscript/ui.ts

@@ -4,7 +4,7 @@
  */
 
 import { utils, values } from '@syuilo/aiscript';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import { ref } from 'vue';
 import type { Ref } from 'vue';
 import * as Misskey from 'misskey-js';
@@ -543,7 +543,7 @@ export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: R
 		call: C,
 	) {
 		if (id) utils.assertString(id);
-		const _id = id?.value ?? genId();
+		const _id = id?.value ?? uuid();
 		const component = ref({
 			...getOptions(def, call),
 			type,

packages/frontend/src/components/MkEmojiPicker.vue

@@ -64,7 +64,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkCustomEmoji v-if="!emoji.hasOwnProperty('char')" class="emoji" :name="getKey(emoji)" :normal="true"/>
 						<MkEmoji v-else class="emoji" :emoji="getKey(emoji)" :normal="true"/>
 					</button>
-					<button v-tooltip="i18n.ts.settings" class="_button config" @click="settings"><i class="ti ti-settings"></i></button>
 				</div>
 			</section>
 
@@ -140,9 +139,6 @@ import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-e
 import { $i } from '@/i.js';
 import { checkReactionPermissions } from '@/utility/check-reaction-permissions.js';
 import { prefer } from '@/preferences.js';
-import { useRouter } from '@/router.js';
-
-const router = useRouter();
 
 const props = withDefaults(defineProps<{
 	showPinned?: boolean;
@@ -493,11 +489,6 @@ function done(query?: string): boolean | void {
 	}
 }
 
-function settings() {
-	emit('esc');
-	router.push('settings/emoji-palette');
-}
-
 onMounted(() => {
 	focus();
 });
@@ -729,15 +720,6 @@ defineExpose({
 				position: relative;
 				padding: $pad;
 
-				> .config {
-					position: relative;
-					padding: 0 3px;
-					width: var(--eachSize);
-					height: var(--eachSize);
-					contain: strict;
-					opacity: 0.5;
-				}
-
 				> .item {
 					position: relative;
 					padding: 0 3px;

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -82,7 +82,7 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
 
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import { render } from 'buraha';
 import { prefer } from '@/preferences.js';
 
@@ -117,7 +117,7 @@ const props = withDefaults(defineProps<{
 	onlyAvgColor: false,
 });
 
-const viewId = genId();
+const viewId = uuid();
 const canvas = useTemplateRef('canvas');
 const root = useTemplateRef('root');
 const img = useTemplateRef('img');

packages/frontend/src/components/MkInput.vue

@@ -52,7 +52,6 @@ import type { SuggestionType } from '@/utility/autocomplete.js';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { Autocomplete } from '@/utility/autocomplete.js';
-import { genId } from '@/utility/id.js';
 
 const props = defineProps<{
 	modelValue: string | number | null;
@@ -88,7 +87,7 @@ const emit = defineEmits<{
 
 const { modelValue, type, autofocus } = toRefs(props);
 const v = ref(modelValue.value);
-const id = genId();
+const id = Math.random().toString(); // TODO: uuid?
 const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);

packages/frontend/src/components/MkMiniChart.vue

@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { watch, ref } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import tinycolor from 'tinycolor2';
 import { useInterval } from '@@/js/use-interval.js';
 
@@ -42,7 +42,7 @@ const props = defineProps<{
 
 const viewBoxX = 50;
 const viewBoxY = 50;
-const gradientId = genId();
+const gradientId = uuid();
 const polylinePoints = ref('');
 const polygonPoints = ref('');
 const headX = ref<number | null>(null);

packages/frontend/src/components/MkModalWindow.vue

@@ -7,13 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
 	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
 		<div :class="$style.header">
-			<button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton && withCloseButton" :class="$style.headerButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span :class="$style.title">
 				<slot name="header"></slot>
 			</span>
-			<div v-if="withOkButton" style="padding: 0 16px; place-content: center;">
-				<MkButton primary gradate small rounded :disabled="okButtonDisabled" @click="emit('ok')">{{ i18n.ts.done }} <i class="ti ti-check"></i></MkButton>
-			</div>
+			<button v-if="!withOkButton && withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div :class="$style.body">
 			<slot></slot>
@@ -27,9 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import MkModal from './MkModal.vue';
 
 const props = withDefaults(defineProps<{
 	withOkButton?: boolean;

packages/frontend/src/components/MkSparkle.vue

@@ -57,7 +57,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
-import { genId } from '@/utility/id.js';
 
 const particles = ref<{
 	id: string,
@@ -87,7 +86,7 @@ onMounted(() => {
 		const y = (Math.random() * (height.value - 64));
 		const sizeFactor = Math.random();
 		const particle = {
-			id: genId(),
+			id: Math.random().toString(),
 			x,
 			y,
 			size: 0.2 + ((sizeFactor / 10) * 3),

packages/frontend/src/components/MkTutorialDialog.Note.vue

@@ -29,7 +29,6 @@ import { i18n } from '@/i18n.js';
 import { globalEvents } from '@/events.js';
 import { $i } from '@/i.js';
 import MkNote from '@/components/MkNote.vue';
-import { genId } from '@/utility/id.js';
 
 const props = defineProps<{
 	phase: 'aboutNote' | 'howToReact';
@@ -84,7 +83,7 @@ function doNotification(emoji: string): void {
 	if (!$i || !emoji) return;
 
 	const notification: Misskey.entities.Notification = {
-		id: genId(),
+		id: Math.random().toString(),
 		createdAt: new Date().toUTCString(),
 		type: 'reaction',
 		reaction: emoji,

packages/frontend/src/components/MkUploaderDialog.vue

@@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
 import isAnimated from 'is-file-animated';
 import type { MenuItem } from '@/types/menu.js';
@@ -420,7 +420,7 @@ async function chooseFile(ev: MouseEvent) {
 }
 
 function initializeFile(file: File) {
-	const id = genId();
+	const id = uuid();
 	const filename = file.name ?? 'untitled';
 	const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
 	items.value.push({

packages/frontend/src/components/MkWidgets.vue

@@ -51,7 +51,7 @@ export type DefaultStoredWidget = {
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, computed } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
 import { widgets as widgetDefs, federationWidgets } from '@/widgets/index.js';
@@ -95,7 +95,7 @@ const addWidget = () => {
 
 	emit('addWidget', {
 		name: widgetAdderSelected.value,
-		id: genId(),
+		id: uuid(),
 		data: {},
 	});
 

packages/frontend/src/deck.ts

@@ -5,11 +5,11 @@
 
 import { notificationTypes } from 'misskey-js';
 import { ref } from 'vue';
+import { v4 as uuid } from 'uuid';
 import { i18n } from './i18n.js';
 import type { BasicTimelineType } from '@/timelines.js';
 import type { SoundStore } from '@/preferences/def.js';
 import type { MenuItem } from '@/types/menu.js';
-import { genId } from '@/utility/id.js';
 import { deepClone } from '@/utility/clone.js';
 import { prefer } from '@/preferences.js';
 import * as os from '@/os.js';
@@ -103,7 +103,7 @@ function addProfile(name: string) {
 	if (prefer.s['deck.profiles'].find(p => p.name === name)) return;
 
 	const newProfile: DeckProfile = {
-		id: genId(),
+		id: uuid(),
 		name,
 		columns: [],
 		layout: [],

packages/frontend/src/pages/admin/RolesEditorFormula.vue

@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -104,7 +104,7 @@ const type = computed({
 	set: (t) => {
 		if (t === 'and') v.value.values = [];
 		if (t === 'or') v.value.values = [];
-		if (t === 'not') v.value.value = { id: genId(), type: 'isRemote' };
+		if (t === 'not') v.value.value = { id: uuid(), type: 'isRemote' };
 		if (t === 'roleAssignedTo') v.value.roleId = '';
 		if (t === 'createdLessThan') v.value.sec = 86400;
 		if (t === 'createdMoreThan') v.value.sec = 86400;
@@ -119,7 +119,7 @@ const type = computed({
 });
 
 function addValue() {
-	v.value.values.push({ id: genId(), type: 'isRemote' });
+	v.value.values.push({ id: uuid(), type: 'isRemote' });
 }
 
 function valuesItemUpdated(item) {

packages/frontend/src/pages/admin/announcements.vue

@@ -97,7 +97,6 @@ import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
-import { genId } from '@/utility/id.js';
 
 const announcementsStatus = ref<'active' | 'archived'>('active');
 
@@ -118,7 +117,7 @@ watch(announcementsStatus, (to) => {
 
 function add() {
 	announcements.value.unshift({
-		_id: genId(),
+		_id: Math.random().toString(36),
 		id: null,
 		title: 'New announcement',
 		text: '',

packages/frontend/src/pages/admin/federation-job-queue.chart.vue

@@ -57,7 +57,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
-import { genId } from '@/utility/id.js';
 
 const connection = markRaw(useStream().useChannel('queueStats'));
 
@@ -114,7 +113,7 @@ onMounted(() => {
 	connection.on('stats', onStats);
 	connection.on('statsLog', onStatsLog);
 	connection.send('requestLog', {
-		id: genId(),
+		id: Math.random().toString().substring(2, 10),
 		length: 200,
 	});
 });

packages/frontend/src/pages/admin/overview.queue.vue

@@ -41,7 +41,6 @@ import XChart from './overview.queue.chart.vue';
 import type { ApQueueDomain } from '@/pages/admin/queue.vue';
 import number from '@/filters/number.js';
 import { useStream } from '@/stream.js';
-import { genId } from '@/utility/id.js';
 
 const connection = markRaw(useStream().useChannel('queueStats'));
 
@@ -93,7 +92,7 @@ onMounted(() => {
 	connection.on('stats', onStats);
 	connection.on('statsLog', onStatsLog);
 	connection.send('requestLog', {
-		id: genId(),
+		id: Math.random().toString().substring(2, 10),
 		length: 100,
 	});
 });

packages/frontend/src/pages/admin/overview.vue

@@ -84,7 +84,6 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import { genId } from '@/utility/id.js';
 
 const rootEl = useTemplateRef('rootEl');
 const serverInfo = ref<Misskey.entities.ServerInfoResponse | null>(null);
@@ -171,7 +170,7 @@ onMounted(async () => {
 
 	nextTick(() => {
 		queueStatsConnection.send('requestLog', {
-			id: genId(),
+			id: Math.random().toString().substring(2, 10),
 			length: 100,
 		});
 	});

packages/frontend/src/pages/admin/roles.edit.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import XEditor from './roles.editor.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -55,7 +55,7 @@ if (props.id) {
 		color: null,
 		iconUrl: null,
 		target: 'manual',
-		condFormula: { id: genId(), type: 'isRemote' },
+		condFormula: { id: uuid(), type: 'isRemote' },
 		isPublic: false,
 		isExplorable: false,
 		asBadge: false,

packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 import { defineAsyncComponent, inject, onMounted, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@@ -73,7 +73,7 @@ async function add() {
 	});
 	if (canceled) return;
 
-	const id = genId();
+	const id = uuid();
 	children.value.push({ id, type });
 }
 

packages/frontend/src/pages/page-editor/page-editor.vue

@@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, provide, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import { url } from '@@/js/config.js';
 import XBlocks from './page-editor.blocks.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -200,7 +200,7 @@ async function add() {
 	});
 	if (canceled) return;
 
-	const id = genId();
+	const id = uuid();
 	content.value.push({ id, type });
 }
 
@@ -240,7 +240,7 @@ async function init() {
 		content.value = page.value.content;
 		eyeCatchingImageId.value = page.value.eyeCatchingImageId;
 	} else {
-		const id = genId();
+		const id = uuid();
 		content.value = [{
 			id,
 			type: 'text',

packages/frontend/src/pages/reversi/game.board.vue

@@ -158,7 +158,6 @@ import { userPage } from '@/filters/user.js';
 import * as sound from '@/utility/sound.js';
 import * as os from '@/os.js';
 import { confetti } from '@/utility/confetti.js';
-import { genId } from '@/utility/id.js';
 
 const $i = ensureSignin();
 
@@ -274,7 +273,7 @@ function putStone(pos: number) {
 		playbackRate: 1,
 	});
 
-	const id = genId();
+	const id = Math.random().toString(36).slice(2);
 	props.connection!.send('putStone', {
 		pos: pos,
 		id,

packages/frontend/src/pages/settings/emoji-palette.vue

@@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import XPalette from './emoji-palette.palette.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -159,7 +159,7 @@ function addPalette() {
 	prefer.commit('emojiPalettes', [
 		...prefer.s.emojiPalettes,
 		{
-			id: genId(),
+			id: uuid(),
 			name: '',
 			emojis: [],
 		},

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

@@ -70,12 +70,11 @@ import { definePage } from '@/page.js';
 import { prefer } from '@/preferences.js';
 import { PREF_DEF } from '@/preferences/def.js';
 import { getInitialPrefValue } from '@/preferences/manager.js';
-import { genId } from '@/utility/id.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const items = ref(prefer.s.menu.map(x => ({
-	id: genId(),
+	id: Math.random().toString(),
 	type: x,
 })));
 
@@ -94,7 +93,7 @@ async function addItem() {
 	});
 	if (canceled) return;
 	items.value = [...items.value, {
-		id: genId(),
+		id: Math.random().toString(),
 		type: item,
 	}];
 }
@@ -109,7 +108,7 @@ async function save() {
 
 function reset() {
 	items.value = getInitialPrefValue('menu').map(x => ({
-		id: genId(),
+		id: Math.random().toString(),
 		type: x,
 	}));
 }

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

@@ -796,7 +796,6 @@ import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
-import { genId } from '@/utility/id.js';
 
 const $i = ensureSignin();
 
@@ -1010,7 +1009,7 @@ let smashTimer: number | null = null;
 
 function testNotification(): void {
 	const notification: Misskey.entities.Notification = {
-		id: genId(),
+		id: Math.random().toString(),
 		createdAt: new Date().toUTCString(),
 		isRead: false,
 		type: 'test',

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

@@ -171,7 +171,6 @@ import { claimAchievement } from '@/utility/achievements.js';
 import { store } from '@/store.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
-import { genId } from '@/utility/id.js';
 
 const $i = ensureSignin();
 
@@ -200,12 +199,12 @@ watch(() => profile, () => {
 	deep: true,
 });
 
-const fields = ref($i.fields.map(field => ({ id: genId(), name: field.name, value: field.value })) ?? []);
+const fields = ref($i.fields.map(field => ({ id: Math.random().toString(), name: field.name, value: field.value })) ?? []);
 const fieldEditMode = ref(false);
 
 function addField() {
 	fields.value.push({
-		id: genId(),
+		id: Math.random().toString(),
 		name: '',
 		value: '',
 	});

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

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import XStatusbar from './statusbar.statusbar.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -38,7 +38,7 @@ onMounted(() => {
 
 async function add() {
 	prefer.commit('statusbars', [...statusbars.value, {
-		id: genId(),
+		id: uuid(),
 		type: null,
 		black: false,
 		size: 'medium',

packages/frontend/src/pages/theme-editor.vue

@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { watch, ref, computed } from 'vue';
 import { toUnicode } from 'punycode.js';
 import tinycolor from 'tinycolor2';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import JSON5 from 'json5';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
@@ -192,7 +192,7 @@ async function saveAs() {
 	});
 	if (canceled) return;
 
-	theme.value.id = genId();
+	theme.value.id = uuid();
 	theme.value.name = name;
 	theme.value.author = `@${$i.username}@${toUnicode(host)}`;
 	if (description.value) theme.value.desc = description.value;

packages/frontend/src/plugin.ts

@@ -6,7 +6,7 @@
 import { ref, defineAsyncComponent } from 'vue';
 import { Interpreter, Parser, utils, values } from '@syuilo/aiscript';
 import { compareVersions } from 'compare-versions';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import * as Misskey from 'misskey-js';
 import { aiScriptReadline, createAiScriptEnv } from '@/aiscript/api.js';
 import { store } from '@/store.js';
@@ -135,7 +135,7 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
 		throw new Error('Plugin already installed');
 	}
 
-	const installId = genId();
+	const installId = uuid();
 
 	const plugin = {
 		...realMeta,

packages/frontend/src/pref-migrate.ts

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { v4 as uuid } from 'uuid';
 import type { DeckProfile } from '@/deck.js';
-import { genId } from '@/utility/id.js';
 import { ColdDeviceStorage, store } from '@/store.js';
 import { prefer } from '@/preferences.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -42,7 +42,7 @@ export function migrateOldSettings() {
 					key: key,
 				});
 				profiles.push({
-					id: genId(),
+					id: uuid(),
 					name: key,
 					columns: deck.columns,
 					layout: deck.layout,

packages/frontend/src/preferences/def.ts

@@ -5,13 +5,13 @@
 
 import * as Misskey from 'misskey-js';
 import { hemisphere } from '@@/js/intl-const.js';
+import { v4 as uuid } from 'uuid';
 import { definePreferences } from './manager.js';
 import type { Theme } from '@/theme.js';
 import type { SoundType } from '@/utility/sound.js';
 import type { Plugin } from '@/plugin.js';
 import type { DeviceKind } from '@/utility/device-kind.js';
 import type { DeckProfile } from '@/deck.js';
-import { genId } from '@/utility/id.js';
 import { DEFAULT_DEVICE_KIND } from '@/utility/device-kind.js';
 import { deepEqual } from '@/utility/deep-equal.js';
 
@@ -53,13 +53,13 @@ export const PREF_DEF = definePreferences({
 		accountDependent: true,
 		default: () => [{
 			name: 'calendar',
-			id: genId(), place: 'right', data: {},
+			id: uuid(), place: 'right', data: {},
 		}, {
 			name: 'notifications',
-			id: genId(), place: 'right', data: {},
+			id: uuid(), place: 'right', data: {},
 		}, {
 			name: 'trends',
-			id: genId(), place: 'right', data: {},
+			id: uuid(), place: 'right', data: {},
 		}] as {
 			name: string;
 			id: string;
@@ -79,7 +79,7 @@ export const PREF_DEF = definePreferences({
 	emojiPalettes: {
 		serverDependent: true,
 		default: () => [{
-			id: genId(),
+			id: uuid(),
 			name: '',
 			emojis: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
 		}] as {

packages/frontend/src/preferences/manager.ts

@@ -4,11 +4,11 @@
  */
 
 import { computed, onUnmounted, ref, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
 import { host, version } from '@@/js/config.js';
 import { PREF_DEF } from './def.js';
 import type { Ref, WritableComputedRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
-import { genId } from '@/utility/id.js';
 import { $i } from '@/i.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
@@ -301,7 +301,7 @@ export class PreferencesManager {
 			}
 		}
 		return {
-			id: genId(),
+			id: uuid(),
 			version: version,
 			type: 'main',
 			modifiedAt: Date.now(),

packages/frontend/src/tab-id.ts

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 
 // HMR有効時にバグか知らんけど複数回実行されるのでその対策
-export const TAB_ID = window.sessionStorage.getItem('TAB_ID') ?? genId();
+export const TAB_ID = window.sessionStorage.getItem('TAB_ID') ?? uuid();
 window.sessionStorage.setItem('TAB_ID', TAB_ID);
 if (_DEV_) console.log('TAB_ID', TAB_ID);

packages/frontend/src/ui/deck.vue

@@ -81,7 +81,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, useTemplateRef } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XNavbarH from '@/ui/_common_/navbar-h.vue';
@@ -169,7 +169,7 @@ const addColumn = async (ev) => {
 
 	addColumnToStore({
 		type: column,
-		id: genId(),
+		id: uuid(),
 		name: null,
 		width: 330,
 		soundSetting: { type: null, volume: 1 },

packages/frontend/src/utility/drive.ts

@@ -15,7 +15,6 @@ import { $i } from '@/i.js';
 import { instance } from '@/instance.js';
 import { globalEvents } from '@/events.js';
 import { getProxiedImageUrl } from '@/utility/media-proxy.js';
-import { genId } from '@/utility/id.js';
 
 type UploadReturnType = {
 	filePromise: Promise<Misskey.entities.DriveFile>;
@@ -196,7 +195,7 @@ export function chooseFileFromUrl(): Promise<Misskey.entities.DriveFile> {
 		}).then(({ canceled, result: url }) => {
 			if (canceled) return;
 
-			const marker = genId();
+			const marker = Math.random().toString(); // TODO: UUIDとか使う
 
 			// TODO: no websocketモード対応
 			const connection = useStream().useChannel('main');

packages/frontend/src/utility/get-embed-code.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { defineAsyncComponent } from 'vue';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 import { url } from '@@/js/config.js';
 import { defaultEmbedParams, embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbedParams, EmbeddableEntity } from '@@/js/embed-page.js';
@@ -44,7 +44,7 @@ export function normalizeEmbedParams(params: EmbedParams): Record<string, string
  * 埋め込みコードを生成（iframe IDの発番もやる）
  */
 export function getEmbedCode(path: string, params?: EmbedParams): string {
-	const iframeId = 'v1_' + genId(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく
+	const iframeId = 'v1_' + uuid(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく
 
 	let paramString = '';
 	if (params) {

packages/frontend/src/utility/id.ts

@@ -1,25 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-// ランダムな文字列が生成できればなんでも良い(時系列でソートできるなら尚良)が、とりあえずaidの実装を拝借
-
-const TIME2000 = 946684800000;
-let counter = Math.floor(Math.random() * 10000);
-
-function getTime(time: number): string {
-	time = time - TIME2000;
-	if (time < 0) time = 0;
-
-	return time.toString(36).padStart(8, '0');
-}
-
-function getNoise(): string {
-	return counter.toString(36).padStart(2, '0').slice(-2);
-}
-
-export function genId(): string {
-	counter++;
-	return getTime(Date.now()) + getNoise();
-}

packages/frontend/src/utility/theme-editor.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 
 import type { Theme } from '@/theme.js';
 import { themeProps } from '@/theme.js';
@@ -66,7 +66,7 @@ export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: st
 	}
 
 	return {
-		id: genId(),
+		id: uuid(),
 		name, desc, author, props, base,
 	};
 };

packages/frontend/src/widgets/WidgetAiscript.vue

@@ -29,7 +29,6 @@ import MkContainer from '@/components/MkContainer.vue';
 import { aiScriptReadline, createAiScriptEnv } from '@/aiscript/api.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
-import { genId } from '@/utility/id.js';
 
 const name = 'aiscript';
 
@@ -74,7 +73,7 @@ const run = async () => {
 		in: aiScriptReadline,
 		out: (value) => {
 			logs.value.push({
-				id: genId(),
+				id: Math.random().toString(),
 				text: value.type === 'str' ? value.value : utils.valToString(value),
 				print: true,
 			});
@@ -82,7 +81,7 @@ const run = async () => {
 		log: (type, params) => {
 			switch (type) {
 				case 'end': logs.value.push({
-					id: genId(),
+					id: Math.random().toString(),
 					text: utils.valToString(params.val, true),
 					print: false,
 				}); break;

packages/frontend/src/widgets/WidgetJobQueue.vue

@@ -60,7 +60,6 @@ import kmg from '@/filters/kmg.js';
 import * as sound from '@/utility/sound.js';
 import { deepClone } from '@/utility/clone.js';
 import { prefer } from '@/preferences.js';
-import { genId } from '@/utility/id.js';
 
 const name = 'jobQueue';
 
@@ -145,7 +144,7 @@ connection.on('stats', onStats);
 connection.on('statsLog', onStatsLog);
 
 connection.send('requestLog', {
-	id: genId(),
+	id: Math.random().toString().substring(2, 10),
 	length: 1,
 });
 

packages/frontend/src/widgets/server-metric/cpu-mem.vue

@@ -77,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { genId } from '@/utility/id.js';
+import { v4 as uuid } from 'uuid';
 
 const props = defineProps<{
 	connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
@@ -87,10 +87,10 @@ const props = defineProps<{
 const viewBoxX = ref<number>(50);
 const viewBoxY = ref<number>(30);
 const stats = ref<Misskey.entities.ServerStats[]>([]);
-const cpuGradientId = genId();
-const cpuMaskId = genId();
-const memGradientId = genId();
-const memMaskId = genId();
+const cpuGradientId = uuid();
+const cpuMaskId = uuid();
+const memGradientId = uuid();
+const memMaskId = uuid();
 const cpuPolylinePoints = ref<string>('');
 const memPolylinePoints = ref<string>('');
 const cpuPolygonPoints = ref<string>('');
@@ -106,7 +106,7 @@ onMounted(() => {
 	props.connection.on('stats', onStats);
 	props.connection.on('statsLog', onStatsLog);
 	props.connection.send('requestLog', {
-		id: genId(),
+		id: Math.random().toString().substring(2, 10),
 		length: 50,
 	});
 });

packages/frontend/src/widgets/server-metric/net.vue

@@ -52,7 +52,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import bytes from '@/filters/bytes.js';
-import { genId } from '@/utility/id.js';
 
 const props = defineProps<{
 	connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
@@ -77,7 +76,7 @@ onMounted(() => {
 	props.connection.on('stats', onStats);
 	props.connection.on('statsLog', onStatsLog);
 	props.connection.send('requestLog', {
-		id: genId(),
+		id: Math.random().toString().substring(2, 10),
 		length: 50,
 	});
 });

pnpm-lock.yaml

@@ -866,6 +866,9 @@ importers:
       typescript:
         specifier: 5.8.3
         version: 5.8.3
+      uuid:
+        specifier: 11.1.0
+        version: 11.1.0
       v-code-diff:
         specifier: 1.13.1
         version: 1.13.1(vue@3.5.16(typescript@5.8.3))
@@ -21865,7 +21868,7 @@ snapshots:
 
   tsx@4.19.4:
     dependencies:
-      esbuild: 0.25.5
+      esbuild: 0.25.4
       get-tsconfig: 4.10.1
     optionalDependencies:
       fsevents: 2.3.3