From 9b79a25062efafd3cb7aef53d60d1876a0895a4f Mon Sep 17 00:00:00 2001
From: ivankazakov3344 <ivankazakov3344@gmail.com>
Date: Mon, 20 Jan 2025 19:35:57 +0300
Subject: [PATCH 1/5] Add session timer functionality

---
 bun.lockb                   | Bin 386636 -> 386636 bytes
 src/components/ChatList.vue |  14 +++++----
 src/components/UserBar.vue  |   3 ++
 src/store/sessionTimer.ts   |  59 ++++++++++++++++++++++++++++++++++++
 src/store/voiceStore.ts     |   5 +++
 tailwind.config.js          |   3 ++
 6 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/store/sessionTimer.ts

diff --git a/bun.lockb b/bun.lockb
index a6455de42fa5bd8e8a72e8651630e3de563667d1..a0bcbcd76fc76d60c6cd2dd8d7177665d26a3d31 100644
GIT binary patch
delta 5098
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
M#;b6L@m^o?e=R?aQ2+n{

delta 5120
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
UsGiJRvSjWsp1C`W*M{={0YoK{hX4Qo

diff --git a/src/components/ChatList.vue b/src/components/ChatList.vue
index 8bb7e7c..38b22e2 100644
--- a/src/components/ChatList.vue
+++ b/src/components/ChatList.vue
@@ -190,12 +190,13 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { ref } from 'vue';
+import { ref, onBeforeUnmount } from 'vue';
 import { logger } from '@/lib/logger';
 import { useWindow } from '@/store/windowStore';
 import { usePoolStore } from '@/store/poolStore';
 import { useVoice } from '@/store/voiceStore';
 import ArgonAvatar from './ArgonAvatar.vue';
+import { useSessionTimer } from '@/store/sessionTimer'
 
 const channelType = ref("" as "Text" | "Voice" | "Announcement");
 const channelName = ref("");
@@ -205,6 +206,7 @@ const servers = useServerStore();
 const windows = useWindow();
 const pool = usePoolStore();
 const voice = useVoice();
+const sessionTimerStore = useSessionTimer()
 
 
 const addChannel = () => {
@@ -220,17 +222,12 @@ const addChannel = () => {
 
 async function channelSelect(channelId: string) {
   logger.info(`Do action for channel '${channelId}'`);
-
   const channel = await pool.getChannel(channelId);
 
   if (!channel) return;
   if (channel.ChannelType == "Voice") {
     await voice.connectToChannel(channelId);
   }
-
-
-
-
   /*const channel = servers.getDetailsOfChannel(channelId);
 
   if (!channel) return;
@@ -242,12 +239,17 @@ async function channelSelect(channelId: string) {
 
 function channelDelete(channelId: string) {
   servers.deleteChannel(channelId);
+  sessionTimerStore.stopTimer()
 }
 
 
 const connectToChannel = (channelId: string) => {
   //servers.connectTo(channelId);
 };
+
+onBeforeUnmount(() => {
+  sessionTimerStore.stopTimer()
+})
 </script>
 
 <style scoped>
diff --git a/src/components/UserBar.vue b/src/components/UserBar.vue
index 779c76e..a7f51d8 100644
--- a/src/components/UserBar.vue
+++ b/src/components/UserBar.vue
@@ -49,6 +49,7 @@
           </TooltipProvider>
           <span class="font-semibold">{{ voice.activeChannel?.Name }}</span>
         </div>
+        <span class="text-timer text-[#a2a6a8]">{{ sessionTimerStore.sessionTime }}</span>
         <span class="text-xs text-lime-400 mt-1" v-if="voice.isConnected">Connected</span>
         <span class="text-xs text-orange-400 mt-1" v-if="voice.isBeginConnect">Connecting...</span>
       </div>
@@ -65,10 +66,12 @@ import { useMe } from "@/store/meStore";
 import { useSystemStore } from "@/store/systemStore";
 import ArgonAvatar from "./ArgonAvatar.vue";
 import { useVoice } from "@/store/voiceStore";
+import { useSessionTimer } from '@/store/sessionTimer'
 
 const me = useMe();
 const sys = useSystemStore();
 const voice = useVoice();
+const sessionTimerStore = useSessionTimer()
 </script>
 
 <style scoped>
diff --git a/src/store/sessionTimer.ts b/src/store/sessionTimer.ts
new file mode 100644
index 0000000..0176204
--- /dev/null
+++ b/src/store/sessionTimer.ts
@@ -0,0 +1,59 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export const useSessionTimer = defineStore("sessionTimer", () => {
+  const sessionStartDate = ref<Date>(new Date())
+  const daysSession = ref<number>(0)
+  const hoursSession = ref<number>(0)
+  const minutesSession = ref<number>(0)
+  const secondsSession = ref<number>(0)
+  const interval = ref()
+
+  const pad = (num: number): string => num.toString().padStart(2, '0');
+
+  function updateSessionDate(date: Date): void {
+    sessionStartDate.value = date
+  }
+
+  const sessionTime = computed(() => 
+    `${pad(hoursSession.value % 24)}:${pad(minutesSession.value % 60)}:${pad(secondsSession.value % 60)}`
+  )
+
+  function updateSessionTimer(): void {
+    const now = new Date();
+    const milliseconds = now.getTime() - sessionStartDate.value.getTime();
+    const seconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    daysSession.value = days
+    hoursSession.value = hours
+    minutesSession.value = minutes
+    secondsSession.value = seconds
+  }
+
+  function startTimer(): void {
+    updateSessionTimer()
+    interval.value = setInterval(updateSessionTimer, 1000)
+  }
+
+  function stopTimer() {
+    daysSession.value = 0
+    hoursSession.value = 0
+    minutesSession.value = 0
+    secondsSession.value = 0
+    updateSessionDate(new Date())
+
+    if(interval.value) {
+      clearInterval(interval.value)
+    }
+  }
+
+  return { 
+    updateSessionTimer,
+    sessionTime,
+    startTimer,
+    stopTimer
+  };
+});
\ No newline at end of file
diff --git a/src/store/voiceStore.ts b/src/store/voiceStore.ts
index b8fd9db..2b638c4 100644
--- a/src/store/voiceStore.ts
+++ b/src/store/voiceStore.ts
@@ -17,12 +17,14 @@ import { useApi } from "./apiStore";
 import { delay, Subscription, timer } from "rxjs";
 import { useConfig } from "./remoteConfig";
 import { useSystemStore } from "./systemStore";
+import { useSessionTimer } from './sessionTimer'
 
 export const useVoice = defineStore("voice", () => {
   const pool = usePoolStore();
   const api = useApi();
   const cfg = useConfig();
   const sys = useSystemStore();
+  const sessionTimerStore = useSessionTimer()
 
   const currentState = ref("NONE" as "NONE" | "BEGIN_CONNECT" | "CONNECTED");
 
@@ -58,6 +60,7 @@ export const useVoice = defineStore("voice", () => {
   });
 
   async function connectToChannel(channelId: string) {
+    sessionTimerStore.stopTimer()
     pool.selectedChannel = channelId;
     activeChannel.value = (await pool.getChannel(channelId))!;
     currentState.value = "BEGIN_CONNECT";
@@ -131,6 +134,7 @@ export const useVoice = defineStore("voice", () => {
     }
 
     currentState.value = "CONNECTED";
+    sessionTimerStore.startTimer()
     logger.success("Connected to channel");
   }
 
@@ -157,6 +161,7 @@ export const useVoice = defineStore("voice", () => {
         connectedRoom.room = null;
         pool.selectedChannel = null;
         activeChannel.value = null;
+        sessionTimerStore.stopTimer()
       } else {
         logger.error("No active channel connection");
       }
diff --git a/tailwind.config.js b/tailwind.config.js
index d72b39c..7bb8be9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -90,6 +90,9 @@ module.exports = {
         "collapsible-down": "collapsible-down 0.2s ease-in-out",
         "collapsible-up": "collapsible-up 0.2s ease-in-out",
       },
+      fontSize: {
+        'timer': ['12px', '15px'],
+      }
     },
   },
   plugins: [animate],

From 20869caea55c05b171c99d46bd0bf3d6eee230e7 Mon Sep 17 00:00:00 2001
From: ivankazakov3344 <ivankazakov3344@gmail.com>
Date: Wed, 22 Jan 2025 19:52:20 +0300
Subject: [PATCH 2/5] Add session timer functionality

---
 src/components/ChatList.vue | 16 ++++++++--------
 src/components/UserBar.vue  |  2 +-
 src/store/sessionTimer.ts   |  5 +++++
 src/store/voiceStore.ts     | 12 ++++++++++--
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/ChatList.vue b/src/components/ChatList.vue
index 38b22e2..308e9ea 100644
--- a/src/components/ChatList.vue
+++ b/src/components/ChatList.vue
@@ -190,7 +190,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { ref, onBeforeUnmount } from 'vue';
+import { ref } from 'vue';
 import { logger } from '@/lib/logger';
 import { useWindow } from '@/store/windowStore';
 import { usePoolStore } from '@/store/poolStore';
@@ -237,19 +237,19 @@ async function channelSelect(channelId: string) {
   }*/
 }
 
-function channelDelete(channelId: string) {
-  servers.deleteChannel(channelId);
-  sessionTimerStore.stopTimer()
+async function channelDelete(channelId: string) {
+  try {
+    await servers.deleteChannel(channelId);
+    sessionTimerStore.stopTimer()
+  } catch (error) {
+    logger.error('Failed to delete channel:', error)
+  }
 }
 
 
 const connectToChannel = (channelId: string) => {
   //servers.connectTo(channelId);
 };
-
-onBeforeUnmount(() => {
-  sessionTimerStore.stopTimer()
-})
 </script>
 
 <style scoped>
diff --git a/src/components/UserBar.vue b/src/components/UserBar.vue
index a7f51d8..c1fce25 100644
--- a/src/components/UserBar.vue
+++ b/src/components/UserBar.vue
@@ -49,7 +49,7 @@
           </TooltipProvider>
           <span class="font-semibold">{{ voice.activeChannel?.Name }}</span>
         </div>
-        <span class="text-timer text-[#a2a6a8]">{{ sessionTimerStore.sessionTime }}</span>
+        <span v-if="voice.isConnected" class="text-timer text-[#a2a6a8]">{{ sessionTimerStore.sessionTime }}</span>
         <span class="text-xs text-lime-400 mt-1" v-if="voice.isConnected">Connected</span>
         <span class="text-xs text-orange-400 mt-1" v-if="voice.isBeginConnect">Connecting...</span>
       </div>
diff --git a/src/store/sessionTimer.ts b/src/store/sessionTimer.ts
index 0176204..330da28 100644
--- a/src/store/sessionTimer.ts
+++ b/src/store/sessionTimer.ts
@@ -21,6 +21,10 @@ export const useSessionTimer = defineStore("sessionTimer", () => {
 
   function updateSessionTimer(): void {
     const now = new Date();
+    if (!(sessionStartDate.value instanceof Date) || isNaN(sessionStartDate.value.getTime())) {
+      stopTimer()
+      return
+    }
     const milliseconds = now.getTime() - sessionStartDate.value.getTime();
     const seconds = Math.floor(milliseconds / 1000);
     const minutes = Math.floor(seconds / 60);
@@ -34,6 +38,7 @@ export const useSessionTimer = defineStore("sessionTimer", () => {
   }
 
   function startTimer(): void {
+    stopTimer()
     updateSessionTimer()
     interval.value = setInterval(updateSessionTimer, 1000)
   }
diff --git a/src/store/voiceStore.ts b/src/store/voiceStore.ts
index 2b638c4..b40793a 100644
--- a/src/store/voiceStore.ts
+++ b/src/store/voiceStore.ts
@@ -134,7 +134,11 @@ export const useVoice = defineStore("voice", () => {
     }
 
     currentState.value = "CONNECTED";
-    sessionTimerStore.startTimer()
+    try {
+      sessionTimerStore.startTimer()
+    } catch (error) {
+      logger.error('Failed to start session timer:', error)
+    }
     logger.success("Connected to channel");
   }
 
@@ -161,7 +165,11 @@ export const useVoice = defineStore("voice", () => {
         connectedRoom.room = null;
         pool.selectedChannel = null;
         activeChannel.value = null;
-        sessionTimerStore.stopTimer()
+        try {
+          sessionTimerStore.stopTimer()
+        } catch (error) {
+          logger.error('Failed to stop session timer:', error)
+        }
       } else {
         logger.error("No active channel connection");
       }

From efefe8fa67f28eb05f3648f22a20f1e15660a916 Mon Sep 17 00:00:00 2001
From: ivankazakov3344 <ivankazakov3344@gmail.com>
Date: Wed, 22 Jan 2025 19:59:05 +0300
Subject: [PATCH 3/5] Add session timer functionality

---
 src/store/sessionTimer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/sessionTimer.ts b/src/store/sessionTimer.ts
index 330da28..6510a76 100644
--- a/src/store/sessionTimer.ts
+++ b/src/store/sessionTimer.ts
@@ -21,7 +21,7 @@ export const useSessionTimer = defineStore("sessionTimer", () => {
 
   function updateSessionTimer(): void {
     const now = new Date();
-    if (!(sessionStartDate.value instanceof Date) || isNaN(sessionStartDate.value.getTime())) {
+    if (!(sessionStartDate.value instanceof Date) || Number.isNaN(sessionStartDate.value.getTime())) {
       stopTimer()
       return
     }

From 683b21edef48e281595689eb2e3003e447f29671 Mon Sep 17 00:00:00 2001
From: ivankazakov3344 <ivankazakov3344@gmail.com>
Date: Wed, 22 Jan 2025 20:57:43 +0300
Subject: [PATCH 4/5] Add session timer functionality

---
 src/store/sessionTimer.ts | 52 +++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/store/sessionTimer.ts b/src/store/sessionTimer.ts
index 6510a76..d08c671 100644
--- a/src/store/sessionTimer.ts
+++ b/src/store/sessionTimer.ts
@@ -1,29 +1,30 @@
 import { defineStore } from "pinia";
+import { interval, Subscription } from "rxjs";
 import { computed, ref } from "vue";
 
 export const useSessionTimer = defineStore("sessionTimer", () => {
-  const sessionStartDate = ref<Date>(new Date())
-  const daysSession = ref<number>(0)
-  const hoursSession = ref<number>(0)
-  const minutesSession = ref<number>(0)
-  const secondsSession = ref<number>(0)
-  const interval = ref()
+  const sessionStartDate = ref<Date>(new Date());
+  const daysSession = ref<number>(0);
+  const hoursSession = ref<number>(0);
+  const minutesSession = ref<number>(0);
+  const secondsSession = ref<number>(0);
+  const subscription = ref<Subscription | null>(null);
 
   const pad = (num: number): string => num.toString().padStart(2, '0');
 
   function updateSessionDate(date: Date): void {
-    sessionStartDate.value = date
+    sessionStartDate.value = date;
   }
 
   const sessionTime = computed(() => 
     `${pad(hoursSession.value % 24)}:${pad(minutesSession.value % 60)}:${pad(secondsSession.value % 60)}`
-  )
+  );
 
   function updateSessionTimer(): void {
     const now = new Date();
     if (!(sessionStartDate.value instanceof Date) || Number.isNaN(sessionStartDate.value.getTime())) {
-      stopTimer()
-      return
+      stopTimer();
+      return;
     }
     const milliseconds = now.getTime() - sessionStartDate.value.getTime();
     const seconds = Math.floor(milliseconds / 1000);
@@ -31,27 +32,30 @@ export const useSessionTimer = defineStore("sessionTimer", () => {
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);
 
-    daysSession.value = days
-    hoursSession.value = hours
-    minutesSession.value = minutes
-    secondsSession.value = seconds
+    daysSession.value = days;
+    hoursSession.value = hours;
+    minutesSession.value = minutes;
+    secondsSession.value = seconds;
   }
 
   function startTimer(): void {
-    stopTimer()
-    updateSessionTimer()
-    interval.value = setInterval(updateSessionTimer, 1000)
+    stopTimer();
+    subscription.value = interval(1000)
+      .subscribe(() => {
+        updateSessionTimer();
+      });
   }
 
   function stopTimer() {
-    daysSession.value = 0
-    hoursSession.value = 0
-    minutesSession.value = 0
-    secondsSession.value = 0
-    updateSessionDate(new Date())
+    daysSession.value = 0;
+    hoursSession.value = 0;
+    minutesSession.value = 0;
+    secondsSession.value = 0;
+    updateSessionDate(new Date());
 
-    if(interval.value) {
-      clearInterval(interval.value)
+    if(subscription.value) {
+      subscription.value.unsubscribe();
+      subscription.value = null;
     }
   }
 

From 8160994d24d581c3794f069b3e8de2f2929bb240 Mon Sep 17 00:00:00 2001
From: ivankazakov3344 <ivankazakov3344@gmail.com>
Date: Thu, 23 Jan 2025 10:43:54 +0300
Subject: [PATCH 5/5] Add session timer functionality

---
 src/components/ChatList.vue |  9 +--------
 src/components/UserBar.vue  |  2 +-
 src/store/sessionTimer.ts   | 40 +++++++++++--------------------------
 src/store/voiceStore.ts     | 14 +++----------
 4 files changed, 17 insertions(+), 48 deletions(-)

diff --git a/src/components/ChatList.vue b/src/components/ChatList.vue
index 308e9ea..d7de7e4 100644
--- a/src/components/ChatList.vue
+++ b/src/components/ChatList.vue
@@ -196,7 +196,6 @@ import { useWindow } from '@/store/windowStore';
 import { usePoolStore } from '@/store/poolStore';
 import { useVoice } from '@/store/voiceStore';
 import ArgonAvatar from './ArgonAvatar.vue';
-import { useSessionTimer } from '@/store/sessionTimer'
 
 const channelType = ref("" as "Text" | "Voice" | "Announcement");
 const channelName = ref("");
@@ -206,7 +205,6 @@ const servers = useServerStore();
 const windows = useWindow();
 const pool = usePoolStore();
 const voice = useVoice();
-const sessionTimerStore = useSessionTimer()
 
 
 const addChannel = () => {
@@ -238,12 +236,7 @@ async function channelSelect(channelId: string) {
 }
 
 async function channelDelete(channelId: string) {
-  try {
-    await servers.deleteChannel(channelId);
-    sessionTimerStore.stopTimer()
-  } catch (error) {
-    logger.error('Failed to delete channel:', error)
-  }
+  await servers.deleteChannel(channelId);
 }
 
 
diff --git a/src/components/UserBar.vue b/src/components/UserBar.vue
index c1fce25..4a917a8 100644
--- a/src/components/UserBar.vue
+++ b/src/components/UserBar.vue
@@ -49,7 +49,7 @@
           </TooltipProvider>
           <span class="font-semibold">{{ voice.activeChannel?.Name }}</span>
         </div>
-        <span v-if="voice.isConnected" class="text-timer text-[#a2a6a8]">{{ sessionTimerStore.sessionTime }}</span>
+        <span v-if="voice.isConnected" class="text-timer text-[#a2a6a8]">{{ sessionTimerStore.sessionTimer }}</span>
         <span class="text-xs text-lime-400 mt-1" v-if="voice.isConnected">Connected</span>
         <span class="text-xs text-orange-400 mt-1" v-if="voice.isBeginConnect">Connecting...</span>
       </div>
diff --git a/src/store/sessionTimer.ts b/src/store/sessionTimer.ts
index d08c671..6968b59 100644
--- a/src/store/sessionTimer.ts
+++ b/src/store/sessionTimer.ts
@@ -1,25 +1,14 @@
 import { defineStore } from "pinia";
 import { interval, Subscription } from "rxjs";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 
 export const useSessionTimer = defineStore("sessionTimer", () => {
   const sessionStartDate = ref<Date>(new Date());
-  const daysSession = ref<number>(0);
-  const hoursSession = ref<number>(0);
-  const minutesSession = ref<number>(0);
-  const secondsSession = ref<number>(0);
+  const sessionTimer = ref<string>('00:00:00');
   const subscription = ref<Subscription | null>(null);
 
   const pad = (num: number): string => num.toString().padStart(2, '0');
 
-  function updateSessionDate(date: Date): void {
-    sessionStartDate.value = date;
-  }
-
-  const sessionTime = computed(() => 
-    `${pad(hoursSession.value % 24)}:${pad(minutesSession.value % 60)}:${pad(secondsSession.value % 60)}`
-  );
-
   function updateSessionTimer(): void {
     const now = new Date();
     if (!(sessionStartDate.value instanceof Date) || Number.isNaN(sessionStartDate.value.getTime())) {
@@ -32,26 +21,22 @@ export const useSessionTimer = defineStore("sessionTimer", () => {
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);
 
-    daysSession.value = days;
-    hoursSession.value = hours;
-    minutesSession.value = minutes;
-    secondsSession.value = seconds;
+    if(days < 1) {
+      sessionTimer.value = `${pad(hours % 24)}:${pad(minutes % 60)}:${pad(seconds % 60)}`;
+    } else {
+      sessionTimer.value = `${days}:${pad(hours % 24)}:${pad(minutes % 60)}:${pad(seconds % 60)}`;
+    }
   }
 
   function startTimer(): void {
     stopTimer();
     subscription.value = interval(1000)
-      .subscribe(() => {
-        updateSessionTimer();
-      });
+      .subscribe(updateSessionTimer);
   }
 
   function stopTimer() {
-    daysSession.value = 0;
-    hoursSession.value = 0;
-    minutesSession.value = 0;
-    secondsSession.value = 0;
-    updateSessionDate(new Date());
+    sessionTimer.value = '00:00:00';
+    sessionStartDate.value = new Date();
 
     if(subscription.value) {
       subscription.value.unsubscribe();
@@ -59,9 +44,8 @@ export const useSessionTimer = defineStore("sessionTimer", () => {
     }
   }
 
-  return { 
-    updateSessionTimer,
-    sessionTime,
+  return {
+    sessionTimer,
     startTimer,
     stopTimer
   };
diff --git a/src/store/voiceStore.ts b/src/store/voiceStore.ts
index b40793a..7f7d917 100644
--- a/src/store/voiceStore.ts
+++ b/src/store/voiceStore.ts
@@ -24,7 +24,7 @@ export const useVoice = defineStore("voice", () => {
   const api = useApi();
   const cfg = useConfig();
   const sys = useSystemStore();
-  const sessionTimerStore = useSessionTimer()
+  const sessionTimerStore = useSessionTimer();
 
   const currentState = ref("NONE" as "NONE" | "BEGIN_CONNECT" | "CONNECTED");
 
@@ -134,11 +134,7 @@ export const useVoice = defineStore("voice", () => {
     }
 
     currentState.value = "CONNECTED";
-    try {
-      sessionTimerStore.startTimer()
-    } catch (error) {
-      logger.error('Failed to start session timer:', error)
-    }
+    sessionTimerStore.startTimer()
     logger.success("Connected to channel");
   }
 
@@ -165,11 +161,7 @@ export const useVoice = defineStore("voice", () => {
         connectedRoom.room = null;
         pool.selectedChannel = null;
         activeChannel.value = null;
-        try {
-          sessionTimerStore.stopTimer()
-        } catch (error) {
-          logger.error('Failed to stop session timer:', error)
-        }
+        sessionTimerStore.stopTimer()
       } else {
         logger.error("No active channel connection");
       }