From 2160b9aaa0d13a6920728da53848f09c7b9eafeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 08:27:26 +0100
Subject: [PATCH] style: unify keyboard shortcut hints across tools using
 Pastel style

- Add shortcut hints below tool descriptions in Figlet and Units pages
- Revert experimental button-based shortcut layout in Units
- Remove redundant shortcut hints from Units footer
- Ensure consistent kbd tag styling across the application
---
 app/(app)/figlet/page.tsx      |  6 ++++++
 app/(app)/units/page.tsx       |  8 ++++++++
 components/units/ui/Footer.tsx | 18 ------------------
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/app/(app)/figlet/page.tsx b/app/(app)/figlet/page.tsx
index 443ec15..9ee593f 100644
--- a/app/(app)/figlet/page.tsx
+++ b/app/(app)/figlet/page.tsx
@@ -9,6 +9,12 @@ export default function FigletPage() {
           <p className="text-muted-foreground">
             ASCII Art Text Generator with 373 Fonts
           </p>
+          <div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <kbd className="px-2 py-1 bg-muted rounded border">/</kbd>
+            <span>Focus Search</span>
+            <kbd className="px-2 py-1 bg-muted rounded border ml-3">ESC</kbd>
+            <span>Clear Search</span>
+          </div>
         </div>
         <FigletConverter />
       </div>
diff --git a/app/(app)/units/page.tsx b/app/(app)/units/page.tsx
index 179f5ce..c01c30d 100644
--- a/app/(app)/units/page.tsx
+++ b/app/(app)/units/page.tsx
@@ -9,6 +9,14 @@ export default function UnitsPage() {
           <p className="text-muted-foreground">
             Smart unit converter with 187 units across 23 categories
           </p>
+          <div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <kbd className="px-2 py-1 bg-muted rounded border">/</kbd>
+            <span>Focus Search</span>
+            <kbd className="px-2 py-1 bg-muted rounded border ml-3">Ctrl+K</kbd>
+            <span>Command Palette</span>
+            <kbd className="px-2 py-1 bg-muted rounded border ml-3">ESC</kbd>
+            <span>Close Dialogs</span>
+          </div>
         </div>
         <MainConverter />
       </div>
diff --git a/components/units/ui/Footer.tsx b/components/units/ui/Footer.tsx
index 86f6d42..1dd1e99 100644
--- a/components/units/ui/Footer.tsx
+++ b/components/units/ui/Footer.tsx
@@ -65,24 +65,6 @@ export default function Footer() {
                 </a>
               </li>
             </ul>
-
-            {/* Keyboard Shortcuts */}
-            <div className="mt-4">
-              <h4 className="font-semibold text-sm mb-2">Keyboard Shortcuts</h4>
-              <ul className="space-y-1 text-xs text-muted-foreground">
-                <li>
-                  <kbd className="px-1.5 py-0.5 bg-muted rounded">/</kbd> Focus search
-                </li>
-                <li>
-                  <kbd className="px-1.5 py-0.5 bg-muted rounded">Ctrl</kbd>
-                  {' + '}
-                  <kbd className="px-1.5 py-0.5 bg-muted rounded">K</kbd> Command palette
-                </li>
-                <li>
-                  <kbd className="px-1.5 py-0.5 bg-muted rounded">ESC</kbd> Close dialogs
-                </li>
-              </ul>
-            </div>
           </div>
         </div>