From b4df1bc493c86641ba2f60019dd6a9e3c110e3d5 Mon Sep 17 00:00:00 2001
From: Jordan Rash <15827604+jordan-rash@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:40:31 -0600
Subject: [PATCH] ran formatter

---
 natster-io/src/App.vue                      |   2 -
 natster-io/src/components/Avatar.vue        |  68 +++---
 natster-io/src/components/Catalogs.vue      |  22 +-
 natster-io/src/components/File.vue          |  82 +++++---
 natster-io/src/components/FileComp.vue      | 116 +++++++----
 natster-io/src/components/Library.vue       |  24 ++-
 natster-io/src/router/index.ts              |   7 +-
 natster-io/src/stores/catalog.ts            | 218 +++++++++++---------
 natster-io/src/stores/file.ts               |  18 +-
 natster-io/src/stores/user.ts               |   2 +-
 natster-io/src/views/AuthView.vue           |  55 +++--
 natster-io/src/views/GettingStartedView.vue | 136 ++++++++----
 natster-io/src/views/HomeView.vue           |  59 ++++--
 13 files changed, 525 insertions(+), 284 deletions(-)

diff --git a/natster-io/src/App.vue b/natster-io/src/App.vue
index 7a904a1..b380b08 100644
--- a/natster-io/src/App.vue
+++ b/natster-io/src/App.vue
@@ -17,10 +17,8 @@ import AuthView from './views/AuthView.vue'
 import { catalogStore } from './stores/catalog'
 const { activeDownload } = storeToRefs(catalogStore())
 
-
 import { VueSpinnerAudio, VueSpinnerTail } from 'vue3-spinners'
 const { isAuthenticated, isLoading } = useAuth0()
-
 </script>
 
 <style>
diff --git a/natster-io/src/components/Avatar.vue b/natster-io/src/components/Avatar.vue
index c4537e4..42ac7e0 100644
--- a/natster-io/src/components/Avatar.vue
+++ b/natster-io/src/components/Avatar.vue
@@ -5,35 +5,53 @@
         <MenuButton class="flex items-center no-underline focus:outline-none">
           <span class="relative inline-block">
             <img class="h-12 w-12 rounded-md" :src="userPhotoUrl" alt="" />
-            <span :class="[
-              getCatalogOnline ? 'bg-green-600 text-white' : 'bg-gray-200 text-black',
-              'absolute right-0 top-0 block h-4 w-4 -translate-y-1/2 translate-x-1/2 transform rounded-full text-center text-xs align-top text-black ring-1 ring-white'
-            ]">
+            <span
+              :class="[
+                getCatalogOnline ? 'bg-green-600 text-white' : 'bg-gray-200 text-black',
+                'absolute right-0 top-0 block h-4 w-4 -translate-y-1/2 translate-x-1/2 transform rounded-full text-center text-xs align-top text-black ring-1 ring-white'
+              ]"
+            >
               {{ pending_imports == 0 ? '' : pending_imports }}
             </span>
           </span>
         </MenuButton>
       </div>
 
-      <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95"
-        enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
-        leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
         <MenuItems
-          class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none bottom-full">
+          class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none bottom-full"
+        >
           <div class="py-1">
             <MenuItem v-slot="{ active }">
-            <a href="https://docs.natster.io"
-              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Docs</a>
+              <a
+                href="https://docs.natster.io"
+                :class="[
+                  active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                  'block px-4 py-2 text-sm'
+                ]"
+                >Docs</a
+              >
             </MenuItem>
           </div>
           <div class="py-1">
             <MenuItem v-slot="{ active }">
-            <button type="submit" @click.prevent="signout" :class="[
-              active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-              'block w-full px-4 py-2 text-left text-sm'
-            ]">
-              Sign out
-            </button>
+              <button
+                type="submit"
+                @click.prevent="signout"
+                :class="[
+                  active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                  'block w-full px-4 py-2 text-left text-sm'
+                ]"
+              >
+                Sign out
+              </button>
             </MenuItem>
           </div>
         </MenuItems>
@@ -81,16 +99,16 @@ const props = defineProps({
   natster_account: String
 })
 
-watch(() => uStore.getCatalogOnline, (newVal) => {
-  if (newVal) {
-    notificationStore().setNotification('Catalog Online', 'Your catalog has come online')
-  } else {
-    notificationStore().setNotification(
-      'Catalog Offline',
-      'Your catalog has gone offline'
-    )
+watch(
+  () => uStore.getCatalogOnline,
+  (newVal) => {
+    if (newVal) {
+      notificationStore().setNotification('Catalog Online', 'Your catalog has come online')
+    } else {
+      notificationStore().setNotification('Catalog Offline', 'Your catalog has gone offline')
+    }
   }
-})
+)
 
 function copyAccountIdToClipboard() {
   navigator.clipboard.writeText(props.natster_account)
diff --git a/natster-io/src/components/Catalogs.vue b/natster-io/src/components/Catalogs.vue
index d4cf0cc..1766232 100644
--- a/natster-io/src/components/Catalogs.vue
+++ b/natster-io/src/components/Catalogs.vue
@@ -3,17 +3,23 @@
   <ul v-if="catalogsInitialized" role="list" class="-mx-2 mt-2 space-y-1">
     <li v-for="(catalog, i) in getImportedCatalogs" :key="i">
       <div class="w-full">
-        <button @click="cStore.setCatalogSelected(catalog)" :disabled="!catalog.online" :class="[
-    catalog.selected
-      ? 'enabled:bg-gray-800 enabled:text-white '
-      : 'enabled:text-gray-400 enabled:hover:text-white enabled:hover:bg-gray-800',
-    'group w-full flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold disabled:text-gray-500'
-  ]">
+        <button
+          @click="cStore.setCatalogSelected(catalog)"
+          :disabled="!catalog.online"
+          :class="[
+            catalog.selected
+              ? 'enabled:bg-gray-800 enabled:text-white '
+              : 'enabled:text-gray-400 enabled:hover:text-white enabled:hover:bg-gray-800',
+            'group w-full flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold disabled:text-gray-500'
+          ]"
+        >
           <span
-            class="relative inline-block flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400">
+            class="relative inline-block flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400"
+          >
             <span
               class="absolute right-0 top-0 block h-1.5 w-1.5 -translate-y-1/2 translate-x-1/2 transform rounded-full ring-1 ring-white"
-              :class="[catalog.online ? 'bg-green-500' : 'bg-gray-500']" />
+              :class="[catalog.online ? 'bg-green-500' : 'bg-gray-500']"
+            />
             <span class=""> {{ catalog.name.substring(0, 1).toUpperCase() }} </span>
           </span>
           <span class="truncate">{{ catalog.name }} </span>
diff --git a/natster-io/src/components/File.vue b/natster-io/src/components/File.vue
index 5630abc..bdfdb57 100644
--- a/natster-io/src/components/File.vue
+++ b/natster-io/src/components/File.vue
@@ -1,24 +1,40 @@
 <template>
   <TransitionRoot as="template" :show="show">
     <Dialog as="div" class="relative z-10" @close="close()">
-      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
-        leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
         <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
       </TransitionChild>
 
       <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-          <TransitionChild as="template" enter="ease-out duration-300"
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
             enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
             leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
             <DialogPanel
-              class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+            >
               <div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
-                <button type="button"
+                <button
+                  type="button"
                   class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  @click="close()">
+                  @click="close()"
+                >
                   <span class="sr-only">Close</span>
                   <XMarkIcon class="h-6 w-6" aria-hidden="true" />
                 </button>
@@ -26,7 +42,8 @@
               <div class="sm:flex sm:items-start">
                 <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                   <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
-                    {{ catalog.name }} | {{ title }}</DialogTitle>
+                    {{ catalog.name }} | {{ title }}</DialogTitle
+                  >
                   <div class="mt-2">
                     <p v-if="!!body" class="text-sm text-gray-500">
                       {{ body }}
@@ -46,11 +63,17 @@
                   width="640"
                   height="360"
                   autoplay
-                  controls>
-                </video>
+                  controls
+                ></video>
 
                 <AudioPlayer
-                  :option="getAudioOptions(mediaUrl, description == '' ? title : description, catalog.image)"
+                  :option="
+                    getAudioOptions(
+                      mediaUrl,
+                      description == '' ? title : description,
+                      catalog.image
+                    )
+                  "
                   v-else-if="!!mediaUrl && mimeType && mimeType.toLowerCase() == 'audio/mpeg'"
                   v-show="!loading"
                   @loadedmetadata="playAudio(e)"
@@ -58,7 +81,9 @@
                 />
 
                 <img
-                  v-else-if="blob != null && mimeType && mimeType.toLowerCase().indexOf('image/') === 0"
+                  v-else-if="
+                    blob != null && mimeType && mimeType.toLowerCase().indexOf('image/') === 0
+                  "
                   :src="blobData"
                   v-show="!loading"
                   :alt="title"
@@ -66,16 +91,19 @@
 
                 <p
                   v-else-if="blob != null && mimeType && mimeType.toLowerCase() === 'text/plain'"
-                  v-show="!loading">
-                    {{ blobData }}
+                  v-show="!loading"
+                >
+                  {{ blobData }}
                 </p>
 
                 <p v-else v-show="!loading">Error displaying media</p>
               </div>
               <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                <button type="button"
+                <button
+                  type="button"
                   class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                  @click="close()">
+                  @click="close()"
+                >
                   Close
                 </button>
               </div>
@@ -98,7 +126,8 @@ import AudioPlayer from 'vue3-audio-player'
 import 'vue3-audio-player/dist/style.css'
 import { fileStore } from '../stores/file'
 const fStore = fileStore()
-const { body, title, show, loading, mimeType, mediaUrl, catalog, description, blob } = storeToRefs(fStore)
+const { body, title, show, loading, mimeType, mediaUrl, catalog, description, blob } =
+  storeToRefs(fStore)
 
 const blobData = ref(null)
 
@@ -112,13 +141,12 @@ watch(blob, async (newVal, oldVal) => {
   console.log('blob changed', newVal, mimeType.value)
 
   if (newVal != null && mimeType.value.toLowerCase().indexOf('image/') === 0) {
-    var urlCreator = window.URL || window.webkitURL;
-    blobData.value = urlCreator.createObjectURL(newVal);
+    var urlCreator = window.URL || window.webkitURL
+    blobData.value = urlCreator.createObjectURL(newVal)
   } else if (newVal != null && mimeType.value == 'text/plain') {
-    await newVal.text()
-      .then((text) => {
-        blobData.value = text
-      })
+    await newVal.text().then((text) => {
+      blobData.value = text
+    })
   } else {
     blobData.value = null
   }
@@ -154,7 +182,7 @@ watch(mediaUrl, (newVal, oldVal) => {
             fStore.loading = false
           }
         })
-      } catch (e) { }
+      } catch (e) {}
 
       try {
         document.querySelector('video').addEventListener('play', (event) => {
@@ -162,7 +190,7 @@ watch(mediaUrl, (newVal, oldVal) => {
             fStore.loading = false
           }
         })
-      } catch (e) { }
+      } catch (e) {}
     }, 50)
   }
 })
diff --git a/natster-io/src/components/FileComp.vue b/natster-io/src/components/FileComp.vue
index 43e4d61..fc1d165 100644
--- a/natster-io/src/components/FileComp.vue
+++ b/natster-io/src/components/FileComp.vue
@@ -1,14 +1,22 @@
 <template>
-  <li :key="file.hash" :class="[image ? '' : 'pl-16', 'flex items-center justify-between gap-x-4 py-5']">
-    <img v-if="image" class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="catalogImage(catalog)" alt="" />
+  <li
+    :key="file.hash"
+    :class="[image ? '' : 'pl-16', 'flex items-center justify-between gap-x-4 py-5']"
+  >
+    <img
+      v-if="image"
+      class="h-12 w-12 flex-none rounded-full bg-gray-50"
+      :src="catalogImage(catalog)"
+      alt=""
+    />
     <div class="min-w-0 flex-auto">
       <div class="flex items-start gap-x-3">
         <p class="text-sm font-semibold text-gray-900">
           {{
-    file.description == 'Auto-imported library entry'
-      ? getFileName(file.path)
-      : file.description
-  }}
+            file.description == 'Auto-imported library entry'
+              ? getFileName(file.path)
+              : file.description
+          }}
         </p>
       </div>
       <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
@@ -22,17 +30,17 @@
         <div class="flex justify-end gap-x-3">
           <p class="text-sm leading-6 text-gray-900">
             {{
-    file.description == 'Auto-imported library entry'
-      ? file.description
-      : getFileName(file.path)
-  }}
+              file.description == 'Auto-imported library entry'
+                ? file.description
+                : getFileName(file.path)
+            }}
           </p>
         </div>
         <div class="mt-1 flex items-center justify-end gap-x-2 text-xs leading-5 text-gray-500">
           <p class="whitespace-nowrap">
             {{ file.hash.substring(0, 4) }}...{{
-    file.hash.substring(file.hash.length - 8, file.hash.length)
-  }}
+              file.hash.substring(file.hash.length - 8, file.hash.length)
+            }}
           </p>
         </div>
       </div>
@@ -45,40 +53,62 @@
           </MenuButton>
         </div>
 
-        <transition enter-active-class="transition duration-100 ease-out"
-          enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-in" leave-from-class="transform scale-100 opacity-100"
-          leave-to-class="transform scale-95 opacity-0">
+        <transition
+          enter-active-class="transition duration-100 ease-out"
+          enter-from-class="transform scale-95 opacity-0"
+          enter-to-class="transform scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-in"
+          leave-from-class="transform scale-100 opacity-100"
+          leave-to-class="transform scale-95 opacity-0"
+        >
           <MenuItems
-            class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
+            class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
+          >
             <div class="px-1 py-1">
               <MenuItem v-slot="{ active }">
-              <button @click.prevent="
-    cStore.downloadFile(getFileName(file.path), catalog, file.hash, file.mime_type)
-    " :class="[
-    active ? 'bg-violet-500 text-white' : 'text-gray-900',
-    'group flex w-full items-center rounded-md px-2 py-2 text-sm'
-  ]">
-                <ArrowDownTrayIcon :active="active" class="mr-2 h-5 w-5 text-violet-400" aria-hidden="true" />
-                Download
-              </button>
+                <button
+                  @click.prevent="
+                    cStore.downloadFile(getFileName(file.path), catalog, file.hash, file.mime_type)
+                  "
+                  :class="[
+                    active ? 'bg-violet-500 text-white' : 'text-gray-900',
+                    'group flex w-full items-center rounded-md px-2 py-2 text-sm'
+                  ]"
+                >
+                  <ArrowDownTrayIcon
+                    :active="active"
+                    class="mr-2 h-5 w-5 text-violet-400"
+                    aria-hidden="true"
+                  />
+                  Download
+                </button>
               </MenuItem>
-              <MenuItem v-slot="{ active, disabled }" :disabled="!isMimeTypeSupported(file.mime_type)">
-              <button @click.prevent="
-    cStore.viewFile(
-      getFileName(file.path),
-      file.description,
-      catalog,
-      file.hash,
-      file.mime_type
-    )
-    " :class="[
-    active ? 'bg-violet-500 text-white' : 'text-gray-900',
-    'group flex w-full items-center rounded-md px-2 py-2 text-sm aria-disabled:cursor-not-allowed aria-disabled:text-gray-500 aria-disabled:bg-gray-100'
-  ]">
-                <FolderOpenIcon :active="active" class="mr-2 h-5 w-5 text-violet-400" aria-hidden="true" />
-                View
-              </button>
+              <MenuItem
+                v-slot="{ active, disabled }"
+                :disabled="!isMimeTypeSupported(file.mime_type)"
+              >
+                <button
+                  @click.prevent="
+                    cStore.viewFile(
+                      getFileName(file.path),
+                      file.description,
+                      catalog,
+                      file.hash,
+                      file.mime_type
+                    )
+                  "
+                  :class="[
+                    active ? 'bg-violet-500 text-white' : 'text-gray-900',
+                    'group flex w-full items-center rounded-md px-2 py-2 text-sm aria-disabled:cursor-not-allowed aria-disabled:text-gray-500 aria-disabled:bg-gray-100'
+                  ]"
+                >
+                  <FolderOpenIcon
+                    :active="active"
+                    class="mr-2 h-5 w-5 text-violet-400"
+                    aria-hidden="true"
+                  />
+                  View
+                </button>
               </MenuItem>
             </div>
           </MenuItems>
@@ -134,6 +164,6 @@ function catalogImage(cat) {
 }
 
 function isMimeTypeSupported(mimeType: string) {
-  return  ['image/png', 'image/jpeg', 'video/mp4', 'text/plain', 'audio/mpeg'].includes(mimeType)
+  return ['image/png', 'image/jpeg', 'video/mp4', 'text/plain', 'audio/mpeg'].includes(mimeType)
 }
 </script>
diff --git a/natster-io/src/components/Library.vue b/natster-io/src/components/Library.vue
index 751b86e..9bab1a7 100644
--- a/natster-io/src/components/Library.vue
+++ b/natster-io/src/components/Library.vue
@@ -2,10 +2,26 @@
   <SelectLibrary v-if="getNumCatalogsSelected == 0" />
   <div v-else>
     <div v-for="catalog in getImportedCatalogs" role="list" class="divide-y divide-gray-100">
-      <div v-for="(files, directory) in getFilesByDirectory(catalog.files)" :key="directory"
-        :id="'accordion-' + normalizeString(catalog.name + directory)" data-accordion="collapse">
-        <Directory v-if="directory != 'root'" :catalog="catalog" :directory="directory" :files="files" />
-        <FileComp v-else v-for="file in files" :key="file.hash" :catalog="catalog" :file="file" :image="true" />
+      <div
+        v-for="(files, directory) in getFilesByDirectory(catalog.files)"
+        :key="directory"
+        :id="'accordion-' + normalizeString(catalog.name + directory)"
+        data-accordion="collapse"
+      >
+        <Directory
+          v-if="directory != 'root'"
+          :catalog="catalog"
+          :directory="directory"
+          :files="files"
+        />
+        <FileComp
+          v-else
+          v-for="file in files"
+          :key="file.hash"
+          :catalog="catalog"
+          :file="file"
+          :image="true"
+        />
       </div>
     </div>
   </div>
diff --git a/natster-io/src/router/index.ts b/natster-io/src/router/index.ts
index b5701fc..9a9efd2 100644
--- a/natster-io/src/router/index.ts
+++ b/natster-io/src/router/index.ts
@@ -23,7 +23,12 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     { path: '/:code?', name: 'home', component: HomeView, beforeEnter: isNotLoggedIn },
-    { path: '/getting-started', name: 'gettingstarted', component: GettingStartedView, beforeEnter: isNotLoggedIn },
+    {
+      path: '/getting-started',
+      name: 'gettingstarted',
+      component: GettingStartedView,
+      beforeEnter: isNotLoggedIn
+    },
     { path: '/library', name: 'library', component: Library, beforeEnter: authGuard }
   ]
 })
diff --git a/natster-io/src/stores/catalog.ts b/natster-io/src/stores/catalog.ts
index 54f687f..ca8e069 100644
--- a/natster-io/src/stores/catalog.ts
+++ b/natster-io/src/stores/catalog.ts
@@ -23,29 +23,34 @@ export const catalogStore = defineStore('catalog', {
       const uStore = userStore()
 
       const sub = nStore.connection.subscribe('natster.global-events.>')
-        ; (async () => {
-          for await (const msg of sub) {
-            let m = JSONCodec().decode(msg.data)
-            this.setOnlineAndCatalogRevision(m.catalog, m.revision)
-            uStore.togglePing()
+      ;(async () => {
+        for await (const msg of sub) {
+          let m = JSONCodec().decode(msg.data)
+          this.setOnlineAndCatalogRevision(m.catalog, m.revision)
+          uStore.togglePing()
 
-            this.scrubCatalogs()
-          }
-          console.log('subscription closed')
-        })()
+          this.scrubCatalogs()
+        }
+        console.log('subscription closed')
+      })()
     },
     scrubCatalogs() {
       const disableCat = (catalog) => {
         this.setCatalogSelected(catalog)
       }
 
-      this.catalogs.forEach(function(tCatalog) {
-
+      this.catalogs.forEach(function (tCatalog) {
         // Toggles catalogs avaialability
-        if (!tCatalog.online && Date.now() - new Date(tCatalog.lastSeen).getTime() < 1 * 60 * 1000) {
+        if (
+          !tCatalog.online &&
+          Date.now() - new Date(tCatalog.lastSeen).getTime() < 1 * 60 * 1000
+        ) {
           tCatalog.online = true
           notificationStore().setNotification('Catalog Online', tCatalog.name + ' has come online')
-        } else if (tCatalog.online && Date.now() - new Date(tCatalog.lastSeen).getTime() > 1 * 60 * 1000) {
+        } else if (
+          tCatalog.online &&
+          Date.now() - new Date(tCatalog.lastSeen).getTime() > 1 * 60 * 1000
+        ) {
           tCatalog.online = false
           notificationStore().setNotification(
             'Catalog Offline',
@@ -62,20 +67,20 @@ export const catalogStore = defineStore('catalog', {
       const uStore = userStore()
 
       const sub = nStore.connection.subscribe('natster.local-events.heartbeat')
-        ; (async () => {
-          for await (const m of sub) {
-            let msg = JSONCodec().decode(m.data)
-            uStore.setLastSeenTS(new Date(Date.now()))
-            this.setOnlineAndCatalogRevision(msg.catalog, msg.revision)
-          }
-          console.log('subscription closed')
-        })()
+      ;(async () => {
+        for await (const m of sub) {
+          let msg = JSONCodec().decode(m.data)
+          uStore.setLastSeenTS(new Date(Date.now()))
+          this.setOnlineAndCatalogRevision(msg.catalog, msg.revision)
+        }
+        console.log('subscription closed')
+      })()
     },
     setOnlineAndCatalogRevision(inCat, rev) {
       const nStore = notificationStore()
       var d = new Date(0)
       d.setUTCSeconds(rev)
-      this.catalogs.forEach(async function(c, i) {
+      this.catalogs.forEach(async function (c, i) {
         if (c.name == inCat) {
           c.pending_invite = false
           c.lastSeen = Date.now()
@@ -95,7 +100,9 @@ export const catalogStore = defineStore('catalog', {
                 .catch((err) => {
                   nStore.setNotification(
                     'Catalog failed to respond',
-                    'The catalog ' + c.name + ' failed to respond. Moving offline until it heartbeats.'
+                    'The catalog ' +
+                      c.name +
+                      ' failed to respond. Moving offline until it heartbeats.'
                   )
                   if (c.selected) {
                     this.setCatalogSelected(c)
@@ -113,7 +120,7 @@ export const catalogStore = defineStore('catalog', {
       }
 
       const nStore = notificationStore()
-      this.catalogs.forEach(async function(item) {
+      this.catalogs.forEach(async function (item) {
         if (cat.name == item.name) {
           if (item.selected) {
             item.files = [] as File[]
@@ -135,7 +142,9 @@ export const catalogStore = defineStore('catalog', {
               .catch((err) => {
                 nStore.setNotification(
                   'Catalog failed to respond',
-                  'The catalog ' + item.name + ' failed to respond. Moving offline until it heartbeats.'
+                  'The catalog ' +
+                    item.name +
+                    ' failed to respond. Moving offline until it heartbeats.'
                 )
                 item.selected = false
                 item.files = [] as File[]
@@ -237,27 +246,26 @@ export const catalogStore = defineStore('catalog', {
       var fileArray
       const nStore = natsStore()
       const sub = nStore.connection.subscribe('natster.media.' + catalog.name + '.' + hash)
-        ; (async () => {
-          for await (const m of sub) {
-            const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
-            const totalChunks = parseInt(m.headers.get('x-natster-total-chunks'))
-            const senderXKey = m.headers.get('x-natster-sender-xkey')
+      ;(async () => {
+        for await (const m of sub) {
+          const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
+          const totalChunks = parseInt(m.headers.get('x-natster-total-chunks'))
+          const senderXKey = m.headers.get('x-natster-sender-xkey')
 
-            let decrypted = xkey.open(m.data, senderXKey)
-            fileArray.push(decrypted)
+          let decrypted = xkey.open(m.data, senderXKey)
+          fileArray.push(decrypted)
 
-            if (chunkIdx === totalChunks - 1) {
-              this.activeDownload = false
-              sub.unsubscribe()
-            }
+          if (chunkIdx === totalChunks - 1) {
+            this.activeDownload = false
+            sub.unsubscribe()
           }
+        }
 
-          console.log('DOWNLOAD FILE', fileArray)
-          var blob = new Blob(fileArray, { type: mimeType })
-          console.log('DOWNLOAD FILE', blob)
-          saveAs(blob, fileName)
-        })()
-
+        console.log('DOWNLOAD FILE', fileArray)
+        var blob = new Blob(fileArray, { type: mimeType })
+        console.log('DOWNLOAD FILE', blob)
+        saveAs(blob, fileName)
+      })()
 
       const dl_request = {
         hash: hash,
@@ -289,65 +297,86 @@ export const catalogStore = defineStore('catalog', {
       const nStore = natsStore()
       const sub = nStore.connection.subscribe('natster.media.' + catalog.name + '.' + hash)
 
-        ; (async () => {
-          let timeout
-          let lastChunkReceivedTimestamp: number
+      ;(async () => {
+        let timeout
+        let lastChunkReceivedTimestamp: number
 
-          if (mimeType.toLowerCase().indexOf('video/') !== 0 || mimeType.toLowerCase().indexOf('audio/') !== 0) {
-            fStore.load(fileName, fileDescription, mimeType, catalog, () => {
-              if (timeout) {
-                clearTimeout(timeout)
-                timeout = null
-              }
+        if (
+          mimeType.toLowerCase().indexOf('video/') !== 0 ||
+          mimeType.toLowerCase().indexOf('audio/') !== 0
+        ) {
+          fStore.load(fileName, fileDescription, mimeType, catalog, () => {
+            if (timeout) {
+              clearTimeout(timeout)
+              timeout = null
+            }
 
-              fStore.endStream()
-              sub.unsubscribe()
-            })
-          }
+            fStore.endStream()
+            sub.unsubscribe()
+          })
+        }
 
-          for await (const m of sub) {
-            const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
-            const senderXKey = m.headers.get('x-natster-sender-xkey')
-            const totalChunks = parseInt(m.headers.get('x-natster-total-chunks'))
-            const transcoding = m.headers.get('x-natster-transcoding') && m.headers.get('x-natster-transcoding') === 'true'
-            const decrypted = xkey.open(m.data, senderXKey)
-            lastChunkReceivedTimestamp = Date.now()
+        for await (const m of sub) {
+          const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
+          const senderXKey = m.headers.get('x-natster-sender-xkey')
+          const totalChunks = parseInt(m.headers.get('x-natster-total-chunks'))
+          const transcoding =
+            m.headers.get('x-natster-transcoding') &&
+            m.headers.get('x-natster-transcoding') === 'true'
+          const decrypted = xkey.open(m.data, senderXKey)
+          lastChunkReceivedTimestamp = Date.now()
 
-            if (mimeType.toLowerCase().indexOf('video/') === 0) {
-              if (timeout) {
-                clearTimeout(timeout)
-                timeout = null
-              }
+          if (mimeType.toLowerCase().indexOf('video/') === 0) {
+            if (timeout) {
+              clearTimeout(timeout)
+              timeout = null
+            }
 
-              fStore.render(fileName, fileDescription, mimeType, decrypted, catalog, chunkIdx, totalChunks)
+            fStore.render(
+              fileName,
+              fileDescription,
+              mimeType,
+              decrypted,
+              catalog,
+              chunkIdx,
+              totalChunks
+            )
 
-              if (transcoding) {
-                timeout = setTimeout(() => {
-                  if (chunkIdx >= totalChunks - 1) {
-                    // HACK-- x-natster-total-chunks is lower than the actual number of chunks when transcoding video/mp4 on-the-fly
-                    // HACK-- this branch prevents slow streams from being canceled early while we are still transcoding
-                    fStore.endStream()
-                    timeout = null
+            if (transcoding) {
+              timeout = setTimeout(() => {
+                if (chunkIdx >= totalChunks - 1) {
+                  // HACK-- x-natster-total-chunks is lower than the actual number of chunks when transcoding video/mp4 on-the-fly
+                  // HACK-- this branch prevents slow streams from being canceled early while we are still transcoding
+                  fStore.endStream()
+                  timeout = null
 
-                    sub.unsubscribe()
-                  } else {
-                    // TODO-- maintain a tolerance for max time we will wait for the next packet-- this can eventually replace the above HACK
-                    // TODO-- navigator.connection.addEventListener('change', () => { // prevent/cancel streams })
-                    console.log(`WARNING-- no packet received since ${lastChunkReceivedTimestamp}`)
-                  }
-                }, 5000)
-              }
-            } else {
-              fStore.render(fileName, fileDescription, mimeType, decrypted, catalog, chunkIdx, totalChunks)
+                  sub.unsubscribe()
+                } else {
+                  // TODO-- maintain a tolerance for max time we will wait for the next packet-- this can eventually replace the above HACK
+                  // TODO-- navigator.connection.addEventListener('change', () => { // prevent/cancel streams })
+                  console.log(`WARNING-- no packet received since ${lastChunkReceivedTimestamp}`)
+                }
+              }, 5000)
             }
+          } else {
+            fStore.render(
+              fileName,
+              fileDescription,
+              mimeType,
+              decrypted,
+              catalog,
+              chunkIdx,
+              totalChunks
+            )
+          }
 
-            if (!transcoding && chunkIdx === totalChunks - 1) {
-              fStore.endStream()
-              sub.unsubscribe()
-            }
+          if (!transcoding && chunkIdx === totalChunks - 1) {
+            fStore.endStream()
+            sub.unsubscribe()
           }
-          console.log('subscription closed')
-        })()
+        }
+        console.log('subscription closed')
+      })()
 
       const dl_request = {
         hash: hash,
@@ -368,7 +397,7 @@ export const catalogStore = defineStore('catalog', {
           sub.unsubscribe()
           fStore.reset()
         })
-    },
+    }
   },
   getters: {
     getNumCatalogsSelected(state) {
@@ -384,17 +413,16 @@ export const catalogStore = defineStore('catalog', {
       return state.shares_init && state.pending_init
     },
     getImportedCatalogs(state) {
-      state.catalogs.forEach(function(tCatalog) {
+      state.catalogs.forEach(function (tCatalog) {
         if (tCatalog.from == 'AC5V4OC2POUAX4W4H7CKN5TQ5AKVJJ4AJ7XZKNER6P6DHKBYGVGJHSNC') {
           tCatalog.pending_invite = false // synadiahub is never pending
           return
         }
-        state.pending_catalogs.forEach(function(tPending) {
+        state.pending_catalogs.forEach(function (tPending) {
           if (tCatalog.name === tPending.name) {
             tCatalog.pending_invite = true
           }
         })
-
       })
 
       return state.catalogs.filter((c) => !c.pending_invite)
diff --git a/natster-io/src/stores/file.ts b/natster-io/src/stores/file.ts
index 031cabb..22af598 100644
--- a/natster-io/src/stores/file.ts
+++ b/natster-io/src/stores/file.ts
@@ -23,7 +23,7 @@ export const fileStore = defineStore('file', {
     appendInterval: null,
     streamEndInterval: null,
 
-    onReset: null,
+    onReset: null
   }),
   actions: {
     endStream() {
@@ -41,7 +41,7 @@ export const fileStore = defineStore('file', {
     },
     initMediaSource() {
       const re = /ipad|iphone/i
-      if (navigator.userAgent.match(re) && typeof(ManagedMediaSource) !== 'undefined') {
+      if (navigator.userAgent.match(re) && typeof ManagedMediaSource !== 'undefined') {
         return new ManagedMediaSource()
       }
       return new MediaSource()
@@ -78,10 +78,10 @@ export const fileStore = defineStore('file', {
               console.log(e)
             })
 
-            this.videoSourceBuffer.addEventListener('abort', (e) => { })
-            this.videoSourceBuffer.addEventListener('updatestart', (e) => { })
-            this.videoSourceBuffer.addEventListener('update', (e) => { })
-            this.videoSourceBuffer.addEventListener('updateend', (e) => { })
+            this.videoSourceBuffer.addEventListener('abort', (e) => {})
+            this.videoSourceBuffer.addEventListener('updatestart', (e) => {})
+            this.videoSourceBuffer.addEventListener('update', (e) => {})
+            this.videoSourceBuffer.addEventListener('updateend', (e) => {})
           })
 
           this.mediaSource.addEventListener('sourceended', (e) => {
@@ -97,8 +97,8 @@ export const fileStore = defineStore('file', {
             this.buffer = []
           })
 
-          this.mediaSource.addEventListener('sourceclose', (e) => { })
-          this.mediaSource.addEventListener('error', (e) => { })
+          this.mediaSource.addEventListener('sourceclose', (e) => {})
+          this.mediaSource.addEventListener('error', (e) => {})
 
           this.appendInterval = setInterval(() => {
             if (
@@ -184,7 +184,7 @@ export const fileStore = defineStore('file', {
         this.streamEndInterval = null
       }
 
-      if (this.onReset && typeof (this.onReset) === 'function') {
+      if (this.onReset && typeof this.onReset === 'function') {
         this.onReset()
         this.onReset = null
       }
diff --git a/natster-io/src/stores/user.ts b/natster-io/src/stores/user.ts
index 9ce9593..5a33ace 100644
--- a/natster-io/src/stores/user.ts
+++ b/natster-io/src/stores/user.ts
@@ -56,7 +56,7 @@ export const userStore = defineStore('user', {
     },
     getCatalogOnline(state) {
       state.ping
-      return (Date.now() - new Date(state.last_seen_ts).getTime() < (1 * 60 * 1000))
+      return Date.now() - new Date(state.last_seen_ts).getTime() < 1 * 60 * 1000
     },
     getJWT(state) {
       return state.jwt !== '' ? state.jwt : localStorage.getItem('natster_jwt')
diff --git a/natster-io/src/views/AuthView.vue b/natster-io/src/views/AuthView.vue
index 5b8dcd9..35522d0 100644
--- a/natster-io/src/views/AuthView.vue
+++ b/natster-io/src/views/AuthView.vue
@@ -3,19 +3,38 @@
   <File />
   <TransitionRoot as="template" :show="sidebarOpen">
     <Dialog as="div" class="relative z-50 lg:hidden" @close="sidebarOpen = false">
-      <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
-        enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
-        leave-to="opacity-0">
+      <TransitionChild
+        as="template"
+        enter="transition-opacity ease-linear duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-300"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
         <div class="fixed inset-0 bg-gray-900/80" />
       </TransitionChild>
 
       <div class="fixed inset-0 flex">
-        <TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
-          enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform"
-          leave-from="translate-x-0" leave-to="-translate-x-full">
+        <TransitionChild
+          as="template"
+          enter="transition ease-in-out duration-300 transform"
+          enter-from="-translate-x-full"
+          enter-to="translate-x-0"
+          leave="transition ease-in-out duration-300 transform"
+          leave-from="translate-x-0"
+          leave-to="-translate-x-full"
+        >
           <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
-            <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
-              enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
+            <TransitionChild
+              as="template"
+              enter="ease-in-out duration-300"
+              enter-from="opacity-0"
+              enter-to="opacity-100"
+              leave="ease-in-out duration-300"
+              leave-from="opacity-100"
+              leave-to="opacity-0"
+            >
               <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
                 <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
                   <span class="sr-only">Close sidebar</span>
@@ -24,7 +43,9 @@
               </div>
             </TransitionChild>
             <!-- Sidebar component, swap this element with another sidebar if you like -->
-            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10">
+            <div
+              class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10"
+            >
               <div class="flex h-16 shrink-0 items-center">
                 <img class="h-8 w-auto" :src="natsterImg" alt="Natster" />
               </div>
@@ -55,8 +76,14 @@
             <Catalogs />
           </li>
           <li class="-mx-6 mt-auto">
-            <div class="flex flex-row-reverse items-center gap-x-4 px-6 py-3 text-sm inset-y-0 right-0">
-              <Avatar :user="user.name" :natster_account="uStore.getAccount" :photo="user.picture" />
+            <div
+              class="flex flex-row-reverse items-center gap-x-4 px-6 py-3 text-sm inset-y-0 right-0"
+            >
+              <Avatar
+                :user="user.name"
+                :natster_account="uStore.getAccount"
+                :photo="user.picture"
+              />
             </div>
           </li>
         </ul>
@@ -64,7 +91,9 @@
     </div>
   </div>
 
-  <div class="sticky top-0 z-40 flex items-center gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden">
+  <div
+    class="sticky top-0 z-40 flex items-center gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden"
+  >
     <button type="button" class="-m-2.5 p-2.5 text-gray-400 lg:hidden" @click="sidebarOpen = true">
       <span class="sr-only">Open sidebar</span>
       <Bars3Icon class="h-6 w-6" aria-hidden="true" />
@@ -112,7 +141,7 @@ onMounted(() => {
   if (isAuthenticated && user !== null) {
     user.value.natster ||= {
       jwt: uStore.getJWT,
-      nkey: uStore.getNkey,
+      nkey: uStore.getNkey
     }
 
     uStore.setJWT(user.value.natster.jwt)
diff --git a/natster-io/src/views/GettingStartedView.vue b/natster-io/src/views/GettingStartedView.vue
index 18962e1..801f462 100644
--- a/natster-io/src/views/GettingStartedView.vue
+++ b/natster-io/src/views/GettingStartedView.vue
@@ -1,92 +1,140 @@
 <template>
-  <div class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
+  <div
+    class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0"
+  >
     <div class="absolute inset-0 -z-10 overflow-hidden">
       <svg
         class="absolute left-[max(50%,25rem)] top-0 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-200 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)]"
-        aria-hidden="true">
+        aria-hidden="true"
+      >
         <defs>
-          <pattern id="e813992c-7d03-4cc4-a2bd-151760b470a0" width="200" height="200" x="50%" y="-1"
-            patternUnits="userSpaceOnUse">
+          <pattern
+            id="e813992c-7d03-4cc4-a2bd-151760b470a0"
+            width="200"
+            height="200"
+            x="50%"
+            y="-1"
+            patternUnits="userSpaceOnUse"
+          >
             <path d="M100 200V.5M.5 .5H200" fill="none" />
           </pattern>
         </defs>
         <svg x="50%" y="-1" class="overflow-visible fill-gray-50">
-          <path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
-            stroke-width="0" />
+          <path
+            d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+            stroke-width="0"
+          />
         </svg>
-        <rect width="100%" height="100%" stroke-width="0" fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)" />
+        <rect
+          width="100%"
+          height="100%"
+          stroke-width="0"
+          fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
+        />
       </svg>
     </div>
     <div
-      class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
+      class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10"
+    >
       <div
-        class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
+        class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+      >
         <div class="lg:pr-4">
           <div class="lg:max-w-lg">
             <img :src="natsterImg" class="h-20" />
             <p class="mt-6 text-xl leading-8 text-gray-700">
-              Natster is a secure peer-to-multipeer, decentralized media sharing platform.</p>
+              Natster is a secure peer-to-multipeer, decentralized media sharing platform.
+            </p>
           </div>
         </div>
       </div>
-      <div class="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden">
-        <h2 class="lg:pt-15 pb-2 mt-16 text-2xl font-bold tracking-tight text-gray-900">Getting Started with Natster
+      <div
+        class="-ml-12 -mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
+      >
+        <h2 class="lg:pt-15 pb-2 mt-16 text-2xl font-bold tracking-tight text-gray-900">
+          Getting Started with Natster
         </h2>
         <VCodeBlock :code="code_init" highlightjs lang="bash" theme="tokyo-night-light" copyTab />
         <br />
-        <h2 class="pb-2 mt-10 text-2xl font-bold tracking-tight text-gray-900">Create your first Natster share</h2>
+        <h2 class="pb-2 mt-10 text-2xl font-bold tracking-tight text-gray-900">
+          Create your first Natster share
+        </h2>
         <VCodeBlock :code="code_share" highlightjs lang="bash" theme="tokyo-night-light" copyTab />
       </div>
       <div
-        class="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
+        class="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"
+      >
         <div class="lg:pr-4">
           <div class="max-w-xl text-base leading-7 text-gray-700 lg:max-w-lg">
-            <p>Natster is an example of the kind of application you can build quickly and easily using nothing but NATS.
+            <p>
+              Natster is an example of the kind of application you can build quickly and easily
+              using nothing but NATS.
             </p>
             <ul role="list" class="mt-8 space-y-8 text-gray-600">
               <li class="flex gap-x-3">
-                <CloudArrowUpIcon class="mt-1 h-5 w-5 flex-none text-indigo-600" aria-hidden="true" />
-                <span><strong class="font-semibold text-gray-900">Share anywhere.</strong>
-                  Privately and securely share your media with anyone, anywhere, without giving up control over your
-                  data and its location.
+                <CloudArrowUpIcon
+                  class="mt-1 h-5 w-5 flex-none text-indigo-600"
+                  aria-hidden="true"
+                />
+                <span
+                  ><strong class="font-semibold text-gray-900">Share anywhere.</strong>
+                  Privately and securely share your media with anyone, anywhere, without giving up
+                  control over your data and its location.
                 </span>
               </li>
               <li class="flex gap-x-3">
                 <LockClosedIcon class="mt-1 h-5 w-5 flex-none text-indigo-600" aria-hidden="true" />
-                <span><strong class="font-semibold text-gray-900">Always encrypted.</strong>
+                <span
+                  ><strong class="font-semibold text-gray-900">Always encrypted.</strong>
                   Nothing you share can ever be read by anyone but the intended recipient.
                 </span>
               </li>
               <li class="flex gap-x-3">
                 <CogIcon class="mt-1 h-5 w-5 flex-none text-indigo-600" aria-hidden="true" />
-                <span><strong class="font-semibold text-gray-900">Nothing But NATS.</strong>
-                  NATS is more than a tool, it's a platform that gives us an easy button for building distributed apps.
+                <span
+                  ><strong class="font-semibold text-gray-900">Nothing But NATS.</strong>
+                  NATS is more than a tool, it's a platform that gives us an easy button for
+                  building distributed apps.
                 </span>
               </li>
               <li class="flex gap-x-3">
                 <ServerIcon class="mt-1 h-5 w-5 flex-none text-indigo-600" aria-hidden="true" />
-                <span><strong class="font-semibold text-gray-900">Powered by Nex.</strong>
+                <span
+                  ><strong class="font-semibold text-gray-900">Powered by Nex.</strong>
                   All backend services are managed by the NATS execution engine.
                 </span>
               </li>
               <li class="flex gap-x-3">
-                <RocketLaunchIcon class="mt-1 h-5 w-5 flex-none text-indigo-600" aria-hidden="true" />
-                <span><strong class="font-semibold text-gray-900">Built on Synadia Cloud.</strong>
-                  Synadia Cloud is a global, extensible, multi-cloud NATS.io platform. Run you application and
-                  access it from anywhere.
+                <RocketLaunchIcon
+                  class="mt-1 h-5 w-5 flex-none text-indigo-600"
+                  aria-hidden="true"
+                />
+                <span
+                  ><strong class="font-semibold text-gray-900">Built on Synadia Cloud.</strong>
+                  Synadia Cloud is a global, extensible, multi-cloud NATS.io platform. Run you
+                  application and access it from anywhere.
                 </span>
               </li>
             </ul>
             <p class="mt-8"></p>
-            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">Create your Synadia Cloud account.</h2>
-            <p class="mt-2">Natster is built on Synadia Cloud. You will need to <a href="https://cloud.synadia.com"
-                class="text-blue-500 underline">create a free account</a> for the application to work.
-              Synadia Cloud is what allows Natster to run on your laptop and be accessed anywhere by anyone (that you
-              give permission)
-              .</p>
-            <h2 class="mt-8 text-2xl font-bold tracking-tight text-gray-900">Need help? Slack us!</h2>
-            <p class="mt-2">The maintainers of Natster can be found hanging out in the <a href="https://slack.nats.io"
-                class="text-blue-500 underline">NATS.io slack</a>.</p>
+            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
+              Create your Synadia Cloud account.
+            </h2>
+            <p class="mt-2">
+              Natster is built on Synadia Cloud. You will need to
+              <a href="https://cloud.synadia.com" class="text-blue-500 underline"
+                >create a free account</a
+              >
+              for the application to work. Synadia Cloud is what allows Natster to run on your
+              laptop and be accessed anywhere by anyone (that you give permission) .
+            </p>
+            <h2 class="mt-8 text-2xl font-bold tracking-tight text-gray-900">
+              Need help? Slack us!
+            </h2>
+            <p class="mt-2">
+              The maintainers of Natster can be found hanging out in the
+              <a href="https://slack.nats.io" class="text-blue-500 underline">NATS.io slack</a>.
+            </p>
           </div>
         </div>
       </div>
@@ -95,13 +143,19 @@
 </template>
 
 <script setup lang="ts">
-import { CloudArrowUpIcon, LockClosedIcon, CogIcon, ServerIcon, RocketLaunchIcon } from '@heroicons/vue/20/solid'
+import {
+  CloudArrowUpIcon,
+  LockClosedIcon,
+  CogIcon,
+  ServerIcon,
+  RocketLaunchIcon
+} from '@heroicons/vue/20/solid'
 import { onMounted } from 'vue'
 import { ref } from 'vue'
 import Notification from '../components/Notification.vue'
 import { useRoute } from 'vue-router'
 import { notificationStore } from '../stores/notification'
-import VCodeBlock from '@wdns/vue-code-block';
+import VCodeBlock from '@wdns/vue-code-block'
 const natsterImg = new URL('@/assets/natster-horizontal.svg', import.meta.url)
 
 const code_init = ref(`# Install the Natster CLI
@@ -115,7 +169,7 @@ natster login
 
 # Verify your context was successfully bound
 natster whoami
-`);
+`)
 
 const code_share = ref(`# Create a new catalog
 natster catalog new
@@ -125,14 +179,14 @@ natster catalog serve
 
 # Share with your friends
 natster catalog share
-`);
+`)
 const route = useRoute()
 
 onMounted(() => {
   if (route.query.failed) {
     notificationStore().setNotification(
       'Failed to login',
-      'You tried to use an unbound oauth_id, please follow these instructions to login',
+      'You tried to use an unbound oauth_id, please follow these instructions to login'
     )
   }
 })
diff --git a/natster-io/src/views/HomeView.vue b/natster-io/src/views/HomeView.vue
index 81e80d9..084b6b1 100644
--- a/natster-io/src/views/HomeView.vue
+++ b/natster-io/src/views/HomeView.vue
@@ -2,23 +2,40 @@
   <div class="relative isolate overflow-hidden bg-gray-900">
     <svg
       class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <defs>
-        <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
-          patternUnits="userSpaceOnUse">
+        <pattern
+          id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
+          width="200"
+          height="200"
+          x="50%"
+          y="-1"
+          patternUnits="userSpaceOnUse"
+        >
           <path d="M.5 200V.5H200" fill="none" />
         </pattern>
       </defs>
       <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
-        <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
-          stroke-width="0" />
+        <path
+          d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+          stroke-width="0"
+        />
       </svg>
-      <rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
+      <rect
+        width="100%"
+        height="100%"
+        stroke-width="0"
+        fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
+      />
     </svg>
     <div
       class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
-      aria-hidden="true">
-      <div class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20" style="
+      aria-hidden="true"
+    >
+      <div
+        class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+        style="
           clip-path: polygon(
             73.6% 51.7%,
             91.7% 11.8%,
@@ -37,7 +54,8 @@
             58.9% 0.2%,
             73.6% 51.7%
           );
-        " />
+        "
+      />
     </div>
     <div class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
       <div class="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
@@ -48,17 +66,28 @@
           Synadia Cloud.
         </p>
         <div class="mt-10 flex items-center gap-x-6">
-          <button @click.prevent="login"
-            class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">
+          <button
+            @click.prevent="login"
+            class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+          >
             Login
           </button>
-          <router-link to="/getting-started" class="text-sm font-semibold leading-6 text-white">Getting started <span
-              aria-hidden="true">→</span></router-link>
+          <router-link to="/getting-started" class="text-sm font-semibold leading-6 text-white"
+            >Getting started <span aria-hidden="true">→</span></router-link
+          >
         </div>
       </div>
-      <div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none">
+      <div
+        class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none"
+      >
         <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
-          <img :src="natsterScreen" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md" />
+          <img
+            :src="natsterScreen"
+            alt="App screenshot"
+            width="2432"
+            height="1442"
+            class="w-[76rem] rounded-md"
+          />
         </div>
       </div>
     </div>