From f2f403db5e063a7d50002ed580f77d21eece4cbd Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Tue, 1 Aug 2023 18:43:55 +0900
Subject: [PATCH 1/3] feat: add keyboard shortcut helper link

---
 components/nav/NavFooter.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 9331e333f5..565d1519a2 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -92,5 +92,10 @@ function toggleDark() {
         GitHub
       </NuxtLink>
     </div>
+    <div>
+      <button hover:underline @click="toggleKeyboardShortcuts">
+        {{ $t('magic_keys.dialog_header') }}
+      </button>
+    </div>
   </footer>
 </template>

From 2a24e1de084db26b9f03bf7c003f9698b6120773 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sat, 26 Aug 2023 02:16:28 +0900
Subject: [PATCH 2/3] feat: put keyboard shortcut helper button

---
 components/nav/NavFooter.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 565d1519a2..f492f45e0c 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -16,6 +16,9 @@ function toggleDark() {
 <template>
   <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2" items-center mb4>
+      <CommonTooltip :content="$t('magic_keys.dialog_header')">
+        <button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
+      </CommonTooltip>
       <CommonTooltip :content="$t('nav.toggle_theme')">
         <button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
       </CommonTooltip>

From 0924910f5c7ff6d1ad9ca1e70d84b68dfa6082bd Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 28 Aug 2023 23:49:26 +0900
Subject: [PATCH 3/3] fix: move keyboard shortcut helper button to between zen
 and sponsors

---
 components/nav/NavFooter.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index f492f45e0c..10856c8127 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -16,9 +16,6 @@ function toggleDark() {
 <template>
   <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2" items-center mb4>
-      <CommonTooltip :content="$t('magic_keys.dialog_header')">
-        <button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
-      </CommonTooltip>
       <CommonTooltip :content="$t('nav.toggle_theme')">
         <button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
       </CommonTooltip>
@@ -31,6 +28,9 @@ function toggleDark() {
           @click="togglePreferences('zenMode')"
         />
       </CommonTooltip>
+      <CommonTooltip :content="$t('magic_keys.dialog_header')">
+        <button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
+      </CommonTooltip>
       <CommonTooltip :content="$t('settings.about.sponsor_action')">
         <NuxtLink
           flex