Replace classic view widgets w/ the one from default view

packages/client/src/ui/classic.vue

@@ -72,7 +72,7 @@ import {
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue"));
-const XWidgets = defineAsyncComponent(() => import("./classic.widgets.vue"));
+const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -101,7 +101,7 @@ provide("shouldSpacerMin", true);
 function attachSticky(el) {
 	const sticky = new StickySidebar(
 		el,
-		defaultStore.state.menuDisplay === "top" ? 0 : 16,
+		defaultStore.state.menuDisplay === 0,
 		defaultStore.state.menuDisplay === "top" ? 60 : 0
 	); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 	window.addEventListener(
@@ -282,7 +282,6 @@ onMounted(() => {
 		> .widgets {
 			//--panelBorder: none;
 			width: 300px;
-			margin-top: 16px;
 
 			@media (max-width: $widgets-hide-threshold) {
 				display: none;

packages/client/src/ui/classic.widgets.vue

@@ -1,127 +0,0 @@
-<template>
-	<div class="ddiqwdnk">
-		<MkAd class="a" :prefer="['widget']" />
-		<XWidgets
-			class="widgets"
-			:edit="editMode"
-			:widgets="
-				$store.reactiveState.widgets.value.filter(
-					(w) => w.place === place
-				)
-			"
-			@add-widget="addWidget"
-			@remove-widget="removeWidget"
-			@update-widget="updateWidget"
-			@update-widgets="updateWidgets"
-			@exit="editMode = false"
-		/>
-		<button
-			v-if="editMode"
-			class="_textButton edit"
-			style="font-size: 0.9em"
-			@click="editMode = false"
-		>
-			<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
-		</button>
-		<button
-			v-else
-			class="_textButton edit"
-			style="font-size: 0.9em"
-			@click="editMode = true"
-		>
-			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
-		</button>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
-import XWidgets from "@/components/MkWidgets.vue";
-import { i18n } from "@/i18n";
-
-export default defineComponent({
-	components: {
-		XWidgets,
-	},
-
-	props: {
-		place: {
-			type: String,
-		},
-	},
-
-	emits: ["mounted"],
-
-	data() {
-		return {
-			editMode: false,
-			i18n,
-		};
-	},
-
-	mounted() {
-		this.$emit("mounted", this.$el);
-	},
-
-	methods: {
-		addWidget(widget) {
-			this.$store.set("widgets", [
-				{
-					...widget,
-					place: this.place,
-				},
-				...this.$store.state.widgets,
-			]);
-		},
-
-		removeWidget(widget) {
-			this.$store.set(
-				"widgets",
-				this.$store.state.widgets.filter((w) => w.id !== widget.id)
-			);
-		},
-
-		updateWidget({ id, data }) {
-			this.$store.set(
-				"widgets",
-				this.$store.state.widgets.map((w) =>
-					w.id === id
-						? {
-								...w,
-								data,
-						  }
-						: w
-				)
-			);
-		},
-
-		updateWidgets(widgets) {
-			this.$store.set("widgets", [
-				...this.$store.state.widgets.filter(
-					(w) => w.place !== this.place
-				),
-				...widgets,
-			]);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.ddiqwdnk {
-	position: sticky;
-	height: min-content;
-	box-sizing: border-box;
-	padding-bottom: 8px;
-
-	> .widgets,
-	> .a {
-		width: 300px;
-	}
-
-	> .edit {
-		display: block;
-		margin: 16px auto;
-	}
-}
-</style>