enhance(frontend): improve MkTip usability

3 files changed, 29 insertions, 7 deletions

diff --git a/packages/frontend/src/components/global/MkTip.vue b/packages/frontend/src/components/global/MkTip.vue
index 384511a0ed..afe204cfcb 100644
--- a/packages/frontend/src/components/global/MkTip.vue
+++ b/packages/frontend/src/components/global/MkTip.vue
@@ -7,7 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div v-if="!store.r.tips.value[props.k]" :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _gaps_s">
 	<div style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</div>
 	<div><slot></slot></div>
-	<MkButton primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+	<div>
+		<MkButton inline primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+		<button class="_button" style="padding: 8px; margin-left: 4px;" @click="showMenu"><i class="ti ti-dots"></i></button>
+	</div>
 </div>
 </template>
 
@@ -15,6 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { i18n } from '@/i18n.js';
 import { store } from '@/store.js';
 import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os.js';
+import { hideAllTips } from '@/store.js';
 
 const props = withDefaults(defineProps<{
 	k: keyof (typeof store['s']['tips']);
@@ -29,6 +34,18 @@ function closeTip() {
 		[props.k]: true,
 	});
 }
+
+function showMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		icon: 'ti ti-bulb-off',
+		text: i18n.ts.hideAllTips,
+		danger: true,
+		action: () => {
+			hideAllTips();
+			os.success();
+		},
+	}], ev.currentTarget ?? ev.target);
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index 9459a9b326..f729903a88 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -161,7 +161,8 @@ import { prefer } from '@/preferences.js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import { signout } from '@/signout.js';
 import { migrateOldSettings } from '@/pref-migrate.js';
-import { store, TIPS } from '@/store.js';
+import { store } from '@/store.js';
+import { hideAllTips as _hideAllTips } from '@/store.js';
 
 const $i = ensureSignin();
 
@@ -210,11 +211,7 @@ function resetAllTips() {
 }
 
 function hideAllTips() {
-	const v = {};
-	for (const k of TIPS) {
-		v[k] = true;
-	}
-	store.set('tips', v);
+	_hideAllTips();
 	os.success();
 }
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 6f9b5786ee..03ef37ced5 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -26,6 +26,14 @@ export const TIPS = [
 	'abuses',
 ] as const;
 
+export function hideAllTips() {
+	const v = {};
+	for (const k of TIPS) {
+		v[k] = true;
+	}
+	store.set('tips', v);
+}
+
 /**
  * 「状態」を管理するストア(not「設定」)
  */