Merge branch 'develop' into feature/role-hidden-setting

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

.github/scripts/backend-diagnostics.render-md.mts

@@ -111,7 +111,7 @@ function renderHeapSnapshotSection(base: MemoryReport, head: MemoryReport) {
 
 	for (const graph of [
 		//heapSnapshotUtil.renderHeapSnapshotSankey(baseHeapSnapshotReport, 'Base'),
-		heapSnapshotUtil.renderHeapSnapshotSankey(headHeapSnapshotReport, 'Head'),
+		//heapSnapshotUtil.renderHeapSnapshotSankey(headHeapSnapshotReport, 'Head'),
 	]) {
 		if (graph == null) continue;
 		lines.push(graph);
@@ -149,7 +149,7 @@ if (heapSnapshotSection != null) {
 
 const baseHeapSnapshotArtifactUrl = process.env.MK_MEMORY_HEAP_SNAPSHOT_ARTIFACT_URL_BASE!.trim();
 const headHeapSnapshotArtifactUrl = process.env.MK_MEMORY_HEAP_SNAPSHOT_ARTIFACT_URL_HEAD!.trim();
-lines.push(`You can download the representative heap snapshot: [base](${baseHeapSnapshotArtifactUrl}) / [head](${headHeapSnapshotArtifactUrl})`);
+lines.push(`Download representative heap snapshot: [base](${baseHeapSnapshotArtifactUrl}) / [head](${headHeapSnapshotArtifactUrl})`);
 lines.push('');
 
 function getDiffPercent(base: MemoryReport, head: MemoryReport, phase: typeof memoryReportPhases[number]['key'], metric: typeof memoryMetrics[number]) {

.github/scripts/frontend-browser-diagnostics.render-md.mts

@@ -91,50 +91,14 @@ export type BrowserMetricsReport = {
 	samples: BrowserMeasurementSample[];
 };
 
-function escapeCell(value: string) {
-	return String(value).replaceAll('|', '\\|').replaceAll('\n', '<br>');
-}
-
-function truncate(value: string, maxLength = 140) {
-	if (value.length <= maxLength) return value;
-	return `${value.slice(0, maxLength - 3)}...`;
-}
-
-function formatMs(value: number | null | undefined) {
-	if (value == null || !Number.isFinite(value)) return '-';
-	if (value >= 1_000) return `${util.formatNumber(value / 1_000)} s`;
-	return `${util.formatNumber(value)} ms`;
-}
-
-function formatSecondsAsMs(value: number | null | undefined) {
-	if (value == null || !Number.isFinite(value)) return '-';
-	return formatMs(value * 1_000);
-}
-
-function formatDelta(delta: number, formatter: (value: number) => string, colorThreshold = 0) {
-	if (delta === 0) return formatter(0);
-	return util.formatColoredDelta(delta, v => formatter(v), colorThreshold);
-}
-
-function finiteValues(values: (number | null | undefined)[]) {
-	return values.filter(value => Number.isFinite(value)) as number[];
-}
-
-function sampleSpread(report: BrowserMetricsReport, getValue: (sample: BrowserMeasurementSample) => number | null | undefined) {
-	const values = finiteValues(report.samples.map(sample => getValue(sample)));
-	if (values.length < 2) return null;
-
-	const center = util.median(values);
-	return util.median(values.map(value => Math.abs(value - center)));
-}
-
 function formatValueWithSpread(report: BrowserMetricsReport, value: number, getSampleValue: (sample: BrowserMeasurementSample) => number | null | undefined, formatter: (value: number) => string) {
-	const spread = sampleSpread(report, getSampleValue);
+	const values = report.samples.map(sample => getSampleValue(sample)).filter(v => Number.isFinite(v)) as number[];
+	const spread = values.length < 2 ? null : util.median(values.map(value => Math.abs(value - util.median(values))));
 	if (spread == null) return formatter(value);
 	return `${formatter(value)}<br>± ${formatter(spread)}`;
 }
 
-function metricRow(
+function renderMetricRow(
 	label: string,
 	base: BrowserMetricsReport,
 	head: BrowserMetricsReport,
@@ -153,11 +117,11 @@ function metricRow(
 	if (skipIfNotSignificant && (Math.abs(summary.median) < significantThreshold)) return null;
 
 	const percent = baseValue === 0 ? null : summary.median * 100 / baseValue;
-	//const deltaMedian = `${formatDelta(summary.median, formatter, colorThreshold)}<br>${percent == null ? '-' : util.formatDeltaPercent(percent, 0.1).replaceAll('\\%', '\\\\%')}`;
-	const deltaMedian = formatDelta(summary.median, formatter, significantThreshold);
+	//const deltaMedian = `${util.formatColoredDelta(summary.median, formatter, colorThreshold)}<br>${percent == null ? '-' : util.formatDeltaPercent(percent, 0.1).replaceAll('\\%', '\\\\%')}`;
+	const deltaMedian = util.formatColoredDelta(summary.median, formatter, significantThreshold);
 
-	//return `| **${label}** | ${formatValueWithSpread(base, baseValue, getSampleValue, formatter)} | ${formatValueWithSpread(head, headValue, getSampleValue, formatter)} | ${deltaMedian} | ${summary == null ? '-' : formatter(summary.mad)} | ${summary == null ? '-' : formatDelta(summary.min, formatter)} | ${summary == null ? '-' : formatDelta(summary.max, formatter)} |`;
-	return `| **${label}** | ${formatter(baseValue)} | ${formatter(headValue)} | ${deltaMedian} | ${summary == null ? '-' : formatter(summary.mad)} | ${summary == null ? '-' : formatDelta(summary.min, formatter, significantThreshold)} | ${summary == null ? '-' : formatDelta(summary.max, formatter, significantThreshold)} |`;
+	//return `| **${label}** | ${formatValueWithSpread(base, baseValue, getSampleValue, formatter)} | ${formatValueWithSpread(head, headValue, getSampleValue, formatter)} | ${deltaMedian} | ${summary == null ? '-' : formatter(summary.mad)} | ${summary == null ? '-' : util.formatColoredDelta(summary.min, formatter)} | ${summary == null ? '-' : util.formatColoredDelta(summary.max, formatter)} |`;
+	return `| **${label}** | ${formatter(baseValue)} | ${formatter(headValue)} | ${deltaMedian} | ${summary == null ? '-' : formatter(summary.mad)} | ${summary == null ? '-' : util.formatColoredDelta(summary.min, formatter, significantThreshold)} | ${summary == null ? '-' : util.formatColoredDelta(summary.max, formatter, significantThreshold)} |`;
 }
 
 function resourceTypeBytes(report: BrowserMeasurement, resourceTypes: string[]) {
@@ -168,29 +132,29 @@ function resourceTypeSampleBytes(sample: BrowserMeasurementSample, resourceTypes
 	return resourceTypeBytes(sample, resourceTypes);
 }
 
-function getMetric(report: BrowserMeasurement, key: string) {
-	return report.performance.cdpMetrics[key];
-}
-
 function renderSummaryTable(base: BrowserMetricsReport, head: BrowserMetricsReport, all = false) {
+	//function getMetric(report: BrowserMeasurement, key: string) {
+	//	return report.performance.cdpMetrics[key];
+	//}
+
 	const rows = [
-		//metricRow('Scenario duration', base, head, summary => summary.durationMs, sample => sample.durationMs, formatMs),
-		metricRow('Requests', base, head, summary => summary.network.requestCount, sample => sample.network.requestCount, util.formatNumber, 1, !all),
+		//metricRow('Scenario duration', base, head, summary => summary.durationMs, sample => sample.durationMs, util.formatMs),
+		renderMetricRow('Requests', base, head, summary => summary.network.requestCount, sample => sample.network.requestCount, util.formatNumber, 1, !all),
 		//metricRow('Failed requests', base, head, summary => summary.network.failedRequestCount, sample => sample.network.failedRequestCount, util.formatNumber),
-		metricRow('Encoded network', base, head, summary => summary.network.totalEncodedBytes, sample => sample.network.totalEncodedBytes, util.formatBytes, 10000, !all),
-		metricRow('Decoded body', base, head, summary => summary.network.totalDecodedBodyBytes, sample => sample.network.totalDecodedBodyBytes, util.formatBytes, 10000, !all),
-		metricRow('Same-origin encoded', base, head, summary => summary.network.sameOriginEncodedBytes, sample => sample.network.sameOriginEncodedBytes, util.formatBytes, 10000, !all),
-		metricRow('Third-party encoded', base, head, summary => summary.network.thirdPartyEncodedBytes, sample => sample.network.thirdPartyEncodedBytes, util.formatBytes, 10000, !all),
-		metricRow('Script encoded', base, head, summary => resourceTypeBytes(summary, ['Script']), sample => resourceTypeSampleBytes(sample, ['Script']), util.formatBytes, 10000, !all),
-		metricRow('Stylesheet encoded', base, head, summary => resourceTypeBytes(summary, ['Stylesheet']), sample => resourceTypeSampleBytes(sample, ['Stylesheet']), util.formatBytes, 10000, !all),
-		metricRow('Fetch/XHR encoded', base, head, summary => resourceTypeBytes(summary, ['Fetch', 'XHR']), sample => resourceTypeSampleBytes(sample, ['Fetch', 'XHR']), util.formatBytes, 10000, !all),
-		metricRow('Image encoded', base, head, summary => resourceTypeBytes(summary, ['Image']), sample => resourceTypeSampleBytes(sample, ['Image']), util.formatBytes, 10000, !all),
-		metricRow('Font encoded', base, head, summary => resourceTypeBytes(summary, ['Font']), sample => resourceTypeSampleBytes(sample, ['Font']), util.formatBytes, 10000, !all),
-		//metricRow('First contentful paint', base, head, summary => summary.performance.webVitals.firstContentfulPaintMs, sample => sample.performance.webVitals.firstContentfulPaintMs, formatMs),
-		//metricRow('Load event end', base, head, summary => summary.performance.webVitals.loadEventEndMs, sample => sample.performance.webVitals.loadEventEndMs, formatMs),
+		renderMetricRow('Encoded network', base, head, summary => summary.network.totalEncodedBytes, sample => sample.network.totalEncodedBytes, util.formatBytes, 10000, !all),
+		renderMetricRow('Decoded body', base, head, summary => summary.network.totalDecodedBodyBytes, sample => sample.network.totalDecodedBodyBytes, util.formatBytes, 10000, !all),
+		renderMetricRow('Same-origin encoded', base, head, summary => summary.network.sameOriginEncodedBytes, sample => sample.network.sameOriginEncodedBytes, util.formatBytes, 10000, !all),
+		renderMetricRow('Third-party encoded', base, head, summary => summary.network.thirdPartyEncodedBytes, sample => sample.network.thirdPartyEncodedBytes, util.formatBytes, 10000, !all),
+		renderMetricRow('Script encoded', base, head, summary => resourceTypeBytes(summary, ['Script']), sample => resourceTypeSampleBytes(sample, ['Script']), util.formatBytes, 10000, !all),
+		renderMetricRow('Stylesheet encoded', base, head, summary => resourceTypeBytes(summary, ['Stylesheet']), sample => resourceTypeSampleBytes(sample, ['Stylesheet']), util.formatBytes, 10000, !all),
+		renderMetricRow('Fetch/XHR encoded', base, head, summary => resourceTypeBytes(summary, ['Fetch', 'XHR']), sample => resourceTypeSampleBytes(sample, ['Fetch', 'XHR']), util.formatBytes, 10000, !all),
+		renderMetricRow('Image encoded', base, head, summary => resourceTypeBytes(summary, ['Image']), sample => resourceTypeSampleBytes(sample, ['Image']), util.formatBytes, 10000, !all),
+		renderMetricRow('Font encoded', base, head, summary => resourceTypeBytes(summary, ['Font']), sample => resourceTypeSampleBytes(sample, ['Font']), util.formatBytes, 10000, !all),
+		//metricRow('First contentful paint', base, head, summary => summary.performance.webVitals.firstContentfulPaintMs, sample => sample.performance.webVitals.firstContentfulPaintMs, util.formatMs),
+		//metricRow('Load event end', base, head, summary => summary.performance.webVitals.loadEventEndMs, sample => sample.performance.webVitals.loadEventEndMs, util.formatMs),
 		//metricRow('Long tasks', base, head, summary => summary.performance.webVitals.longTaskCount, sample => sample.performance.webVitals.longTaskCount, util.formatNumber),
-		//metricRow('Long task duration', base, head, summary => summary.performance.webVitals.longTaskDurationMs, sample => sample.performance.webVitals.longTaskDurationMs, formatMs),
-		//metricRow('Max long task', base, head, summary => summary.performance.webVitals.maxLongTaskDurationMs, sample => sample.performance.webVitals.maxLongTaskDurationMs, formatMs),
+		//metricRow('Long task duration', base, head, summary => summary.performance.webVitals.longTaskDurationMs, sample => sample.performance.webVitals.longTaskDurationMs, util.formatMs),
+		//metricRow('Max long task', base, head, summary => summary.performance.webVitals.maxLongTaskDurationMs, sample => sample.performance.webVitals.maxLongTaskDurationMs, util.formatMs),
 		//metricRow('JS heap used', base, head, summary => summary.performance.runtimeHeap?.usedSize ?? getMetric(summary, 'JSHeapUsedSize'), sample => sample.performance.runtimeHeap?.usedSize ?? getMetric(sample, 'JSHeapUsedSize'), util.formatBytes),
 		//metricRow('JS heap total', base, head, summary => summary.performance.runtimeHeap?.totalSize ?? getMetric(summary, 'JSHeapTotalSize'), sample => sample.performance.runtimeHeap?.totalSize ?? getMetric(sample, 'JSHeapTotalSize'), util.formatBytes),
 		//metricRow('V8 heap snapshot total', base, head, summary => summary.heapSnapshot.categories.total, sample => sample.heapSnapshot.categories.total, util.formatBytes, 10000),
@@ -199,17 +163,17 @@ function renderSummaryTable(base: BrowserMetricsReport, head: BrowserMetricsRepo
 		//metricRow('JS event listeners', base, head, summary => getMetric(summary, 'JSEventListeners'), sample => getMetric(sample, 'JSEventListeners'), util.formatNumber),
 		//metricRow('Layout count', base, head, summary => getMetric(summary, 'LayoutCount'), sample => getMetric(sample, 'LayoutCount'), util.formatNumber),
 		//metricRow('Recalc style count', base, head, summary => getMetric(summary, 'RecalcStyleCount'), sample => getMetric(sample, 'RecalcStyleCount'), util.formatNumber),
-		//metricRow('Script duration', base, head, summary => getMetric(summary, 'ScriptDuration'), sample => getMetric(sample, 'ScriptDuration'), formatSecondsAsMs),
-		//metricRow('Task duration', base, head, summary => getMetric(summary, 'TaskDuration'), sample => getMetric(sample, 'TaskDuration'), formatSecondsAsMs),
-		metricRow('WebSocket connections', base, head, summary => summary.network.webSocketConnectionCount, sample => sample.network.webSocketConnectionCount, util.formatNumber, 1, !all),
-		metricRow('WebSocket sent', base, head, summary => summary.network.webSocketSentBytes, sample => sample.network.webSocketSentBytes, util.formatBytes, 10000, !all),
-		metricRow('WebSocket received', base, head, summary => summary.network.webSocketReceivedBytes, sample => sample.network.webSocketReceivedBytes, util.formatBytes, 10000, !all),
-		metricRow('Page errors', base, head, summary => summary.diagnostics.pageErrorCount, sample => sample.diagnostics.pageErrorCount, util.formatNumber, 1, !all),
-		metricRow('Console log', base, head, summary => summary.diagnostics.console.log, sample => sample.diagnostics.console.log, util.formatNumber, 1, !all),
-		metricRow('Console warnings', base, head, summary => summary.diagnostics.console.warning, sample => sample.diagnostics.console.warning, util.formatNumber, 1, !all),
-		metricRow('Console errors', base, head, summary => summary.diagnostics.console.error, sample => sample.diagnostics.console.error, util.formatNumber, 1, !all),
-		metricRow('Console info', base, head, summary => summary.diagnostics.console.info, sample => sample.diagnostics.console.info, util.formatNumber, 1, !all),
-		metricRow('Page-attributed memory', base, head, summary => summary.performance.tabMemory.totalBytes, sample => sample.performance.tabMemory.totalBytes, util.formatBytes, 10000, !all),
+		//metricRow('Script duration', base, head, summary => getMetric(summary, 'ScriptDuration'), sample => getMetric(sample, 'ScriptDuration'), util.formatSecondsAsMs),
+		//metricRow('Task duration', base, head, summary => getMetric(summary, 'TaskDuration'), sample => getMetric(sample, 'TaskDuration'), util.formatSecondsAsMs),
+		renderMetricRow('WebSocket connections', base, head, summary => summary.network.webSocketConnectionCount, sample => sample.network.webSocketConnectionCount, util.formatNumber, 1, !all),
+		renderMetricRow('WebSocket sent', base, head, summary => summary.network.webSocketSentBytes, sample => sample.network.webSocketSentBytes, util.formatBytes, 10000, !all),
+		renderMetricRow('WebSocket received', base, head, summary => summary.network.webSocketReceivedBytes, sample => sample.network.webSocketReceivedBytes, util.formatBytes, 10000, !all),
+		renderMetricRow('Page errors', base, head, summary => summary.diagnostics.pageErrorCount, sample => sample.diagnostics.pageErrorCount, util.formatNumber, 1, !all),
+		renderMetricRow('Console log', base, head, summary => summary.diagnostics.console.log, sample => sample.diagnostics.console.log, util.formatNumber, 1, !all),
+		renderMetricRow('Console warnings', base, head, summary => summary.diagnostics.console.warning, sample => sample.diagnostics.console.warning, util.formatNumber, 1, !all),
+		renderMetricRow('Console errors', base, head, summary => summary.diagnostics.console.error, sample => sample.diagnostics.console.error, util.formatNumber, 1, !all),
+		renderMetricRow('Console info', base, head, summary => summary.diagnostics.console.info, sample => sample.diagnostics.console.info, util.formatNumber, 1, !all),
+		renderMetricRow('Page-attributed memory', base, head, summary => summary.performance.tabMemory.totalBytes, sample => sample.performance.tabMemory.totalBytes, util.formatBytes, 10000, !all),
 	].filter(row => row != null);
 
 	return [
@@ -254,10 +218,10 @@ function renderResourceTypeTable(base: BrowserMetricsReport, head: BrowserMetric
 		lines.push(`<td><b>${key}</b></td>`);
 		lines.push(`<td align="right">${util.formatNumber(baseRow.requests)}</td>`);
 		lines.push(`<td align="right">${util.formatNumber(headRow.requests)}</td>`);
-		lines.push(`<td align="right">${formatDelta(headRow.requests - baseRow.requests, util.formatNumber)}</td>`);
+		lines.push(`<td align="right">${util.formatColoredDelta(headRow.requests - baseRow.requests, util.formatNumber)}</td>`);
 		lines.push(`<td align="right">${util.formatBytes(baseRow.encodedBytes)}</td>`);
 		lines.push(`<td align="right">${util.formatBytes(headRow.encodedBytes)}</td>`);
-		lines.push(`<td align="right">${formatDelta(headRow.encodedBytes - baseRow.encodedBytes, util.formatBytes)}</td>`);
+		lines.push(`<td align="right">${util.formatColoredDelta(headRow.encodedBytes - baseRow.encodedBytes, util.formatBytes)}</td>`);
 		lines.push('</tr>');
 	}
 
@@ -267,42 +231,6 @@ function renderResourceTypeTable(base: BrowserMetricsReport, head: BrowserMetric
 	return lines.join('\n');
 }
 
-function renderLargestRequests(report: BrowserMetricsReport, title: string) {
-	if (report.summary.network.largestRequests.length === 0) return null;
-
-	const lines = [
-		`<details><summary>${title}</summary>`,
-		'',
-		'| Resource | Type | Status | Encoded | Decoded |',
-		'| --- | --- | ---: | ---: | ---: |',
-	];
-
-	for (const request of report.summary.network.largestRequests.slice(0, 10)) {
-		lines.push(`| \`${escapeCell(truncate(request.url))}\` | ${escapeCell(request.resourceType)} | ${request.status ?? '-'} | ${util.formatBytes(request.encodedBytes)} | ${util.formatBytes(request.decodedBodyBytes)} |`);
-	}
-
-	lines.push('', '</details>');
-	return lines.join('\n');
-}
-
-function renderFailedRequests(report: BrowserMetricsReport, title: string) {
-	if (report.summary.network.failedRequests.length === 0) return null;
-
-	const lines = [
-		`<details><summary>${title}</summary>`,
-		'',
-		'| Resource | Type | Status | Error |',
-		'| --- | --- | ---: | --- |',
-	];
-
-	for (const request of report.summary.network.failedRequests.slice(0, 20)) {
-		lines.push(`| \`${escapeCell(truncate(request.url))}\` | ${escapeCell(request.resourceType)} | ${request.status ?? '-'} | ${escapeCell(request.errorText ?? '')} |`);
-	}
-
-	lines.push('', '</details>');
-	return lines.join('\n');
-}
-
 function toHeapSnapshotReport(report: BrowserMetricsReport): HeapSnapshotReport {
 	return {
 		summary: report.summary.heapSnapshot,
@@ -341,22 +269,13 @@ function renderMd(base: BrowserMetricsReport, head: BrowserMetricsReport, option
 		'',
 		heapSnapshotTable ?? '_No V8 heap snapshot data._',
 		'',
-		heapSnapshotUtil.renderHeapSnapshotSankey(toHeapSnapshotReport(head), 'Head'),
-		'',
+		//heapSnapshotUtil.renderHeapSnapshotSankey(toHeapSnapshotReport(head), 'Head'),
+		//'',
 		`Download representative heap snapshot: [base](${options.baseHeapSnapshotUrl}) / [head](${options.headHeapSnapshotUrl})`,
 		'</details>',
 		'',
 	];
 
-	for (const section of [
-		//renderLargestRequests(head, 'Largest representative head requests'),
-		//renderFailedRequests(base, 'Failed representative base requests'),
-		//renderFailedRequests(head, 'Failed representative head requests'),
-	]) {
-		if (section == null) continue;
-		lines.push(section, '');
-	}
-
 	return lines.filter(line => line != null).join('\n').trimEnd() + '\n';
 }
 

.github/scripts/frontend-bundle-diagnostics.render-md.mts

@@ -7,37 +7,8 @@ import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import * as util from './utility.mts';
 
-const marker = '<!-- misskey-frontend-bundle-diagnostics -->';
-
 const locale = 'ja-JP';
 
-//function sharePercent(value, total) {
-//	if (total === 0) return '0%';
-//	return Math.round((value / total) * 100) + '%';
-//}
-
-function escapeCell(value: string) {
-	return String(value).replaceAll('|', '\\|').replaceAll('\n', '<br>');
-}
-
-//function tableCell(value) {
-//	return String(value).replaceAll('|', '\\|').replaceAll('\r', ' ').replaceAll('\n', ' ');
-//}
-
-//function code(value) {
-//	const sanitized = String(value).replaceAll('\r', ' ').replaceAll('\n', ' ');
-//	const backtickRuns = sanitized.match(/`+/g) ?? [];
-//	const fenceLength = Math.max(1, ...backtickRuns.map((run) => run.length + 1));
-//	const fence = '`'.repeat(fenceLength);
-//	const padding = sanitized.startsWith('`') || sanitized.endsWith('`') ? ' ' : '';
-//
-//	return `${fence}${padding}${sanitized}${padding}${fence}`;
-//}
-
-//function tableCode(value) {
-//	return tableCell(code(value));
-//}
-
 type Manifest = Record<string, { file?: string; src?: string; name?: string; isEntry?: boolean; imports?: string[] }>;
 
 const stableNamedChunks = new Set(['vue', 'i18n']);
@@ -462,11 +433,11 @@ function chunkMarkdownTable(
 	for (const row of rows) {
 		const chunkFile = chunkFileDisplay(row);
 		if (row.changeType === 'added') {
-			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(chunkFile)}\` </details> | ${util.formatBytes(row.beforeSize)} | ${util.formatBytes(row.afterSize)} | ${util.calcAndFormatDeltaBytes(row.beforeSize, row.afterSize, 1000)} | $\\color{orange}{\\text{( + )}}$ |`);
+			lines.push(`| <details><summary>\`${util.escapeMdTableCell(row.name)}\`</summary> \`${util.escapeMdTableCell(chunkFile)}\` </details> | ${util.formatBytes(row.beforeSize)} | ${util.formatBytes(row.afterSize)} | ${util.calcAndFormatDeltaBytes(row.beforeSize, row.afterSize, 1000)} | $\\color{orange}{\\text{( + )}}$ |`);
 		} else if (row.changeType === 'removed') {
-			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(chunkFile)}\` </details> | ${util.formatBytes(row.beforeSize)} | ${util.formatBytes(row.afterSize)} | ${util.calcAndFormatDeltaBytes(row.beforeSize, row.afterSize, 1000)} | $\\color{green}{\\text{( - )}}$ |`);
+			lines.push(`| <details><summary>\`${util.escapeMdTableCell(row.name)}\`</summary> \`${util.escapeMdTableCell(chunkFile)}\` </details> | ${util.formatBytes(row.beforeSize)} | ${util.formatBytes(row.afterSize)} | ${util.calcAndFormatDeltaBytes(row.beforeSize, row.afterSize, 1000)} | $\\color{green}{\\text{( - )}}$ |`);
 		} else {
-			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(chunkFile)}\` </details> | ${util.formatBytes(row.beforeSize)} | ${util.formatBytes(row.afterSize)} | ${util.calcAndFormatDeltaBytes(row.beforeSize, row.afterSize, 1000)} | ${util.calcAndFormatDeltaPercent(row.beforeSize, row.afterSize, 0.1).replaceAll('\\%', '\\\\%')} |`);
+			lines.push(`| <details><summary>\`${util.escapeMdTableCell(row.name)}\`</summary> \`${util.escapeMdTableCell(chunkFile)}\` </details> | ${util.formatBytes(row.beforeSize)} | ${util.formatBytes(row.afterSize)} | ${util.calcAndFormatDeltaBytes(row.beforeSize, row.afterSize, 1000)} | ${util.calcAndFormatDeltaPercent(row.beforeSize, row.afterSize, 0.1).replaceAll('\\%', '\\\\%')} |`);
 		}
 	}
 	if (hasGenerated) {
@@ -511,12 +482,8 @@ function renderFrontendChunkReport(before: Awaited<ReturnType<typeof collectRepo
 	};
 	const startupGenerated = generatedAggregate(beforeStartupChunks, afterStartupChunks);
 
-	//const largeRows = comparisonRows
-	//	.sort((a, b) => b.sortSize - a.sortSize || a.name.localeCompare(b.name))
-	//	.slice(0, 30);
-
 	return [
-		'<details open>',
+		'<details>',
 		`<summary>${formatChunkChangeSummary('Chunk size diff', diffSummary)}</summary>`,
 		'',
 		chunkMarkdownTable(diffRows, diffTotal, diffGenerated, diffOther),
@@ -532,57 +499,9 @@ function renderFrontendChunkReport(before: Awaited<ReturnType<typeof collectRepo
 		'',
 		'</details>',
 		'',
-		//'<details>',
-		//`<summary>Largest</summary>`,
-		//'',
-		//markdownTable(largeRows),
-		//'',
-		//'</details>',
-		//'',
 	].join('\n');
 }
 
-function renderFrontendBundleReport(before: ReturnType<typeof collectVisualizerReport>, after: ReturnType<typeof collectVisualizerReport>) {
-	const lines = [
-		...renderVisualizerSummaryTable(before, after),
-		'',
-		//'<details>',
-		//'<summary>Top 10</summary>',
-		//'',
-	];
-
-	/*
-	for (const row of after.hotModules.slice(0, 10)) {
-		lines.push(`- ${code(row.id)}: ${sharePercent(row.renderedLength, after.metrics.renderedLength)} (${formatBytes(row.renderedLength)})`);
-	}
-
-	lines.push(
-		'',
-		'</details>',
-	);
-
-	lines.push(
-		'',
-		'<details>',
-		'<summary>Hot Modules (Self Size)</summary>',
-		'',
-		'| Module | Bundles | Rendered | Share | Gzip | Brotli | Imports | Imported By |',
-		'|---|---:|---:|---:|---:|---:|---:|---:|',
-	);
-
-	for (const row of after.hotModules.slice(0, 15)) {
-		lines.push(`| ${tableCode(row.id)} | ${row.bundles} | ${formatBytes(row.renderedLength)} | ${sharePercent(row.renderedLength, after.metrics.renderedLength)} | ${formatBytes(row.gzipLength)} | ${formatBytes(row.brotliLength)} | ${row.importedCount} | ${row.importedByCount} |`);
-	}
-
-	lines.push(
-		'',
-		'</details>',
-	);
-	*/
-
-	return lines.join('\n');
-}
-
 const args = process.argv.slice(2);
 const [beforeDir, afterDir, beforeStatsFile, afterStatsFile, outFile] = args;
 const before = await collectReport(beforeDir);
@@ -594,15 +513,13 @@ const afterVisualizerReport = collectVisualizerReport(afterStats);
 const visualizerArtifactLink = `[Open treemap HTML](${process.env.FRONTEND_BUNDLE_REPORT_ARTIFACT_URL})`;
 
 const body = [
-	marker,
-	'',
 	`## 📦 Frontend Bundle Report`,
 	'',
 	renderFrontendChunkReport(before, after),
 	'',
 	'## Bundle Stats',
 	'',
-	renderFrontendBundleReport(beforeVisualizerReport, afterVisualizerReport),
+	renderVisualizerSummaryTable(beforeVisualizerReport, afterVisualizerReport),
 	'',
 	visualizerArtifactLink,
 ].join('\n');

.github/scripts/utility.mts

@@ -98,6 +98,21 @@ export function escapeLatex(text: string) {
 		.replaceAll('%', '\\%');
 }
 
+export function escapeMdTableCell(value: string) {
+	return String(value).replaceAll('|', '\\|').replaceAll('\n', '<br>');
+}
+
+export function formatMs(value: number | null | undefined) {
+	if (value == null || !Number.isFinite(value)) return '-';
+	if (value >= 1_000) return `${formatNumber(value / 1_000)} s`;
+	return `${formatNumber(value)} ms`;
+}
+
+export function formatSecondsAsMs(value: number | null | undefined) {
+	if (value == null || !Number.isFinite(value)) return '-';
+	return formatMs(value * 1_000);
+}
+
 export function formatColoredDelta(delta: number, text: (value: number) => string, colorThreshold = 0) {
 	if (delta === 0) return text(0);
 	const sign = delta > 0 ? '+' : '-';

CHANGELOG.md

@@ -14,6 +14,9 @@
 - バックエンドで画像処理に用いているライブラリ sharp のシステム要件の変更により、**SSE4.2 命令セットをサポートしていない x86_64 CPU では Misskey が正しく動作しなくなります**。仮想マシンに Misskey をデプロイしている場合や、古いハードウェアをお使いの場合は、アップデート前にお使いの環境をご確認ください。なお、ARM64 など x86_64 ではない環境においてはこの変更による影響はありません。
 
 ### General
+- Feat: 自分に表示する公開ロールとロールバッジをユーザー側で選べるように
+  - 必ず表示する必要があるロールを作成することもできます(既存のロールについてはすべて表示必須設定となります。必要に応じて設定を変更してください)
+  - 今後新規作成するロールのデフォルト値は表示必須設定なし（ユーザーが表示・非表示を選べる）となります。
 - Feat: コントロールパネルから二要素認証を解除できるように
 - Feat: 条件に一致したURLプレビューのサムネイルを隠すことができるように  
   (Based on https://github.com/MisskeyIO/misskey/pull/214)

locales/ja-JP.yml

@@ -2083,6 +2083,8 @@ _role:
   isConditionalRole: "これはコンディショナルロールです。"
   isPublic: "公開ロール"
   descriptionOfIsPublic: "ユーザーのプロフィールでこのロールが表示されます。"
+  isPublicDisplayRequired: "非表示を許可しない（常に表示）"
+  descriptionOfIsPublicDisplayRequired: "有効にすると、ユーザーはこの公開ロール/ロールバッジを非表示にできません。"
   options: "オプション"
   policies: "ポリシー"
   baseRole: "ベースロール"
@@ -3245,6 +3247,13 @@ _gridComponent:
     patternNotMatch: "この値は{pattern}のパターンに一致しません"
     notUnique: "この値は一意である必要があります"
 
+_roleDisplay:
+  title: "ロールの表示/非表示"
+  description: "自分に割り当てられているロールを確認したり、プロフィールやノート上で表示・公開するロールを選択したりできます。"
+  roleExplorableAlert: "このロールは、管理者により、{link}への表示とロールタイムラインの有効化が設定されています。プロフィール上で非表示にすることはできますが、あなたにこのロールが付与されていることが知られる可能性があります。"
+  displayToggle: "ロール/ロールバッジを表示する"
+  alwaysShownByAdmin: "管理者の設定により非表示にすることはできません。"
+
 _roleSelectDialog:
   notSelected: "選択されていません"
 

packages/backend/migration/1783059479536-RoleDisplayVisibility.js

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class RoleDisplayVisibility1783059479536 {
+    name = 'RoleDisplayVisibility1783059479536';
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "user" ADD "hiddenRoleIds" character varying(32) array NOT NULL DEFAULT '{}'`);
+        await queryRunner.query(`ALTER TABLE "role" ADD "isPublicDisplayRequired" boolean NOT NULL DEFAULT false`);
+
+        // 既存のロールについてはすべて強制表示とする（新規作成分についてはfalse）
+        await queryRunner.query(`UPDATE "role" SET "isPublicDisplayRequired" = true`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "role" DROP COLUMN "isPublicDisplayRequired"`);
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "hiddenRoleIds"`);
+    }
+}

packages/backend/src/core/RoleService.ts

@@ -676,6 +676,7 @@ export class RoleService implements OnApplicationShutdown, OnModuleInit {
 			target: values.target,
 			condFormula: values.condFormula,
 			isPublic: values.isPublic,
+			isPublicDisplayRequired: values.isPublicDisplayRequired ?? false,
 			isAdministrator: values.isAdministrator,
 			isModerator: values.isModerator,
 			isExplorable: values.isExplorable,

packages/backend/src/core/WebhookTestService.ts

@@ -55,6 +55,7 @@ function generateDummyUser(override?: Partial<MiUser>): MiUser {
 		makeNotesHiddenBefore: null,
 		chatScope: 'mutual',
 		emojis: [],
+		hiddenRoleIds: [],
 		score: 0,
 		host: null,
 		inbox: null,

packages/backend/src/core/entities/RoleEntityService.ts

@@ -64,6 +64,7 @@ export class RoleEntityService {
 			target: role.target,
 			condFormula: role.condFormula,
 			isPublic: role.isPublic,
+			isPublicDisplayRequired: role.isPublicDisplayRequired,
 			isAdministrator: role.isAdministrator,
 			isModerator: role.isModerator,
 			isExplorable: role.isExplorable,
@@ -83,5 +84,32 @@ export class RoleEntityService {
 	) {
 		return Promise.all(roles.map(x => this.pack(x, me)));
 	}
-}
 
+	@bindThis
+	public async packLite(
+		src: MiRole['id'] | MiRole,
+	): Promise<Packed<'RoleLite'>> {
+		const role = typeof src === 'object' ? src : await this.rolesRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: role.id,
+			name: role.name,
+			color: role.color,
+			iconUrl: role.iconUrl,
+			description: role.description,
+			isModerator: role.isModerator,
+			isAdministrator: role.isAdministrator,
+			asBadge: role.asBadge,
+			isPublicDisplayRequired: role.isPublicDisplayRequired,
+			isExplorable: role.isExplorable,
+			displayOrder: role.displayOrder,
+		};
+	}
+
+	@bindThis
+	public packLiteMany(
+		roles: (MiRole | MiRole['id'])[],
+	) {
+		return Promise.all(roles.map(x => this.packLite(x)));
+	}
+}

packages/backend/src/core/entities/UserEntityService.ts

@@ -14,6 +14,7 @@ import type { Packed } from '@/misc/json-schema.js';
 import type { Promiseable } from '@/misc/prelude/await-all.js';
 import { awaitAll } from '@/misc/prelude/await-all.js';
 import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
+import type { MiRole } from '@/models/Role.js';
 import type { MiLocalUser, MiPartialLocalUser, MiPartialRemoteUser, MiRemoteUser, MiUser } from '@/models/User.js';
 import {
 	birthdaySchema,
@@ -51,6 +52,7 @@ import { ChatService } from '@/core/ChatService.js';
 import type { OnModuleInit } from '@nestjs/common';
 import type { NoteEntityService } from './NoteEntityService.js';
 import type { PageEntityService } from './PageEntityService.js';
+import type { RoleEntityService } from './RoleEntityService.js';
 import { toArray } from '@/misc/prelude/array.js';
 
 const Ajv = _Ajv.default;
@@ -88,6 +90,7 @@ export class UserEntityService implements OnModuleInit {
 	private apPersonService: ApPersonService;
 	private noteEntityService: NoteEntityService;
 	private pageEntityService: PageEntityService;
+	private roleEntityService: RoleEntityService;
 	private customEmojiService: CustomEmojiService;
 	private announcementService: AnnouncementService;
 	private roleService: RoleService;
@@ -144,6 +147,7 @@ export class UserEntityService implements OnModuleInit {
 		this.apPersonService = this.moduleRef.get('ApPersonService');
 		this.noteEntityService = this.moduleRef.get('NoteEntityService');
 		this.pageEntityService = this.moduleRef.get('PageEntityService');
+		this.roleEntityService = this.moduleRef.get('RoleEntityService');
 		this.customEmojiService = this.moduleRef.get('CustomEmojiService');
 		this.announcementService = this.moduleRef.get('AnnouncementService');
 		this.roleService = this.moduleRef.get('RoleService');
@@ -402,6 +406,30 @@ export class UserEntityService implements OnModuleInit {
 		return `${this.config.url}/users/${userId}`;
 	}
 
+	@bindThis
+	private prepareRoles<T extends Pick<MiRole, 'id' | 'isPublic' | 'displayOrder' | 'isPublicDisplayRequired'>>(roles: T[], user: MiUser, iAmModerator: boolean, hideByUserPreference = true): T[] {
+		const hiddenRoleIds = new Set(user.hiddenRoleIds);
+		return roles.filter(role => (role.isPublic || iAmModerator) && (role.isPublicDisplayRequired || iAmModerator || !hideByUserPreference || !hiddenRoleIds.has(role.id))).sort((a, b) => b.displayOrder - a.displayOrder);
+	}
+
+	@bindThis
+	private sanitizeHiddenRoleIds(roles: Pick<MiRole, 'id' | 'isPublic' | 'isPublicDisplayRequired'>[], user: MiUser): MiRole['id'][] {
+		const hideableRoleIds = new Set(roles
+			.filter(role => role.isPublic && !role.isPublicDisplayRequired)
+			.map(role => role.id));
+		const sanitizedRoleIds: MiRole['id'][] = [];
+		const seenRoleIds = new Set<MiRole['id']>();
+
+		for (const roleId of user.hiddenRoleIds) {
+			if (!hideableRoleIds.has(roleId) || seenRoleIds.has(roleId)) continue;
+
+			sanitizedRoleIds.push(roleId);
+			seenRoleIds.add(roleId);
+		}
+
+		return sanitizedRoleIds;
+	}
+
 	public async pack<S extends 'MeDetailed' | 'UserDetailedNotMe' | 'UserDetailed' | 'UserLite' = 'UserLite'>(
 		src: MiUser['id'] | MiUser,
 		me?: { id: MiUser['id']; } | null | undefined,
@@ -425,6 +453,7 @@ export class UserEntityService implements OnModuleInit {
 		const meId = me ? me.id : null;
 		const isMe = meId === user.id;
 		const iAmModerator = me ? await this.roleService.isModerator(me as MiUser) : false;
+		const userRoles = isDetailed ? this.roleService.getUserRoles(user.id) : null;
 
 		const profile = isDetailed
 			? (opts.userProfile ?? await this.userProfilesRepository.findOneByOrFail({ userId: user.id }))
@@ -514,10 +543,9 @@ export class UserEntityService implements OnModuleInit {
 			emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
 			onlineStatus: this.getOnlineStatus(user),
 			// パフォーマンス上の理由で、明示的に設定しない場合はローカルユーザーのみ取得
-			badgeRoles: (this.meta.showRoleBadgesOfRemoteUsers || user.host == null) ? this.roleService.getUserBadgeRoles(user.id).then((rs) => rs
-				.filter((r) => r.isPublic || iAmModerator)
-				.sort((a, b) => b.displayOrder - a.displayOrder)
+			badgeRoles: (this.meta.showRoleBadgesOfRemoteUsers || user.host == null) ? this.roleService.getUserBadgeRoles(user.id).then((rs) => this.prepareRoles(rs, user, iAmModerator)
 				.map((r) => ({
+					id: r.id,
 					name: r.name,
 					iconUrl: r.iconUrl,
 					displayOrder: r.displayOrder,
@@ -560,16 +588,7 @@ export class UserEntityService implements OnModuleInit {
 				followingVisibility: profile!.followingVisibility,
 				chatScope: user.chatScope,
 				canChat: this.roleService.getUserPolicies(user.id).then(r => r.chatAvailability === 'available'),
-				roles: this.roleService.getUserRoles(user.id).then(roles => roles.filter(role => role.isPublic).sort((a, b) => b.displayOrder - a.displayOrder).map(role => ({
-					id: role.id,
-					name: role.name,
-					color: role.color,
-					iconUrl: role.iconUrl,
-					description: role.description,
-					isModerator: role.isModerator,
-					isAdministrator: role.isAdministrator,
-					displayOrder: role.displayOrder,
-				}))),
+				roles: userRoles!.then(roles => this.roleEntityService.packLiteMany(this.prepareRoles(roles, user, iAmModerator, !isMe))),
 				memo: memo,
 				moderationNote: iAmModerator ? (profile!.moderationNote ?? '') : undefined,
 			} : {}),
@@ -598,6 +617,7 @@ export class UserEntityService implements OnModuleInit {
 				preventAiLearning: profile!.preventAiLearning,
 				isExplorable: user.isExplorable,
 				isDeleted: user.isDeleted,
+				hiddenRoleIds: userRoles!.then(roles => this.sanitizeHiddenRoleIds(roles, user)),
 				twoFactorBackupCodesStock: profile?.twoFactorBackupSecret?.length === 5 ? 'full' : (profile?.twoFactorBackupSecret?.length ?? 0) > 0 ? 'partial' : 'none',
 				hideOnlineStatus: user.hideOnlineStatus,
 				hasUnreadSpecifiedNotes: false, // 後方互換性のため

packages/backend/src/models/Role.ts

@@ -227,6 +227,11 @@ export class MiRole {
 	})
 	public isPublic: boolean;
 
+	@Column('boolean', {
+		default: false,
+	})
+	public isPublicDisplayRequired: boolean;
+
 	// trueの場合ユーザー名の横にバッジとして表示
 	@Column('boolean', {
 		default: false,

packages/backend/src/models/User.ts

@@ -6,6 +6,7 @@
 import { Entity, Column, Index, OneToOne, JoinColumn, PrimaryColumn } from 'typeorm';
 import { id } from './util/id.js';
 import { MiDriveFile } from './DriveFile.js';
+import type { MiRole } from './Role.js';
 
 @Entity('user')
 @Index(['usernameLower', 'host'], { unique: true })
@@ -229,6 +230,11 @@ export class MiUser {
 	})
 	public emojis: string[];
 
+	@Column('varchar', {
+		length: 32, array: true, default: '{}',
+	})
+	public hiddenRoleIds: MiRole['id'][];
+
 	// チャットを許可する相手
 	// everyone: 誰からでも
 	// followers: フォロワーのみ

packages/backend/src/models/json-schema/role.ts

@@ -369,6 +369,21 @@ export const packedRoleLiteSchema = {
 			optional: false, nullable: false,
 			example: false,
 		},
+		asBadge: {
+			type: 'boolean',
+			optional: false, nullable: false,
+			example: false,
+		},
+		isPublicDisplayRequired: {
+			type: 'boolean',
+			optional: false, nullable: false,
+			example: false,
+		},
+		isExplorable: {
+			type: 'boolean',
+			optional: false, nullable: false,
+			example: false,
+		},
 		displayOrder: {
 			type: 'integer',
 			optional: false, nullable: false,
@@ -412,6 +427,11 @@ export const packedRoleSchema = {
 					optional: false, nullable: false,
 					example: false,
 				},
+				isPublicDisplayRequired: {
+					type: 'boolean',
+					optional: false, nullable: false,
+					example: false,
+				},
 				isExplorable: {
 					type: 'boolean',
 					optional: false, nullable: false,

packages/backend/src/models/json-schema/user.ts

@@ -176,6 +176,11 @@ export const packedUserLiteSchema = {
 				type: 'object',
 				nullable: false, optional: false,
 				properties: {
+					id: {
+						type: 'string',
+						nullable: false, optional: false,
+						format: 'id',
+					},
 					name: {
 						type: 'string',
 						nullable: false, optional: false,
@@ -511,6 +516,15 @@ export const packedMeDetailedOnlySchema = {
 			type: 'boolean',
 			nullable: false, optional: false,
 		},
+		hiddenRoleIds: {
+			type: 'array',
+			nullable: false, optional: false,
+			items: {
+				type: 'string',
+				nullable: false, optional: false,
+				format: 'id',
+			},
+		},
 		twoFactorBackupCodesStock: {
 			type: 'string',
 			enum: ['full', 'partial', 'none'],

packages/backend/src/server/api/endpoints/admin/roles/create.ts

@@ -32,6 +32,7 @@ export const paramDef = {
 		target: { type: 'string', enum: ['manual', 'conditional'] },
 		condFormula: { type: 'object' },
 		isPublic: { type: 'boolean' },
+		isPublicDisplayRequired: { type: 'boolean', default: false },
 		isModerator: { type: 'boolean' },
 		isAdministrator: { type: 'boolean' },
 		isExplorable: { type: 'boolean', default: false }, // optional for backward compatibility

packages/backend/src/server/api/endpoints/admin/roles/update.ts

@@ -37,6 +37,7 @@ export const paramDef = {
 		target: { type: 'string', enum: ['manual', 'conditional'] },
 		condFormula: { type: 'object' },
 		isPublic: { type: 'boolean' },
+		isPublicDisplayRequired: { type: 'boolean' },
 		isModerator: { type: 'boolean' },
 		isAdministrator: { type: 'boolean' },
 		isExplorable: { type: 'boolean' },
@@ -75,6 +76,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				target: ps.target,
 				condFormula: ps.condFormula,
 				isPublic: ps.isPublic,
+				isPublicDisplayRequired: ps.isPublicDisplayRequired,
 				isModerator: ps.isModerator,
 				isAdministrator: ps.isAdministrator,
 				isExplorable: ps.isExplorable,

packages/backend/src/server/api/endpoints/i/update.ts

@@ -191,6 +191,12 @@ export const paramDef = {
 		followingVisibility: { type: 'string', enum: ['public', 'followers', 'private'] },
 		followersVisibility: { type: 'string', enum: ['public', 'followers', 'private'] },
 		chatScope: { type: 'string', enum: ['everyone', 'followers', 'following', 'mutual', 'none'] },
+		hiddenRoleIds: {
+			type: 'array',
+			maxItems: 256,
+			uniqueItems: true,
+			items: { type: 'string', format: 'misskey:id' },
+		},
 		pinnedPageId: { type: 'string', format: 'misskey:id', nullable: true },
 		mutedWords: muteWords,
 		hardMutedWords: muteWords,
@@ -293,6 +299,20 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			if (ps.followingVisibility !== undefined) profileUpdates.followingVisibility = ps.followingVisibility;
 			if (ps.followersVisibility !== undefined) profileUpdates.followersVisibility = ps.followersVisibility;
 			if (ps.chatScope !== undefined) updates.chatScope = ps.chatScope;
+			if (ps.hiddenRoleIds !== undefined) {
+				const roles = await this.roleService.getUserRoles(user.id);
+				const allowedRoleIds = new Set(roles.filter(role => role.isPublic && !role.isPublicDisplayRequired).map(role => role.id));
+				const hiddenRoleIds: string[] = [];
+				const seenRoleIds = new Set<string>();
+
+				for (const roleId of ps.hiddenRoleIds) {
+					if (seenRoleIds.has(roleId) || !allowedRoleIds.has(roleId)) continue;
+					seenRoleIds.add(roleId);
+					hiddenRoleIds.push(roleId);
+				}
+
+				updates.hiddenRoleIds = hiddenRoleIds;
+			}
 
 			function checkMuteWordCount(mutedWords: (string[] | string)[], limit: number) {
 				const count = (arr: (string[] | string)[]) => {

packages/backend/test/e2e/users.ts

@@ -128,6 +128,7 @@ describe('ユーザー', () => {
 			preventAiLearning: user.preventAiLearning,
 			isExplorable: user.isExplorable,
 			isDeleted: user.isDeleted,
+			hiddenRoleIds: user.hiddenRoleIds ?? [],
 			twoFactorBackupCodesStock: user.twoFactorBackupCodesStock,
 			hideOnlineStatus: user.hideOnlineStatus,
 			hasUnreadSpecifiedNotes: user.hasUnreadSpecifiedNotes,
@@ -660,12 +661,16 @@ describe('ユーザー', () => {
 			description: rolePublic.description,
 			isModerator: rolePublic.isModerator,
 			isAdministrator: rolePublic.isAdministrator,
+			asBadge: rolePublic.asBadge,
+			isPublicDisplayRequired: rolePublic.isPublicDisplayRequired,
+			isExplorable: rolePublic.isExplorable,
 			displayOrder: rolePublic.displayOrder,
 		}]);
 	});
 	test('を取得することができ、バッヂロールがセットされていること', async () => {
 		const response = await successfulApiCall({ endpoint: 'users/show', parameters: { userId: userRoleBadge.id }, user: alice });
 		assert.deepStrictEqual(response.badgeRoles, [{
+			id: roleBadge.id,
 			name: roleBadge.name,
 			iconUrl: roleBadge.iconUrl,
 			displayOrder: roleBadge.displayOrder,
@@ -678,9 +683,42 @@ describe('ユーザー', () => {
 			description: roleBadge.description,
 			isModerator: roleBadge.isModerator,
 			isAdministrator: roleBadge.isAdministrator,
+			asBadge: roleBadge.asBadge,
+			isPublicDisplayRequired: roleBadge.isPublicDisplayRequired,
+			isExplorable: roleBadge.isExplorable,
 			displayOrder: roleBadge.displayOrder,
 		}]);
 	});
+	test('i/updateでhiddenRoleIdsが保存時に表示可能な割り当て済みロールだけへsanitizeされること', async () => {
+		const user = await signup({ username: 'userHiddenRoles' });
+		const visibleRole = await role(root, { isPublic: true, name: 'Hideable Role' });
+		const secondVisibleRole = await role(root, { isPublic: true, name: 'Second Hideable Role' });
+		const privateRole = await role(root, { isPublic: false, name: 'Private Role' });
+		const forcedRole = await role(root, { isPublic: true, isPublicDisplayRequired: true, name: 'Forced Role' });
+		const unassignedRole = await role(root, { isPublic: true, name: 'Unassigned Role' });
+
+		await api('admin/roles/assign', { userId: user.id, roleId: visibleRole.id }, root);
+		await api('admin/roles/assign', { userId: user.id, roleId: secondVisibleRole.id }, root);
+		await api('admin/roles/assign', { userId: user.id, roleId: privateRole.id }, root);
+		await api('admin/roles/assign', { userId: user.id, roleId: forcedRole.id }, root);
+
+		const response = await successfulApiCall({
+			endpoint: 'i/update',
+			parameters: {
+				hiddenRoleIds: [
+					secondVisibleRole.id,
+					'unknownroleid',
+					unassignedRole.id,
+					privateRole.id,
+					forcedRole.id,
+					visibleRole.id,
+				],
+			},
+			user,
+		});
+
+		assert.deepStrictEqual(response.hiddenRoleIds, [secondVisibleRole.id, visibleRole.id]);
+	});
 	test('をID指定のリスト形式で取得することができる（空）', async () => {
 		const parameters = { userIds: [] };
 		const response = await successfulApiCall({ endpoint: 'users/show', parameters, user: alice });

packages/backend/test/unit/entities/UserEntityService.ts

@@ -14,7 +14,10 @@ import { genAidx } from '@/misc/id/aidx.js';
 import {
 	BlockingsRepository,
 	FollowingsRepository, FollowRequestsRepository,
+	MiRole,
 	MiUserProfile, MutingsRepository, RenoteMutingsRepository,
+	RoleAssignmentsRepository,
+	RolesRepository,
 	UserMemoRepository,
 	UserProfilesRepository,
 	UsersRepository,
@@ -27,6 +30,7 @@ import { PageEntityService } from '@/core/entities/PageEntityService.js';
 import { CustomEmojiService } from '@/core/CustomEmojiService.js';
 import { AnnouncementService } from '@/core/AnnouncementService.js';
 import { RoleService } from '@/core/RoleService.js';
+import { RoleEntityService } from '@/core/entities/RoleEntityService.js';
 import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
 import { IdService } from '@/core/IdService.js';
 import { UtilityService } from '@/core/UtilityService.js';
@@ -67,6 +71,13 @@ describe('UserEntityService', () => {
 		let blockingRepository: BlockingsRepository;
 		let mutingRepository: MutingsRepository;
 		let renoteMutingsRepository: RenoteMutingsRepository;
+		let rolesRepository: RolesRepository;
+		let roleAssignmentsRepository: RoleAssignmentsRepository;
+		let roleService: RoleService;
+		type RoleServiceCacheController = {
+			rolesCache: { delete(): void };
+			roleAssignmentByUserIdCache: { delete(userId: MiUser['id']): void };
+		};
 
 		async function createUser(userData: Partial<MiUser> = {}, profileData: Partial<MiUserProfile> = {}) {
 			const un = secureRndstr(16);
@@ -87,6 +98,32 @@ describe('UserEntityService', () => {
 			return user;
 		}
 
+		async function createRole(roleData: Partial<MiRole> = {}) {
+			const role = await rolesRepository
+				.insert({
+					id: genAidx(Date.now()),
+					updatedAt: new Date(),
+					lastUsedAt: new Date(),
+					name: '',
+					description: '',
+					...roleData,
+				})
+				.then(x => rolesRepository.findOneByOrFail(x.identifiers[0]));
+
+			(roleService as unknown as RoleServiceCacheController).rolesCache.delete();
+			return role;
+		}
+
+		async function assignRole(user: MiUser, role: MiRole) {
+			await roleAssignmentsRepository.insert({
+				id: genAidx(Date.now()),
+				userId: user.id,
+				roleId: role.id,
+			});
+
+			(roleService as unknown as RoleServiceCacheController).roleAssignmentByUserIdCache.delete(user.id);
+		}
+
 		async function memo(writer: MiUser, target: MiUser, memo: string) {
 			await userMemosRepository.insert({
 				id: genAidx(Date.now()),
@@ -146,6 +183,7 @@ describe('UserEntityService', () => {
 				ApPersonService,
 				NoteEntityService,
 				PageEntityService,
+				RoleEntityService,
 				CustomEmojiService,
 				AnnouncementService,
 				RoleService,
@@ -196,6 +234,9 @@ describe('UserEntityService', () => {
 			blockingRepository = app.get<BlockingsRepository>(DI.blockingsRepository);
 			mutingRepository = app.get<MutingsRepository>(DI.mutingsRepository);
 			renoteMutingsRepository = app.get<RenoteMutingsRepository>(DI.renoteMutingsRepository);
+			rolesRepository = app.get<RolesRepository>(DI.rolesRepository);
+			roleAssignmentsRepository = app.get<RoleAssignmentsRepository>(DI.roleAssignmentsRepository);
+			roleService = app.get<RoleService>(RoleService);
 		});
 
 		afterAll(async () => {
@@ -249,6 +290,60 @@ describe('UserEntityService', () => {
 			expect(actual.achievements).toEqual(achievements);
 		});
 
+		test('MeDetailed hiddenRoleIds are sanitized to assigned public non-forced roles in stored order', async() => {
+			const me = await createUser();
+			const visibleRole = await createRole({ name: 'visible', isPublic: true });
+			const secondVisibleRole = await createRole({ name: 'visible2', isPublic: true });
+			const privateRole = await createRole({ name: 'private', isPublic: false });
+			const forcedRole = await createRole({ name: 'forced', isPublic: true, isPublicDisplayRequired: true });
+			const unassignedRole = await createRole({ name: 'unassigned', isPublic: true });
+
+			await assignRole(me, visibleRole);
+			await assignRole(me, secondVisibleRole);
+			await assignRole(me, privateRole);
+			await assignRole(me, forcedRole);
+			await usersRepository.update(me.id, {
+				hiddenRoleIds: [
+					secondVisibleRole.id,
+					'unknownroleid',
+					unassignedRole.id,
+					privateRole.id,
+					forcedRole.id,
+					visibleRole.id,
+					secondVisibleRole.id,
+				],
+			});
+			const updatedMe = await usersRepository.findOneByOrFail({ id: me.id });
+
+			const actual = await service.pack(updatedMe, updatedMe, { schema: 'MeDetailed' });
+
+			expect(actual.hiddenRoleIds).toEqual([secondVisibleRole.id, visibleRole.id]);
+		});
+
+		test('UserDetailed filters hidden display roles for normal viewers, preserves forced roles, and bypasses for moderators', async() => {
+			const [viewer, moderator, target] = await Promise.all([createUser(), createUser(), createUser()]);
+			const hiddenRole = await createRole({ name: 'hidden', isPublic: true, asBadge: true, displayOrder: 30 });
+			const visibleRole = await createRole({ name: 'visible', isPublic: true, asBadge: true, displayOrder: 20 });
+			const forcedRole = await createRole({ name: 'forced', isPublic: true, isPublicDisplayRequired: true, asBadge: true, displayOrder: 10 });
+			const moderatorRole = await createRole({ name: 'moderator', isModerator: true });
+
+			await assignRole(target, hiddenRole);
+			await assignRole(target, visibleRole);
+			await assignRole(target, forcedRole);
+			await assignRole(moderator, moderatorRole);
+			await usersRepository.update(target.id, { hiddenRoleIds: [hiddenRole.id, forcedRole.id] });
+			const updatedTarget = await usersRepository.findOneByOrFail({ id: target.id });
+
+			const normalView = await service.pack(updatedTarget, viewer, { schema: 'UserDetailed' });
+			const moderatorView = await service.pack(updatedTarget, moderator, { schema: 'UserDetailed' });
+
+			expect(normalView.roles.map(role => role.id)).toEqual([visibleRole.id, forcedRole.id]);
+			expect(normalView.badgeRoles?.map(role => role.id)).toEqual([visibleRole.id, forcedRole.id]);
+			expect(normalView.badgeRoles?.every(role => typeof role.id === 'string')).toBe(true);
+			expect(moderatorView.roles.map(role => role.id)).toEqual([hiddenRole.id, visibleRole.id, forcedRole.id]);
+			expect(moderatorView.badgeRoles?.map(role => role.id)).toEqual([hiddenRole.id, visibleRole.id, forcedRole.id]);
+		});
+
 		test('alsoKnownAs as string does not throw', async () => {
 			const me = await createUser();
 			const who = await createUser();

packages/frontend/.storybook/fakes.ts

@@ -357,6 +357,7 @@ export function role(params: {
 	isPublic?: boolean,
 	isExplorable?: boolean,
 	asBadge?: boolean,
+	isPublicDisplayRequired?: boolean,
 	canEditMembersByModerator?: boolean,
 	usersCount?: number,
 }, seed?: string): entities.Role {
@@ -380,6 +381,7 @@ export function role(params: {
 		isPublic: params.isPublic ?? true,
 		isExplorable: params.isExplorable ?? true,
 		asBadge: params.asBadge ?? true,
+		isPublicDisplayRequired: params.isPublicDisplayRequired ?? false,
 		canEditMembersByModerator: params.canEditMembersByModerator ?? false,
 		usersCount: params.usersCount ?? 10,
 		preserveAssignmentOnMoveAccount: false,

packages/frontend/src/components/MkNoteDetailed.vue

@@ -69,8 +69,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div :class="$style.noteHeaderUsername">
 							<MkAcct :user="appearNote.user"/>
 						</div>
-						<div v-if="appearNote.user.badgeRoles" :class="$style.noteHeaderBadgeRoles">
-							<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
+						<div v-if="badgeRoles" :class="$style.noteHeaderBadgeRoles">
+							<img v-for="role in badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
 						</div>
 					</div>
 					<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
@@ -251,6 +251,7 @@ import { Paginator } from '@/utility/paginator.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import number from '@/filters/number.js';
 import { DI } from '@/di.js';
+import { $i } from '@/i.js';
 import type { Keymap } from '@/utility/hotkey.js';
 
 // コンポーネント外部の依存関係
@@ -332,6 +333,14 @@ provide(DI.mfmEmojiReactCallback, reactViaMfmEmoji);
 // MkNoteDetailed固有
 const tab = ref(props.initialTab);
 const reactionTabType = ref<string | null>(null);
+const badgeRoles = computed(() => {
+	const roles = appearNote.user.badgeRoles;
+	if (roles == null || $i == null || $i.id !== appearNote.userId) return roles;
+
+	// 自分のノートを自分で見た場合レスポンスに非表示ロールも含まれるので、別途除外する必要がある
+	const hiddenRoleIds = new Set($i.hiddenRoleIds ?? []);
+	return roles.filter(role => !hiddenRoleIds.has(role.id));
+});
 
 const renotesPaginator = markRaw(new Paginator('notes/renotes', {
 	limit: 10,

packages/frontend/src/components/MkNoteHeader.vue

@@ -13,8 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkA>
 	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
 	<div :class="$style.username"><MkAcct :user="note.user"/></div>
-	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
-		<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
+	<div v-if="badgeRoles" :class="$style.badgeRoles">
+		<img v-for="role in badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
 	</div>
 	<div :class="$style.info">
 		<div v-if="mock">
@@ -35,17 +35,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 import * as Misskey from 'misskey-js';
+import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { DI } from '@/di.js';
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
+const badgeRoles = computed(() => {
+	const roles = props.note.user.badgeRoles;
+	if (roles == null || $i == null || $i.id !== props.note.userId) return roles;
+
+	// 自分のプロフィールを自分で見た場合レスポンスに非表示ロールも含まれるので、別途除外する必要がある
+	const hiddenRoleIds = new Set(($i.hiddenRoleIds) ?? []);
+	return roles.filter(role => !hiddenRoleIds.has(role.id));
+});
 const mock = inject(DI.mock, false);
 </script>
 

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

@@ -37,7 +37,7 @@ const props = defineProps<{
 	id?: string;
 }>();
 
-type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
+type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isPublicDisplayRequired' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
 	condFormula: any;
 	policies: any;
 };
@@ -62,6 +62,7 @@ if (props.id) {
 		target: 'manual',
 		condFormula: { id: genId(), type: 'isRemote' },
 		isPublic: false,
+		isPublicDisplayRequired: false,
 		isExplorable: false,
 		asBadge: false,
 		canEditMembersByModerator: false,

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

@@ -62,7 +62,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #caption>{{ i18n.ts._role.descriptionOfIsPublic }}</template>
 	</MkSwitch>
 
-	<MkSwitch v-model="role.asBadge" :readonly="readonly">
+	<MkSwitch v-model="role.isPublicDisplayRequired" :disabled="!role.isPublic" :readonly="readonly">
+		<template #label>{{ i18n.ts._role.isPublicDisplayRequired }}</template>
+		<template #caption>{{ i18n.ts._role.descriptionOfIsPublicDisplayRequired }}</template>
+	</MkSwitch>
+
+	<MkSwitch v-model="role.asBadge" :disabled="!role.isPublic" :readonly="readonly">
 		<template #label>{{ i18n.ts._role.asBadge }}</template>
 		<template #caption>{{ i18n.ts._role.descriptionOfAsBadge }}</template>
 	</MkSwitch>
@@ -110,7 +115,7 @@ import { instance } from '@/instance.js';
 import { deepClone } from '@/utility/clone.js';
 import type { PolicyMeta } from './roles.policy-editor.vue';
 
-type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
+type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isPublicDisplayRequired' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
 	id?: Misskey.entities.Role['id'] | null;
 	condFormula: any;
 	policies: any;
@@ -200,6 +205,7 @@ const save = throttle(100, () => {
 		isAdministrator: role.value.isAdministrator,
 		isModerator: role.value.isModerator,
 		isPublic: role.value.isPublic,
+		isPublicDisplayRequired: role.value.isPublicDisplayRequired,
 		isExplorable: role.value.isExplorable,
 		asBadge: role.value.asBadge,
 		canEditMembersByModerator: role.value.canEditMembersByModerator,

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

@@ -49,17 +49,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['roles']">
-				<MkFolder>
-					<template #icon><SearchIcon><i class="ti ti-badges"></i></SearchIcon></template>
-					<template #label><SearchLabel>{{ i18n.ts.rolesAssignedToMe }}</SearchLabel></template>
-
-					<div class="_gaps_s">
-						<MkRolePreview v-for="role in $i.roles" :key="role.id" :role="role" :forModeration="false"/>
-					</div>
-				</MkFolder>
-			</SearchMarker>
-
 			<SearchMarker :keywords="['account', 'move', 'migration']">
 				<MkFolder>
 					<template #icon><SearchIcon><i class="ti ti-plane"></i></SearchIcon></template>
@@ -126,8 +115,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<hr>
+		<div class="_gaps_s">
+			<!-- ページ移動したのでリンクを残してある。そのうち消しても良いかも -->
+			<FormLink to="/settings/roles">
+				<template #icon><i class="ti ti-badges"></i></template>
+				{{ i18n.ts.rolesAssignedToMe }}
+			</FormLink>
 
-		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+			<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+		</div>
 
 		<hr>
 
@@ -166,7 +162,6 @@ import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import FormSection from '@/components/form/section.vue';
 import { prefer } from '@/preferences.js';
-import MkRolePreview from '@/components/MkRolePreview.vue';
 import { signout } from '@/signout.js';
 import { hideAllTips as _hideAllTips, resetAllTips as _resetAllTips } from '@/tips.js';
 import { suggestReload } from '@/utility/reload-suggest.js';

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

@@ -72,6 +72,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSwitch>
 		</SearchMarker>
 
+		<FormLink to="/settings/roles">
+			<template #icon><i class="ti ti-badges"></i></template>
+			<SearchLabel>{{ i18n.ts._roleDisplay.title }}</SearchLabel>
+		</FormLink>
+
 		<SearchMarker :keywords="['chat']">
 			<FormSection>
 				<template #label><SearchLabel>{{ i18n.ts.directMessage }}</SearchLabel></template>
@@ -223,6 +228,7 @@ import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
 import { definePage } from '@/page.js';
 import FormSlot from '@/components/form/slot.vue';
+import FormLink from '@/components/form/link.vue';
 import { formatDateTimeString } from '@/utility/format-time-string.js';
 import { useMkSelect } from '@/composables/use-mkselect.js';
 import MkInput from '@/components/MkInput.vue';

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

@@ -0,0 +1,94 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<SearchMarker path="/settings/roles" :label="i18n.ts.roles" :keywords="['role', 'badge']" icon="ti ti-badges">
+	<div class="_gaps_m">
+		<MkFeatureBanner icon="/fluent-emoji/1f3f7.png" color="#ffbf00">
+			<SearchText>{{ i18n.ts._roleDisplay.description }}</SearchText>
+		</MkFeatureBanner>
+		<div class="_gaps_s">
+			<MkResult v-if="roleDisplayRoles.length === 0" type="empty"/>
+			<div v-for="role in roleDisplayRoles" :key="role.id" class="_panel _gaps" :class="$style.roleItem">
+				<MkRolePreview :role="role" :forModeration="false"/>
+				<MkSwitch
+					:modelValue="isRoleDisplayShown(role)"
+					:disabled="role.isPublicDisplayRequired"
+					@update:modelValue="value => updateRoleDisplay(role, value)"
+				>
+					<template #label>{{ i18n.ts._roleDisplay.displayToggle }}</template>
+					<template v-if="role.isPublicDisplayRequired" #caption>{{ i18n.ts._roleDisplay.alwaysShownByAdmin }}</template>
+					<template v-else-if="role.isExplorable" #caption>
+						<i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> <I18n :src="i18n.ts._roleDisplay.roleExplorableAlert">
+							<template #link>
+								<MkA class="_link" :to="`/roles/${role.id}`">{{ i18n.ts.explore }}</MkA>
+							</template>
+						</I18n>
+					</template>
+				</MkSwitch>
+			</div>
+		</div>
+	</div>
+</SearchMarker>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import type * as Misskey from 'misskey-js';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
+import MkRolePreview from '@/components/MkRolePreview.vue';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import { ensureSignin } from '@/i.js';
+import { definePage } from '@/page.js';
+import { updateCurrentAccount } from '@/accounts.js';
+
+const $i = ensureSignin();
+
+const hiddenRoleIds = ref([...getHiddenRoleIds($i)]);
+const roleDisplayRoles = computed(() => $i.roles);
+
+function getHiddenRoleIds(user: { hiddenRoleIds?: string[] }): string[] {
+	return user.hiddenRoleIds ?? [];
+}
+
+function isRoleDisplayShown(role: Misskey.entities.RoleLite): boolean {
+	return role.isPublicDisplayRequired === true || !hiddenRoleIds.value.includes(role.id);
+}
+
+async function updateRoleDisplay(role: Misskey.entities.RoleLite, visible: boolean) {
+	if (role.isPublicDisplayRequired === true) return;
+
+	const nextHiddenRoleIds = new Set(hiddenRoleIds.value);
+	if (visible) {
+		nextHiddenRoleIds.delete(role.id);
+	} else {
+		nextHiddenRoleIds.add(role.id);
+	}
+
+	const nextIds = roleDisplayRoles.value
+		.filter(role => role.isPublicDisplayRequired !== true && nextHiddenRoleIds.has(role.id))
+		.map(role => role.id);
+
+	const updated = await misskeyApi('i/update', {
+		hiddenRoleIds: nextIds,
+	});
+
+	updateCurrentAccount(updated);
+	hiddenRoleIds.value = [...getHiddenRoleIds(updated)];
+}
+
+definePage(() => ({
+	title: i18n.ts.roles,
+	icon: 'ti ti-badges',
+}));
+</script>
+
+<style lang="scss" module>
+.roleItem {
+	padding: 16px;
+}
+</style>

packages/frontend/src/pages/user/home.vue

@@ -53,8 +53,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div><MkSparkle><Mfm :plain="true" :text="user.followedMessage" :author="user" class="_selectable"/></MkSparkle></div>
 							</MkFukidashi>
 						</div>
-						<div v-if="user.roles.length > 0" class="roles">
-							<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color ?? '' }">
+						<div v-if="visibleProfileRoles.length > 0" class="roles">
+							<span v-for="role in visibleProfileRoles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color ?? '' }">
 								<MkA v-adaptive-bg :to="`/roles/${role.id}`">
 									<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
 									{{ role.name }}
@@ -222,6 +222,14 @@ const emit = defineEmits<{
 const router = useRouter();
 
 const user = ref(props.user);
+const visibleProfileRoles = computed(() => {
+	const roles = user.value.roles;
+	if ($i == null || $i.id !== user.value.id) return roles;
+
+	// 自分のプロフィールを自分で見た場合レスポンスに非表示ロールも含まれるので、別途除外する必要がある
+	const hiddenRoleIds = new Set($i.hiddenRoleIds ?? []);
+	return roles.filter(role => role.isPublicDisplayRequired === true || !hiddenRoleIds.has(role.id));
+});
 const narrow = ref<null | boolean>(null);
 const rootEl = useTemplateRef('rootEl');
 const bannerEl = useTemplateRef('bannerEl');

packages/frontend/src/router.definition.ts

@@ -88,6 +88,10 @@ export const ROUTE_DEF = [{
 		path: '/privacy',
 		name: 'privacy',
 		component: page(() => import('@/pages/settings/privacy.vue')),
+	}, {
+		path: '/roles',
+		name: 'roles',
+		component: page(() => import('@/pages/settings/roles.vue')),
 	}, {
 		path: '/emoji-palette',
 		name: 'emoji-palette',

packages/i18n/src/autogen/locale.ts

@@ -8026,6 +8026,14 @@ export interface Locale extends ILocale {
          * ユーザーのプロフィールでこのロールが表示されます。
          */
         "descriptionOfIsPublic": string;
+        /**
+         * 非表示を許可しない（常に表示）
+         */
+        "isPublicDisplayRequired": string;
+        /**
+         * 有効にすると、ユーザーはこの公開ロール/ロールバッジを非表示にできません。
+         */
+        "descriptionOfIsPublicDisplayRequired": string;
         /**
          * オプション
          */
@@ -12179,6 +12187,28 @@ export interface Locale extends ILocale {
             "notUnique": string;
         };
     };
+    "_roleDisplay": {
+        /**
+         * ロールの表示/非表示
+         */
+        "title": string;
+        /**
+         * 自分に割り当てられているロールを確認したり、プロフィールやノート上で表示・公開するロールを選択したりできます。
+         */
+        "description": string;
+        /**
+         * このロールは、管理者により、{link}への表示とロールタイムラインの有効化が設定されています。プロフィール上で非表示にすることはできますが、あなたにこのロールが付与されていることが知られる可能性があります。
+         */
+        "roleExplorableAlert": ParameterizedString<"link">;
+        /**
+         * ロール/ロールバッジを表示する
+         */
+        "displayToggle": string;
+        /**
+         * 管理者の設定により非表示にすることはできません。
+         */
+        "alwaysShownByAdmin": string;
+    };
     "_roleSelectDialog": {
         /**
          * 選択されていません

packages/misskey-js/src/autogen/types.ts

@@ -4061,6 +4061,8 @@ export type components = {
             /** @enum {string} */
             onlineStatus: 'unknown' | 'online' | 'active' | 'offline';
             badgeRoles?: {
+                /** Format: id */
+                id: string;
                 name: string;
                 iconUrl: string | null;
                 displayOrder: number;
@@ -4151,6 +4153,7 @@ export type components = {
             preventAiLearning: boolean;
             isExplorable: boolean;
             isDeleted: boolean;
+            hiddenRoleIds: string[];
             /** @enum {string} */
             twoFactorBackupCodesStock: 'full' | 'partial' | 'none';
             hideOnlineStatus: boolean;
@@ -5322,6 +5325,12 @@ export type components = {
             isModerator: boolean;
             /** @example false */
             isAdministrator: boolean;
+            /** @example false */
+            asBadge: boolean;
+            /** @example false */
+            isPublicDisplayRequired: boolean;
+            /** @example false */
+            isExplorable: boolean;
             /** @example 0 */
             displayOrder: number;
         };
@@ -5336,6 +5345,8 @@ export type components = {
             /** @example false */
             isPublic: boolean;
             /** @example false */
+            isPublicDisplayRequired: boolean;
+            /** @example false */
             isExplorable: boolean;
             /** @example false */
             asBadge: boolean;
@@ -11041,6 +11052,8 @@ export interface operations {
                     target: 'manual' | 'conditional';
                     condFormula: Record<string, never>;
                     isPublic: boolean;
+                    /** @default false */
+                    isPublicDisplayRequired?: boolean;
                     isModerator: boolean;
                     isAdministrator: boolean;
                     /** @default false */
@@ -11376,6 +11389,7 @@ export interface operations {
                     target?: 'manual' | 'conditional';
                     condFormula?: Record<string, never>;
                     isPublic?: boolean;
+                    isPublicDisplayRequired?: boolean;
                     isModerator?: boolean;
                     isAdministrator?: boolean;
                     isExplorable?: boolean;
@@ -27889,6 +27903,7 @@ export interface operations {
                     followersVisibility?: 'public' | 'followers' | 'private';
                     /** @enum {string} */
                     chatScope?: 'everyone' | 'followers' | 'following' | 'mutual' | 'none';
+                    hiddenRoleIds?: string[];
                     /** Format: misskey:id */
                     pinnedPageId?: string | null;
                     mutedWords?: (string[] | string)[];