Navbar wireup (#98)

* Navbar wireup

* Fix height issue

* Fix syncing

* working branch

* Added root directories to breadcrumbs

* fix jre detect

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus_gui/src/components/ui/Breadcrumbs.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="breadcrumbs">
+    <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
+      <router-link
+        v-if="breadcrumb.link"
+        :to="breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id))"
+        >{{
+          breadcrumb.name.charAt(0) === '?'
+            ? breadcrumbData.getName(breadcrumb.name.slice(1))
+            : breadcrumb.name
+        }}
+      </router-link>
+      <span v-else class="selected">{{
+        breadcrumb.name.charAt(0) === '?'
+          ? breadcrumbData.getName(breadcrumb.name.slice(1))
+          : breadcrumb.name
+      }}</span>
+      <ChevronRightIcon v-if="breadcrumb.link" class="chevron" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ChevronRightIcon } from 'omorphia'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const breadcrumbData = useBreadcrumbs()
+const breadcrumbs = computed(() => {
+  const additionalContext =
+    route.meta.useContext === true
+      ? breadcrumbData.context
+      : route.meta.useRootContext === true
+      ? breadcrumbData.rootContext
+      : null
+  return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+})
+</script>
+
+<style scoped lang="scss">
+.breadcrumbs {
+  display: flex;
+  flex-direction: row;
+
+  .breadcrumbs__item {
+    display: flex;
+    flex-direction: row;
+    vertical-align: center;
+    margin: auto 0;
+
+    .chevron,
+    a {
+      margin: auto 0;
+    }
+  }
+}
+
+.selected {
+  color: var(--color-contrast);
+}
+</style>

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -0,0 +1,103 @@
+<template>
+  <div v-if="currentProcesses[0]" class="status">
+    <span class="circle running" />
+    <span class="running-text">
+      {{ currentProcesses[0].metadata.name }}
+    </span>
+    <Button icon-only class="icon-button stop" @click="stop()">
+      <StopIcon />
+    </Button>
+    <Button icon-only class="icon-button" @click="goToTerminal()">
+      <TerminalIcon />
+    </Button>
+  </div>
+  <div v-else class="status">
+    <span class="circle stopped" />
+    <span class="running-text"> No running profiles </span>
+  </div>
+</template>
+
+<script setup>
+import { Button } from 'omorphia'
+import { StopIcon, TerminalIcon } from '@/assets/icons'
+import { ref } from 'vue'
+import {
+  get_all_running_profiles as getRunningProfiles,
+  kill_by_uuid as killProfile,
+  get_uuids_by_profile_path as getProfileProcesses,
+} from '@/helpers/process'
+import { process_listener } from '@/helpers/events'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const currentProcesses = ref(await getRunningProfiles())
+
+await process_listener(async () => {
+  await refresh()
+})
+
+const refresh = async () => {
+  currentProcesses.value = await getRunningProfiles()
+}
+
+const stop = async () => {
+  try {
+    const processes = await getProfileProcesses(currentProcesses.value[0].path)
+    await killProfile(processes[0])
+  } catch (e) {
+    console.error(e)
+  }
+
+  await refresh()
+}
+
+const goToTerminal = () => {
+  router.push(`/instance/${encodeURIComponent(currentProcesses.value[0].path)}/logs`)
+}
+</script>
+
+<style scoped lang="scss">
+.status {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: var(--color-raised-bg);
+  padding: 0 1rem;
+  margin: 0;
+}
+
+.running-text {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.circle {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 0.25rem;
+
+  &.running {
+    background-color: var(--color-brand);
+  }
+
+  &.stopped {
+    background-color: var(--color-base);
+  }
+}
+
+.icon-button {
+  background-color: rgba(0, 0, 0, 0);
+  box-shadow: none;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+
+  &.stop {
+    --text-color: var(--color-red) !important;
+  }
+}
+</style>