feat: ✨ help menu

locales/en-US.yml

@@ -1786,3 +1786,20 @@ _deck:
     list: "List"
     mentions: "Mentions"
     direct: "Direct messages"
+_apps:
+  apps: "Apps"
+  crossPlatform: "Cross platform"
+  mobile: "Android"
+  desktop: "iOS"
+  firstParty: "First party"
+  firstClass: "First class"
+  secondClass: "Second class"
+  thirdClass: "Third class"
+  desktop: "Desktop"
+  pwa: "Install PWA"
+  kaiteki: "Kaiteki"
+  milktea: "Milktea"
+  subwayTooter: "Subway Tooter"
+  kimis: "Kimis"
+  theDesk: "TheDesk"
+  lesskey: "Lesskey"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.1.3-beta",
+	"version": "13.1.3-beta1",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/package.json

@@ -7,12 +7,14 @@
 		"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
 	},
 	"dependencies": {
-
+		"@khmyznikov/pwa-install": "^0.2.0"
 	},
 	"devDependencies": {
+		"@discordapp/twemoji": "14.0.2",
 		"@rollup/plugin-alias": "3.1.9",
 		"@rollup/plugin-json": "4.1.0",
 		"@rollup/pluginutils": "^4.2.1",
+		"@syuilo/aiscript": "0.11.1",
 		"@types/escape-regexp": "0.0.1",
 		"@types/glob": "8.0.0",
 		"@types/gulp": "4.0.10",
@@ -26,13 +28,6 @@
 		"@types/uuid": "8.3.4",
 		"@vitejs/plugin-vue": "4.0.0",
 		"@vue/compiler-sfc": "3.2.45",
-		"cross-env": "7.0.3",
-		"cypress": "10.11.0",
-		"rollup": "3.9.1",
-		"start-server-and-test": "1.15.2",
-		"typescript": "4.9.4",
-		"@discordapp/twemoji": "14.0.2",
-		"@syuilo/aiscript": "0.11.1",
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.2",
 		"blurhash": "1.1.5",
@@ -45,6 +40,8 @@
 		"chartjs-plugin-zoom": "1.2.1",
 		"compare-versions": "5.0.3",
 		"cropperjs": "2.0.0-beta.2",
+		"cross-env": "7.0.3",
+		"cypress": "10.11.0",
 		"date-fns": "2.29.3",
 		"escape-regexp": "0.0.1",
 		"eventemitter3": "4.0.7",
@@ -59,9 +56,11 @@
 		"punycode": "2.1.1",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
+		"rollup": "3.9.1",
 		"s-age": "1.1.2",
 		"sass": "1.57.1",
 		"seedrandom": "3.0.5",
+		"start-server-and-test": "1.15.2",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"swiper": "^8.4.5",
@@ -73,6 +72,7 @@
 		"tsc-alias": "1.8.2",
 		"tsconfig-paths": "4.1.2",
 		"twemoji-parser": "14.0.0",
+		"typescript": "4.9.4",
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.8.0",
 		"vite": "^4.1.1",

packages/client/src/pages/apps.vue

@@ -0,0 +1,53 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div style="overflow: clip;">
+		<MkSpacer :content-max="600" :margin-min="20">
+			<div class="_formRoot">
+				<FormSection>
+					<template #label>{{ i18n.ts._apps.crossPlatform }}</template>
+					<div class="_formLinks">
+						<div class="_formBlock" style="text-align: center;">
+							<pwa-install/>
+							<MkButton primary rounded inline @click="installPwa">{{ i18n.ts._apps.pwa }}</MkButton>
+						</div>
+						<FormLink to="https://kaiteki.app" external>
+							<template #icon>
+								<i class="ph-device-mobile-bold ph-xl"/>
+								<i class="ph-android-logo-bold ph-lg"/>
+								<i class="ph-desktop-bold ph-xl"/>
+								<i class="ph-windows-logo-bold ph-lg"/>
+								<i class="ph-linux-logo-bold ph-lg"/>
+							</template>
+							{{ i18n.ts._apps.kaiteki }}
+							<template #suffix>{{ i18n.ts._apps.firstClass }}</template>
+						</FormLink>
+					</div>
+				</FormSection>
+			</div>
+		</MkSpacer>
+	</div>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import '@khmyznikov/pwa-install';
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+function installPwa(ev: MouseEvent) {
+	const pwaInstall = document.getElementsByTagName('pwa-install')[0];
+	pwaInstall.install();
+}
+
+definePageMetadata({
+	title: i18n.ts._apps.apps,
+	icon: null,
+});
+</script>

packages/client/src/router.ts

@@ -282,6 +282,10 @@ export const routes = [
 		path: "/about-calckey",
 		component: page(() => import("./pages/about-calckey.vue")),
 	},
+	{
+		path: "/apps",
+		component: page(() => import("./pages/apps.vue")),
+	},
 	{
 		path: "/theme-editor",
 		component: page(() => import("./pages/theme-editor.vue")),

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

@@ -44,9 +44,17 @@
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
 				<i class="icon ph-pencil-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
-			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+			<div>
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+				<button v-tooltip.noDelay.right="i18n.ts.info" class="item _button post" data-cy-open-post-form @click="openInfoMenu">
+					<i class="icon ph-info-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
 				</button>
+				<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button post" data-cy-open-post-form @click="openHelpMenu">
+					<i class="icon ph-question-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+			</div>
+			<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			</button> -->
 			<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
 			</button> -->
@@ -122,7 +130,7 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }
 
-function openInstanceMenu(ev: MouseEvent) {
+function openHelpMenu(ev: MouseEvent) {
 	os.popupMenu([{
 		text: instance.name ?? host,
 		type: 'label',
@@ -131,11 +139,26 @@ function openInstanceMenu(ev: MouseEvent) {
 		text: i18n.ts.instanceInfo,
 		icon: 'ph-info-bold ph-lg',
 		to: '/about',
-	}, null, {
+	}, {
-		type: 'parent',
+		type: 'link',
-		text: i18n.ts.help,
+		text: i18n.ts.aboutMisskey,
-		icon: 'ph-question-bold ph-lg',
+		icon: 'ph-lightbulb-bold ph-lg',
-		children: [{
+		to: '/about-calckey',
+	}, {
+		type: 'link',
+		text: i18n.ts.mobileApps,
+		icon: 'ph-device-mobile-bold ph-lg',
+		to: '/apps',
+	}], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
+}
+
+function openInfoMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: instance.name ?? host,
+		type: 'label',
+	}, {
 			type: 'link',
 			to: '/mfm-cheat-sheet',
 			text: i18n.ts._mfm.cheatSheet,
@@ -158,20 +181,7 @@ function openInstanceMenu(ev: MouseEvent) {
 			to: '/api-console',
 			text: 'API Console',
 			icon: 'ph-terminal-window-bold ph-lg',
-		}, null, {
-			text: i18n.ts.document,
-			icon: 'ph-question-bold ph-lg',
-			action: () => {
-				window.open('https://misskey-hub.net/help.html', '_blank');
 		},
-		}],
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		to: '/about-calckey',
-	}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
 }
 
 function more(ev: MouseEvent) {

pnpm-lock.yaml

@@ -383,6 +383,7 @@ importers:
   packages/client:
     specifiers:
       '@discordapp/twemoji': 14.0.2
+      '@khmyznikov/pwa-install': ^0.2.0
       '@rollup/plugin-alias': 3.1.9
       '@rollup/plugin-json': 4.1.0
       '@rollup/pluginutils': ^4.2.1
@@ -453,6 +454,8 @@ importers:
       vue-plyr: ^7.0.0
       vue-prism-editor: 2.0.0-alpha.2
       vuedraggable: 4.1.0
+    dependencies:
+      '@khmyznikov/pwa-install': 0.2.0
     devDependencies:
       '@discordapp/twemoji': 14.0.2
       '@rollup/plugin-alias': 3.1.9_rollup@3.9.1
@@ -1186,6 +1189,13 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@khmyznikov/pwa-install/0.2.0:
+    resolution: {integrity: sha512-Lz8lvCf47/DCVzXgLyCGt46HDpie2U/lga++vOgVwil3B8bSMj8fL1+a/8oBhDikHjtLKinTCMf0jZvgW2xCZQ==}
+    dependencies:
+      '@lit/localize': 0.11.4
+      lit: 2.6.1
+    dev: false
+
   /@koa/cors/3.4.3:
     resolution: {integrity: sha512-WPXQUaAeAMVaLTEFpoq3T2O1C+FstkjJnDQqy95Ck1UdILajsRhu6mhJ8H2f4NFPRBoCNN+qywTJfq/gGki5mw==}
     engines: {node: '>= 8.0.0'}
@@ -1219,6 +1229,23 @@ packages:
     resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
     dev: true
 
+  /@lit-labs/ssr-dom-shim/1.0.0:
+    resolution: {integrity: sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==}
+    dev: false
+
+  /@lit/localize/0.11.4:
+    resolution: {integrity: sha512-RRIwIX2tAm3+DuEndoXSJrFjGrAK5cb5IXo5K6jcJ6sbgD829B8rSqHC5MaKVUmXTVLIR1bk5IZOZDf9wFereA==}
+    dependencies:
+      '@lit/reactive-element': 1.6.1
+      lit: 2.6.1
+    dev: false
+
+  /@lit/reactive-element/1.6.1:
+    resolution: {integrity: sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.0.0
+    dev: false
+
   /@mapbox/node-pre-gyp/1.0.9:
     resolution: {integrity: sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==}
     hasBin: true
@@ -2457,6 +2484,10 @@ packages:
     resolution: {integrity: sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==}
     dev: true
 
+  /@types/trusted-types/2.0.2:
+    resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
+    dev: false
+
   /@types/undertaker-registry/1.0.1:
     resolution: {integrity: sha512-Z4TYuEKn9+RbNVk1Ll2SS4x1JeLHecolIbM/a8gveaHsW0Hr+RQMraZACwTO2VD7JvepgA6UO1A1VrbktQrIbQ==}
     dev: true
@@ -3256,7 +3287,7 @@ packages:
   /axios/0.25.0_debug@4.3.4:
     resolution: {integrity: sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.4
     transitivePeerDependencies:
       - debug
     dev: true
@@ -6196,6 +6227,19 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
+    dev: false
+
+  /follow-redirects/1.15.2_debug@4.3.4:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.4
+    dev: true
 
   /for-each/0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -8349,6 +8393,27 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
+  /lit-element/3.2.2:
+    resolution: {integrity: sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==}
+    dependencies:
+      '@lit/reactive-element': 1.6.1
+      lit-html: 2.6.1
+    dev: false
+
+  /lit-html/2.6.1:
+    resolution: {integrity: sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==}
+    dependencies:
+      '@types/trusted-types': 2.0.2
+    dev: false
+
+  /lit/2.6.1:
+    resolution: {integrity: sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==}
+    dependencies:
+      '@lit/reactive-element': 1.6.1
+      lit-element: 3.2.2
+      lit-html: 2.6.1
+    dev: false
+
   /load-json-file/1.1.0:
     resolution: {integrity: sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==}
     engines: {node: '>=0.10.0'}