Update CHANGELOG.md

* fix: RedisTimelineが有効の場合にHTLがリセットされた状態になる問題を修正

* add: CHANGELOG.md

* fix: LTL, STLでもTLが空になることがある問題を修正

* update: CHANGELOG.md

* fix: DBへのフォールバック時にwithRenotesが考慮されていないのを修正

* feat: リストにもDBフォールバックを実装

* fix: リストのDBフォールバック時の挙動を修正

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

.github/workflows/get-api-diff.yml

@@ -171,3 +171,16 @@ jobs:
         path: api-head.json
     - name: Kill Misskey Job
       run: screen -S misskey -X quit
+
+  save-pr-number:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Save PR number
+        env:
+          PR_NUMBER: ${{ github.event.number }}
+        run: |
+          echo "$PR_NUMBER" > ./pr_number
+      - uses: actions/upload-artifact@v3
+        with:
+          name: api-artifact
+          path: pr_number

.github/workflows/report-api-diff.yml

@@ -39,14 +39,7 @@ jobs:
         run: unzip api-artifact.zip -d artifacts
       - name: Load PR Number
         id: load-pr-num
-        env:
-          PULL_REQUESTS: ${{ toJson(github.event.workflow_run.pull_requests.*) }}
-          REPO_ID: ${{ github.repository_id }}
-        run: |
-          # find first pull requests that targets this repository
-          PR_NUMBER="$(echo "$PULL_REQUESTS" \
-              | jq --arg REPO_ID "$REPO_ID" '[.[] | select ($REPO_ID == (.base.repo.id | tostring)) | .number ][0]')"
-          echo "pr-number=$PR_NUMBER" >> "$GITHUB_OUTPUT"
+        run: echo "pr-number=$(cat artifacts/pr_number)" >> "$GITHUB_OUTPUT"
 
       - name: Output base
         run: cat ./artifacts/api-base.json

CHANGELOG.md

@@ -22,6 +22,10 @@
 - Feat: プラグイン・テーマを外部サイトから直接インストールできるようになりました
 	- 外部サイトでの実装が必要です。詳細は Misskey Hub をご覧ください
 	  https://misskey-hub.net/docs/advanced/publish-on-your-website.html
+- Enhance: コードのシンタックスハイライトエンジンをShikiに変更
+  - AiScriptのシンタックスハイライトに対応
+  - MFMでAiScriptをハイライトする場合、コードブロックの開始部分を ` ```is ` もしくは ` ```aiscript ` としてください
+  - インラインコードのシンタックスハイライトはパフォーマンスの都合上廃止しました
 - Fix: 投稿フォームでのユーザー変更がプレビューに反映されない問題を修正
 
 ### Server
@@ -29,6 +33,7 @@
 - Fix: リストTLに自分のフォロワー限定投稿が含まれない問題を修正
 - Fix: ローカルタイムラインに投稿者自身の投稿への返信が含まれない問題を修正
 - Fix: 自分のフォローしているユーザーの自分のフォローしていないユーザーの visibility: followers な投稿への返信がストリーミングで流れてくる問題を修正
+- Fix: RedisへのTLキャッシュが有効の場合にHTL/LTL/STLが空になることがある問題を修正
 
 ## 2023.10.2
 

packages/backend/src/server/api/endpoints/get-avatar-decorations.ts

@@ -8,6 +8,7 @@ import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { DI } from '@/di-symbols.js';
 import { AvatarDecorationService } from '@/core/AvatarDecorationService.js';
+import { RoleService } from '@/core/RoleService.js';
 
 export const meta = {
 	tags: ['users'],
@@ -63,16 +64,18 @@ export const paramDef = {
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
 		private avatarDecorationService: AvatarDecorationService,
+		private roleService: RoleService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const decorations = await this.avatarDecorationService.getAll(true);
+			const allRoles = await this.roleService.getRoles();
 
 			return decorations.map(decoration => ({
 				id: decoration.id,
 				name: decoration.name,
 				description: decoration.description,
 				url: decoration.url,
-				roleIdsThatCanBeUsedThisDecoration: decoration.roleIdsThatCanBeUsedThisDecoration,
+				roleIdsThatCanBeUsedThisDecoration: decoration.roleIdsThatCanBeUsedThisDecoration.filter(roleId => allRoles.some(role => role.id === roleId)),
 			}));
 		});
 	}

packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts

@@ -131,6 +131,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 				shouldFallbackToDb = shouldFallbackToDb || (noteIds.length === 0);
 
+				let redisTimeline: MiNote[] = [];
+
 				if (!shouldFallbackToDb) {
 					const query = this.notesRepository.createQueryBuilder('note')
 						.where('note.id IN (:...noteIds)', { noteIds: noteIds })
@@ -141,9 +143,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						.leftJoinAndSelect('renote.user', 'renoteUser')
 						.leftJoinAndSelect('note.channel', 'channel');
 
-					let timeline = await query.getMany();
+					redisTimeline = await query.getMany();
 
-					timeline = timeline.filter(note => {
+					redisTimeline = redisTimeline.filter(note => {
 						if (note.userId === me.id) {
 							return true;
 						}
@@ -159,15 +161,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						return true;
 					});
 
-					// TODO: フィルタした結果件数が足りなかった場合の対応
-
-					timeline.sort((a, b) => a.id > b.id ? -1 : 1);
+					redisTimeline.sort((a, b) => a.id > b.id ? -1 : 1);
+				}
 
+				if (redisTimeline.length > 0) {
 					process.nextTick(() => {
 						this.activeUsersChart.read(me);
 					});
 
-					return await this.noteEntityService.packMany(timeline, me);
+					return await this.noteEntityService.packMany(redisTimeline, me);
 				} else { // fallback to db
 					return await this.getFromDb({
 						untilId,

packages/backend/src/server/api/endpoints/notes/local-timeline.ts

@@ -110,6 +110,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 				noteIds = noteIds.slice(0, ps.limit);
 
+				let redisTimeline: MiNote[] = [];
+
 				if (noteIds.length > 0) {
 					const query = this.notesRepository.createQueryBuilder('note')
 						.where('note.id IN (:...noteIds)', { noteIds: noteIds })
@@ -120,9 +122,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						.leftJoinAndSelect('renote.user', 'renoteUser')
 						.leftJoinAndSelect('note.channel', 'channel');
 
-					let timeline = await query.getMany();
+					redisTimeline = await query.getMany();
 
-					timeline = timeline.filter(note => {
+					redisTimeline = redisTimeline.filter(note => {
 						if (me && (note.userId === me.id)) {
 							return true;
 						}
@@ -139,17 +141,17 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						return true;
 					});
 
-					// TODO: フィルタした結果件数が足りなかった場合の対応
-
-					timeline.sort((a, b) => a.id > b.id ? -1 : 1);
+					redisTimeline.sort((a, b) => a.id > b.id ? -1 : 1);
+				}
 
+				if (redisTimeline.length > 0) {
 					process.nextTick(() => {
 						if (me) {
 							this.activeUsersChart.read(me);
 						}
 					});
 
-					return await this.noteEntityService.packMany(timeline, me);
+					return await this.noteEntityService.packMany(redisTimeline, me);
 				} else { // fallback to db
 					return await this.getFromDb({
 						untilId,

packages/backend/src/server/api/endpoints/notes/timeline.ts

@@ -5,7 +5,7 @@
 
 import { Brackets } from 'typeorm';
 import { Inject, Injectable } from '@nestjs/common';
-import type { NotesRepository } from '@/models/_.js';
+import type { MiNote, NotesRepository } from '@/models/_.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { QueryService } from '@/core/QueryService.js';
 import ActiveUsersChart from '@/core/chart/charts/active-users.js';
@@ -89,6 +89,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				let noteIds = await this.funoutTimelineService.get(ps.withFiles ? `homeTimelineWithFiles:${me.id}` : `homeTimeline:${me.id}`, untilId, sinceId);
 				noteIds = noteIds.slice(0, ps.limit);
 
+				let redisTimeline: MiNote[] = [];
+
 				if (noteIds.length > 0) {
 					const query = this.notesRepository.createQueryBuilder('note')
 						.where('note.id IN (:...noteIds)', { noteIds: noteIds })
@@ -99,9 +101,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						.leftJoinAndSelect('renote.user', 'renoteUser')
 						.leftJoinAndSelect('note.channel', 'channel');
 
-					let timeline = await query.getMany();
+					redisTimeline = await query.getMany();
 
-					timeline = timeline.filter(note => {
+					redisTimeline = redisTimeline.filter(note => {
 						if (note.userId === me.id) {
 							return true;
 						}
@@ -120,15 +122,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						return true;
 					});
 
-					// TODO: フィルタした結果件数が足りなかった場合の対応
-
-					timeline.sort((a, b) => a.id > b.id ? -1 : 1);
+					redisTimeline.sort((a, b) => a.id > b.id ? -1 : 1);
+				}
 
+				if (redisTimeline.length > 0) {
 					process.nextTick(() => {
 						this.activeUsersChart.read(me);
 					});
 
-					return await this.noteEntityService.packMany(timeline, me);
+					return await this.noteEntityService.packMany(redisTimeline, me);
 				} else { // fallback to db
 					return await this.getFromDb({
 						untilId,
@@ -138,6 +140,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						includeRenotedMyNotes: ps.includeRenotedMyNotes,
 						includeLocalRenotes: ps.includeLocalRenotes,
 						withFiles: ps.withFiles,
+						withRenotes: ps.withRenotes,
 					}, me);
 				}
 			} else {
@@ -149,12 +152,13 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 					includeRenotedMyNotes: ps.includeRenotedMyNotes,
 					includeLocalRenotes: ps.includeLocalRenotes,
 					withFiles: ps.withFiles,
+					withRenotes: ps.withRenotes,
 				}, me);
 			}
 		});
 	}
 
-	private async getFromDb(ps: { untilId: string | null; sinceId: string | null; limit: number; includeMyRenotes: boolean; includeRenotedMyNotes: boolean; includeLocalRenotes: boolean; withFiles: boolean; }, me: MiLocalUser) {
+	private async getFromDb(ps: { untilId: string | null; sinceId: string | null; limit: number; includeMyRenotes: boolean; includeRenotedMyNotes: boolean; includeLocalRenotes: boolean; withFiles: boolean; withRenotes: boolean; }, me: MiLocalUser) {
 		const followees = await this.userFollowingService.getFollowees(me.id);
 
 		//#region Construct query
@@ -222,6 +226,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		if (ps.withFiles) {
 			query.andWhere('note.fileIds != \'{}\'');
 		}
+
+		if (ps.withRenotes === false) {
+			query.andWhere('note.renoteId IS NULL');
+		}
 		//#endregion
 
 		const timeline = await query.limit(ps.limit).getMany();

packages/backend/src/server/api/endpoints/notes/user-list-timeline.ts

@@ -4,7 +4,7 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
-import type { NotesRepository, UserListsRepository } from '@/models/_.js';
+import type { MiNote, NotesRepository, UserListMembershipsRepository, UserListsRepository } from '@/models/_.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import ActiveUsersChart from '@/core/chart/charts/active-users.js';
@@ -13,7 +13,9 @@ import { CacheService } from '@/core/CacheService.js';
 import { IdService } from '@/core/IdService.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
 import { FunoutTimelineService } from '@/core/FunoutTimelineService.js';
+import { QueryService } from '@/core/QueryService.js';
 import { ApiError } from '../../error.js';
+import { Brackets } from 'typeorm';
 
 export const meta = {
 	tags: ['notes', 'lists'],
@@ -70,11 +72,16 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		@Inject(DI.userListsRepository)
 		private userListsRepository: UserListsRepository,
 
+		@Inject(DI.userListMembershipsRepository)
+		private userListMembershipsRepository: UserListMembershipsRepository,
+
 		private noteEntityService: NoteEntityService,
 		private activeUsersChart: ActiveUsersChart,
 		private cacheService: CacheService,
 		private idService: IdService,
 		private funoutTimelineService: FunoutTimelineService,
+		private queryService: QueryService,
+
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const untilId = ps.untilId ?? (ps.untilDate ? this.idService.gen(ps.untilDate!) : null);
@@ -102,44 +109,129 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			let noteIds = await this.funoutTimelineService.get(ps.withFiles ? `userListTimelineWithFiles:${list.id}` : `userListTimeline:${list.id}`, untilId, sinceId);
 			noteIds = noteIds.slice(0, ps.limit);
 
-			if (noteIds.length === 0) {
-				return [];
+			let redisTimeline: MiNote[] = [];
+
+			if (noteIds.length > 0) {
+				const query = this.notesRepository.createQueryBuilder('note')
+					.where('note.id IN (:...noteIds)', { noteIds: noteIds })
+					.innerJoinAndSelect('note.user', 'user')
+					.leftJoinAndSelect('note.reply', 'reply')
+					.leftJoinAndSelect('note.renote', 'renote')
+					.leftJoinAndSelect('reply.user', 'replyUser')
+					.leftJoinAndSelect('renote.user', 'renoteUser')
+					.leftJoinAndSelect('note.channel', 'channel');
+
+				redisTimeline = await query.getMany();
+
+				redisTimeline = redisTimeline.filter(note => {
+					if (note.userId === me.id) {
+						return true;
+					}
+					if (isUserRelated(note, userIdsWhoBlockingMe)) return false;
+					if (isUserRelated(note, userIdsWhoMeMuting)) return false;
+					if (note.renoteId) {
+						if (note.text == null && note.fileIds.length === 0 && !note.hasPoll) {
+							if (isUserRelated(note, userIdsWhoMeMutingRenotes)) return false;
+							if (ps.withRenotes === false) return false;
+						}
+					}
+
+					return true;
+				});
+
+				redisTimeline.sort((a, b) => a.id > b.id ? -1 : 1);
 			}
 
-			const query = this.notesRepository.createQueryBuilder('note')
-				.where('note.id IN (:...noteIds)', { noteIds: noteIds })
-				.innerJoinAndSelect('note.user', 'user')
-				.leftJoinAndSelect('note.reply', 'reply')
-				.leftJoinAndSelect('note.renote', 'renote')
-				.leftJoinAndSelect('reply.user', 'replyUser')
-				.leftJoinAndSelect('renote.user', 'renoteUser')
-				.leftJoinAndSelect('note.channel', 'channel');
+			if (redisTimeline.length > 0) {
+				this.activeUsersChart.read(me);
+				return await this.noteEntityService.packMany(redisTimeline, me);
+			} else { // fallback to db
+				//#region Construct query
+				const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+					.innerJoin(this.userListMembershipsRepository.metadata.targetName, 'userListMemberships', 'userListMemberships.userId = note.userId')
+					.innerJoinAndSelect('note.user', 'user')
+					.leftJoinAndSelect('note.reply', 'reply')
+					.leftJoinAndSelect('note.renote', 'renote')
+					.leftJoinAndSelect('reply.user', 'replyUser')
+					.leftJoinAndSelect('renote.user', 'renoteUser')
+					.andWhere('userListMemberships.userListId = :userListId', { userListId: list.id })
+					.andWhere('note.channelId IS NULL') // チャンネルノートではない
+					.andWhere(new Brackets(qb => {
+						qb
+							.where('note.replyId IS NULL') // 返信ではない
+							.orWhere(new Brackets(qb => {
+								qb // 返信だけど投稿者自身への返信
+									.where('note.replyId IS NOT NULL')
+									.andWhere('note.replyUserId = note.userId');
+							}))
+							.orWhere(new Brackets(qb => {
+								qb // 返信だけど自分宛ての返信
+									.where('note.replyId IS NOT NULL')
+									.andWhere('note.replyUserId = :meId', { meId: me.id });
+							}))
+							.orWhere(new Brackets(qb => {
+								qb // 返信だけどwithRepliesがtrueの場合
+									.where('note.replyId IS NOT NULL')
+									.andWhere('userListMemberships.withReplies = true');
+							}));
+					}));
 
-			let timeline = await query.getMany();
+				this.queryService.generateVisibilityQuery(query, me);
+				this.queryService.generateMutedUserQuery(query, me);
+				this.queryService.generateBlockedUserQuery(query, me);
+				this.queryService.generateMutedUserRenotesQueryForNotes(query, me);
 
-			timeline = timeline.filter(note => {
-				if (note.userId === me.id) {
-					return true;
-				}
-				if (isUserRelated(note, userIdsWhoBlockingMe)) return false;
-				if (isUserRelated(note, userIdsWhoMeMuting)) return false;
-				if (note.renoteId) {
-					if (note.text == null && note.fileIds.length === 0 && !note.hasPoll) {
-						if (isUserRelated(note, userIdsWhoMeMutingRenotes)) return false;
-						if (ps.withRenotes === false) return false;
-					}
+				if (ps.includeMyRenotes === false) {
+					query.andWhere(new Brackets(qb => {
+						qb.orWhere('note.userId != :meId', { meId: me.id });
+						qb.orWhere('note.renoteId IS NULL');
+						qb.orWhere('note.text IS NOT NULL');
+						qb.orWhere('note.fileIds != \'{}\'');
+						qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+					}));
 				}
 
-				return true;
-			});
+				if (ps.includeRenotedMyNotes === false) {
+					query.andWhere(new Brackets(qb => {
+						qb.orWhere('note.renoteUserId != :meId', { meId: me.id });
+						qb.orWhere('note.renoteId IS NULL');
+						qb.orWhere('note.text IS NOT NULL');
+						qb.orWhere('note.fileIds != \'{}\'');
+						qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+					}));
+				}
 
-			// TODO: フィルタした結果件数が足りなかった場合の対応
+				if (ps.includeLocalRenotes === false) {
+					query.andWhere(new Brackets(qb => {
+						qb.orWhere('note.renoteUserHost IS NOT NULL');
+						qb.orWhere('note.renoteId IS NULL');
+						qb.orWhere('note.text IS NOT NULL');
+						qb.orWhere('note.fileIds != \'{}\'');
+						qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+					}));
+				}
 
-			timeline.sort((a, b) => a.id > b.id ? -1 : 1);
+				if (ps.withRenotes === false) {
+					query.andWhere(new Brackets(qb => {
+						qb.orWhere('note.renoteId IS NULL');
+						qb.orWhere(new Brackets(qb => {
+							qb.orWhere('note.text IS NOT NULL');
+							qb.orWhere('note.fileIds != \'{}\'');
+						}));
+					}));
+				}
 
-			this.activeUsersChart.read(me);
+				if (ps.withFiles) {
+					query.andWhere('note.fileIds != \'{}\'');
+				}
+				//#endregion
 
-			return await this.noteEntityService.packMany(timeline, me);
+				const timeline = await query.limit(ps.limit).getMany();
+
+				this.activeUsersChart.read(me);
+
+				return await this.noteEntityService.packMany(timeline, me);
+			}
 		});
 	}
 }

packages/frontend/src/components/MkCode.core.vue

@@ -88,7 +88,7 @@ watch(() => props.lang, (to) => {
 		overflow: visible;
 		text-rendering: inherit;
     text-transform: inherit;
-    white-space: pre-wrap;
+    white-space: pre;
 	}
 }
 </style>

packages/frontend/src/components/MkCodeEditor.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, toRefs, shallowRef } from 'vue';
+import { ref, watch, toRefs, shallowRef, nextTick } from 'vue';
 import XCode from '@/components/MkCode.core.vue';
 
 const props = withDefaults(defineProps<{
@@ -66,6 +66,20 @@ const onKeydown = (ev: KeyboardEvent) => {
 	emit('keydown', ev);
 
 	if (ev.code === 'Enter') {
+		const pos = inputEl.value?.selectionStart ?? 0;
+		const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length;
+		if (pos === posEnd) {
+			const lines = vModel.value.slice(0, pos).split('\n');
+			const currentLine = lines[lines.length - 1];
+			const currentLineSpaces = currentLine.match(/^\s+/);
+			const posDelta = currentLineSpaces ? currentLineSpaces[0].length : 0;
+			ev.preventDefault();
+			vModel.value = vModel.value.slice(0, pos) + '\n' + (currentLineSpaces ? currentLineSpaces[0] : '') + vModel.value.slice(pos);
+			v.value = vModel.value;
+			nextTick(() => {
+				inputEl.value?.setSelectionRange(pos + 1 + posDelta, pos + 1 + posDelta);
+			});
+		}
 		emit('enter');
 	}
 
@@ -74,7 +88,9 @@ const onKeydown = (ev: KeyboardEvent) => {
 		const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length;
 		vModel.value = vModel.value.slice(0, pos) + '\t' + vModel.value.slice(posEnd);
 		v.value = vModel.value;
-		inputEl.value?.setSelectionRange(pos + 1, pos + 1);
+		nextTick(() => {
+			inputEl.value?.setSelectionRange(pos + 1, pos + 1);
+		});
 		ev.preventDefault();
 	}
 };

packages/frontend/src/pages/scratchpad.vue

@@ -4,34 +4,38 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="800">
-	<div :class="$style.root">
-		<div class="_gaps_s">
-			<div :class="$style.editor" class="_panel">
-				<MkCodeEditor v-model="code" lang="aiscript"/>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+
+	<MkSpacer :contentMax="800">
+		<div :class="$style.root">
+			<div class="_gaps_s">
+				<div :class="$style.editor" class="_panel">
+					<MkCodeEditor v-model="code" lang="aiscript"/>
+				</div>
+				<MkButton primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
+			</div>
+
+			<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
+				<template #header>UI</template>
+				<div :class="$style.ui">
+					<MkAsUi :component="root" :components="components" size="small"/>
+				</div>
+			</MkContainer>
+
+			<MkContainer :foldable="true" class="">
+				<template #header>{{ i18n.ts.output }}</template>
+				<div :class="$style.logs">
+					<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+				</div>
+			</MkContainer>
+
+			<div class="">
+				{{ i18n.ts.scratchpadDescription }}
 			</div>
-			<MkButton primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
 		</div>
-
-		<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
-			<template #header>UI</template>
-			<div :class="$style.ui">
-				<MkAsUi :component="root" :components="components" size="small"/>
-			</div>
-		</MkContainer>
-
-		<MkContainer :foldable="true" class="">
-			<template #header>{{ i18n.ts.output }}</template>
-			<div :class="$style.logs">
-				<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
-			</div>
-		</MkContainer>
-
-		<div class="">
-			{{ i18n.ts.scratchpadDescription }}
-		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -50,6 +54,7 @@ import MkAsUi from '@/components/MkAsUi.vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 
+const parser = new Parser();
 let aiscript: Interpreter;
 const code = ref('');
 const logs = ref<any[]>([]);

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

@@ -96,6 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="2 / 3">{{ avatarDecoration.name }}</MkCondensedLine></div>
 				<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decoration="{ url: avatarDecoration.url }" forceShowDecoration/>
+				<i v-if="avatarDecoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => avatarDecoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.avatarDecorationLock" class="ti ti-lock"></i>
 			</div>
 		</div>
 	</MkFolder>
@@ -389,4 +390,10 @@ definePageMetadata({
 	font-weight: bold;
 	margin-bottom: 20px;
 }
+
+.avatarDecorationLock {
+	position: absolute;
+	bottom: 12px;
+	right: 12px;
+}
 </style>