Merge remote-tracking branch 'origin/develop' into refactor/antennas-in-cache

locales/en-US.yml

@@ -1114,6 +1114,9 @@ isPatron: "Calckey Patron"
 reactionPickerSkinTone: "Preferred emoji skin tone"
 enableServerMachineStats: "Enable server hardware statistics"
 enableIdenticonGeneration: "Enable Identicon generation"
+showPopup: "Notify users with popup"
+showWithSparkles: "Show with sparkles"
+youHaveUnreadAnnouncements: "You have unread announcements"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -980,6 +980,9 @@ preventAiLearningDescription: "投稿したノート、添付した画像など
 noGraze: "ブラウザの拡張機能「Graze for Mastodon」は、Calckeyの動作を妨げるため、無効にしてください。"
 enableServerMachineStats: "サーバーのマシン情報を公開する"
 enableIdenticonGeneration: "ユーザーごとのIdenticon生成を有効にする"
+showPopup: "ポップアップを表示してユーザーに知らせる"
+showWithSparkles: "タイトルをキラキラさせる"
+youHaveUnreadAnnouncements: "未読のお知らせがあります"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

locales/tr-TR.yml

@@ -1,9 +1,12 @@
----
 _lang_: "Türkçe"
-introMisskey: "Açık kaynaklı bir dağıtılmış mikroblog hizmeti olan Calckey'e hoş geldiniz.\nMisskey, neler olup bittiğini paylaşmak ve herkese sizden bahsetmek için \"notlar\" oluşturmanıza olanak tanıyan, açık kaynaklı, dağıtılmış bir mikroblog hizmetidir.\nHerkesin notlarına kendi tepkilerinizi hızlıca eklemek için \"Tepkiler\" özelliğini de kullanabilirsiniz👍.\nYeni bir dünyayı keşfedin🚀."
+introMisskey: "Açık kaynaklı bir dağıtılmış mikroblog hizmeti olan Calckey'e hoş geldiniz.\n
+  Misskey, neler olup bittiğini paylaşmak ve herkese sizden bahsetmek için \"notlar\"\
+  \ oluşturmanıza olanak tanıyan, açık kaynaklı, dağıtılmış bir mikroblog hizmetidir.\n
+  Herkesin notlarına kendi tepkilerinizi hızlıca eklemek için \"Tepkiler\" özelliğini
+  de kullanabilirsiniz👍.\nYeni bir dünyayı keşfedin🚀."
 monthAndDay: "{month}Ay {day}Gün"
 search: "Arama"
-notifications: "Bildirim"
+notifications: "Bildirimler"
 username: "Kullanıcı Adı"
 password: "Şifre"
 forgotPassword: "şifremi unuttum"
@@ -11,7 +14,7 @@ ok: "TAMAM"
 gotIt: "Anladım"
 cancel: "İptal"
 enterUsername: "Kullanıcı adınızı giriniz"
-noNotes: "Notlar mevcut değil."
+noNotes: "Gönderiler mevcut değil."
 noNotifications: "Bildirim bulunmuyor"
 settings: "Ayarlar"
 basicSettings: "Temel Ayarlar"
@@ -37,7 +40,8 @@ copyContent: "İçeriği kopyala"
 copyLink: "Bağlantıyı Kopyala"
 delete: "Sil"
 deleteAndEdit: "Sil ve yeniden düzenle"
-deleteAndEditConfirm: "Bu notu silip yeniden düzenlemek istiyor musunuz? Bu nota ilişkin tüm Tepkiler, Yeniden Notlar ve Yanıtlar da silinecektir."
+deleteAndEditConfirm: "Bu gönderiyi silip yeniden düzenlemek istiyor musunuz? Bu gönderiye
+  ilişkin tüm tepkiler, destekler ve yanıtlar silinecektir."
 addToList: "Listeye ekle"
 sendMessage: "Mesaj Gönder"
 copyUsername: "Kullanıcı Adını Kopyala"
@@ -61,3 +65,19 @@ _deck:
   _columns:
     notifications: "Bildirim"
     tl: "Zaman çizelgesi"
+searchPlaceholder: Calckey'de Ara
+reply: Yanıtla
+jumpToPrevious: Öncekini görüntüle
+deleted: Silindi
+editNote: Notu düzenle
+noThankYou: Hayır, teşekkürler
+addInstance: Bir sunucu ekle
+cantFavorite: Favorilere eklenemedi.
+edited: '{date} tarihinde ve {time} vaktinde düzenlendi'
+loggingIn: Giriş Yapılıyor
+save: Kaydet
+headlineMisskey: Sonsuza kadar ücretsiz, açık kaynak kodlu, merkeziyetsiz sosyal medya
+  platformu! 🚀
+loadMore: Daha fazla yükle
+instance: Sunucu
+fetchingAsApObject: Fedevren'den çekiliyor

locales/zh-TW.yml

@@ -702,7 +702,8 @@ onlineUsersCount: "{n}人正在線上"
 nUsers: "{n}用戶"
 nNotes: "{n}貼文"
 sendErrorReports: "傳送錯誤報告"
-sendErrorReportsDescription: "啟用後，問題報告將傳送至Calckey開發者以提升軟體品質。\n問題報告可能包括OS版本，瀏覽器類型，行為歷史記錄等。"
+sendErrorReportsDescription: "開啟後，錯誤出現時將會與 Calckey 分享詳細紀錄，對於 Calckey 的開發會有非常大的幫助。\n
+  這將包括您的操作系統版本、使用的瀏覽器、您在 Calckey 中的活動等資料。"
 myTheme: "我的佈景主題"
 backgroundColor: "背景"
 accentColor: "重點色彩"
@@ -862,7 +863,7 @@ check: "檢查"
 driveCapOverrideLabel: "更改這個使用者的雲端硬碟容量上限"
 driveCapOverrideCaption: "如果指定0以下的值，就會被取消。"
 requireAdminForView: "必須以管理者帳號登入才可以檢視。"
-isSystemAccount: "由系統自動建立與管理的帳號。"
+isSystemAccount: "該帳號由系統自動創建並運行。 千千萬萬不要審核、編輯、刪除或以其他方式修改此帳戶，否則可能會破壞您的伺服器。"
 typeToConfirm: "要執行這項操作，請輸入 {x}"
 deleteAccount: "刪除帳號"
 document: "文件"
@@ -1855,3 +1856,14 @@ hiddenTagsDescription: '列出您希望隱藏趨勢和探索的主題標籤（
 userSaysSomethingReasonQuote: '{name} 引用了一篇包含 {reason} 的貼文'
 silencedInstancesDescription: 列出您想要靜音的伺服器的網址。 您列出的伺服器內的帳戶將被視為“沉默”，只能發出追隨請求，如果不追隨則不能提及本地帳戶。
   這不會影響被阻止的伺服器。
+video: 影片
+audio: 音訊
+sendPushNotificationReadMessageCaption: 包含文本 “{emptyPushNotificationMessage}” 的通知將顯示一小段時間。
+  這可能會增加您設備的電池使用量（如果適用）。
+channelFederationWarn: 頻道功能尚未與聯邦宇宙連動
+swipeOnMobile: 允許在頁面之間滑動
+sendPushNotificationReadMessage: 閱讀相關通知或消息後刪除推送通知
+image: 圖片
+seperateRenoteQuote: 分別獨立的轉傳及引用按鈕
+clipsDesc: 摘錄就像一個可以分享的書籤。 你可以從每個貼文的菜單創建新摘錄或將貼文加入已有的摘錄。
+noteId: 貼文 ID

packages/backend/migration/1688845537045-announcement-popup.js

@@ -0,0 +1,21 @@
+export class AnnouncementPopup1688845537045 {
+	name = "AnnouncementPopup1688845537045";
+
+	async up(queryRunner) {
+		await queryRunner.query(
+			`ALTER TABLE "announcement" ADD "showPopup" boolean NOT NULL DEFAULT false`,
+		);
+		await queryRunner.query(
+			`ALTER TABLE "announcement" ADD "isGoodNews" boolean NOT NULL DEFAULT false`,
+		);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(
+			`ALTER TABLE "announcement" DROP COLUMN "isGoodNews"`,
+		);
+		await queryRunner.query(
+			`ALTER TABLE "announcement" DROP COLUMN "showPopup"`,
+		);
+	}
+}

packages/backend/src/daemons/server-stats.ts

@@ -23,8 +23,7 @@ export default function () {
 
 	fetchMeta().then((meta) => {
 		if (!meta.enableServerMachineStats) return;
-	}
+	});
-	);
 
 	async function tick() {
 		const cpu = await cpuUsage();

packages/backend/src/models/entities/announcement.ts

@@ -36,6 +36,16 @@ export class Announcement {
 	})
 	public imageUrl: string | null;
 
+	@Column("boolean", {
+		default: false,
+	})
+	public showPopup: boolean;
+
+	@Column("boolean", {
+		default: false,
+	})
+	public isGoodNews: boolean;
+
 	constructor(data: Partial<Announcement>) {
 		if (data == null) return;
 

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

@@ -47,6 +47,16 @@ export const meta = {
 				optional: false,
 				nullable: true,
 			},
+			showPopup: {
+				type: "boolean",
+				optional: true,
+				nullable: false,
+			},
+			isGoodNews: {
+				type: "boolean",
+				optional: true,
+				nullable: false,
+			},
 		},
 	},
 } as const;
@@ -57,6 +67,8 @@ export const paramDef = {
 		title: { type: "string", minLength: 1 },
 		text: { type: "string", minLength: 1 },
 		imageUrl: { type: "string", nullable: true, minLength: 1 },
+		showPopup: { type: "boolean" },
+		isGoodNews: { type: "boolean" },
 	},
 	required: ["title", "text", "imageUrl"],
 } as const;
@@ -69,6 +81,8 @@ export default define(meta, paramDef, async (ps) => {
 		title: ps.title,
 		text: ps.text,
 		imageUrl: ps.imageUrl,
+		showPopup: ps.showPopup ?? false,
+		isGoodNews: ps.isGoodNews ?? false,
 	}).then((x) => Announcements.findOneByOrFail(x.identifiers[0]));
 
 	return Object.assign({}, announcement, {

packages/backend/src/server/api/endpoints/admin/announcements/list.ts

@@ -57,6 +57,16 @@ export const meta = {
 					optional: false,
 					nullable: false,
 				},
+				showPopup: {
+					type: "boolean",
+					optional: true,
+					nullable: false,
+				},
+				isGoodNews: {
+					type: "boolean",
+					optional: true,
+					nullable: false,
+				},
 			},
 		},
 	},
@@ -100,5 +110,7 @@ export default define(meta, paramDef, async (ps) => {
 		text: announcement.text,
 		imageUrl: announcement.imageUrl,
 		reads: reads.get(announcement)!,
+		showPopup: announcement.showPopup,
+		isGoodNews: announcement.isGoodNews,
 	}));
 });

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

@@ -24,6 +24,8 @@ export const paramDef = {
 		title: { type: "string", minLength: 1 },
 		text: { type: "string", minLength: 1 },
 		imageUrl: { type: "string", nullable: true, minLength: 1 },
+		showPopup: { type: "boolean" },
+		isGoodNews: { type: "boolean" },
 	},
 	required: ["id", "title", "text", "imageUrl"],
 } as const;
@@ -38,5 +40,7 @@ export default define(meta, paramDef, async (ps, me) => {
 		title: ps.title,
 		text: ps.text,
 		imageUrl: ps.imageUrl,
+		showPopup: ps.showPopup ?? false,
+		isGoodNews: ps.isGoodNews ?? false,
 	});
 });

packages/backend/src/server/api/endpoints/announcements.ts

@@ -56,6 +56,16 @@ export const meta = {
 					optional: true,
 					nullable: false,
 				},
+				showPopup: {
+					type: "boolean",
+					optional: false,
+					nullable: false,
+				},
+				isGoodNews: {
+					type: "boolean",
+					optional: false,
+					nullable: false,
+				},
 			},
 		},
 	},

packages/backend/src/server/api/endpoints/i/registry/get-unsecure.ts

@@ -33,7 +33,7 @@ export const paramDef = {
 } as const;
 
 export default define(meta, paramDef, async (ps, user) => {
-	if (ps.key !== "reactions") return;
+	if (ps.key !== "reactions" && ps.key !== "defaultNoteVisibility") return;
 	const query = RegistryItems.createQueryBuilder("item")
 		.where("item.domain IS NULL")
 		.andWhere("item.userId = :userId", { userId: user.id })

packages/backend/src/server/api/index.ts

@@ -112,7 +112,7 @@ mastoFileRouter.post("/v2/media", upload.single("file"), async (ctx) => {
 			ctx.status = 401;
 			return;
 		}
-		const data = await client.uploadMedia(multipartData);
+		const data = await client.uploadMedia(multipartData, ctx.request.body);
 		ctx.body = convertAttachment(data.data as Entity.Attachment);
 	} catch (e: any) {
 		console.error(e);

packages/backend/src/server/api/mastodon/endpoints/account.ts

@@ -48,7 +48,7 @@ export function apiAccountMastodon(router: Router): void {
 			acct.source = {
 				note: acct.note,
 				fields: acct.fields,
-				privacy: "public",
+				privacy: await client.getDefaultPostPrivacy(),
 				sensitive: false,
 				language: "",
 			};

packages/backend/src/server/api/mastodon/endpoints/status.ts

@@ -123,27 +123,7 @@ export function apiStatusMastodon(router: Router): void {
 					id,
 					convertTimelinesArgsId(limitToInt(ctx.query as any)),
 				);
-				const status = await client.getStatus(id);
+
-				let reqInstance = axios.create({
-					headers: {
-						Authorization: ctx.headers.authorization,
-					},
-				});
-				const reactionsAxios = await reqInstance.get(
-					`${BASE_URL}/api/notes/reactions?noteId=${id}`,
-				);
-				const reactions: IReaction[] = reactionsAxios.data;
-				const text = reactions
-					.map((r) => `${r.type.replace("@.", "")} ${r.user.username}`)
-					.join("<br />");
-				data.data.descendants.unshift(
-					statusModel(
-						status.data.id,
-						status.data.account.id,
-						status.data.emojis,
-						text,
-					),
-				);
 				data.data.ancestors = data.data.ancestors.map((status) =>
 					convertStatus(status),
 				);
@@ -456,65 +436,3 @@ async function getFirstReaction(
 		return react;
 	}
 }
-
-export function statusModel(
-	id: string | null,
-	acctId: string | null,
-	emojis: MastodonEntity.Emoji[],
-	content: string,
-) {
-	const now = new Date().toISOString();
-	return {
-		id: "9atm5frjhb",
-		uri: "/static-assets/transparent.png", // ""
-		url: "/static-assets/transparent.png", // "",
-		account: {
-			id: "9arzuvv0sw",
-			username: "Reactions",
-			acct: "Reactions",
-			display_name: "Reactions to this post",
-			locked: false,
-			created_at: now,
-			followers_count: 0,
-			following_count: 0,
-			statuses_count: 0,
-			note: "",
-			url: "/static-assets/transparent.png",
-			avatar: "/static-assets/badges/info.png",
-			avatar_static: "/static-assets/badges/info.png",
-			header: "/static-assets/transparent.png", // ""
-			header_static: "/static-assets/transparent.png", // ""
-			emojis: [],
-			fields: [],
-			moved: null,
-			bot: false,
-		},
-		in_reply_to_id: id,
-		in_reply_to_account_id: acctId,
-		reblog: null,
-		content: `<p>${content}</p>`,
-		plain_content: null,
-		created_at: now,
-		emojis: emojis,
-		replies_count: 0,
-		reblogs_count: 0,
-		favourites_count: 0,
-		favourited: false,
-		reblogged: false,
-		muted: false,
-		sensitive: false,
-		spoiler_text: "",
-		visibility: "public" as const,
-		media_attachments: [],
-		mentions: [],
-		tags: [],
-		card: null,
-		poll: null,
-		application: null,
-		language: null,
-		pinned: false,
-		emoji_reactions: [],
-		bookmarked: false,
-		quote: null,
-	};
-}

packages/client/src/components/MkAnnouncement.vue

@@ -0,0 +1,74 @@
+<template>
+	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+		<div :class="$style.root">
+			<div :class="$style.title">
+				<MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle>
+				<p v-else>{{ title }}</p>
+			</div>
+			<Mfm :text="text" />
+			<img
+				v-if="imageUrl != null"
+				:key="imageUrl"
+				:src="imageUrl"
+				alt="attached image"
+			/>
+			<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
+				i18n.ts.gotIt
+			}}</MkButton>
+		</div>
+	</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+
+const props = defineProps<{
+	announcement: Announcement;
+}>();
+
+const { id, text, title, imageUrl, isGoodNews } = props.announcement;
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const gotIt = () => {
+	modal.value.close();
+	os.api("i/read-announcement", { announcementId: id });
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> img {
+		border-radius: 10px;
+		max-height: 100%;
+		max-width: 100%;
+	}
+}
+
+.title {
+	font-weight: bold;
+
+	> p {
+		margin: 0;
+	}
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+</style>

packages/client/src/components/MkManyAnnouncements.vue

@@ -0,0 +1,53 @@
+<template>
+	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+		<div :class="$style.root">
+			<p :class="$style.title">
+				{{ i18n.ts.youHaveUnreadAnnouncements }}
+			</p>
+			<MkButton
+				:class="$style.gotIt"
+				primary
+				full
+				@click="checkAnnouncements()"
+				>{{ i18n.ts.gotIt }}</MkButton
+			>
+		</div>
+	</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+const checkAnnouncements = () => {
+	modal.value.close();
+	location.href = "/announcements";
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+	margin: 0;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+</style>

packages/client/src/components/MkMedia.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="media" :class="{ mini: plyrMini }">
+	<div class="media" v-size="{ max: [350] }">
 		<button v-if="hide" class="hidden" @click="hide = false">
 			<ImgWithBlurhash
 				:hash="media.blurhash"
@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, ref, onMounted } from "vue";
+import { watch, ref } from "vue";
 import VuePlyr from "vue-plyr";
 import "vue-plyr/dist/vue-plyr.css";
 import type * as misskey from "calckey-js";
@@ -98,7 +98,6 @@ const props = defineProps<{
 let hide = $ref(true);
 
 const plyr = ref();
-const plyrMini = ref(false);
 
 const url =
 	props.raw || defaultStore.state.loadRawImages
@@ -130,17 +129,6 @@ watch(
 		immediate: true,
 	},
 );
-
-onMounted(() => {
-	if (props.media.type.startsWith("video")) {
-		plyrMini.value = plyr.value.player.media.scrollWidth < 300;
-		if (plyrMini.value) {
-			plyr.value.player.on("play", () => {
-				plyr.value.player.fullscreen.enter();
-			});
-		}
-	}
-});
 </script>
 
 <style lang="scss" scoped>
@@ -229,16 +217,46 @@ onMounted(() => {
 			pointer-events: none;
 		}
 	}
-	&.mini {
+	:deep(.plyr__controls) {
+		contain: strict;
+		height: 24px;
+		box-sizing: content-box;
+	}
+	:deep(.plyr__volume) {
+		display: flex;
+		min-width: max-content;
+		width: 110px;
+		transition: width 0.2s cubic-bezier(0,0,0,1);
+		[data-plyr="volume"] {
+			width: 0;
+			flex-grow: 1;
+			transition: margin 0.3s, opacity .2s 0.2s;
+		}
+		&:not(:hover):not(:focus-within) {
+			width: 0px;
+			transition: width 0.2s;
+			[data-plyr="volume"] {
+				margin-inline: 0px;
+				opacity: 0;
+				transition: margin 0.3s, opacity 0.1s;
+			}
+		}
+	}
+	&.max-width_350px {
 		:deep(.plyr:not(:fullscreen)) {
 			min-width: unset !important;
 			.plyr__control--overlaid,
 			.plyr__progress__container,
 			.plyr__volume,
-			[data-plyr="fullscreen"] {
+			[data-plyr="download"] {
 				display: none;
 			}
 		}
+		:deep(.plyr__time) {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }
 </style>

packages/client/src/components/MkUrlPreview.vue

@@ -51,7 +51,7 @@
 					<MkLoading mini />
 				</div>
 				<div v-else>
-					<h1 :title="title || undefined">{{ title || url }}</h1>
+					<h3 :title="title || undefined">{{ title || url }}</h3>
 					<p :title="description">
 						<span>
 							<span :title="sitename || undefined">
@@ -240,7 +240,7 @@ onUnmounted(() => {
 			width: 0;
 			flex-grow: 1;
 		}
-		h1,
+		h3,
 		p {
 			display: block;
 			margin: 0;
@@ -248,7 +248,7 @@ onUnmounted(() => {
 			text-overflow: ellipsis;
 			max-width: 100%;
 		}
-		h1 {
+		h3 {
 			font-size: 1em;
 			white-space: nowrap;
 			margin-bottom: 0.2em;

packages/client/src/init.ts

@@ -36,7 +36,7 @@ import { version, ui, lang, host } from "@/config";
 import { applyTheme } from "@/scripts/theme";
 import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
 import { i18n } from "@/i18n";
-import { confirm, alert, post, popup, toast } from "@/os";
+import { confirm, alert, post, popup, toast, api } from "@/os";
 import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
 import { $i, refreshAccount, login, updateAccount, signout } from "@/account";
@@ -272,6 +272,42 @@ function checkForSplash() {
 		}
 	}
 
+	if (
+		$i &&
+		defaultStore.state.tutorial === -1 &&
+		!["/announcements", "/announcements/"].includes(window.location.pathname)
+	) {
+		api("announcements", { withUnreads: true, limit: 10 })
+			.then((announcements) => {
+				const unreadAnnouncements = announcements.filter((item) => {
+					return !item.isRead;
+				});
+				if (unreadAnnouncements.length > 3) {
+					popup(
+						defineAsyncComponent(
+							() => import("@/components/MkManyAnnouncements.vue"),
+						),
+						{},
+						{},
+						"closed",
+					);
+				} else {
+					unreadAnnouncements.forEach((item) => {
+						if (item.showPopup)
+							popup(
+								defineAsyncComponent(
+									() => import("@/components/MkAnnouncement.vue"),
+								),
+								{ announcement: item },
+								{},
+								"closed",
+							);
+					});
+				}
+			})
+			.catch((err) => console.log(err));
+	}
+
 	// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
 	watch(
 		defaultStore.reactiveState.darkMode,

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

@@ -7,7 +7,7 @@
 				:display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="900">
-			<div class="ztgjmzrw">
+			<div :class="$style.root">
 				<section
 					v-for="announcement in announcements"
 					class="_card _gap announcements"
@@ -22,6 +22,17 @@
 						<MkInput v-model="announcement.imageUrl">
 							<template #label>{{ i18n.ts.imageUrl }}</template>
 						</MkInput>
+						<MkSwitch
+							v-model="announcement.showPopup"
+							class="_formBlock"
+							>{{ i18n.ts.showPopup }}</MkSwitch
+						>
+						<MkSwitch
+							v-if="announcement.showPopup"
+							v-model="announcement.isGoodNews"
+							class="_formBlock"
+							>{{ i18n.ts.showWithSparkles }}</MkSwitch
+						>
 						<p v-if="announcement.reads">
 							{{
 								i18n.t("nUsersRead", { n: announcement.reads })
@@ -57,6 +68,7 @@
 import {} from "vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -74,6 +86,8 @@ function add() {
 		title: "",
 		text: "",
 		imageUrl: null,
+		showPopup: false,
+		isGoodNews: false,
 	});
 }
 
@@ -137,8 +151,8 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.ztgjmzrw {
+.root {
 	margin: var(--margin);
 }
 </style>

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

@@ -26,7 +26,12 @@
 								class="banner"
 								:style="{
 									backgroundImage: `url('${user.bannerUrl}')`,
-									'--backgroundImageStatic': defaultStore.state.useBlurEffect ? `url('${getStaticImageUrl(user.bannerUrl)}')` : null
+									'--backgroundImageStatic': defaultStore
+										.state.useBlurEffect && user.bannerUrl
+										? `url('${getStaticImageUrl(
+												user.bannerUrl,
+										  )}')`
+										: null,
 								}"
 							></div>
 							<div class="fade"></div>

packages/client/src/ui/_common_/navbar.vue

@@ -26,7 +26,7 @@
 				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.timeline"
-					class="item index"
+					class="nav-item index"
 					active-class="active"
 					to="/"
 					exact
@@ -46,7 +46,7 @@
 						v-tooltip.noDelay.right="
 							i18n.ts[navbarItemDef[item].title]
 						"
-						class="item _button"
+						class="nav-item _button"
 						:class="[item, { active: navbarItemDef[item].active }]"
 						active-class="active"
 						:to="navbarItemDef[item].to"
@@ -78,7 +78,7 @@
 					v-if="$i.isAdmin || $i.isModerator"
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.controlPanel"
-					class="item _button"
+					class="nav-item _button"
 					active-class="active"
 					to="/admin"
 				>
@@ -99,7 +99,7 @@
 				<button
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.more"
-					class="item _button"
+					class="nav-item _button"
 					@click="more"
 				>
 					<i
@@ -116,7 +116,7 @@
 				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.settings"
-					class="item _button"
+					class="nav-item _button"
 					active-class="active"
 					to="/settings"
 				>
@@ -127,7 +127,7 @@
 			<div class="bottom">
 				<button
 					v-tooltip.noDelay.right="i18n.ts.note"
-					class="item _button post"
+					class="nav-item _button post"
 					data-cy-open-post-form
 					@click="os.post"
 				>
@@ -272,6 +272,125 @@ function more(ev: MouseEvent) {
 		flex-direction: column;
 	}
 
+	.nav-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding-inline: 30px;
+		line-height: 2.85rem;
+		margin-bottom: 0.5rem;
+		white-space: nowrap;
+		width: 100%;
+		text-align: left;
+		box-sizing: border-box;
+		color: var(--navFg);
+
+		&:before, &.post::after {
+			content: "";
+			display: block;
+			width: calc(100% - 34px);
+			height: 100%;
+			margin: auto;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 999px;
+			background: var(--accentedBg);
+			opacity: 0;
+			z-index: -2;
+		}
+
+		> .icon {
+			position: relative;
+			width: 32px;
+			margin-right: 8px;
+		}
+
+		> .indicator {
+			position: absolute;
+			top: 0;
+			left: 20px;
+			color: var(--navIndicator);
+			font-size: 8px;
+		}
+
+		> .animateIndicator {
+			animation: blink 1s infinite;
+		}
+		> .text {
+			position: relative;
+			font-size: 0.9em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&:hover,
+		&:focus-within {
+			text-decoration: none;
+			color: var(--navHoverFg);
+			transition: color 0.4s ease;
+		}
+
+		&.active {
+			color: var(--navActive);
+		}
+
+		&:hover,
+		&:focus-within,
+		&.active {
+			color: var(--accent);
+			opacity: 1;
+			transition: color 0.4s, opacity 0.4s;
+			&::before {
+				opacity: 1;
+			}
+		}
+	}
+	.post {
+		padding-inline: 0;
+		color: var(--fgOnAccent);
+		font-weight: bold;
+
+		&::before {
+			opacity: 1;
+			background: linear-gradient(
+				90deg,
+				var(--buttonGradateA),
+				var(--buttonGradateB)
+			);
+		}
+		&::after {
+			background: var(--accentLighten) !important;
+			opacity: 0;
+			z-index: -1;
+			transition: opacity 0.2s;
+		}
+
+		&:hover,
+		&:focus-within,
+		&.active {
+			&::after {
+				opacity: 1;
+			}
+		}
+
+		> .icon,
+		> .text {
+			position: relative;
+			left: 3rem;
+			margin: 0;
+			width: auto;
+			color: var(--fgOnAccent);
+			transform: translateY(0em);
+		}
+
+		> .text {
+			margin-left: 1rem;
+		}
+	}
+
 	&:not(.iconOnly) {
 		> .body {
 			margin-left: -200px;
@@ -312,57 +431,6 @@ function more(ev: MouseEvent) {
 			> .bottom {
 				padding: 20px 0;
 
-				> .post {
-					position: relative;
-					width: 100%;
-					height: 40px;
-					color: var(--fgOnAccent);
-					font-weight: bold;
-					text-align: left;
-					display: flex;
-					align-items: center;
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 38px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(
-							90deg,
-							var(--buttonGradateA),
-							var(--buttonGradateB)
-						);
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						&:before {
-							background: var(--accentLighten);
-							transition: all 0.4s ease;
-						}
-					}
-
-					> .icon,
-					> .text {
-						position: relative;
-						left: 3rem;
-						color: var(--fgOnAccent);
-						transform: translateY(0em);
-					}
-
-					> .text {
-						margin-left: 1rem;
-					}
-				}
-
 				> .instance {
 					position: relative;
 					display: block;
@@ -400,78 +468,6 @@ function more(ev: MouseEvent) {
 					margin: 16px 16px;
 					border-top: solid 0.5px var(--divider);
 				}
-
-				> .item {
-					position: relative;
-					display: flex;
-					align-items: center;
-					padding-left: 30px;
-					line-height: 2.85rem;
-					margin-bottom: 0.5rem;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> .icon {
-						position: relative;
-						width: 32px;
-						margin-right: 8px;
-					}
-
-					> .indicator {
-						position: absolute;
-						top: 0;
-						left: 20px;
-						color: var(--navIndicator);
-						font-size: 8px;
-					}
-
-					> .animateIndicator {
-						animation: blink 1s infinite;
-					}
-
-					> .text {
-						position: relative;
-						font-size: 0.9em;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
-
-					&:hover,
-					&:focus-within {
-						text-decoration: none;
-						color: var(--navHoverFg);
-						transition: all 0.4s ease;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						color: var(--accent);
-						transition: all 0.4s ease;
-
-						&:before {
-							content: "";
-							display: block;
-							width: calc(100% - 34px);
-							height: 100%;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-					}
-				}
 			}
 		}
 	}
@@ -503,52 +499,6 @@ function more(ev: MouseEvent) {
 			> .bottom {
 				padding: 20px 0;
 
-				> .post {
-					display: block;
-					position: relative;
-					width: 100%;
-					height: 52px;
-					margin-bottom: 16px;
-					text-align: center;
-
-					&:before {
-						content: "";
-						display: block;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						margin: auto;
-						width: 52px;
-						aspect-ratio: 1/1;
-						border-radius: 100%;
-						background: linear-gradient(
-							90deg,
-							var(--buttonGradateA),
-							var(--buttonGradateB)
-						);
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						&:before {
-							background: var(--accentLighten);
-							transition: all 0.4s ease;
-						}
-					}
-
-					> .icon {
-						position: relative;
-						color: var(--fgOnAccent);
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-
 				> .help {
 					position: relative;
 					display: block;
@@ -587,70 +537,56 @@ function more(ev: MouseEvent) {
 					border-top: solid 0.5px var(--divider);
 				}
 
-				> .item {
+			}
-					display: block;
+		}
-					position: relative;
+		.nav-item {
-					padding: 1.1rem 0;
+			padding: 1.1rem 0;
-					margin-bottom: 0.2rem;
+			margin-bottom: 0.2rem;
-					width: 100%;
+			text-align: center;
-					text-align: center;
 
-					> .icon {
+			> .icon {
-						display: block;
+				display: block;
-						margin: 0 auto;
+				margin: 0 auto;
-						opacity: 0.7;
+				opacity: 0.7;
-						transform: translateY(0em);
+				transform: translateY(0em);
-					}
+			}
 
-					> .text {
+			> .text {
-						display: none;
+				display: none;
-					}
+			}
 
-					> .indicator {
+			> .indicator {
-						position: absolute;
+				position: absolute;
-						top: 6px;
+				top: 6px;
-						left: 24px;
+				left: 24px;
-						color: var(--navIndicator);
+				color: var(--navIndicator);
-						font-size: 8px;
+				font-size: 8px;
-					}
+			}
 
-					> .animateIndicator {
+			> .animateIndicator {
-						animation: blink 1s infinite;
+				animation: blink 1s infinite;
-					}
+			}
-
+		}
-					&:hover,
+		.post {
-					&:focus-within,
+			width: 100%;
-					&.active {
+			height: 52px;
-						text-decoration: none;
+			margin-bottom: 16px;
-						color: var(--accent);
+			&:before, &::after {
-						transition: all 0.4s ease;
+				inset: 0;
-
+				margin: auto;
-						&:before {
+				width: 52px;
-							content: "";
+				aspect-ratio: 1/1;
-							display: block;
+			}
-							height: 100%;
+			> .icon {
-							aspect-ratio: 1;
+				left: unset;
-							margin: auto;
+			}
-							position: absolute;
+			> .text {
-							top: 0;
+				display: none;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-
-						> .icon,
-						> .text {
-							opacity: 1;
-						}
-					}
-				}
 			}
 		}
 	}
 
-	.item {
+	.nav-item {
 		outline: none;
 		&:focus-visible:before {
 			outline: auto;

packages/client/src/ui/universal.vue

@@ -490,6 +490,7 @@ console.log(mainRouter.currentRoute.value.name);
 				background: var(--bg);
 				border-radius: calc((2.85rem / 2) + 5px);
 				opacity: 1;
+				z-index: -3;
 			}
 			> ._button:last-child {
 				margin-bottom: 0 !important;

packages/megalodon/src/misskey.ts

@@ -460,7 +460,7 @@ export default class Misskey implements MegalodonInterface {
     if (options) {
       if (options.limit) {
         params = Object.assign(params, {
-          limit: options.limit
+          limit: options.limit <= 100 ? options.limit : 100
         })
       }
       else {
@@ -474,11 +474,11 @@ export default class Misskey implements MegalodonInterface {
         limit: 40
       })
     }
-    return this.client.post<Array<MisskeyAPI.Entity.Follower>>('/api/users/followers', params).then(res => {
+    return this.client.post<Array<MisskeyAPI.Entity.Follower>>('/api/users/followers', params).then(async res => {
-      return Object.assign(res, {
+			return Object.assign(res, {
-        data: res.data.map(f => this.converter.follower(f))
+				data: (await Promise.all(res.data.map(async f => (this.getAccount(f.followerId)).then(p => p.data))))
-      })
+			})
-    })
+		})
   }
 
   /**
@@ -498,15 +498,15 @@ export default class Misskey implements MegalodonInterface {
     if (options) {
       if (options.limit) {
         params = Object.assign(params, {
-          limit: options.limit
+          limit: options.limit <= 100 ? options.limit : 100
         })
       }
     }
-    return this.client.post<Array<MisskeyAPI.Entity.Following>>('/api/users/following', params).then(res => {
+    return this.client.post<Array<MisskeyAPI.Entity.Following>>('/api/users/following', params).then(async res => {
-      return Object.assign(res, {
+			return Object.assign(res, {
-        data: res.data.map(f => this.converter.following(f))
+				data: (await Promise.all(res.data.map(async f => (this.getAccount(f.followeeId)).then(p => p.data))))
-      })
+			})
-    })
+		})
   }
 
   public async getAccountLists(_id: string): Promise<Response<Array<Entity.List>>> {
@@ -1079,23 +1079,11 @@ export default class Misskey implements MegalodonInterface {
   // accounts/preferences
   // ======================================
   public async getPreferences(): Promise<Response<Entity.Preferences>> {
-    return this.client.post<MisskeyAPI.Entity.UserDetailMe>('/api/i').then(res => {
+    return this.client.post<MisskeyAPI.Entity.UserDetailMe>('/api/i').then(async res => {
-      /*
+			return Object.assign(res, {
-      return this.client.post<MisskeyAPI.Entity.GetAll>('/api/i/registry/get-all', {
+				data: this.converter.userPreferences(res.data, await this.getDefaultPostPrivacy())
-        scope: ['client', 'base'],
+			})
-      }).then(ga => {
+		})
-        return Object.assign(res, {
-          data: this.converter.userPreferences(res.data, ga.data)
-        })
-      })
-      */
-
-      // TODO:
-      // FIXME: get this from api
-      return Object.assign(res, {
-          data: this.converter.userPreferences(res.data, {defaultNoteVisibility: "followers", tutorial: -1})
-        })
-      })
   }
 
   // ======================================
@@ -1529,6 +1517,23 @@ export default class Misskey implements MegalodonInterface {
         .then(res => res.data[0] ?? '⭐');
   }
 
+	private async getDefaultPostPrivacy(): Promise<'public' | 'unlisted' | 'private' | 'direct'> {
+		// NOTE: get-unsecure is calckey's extension.
+		//       Misskey doesn't have this endpoint and regular `/i/registry/get` won't work
+		//       unless you have a 'nativeToken', which is reserved for the frontend webapp.
+
+		return this.client
+			.post<string>('/api/i/registry/get-unsecure', {
+				key: 'defaultNoteVisibility',
+				scope: ['client', 'base'],
+			})
+			.then(res => {
+				if (!res.data || (res.data != 'public' && res.data != 'home' && res.data != 'followers' && res.data != 'specified'))
+					return 'public';
+				return this.converter.visibility(res.data);
+			});
+	}
+
   public async unfavouriteStatus(id: string): Promise<Response<Entity.Status>> {
     // NOTE: Misskey allows only one reaction per status, so we don't need to care what that emoji was.
     return this.deleteEmojiReaction(id, '');
@@ -1638,20 +1643,26 @@ export default class Misskey implements MegalodonInterface {
   /**
    * POST /api/drive/files/create
    */
-  public async uploadMedia(file: any, _options?: { description?: string; focus?: string }): Promise<Response<Entity.Attachment>> {
+  public async uploadMedia(file: any, options?: { description?: string; focus?: string }): Promise<Response<Entity.Attachment>> {
     const formData = new FormData()
-    formData.append('file', fs.createReadStream(file.path), {
+		formData.append('file', fs.createReadStream(file.path), {
-      contentType: file.mimetype,
+			contentType: file.mimetype
-      filename: file.originalname,
+		})
-    })
+
+		if (file.originalname != null && file.originalname !== 'file')
+			formData.append('name', file.originalname);
+
+		if (options?.description != null)
+			formData.append('comment', options.description);
+
     let headers: { [key: string]: string } = {}
     if (typeof formData.getHeaders === 'function') {
       headers = formData.getHeaders()
     }
     return this.client
       .post<MisskeyAPI.Entity.File>('/api/drive/files/create', formData, headers)
-      .then(res => ({ ...res, data: this.converter.file(res.data) }))
+			.then(res => ({ ...res, data: this.converter.file(res.data) }))
-  }
+	}
 
   public async getMedia(id: string): Promise<Response<Entity.Attachment>> {
     const res = await this.client.post<MisskeyAPI.Entity.File>('/api/drive/files/show', { fileId: id })
@@ -1679,6 +1690,12 @@ export default class Misskey implements MegalodonInterface {
           isSensitive: options.is_sensitive
         })
       }
+
+			if (options.description !== undefined) {
+				params = Object.assign(params, {
+					comment: options.description
+				})
+			}
     }
     return this.client
       .post<MisskeyAPI.Entity.File>('/api/drive/files/update', params)
@@ -1824,7 +1841,7 @@ export default class Misskey implements MegalodonInterface {
       .post<Array<MisskeyAPI.Entity.Note>>('/api/notes/global-timeline', params)
       .then(async res => ({
         ...res,
-        data: await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))
+        data: (await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))).sort(this.sortByIdDesc)
       }))
   }
 
@@ -1882,7 +1899,7 @@ export default class Misskey implements MegalodonInterface {
       .post<Array<MisskeyAPI.Entity.Note>>('/api/notes/local-timeline', params)
       .then(async res => ({
         ...res,
-        data: await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))
+        data: (await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))).sort(this.sortByIdDesc)
       }))
   }
 
@@ -1946,7 +1963,7 @@ export default class Misskey implements MegalodonInterface {
       .post<Array<MisskeyAPI.Entity.Note>>('/api/notes/search-by-tag', params)
       .then(async res => ({
         ...res,
-        data: await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))
+        data: (await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))).sort(this.sortByIdDesc)
       }))
   }
 
@@ -2001,7 +2018,7 @@ export default class Misskey implements MegalodonInterface {
       .post<Array<MisskeyAPI.Entity.Note>>('/api/notes/timeline', params)
       .then(async res => ({
         ...res,
-        data: await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))
+        data: (await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))).sort(this.sortByIdDesc)
       }))
   }
 
@@ -2057,7 +2074,7 @@ export default class Misskey implements MegalodonInterface {
     }
     return this.client
       .post<Array<MisskeyAPI.Entity.Note>>('/api/notes/user-list-timeline', params)
-      .then(async res => ({ ...res, data: await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache))) }))
+      .then(async res => ({ ...res, data: (await Promise.all(res.data.map(n => this.noteWithDetails(n, this.baseUrlToHost(this.baseUrl), accountCache)))).sort(this.sortByIdDesc) }))
   }
 
   // ======================================
@@ -2127,6 +2144,15 @@ export default class Misskey implements MegalodonInterface {
     })
   }
 
+	private sortByIdDesc(a: Entity.Status, b: Entity.Status): number {
+		if (a.id < b.id)
+			return 1;
+		if (a.id > b.id)
+			return -1;
+
+		return 0;
+	}
+
   // ======================================
   // timelines/lists
   // ======================================
@@ -2259,7 +2285,7 @@ export default class Misskey implements MegalodonInterface {
     if (options) {
       if (options.limit) {
         params = Object.assign(params, {
-          limit: options.limit
+          limit: options.limit <= 100 ? options.limit : 100
         })
       }
       else {

packages/megalodon/src/misskey/api_client.ts

@@ -134,8 +134,8 @@ namespace MisskeyAPI {
         url: acctUrl,
         avatar: u.avatarUrl,
         avatar_static: u.avatarUrl,
-        header: this.plcUrl, // FIXME
+        header: this.plcUrl,
-        header_static: this.plcUrl, // FIXME
+        header_static: this.plcUrl,
         emojis: u.emojis.map(e => this.emoji(e)),
         moved: null,
         fields: [],
@@ -174,13 +174,13 @@ namespace MisskeyAPI {
       }
     }
 
-    userPreferences = (u: MisskeyAPI.Entity.UserDetailMe, g: MisskeyAPI.Entity.GetAll): MegalodonEntity.Preferences => {
+    userPreferences = (u: MisskeyAPI.Entity.UserDetailMe, v: 'public' | 'unlisted' | 'private' | 'direct'): MegalodonEntity.Preferences => {
       return {
         "reading:expand:media": "default",
         "reading:expand:spoilers": false,
         "posting:default:language": u.lang,
         "posting:default:sensitive": u.alwaysMarkNsfw,
-        "posting:default:visibility": this.visibility(g.defaultNoteVisibility)
+        "posting:default:visibility": v
       }
     }
 
@@ -308,7 +308,7 @@ namespace MisskeyAPI {
         emojis: n.emojis.map(e => this.emoji(e)),
         replies_count: n.repliesCount,
         reblogs_count: n.renoteCount,
-        favourites_count: this.getTotalReactions(n.reactions), // FIXME: instead get # of default reaction emoji reactions
+        favourites_count: this.getTotalReactions(n.reactions),
         reblogged: false,
         favourited: !!n.myReaction,
         muted: false,