fixes

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			role="button"
 			tabindex="0"
 			@click="showFileMenu(file, $event)"
-			@keydown.space.enter="showFileMenu(element, $event)"
+			@keydown.space.enter="showFileMenu(file, $event)"
 			@contextmenu.prevent="showFileMenu(file, $event)"
 		>
 			<MkDriveFileThumbnail :data-id="file.id" :class="$style.thumbnail" :file="file" fit="cover"/>

packages/frontend/src/components/MkWidgets.vue

@@ -15,11 +15,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<div ref="dndParentEl" :class="$style.editEditing">
-			<div v-for="widget in widgets" :key="widget.id" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
+			<div v-for="widgetId in widgetIds" :key="widgetId" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
-				<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widget.id)"><i class="ti ti-settings"></i></button>
+				<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widgetId)"><i class="ti ti-settings"></i></button>
-				<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(widget)"><i class="ti ti-x"></i></button>
+				<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(getWidgetById(widgetId)!)"><i class="ti ti-x"></i></button>
 				<div class="handle">
-					<component :is="`widget-${widget.name}`" :ref="el => widgetRefs[widget.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
+					<component :is="`widget-${getWidgetById(widgetId)!.name}`" :ref="el => widgetRefs[widgetId] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="getWidgetById(widgetId)!" @updateProps="updateWidget(widgetId, $event)"/>
 				</div>
 			</div>
 		</div>
@@ -28,22 +28,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts">
-export type Widget = {
-	name: string;
-	id: string;
-	data: Record<string, any>;
-};
-export type DefaultStoredWidget = {
-	place: string | null;
-} & Widget;
-</script>
-
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { animations } from '@formkit/drag-and-drop';
-import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
+import { dragAndDrop } from '@formkit/drag-and-drop/vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
 import { widgets as widgetDefs } from '@/widgets/index.js';
@@ -51,21 +40,13 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { isLink } from '@@/js/is-link.js';
 
+import type { Widget, WidgetProps } from '@/widgets/widget.js';
+
 const props = defineProps<{
 	widgets: Widget[];
 	edit: boolean;
 }>();
 
-const [dndParentEl, widgets] = useDragAndDrop(props.widgets, {
-	group: 'SortableMkWidgets',
-	dragHandle: '.handle',
-	plugins: [animations()],
-});
-
-watch(widgets, () => {
-	emit('updateWidgets', widgets.value);
-});
-
 const emit = defineEmits<{
 	(ev: 'updateWidgets', widgets: Widget[]): void;
 	(ev: 'addWidget', widget: Widget): void;
@@ -74,10 +55,40 @@ const emit = defineEmits<{
 	(ev: 'exit'): void;
 }>();
 
+function updateWidgetIds(to: Widget[]) {
+	return to.map(w => w.id);
+}
+
+function getWidgetById(id: string) {
+	return props.widgets.find(w => w.id === id) ?? null;
+}
+
+const widgetIds = ref(updateWidgetIds(props.widgets));
+
+watch(() => props.widgets, (to) => {
+	const updated = updateWidgetIds(to);
+	widgetIds.value = updated;
+});
+
+const dndParentEl = shallowRef<HTMLElement>();
+
+dragAndDrop({
+	parent: dndParentEl,
+	values: widgetIds,
+	plugins: [animations()],
+	dragHandle: '.handle',
+	onDragend: () => {
+		// Widget ids to widget object array
+		const widgets = widgetIds.value.map(id => props.widgets.find(w => w.id === id) ?? null).filter(w => w !== null);
+		emit('updateWidgets', widgets);
+	},
+});
+
 const widgetRefs = {};
 const configWidget = (id: string) => {
 	widgetRefs[id].configure();
 };
+
 const widgetAdderSelected = ref<string | null>(null);
 const addWidget = () => {
 	if (widgetAdderSelected.value == null) return;
@@ -90,10 +101,12 @@ const addWidget = () => {
 
 	widgetAdderSelected.value = null;
 };
-const removeWidget = (widget) => {
+
+const removeWidget = (widget: Widget) => {
 	emit('removeWidget', widget);
 };
-const updateWidget = (id, data) => {
+
+const updateWidget = (id: string, data: Partial<WidgetProps>) => {
 	emit('updateWidget', { id, data });
 };
 

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

@@ -103,17 +103,30 @@ const valueKv = computed(() => {
 	}
 });
 
-const valueIds = computed({
+function updateValueIds(to: Misskey.entities.RoleCondFormulaValue) {
-	get: () => {
+	if (assertLogicFormula(to)) {
-		if (assertLogicFormula(v.value)) {
+		return to.values.map(v => v.id);
-			return v.value.values.map(v => v.id);
 	} else {
 		return [];
 	}
-	},
+}
-	set: (newVal) => {
+
+const valueIds = ref(updateValueIds(v.value));
+
+watch(v, () => {
+	valueIds.value = updateValueIds(v.value);
+}, { deep: true });
+
+dragAndDrop({
+	parent: dndParentEl,
+	values: valueIds,
+	// TODO: v0.2.0時点では親子階層のドラッグアンドドロップは不安定
+	//group: 'roleFormula',
+	dragHandle: '.drag-handle',
+	plugins: [animations()],
+	onDragend: () => {
 		if (assertLogicFormula(v.value)) {
-			v.value.values = newVal.map(id => {
+			v.value.values = valueIds.value.map(id => {
 				if (assertLogicFormula(v.value)) {
 					return v.value.values.find(v => v.id === id) ?? null;
 				} else {
@@ -121,15 +134,7 @@ const valueIds = computed({
 				}
 			}).filter(v => v !== null);
 		}
-	}
+	},
-});
-
-dragAndDrop({
-	parent: dndParentEl,
-	values: valueIds,
-	group: 'roleFormula',
-	dragHandle: '.drag-handle',
-	plugins: [animations()],
 });
 
 const roles = await rolesCache.fetch();

packages/frontend/src/pages/page-editor/page-editor.blocks.vue

@@ -12,10 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { watch, computed, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { animations } from '@formkit/drag-and-drop';
-import { dragAndDrop } from '@formkit/drag-and-drop/vue';
+import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
 import XImage from './els/page-editor.el.image.vue';
@@ -39,16 +38,7 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: Misskey.entities.PageBlock[]): void;
 }>();
 
-const items = computed({
+const [dndParentEl, items] = useDragAndDrop(props.modelValue, {
-	get: () => props.modelValue,
-	set: (v) => emit('update:modelValue', v),
-});
-
-const dndParentEl = shallowRef<HTMLElement>();
-
-dragAndDrop({
-	parent: dndParentEl,
-	values: items,
 	dragHandle: '.drag-handle',
 	group: 'blocks',
 	plugins: [animations()],
@@ -56,12 +46,11 @@ dragAndDrop({
 		horizontal: 0.5,
 		vertical: 0.5,
 	},
+	onDragend: () => {
+		emit('update:modelValue', items.value);
+	},
 });
 
-watch(items, (v) => {
-	emit('update:modelValue', v);
-}, { deep: true });
-
 function updateItem(v: Misskey.entities.PageBlock) {
 	const i = props.modelValue.findIndex(x => x.id === v.id);
 	const newValue = [

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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div class="_gaps_m">
 	<div class="_panel">
-		<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
+		<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : undefined }">
 			<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
 		</div>
 		<div :class="$style.avatarContainer">
@@ -132,6 +132,10 @@ import MkTextarea from '@/components/MkTextarea.vue';
 
 const $i = signinRequired();
 
+function assertValidLang(value: string | null): value is keyof typeof langmap {
+	return value !== null && Object.keys(langmap).includes(value);
+}
+
 const reactionAcceptance = computed(defaultStore.makeGetterSetter('reactionAcceptance'));
 
 const profile = reactive({
@@ -140,7 +144,7 @@ const profile = reactive({
 	followedMessage: $i.followedMessage,
 	location: $i.location,
 	birthday: $i.birthday,
-	lang: $i.lang,
+	lang: assertValidLang($i.lang) ? $i.lang : null,
 	isBot: $i.isBot ?? false,
 	isCat: $i.isCat ?? false,
 });

packages/frontend/src/store.ts

@@ -10,6 +10,7 @@ import lightTheme from '@@/themes/l-light.json5';
 import darkTheme from '@@/themes/d-green-lime.json5';
 import { miLocalStorage } from './local-storage.js';
 import type { SoundType } from '@/scripts/sound.js';
+import type { DefaultStoredWidget } from '@/widgets/widget.js';
 import { Storage } from '@/pizzax.js';
 
 interface PostFormAction {
@@ -179,12 +180,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	widgets: {
 		where: 'account',
-		default: [] as {
+		default: [] as DefaultStoredWidget[],
-			name: string;
-			id: string;
-			place: string | null;
-			data: Record<string, any>;
-		}[],
 	},
 	tl: {
 		where: 'deviceAccount',

packages/frontend/src/widgets/widget.ts

@@ -9,16 +9,23 @@ import { Form, GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import { deepClone } from '@/scripts/clone.js';
 
-export type Widget<P extends Record<string, unknown>> = {
+export type WidgetProps = Record<string, unknown>;
+
+export type Widget<P extends WidgetProps = WidgetProps> = {
+	name: string;
 	id: string;
 	data: Partial<P>;
 };
 
-export type WidgetComponentProps<P extends Record<string, unknown>> = {
+export type DefaultStoredWidget<P extends WidgetProps = WidgetProps> = {
+	place: 'left' | 'right' | null;
+} & Widget<P>;
+
+export type WidgetComponentProps<P extends WidgetProps = WidgetProps> = {
 	widget?: Widget<P>;
 };
 
-export type WidgetComponentEmits<P extends Record<string, unknown>> = {
+export type WidgetComponentEmits<P extends WidgetProps = WidgetProps> = {
 	(ev: 'updateProps', props: P);
 };