enhance(client): improve launch pad usability

packages/client/src/ui/_common_/sidebar.vue

@@ -25,69 +25,55 @@
 		<MkA v-click-anime class="item" active-class="active" to="/settings">
 			<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 		</MkA>
-		<button class="item _button post" data-cy-open-post-form @click="post">
+		<button class="item _button post" data-cy-open-post-form @click="os.post">
 			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
 		</button>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
-import { openAccountMenu } from '@/account';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
 
-export default defineComponent({
-	setup(props, context) {
-		const iconOnly = ref(false);
+const iconOnly = ref(false);
 
-		const menu = computed(() => defaultStore.state.menu);
-		const otherMenuItemIndicated = computed(() => {
-			for (const def in menuDef) {
-				if (menu.value.includes(def)) continue;
-				if (menuDef[def].indicated) return true;
-			}
-			return false;
-		});
-
-		const calcViewState = () => {
-			iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
-		};
-
-		calcViewState();
-
-		window.addEventListener('resize', calcViewState);
-
-		watch(defaultStore.reactiveState.menuDisplay, () => {
-			calcViewState();
-		});
-
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menu,
-			menuDef: menuDef,
-			otherMenuItemIndicated,
-			iconOnly,
-			post: os.post,
-			search,
-			openAccountMenu:(ev) => {
-				openAccountMenu({
-					withExtraOperation: true,
-				}, ev);
-			},
-			more: () => {
-				os.popup(import('@/components/launch-pad.vue'), {}, {
-				}, 'closed');
-			},
-		};
-	},
+const menu = computed(() => defaultStore.state.menu);
+const otherMenuItemIndicated = computed(() => {
+	for (const def in menuDef) {
+		if (menu.value.includes(def)) continue;
+		if (menuDef[def].indicated) return true;
+	}
+	return false;
 });
+
+const calcViewState = () => {
+	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+};
+
+calcViewState();
+
+window.addEventListener('resize', calcViewState);
+
+watch(defaultStore.reactiveState.menuDisplay, () => {
+	calcViewState();
+});
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function more(ev: MouseEvent) {
+	os.popup(import('@/components/launch-pad.vue'), {
+		src: ev.currentTarget ?? ev.target,
+	}, {
+	}, 'closed');
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -101,11 +101,13 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(import('@/components/launch-pad.vue'), {}, {
+			os.popup(import('@/components/launch-pad.vue'), {
+				src: ev.currentTarget ?? ev.target,
+			}, {
 			}, 'closed');
 		},
 
-		openAccountMenu:(ev) => {
+		openAccountMenu: (ev) => {
 			openAccountMenu({
 				withExtraOperation: true,
 			}, ev);

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

@@ -122,6 +122,7 @@ export default defineComponent({
 
 		more(ev) {
 			os.popup(import('@/components/launch-pad.vue'), {}, {
+				src: ev.currentTarget ?? ev.target,
 			}, 'closed');
 		},