feat: refine announcement (#11497)

* wip

* Update read-announcement.ts

* wip

* wip

* wip

* Update index.d.ts

* wip

* Create 1691649257651-refine-announcement.js

* wip

* wip

* wip

* wip

* wip

* wip

* Update announcements.vue

* wip

* wip

* Update announcements.vue

* wip

* Update announcements.vue

* wip

* Update misskey-js.api.md

* Update users.ts

* Create MkAnnouncementDialog.stories.impl.ts

* wip

* wip

* Create AnnouncementService.ts

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;