enhance(client): Sync widgets (#8512)

* feature: sync widgets among devices

* fix

* nanka iroiro
* classic.widgets.vueの機能をuniversal.widgets.vueに統合
* 左右のウィジェット編集状態を同期するように
* 左右やカラム間でウィジェットを行き来できるように
* MkWidgetsをCSS Module化

* set min-height: 100px;

* fix deck widget

* Update packages/client/src/ui/deck/widgets-column.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

* merge

* Update classic.vue

* Delete classic.widgets.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 49 insertions, 9 deletions

diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue
index 33fb492836..002aab1090 100644
--- a/packages/frontend/src/ui/universal.widgets.vue
+++ b/packages/frontend/src/ui/universal.widgets.vue
@@ -1,25 +1,44 @@
 <template>
-<div class="efzpzdvf">
-	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+<div class="efzpzdvf" :class="{ universal: !classic, classic }">
+	<XWidgets :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
 	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>
 
+<script lang="ts">
+let editMode = $ref(false);
+</script>
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import XWidgets from '@/components/MkWidgets.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 
+const props = withDefaults(defineProps<{
+	// null = 全てのウィジェットを表示
+	// left = place: leftだけを表示
+	// right = rightとnullを表示
+	place?: 'left' | null | 'right';
+	classic?: boolean;
+}>(), {
+	place: null,
+	classic: false,
+});
+
 const emit = defineEmits<{
-	(ev: 'mounted', el: Element): void;
+	(ev: 'mounted', el?: Element): void;
 }>();
 
-let editMode = $ref(false);
 let rootEl = $ref<HTMLDivElement>();
 
+const widgets = $computed(() => {
+	if (props.place === null) return defaultStore.reactiveState.widgets.value;
+	if (props.place === 'left') return defaultStore.reactiveState.widgets.value.filter(w => w.place === 'left');
+	return defaultStore.reactiveState.widgets.value.filter(w => w.place !== 'left');
+});
+
 onMounted(() => {
 	emit('mounted', rootEl);
 });
@@ -27,7 +46,7 @@ onMounted(() => {
 function addWidget(widget) {
 	defaultStore.set('widgets', [{
 		...widget,
-		place: null,
+		place: props.place,
 	}, ...defaultStore.state.widgets]);
 }
 
@@ -39,11 +58,26 @@ function updateWidget({ id, data }) {
 	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
 		...w,
 		data,
+		place: props.place,
 	} : w));
 }
 
-function updateWidgets(widgets) {
-	defaultStore.set('widgets', widgets);
+function updateWidgets(thisWidgets) {
+	if (props.place === null) {
+		defaultStore.set('widgets', thisWidgets);
+		return;
+	}
+	if (props.place === 'left') {
+		defaultStore.set('widgets', [
+			...thisWidgets.map(w => ({ ...w, place: 'left' })),
+			...defaultStore.state.widgets.filter(w => w.place !== 'left' && !thisWidgets.some(t => w.id === t.id)),
+		]);
+		return;
+	}
+	defaultStore.set('widgets', [
+		...defaultStore.state.widgets.filter(w => w.place === 'left' && !thisWidgets.some(t => w.id === t.id)),
+		...thisWidgets.map(w => ({ ...w, place: 'right' })),
+	]);
 }
 </script>
 
@@ -52,11 +86,17 @@ function updateWidgets(widgets) {
 	position: sticky;
 	height: min-content;
 	min-height: 100vh;
-	padding: var(--margin) 0;
 	box-sizing: border-box;
 
+	&.universal {
+		padding: var(--margin) 0;
+
+		> * {
+			margin: var(--margin) 0;
+		}
+	}
+
 	> * {
-		margin: var(--margin) 0;
 		width: 300px;
 
 		&:first-child {