いいかんじ

packages/frontend/src/components/MkNoteDetailed.vue

@@ -93,6 +93,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<footer>
 			<div :class="$style.noteFooterInfo">
+				<div v-if="appearNote.updatedAt">
+					{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
+				</div>
 				<MkA :to="notePage(appearNote)">
 					<MkTime :time="appearNote.createdAt" mode="detail"/>
 				</MkA>

packages/frontend/src/components/MkNoteHeader.vue

@@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<img v-for="role in note.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
 	</div>
 	<div :class="$style.info">
+		<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
 		<MkA :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
 		</MkA>

packages/frontend/src/components/MkNotificationSelectWindow.vue

@@ -0,0 +1,78 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	:withOkButton="true"
+	:okButtonDisabled="false"
+	@ok="ok()"
+	@close="dialog?.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.notificationSetting }}</template>
+
+	<MkSpacer :marginMin="20" :marginMax="28">
+		<div class="_gaps_m">
+			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+			<div class="_buttons">
+				<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
+				<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
+			</div>
+			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype].value">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
+		</div>
+	</MkSpacer>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref, Ref } from 'vue';
+import MkSwitch from './MkSwitch.vue';
+import MkInfo from './MkInfo.vue';
+import MkButton from './MkButton.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { notificationTypes } from '@/const.js';
+import { i18n } from '@/i18n.js';
+
+type TypesMap = Record<typeof notificationTypes[number], Ref<boolean>>
+
+const emit = defineEmits<{
+	(ev: 'done', v: { excludeTypes: string[] }): void,
+	(ev: 'closed'): void,
+}>();
+
+const props = withDefaults(defineProps<{
+	excludeTypes?: typeof notificationTypes[number][];
+}>(), {
+	excludeTypes: () => [],
+});
+
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
+
+const typesMap: TypesMap = notificationTypes.reduce((p, t) => ({ ...p, [t]: ref<boolean>(!props.excludeTypes.includes(t)) }), {} as any);
+
+function ok() {
+	emit('done', {
+		excludeTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
+			.filter(type => !typesMap[type].value),
+	});
+
+	if (dialog) dialog.close();
+}
+
+function disableAll() {
+	for (const type of notificationTypes) {
+		typesMap[type].value = false;
+	}
+}
+
+function enableAll() {
+	for (const type of notificationTypes) {
+		typesMap[type].value = true;
+	}
+}
+</script>

packages/frontend/src/components/MkNotificationSettingWindow.vue

@@ -1,95 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and other misskey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	:withOkButton="true"
-	:okButtonDisabled="false"
-	@ok="ok()"
-	@close="dialog?.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.notificationSetting }}</template>
-
-	<MkSpacer :marginMin="20" :marginMax="28">
-		<div class="_gaps_m">
-			<template v-if="showGlobalToggle">
-				<MkSwitch v-model="useGlobalSetting">
-					{{ i18n.ts.useGlobalSetting }}
-					<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
-				</MkSwitch>
-			</template>
-			<template v-if="!useGlobalSetting">
-				<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-				<div class="_buttons">
-					<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-					<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-				</div>
-				<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype].value">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
-			</template>
-		</div>
-	</MkSpacer>
-</MkModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { ref, Ref } from 'vue';
-import MkSwitch from './MkSwitch.vue';
-import MkInfo from './MkInfo.vue';
-import MkButton from './MkButton.vue';
-import MkModalWindow from '@/components/MkModalWindow.vue';
-import { notificationTypes } from '@/const';
-import { i18n } from '@/i18n.js';
-
-type TypesMap = Record<typeof notificationTypes[number], Ref<boolean>>
-
-const emit = defineEmits<{
-	(ev: 'done', v: { includingTypes: string[] | null }): void,
-	(ev: 'closed'): void,
-}>();
-
-const props = withDefaults(defineProps<{
-	includingTypes?: typeof notificationTypes[number][] | null;
-	showGlobalToggle?: boolean;
-}>(), {
-	includingTypes: () => [],
-	showGlobalToggle: true,
-});
-
-let includingTypes = $computed(() => props.includingTypes?.filter(x => notificationTypes.includes(x)) ?? []);
-
-const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
-
-const typesMap: TypesMap = notificationTypes.reduce((p, t) => ({ ...p, [t]: ref<boolean>(includingTypes.includes(t)) }), {} as any);
-let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
-
-function ok() {
-	if (useGlobalSetting) {
-		emit('done', { includingTypes: null });
-	} else {
-		emit('done', {
-			includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
-				.filter(type => typesMap[type].value),
-		});
-	}
-
-	if (dialog) dialog.close();
-}
-
-function disableAll() {
-	for (const type of notificationTypes) {
-		typesMap[type].value = false;
-	}
-}
-
-function enableAll() {
-	for (const type of notificationTypes) {
-		typesMap[type].value = true;
-	}
-}
-</script>

packages/frontend/src/components/MkNotifications.vue

@@ -30,11 +30,11 @@ import MkNote from '@/components/MkNote.vue';
 import { useStream } from '@/stream.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { notificationTypes } from '@/const';
+import { notificationTypes } from '@/const.js';
 import { infoImageUrl } from '@/instance.js';
 
 const props = defineProps<{
-	includeTypes?: typeof notificationTypes[number][];
+	excludeTypes?: typeof notificationTypes[number][];
 }>();
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
@@ -43,13 +43,12 @@ const pagination: Paging = {
 	endpoint: 'i/notifications' as const,
 	limit: 10,
 	params: computed(() => ({
-		includeTypes: props.includeTypes ?? undefined,
-		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
+		excludeTypes: props.excludeTypes ?? undefined,
 	})),
 };
 
 const onNotification = (notification) => {
-	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
+	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || document.visibilityState === 'visible') {
 		useStream().send('readNotification');
 	}

packages/frontend/src/components/MkNotifyButton.vue

@@ -0,0 +1,367 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+<template>
+  <button
+      class="_button"
+      :class="[$style.root,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'
+,}]"  v-if="isFollowing"
+      @click="onClick"
+  >
+        <span v-if="props.user.notify === 'none'" :class="[{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }] "><i class="ti ti-bell"></i></span>
+        <span v-else-if="props.user.notify === 'normal'" :class="[{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"><i class="ti ti-bell-off"></i></span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import * as Misskey from 'misskey-js';
+import * as os from '@/os.js';
+import {useStream} from '@/stream.js';
+import {defaultStore} from "@/store.js";
+
+let gaming = ref('');
+
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+const props = withDefaults(defineProps<{
+  user: Misskey.entities.UserDetailed,
+  full?: boolean,
+  large?: boolean,
+}>(), {
+  full: false,
+  large: false,
+});
+
+let isFollowing = $ref(props.user.isFollowing);
+let notify = $ref(props.user.notify);
+const connection = useStream().useChannel('main');
+
+if (props.user.isFollowing == null) {
+  os.api('users/show', {
+    userId: props.user.id,
+  }).then(onFollowChange);
+}
+
+if (props.user.notify == null) {
+  os.api('users/show', {
+    userId: props.user.id,
+  }).then(onNotifyChange);
+}
+
+function onFollowChange(user: Misskey.entities.UserDetailed) {
+  if (user.id === props.user.id) {
+    isFollowing = user.isFollowing;
+  }
+}
+function onNotifyChange(user: Misskey.entities.UserDetailed) {
+  if (user.id === props.user.id) {
+    notify = user.notify;
+    console.log(props.user.notify)
+  }
+}
+async function onClick() {
+  try {
+      await 		os.apiWithDialog('following/update', {
+        userId: props.user.id,
+        notify: props.user.notify === 'normal' ? 'none' : 'normal',
+      }).then(() => {
+        props.user.notify = props.user.notify === 'normal' ? 'none' : 'normal';
+      });
+  }finally {
+
+  }
+}
+
+onMounted(() => {
+  connection.on('follow', onFollowChange);
+  connection.on('unfollow', onFollowChange);
+});
+onBeforeUnmount(() => {
+  connection.dispose();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+  position: relative;
+  display: inline-block;
+  font-weight: bold;
+  color: var(--fgOnWhite);
+  border: solid 1px var(--accent);
+  padding: 0;
+  height: 31px;
+  font-size: 16px;
+  border-radius: 32px;
+  background: #fff;
+  vertical-align: bottom;
+
+  &.gamingDark {
+    color: black !important;
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+    -moz-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+    animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+    border: solid 1px black;
+  }
+
+  &.gamingLight {
+    color: white !important;
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+    -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+    animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+    border: solid 1px white;
+  }
+
+  &.full {
+    padding: 0 8px 0 12px;
+    font-size: 14px;
+    &.gamingDark {
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      -moz-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+
+    }
+
+    &.gamingLight {
+      color: white;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+    }
+  }
+
+  &.large {
+    font-size: 16px;
+    height: 38px;
+    padding: 0 12px 0 16px;
+  }
+
+  &:not(.full) {
+    width: 31px;
+  }
+
+  &:focus-visible {
+    &:after {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      bottom: -5px;
+      left: -5px;
+      border: 2px solid var(--focus);
+      border-radius: 32px;
+    }
+  }
+
+  &:hover {
+    //background: mix($primary, #fff, 20);
+  }
+
+  &:active {
+    //background: mix($primary, #fff, 40);
+  }
+
+  &.active {
+    color: var(--fgOnAccent);
+    background: var(--accent);
+
+    &:hover {
+      background: var(--accentLighten);
+      border-color: var(--accentLighten);
+    }
+
+    &:active {
+      background: var(--accentDarken);
+      border-color: var(--accentDarken);
+    }
+
+    &.gamingDark:hover {
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      -moz-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      border: solid 1px white;
+    }
+
+    &.gamingDark:active {
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      -moz-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      border: solid 1px white;
+    }
+
+    &.gamingLight:hover {
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      border: solid 1px white;
+    }
+
+    &.gamingLight:active {
+      color: white;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      border: solid 1px white;
+    }
+
+    &.gamingDark {
+      -webkit-text-fill-color: unset !important;
+      color: black;
+      border: solid 1px white;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      -moz-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite;
+    }
+
+    &.gamingLight {
+      -webkit-text-fill-color: unset !important;
+      color: white;
+      border: solid 1px white;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+
+    }
+
+  }
+
+
+}
+
+
+  .gamingDark {
+    color: black;
+
+  }
+
+  .gamingLight {
+    color: white;
+
+  }
+
+
+@-webkit-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-moz-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-webkit-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-moz-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+</style>

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

@@ -5,11 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header>
+		<XHeader :actions="headerActions" :tabs="headerTabs" />
+	</template>
 	<MkSpacer :contentMax="900">
+		<MkSwitch :modelValue="publishing" @update:modelValue="onChangePublishing">
+			{{ i18n.ts.publishing }}
+		</MkSwitch>
 		<div>
 			<div v-for="ad in ads" class="_panel _gaps_m" :class="$style.ad">
-				<MkAd v-if="ad.url" :specify="ad"/>
+				<MkAd v-if="ad.url" :specify="ad" />
 				<MkInput v-model="ad.url" type="url">
 					<template #label>URL</template>
 				</MkInput>
@@ -46,7 +51,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span>
 						{{ i18n.ts._ad.timezoneinfo }}
 						<div v-for="(day, index) in daysOfWeek" :key="index">
-							<input :id="`ad${ad.id}-${index}`" type="checkbox" :checked="(ad.dayOfWeek & (1 << index)) !== 0" @change="toggleDayOfWeek(ad, index)">
+							<input :id="`ad${ad.id}-${index}`" type="checkbox" :checked="(ad.dayOfWeek & (1 << index)) !== 0"
+								@change="toggleDayOfWeek(ad, index)">
 							<label :for="`ad${ad.id}-${index}`">{{ day }}</label>
 						</div>
 					</span>
@@ -55,8 +61,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.memo }}</template>
 				</MkTextarea>
 				<div class="buttons">
-					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i
+							class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}
+					</MkButton>
 				</div>
 			</div>
 			<MkButton class="button" @click="more()">
@@ -75,6 +83,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@@ -86,8 +95,9 @@ let ads: any[] = $ref([]);
 const localTime = new Date();
 const localTimeDiff = localTime.getTimezoneOffset() * 60 * 1000;
 const daysOfWeek: string[] = [i18n.ts._weekday.sunday, i18n.ts._weekday.monday, i18n.ts._weekday.tuesday, i18n.ts._weekday.wednesday, i18n.ts._weekday.thursday, i18n.ts._weekday.friday, i18n.ts._weekday.saturday];
+let publishing = false;
 
-os.api('admin/ad/list').then(adsResponse => {
+os.api('admin/ad/list', { publishing: publishing }).then(adsResponse => {
 	ads = adsResponse.map(r => {
 		const exdate = new Date(r.expiresAt);
 		const stdate = new Date(r.startsAt);
@@ -101,6 +111,10 @@ os.api('admin/ad/list').then(adsResponse => {
 	});
 });
 
+const onChangePublishing = (v) => {
+	publishing = v;
+	refresh();
+};
 // 選択された曜日(index)のビットフラグを操作する
 function toggleDayOfWeek(ad, index) {
 	ad.dayOfWeek ^= 1 << index;
@@ -131,6 +145,8 @@ function remove(ad) {
 		if (ad.id == null) return;
 		os.apiWithDialog('admin/ad/delete', {
 			id: ad.id,
+		}).then(() => {
+			refresh();
 		});
 	});
 }
@@ -172,7 +188,7 @@ function save(ad) {
 	}
 }
 function more() {
-	os.api('admin/ad/list', { untilId: ads.reduce((acc, ad) => ad.id != null ? ad : acc).id }).then(adsResponse => {
+	os.api('admin/ad/list', { untilId: ads.reduce((acc, ad) => ad.id != null ? ad : acc).id, publishing: publishing }).then(adsResponse => {
 		ads = ads.concat(adsResponse.map(r => {
 			const exdate = new Date(r.expiresAt);
 			const stdate = new Date(r.startsAt);
@@ -188,7 +204,7 @@ function more() {
 }
 
 function refresh() {
-	os.api('admin/ad/list').then(adsResponse => {
+	os.api('admin/ad/list', { publishing: publishing }).then(adsResponse => {
 		ads = adsResponse.map(r => {
 			const exdate = new Date(r.expiresAt);
 			const stdate = new Date(r.startsAt);

packages/frontend/src/pages/admin/modlog.ModLog.vue

@@ -6,7 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkFolder>
 	<template #label>
-		<b>{{ i18n.ts._moderationLogTypes[log.type] }}</b>
+		<b
+			:class="{
+				[$style.logGreen]: ['createRole', 'addCustomEmoji', 'createGlobalAnnouncement', 'createUserAnnouncement', 'createAd', 'createInvitation'].includes(log.type),
+				[$style.logYellow]: ['markSensitiveDriveFile', 'resetPassword'].includes(log.type),
+				[$style.logRed]: ['suspend', 'deleteRole', 'suspendRemoteInstance', 'deleteGlobalAnnouncement', 'deleteUserAnnouncement', 'deleteCustomEmoji', 'deleteNote', 'deleteDriveFile', 'deleteAd'].includes(log.type)
+			}"
+		>{{ i18n.ts._moderationLogTypes[log.type] }}</b>
 		<span v-if="log.type === 'updateUserNote'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'suspend'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'unsuspend'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
@@ -18,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-else-if="log.type === 'deleteRole'">: {{ log.info.role.name }}</span>
 		<span v-else-if="log.type === 'addCustomEmoji'">: {{ log.info.emoji.name }}</span>
 		<span v-else-if="log.type === 'updateCustomEmoji'">: {{ log.info.before.name }}</span>
+		<span v-else-if="log.type === 'deleteCustomEmoji'">: {{ log.info.emoji.name }}</span>
 		<span v-else-if="log.type === 'markSensitiveDriveFile'">: @{{ log.info.fileUserUsername }}{{ log.info.fileUserHost ? '@' + log.info.fileUserHost : '' }}</span>
 		<span v-else-if="log.type === 'unmarkSensitiveDriveFile'">: @{{ log.info.fileUserUsername }}{{ log.info.fileUserHost ? '@' + log.info.fileUserHost : '' }}</span>
 		<span v-else-if="log.type === 'suspendRemoteInstance'">: {{ log.info.host }}</span>
@@ -76,6 +83,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
 			</div>
 		</template>
+		<template v-else-if="log.type === 'updateAd'">
+			<div :class="$style.diff">
+				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
+			</div>
+		</template>
 
 		<details>
 			<summary>raw</summary>
@@ -114,4 +126,16 @@ const props = defineProps<{
 	border-radius: 6px;
 	overflow: clip;
 }
+
+.logYellow {
+	color: var(--warning);
+}
+
+.logRed {
+	color: var(--error);
+}
+
+.logGreen {
+	color: var(--success);
+}
 </style>

packages/frontend/src/pages/notifications.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div v-if="tab === 'all'">
-			<XNotifications class="notifications" :includeTypes="includeTypes"/>
+			<XNotifications class="notifications" :excludeTypes="excludeTypes"/>
 		</div>
 		<div v-else-if="tab === 'mentions'">
 			<MkNotes :pagination="mentionsPagination"/>
@@ -27,10 +27,11 @@ import MkNotes from '@/components/MkNotes.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { notificationTypes } from '@/const';
+import { notificationTypes } from '@/const.js';
 
 let tab = $ref('all');
 let includeTypes = $ref<string[] | null>(null);
+const excludeTypes = $computed(() => includeTypes ? notificationTypes.filter(t => !includeTypes.includes(t)) : null);
 
 const mentionsPagination = {
 	endpoint: 'notes/mentions' as const,

packages/frontend/src/pages/settings/notifications.notification-config.vue

@@ -0,0 +1,50 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<MkSelect v-model="type">
+		<option value="all">{{ i18n.ts.all }}</option>
+		<option value="following">{{ i18n.ts.following }}</option>
+		<option value="follower">{{ i18n.ts.followers }}</option>
+		<option value="mutualFollow">{{ i18n.ts.mutualFollow }}</option>
+		<option value="list">{{ i18n.ts.userList }}</option>
+		<option value="never">{{ i18n.ts.none }}</option>
+	</MkSelect>
+
+	<MkSelect v-if="type === 'list'" v-model="userListId">
+		<template #label>{{ i18n.ts.userList }}</template>
+		<option v-for="list in props.userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
+	</MkSelect>
+
+	<div class="_buttons">
+		<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkSelect from '@/components/MkSelect.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+
+const props = defineProps<{
+	value: any;
+	userLists: Misskey.entities.UserList[];
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update', result: any): void;
+}>();
+
+let type = $ref(props.value.type);
+let userListId = $ref(props.value.userListId);
+
+function save() {
+	emit('update', { type, userListId });
+}
+</script>

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

@@ -5,7 +5,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<FormLink @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
+	<FormSection first>
+		<template #label>{{ i18n.ts.notificationRecieveConfig }}</template>
+		<div class="_gaps_s">
+			<MkFolder v-for="type in notificationTypes" :key="type">
+				<template #label>{{ i18n.t('_notification._types.' + type) }}</template>
+				<template #suffix>
+					{{
+						$i.notificationRecieveConfig[type]?.type === 'never' ? i18n.ts.none :
+						$i.notificationRecieveConfig[type]?.type === 'following' ? i18n.ts.following :
+						$i.notificationRecieveConfig[type]?.type === 'follower' ? i18n.ts.followers :
+						$i.notificationRecieveConfig[type]?.type === 'mutualFollow' ? i18n.ts.mutualFollow :
+						$i.notificationRecieveConfig[type]?.type === 'list' ? i18n.ts.userList :
+						i18n.ts.all
+					}}
+				</template>
+
+				<XNotificationConfig :userLists="userLists" :value="$i.notificationRecieveConfig[type] ?? { type: 'all' }" @update="(res) => updateReceiveConfig(type, res)"/>
+			</MkFolder>
+		</div>
+	</FormSection>
 	<FormSection>
 		<div class="_gaps_m">
 			<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
@@ -37,19 +56,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import XNotificationConfig from './notifications.notification-config.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
-import { notificationTypes } from '@/const';
+import { notificationTypes } from '@/const.js';
 
 let allowButton = $shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
 let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
 let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
+const userLists = await os.api('users/lists/list');
 
 async function readAllUnreadNotes() {
 	await os.api('i/read-all-unread-notes');
@@ -59,21 +81,15 @@ async function readAllNotifications() {
 	await os.api('notifications/mark-all-as-read');
 }
 
-function configure() {
-	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes,
-		showGlobalToggle: false,
-	}, {
-		done: async (res) => {
-			const { includingTypes: value } = res;
-			await os.apiWithDialog('i/update', {
-				mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
-			}).then(i => {
-				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
-			});
+async function updateReceiveConfig(type, value) {
+	await os.apiWithDialog('i/update', {
+		notificationRecieveConfig: {
+			...$i!.notificationRecieveConfig,
+			[type]: value,
 		},
-	}, 'closed');
+	}).then(i => {
+		$i!.notificationRecieveConfig = i.notificationRecieveConfig;
+	});
 }
 
 function onChangeSendReadMessage(v: boolean) {

packages/frontend/src/pages/timeline.vue

@@ -183,7 +183,7 @@ const headerTabs = $computed(() => [...(defaultStore.reactiveState.pinnedUserLis
 }] : []), {
 	key: 'social',
 	title: i18n.ts._timelines.social,
-	icon: 'ti ti-universe',
+	icon: 'ti ti-rocket',
 	iconOnly: true,
 }] : []), ...(isGlobalTimelineAvailable ? [{
 	key: 'global',

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

@@ -34,6 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 						<div v-if="$i" class="actions">
 							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
+              <MkNotifyButton v-if="$i.id != user.id " :user="user"></MkNotifyButton>
 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
@@ -166,6 +167,7 @@ import { confetti } from '@/scripts/confetti.js';
 import MkNotes from '@/components/MkNotes.vue';
 import { api } from '@/os.js';
 import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
+import MkNotifyButton from "@/components/MkNotifyButton.vue";
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);

packages/frontend/src/scripts/use-note-capture.ts

@@ -72,6 +72,7 @@ export function useNoteCapture(props: {
 			}
 
 			case 'updated': {
+				note.value.updatedAt = new Date().toISOString();
 				note.value.cw = body.cw;
 				note.value.text = body.text;
 				break;

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

@@ -65,9 +65,7 @@ const dev = _DEV_;
 
 let notifications = $ref<Misskey.entities.Notification[]>([]);
 
-function onNotification(notification: Misskey.entities.Notification, isClient: boolean = false) {
-	if ($i.mutingNotificationTypes.includes(notification.type)) return;
-
+function onNotification(notification: Misskey.entities.Notification, isClient = false) {
 	if (document.visibilityState === 'visible') {
 		if (!isClient) {
 			useStream().send('readNotification');

packages/frontend/src/ui/deck/notifications-column.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <XColumn :column="column" :isStacked="isStacked" :menu="menu">
 	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
-	<XNotifications :includeTypes="column.includingTypes"/>
+	<XNotifications :excludeTypes="props.column.excludeTypes"/>
 </XColumn>
 </template>
 
@@ -25,13 +25,13 @@ const props = defineProps<{
 }>();
 
 function func() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: props.column.includingTypes,
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
+		excludeTypes: props.column.excludeTypes,
 	}, {
 		done: async (res) => {
-			const { includingTypes } = res;
+			const { excludeTypes } = res;
 			updateColumn(props.column.id, {
-				includingTypes: includingTypes,
+				excludeTypes: excludeTypes,
 			});
 		},
 	}, 'closed');

packages/frontend/src/widgets/WidgetActivity.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import XCalendar from './WidgetActivity.calendar.vue';
 import XChart from './WidgetActivity.chart.vue';
 import { GetFormResultType } from '@/scripts/form.js';

packages/frontend/src/widgets/WidgetAichan.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, shallowRef } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 
 const name = 'ai';

packages/frontend/src/widgets/WidgetAiscript.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { Interpreter, Parser, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import MkContainer from '@/components/MkContainer.vue';

packages/frontend/src/widgets/WidgetAiscriptApp.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, Ref, ref, watch } from 'vue';
 import { Interpreter, Parser } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import { createAiScriptEnv } from '@/scripts/aiscript/api.js';

packages/frontend/src/widgets/WidgetButton.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { Interpreter, Parser } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import { createAiScriptEnv } from '@/scripts/aiscript/api.js';

packages/frontend/src/widgets/WidgetCalendar.vue

@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { i18n } from '@/i18n.js';
 import { useInterval } from '@/scripts/use-interval.js';

packages/frontend/src/widgets/WidgetClicker.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkClickerGame from '@/components/MkClickerGame.vue';

packages/frontend/src/widgets/WidgetClock.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkAnalogClock from '@/components/MkAnalogClock.vue';

packages/frontend/src/widgets/WidgetDigitalClock.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { timezones } from '@/scripts/timezones.js';
 import MkDigitalClock from '@/components/MkDigitalClock.vue';

packages/frontend/src/widgets/WidgetFederation.vue

@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';

packages/frontend/src/widgets/WidgetInstanceCloud.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';

packages/frontend/src/widgets/WidgetJobQueue.vue

@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, reactive } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { useStream } from '@/stream.js';
 import number from '@/filters/number.js';

packages/frontend/src/widgets/WidgetMemo.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { defaultStore } from '@/store.js';

packages/frontend/src/widgets/WidgetNotifications.vue

@@ -10,14 +10,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
 
 	<div>
-		<XNotifications :includeTypes="widgetProps.includingTypes"/>
+		<XNotifications :excludeTypes="widgetProps.excludeTypes"/>
 	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import XNotifications from '@/components/MkNotifications.vue';
@@ -35,10 +35,10 @@ const widgetPropsDef = {
 		type: 'number' as const,
 		default: 300,
 	},
-	includingTypes: {
+	excludeTypes: {
 		type: 'array' as const,
 		hidden: true,
-		default: null,
+		default: [],
 	},
 };
 
@@ -54,12 +54,12 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 );
 
 const configureNotification = () => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: widgetProps.includingTypes,
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
+		excludeTypes: widgetProps.excludeTypes,
 	}, {
 		done: async (res) => {
-			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes;
+			const { excludeTypes } = res;
+			widgetProps.excludeTypes = excludeTypes;
 			save();
 		},
 	}, 'closed');

packages/frontend/src/widgets/WidgetOnlineUsers.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import { useInterval } from '@/scripts/use-interval.js';

packages/frontend/src/widgets/WidgetPhotos.vue

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { useStream } from '@/stream.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';

packages/frontend/src/widgets/WidgetPostForm.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkPostForm from '@/components/MkPostForm.vue';
 

packages/frontend/src/widgets/WidgetProfile.vue

@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { $i } from '@/account.js';
 import { userPage } from '@/filters/user.js';

packages/frontend/src/widgets/WidgetRss.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { url as base } from '@/config.js';

packages/frontend/src/widgets/WidgetRssTicker.vue

@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import MarqueeText from '@/components/MkMarquee.vue';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';

packages/frontend/src/widgets/WidgetSlideshow.vue

@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref, shallowRef } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import { useInterval } from '@/scripts/use-interval.js';

packages/frontend/src/widgets/WidgetTimeline.vue

@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import MkContainer from '@/components/MkContainer.vue';

packages/frontend/src/widgets/WidgetTrends.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';

packages/frontend/src/widgets/WidgetUnixClock.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 
 const name = 'unixClock';

packages/frontend/src/widgets/WidgetUserList.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import * as os from '@/os.js';