throttr · Zen0x7 · Jun 20, 2025 · Jun 20, 2025
diff --git a/components/Cards/ChannelChatCard.vue b/components/Cards/ChannelChatCard.vue
@@ -21,6 +21,8 @@ import type {FormSubmitEvent} from "@nuxt/ui";
 const props = defineProps<{ channel: string }>()
 const messages = ref<string[]>([])
 
+const toast = useToast();
+const { t } = useI18n();
 const { connect, close } = useSocket()
 const route = useRoute();
 
@@ -46,7 +48,6 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
 
     toast.add({title: t('forms.event', { name: "Published"}), color: 'success'})
     console.log("Published ⤑ Response", response)
-    emit('success');
   } catch (error) {
     toast.add({title: t('forms.event', { name: "Published ⤑ Exception"}), color: 'error'})
     console.error("Published ⤑ Exception", error)

diff --git a/components/Charts/RequestTypesChart.vue b/components/Charts/RequestTypesChart.vue
@@ -127,7 +127,7 @@ const xFormatter = (i: number): string | number => `${chart_data.value[i].date}`
       y-label="Requests"
       :y-grid-line="true"
       :x-formatter="xFormatter"
-      :x-num-ticks="10"
+      :x-num-ticks="2"
       :y-num-ticks="10"
       :curve-type="CurveType.MonotoneX"
       :legend-position="LegendPosition.Top"

diff --git a/components/Forms/SubscribeForm.vue b/components/Forms/SubscribeForm.vue
@@ -20,7 +20,7 @@ import type {FormSubmitEvent} from "@nuxt/ui";
 
 const {t} = useI18n()
 
-const emit = defineEmits(["success"]);
+const emit = defineEmits(["chat_closed"]);
 
 const schema = z.object({
   channel: z.string(),
@@ -32,20 +32,31 @@ const state = reactive<Partial<Schema>>({
   channel: '',
 })
 
-const toast = useToast()
-const route = useRoute()
+const subscriptions = useSubscriptions();
 
 const open_chat = ref(false);
 const channel_listen = ref("");
 
 const submit = async (event: FormSubmitEvent<Schema>) => {
   try {
     channel_listen.value = event.data.channel;
+
+    subscriptions.subscriptions.push({
+      name: event.data.channel,
+    })
+
     open_chat.value = true;
   } catch (error) {
     throw error;
   }
 }
+
+watch(open_chat, (next, old) => {
+  console.log(old, next);
+  if (old == true && next == false) {
+    emit("chat_closed");
+  }
+})
 </script>
 
 <template>

diff --git a/components/Lists/InstancesList.vue b/components/Lists/InstancesList.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <TablesServicesTable/>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/Lists/SubscriptionsList.vue b/components/Lists/SubscriptionsList.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import UButton from "#ui/components/Button.vue";
+
+const open_subscribe = ref(false);
+const open_chat = ref(false);
+const channel_listen = ref('');
+
+const open = (channel: string) => {
+  channel_listen.value = channel;
+  open_chat.value = true;
+}
+
+const subscriptions = useSubscriptions();
+</script>
+
+<template>
+  <!-- LISTEN -->
+  <UModal v-model:open="open_chat"
+          title="Listen Channel"
+          description="Intercept and view channel messages"
+          :dismissible="true"
+          :close="true"
+          class="max-w-3xl">
+    <template #body>
+      <CardsChannelChatCard :channel="channel_listen" />
+    </template>
+  </UModal>
+  <!-- SUBSCRIBE -->
+  <UModal v-model:open="open_subscribe"
+          title="Subscribe"
+          description="Complete the form to start to intercept channel"
+          :dismissible="true"
+          :close="true"
+          class="max-w-sm">
+    <template #body>
+      <FormsSubscribeForm v-on:chat_closed="open_subscribe = false" />
+    </template>
+  </UModal>
+  <ul role="list" class="-mx-2 mt-2 space-y-1">
+    <li v-for="subscription in subscriptions.subscriptions" :key="subscription.name">
+      <UButton variant="link" @click="open(subscription.name)"># {{subscription.name }}</UButton>
+    </li>
+  </ul>
+  <div class="mt-5">
+    <UButton type="button" variant="outline" @click="open_subscribe = true">Add</UButton>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/Resources/Services/Channels.vue b/components/Resources/Services/Channels.vue
@@ -58,7 +58,7 @@ onMounted(async () => {
               :close="true"
               class="max-w-sm">
         <template #body>
-          <FormsSubscribeForm />
+          <FormsSubscribeForm v-on:chat_closed="open_subscribe = false" />
         </template>
       </UModal>
 

diff --git a/components/Resources/Services/Overview.vue b/components/Resources/Services/Overview.vue
@@ -84,15 +84,10 @@ onUnmounted(() => {
 <template>
   <div>
     <div v-if="data.success">
-      <div class="grid grid-cols-4 gap-10 mb-10">
-
-        <div>
-          <div>
-            <h1 class="text-2xl mb-10">Overview</h1>
-          </div>
-
+      <div>
+        <div class="mb-10">
           <UCard>
-            <div class="grid grid-cols-2 gap-10">
+            <div class="grid grid-cols-4 gap-10">
               <MetricCard
                   title="Report At" :value="formatDate(data.timestamp, false)" />
               <MetricCard
@@ -106,11 +101,11 @@ onUnmounted(() => {
           </UCard>
         </div>
 
-        <div class="col-span-3">
+        <div>
           <div class="mb-10">
             <h1 class="text-2xl">Service</h1>
           </div>
-          <div class="grid grid-cols-2 gap-10">
+          <div class="grid grid-cols-2 gap-10 mb-10">
             <UCard>
               <ChartsRequestTypesChart :historic="historic"/>
             </UCard>

diff --git a/components/Tables/ServicesTable.vue b/components/Tables/ServicesTable.vue
@@ -16,12 +16,24 @@
 
 const {t} = useI18n()
 const services = useServices();
+
+onMounted(async () => {
+  await services.setup();
+})
 </script>
 
 <template>
-
-  <div>
-    <UButton :label="t('forms.add_server')" type="button" @click="services.attributes.formOpen = true"/>
-  </div>
+  <UModal v-model:open="services.attributes.formOpen"
+          :title="t('welcome.modal.title')"
+          :description="t('welcome.modal.description')"
+          :dismissible="true"
+          :close="true">
+    <template #body>
+      <FormsServicesForm/>
+    </template>
+  </UModal>
   <UTable :data="services.services" :columns="services.columns" class="flex-1" />
+  <div class="p-4">
+    <UButton :label="t('forms.add_server')" type="button" variant="outline" @click="services.attributes.formOpen = true"/>
+  </div>
 </template>
diff --git a/components/Tabs/ServicesTab.vue b/components/Tabs/ServicesTab.vue
@@ -61,7 +61,7 @@ const items = ref<TabsItem[]>([
 </script>
 
 <template>
-  <UTabs v-model="active" size="lg" variant="pill" :content="false" :items="items" class="w-full" />
+  <UTabs v-model="active" size="lg" variant="link" :items="items" class="w-full" orientation="vertical" />
 </template>
 
 <style scoped>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -17,8 +17,36 @@
 
 <template>
   <div>
-    <div class="mx-auto">
-      <slot />
+    <div class="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
+      <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-black/10 px-6 ring-1 ring-white/5">
+        <div class="flex h-24 shrink-0 items-center">
+          <img class="h-16 w-auto" src="/logo.png" alt="Throttr" />
+        </div>
+        <nav class="flex flex-1 flex-col">
+          <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li class="w-full">
+              <TabsServicesTab />
+            </li>
+            <li>
+              <div class="text-xs/6 font-semibold text-gray-400">Subscriptions</div>
+              <ListsSubscriptionsList />
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+
+    <div class="xl:pl-72">
+      <main class="lg:pr-96">
+       <slot/>
+      </main>
+
+      <aside class="bg-black/10 lg:fixed lg:top-0 lg:right-0 lg:bottom-0 lg:w-96 lg:overflow-y-auto lg:border-l lg:border-white/5">
+        <header class="flex items-center justify-between border-b border-white/5 px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
+          <h2 class="text-base/7 font-semibold text-white">Instances</h2>
+        </header>
+        <ListsInstancesList />
+      </aside>
     </div>
   </div>
 </template>

diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.23",
+    "@heroicons/vue": "^2.2.0",
     "@nuxt/eslint": "1.4.1",
     "@nuxt/fonts": "0.11.4",
     "@nuxt/icon": "1.13.0",

diff --git a/pages/services/[id]/[tab].vue b/pages/services/[id]/[tab].vue
@@ -19,14 +19,6 @@ import type { BreadcrumbItem } from "@nuxt/ui";
 const route = useRoute()
 
 const items = ref<BreadcrumbItem[]>([
-  {
-    label: 'Home',
-    to: '/'
-  },
-  {
-    label: 'Instances',
-    to: '/services'
-  },
 ])
 
 onMounted(() => {
@@ -77,8 +69,6 @@ onMounted(() => {
       <UBreadcrumb :items="items" />
     </div>
 
-    <TabsServicesTab class="mb-10" />
-
     <div v-if="route.params.tab === 'overview'">
       <ResourcesServicesOverview />
     </div>

diff --git a/public/logo.png b/public/logo.png
diff --git a/stores/services.ts b/stores/services.ts
@@ -92,12 +92,7 @@ export const useServices = defineStore('services', () => {
         {
             accessorKey: 'host',
             header: 'Host',
-            cell: ({ row }) => `${row.original.instance.config.host}`,
-        },
-        {
-            accessorKey: 'port',
-            header: 'Port',
-            cell: ({ row }) => `${row.original.instance.config.port}`,
+            cell: ({ row }) => `${row.original.instance.config.host}:${row.original.instance.config.port}`,
         },
         {
             accessorKey: 'status',
@@ -110,27 +105,6 @@ export const useServices = defineStore('services', () => {
                 )
             }
         },
-        {
-            accessorKey: 'connections',
-            header: 'Connections',
-            cell: ({ row }) => `${row.original.instance.config.max_connections}`,
-        },
-        {
-            accessorKey: 'value_size',
-            header: 'Value Size',
-            cell: ({ row }) => {
-                switch (row.original.instance.config.value_size) {
-                    case ValueSize.UInt8:
-                        return "UINT8";
-                    case ValueSize.UInt16:
-                        return "UINT16";
-                    case ValueSize.UInt32:
-                        return "UINT32";
-                    case ValueSize.UInt64:
-                        return "UINT64";
-                }
-            },
-        },
         {
             id: 'actions',
             enableHiding: false,

diff --git a/stores/subscriptions.ts b/stores/subscriptions.ts
@@ -0,0 +1,29 @@
+// Copyright (C) 2025 Ian Torres
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { defineStore } from 'pinia'
+
+interface StoredSubscription {
+    name: string
+}
+
+export const useSubscriptions = defineStore('subscriptions', () => {
+
+    const subscriptions : Ref<StoredSubscription> = ref([]);
+
+    return {
+        subscriptions,
+    }
+})
diff --git a/yarn.lock b/yarn.lock
@@ -702,6 +702,18 @@
     "@floating-ui/utils" "^0.2.9"
     vue-demi ">=0.13.0"
 
+"@headlessui/vue@^1.7.23":
+  version "1.7.23"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.23.tgz#7fe19dbeca35de9e6270c82c78c4864e6a6f7391"
+  integrity sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==
+  dependencies:
+    "@tanstack/vue-virtual" "^3.0.0-beta.60"
+
+"@heroicons/vue@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-2.2.0.tgz#d81f14eed448eec9859849ed63facd3f29bca2b3"
+  integrity sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
@@ -2272,7 +2284,7 @@
   dependencies:
     "@tanstack/table-core" "8.21.3"
 
-"@tanstack/vue-virtual@^3.12.0":
+"@tanstack/vue-virtual@^3.0.0-beta.60", "@tanstack/vue-virtual@^3.12.0":
   version "3.13.10"
   resolved "https://registry.yarnpkg.com/@tanstack/vue-virtual/-/vue-virtual-3.13.10.tgz#de88aeffd3cb4602c46c2d59d9ef70140d34837d"
   integrity sha512-1UZmUiMNyKxQ1JFPtO3rfRmK7IuLYwfj/foPC7FVWj6yHand4ry5joFh8LQ1Ckm7Dfe/08cv6LKZNc4WYj7hxQ==