Pyro Integration

.gitignore

@@ -55,3 +55,7 @@ generated
 
 # app testing dir
 app-playground-data/*
+
+# soley because i need the PORT to be 3002 due to WSL stuff
+.env
+apps/frontend/.env

apps/app-frontend/package.json

@@ -20,8 +20,10 @@
     "@tauri-apps/plugin-os": "^2.0.0-rc.0",
     "@tauri-apps/plugin-shell": "^2.0.0-rc.0",
     "@tauri-apps/plugin-updater": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-websocket": "2.0.0-rc.1",
     "@tauri-apps/plugin-window-state": "^2.0.0-rc.0",
     "@vintl/vintl": "^4.4.1",
+    "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.10",
     "floating-vue": "^5.2.2",
     "ofetch": "^1.3.4",
@@ -31,7 +33,8 @@
     "vue": "^3.4.21",
     "vue-multiselect": "3.0.0",
     "vue-router": "4.3.0",
-    "vue-virtual-scroller": "v2.0.0-beta.8"
+    "vue-virtual-scroller": "v2.0.0-beta.8",
+    "vue3-apexcharts": "^1.6.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.1",

apps/app-frontend/src/components/ui/NavTabs.vue

@@ -0,0 +1,164 @@
+<template>
+  <nav
+    class="experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
+  >
+    <RouterLink
+      v-for="(link, index) in filteredLinks"
+      v-show="link.shown === undefined ? true : link.shown"
+      :key="index"
+      ref="tabLinkElements"
+      :to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+      class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
+      :class="{
+        'text-brand': activeIndex === index && !subpageSelected,
+        'text-contrast': activeIndex === index && subpageSelected,
+      }"
+    >
+      <component :is="link.icon" v-if="link.icon" class="size-5" />
+      <span class="text-nowrap">{{ link.label }}</span>
+    </RouterLink>
+    <div
+      :class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-brand-highlight'}`"
+      :style="{
+        left: sliderLeftPx,
+        top: sliderTopPx,
+        right: sliderRightPx,
+        bottom: sliderBottomPx,
+        opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
+      }"
+      aria-hidden="true"
+    ></div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+
+const route = useRoute()
+
+interface Tab {
+  label: string
+  href: string
+  shown?: boolean
+  icon?: unknown
+  subpages?: string[]
+}
+
+const props = defineProps<{
+  links: Tab[]
+  query?: string
+}>()
+
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
+const activeIndex = ref(-1)
+const oldIndex = ref(-1)
+const subpageSelected = ref(false)
+
+const filteredLinks = computed(() =>
+  props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
+)
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
+
+function pickLink() {
+  let index = -1
+  subpageSelected.value = false
+  for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
+    const link = filteredLinks.value[i]
+    if (decodeURIComponent(route.path) === link.href) {
+      index = i
+      break
+    } else if (
+      decodeURIComponent(route.path).includes(link.href) ||
+      (link.subpages &&
+        link.subpages.some((subpage) => decodeURIComponent(route.path).includes(subpage)))
+    ) {
+      index = i
+      subpageSelected.value = true
+      break
+    }
+  }
+  activeIndex.value = index
+
+  if (activeIndex.value !== -1) {
+    startAnimation()
+  } else {
+    oldIndex.value = -1
+    sliderLeft.value = 0
+    sliderRight.value = 0
+  }
+}
+
+const tabLinkElements = ref()
+
+function startAnimation() {
+  const el = tabLinkElements.value[activeIndex.value].$el
+
+  if (!el || !el.offsetParent) return
+
+  const newValues = {
+    left: el.offsetLeft,
+    top: el.offsetTop,
+    right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
+    bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
+  }
+
+  if (sliderLeft.value === 4 && sliderRight.value === 4) {
+    sliderLeft.value = newValues.left
+    sliderRight.value = newValues.right
+    sliderTop.value = newValues.top
+    sliderBottom.value = newValues.bottom
+  } else {
+    const delay = 200
+
+    if (newValues.left < sliderLeft.value) {
+      sliderLeft.value = newValues.left
+      setTimeout(() => {
+        sliderRight.value = newValues.right
+      }, delay)
+    } else {
+      sliderRight.value = newValues.right
+      setTimeout(() => {
+        sliderLeft.value = newValues.left
+      }, delay)
+    }
+
+    if (newValues.top < sliderTop.value) {
+      sliderTop.value = newValues.top
+      setTimeout(() => {
+        sliderBottom.value = newValues.bottom
+      }, delay)
+    } else {
+      sliderBottom.value = newValues.bottom
+      setTimeout(() => {
+        sliderTop.value = newValues.top
+      }, delay)
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', pickLink)
+  pickLink()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', pickLink)
+})
+
+watch(route, () => pickLink())
+</script>
+<style scoped>
+.navtabs-transition {
+  /* Delay on opacity is to hide any jankiness as the page loads */
+  transition:
+    all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+    opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+}
+</style>

apps/app-frontend/src/helpers/test.ts

@@ -0,0 +1 @@
+// empty

apps/app-frontend/src/store/credentials.ts

@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { get as getCreds } from '../helpers/mr_auth.js'
+import { get_user } from '../helpers/cache.js'
+import { handleError } from '../store/state'
+
+export interface User {
+  id: string
+  username: string
+  avatar_url: string
+  bio: string
+  created: Date
+  role: string
+  badges: number
+}
+
+export interface Credentials {
+  session: string
+  expires: Date
+  user_id: string
+  active: boolean
+  user: User | null
+}
+
+export type SessionToken = Credentials['session']
+
+export const useCredentialsStore = defineStore('credentials', () => {
+  const credentials = ref<Credentials | null>(null)
+  const error = ref<Error | null>(null)
+
+  async function fetchCredentials() {
+    try {
+      const creds = await getCreds()
+      if (creds && creds.user_id) {
+        creds.user = await get_user(creds.user_id)
+      }
+      credentials.value = creds
+    } catch (err) {
+      handleError(err)
+      error.value = err as Error
+    }
+  }
+
+  function clearCredentials() {
+    credentials.value = null
+    error.value = null
+  }
+
+  return {
+    credentials,
+    error,
+    fetchCredentials,
+    clearCredentials,
+  }
+})