From 99be766e90a8ee65e8726559b9ef5153295c9f94 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 16 May 2023 14:18:09 +0200
Subject: [PATCH] magic bar

---
 resources/css/app.css                         |  2 +-
 .../views/components/magic-bar.blade.php      | 38 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index b293b3ac6..930542922 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -28,7 +28,7 @@ .magic-input {
     @apply w-[25rem] rounded outline-none bg-coolgray-400 focus:bg-neutral-700 text-white;
 }
 .magic-items {
-    @apply absolute top-14 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;
+    @apply absolute top-12 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;
 }
 .magic-item {
     @apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white;
diff --git a/resources/views/components/magic-bar.blade.php b/resources/views/components/magic-bar.blade.php
index 7bade0bbe..188640359 100644
--- a/resources/views/components/magic-bar.blade.php
+++ b/resources/views/components/magic-bar.blade.php
@@ -50,7 +50,7 @@
         </div>
     </template>
     {{-- Destinations --}}
-    <template x-cloak x-if="destinationMenu">
+    <template x-cloak x-if="destinationMenu"">
         <div x-on:click.outside="closeMenus">
             <input class="magic-input" x-ref="search" x-model="search" placeholder="Select a destination..."
                 x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)"
@@ -103,8 +103,8 @@
                 x-on:keydown.up="focusPrev(environments.length + 1)" x-on:keyup.escape="closeMenus"
                 x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" />
             <div class="magic-items">
-                <div x-on:click="await newEnvironment" class="magic-item"
-                    :class="focusedIndex === 0 && 'magic-item-focused'">
+                <div x-on:click="await newEnvironment" :class="focusedIndex === 0 && 'magic-item-focused'"
+                    class="magic-item">
                     <span>New Environment</span>
                     <span x-text="search"></span>
                 </div>
@@ -133,8 +133,7 @@
                 </template>
                 <template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
                     <div x-on:click="await set('jumpToProject',project.uuid)"
-                        :class="focusedIndex === index && 'magic-item-focused'"
-                        class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
+                        :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
                         <span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Jump</span>
                         <span x-text="project.name"></span>
                     </div>
@@ -157,8 +156,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
                 </template>
                 <template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
                     <div x-on:click="await set('jumpToDestination',destination.uuid)"
-                        :class="focusedIndex === index && 'magic-item-focused'"
-                        class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
+                        :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
                         <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
                         <span x-text="destination.name"></span>
                     </div>
@@ -181,8 +179,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
                 </template>
                 <template x-for="(privateKey,index) in filteredPrivateKeys" :key="privateKey.name ?? privateKey">
                     <div x-on:click="await set('jumpToPrivateKey',privateKey.uuid)"
-                        :class="focusedIndex === index && 'magic-item-focused'"
-                        class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
+                        :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
                         <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
                         <span x-text="privateKey.name"></span>
                     </div>
@@ -205,8 +202,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
                 </template>
                 <template x-for="(source,index) in filteredSources" :key="source.name ?? source">
                     <div x-on:click="await set('jumpToSource',source)"
-                        :class="focusedIndex === index && 'magic-item-focused'"
-                        class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
+                        :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
                         <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
                         <span x-text="source.name"></span>
                     </div>
@@ -301,62 +297,62 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
                 {
                     name: 'Server',
                     type: 'Add',
-                    tags: 'new,server',
+                    tags: 'add,new,server',
                     next: 'newServer'
                 },
                 {
                     name: 'Destination',
                     type: 'Add',
-                    tags: 'new,destination',
+                    tags: 'add,new,destination',
                     next: 'newDestination'
                 },
                 {
                     name: 'Private Key',
                     type: 'Add',
-                    tags: 'new,private-key,ssh,key',
+                    tags: 'add,new,private-key,ssh,key',
                     next: 'newPrivateKey'
                 },
                 {
                     name: 'Source',
                     type: 'Add',
-                    tags: 'new,source,github,gitlab,bitbucket',
+                    tags: 'add,new,source,github,gitlab,bitbucket',
                     next: 'newSource'
                 },
 
                 {
                     name: 'Database',
                     type: 'Add',
-                    tags: 'data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona',
+                    tags: 'add,data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona',
                 },
 
                 {
                     name: 'Servers',
                     type: 'Jump',
-                    tags: 'servers',
+                    tags: 'jump,servers',
                     next: 'server'
                 },
                 {
                     name: 'Projects',
                     type: 'Jump',
-                    tags: 'projects',
+                    tags: 'jump,projects',
                     next: 'projects'
                 },
                 {
                     name: 'Destinations',
                     type: 'Jump',
-                    tags: 'destinations',
+                    tags: 'jump,destinations',
                     next: 'destinations'
                 },
                 {
                     name: 'Private Keys',
                     type: 'Jump',
-                    tags: 'private keys,ssh, keys, key',
+                    tags: 'jump,private keys,ssh, keys, key',
                     next: 'privateKeys'
                 },
                 {
                     name: 'Sources',
                     type: 'Jump',
-                    tags: 'github,apps,source',
+                    tags: 'jump,github,apps,source',
                     next: 'sources'
                 }
             ],