wip

resources/views/components/magic-bar.blade.php

@@ -190,6 +190,30 @@
             </div>
         </div>
     </template>
+    {{-- Sources --}}
+    <template x-cloak x-if="sourcesMenu">
+        <div x-on:click.outside="closeMenus">
+            <input x-ref="search" x-model="search" class="magic-input" placeholder="Select a source..."
+                x-on:keyup.escape="closeMenus" x-on:keydown.down="focusNext(sources.length)"
+                x-on:keydown.up="focusPrev(sources.length)"
+                x-on:keyup.enter="focusedIndex !== '' && await set('jumpToSource',filteredSources()[focusedIndex])" />
+            <div class="magic-items">
+                <template x-if="sources.length === 0">
+                    <div class="magic-item" x-on:click="set('newSource')">
+                        <span>No Source found. Click here to add a new one!</span>
+                    </div>
+                </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">
+                        <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
+                        <span x-text="source.name"></span>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </template>
 </div>
 
 <script>
@@ -202,7 +226,8 @@
                     !this.environmentMenu &&
                     !this.projectsMenu &&
                     !this.destinationsMenu &&
-                    !this.privateKeysMenu
+                    !this.privateKeysMenu &&
+                    !this.sourcesMenu
             },
             focus() {
                 if (this.$refs.search) this.$refs.search.focus()
@@ -229,6 +254,9 @@
                 this.$watch('privateKeysMenu', () => {
                     this.focus()
                 })
+                this.$watch('sourcesMenu', () => {
+                    this.focus()
+                })
             },
             mainMenu: false,
             serverMenu: false,
@@ -238,6 +266,7 @@
             projectsMenu: false,
             environmentMenu: false,
             privateKeysMenu: false,
+            sourcesMenu: false,
             search: '',
 
             selectedAction: '',
@@ -251,6 +280,7 @@
             projects: ['Loading...'],
             environments: ['Loading...'],
             privateKeys: ['Loading...'],
+            sources: ['Loading...'],
 
             focusedIndex: "",
             items: [{
@@ -322,6 +352,12 @@
                     type: 'Jump',
                     tags: 'private keys,ssh, keys, key',
                     next: 'privateKeys'
+                },
+                {
+                    name: 'Sources',
+                    type: 'Jump',
+                    tags: 'github,apps,source',
+                    next: 'sources'
                 }
             ],
             focusPrev(maxLength) {
@@ -362,6 +398,10 @@
                 this.destinationMenu = false
                 this.projectMenu = false
                 this.environmentMenu = false
+                this.projectsMenu = false
+                this.destinationsMenu = false
+                this.privateKeysMenu = false
+                this.sourcesMenu = false
             },
             checkMainMenu() {
                 if (this.serverMenu) return
@@ -410,6 +450,13 @@
                         .toLowerCase())
                 })
             },
+            filteredSources() {
+                if (this.search === '') return this.sources
+                return this.sources.filter(source => {
+                    return source.name.toLowerCase().includes(this.search
+                        .toLowerCase())
+                })
+            },
             async newProject() {
                 const response = await fetch('/magic?server=' + this.selectedServer +
                     '&destination=' + this.selectedDestination +
@@ -519,6 +566,17 @@
                         this.closeMenus()
                         this.privateKeysMenu = true
                         break
+                    case 'sources':
+                        response = await fetch('/magic?sources=true');
+                        if (response.ok) {
+                            const {
+                                sources
+                            } = await response.json();
+                            this.sources = sources;
+                        }
+                        this.closeMenus()
+                        this.sourcesMenu = true
+                        break
                     case 'environment':
                         if (this.focusedIndex === 0) {
                             this.focusedIndex = ''
@@ -573,6 +631,10 @@
                         window.location = `/private-key/${id}`
                         this.closeMenus()
                         break
+                    case 'jumpToSource':
+                        window.location = `/source/${id.type}/${id.uuid}`
+                        this.closeMenus()
+                        break
                     case 'newServer':
                         window.location = `/server/new`
                         this.closeMenus()

resources/views/dashboard.blade.php

@@ -23,7 +23,7 @@
                 <p>No servers found.</p>
             @endforelse
         </div>
-        <h1>Destinations </h1>
+        {{-- <h1>Destinations </h1>
         <div class="flex gap-2">
             @forelse ($destinations as $destination)
                 <a href="{{ route('destination.show', [$destination->uuid]) }}"
@@ -31,8 +31,8 @@
             @empty
                 <p>No destinations found.</p>
             @endforelse
-        </div>
-        <h1>Private Keys </h1>
+        </div> --}}
+        {{-- <h1>Private Keys </h1>
         <div class="flex gap-2">
             @forelse ($private_keys as $private_key)
                 <a href="{{ route('private-key.show', [$private_key->uuid]) }}"
@@ -40,8 +40,8 @@
             @empty
                 <p>No servers found.</p>
             @endforelse
-        </div>
-        <h1>GitHub Apps </h1>
+        </div> --}}
+        {{-- <h1>GitHub Apps </h1>
         <div class="flex">
             @forelse ($github_apps as $github_app)
                 <a href="{{ route('source.github.show', [$github_app->uuid]) }}"
@@ -49,7 +49,7 @@
             @empty
                 <p>No servers found.</p>
             @endforelse
-        </div>
+        </div> --}}
     @endif
 
 </x-layout>