feat: Add basic keyboard navigation

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=fb9e13c65ffee8ba7340",
-    "/js/app.js": "/js/app.js?id=6ae33b54881f793f30af"
+    "/css/app.css": "/css/app.css?id=52588253d9a6d5c5e6a1",
+    "/js/app.js": "/js/app.js?id=a6c1d3a18516685e7b15"
 }

resources/assets/js/keyBindings.js

@@ -0,0 +1,35 @@
+const focusSearch = event => {
+    const searchInput = document.querySelector('input[name="q"]');
+    if (searchInput) {
+        event.preventDefault();
+        searchInput.focus();
+    }
+};
+
+const openFirstNonHiddenItem = event => {
+    if (event.target !== document.querySelector('input[name="q"]')) {
+        return;
+    }
+
+    const item = document.querySelector('#sortable section.item-container:not([style="display: none;"]) a');
+
+    if ('href' in item) {
+        event.preventDefault();
+        window.open(item.href);
+    }
+};
+
+const KEY_BINDINGS = {
+    '/': focusSearch,
+    'Enter': openFirstNonHiddenItem
+};
+
+document.addEventListener('keydown', function (event) {
+    try {
+        if (event.key in KEY_BINDINGS) {
+            KEY_BINDINGS[event.key](event);
+        }
+    } catch (e) {
+
+    }
+});

resources/assets/sass/_app.scss

@@ -470,6 +470,9 @@ body {
 		z-index: 1;
 		padding-right: 10px;
 	}
+	.link:focus {
+		background-color: rgba(10,10,10,.4);
+	}
 	.title {
 		font-size: 16px;
 	}

resources/views/layouts/app.blade.php

@@ -98,16 +98,16 @@
 
                         
                         @if(Route::is('dash') || Route::is('tags.show'))
-                        <a id="config-button" class="config" href=""><i class="fas fa-exchange"></i></a>
+                        <a id="config-button" class="config" href="" title="Configuration"><i class="fas fa-exchange"></i></a>
                         @endif
     
-                        <a id="dash" class="config" href="{{ route('dash', []) }}"><i class="fas fa-th"></i></a>
+                        <a id="dash" class="config" href="{{ route('dash', []) }}" title="Dashboard"><i class="fas fa-th"></i></a>
                         @if($current_user->id === 1)
-                        <a id="users" class="config" href="{{ route('users.index', []) }}"><i class="fas fa-user"></i></a>
+                        <a id="users" class="config" href="{{ route('users.index', []) }}" title="Users"><i class="fas fa-user"></i></a>
                         @endif
-                        <a id="items" class="config" href="{{ route('items.index', []) }}"><i class="fas fa-list"></i></a>
-                        <a id="folder" class="config" href="{{ route('tags.index', []) }}"><i class="fas fa-tag"></i></a>
-                        <a id="settings" class="config" href="{{ route('settings.index', []) }}"><i class="fas fa-cogs"></i></a>
+                        <a id="items" class="config" href="{{ route('items.index', []) }}" title="Items"><i class="fas fa-list"></i></a>
+                        <a id="folder" class="config" href="{{ route('tags.index', []) }}" title="Tags"><i class="fas fa-tag"></i></a>
+                        <a id="settings" class="config" href="{{ route('settings.index', []) }}" title="Settings"><i class="fas fa-cogs"></i></a>
                     </div>
                 </main>
 

webpack.mix.js

@@ -14,7 +14,8 @@ let mix = require('laravel-mix');
 mix.babel([
       //'resources/assets/js/jquery-ui.min.js',
       'resources/assets/js/huebee.js',
-      'resources/assets/js/app.js'
+      'resources/assets/js/app.js',
+      'resources/assets/js/keyBindings.js',
       ], 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css').options({
       processCssUrls: false