From 0fa850a7d8f77440c69c7f88a03865604026aeb5 Mon Sep 17 00:00:00 2001
From: Casey Rodarmor <casey@rodarmor.com>
Date: Mon, 19 Oct 2026 21:41:24 -0700
Subject: [PATCH] Move shortcuts link to top nav bar

---
 justfile              |  2 +-
 src/templates/item.rs |  6 ------
 src/templates/page.rs | 29 +++++++++++++++++++++++------
 static/item.css       | 16 ----------------
 static/page.css       | 21 ++++++++++++++++++++-
 static/page.js        |  2 +-
 templates/item.html   |  1 -
 templates/page.html   |  8 +++-----
 8 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/justfile b/justfile
index d62b7ef6..ac69e450 100644
--- a/justfile
+++ b/justfile
@@ -18,7 +18,7 @@ build:
   cargo lbuild
 
 serve: build
-  ./target/debug/filepack serve --address localhost --http-port 8000
+  ./target/debug/filepack --unstable serve --address localhost --http-port 8000
 
 open:
   open http://localhost:8000
diff --git a/src/templates/item.rs b/src/templates/item.rs
index 4304b52b..f9347364 100644
--- a/src/templates/item.rs
+++ b/src/templates/item.rs
@@ -364,7 +364,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -402,7 +401,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -430,7 +428,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -465,7 +462,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -493,7 +489,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       ),
@@ -524,7 +519,6 @@ mod tests {
                 </a>
               </p>
             </hgroup>
-            <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
           </footer>
         "
       )),
diff --git a/src/templates/page.rs b/src/templates/page.rs
index 07fd221a..623a948f 100644
--- a/src/templates/page.rs
+++ b/src/templates/page.rs
@@ -33,12 +33,10 @@ impl<T: Page> PageHtml<T> {
 
     shortcuts.extend(self.content.shortcuts());
 
-    if !shortcuts.is_empty() {
-      shortcuts.push(Shortcut {
-        description: "toggle shortcuts",
-        key: '?',
-      });
-    }
+    shortcuts.push(Shortcut {
+      description: "toggle shortcuts",
+      key: '?',
+    });
 
     shortcuts
   }
@@ -161,6 +159,7 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
@@ -213,11 +212,17 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
                 foo
               </main>
+              <div id=shortcuts popover>
+                <dl>
+                  <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
+                </dl>
+              </div>
             </body>
           </html>
         "
@@ -248,11 +253,17 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
                 foo
               </main>
+              <div id=shortcuts popover>
+                <dl>
+                  <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
+                </dl>
+              </div>
             </body>
           </html>
         "
@@ -286,11 +297,17 @@ mod tests {
                   <a href=/packages>Packages</a>
                   <a href=https://filepack.com/book>Book</a>
                   <a href=https://github.com/casey/filepack>GitHub</a>
+                  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
                 </nav>
               </header>
               <main>
                 bar
               </main>
+              <div id=shortcuts popover>
+                <dl>
+                  <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
+                </dl>
+              </div>
             </body>
           </html>
         "
diff --git a/static/item.css b/static/item.css
index 795dfbec..576d983d 100644
--- a/static/item.css
+++ b/static/item.css
@@ -69,22 +69,6 @@ footer {
       }
     }
   }
-
-  button {
-    background-color: transparent;
-    border: 1px solid var(--border);
-    border-radius: 50%;
-    color: var(--muted);
-    cursor: pointer;
-    font: inherit;
-    height: 1.75em;
-    padding: 0;
-    width: 1.75em;
-
-    &:hover {
-      color: var(--text);
-    }
-  }
 }
 
 audio {
diff --git a/static/page.css b/static/page.css
index 0a8faaea..59d3bc0f 100644
--- a/static/page.css
+++ b/static/page.css
@@ -218,9 +218,28 @@ body > header > nav {
     color: var(--text);
   }
 
-  a:last-child {
+  a:last-of-type {
     margin-inline-start: auto;
   }
+
+  button {
+    align-self: center;
+    background-color: transparent;
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    color: var(--muted);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.7em;
+    height: 1.5em;
+    padding: 0;
+    transition: color var(--duration);
+    width: 1.5em;
+
+    &:hover {
+      color: var(--text);
+    }
+  }
 }
 
 [popover] {
diff --git a/static/page.js b/static/page.js
index 5fdcf0e9..2b0edecc 100644
--- a/static/page.js
+++ b/static/page.js
@@ -12,7 +12,7 @@ document.addEventListener('keydown', (event) => {
     return;
   }
 
-  if (event.key === '?' && shortcuts !== null) {
+  if (event.key === '?') {
     shortcuts.togglePopover();
     return;
   }
diff --git a/templates/item.html b/templates/item.html
index 7b23eca9..a9df87e4 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -36,5 +36,4 @@ <h1>{{ self.item().display_title(self.index) }}</h1>
       </a>
     </p>
   </hgroup>
-  <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
 </footer>
diff --git a/templates/page.html b/templates/page.html
index 82c9d63e..fcec1411 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -42,20 +42,18 @@
         <a href=/packages>Packages</a>
         <a href=https://filepack.com/book>Book</a>
         <a href=https://github.com/casey/filepack>GitHub</a>
+        <button aria-label='Keyboard shortcuts' popovertarget=shortcuts title='Keyboard shortcuts'>?</button>
       </nav>
     </header>
     <main>
       {{ Trusted(&self.content) }}
     </main>
-%% let shortcuts = self.shortcuts();
-%% if !shortcuts.is_empty() {
     <div id=shortcuts popover>
       <dl>
-%%   for shortcut in shortcuts {
+%% for shortcut in self.shortcuts() {
         <div><dt><kbd>{{ shortcut.key }}</kbd></dt><dd>{{ shortcut.description }}</dd></div>
-%%   }
+%% }
       </dl>
     </div>
-%% }
   </body>
 </html>