feat: ✨ draggable navbar items in settings

Co-authored-by: Syuilo <syuilotan@yahoo.co.jp>
Co-authored-by: moshibar <moshibar@mailo.com>

packages/client/src/navbar.ts

@@ -5,10 +5,6 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { ui } from "@/config";
 import { unisonReload } from "@/scripts/unison-reload";
-import { defaultStore } from "@/store";
-import { instance } from "@/instance";
-import { host } from "@/config";
-import XTutorial from "@/components/MkTutorialDialog.vue";
 
 export const navbarItemDef = reactive({
 	notifications: {
@@ -60,14 +56,6 @@ export const navbarItemDef = reactive({
 		show: computed(() => $i != null),
 		to: "/my/lists",
 	},
-	/*
-	groups: {
-		title: 'groups',
-		icon: 'ph-users-three ph-bold ph-lg',
-		show: computed(() => $i != null),
-		to: '/my/groups',
-	},
-	*/
 	antennas: {
 		title: "antennas",
 		icon: "ph-flying-saucer ph-bold ph-lg",

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

@@ -1,13 +1,41 @@
 <template>
 	<div class="_formRoot">
-		<FormTextarea v-model="items" tall manual-save class="_formBlock">
+		<FormSlot>
-			<template #label>{{ i18n.ts.navbar }}</template>
+			<VueDraggable
-			<template #caption
+				v-model="items"
-				><button class="_textButton" @click="addItem">
+				animation="150"
-					{{ i18n.ts.addItem }}
+				delay="50"
-				</button></template
+				@end="reloadAsk"
 			>
-		</FormTextarea>
+				<div
+					v-for="(element, index) in items"
+					:key="index"
+					class="item"
+				>
+					<i class="itemHandle ph-list ph-bold ph-lg"></i>
+					<i
+						:class="
+							navbarItemDef[element]?.icon ??
+							'ph-arrows-out-line-vertical ph-bold ph-lg'
+						"
+					></i>
+					<span class="itemText">{{
+						i18n.ts[navbarItemDef[element]?.title] ??
+						i18n.ts.divider
+					}}</span>
+					<button
+						class="_button itemRemove"
+						@click="removeItem(index)"
+					>
+						<i class="ph-x ph-bold ph-lg"></i>
+					</button>
+				</div>
+			</VueDraggable>
+			<FormButton primary class="_formBlock" @click="addItem">
+				<i class="ph-plus ph-bold ph-lg"></i>
+				{{ i18n.ts.addItem }}
+			</FormButton>
+		</FormSlot>
 
 		<FormRadios v-model="menuDisplay" class="_formBlock">
 			<template #label>{{ i18n.ts.display }}</template>
@@ -31,7 +59,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
-import FormTextarea from "@/components/form/textarea.vue";
+import FormSlot from "@/components/form/slot.vue";
 import FormRadios from "@/components/form/radios.vue";
 import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -39,16 +67,11 @@ import { navbarItemDef } from "@/navbar";
 import { defaultStore } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
+import { VueDraggable } from "vue-draggable-plus";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const items = ref(defaultStore.state.menu.join("\n"));
+const items = ref(defaultStore.state.menu);
 
-const split = computed(() =>
-	items.value
-		.trim()
-		.split("\n")
-		.filter((x) => x.trim() !== ""),
-);
 const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
 
 async function reloadAsk() {
@@ -79,17 +102,21 @@ async function addItem() {
 		],
 	});
 	if (canceled) return;
-	items.value = [...split.value, item].join("\n");
+	items.value = [...items.value, item];
+}
+
+async function removeItem(index) {
+	items.value = items.value.filter((_, i) => i !== index);
 }
 
 async function save() {
-	defaultStore.set("menu", split.value);
+	defaultStore.set("menu", items.value);
 	await reloadAsk();
 }
 
 function reset() {
 	defaultStore.reset("menu");
-	items.value = defaultStore.state.menu.join("\n");
+	items.value = defaultStore.state.menu;
 }
 
 watch(items, async () => {
@@ -109,3 +136,47 @@ definePageMetadata({
 	icon: "ph-list-bullets ph-bold ph-lg",
 });
 </script>
+
+<style lang="scss" scoped>
+.item {
+	position: relative;
+	display: block;
+	line-height: 2.85rem;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	border-radius: var(--radius);
+	margin-bottom: 0.5rem;
+	color: var(--navFg);
+	background-color: var(--panel);
+
+	> .itemIcon {
+		position: relative;
+	}
+
+	> .itemText {
+		position: relative;
+		font-size: 0.9em;
+		margin-left: 1rem;
+	}
+
+	> .itemRemove {
+		position: absolute;
+		z-index: 10000;
+		width: 32px;
+		height: 32px;
+		color: var(--error);
+		top: 4px;
+		right: 8px;
+		opacity: 0.8;
+	}
+
+	> .itemHandle {
+		cursor: move;
+		width: 32px;
+		height: 32px;
+		margin: 0 1rem;
+		opacity: 0.5;
+	}
+}
+</style>