better navbar editor (port from misskey)

packages/client/package.json

@@ -96,6 +96,7 @@
 		"vue-draggable-plus": "^0.2.2",
 		"vue-isyourpasswordsafe": "^2.0.0",
 		"vue-plyr": "^7.0.0",
-		"vue-prism-editor": "2.0.0-alpha.2"
+		"vue-prism-editor": "2.0.0-alpha.2",
+		"vuedraggable": "next"
 	}
 }

packages/client/src/pages/settings/navbar.vue

@@ -1,59 +1,71 @@
 <template>
-	<div class="_formRoot">
+	<div class="_gaps_m">
-		<FormTextarea v-model="items" tall manual-save class="_formBlock">
+		<FormSlot>
 			<template #label>{{ i18n.ts.navbar }}</template>
-			<template #caption
+			<MkContainer :showHeader="false">
-				><button class="_textButton" @click="addItem">
+				<Sortable
-					{{ i18n.ts.addItem }}
+					v-model="items"
-				</button></template
+					itemKey="id"
+					:animation="150"
+					:handle="'.' + $style.itemHandle"
+					@start="e => e.item.classList.add('active')"
+					@end="e => e.item.classList.remove('active')"
 				>
-		</FormTextarea>
+					<template #item="{element,index}">
+						<div
+							v-if="element.type === '-' || navbarItemDef[element.type]"
+							:class="$style.item"
+						>
+							<button class="_button" :class="$style.itemHandle"><i class="ph-list ph-bold ph-lg"></i></button>
+							<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ i18n.ts[navbarItemDef[element.type]?.title] ?? i18n.ts.divider }}</span>
+							<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ph-x ph-bold ph-lg"></i></button>
+						</div>
+					</template>
+				</Sortable>
+			</MkContainer>
+		</FormSlot>
+		<div class="buttons">
+			<MkButton inline @click="addItem"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.addItem }}</MkButton>
+			<MkButton inline danger @click="reset"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</MkButton>
+			<MkButton inline primary class="save" @click="save"><i class="ph-floppy-disk ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
+		</div>
 	
-		<FormRadios v-model="menuDisplay" class="_formBlock">
+		<FormRadios v-model="menuDisplay">
 			<template #label>{{ i18n.ts.display }}</template>
-			<option value="sideFull">
+			<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
-				{{ i18n.ts._menuDisplay.sideFull }}
+			<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
-			</option>
-			<option value="sideIcon">
-				{{ i18n.ts._menuDisplay.sideIcon }}
-			</option>
 			<!--<option value="top">{{ i18n.ts._menuDisplay.top }}</option>-->
-			<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>-->
+			<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-			<!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 		</FormRadios>
-
-		<FormButton danger class="_formBlock" @click="reset()"
-			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
-			{{ i18n.ts.default }}</FormButton
-		>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import FormTextarea from "@/components/form/textarea.vue";
 import FormRadios from "@/components/form/radios.vue";
-import FormButton from "@/components/MkButton.vue";
+import MkButton from '@/components/MkButton.vue';
-import * as os from "@/os";
+import FormSlot from '@/components/form/slot.vue';
-import { navbarItemDef } from "@/navbar";
+import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from "@/store";
+import * as os from '@/os';
-import { unisonReload } from "@/scripts/unison-reload";
+import { navbarItemDef } from '@/navbar';
-import { i18n } from "@/i18n";
+import { defaultStore } from '@/store';
-import { definePageMetadata } from "@/scripts/page-metadata";
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { deepClone } from '@/scripts/clone';
 
-const items = ref(defaultStore.state.menu.join("\n"));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
-const split = computed(() =>
+const items = ref(defaultStore.state.menu.map(x => ({
-	items.value
+	id: Math.random().toString(),
-		.trim()
+	type: x,
-		.split("\n")
+})));
-		.filter((x) => x.trim() !== ""),
+
-);
+const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
-const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
-		type: "info",
+		type: 'info',
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -62,40 +74,38 @@ async function reloadAsk() {
 }
 
 async function addItem() {
-	const menu = Object.keys(navbarItemDef).filter(
+	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
-		(k) => !defaultStore.state.menu.includes(k),
-	);
 	const { canceled, result: item } = await os.select({
 		title: i18n.ts.addItem,
-		items: [
+		items: [...menu.map(k => ({
-			...menu.map((k) => ({
+			value: k, text: i18n.ts[navbarItemDef[k].title],
-				value: k,
+		})), {
-				text: i18n.ts[navbarItemDef[k].title],
+			value: '-', text: i18n.ts.divider,
-			})),
+		}],
-			{
-				value: "-",
-				text: i18n.ts.divider,
-			},
-		],
 	});
 	if (canceled) return;
-	items.value = [...split.value, item].join("\n");
+	items.value = [...items.value, {
+		id: Math.random().toString(),
+		type: item,
+	}];
+}
+
+function removeItem(index: number) {
+	items.value.splice(index, 1);
 }
 
 async function save() {
-	defaultStore.set("menu", split.value);
+	defaultStore.set('menu', items.value.map(x => x.type));
 	await reloadAsk();
 }
 
 function reset() {
-	defaultStore.reset("menu");
+	items.value = defaultStore.def.menu.default.map(x => ({
-	items.value = defaultStore.state.menu.join("\n");
+		id: Math.random().toString(),
+		type: x,
+	}));
 }
 
-watch(items, async () => {
-	await save();
-});
-
 watch(menuDisplay, async () => {
 	await reloadAsk();
 });
@@ -106,6 +116,47 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.navbar,
-	icon: "ph-list-bullets ph-bold ph-lg",
+	icon: 'ti ti-list',
 });
 </script>
+
+<style lang="scss" module>
+.item {
+	position: relative;
+	display: block;
+	line-height: 2.85rem;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	color: var(--navFg);
+}
+
+.itemIcon {
+	position: relative;
+	width: 32px;
+	margin-right: 8px;
+}
+
+.itemText {
+	position: relative;
+	font-size: 0.9em;
+}
+
+.itemRemove {
+	position: absolute;
+	z-index: 10000;
+	width: 32px;
+	height: 32px;
+	color: #ff2a2a;
+	right: 8px;
+	opacity: 0.8;
+}
+
+.itemHandle {
+	cursor: move;
+	width: 32px;
+	height: 32px;
+	margin: 0 8px;
+	opacity: 0.5;
+}
+</style>