test publish

client/app/pages/index.vue

@@ -1,11 +1,62 @@
 <template>
-  <div class="flex items-center justify-center p-3">
-    <PrimeFieldset legend="Important information">
-      The chat is under development.
-    </PrimeFieldset>
+  <div class="flex flex-col gap-3 p-3 pt-12">
+    <PrimePanel header="Clients" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
+      <dl v-for="client in clients" :key="client.socketId" class="">
+        <div v-for="(value, key) in client" :key="key" class="py-2">
+          <dt class="font-bold">
+            {{ key }}
+          </dt>
+          <dd class="pl-8">
+            {{ value }}
+          </dd>
+        </div>
+      </dl>
+    </PrimePanel>
+
+    <PrimePanel header="Producers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
+      <dl v-for="[_, producer] in Array.from(producers)" :key="producer.id" class="">
+        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
+          <dt class="font-bold">
+            {{ key }}
+          </dt>
+          <dd class="pl-8">
+            {{ producer[key] }}
+          </dd>
+        </div>
+      </dl>
+    </PrimePanel>
+
+    <PrimePanel header="Consumers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
+      <dl v-for="[_, consumer] in Array.from(consumers)" :key="consumer.id" class="">
+        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
+          <dt class="font-bold">
+            {{ key }}
+          </dt>
+          <dd class="pl-8">
+            {{ consumer[key] }}
+          </dd>
+        </div>
+      </dl>
+    </PrimePanel>
   </div>
+
+<!--  <div class="flex items-center justify-center p-3"> -->
+<!--    <PrimeCard> -->
+<!--      <template #subtitle> -->
+<!--        Important information -->
+<!--      </template> -->
+
+<!--      <template #content> -->
+<!--        The chat is under development. -->
+<!--      </template> -->
+<!--    </PrimeCard> -->
+<!--  </div> -->
 </template>
 
 <script setup lang="ts">
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+const { clients } = useClients()
+const { producers, consumers } = useMediasoup()
+
+definePageMeta({
+})
 </script>

client/app/pages/preferences.vue

@@ -11,10 +11,28 @@
       <PrimeButton label="Save" type="submit" :disabled="!valid" />
     </form>
 
+    <div v-if="isTauri" class="p-3">
+      <PrimeButton label="Check for Updates" fluid severity="info" @click="onCheckForUpdates" />
+    </div>
+
     <div class="p-3">
-      <PrimeButton label="Logout" fluid severity="danger" @click="logout" />
+      <PrimeButton label="Logout" fluid severity="danger" @click="logout()" />
     </div>
   </div>
+
+  <PrimeToast position="bottom-center" group="updater">
+    <template #container="slotProps">
+      <div class="p-3">
+        <div class="font-medium text-lg mb-4">
+          {{ slotProps.message.detail }}
+        </div>
+        <div class="flex gap-3">
+          <PrimeButton size="small" label="Update now" @click="() => {}" />
+          <PrimeButton size="small" label="Later" severity="secondary" outlined @click="slotProps.closeCallback()" />
+        </div>
+      </div>
+    </template>
+  </PrimeToast>
 </template>
 
 <script setup lang="ts">
@@ -22,6 +40,8 @@ definePageMeta({
   name: 'Preferences',
 })
 
+const { isTauri } = useApp()
+const { checkForUpdates } = useUpdater()
 const { me, setMe, logout } = useAuth()
 
 const signaling = useSignaling()
@@ -39,6 +59,27 @@ const valid = computed(() => {
   return true
 })
 
+async function onCheckForUpdates() {
+  const update = await checkForUpdates()
+
+  toast.removeGroup('updater')
+
+  if (!update) {
+    toast.add({ severity: 'success', summary: 'You are up to date', closable: false, life: 1000 })
+
+    return
+  }
+
+  toast.add({
+    group: 'updater',
+    severity: 'info',
+    detail: `Version ${update?.version ?? '1.0.1'} is available!`,
+    closable: false,
+  })
+
+  // asdasd
+}
+
 async function save() {
   if (!valid.value)
     return

client/app/pages/updater.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex h-full">
+    <div class="w-80 m-auto">
+      <p class="text-center text-muted-color mb-4">
+        Updating...
+      </p>
+
+      <PrimeProgressBar mode="indeterminate" style="height: 8px;" />
+
+      <div class="flex items-center justify-center gap-2 mt-8">
+        <PrimeBadge :value="lastUpdate.currentVersion" size="small" severity="secondary" />
+        <i class="pi pi-arrow-right" style="font-size: 0.75rem;" />
+        <PrimeBadge :value="lastUpdate.version" size="small" severity="contrast" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Updater',
+  layout: 'blank',
+  auth: false,
+  middleware: () => {
+    const { lastUpdate } = useUpdater()
+
+    if (!lastUpdate.value)
+      return navigateTo('/')
+  },
+})
+
+const lastUpdate = useUpdater().lastUpdate.value!
+
+;(async () => {
+  try {
+    await lastUpdate.downloadAndInstall()
+  }
+  catch {
+    await navigateTo('/')
+  }
+})()
+</script>