From e2a5b5706e7dcd4415a55c9d7830f18de8a74f81 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 6 Jun 2023 13:48:20 +0200
Subject: [PATCH] updates

---
 resources/css/app.css                       | 10 +--
 resources/js/components/MagicBar.vue        | 79 ++++++++++++++-------
 resources/views/components/layout.blade.php |  3 +-
 resources/views/components/navbar.blade.php |  2 +-
 4 files changed, 59 insertions(+), 35 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 088291967..6c3c141b1 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -14,7 +14,7 @@ body {
     @apply scrollbar min-h-screen bg-coolgray-100 text-neutral-400 antialiased;
 }
 main {
-    @apply px-32 xl:px-14 mx-auto max-w-screen-xl;
+    @apply px-32 xl:px-14 mx-auto max-w-screen-xl pt-4;
 }
 
 input[type="checkbox"] {
@@ -70,7 +70,7 @@ a {
 }
 
 .main-navbar {
-    @apply fixed h-full overflow-hidden;
+    @apply fixed h-full overflow-hidden pt-14;
 }
 .icon {
     @apply w-6 h-6;
@@ -82,13 +82,13 @@ .box {
     @apply flex items-center justify-center text-sm rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline transition-colors;
 }
 
-.main-menu {
+/* .main-menu {
     @apply relative float-left;
 }
 .main-menu:after {
     content: "/";
-    @apply absolute border border-dotted rounded border-neutral-600 right-0 top-0 text-warning mx-1 px-2 mt-[0.3rem] text-sm;
-}
+    @apply absolute border border-dotted rounded border-neutral-600 right-1 top-0 text-warning mx-1 px-2 mt-[0.3rem] text-sm;
+} */
 .magic-badge {
     @apply min-w-fit px-2 rounded text-center border border-dotted border-primary text-white text-xs;
 }
diff --git a/resources/js/components/MagicBar.vue b/resources/js/components/MagicBar.vue
index 921fdbf7d..dabb2b79c 100644
--- a/resources/js/components/MagicBar.vue
+++ b/resources/js/components/MagicBar.vue
@@ -1,28 +1,22 @@
 <template>
     <Transition name="fade">
-        <div class="z-10 mt-2">
-            <div class="overflow-hidden transition-all transform" v-if="!showCommandPalette"
+        <div class="z-10">
+            <div class="flex items-center p-1 px-2 overflow-hidden transition-all transform rounded cursor-pointer bg-coolgray-200"
                 @click="showCommandPalette = true">
-                <div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5 ">
-                    <div class="relative">
-                        <svg class="absolute w-5 h-5 text-gray-400 pointer-events-none left-3 top-2.5" viewBox="0 0 20 20"
-                            fill="currentColor" aria-hidden="true">
-                            <path fill-rule="evenodd"
-                                d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-                                clip-rule="evenodd" />
-                        </svg>
-                        <input type="text"
-                            class="w-full h-10 pr-4 text-white bg-transparent border-0 pl-11 placeholder:text-neutral-700 focus:ring-0 sm:text-sm"
-                            placeholder="Search, jump or create... magically... 🪄" role="combobox" aria-expanded="false"
-                            aria-controls="options">
-                    </div>
-                </div>
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24" stroke-width="2"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+                    <path d="M21 21l-6 -6" />
+                </svg>
+                <span class="px-2 ml-2 text-xs border border-dashed rounded border-neutral-700 text-warning">/</span>
             </div>
             <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" @keyup.esc="resetState">
-                <div class="fixed inset-0 transition-opacity bg-opacity-75 bg-coolgray-100" @click.self="resetState"></div>
+                <div class="fixed inset-0 transition-opacity bg-opacity-75 bg-coolgray-100" @click.self="resetState">
+                </div>
                 <div class="fixed inset-0 w-3/5 p-4 mx-auto overflow-y-auto sm:p-6 md:px-20 min-w-fit"
                     @click.self="resetState">
-                    <div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5 ">
+                    <div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5">
                         <div class="relative">
                             <svg class="absolute w-5 h-5 text-gray-400 pointer-events-none left-3 top-2.5"
                                 viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -52,13 +46,12 @@
                                         <span class="flex-auto ml-3 truncate">Add new {{ state.icon }}: <span
                                                 class="text-xs text-warning" v-if="search">{{ search }}</span>
                                             <span v-else class="text-xs text-warning">with random name (or type
-                                                in one)</span></span>
+                                                one)</span></span>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-
-                                <ul v-if="data.length == 0" class="mt-2 -mx-4 text-sm text-white ">
+                                <ul v-if="data.length == 0" class="mt-2 -mx-4 text-sm text-white">
                                     <li class="flex items-center px-4 py-2 select-none group">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
@@ -72,8 +65,9 @@
                                         <span class="flex-auto ml-3 truncate">Nothing found. Ooops.</span>
                                     </li>
                                 </ul>
-                                <h2 v-if="data.length > 0 && state.title"
-                                    class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{ state.title }}
+                                <h2 v-if="data.length != 0 && state.title"
+                                    class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{
+                                        state.title }}
                                 </h2>
                                 <ul class="mt-2 -mx-4 text-sm text-white">
                                     <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
@@ -144,7 +138,7 @@
     </Transition>
 </template>
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import axios from "axios";
 
 const showCommandPalette = ref(false)
@@ -183,9 +177,38 @@ const initialState = {
     data: appActions
 }
 const state = ref({ ...initialState })
+
 const data = computed(() => {
-    return state.value.data.filter(item => item.name.toLowerCase().includes(search.value?.toLowerCase() ?? ''))
+    if (search?.value) {
+        return state.value.data.filter(item => item.name.toLowerCase().includes(search.value?.toLowerCase() ?? ''))
+    }
+    return state.value.data
 })
+
+function focusSearch(event) {
+    if (event.target.nodeName === 'BODY') {
+        if (event.key === '/') {
+            event.preventDefault();
+            showCommandPalette.value = true;
+        }
+    }
+}
+
+onMounted(() => {
+    window.addEventListener("keydown", focusSearch);
+})
+onUnmounted(() => {
+    window.removeEventListener("keydown", focusSearch);
+})
+
+watch(showCommandPalette, async (value) => {
+    if (value) {
+        await nextTick();
+        searchInput.value.focus();
+    }
+})
+
+
 function resetState() {
     showCommandPalette.value = false
     state.value = { ...initialState }
@@ -199,7 +222,6 @@ async function next(nextAction, index, newAction = null) {
         switch (newAction) {
             case 'server':
                 targetUrl.pathname = '/server/new'
-                console.log(targetUrl.href);
                 window.location.href = targetUrl.href
                 break;
             case 'destination':
@@ -229,7 +251,6 @@ async function next(nextAction, index, newAction = null) {
             }
         }
         else selected['action'] = appActions[index].id
-        console.log(selected)
 
         switch (nextAction) {
             case 'server':
@@ -242,19 +263,23 @@ async function next(nextAction, index, newAction = null) {
                 await getDestinations(state.value.data[index].id)
                 state.value.title = 'Select a destination'
                 state.value.icon = 'destination'
+                state.value.new = true
                 break;
             case 'project':
                 await getProjects()
                 state.value.title = 'Select a project'
                 state.value.icon = 'project'
+                state.value.new = true
                 break;
             case 'environment':
                 await getEnvironments(state.value.data[index].id)
                 state.value.title = 'Select an environment'
                 state.value.icon = 'environment'
+                state.value.new = true
                 break;
             case 'redirect':
                 await redirect();
+                state.value.new = false
                 break;
             default:
                 break;
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 68ea42fd0..5fd8e44dc 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -29,8 +29,7 @@
     @auth
         <x-navbar />
     @endauth
-    <div class="flex justify-center w-full min-h-12" id="vue">
-        {{-- <x-magic-bar /> --}}
+    <div class="fixed top-3 left-4" id="vue">
         <magic-bar></magic-bar>
     </div>
     <main>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 5e6a5d117..d3131886b 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,6 +1,6 @@
 @auth
     <nav class="main-navbar">
-        <ul class="gap-4 menu ">
+        <ul class="gap-4 menu">
             <li>
                 <a class="hover:bg-transparent" @if (!request()->is('/')) href="/" @endif>
                     <svg xmlns="http://www.w3.org/2000/svg" class="{{ request()->is('/') ? 'text-warning icon' : 'icon' }}"