wip

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

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
 		<div class="_gaps_m">
-			<section v-for="announcement in announcements" class="">
+			<section v-for="announcement in announcements" :key="announcement.id ?? announcement._id" class="">
 				<div class="_panel _gaps_m" style="padding: 24px;">
 					<MkInput v-model="announcement.title">
 						<template #label>{{ i18n.ts.title }}</template>
@@ -73,6 +73,7 @@ os.api('admin/announcements/list').then(announcementResponse => {
 
 function add() {
 	announcements.unshift({
+		_id: Math.random().toString(36),
 		id: null,
 		title: '',
 		text: '',

packages/frontend/src/ui/_common_/announcements.vue

@@ -0,0 +1,61 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div
+		v-for="announcement in $i.unreadAnnouncements" :key="announcement.id" :class="$style.item"
+	>
+		<span :class="$style.icon">
+			<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+			<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+			<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
+			<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
+		</span>
+		<span :class="$style.title">{{ announcement.title }}</span>
+		<span :class="$style.body">{{ announcement.text }}</span>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { $i } from '@/account';
+</script>
+
+<style lang="scss" module>
+.root {
+	font-size: 15px;
+	background: var(--panel);
+}
+
+.item {
+	--height: 24px;
+	font-size: 0.85em;
+
+	display: flex;
+	vertical-align: bottom;
+	width: 100%;
+	line-height: var(--height);
+	height: var(--height);
+	overflow: clip;
+	contain: strict;
+	background: var(--accent);
+	color: var(--fgOnAccent);
+}
+
+.title {
+	padding: 0 10px;
+	font-weight: bold;
+
+	&:empty {
+		display: none;
+	}
+}
+
+.body {
+	min-width: 0;
+	flex: 1;
+}
+</style>

packages/frontend/src/ui/deck.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XSidebar v-if="!isMobile"/>
 
 	<div :class="$style.main">
+		<XAnnouncements v-if="$i" :class="$style.announcements"/>
 		<XStatusBars/>
 		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
 			<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@@ -113,6 +114,7 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
 import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
 
 const columnComponents = {
 	main: XMainColumn,

packages/frontend/src/ui/universal.vue

@@ -8,7 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
 	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
-		<template #header><XStatusBars :class="$style.statusbars"/></template>
+		<template #header>
+			<div>
+				<XAnnouncements v-if="$i" :class="$style.announcements"/>
+				<XStatusBars :class="$style.statusbars"/>
+			</div>
+		</template>
 		<RouterView/>
 		<div :class="$style.spacer"></div>
 	</MkStickyContainer>
@@ -105,6 +110,7 @@ import { useScrollPositionManager } from '@/nirax';
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
 
 const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;