From 8a55b36527bc6b28de3bf93e89ce8fb07539084f Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sat, 14 May 2022 11:15:42 +0200
Subject: [PATCH] refactor: ts and composition api for single instance
 components

---
 scripts/devRunner.js                          |   2 +-
 src/common/libs/bufferToBase64.ts             |   2 +-
 src/renderer/components/BaseTextEditor.vue    |   2 +-
 src/renderer/components/FakerSelect.vue       | 261 +++++++++---------
 src/renderer/components/ModalFakerRows.vue    |   2 +-
 src/renderer/components/TheFooter.vue         |  61 ++--
 .../components/TheNotificationsBoard.vue      |  98 +++----
 src/renderer/components/TheScratchpad.vue     |  63 ++---
 src/renderer/components/TheSettingBar.vue     |  82 +++++-
 src/renderer/components/TheTitleBar.vue       | 121 ++++----
 .../libs/{arrayToFile.js => arrayToFile.ts}   |   8 +-
 .../libs/{unproxify.js => unproxify.ts}       |   5 +-
 12 files changed, 364 insertions(+), 343 deletions(-)
 rename src/renderer/libs/{arrayToFile.js => arrayToFile.ts} (89%)
 rename src/renderer/libs/{unproxify.js => unproxify.ts} (76%)

diff --git a/scripts/devRunner.js b/scripts/devRunner.js
index a981080c..6b9bda17 100644
--- a/scripts/devRunner.js
+++ b/scripts/devRunner.js
@@ -59,7 +59,7 @@ async function restartElectron () {
       console.error(chalk.red(data.toString()));
    });
 
-   electronProcess.on('exit', (code, signal) => {
+   electronProcess.on('exit', () => {
       if (!manualRestart) process.exit(0);
    });
 }
diff --git a/src/common/libs/bufferToBase64.ts b/src/common/libs/bufferToBase64.ts
index 62db5d49..312ead6a 100644
--- a/src/common/libs/bufferToBase64.ts
+++ b/src/common/libs/bufferToBase64.ts
@@ -2,5 +2,5 @@ export function bufferToBase64 (buf: Buffer) {
    const binstr = Array.prototype.map.call(buf, ch => {
       return String.fromCharCode(ch);
    }).join('');
-   return Buffer.from(binstr, 'base64');
+   return Buffer.from(binstr, 'binary').toString('base64');
 }
diff --git a/src/renderer/components/BaseTextEditor.vue b/src/renderer/components/BaseTextEditor.vue
index d11ac390..5764536a 100644
--- a/src/renderer/components/BaseTextEditor.vue
+++ b/src/renderer/components/BaseTextEditor.vue
@@ -99,7 +99,7 @@ onMounted(() => {
       enableLiveAutocompletion: false
    });
 
-   editor.session.on('changeFold', () => {
+   (editor.session as unknown as ace.Ace.Editor).on('change', () => {
       const content = editor.getValue();
       emit('update:modelValue', content);
    });
diff --git a/src/renderer/components/FakerSelect.vue b/src/renderer/components/FakerSelect.vue
index b5714ec8..e4b709ac 100644
--- a/src/renderer/components/FakerSelect.vue
+++ b/src/renderer/components/FakerSelect.vue
@@ -104,151 +104,148 @@
    </fieldset>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, PropType, Ref, ref, watch } from 'vue';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
-import BaseUploadInput from '@/components/BaseUploadInput';
-import ForeignKeySelect from '@/components/ForeignKeySelect';
+import BaseUploadInput from '@/components/BaseUploadInput.vue';
+import ForeignKeySelect from '@/components/ForeignKeySelect.vue';
 import FakerMethods from 'common/FakerMethods';
 
-export default {
-   name: 'FakerSelect',
-   components: {
-      ForeignKeySelect,
-      BaseUploadInput
-   },
-   props: {
-      type: String,
-      field: Object,
-      isChecked: Boolean,
-      foreignKeys: Array,
-      keyUsage: Array,
-      fieldLength: Number,
-      fieldObj: Object
-   },
-   emits: ['update:modelValue'],
-   data () {
-      return {
-         localType: null,
-         selectedGroup: 'manual',
-         selectedMethod: '',
-         selectedValue: '',
-         debounceTimeout: null,
-         methodParams: {},
-         enumArray: null
-      };
-   },
-   computed: {
-      fakerGroups () {
-         if ([...TEXT, ...LONG_TEXT].includes(this.type))
-            this.localType = 'string';
-         else if (NUMBER.includes(this.type))
-            this.localType = 'number';
-         else if (FLOAT.includes(this.type))
-            this.localType = 'float';
-         else if ([...DATE, ...DATETIME].includes(this.type))
-            this.localType = 'datetime';
-         else if (TIME.includes(this.type))
-            this.localType = 'time';
-         else
-            this.localType = 'none';
+const props = defineProps({
+   type: String,
+   field: Object,
+   isChecked: Boolean,
+   foreignKeys: Array,
+   keyUsage: Array as PropType<{field: string}[]>,
+   fieldLength: Number,
+   fieldObj: Object
+});
+const emit = defineEmits(['update:modelValue']);
 
-         return FakerMethods.getGroupsByType(this.localType);
-      },
-      fakerMethods () {
-         return FakerMethods.getMethods({ type: this.localType, group: this.selectedGroup });
-      },
-      methodData () {
-         return this.fakerMethods.find(method => method.name === this.selectedMethod);
-      }
-   },
-   watch: {
-      fieldObj () {
-         if (this.fieldObj) {
-            if (Array.isArray(this.fieldObj.value)) {
-               this.enumArray = this.fieldObj.value;
-               this.selectedValue = this.fieldObj.value[0];
-            }
-            else
-               this.selectedValue = this.fieldObj.value;
-         }
-      },
-      selectedGroup () {
-         if (this.fakerMethods.length)
-            this.selectedMethod = this.fakerMethods[0].name;
-         else
-            this.selectedMethod = '';
-      },
-      selectedMethod () {
-         this.onChange();
-      },
-      selectedValue () {
-         clearTimeout(this.debounceTimeout);
-         this.debounceTimeout = null;
-         this.debounceTimeout = setTimeout(() => {
-            this.onChange();
-         }, 200);
-      }
-   },
-   methods: {
-      inputProps () {
-         if ([...TEXT, ...LONG_TEXT].includes(this.type))
-            return { type: 'text', mask: false };
+const localType: Ref<string> = ref(null);
+const selectedGroup: Ref<string> = ref('manual');
+const selectedMethod: Ref<string> = ref('');
+const selectedValue: Ref<string> = ref('');
+const debounceTimeout: Ref<NodeJS.Timeout> = ref(null);
+const methodParams: Ref<{[key: string]: string}> = ref({});
+const enumArray: Ref<string[]> = ref(null);
 
-         if ([...NUMBER, ...FLOAT].includes(this.type))
-            return { type: 'number', mask: false };
+const fakerGroups = computed(() => {
+   if ([...TEXT, ...LONG_TEXT].includes(props.type))
+      localType.value = 'string';
+   else if (NUMBER.includes(props.type))
+      localType.value = 'number';
+   else if (FLOAT.includes(props.type))
+      localType.value = 'float';
+   else if ([...DATE, ...DATETIME].includes(props.type))
+      localType.value = 'datetime';
+   else if (TIME.includes(props.type))
+      localType.value = 'time';
+   else
+      localType.value = 'none';
 
-         if (TIME.includes(this.type)) {
-            let timeMask = '##:##:##';
-            const precision = this.fieldLength;
+   return FakerMethods.getGroupsByType(localType.value);
+});
 
-            for (let i = 0; i < precision; i++)
-               timeMask += i === 0 ? '.#' : '#';
+const fakerMethods = computed(() => {
+   return FakerMethods.getMethods({ type: localType.value, group: selectedGroup.value });
+});
 
-            return { type: 'text', mask: timeMask };
-         }
+const methodData = computed(() => {
+   return fakerMethods.value.find(method => method.name === selectedMethod.value);
+});
 
-         if (DATE.includes(this.type))
-            return { type: 'text', mask: '####-##-##' };
+const inputProps = () => {
+   if ([...TEXT, ...LONG_TEXT].includes(props.type))
+      return { type: 'text', mask: false };
 
-         if (DATETIME.includes(this.type)) {
-            let datetimeMask = '####-##-## ##:##:##';
-            const precision = this.fieldLength;
+   if ([...NUMBER, ...FLOAT].includes(props.type))
+      return { type: 'number', mask: false };
 
-            for (let i = 0; i < precision; i++)
-               datetimeMask += i === 0 ? '.#' : '#';
+   if (TIME.includes(props.type)) {
+      let timeMask = '##:##:##';
+      const precision = props.fieldLength;
 
-            return { type: 'text', mask: datetimeMask };
-         }
+      for (let i = 0; i < precision; i++)
+         timeMask += i === 0 ? '.#' : '#';
 
-         if (BLOB.includes(this.type))
-            return { type: 'file', mask: false };
-
-         if (BIT.includes(this.type))
-            return { type: 'text', mask: false };
-
-         return { type: 'text', mask: false };
-      },
-      getKeyUsage (keyName) {
-         return this.keyUsage.find(key => key.field === keyName);
-      },
-      filesChange (event) {
-         const { files } = event.target;
-         if (!files.length) return;
-
-         this.selectedValue = files[0].path;
-      },
-      clearValue () {
-         this.selectedValue = '';
-      },
-      onChange () {
-         this.$emit('update:modelValue', {
-            group: this.selectedGroup,
-            method: this.selectedMethod,
-            params: this.methodParams,
-            value: this.selectedValue,
-            length: this.fieldLength
-         });
-      }
+      return { type: 'text', mask: timeMask };
    }
+
+   if (DATE.includes(props.type))
+      return { type: 'text', mask: '####-##-##' };
+
+   if (DATETIME.includes(props.type)) {
+      let datetimeMask = '####-##-## ##:##:##';
+      const precision = props.fieldLength;
+
+      for (let i = 0; i < precision; i++)
+         datetimeMask += i === 0 ? '.#' : '#';
+
+      return { type: 'text', mask: datetimeMask };
+   }
+
+   if (BLOB.includes(props.type))
+      return { type: 'file', mask: false };
+
+   if (BIT.includes(props.type))
+      return { type: 'text', mask: false };
+
+   return { type: 'text', mask: false };
 };
+
+const getKeyUsage = (keyName: string) => {
+   return props.keyUsage.find(key => key.field === keyName);
+};
+
+const filesChange = ({ target } : {target: HTMLInputElement }) => {
+   const { files } = target;
+   if (!files.length) return;
+
+   selectedValue.value = files[0].path;
+};
+
+const clearValue = () => {
+   selectedValue.value = '';
+};
+
+const onChange = () => {
+   emit('update:modelValue', {
+      group: selectedGroup.value,
+      method: selectedMethod.value,
+      params: methodParams.value,
+      value: selectedValue.value,
+      length: props.fieldLength
+   });
+};
+
+watch(() => props.fieldObj, () => {
+   if (props.fieldObj) {
+      if (Array.isArray(props.fieldObj.value)) {
+         enumArray.value = props.fieldObj.value;
+         selectedValue.value = props.fieldObj.value[0];
+      }
+      else
+         selectedValue.value = props.fieldObj.value;
+   }
+});
+
+watch(selectedGroup, () => {
+   if (fakerMethods.value.length)
+      selectedMethod.value = fakerMethods.value[0].name;
+   else
+      selectedMethod.value = '';
+});
+
+watch(selectedMethod, () => {
+   onChange();
+});
+
+watch(selectedValue, () => {
+   clearTimeout(debounceTimeout.value);
+   debounceTimeout.value = null;
+   debounceTimeout.value = setTimeout(() => {
+      onChange();
+   }, 200);
+});
 </script>
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index 4552c6e4..e3aac3cc 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -271,7 +271,7 @@ export default {
             else if ([...TIME, ...DATE].includes(field.type))
                fieldDefault = field.default;
             else if (BIT.includes(field.type))
-               fieldDefault = field.default.replaceAll('\'', '').replaceAll('b', '');
+               fieldDefault = field.default?.replaceAll('\'', '').replaceAll('b', '');
             else if (DATETIME.includes(field.type)) {
                if (field.default && ['current_timestamp', 'now()'].some(term => field.default.toLowerCase().includes(term))) {
                   let datePrecision = '';
diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue
index 4a904038..0401d723 100644
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@@ -26,46 +26,39 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { shell } from 'electron';
+import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { storeToRefs } from 'pinia';
-const { shell } = require('electron');
+import { computed, ComputedRef } from 'vue';
 
-export default {
-   name: 'TheFooter',
-   setup () {
-      const applicationStore = useApplicationStore();
-      const workspacesStore = useWorkspacesStore();
+interface DatabaseInfos {// TODO: temp
+   name: string;
+   number: string;
+   arch: string;
+   os: string;
+}
 
-      const { getSelected: workspace } = storeToRefs(workspacesStore);
+const applicationStore = useApplicationStore();
+const workspacesStore = useWorkspacesStore();
 
-      const { appVersion, showSettingModal } = applicationStore;
-      const { getWorkspace } = workspacesStore;
+const { getSelected: workspace } = storeToRefs(workspacesStore);
 
-      return {
-         appVersion,
-         showSettingModal,
-         workspace,
-         getWorkspace
-      };
-   },
-   computed: {
-      version () {
-         return this.getWorkspace(this.workspace) ? this.getWorkspace(this.workspace).version : null;
-      },
-      versionString () {
-         if (this.version)
-            return `${this.version.name} ${this.version.number} (${this.version.arch} ${this.version.os})`;
-         return '';
-      }
-   },
-   methods: {
-      openOutside (link) {
-         shell.openExternal(link);
-      }
-   }
-};
+const { showSettingModal } = applicationStore;
+const { getWorkspace } = workspacesStore;
+
+const version: ComputedRef<DatabaseInfos> = computed(() => {
+   return getWorkspace(workspace.value) ? getWorkspace(workspace.value).version : null;
+});
+
+const versionString = computed(() => {
+   if (version.value)
+      return `${version.value.name} ${version.value.number} (${version.value.arch} ${version.value.os})`;
+   return '';
+});
+
+const openOutside = (link: string) => shell.openExternal(link);
 </script>
 
 <style lang="scss">
diff --git a/src/renderer/components/TheNotificationsBoard.vue b/src/renderer/components/TheNotificationsBoard.vue
index 42dd133d..3e0689ea 100644
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@@ -16,71 +16,51 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, Ref, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useSettingsStore } from '@/stores/settings';
-import BaseNotification from '@/components/BaseNotification';
-import { storeToRefs } from 'pinia';
+import BaseNotification from '@/components/BaseNotification.vue';
 
-export default {
-   name: 'TheNotificationsBoard',
-   components: {
-      BaseNotification
-   },
-   setup () {
-      const notificationsStore = useNotificationsStore();
-      const settingsStore = useSettingsStore();
+const notificationsStore = useNotificationsStore();
+const settingsStore = useSettingsStore();
 
-      const { removeNotification } = notificationsStore;
+const { removeNotification } = notificationsStore;
 
-      const { notifications } = storeToRefs(notificationsStore);
-      const { notificationsTimeout } = storeToRefs(settingsStore);
+const { notifications } = storeToRefs(notificationsStore);
+const { notificationsTimeout } = storeToRefs(settingsStore) as {notificationsTimeout: Ref<number>};// TODO: temp
 
-      return {
-         removeNotification,
-         notifications,
-         notificationsTimeout
-      };
-   },
-   data () {
-      return {
-         timeouts: {}
-      };
-   },
-   computed: {
-      latestNotifications () {
-         return this.notifications.slice(0, 10);
-      }
-   },
-   watch: {
-      'notifications.length': function (val) {
-         if (val > 0) {
-            const nUid = this.notifications[0].uid;
-            this.timeouts[nUid] = setTimeout(() => {
-               this.removeNotification(nUid);
-               delete this.timeouts[nUid];
-            }, this.notificationsTimeout * 1000);
-         }
-      }
-   },
-   methods: {
-      clearTimeouts () {
-         for (const uid in this.timeouts) {
-            clearTimeout(this.timeouts[uid]);
-            delete this.timeouts[uid];
-         }
-      },
-      rearmTimeouts () {
-         const delay = 50;
-         let i = this.notifications.length * delay;
-         for (const notification of this.notifications) {
-            this.timeouts[notification.uid] = setTimeout(() => {
-               this.removeNotification(notification.uid);
-               delete this.timeouts[notification.uid];
-            }, (this.notificationsTimeout * 1000) + i);
-            i = i > delay ? i - delay : 0;
-         }
-      }
+const timeouts: Ref<{[key: string]: NodeJS.Timeout}> = ref({});
+
+const latestNotifications = computed(() => notifications.value.slice(0, 10));
+
+watch(() => notifications.value.length, (val) => {
+   if (val > 0) {
+      const nUid: string = notifications.value[0].uid;
+      timeouts.value[nUid] = setTimeout(() => {
+         removeNotification(nUid);
+         delete timeouts.value[nUid];
+      }, notificationsTimeout.value * 1000);
+   }
+});
+
+const clearTimeouts = () => {
+   for (const uid in timeouts.value) {
+      clearTimeout(timeouts.value[uid]);
+      delete timeouts.value[uid];
+   }
+};
+
+const rearmTimeouts = () => {
+   const delay = 50;
+   let i = notifications.value.length * delay;
+   for (const notification of notifications.value) {
+      timeouts.value[notification.uid] = setTimeout(() => {
+         removeNotification(notification.uid);
+         delete timeouts.value[notification.uid];
+      }, (notificationsTimeout.value * 1000) + i);
+      i = i > delay ? i - delay : 0;
    }
 };
 </script>
diff --git a/src/renderer/components/TheScratchpad.vue b/src/renderer/components/TheScratchpad.vue
index 09df94d0..1e03cd4e 100644
--- a/src/renderer/components/TheScratchpad.vue
+++ b/src/renderer/components/TheScratchpad.vue
@@ -28,55 +28,30 @@
    </ConfirmModal>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, Ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
-import ConfirmModal from '@/components/BaseConfirmModal';
-import TextEditor from '@/components/BaseTextEditor';
 import { useScratchpadStore } from '@/stores/scratchpad';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import TextEditor from '@/components/BaseTextEditor.vue';
 
-export default {
-   name: 'TheScratchpad',
-   components: {
-      ConfirmModal,
-      TextEditor
-   },
-   emits: ['hide'],
-   setup () {
-      const applicationStore = useApplicationStore();
-      const scratchpadStore = useScratchpadStore();
+const applicationStore = useApplicationStore();
+const scratchpadStore = useScratchpadStore();
 
-      const { notes } = storeToRefs(scratchpadStore);
-      const { changeNotes } = scratchpadStore;
+const { notes } = storeToRefs(scratchpadStore);
+const { changeNotes } = scratchpadStore;
+const { hideScratchpad } = applicationStore;
 
-      return {
-         notes,
-         hideScratchpad: applicationStore.hideScratchpad,
-         changeNotes
-      };
-   },
-   data () {
-      return {
-         localNotes: '',
-         debounceTimeout: null
-      };
-   },
-   watch: {
-      localNotes () {
-         clearTimeout(this.debounceTimeout);
+const localNotes: Ref<string> = ref(notes.value as string);// TODO: temp
+const debounceTimeout: Ref<NodeJS.Timeout> = ref(null);
+
+watch(localNotes, () => {
+   clearTimeout(debounceTimeout.value);
+
+   debounceTimeout.value = setTimeout(() => {
+      changeNotes(localNotes.value);
+   }, 200);
+});
 
-         this.debounceTimeout = setTimeout(() => {
-            this.changeNotes(this.localNotes);
-         }, 200);
-      }
-   },
-   created () {
-      this.localNotes = this.notes;
-   },
-   methods: {
-      hideModal () {
-         this.$emit('hide');
-      }
-   }
-};
 </script>
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index d5da4a84..e9bb82c2 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -55,7 +55,85 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useApplicationStore } from '@/stores/application';
+import { useConnectionsStore } from '@/stores/connections';
+import { useWorkspacesStore } from '@/stores/workspaces';
+import * as Draggable from 'vuedraggable';
+import SettingBarContext from '@/components/SettingBarContext.vue';
+import { ConnectionParams } from 'common/interfaces/antares';
+import { computed } from '@vue/reactivity';
+
+const applicationStore = useApplicationStore();
+const connectionsStore = useConnectionsStore();
+const workspacesStore = useWorkspacesStore();
+
+const { updateStatus } = storeToRefs(applicationStore);
+const { connections: getConnections } = storeToRefs(connectionsStore);
+const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+const { showSettingModal, showScratchpad } = applicationStore;
+const { getConnectionName, updateConnections } = connectionsStore;
+const { getWorkspace, selectWorkspace } = workspacesStore;
+
+const isContext: Ref<boolean> = ref(false);
+const isDragging: Ref<boolean> = ref(false);
+const contextEvent: Ref<Event> = ref(null);
+const contextConnection: Ref<ConnectionParams> = ref(null);
+
+const connections = computed({
+   get () {
+      return getConnections.value;
+   },
+   set (value) {
+      updateConnections(value);
+   }
+});
+
+const hasUpdates = computed(() => ['available', 'downloading', 'downloaded', 'link'].includes(updateStatus.value));
+
+const contextMenu = (event: Event, connection: ConnectionParams) => {
+   contextEvent.value = event;
+   contextConnection.value = connection;
+   isContext.value = true;
+};
+
+const tooltipPosition = (e: Event) => {
+   const el = e.target ? e.target : e;
+   const fromTop = window.pageYOffset + (el as HTMLElement).getBoundingClientRect().top - ((el as HTMLElement).offsetHeight / 4);
+   (el as HTMLElement).querySelector<HTMLElement>('.ex-tooltip-content').style.top = `${fromTop}px`;
+};
+
+const getStatusBadge = (uid: string) => {
+   if (getWorkspace(uid)) {
+      const status = getWorkspace(uid).connectionStatus;
+
+      switch (status) {
+         case 'connected':
+            return 'badge badge-connected';
+         case 'connecting':
+            return 'badge badge-connecting';
+         case 'failed':
+            return 'badge badge-failed';
+         default:
+            return '';
+      }
+   }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const dragStop = (e: any) => { // TODO: temp
+   isDragging.value = false;
+
+   setTimeout(() => {
+      tooltipPosition(e.originalEvent.target.parentNode);
+   }, 200);
+};
+</script>
+
+<!-- <script>
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
 import { useConnectionsStore } from '@/stores/connections';
@@ -157,7 +235,7 @@ export default {
       }
    }
 };
-</script>
+</script> -->
 
 <style lang="scss">
   #settingbar {
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue
index ea98f7cb..93461596 100644
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -5,7 +5,7 @@
          <img
             v-if="!isMacOS"
             class="titlebar-logo"
-            src="@/images/logo.svg"
+            :src="appIcon"
          >
       </div>
       <div class="titlebar-elements titlebar-title">
@@ -52,79 +52,74 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
 import { useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { storeToRefs } from 'pinia';
+import { onUnmounted, ref } from 'vue';
+import { computed } from '@vue/reactivity';
+import { useI18n } from 'vue-i18n';
 
-export default {
-   name: 'TheTitleBar',
-   setup () {
-      const { getConnectionName } = useConnectionsStore();
-      const workspacesStore = useWorkspacesStore();
+const { t } = useI18n();
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const { getConnectionName } = useConnectionsStore();
+const workspacesStore = useWorkspacesStore();
 
-      const { getWorkspace } = workspacesStore;
+const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
-      return {
-         getConnectionName,
-         selectedWorkspace,
-         getWorkspace
-      };
-   },
-   data () {
-      return {
-         w: getCurrentWindow(),
-         isMaximized: getCurrentWindow().isMaximized(),
-         isDevelopment: process.env.NODE_ENV === 'development',
-         isMacOS: process.platform === 'darwin'
-      };
-   },
-   computed: {
-      windowTitle () {
-         if (!this.selectedWorkspace) return '';
-         if (this.selectedWorkspace === 'NEW') return this.$t('message.createNewConnection');
+const { getWorkspace } = workspacesStore;
 
-         const connectionName = this.getConnectionName(this.selectedWorkspace);
-         const workspace = this.getWorkspace(this.selectedWorkspace);
-         const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client];
+const appIcon = require('@/images/logo.svg');
+const w = ref(getCurrentWindow());
+const isMaximized = ref(getCurrentWindow().isMaximized());
+const isDevelopment = ref(process.env.NODE_ENV === 'development');
+const isMacOS = ref(process.platform === 'darwin');
 
-         return [connectionName, ...breadcrumbs].join(' • ');
-      }
-   },
-   created () {
-      window.addEventListener('resize', this.onResize);
-   },
-   unmounted () {
-      window.removeEventListener('resize', this.onResize);
-   },
-   methods: {
-      closeApp () {
-         ipcRenderer.send('close-app');
-      },
-      minimizeApp () {
-         this.w.minimize();
-      },
-      toggleFullScreen () {
-         if (this.isMaximized)
-            this.w.unmaximize();
-         else
-            this.w.maximize();
-      },
-      openDevTools () {
-         this.w.openDevTools();
-      },
-      reload () {
-         this.w.reload();
-      },
-      onResize () {
-         this.isMaximized = this.w.isMaximized();
-      }
-   }
+const windowTitle = computed(() => {
+   if (!selectedWorkspace.value) return '';
+   if (selectedWorkspace.value === 'NEW') return t('message.createNewConnection');
+
+   const connectionName = getConnectionName(selectedWorkspace.value);
+   const workspace = getWorkspace(selectedWorkspace.value);
+   const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client];
+
+   return [connectionName, ...breadcrumbs].join(' • ');
+});
+
+const closeApp = () => {
+   ipcRenderer.send('close-app');
 };
+
+const minimizeApp = () => {
+   w.value.minimize();
+};
+
+const toggleFullScreen = () => {
+   if (isMaximized.value)
+      w.value.unmaximize();
+   else
+      w.value.maximize();
+};
+
+const openDevTools = () => {
+   w.value.webContents.openDevTools();
+};
+
+const reload = () => {
+   w.value.reload();
+};
+
+const onResize = () => {
+   isMaximized.value = w.value.isMaximized();
+};
+
+window.addEventListener('resize', onResize);
+
+onUnmounted(() => {
+   window.removeEventListener('resize', onResize);
+});
 </script>
 
 <style lang="scss">
diff --git a/src/renderer/libs/arrayToFile.js b/src/renderer/libs/arrayToFile.ts
similarity index 89%
rename from src/renderer/libs/arrayToFile.js
rename to src/renderer/libs/arrayToFile.ts
index 7f4cd54c..b001796f 100644
--- a/src/renderer/libs/arrayToFile.js
+++ b/src/renderer/libs/arrayToFile.ts
@@ -1,4 +1,8 @@
-const arrayToFile = args => {
+export const arrayToFile = (args: {
+   type: 'csv' | 'json';
+   content: object[];
+   filename: string;
+}) => {
    let mime;
    let content;
 
@@ -33,5 +37,3 @@ const arrayToFile = args => {
    downloadLink.click();
    downloadLink.remove();
 };
-
-export default arrayToFile;
diff --git a/src/renderer/libs/unproxify.js b/src/renderer/libs/unproxify.ts
similarity index 76%
rename from src/renderer/libs/unproxify.js
rename to src/renderer/libs/unproxify.ts
index 10be84aa..538cbcb4 100644
--- a/src/renderer/libs/unproxify.js
+++ b/src/renderer/libs/unproxify.ts
@@ -1,16 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { toRaw } from 'vue';
 
 /**
  * @param {*} val
  * @param {Boolean} json converts the value in JSON object (default true)
  */
-export function unproxify (val, json = true) {
+export function unproxify (val: any, json = true): any {
    if (json)// JSON conversion
       return JSON.parse(JSON.stringify(val));
    else if (Array.isArray(val))// If array
       return toRaw(val);
    else if (typeof val === 'object') { // If object
-      const result = {};
+      const result: any = {};
       for (const key in val)
          result[key] = toRaw(val[key]);