From 171b6f924acc7d7696f4f850a704af0baf616b87 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 11 Jul 2024 18:06:41 +0200
Subject: [PATCH] feat: custom SVG icons for connections, closes #663

---
 src/main/ipc-handlers/application.ts          |  4 +-
 src/renderer/components/BaseIcon.vue          | 27 +++++-
 .../components/ModalAllConnections.vue        |  4 +
 .../components/ModalConnectionAppearance.vue  | 92 ++++++++++++++++---
 .../components/ModalSettingsDataExport.vue    |  5 +-
 .../components/ModalSettingsDataImport.vue    |  3 +-
 .../components/SettingBarConnections.vue      |  1 +
 .../SettingBarConnectionsFolder.vue           |  1 +
 src/renderer/components/WorkspaceTabQuery.vue |  4 +-
 src/renderer/i18n/en-US.ts                    |  4 +-
 src/renderer/ipc-api/Application.ts           |  4 +-
 src/renderer/stores/connections.ts            | 42 ++++++++-
 12 files changed, 165 insertions(+), 26 deletions(-)

diff --git a/src/main/ipc-handlers/application.ts b/src/main/ipc-handlers/application.ts
index 1cba4057..ad0ec84e 100644
--- a/src/main/ipc-handlers/application.ts
+++ b/src/main/ipc-handlers/application.ts
@@ -87,10 +87,10 @@ export default () => {
       shortCutRegister.unregister();
    });
 
-   ipcMain.handle('read-file', (event, filePath) => {
+   ipcMain.handle('read-file', (event, { filePath, encoding }) => {
       if (!validateSender(event.senderFrame)) return { status: 'error', response: 'Unauthorized process' };
       try {
-         const content = fs.readFileSync(filePath, 'utf-8');
+         const content = fs.readFileSync(filePath, encoding);
          return content;
       }
       catch (error) {
diff --git a/src/renderer/components/BaseIcon.vue b/src/renderer/components/BaseIcon.vue
index 2ab80780..53c83d4b 100644
--- a/src/renderer/components/BaseIcon.vue
+++ b/src/renderer/components/BaseIcon.vue
@@ -1,11 +1,19 @@
 <template>
    <SvgIcon
+      v-if="type === 'mdi'"
       :type="type"
       :path="iconPath"
       :size="size"
       :rotate="rotate"
       :class="iconFlip"
    />
+   <svg
+      v-else
+      :width="size"
+      :height="size"
+      :viewBox="`0 0 ${size} ${size}`"
+      v-html="iconPath"
+   />
 </template>
 
 <script setup lang="ts">
@@ -13,6 +21,10 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import * as Icons from '@mdi/js';
 import { computed, PropType } from 'vue';
 
+import { useConnectionsStore } from '@/stores/connections';
+
+const { getIconByUid } = useConnectionsStore();
+
 const props = defineProps({
    iconName: {
       type: String,
@@ -23,7 +35,7 @@ const props = defineProps({
       default: 48
    },
    type: {
-      type: String,
+      type: String as PropType<'mdi' | 'custom'>,
       default: () => 'mdi'
    },
    flip: {
@@ -37,7 +49,18 @@ const props = defineProps({
 });
 
 const iconPath = computed(() => {
-   return (Icons as {[k:string]: string})[props.iconName];
+   if (props.type === 'mdi')
+      return (Icons as {[k:string]: string})[props.iconName];
+   else if (props.type === 'custom') {
+      const base64 = getIconByUid(props.iconName)?.base64;
+      const svgString = Buffer
+         .from(base64, 'base64')
+         .toString('utf-8')
+         .replaceAll(/width="[^"]*"|height="[^"]*"/g, '');
+
+      return svgString;
+   }
+   return null;
 });
 
 const iconFlip = computed(() => {
diff --git a/src/renderer/components/ModalAllConnections.vue b/src/renderer/components/ModalAllConnections.vue
index d864a580..cf430464 100644
--- a/src/renderer/components/ModalAllConnections.vue
+++ b/src/renderer/components/ModalAllConnections.vue
@@ -64,6 +64,7 @@
                                  >
                                     <BaseIcon
                                        :icon-name="camelize(connection.icon)"
+                                       :type="connection.hasCustomIcon ? 'custom' : 'mdi'"
                                        :size="42"
                                     />
                                  </div>
@@ -278,12 +279,15 @@ const remappedConnections = computed(() => {
       .map(c => {
          const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
          const connIcon = connectionsOrder.value.find((co) => co.uid === c.uid).icon;
+         const connHasCustomIcon = connectionsOrder.value.find((co) => co.uid === c.uid).hasCustomIcon;
          const folder = folders.value.find(f => f.connections.includes(c.uid));
+
          return {
             ...c,
             icon: connIcon,
             color: folder?.color,
             folderName: folder?.name,
+            hasCustomIcon: connHasCustomIcon,
             time: connTime
          };
       })
diff --git a/src/renderer/components/ModalConnectionAppearance.vue b/src/renderer/components/ModalConnectionAppearance.vue
index e2860844..15a432c3 100644
--- a/src/renderer/components/ModalConnectionAppearance.vue
+++ b/src/renderer/components/ModalConnectionAppearance.vue
@@ -49,18 +49,46 @@
                                  class="icon-box"
                                  :title="icon.name"
                                  :class="[{'selected': localConnection.icon === icon.code}]"
-                                 @click="localConnection.icon = icon.code"
+                                 @click="setIcon(icon.code)"
                               />
                               <div
                                  v-else
                                  class="icon-box"
                                  :title="icon.name"
-                                 :class="[`dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
-                                 @click="localConnection.icon = icon.code"
+                                 :class="[`dbi dbi-${connection.client}`, {'selected': localConnection.icon === null}]"
+                                 @click="setIcon(null)"
                               />
                            </div>
                         </div>
                      </div>
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ t('application.customIcon') }}</label>
+                        </div>
+                        <div class="col-9 icons-wrapper">
+                           <div
+                              v-for="icon in customIcons"
+                              :key="icon.uid"
+                           >
+                              <BaseIcon
+                                 v-if="icon.uid"
+                                 :icon-name="icon.uid"
+                                 type="custom"
+                                 :size="36"
+                                 class="icon-box"
+                                 :class="[{'selected': localConnection.icon === icon.uid}]"
+                                 @click="setIcon(icon.uid, 'custom')"
+                                 @contextmenu.prevent="contextMenu($event, icon.uid)"
+                              />
+                           </div>
+                           <BaseIcon
+                              :icon-name="'mdiPlus'"
+                              :size="36"
+                              class="icon-box"
+                              @click="openFile"
+                           />
+                        </div>
+                     </div>
                   </form>
                </div>
             </div>
@@ -74,20 +102,45 @@
             </div>
          </div>
       </div>
+      <BaseContextMenu
+         v-if="isContext"
+         :context-event="contextEvent"
+         @close-context="isContext = false"
+      >
+         <div class="context-element" @click="removeIconHandler">
+            <span class="d-flex">
+               <BaseIcon
+                  class="text-light mt-1 mr-1"
+                  icon-name="mdiDelete"
+                  :size="18"
+               /> {{ t('general.delete') }}</span>
+         </div>
+      </BaseContextMenu>
    </Teleport>
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseContextMenu from '@/components/BaseContextMenu.vue';
 import BaseIcon from '@/components/BaseIcon.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
+import Application from '@/ipc-api/Application';
+import { camelize } from '@/libs/camelize';
 import { unproxify } from '@/libs/unproxify';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
 
 const connectionsStore = useConnectionsStore();
 
+const { addIcon, removeIcon, updateConnectionOrder, getConnectionName } = connectionsStore;
+const { customIcons } = storeToRefs(connectionsStore);
+
+const isContext = ref(false);
+const contextContent: Ref<string> = ref(null);
+const contextEvent: Ref<MouseEvent> = ref(null);
+
 const { t } = useI18n();
 
 const props = defineProps({
@@ -99,8 +152,6 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
-const { updateConnectionOrder, getConnectionName } = connectionsStore;
-
 const icons = [
    { name: 'default', code: null },
 
@@ -160,14 +211,33 @@ const editFolderAppearance = () => {
    closeModal();
 };
 
-const camelize = (text: string) => {
-   const textArr = text.split('-');
-   for (let i = 0; i < textArr.length; i++) {
-      if (i === 0) continue;
-      textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
+const setIcon = (code: string, type?: 'mdi' | 'custom') => {
+   localConnection.value.icon = code;
+   localConnection.value.hasCustomIcon = type === 'custom';
+};
+
+const removeIconHandler = () => {
+   if (localConnection.value.icon === contextContent.value) {
+      setIcon(null);
+      updateConnectionOrder(localConnection.value);
    }
+   removeIcon(contextContent.value);
+   isContext.value = false;
+};
+
+const openFile = async () => {
+   const result = await Application.showOpenDialog({ properties: ['openFile'], filters: [{ name: '"SVG"', extensions: ['svg'] }] });
+   if (result && !result.canceled) {
+      const file = result.filePaths[0];
+      const content = await Application.readFile({ filePath: file, encoding: 'base64url' });
+      addIcon(content);
+   }
+};
 
-   return textArr.join('');
+const contextMenu = (event: MouseEvent, iconUid: string) => {
+   contextEvent.value = event;
+   contextContent.value = iconUid;
+   isContext.value = true;
 };
 
 const closeModal = () => emit('close');
diff --git a/src/renderer/components/ModalSettingsDataExport.vue b/src/renderer/components/ModalSettingsDataExport.vue
index e6e22f04..b06a1195 100644
--- a/src/renderer/components/ModalSettingsDataExport.vue
+++ b/src/renderer/components/ModalSettingsDataExport.vue
@@ -169,7 +169,7 @@ const emit = defineEmits(['close']);
 const { trapRef } = useFocusTrap();
 
 const { getConnectionName } = useConnectionsStore();
-const { connectionsOrder, connections } = storeToRefs(useConnectionsStore());
+const { connectionsOrder, connections, customIcons } = storeToRefs(useConnectionsStore());
 const localConnections = unproxify<ConnectionParams[]>(connections.value);
 const localConnectionsOrder = unproxify<SidebarElement[]>(connectionsOrder.value);
 
@@ -246,7 +246,8 @@ const exportData = () => {
 
       const exportObj = encrypt(JSON.stringify({
          connections: filteredConnections,
-         connectionsOrder: filteredOrders
+         connectionsOrder: filteredOrders,
+         customIcons
       }), options.value.passkey);
 
       // console.log(exportObj, JSON.parse(decrypt(exportObj, options.value.passkey)));
diff --git a/src/renderer/components/ModalSettingsDataImport.vue b/src/renderer/components/ModalSettingsDataImport.vue
index b7148fb6..eb75735a 100644
--- a/src/renderer/components/ModalSettingsDataImport.vue
+++ b/src/renderer/components/ModalSettingsDataImport.vue
@@ -103,7 +103,7 @@ import { useI18n } from 'vue-i18n';
 import BaseIcon from '@/components/BaseIcon.vue';
 import BaseUploadInput from '@/components/BaseUploadInput.vue';
 import { unproxify } from '@/libs/unproxify';
-import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { CustomIcon, SidebarElement, useConnectionsStore } from '@/stores/connections';
 import { useNotificationsStore } from '@/stores/notifications';
 
 const { t } = useI18n();
@@ -156,6 +156,7 @@ const importData = () => {
             const importObj: {
                connections: ConnectionParams[];
                connectionsOrder: SidebarElement[];
+               customIcons: CustomIcon[];
             } = JSON.parse(decrypt(hash, options.value.passkey));
 
             if (options.value.ignoreDuplicates) {
diff --git a/src/renderer/components/SettingBarConnections.vue b/src/renderer/components/SettingBarConnections.vue
index 1bdb22be..276e4585 100644
--- a/src/renderer/components/SettingBarConnections.vue
+++ b/src/renderer/components/SettingBarConnections.vue
@@ -56,6 +56,7 @@
                      >
                         <BaseIcon
                            :icon-name="camelize(element.icon)"
+                           :type="element.hasCustomIcon ? 'custom' : 'mdi'"
                            :size="36"
                         />
                      </div>
diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue
index d2b93bc5..15c76693 100644
--- a/src/renderer/components/SettingBarConnectionsFolder.vue
+++ b/src/renderer/components/SettingBarConnectionsFolder.vue
@@ -70,6 +70,7 @@
                >
                   <BaseIcon
                      :icon-name="camelize(getConnectionOrderByUid(element).icon)"
+                     :type="getConnectionOrderByUid(element).hasCustomIcon ? 'custom' : 'mdi'"
                      :size="36"
                   />
                </div>
diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue
index a95eeca0..9012de8c 100644
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@@ -715,7 +715,7 @@ const openFile = async () => {
    const result = await Application.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'SQL', extensions: ['sql', 'txt'] }] });
    if (result && !result.canceled) {
       const file = result.filePaths[0];
-      const content = await Application.readFile(file);
+      const content = await Application.readFile({ filePath: file, encoding: 'utf-8' });
       const fileName = file.split('/').pop().split('\\').pop();
       if (props.tab.filePath && props.tab.filePath !== file) {
          newTab({
@@ -755,7 +755,7 @@ const saveFile = async () => {
 };
 
 const loadFileContent = async (file: string) => {
-   const content = await Application.readFile(file);
+   const content = await Application.readFile({ filePath: file, encoding: 'utf-8' });
    query.value = content;
    lastSavedQuery.value = content;
 };
diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts
index 0a845b72..0b7003ef 100644
--- a/src/renderer/i18n/en-US.ts
+++ b/src/renderer/i18n/en-US.ts
@@ -312,6 +312,7 @@ export const enUS = {
       color: 'Color',
       label: 'Label',
       icon: 'Icon',
+      customIcon: 'Custom icon',
       fileName: 'File name',
       choseFile: 'Choose file',
       data: 'Data',
@@ -409,7 +410,8 @@ export const enUS = {
       openFile: 'Open file',
       openNotes: 'Open notes',
       debugConsole: 'Debug console', // <- console tab name
-      executedQueries: 'Executed queries' // <- console tab name
+      executedQueries: 'Executed queries', // <- console tab name
+      sizeLimitError: 'Maximum size of {size} exceeded'
    },
    faker: { // Faker.js methods, used in random generated content
       address: 'Address',
diff --git a/src/renderer/ipc-api/Application.ts b/src/renderer/ipc-api/Application.ts
index 6df8afce..ab980cd3 100644
--- a/src/renderer/ipc-api/Application.ts
+++ b/src/renderer/ipc-api/Application.ts
@@ -32,8 +32,8 @@ export default class {
       return ipcRenderer.invoke('unregister-shortcuts');
    }
 
-   static readFile (path: string): Promise<string> {
-      return ipcRenderer.invoke('read-file', path);
+   static readFile (params: {filePath: string; encoding: string}): Promise<string> {
+      return ipcRenderer.invoke('read-file', params);
    }
 
    static writeFile (path: string, content: unknown) {
diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts
index b3b16f92..5141733d 100644
--- a/src/renderer/stores/connections.ts
+++ b/src/renderer/stores/connections.ts
@@ -5,7 +5,11 @@ import { ipcRenderer } from 'electron';
 import * as Store from 'electron-store';
 import { defineStore } from 'pinia';
 
+import { i18n } from '@/i18n';
 import { useWorkspacesStore } from '@/stores/workspaces';
+
+import { useNotificationsStore } from './notifications';
+
 let key = localStorage.getItem('key');
 
 export interface SidebarElement {
@@ -16,8 +20,11 @@ export interface SidebarElement {
    color?: string;
    name?: string;
    icon?: null | string;
+   hasCustomIcon?: boolean;
 }
 
+export interface CustomIcon {base64: string; uid: string}
+
 if (!key) { // If no key in local storace
    const storedKey = ipcRenderer.sendSync('get-key');// Ask for key stored on disk
 
@@ -44,7 +51,8 @@ export const useConnectionsStore = defineStore('connections', {
    state: () => ({
       connections: persistentStore.get('connections', []) as ConnectionParams[],
       lastConnections: persistentStore.get('lastConnections', []) as {uid: string; time: number}[],
-      connectionsOrder: persistentStore.get('connectionsOrder', []) as SidebarElement[]
+      connectionsOrder: persistentStore.get('connectionsOrder', []) as SidebarElement[],
+      customIcons: persistentStore.get('custom_icons', []) as CustomIcon[]
    }),
    getters: {
       getConnectionByUid: state => (uid:string) => state.connections.find(connection => connection.uid === uid),
@@ -74,7 +82,8 @@ export const useConnectionsStore = defineStore('connections', {
          .find(connection => connection.uid === uid),
       getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder),
       getConnectionFolder: state => (uid:string) => state.connectionsOrder
-         .find(folder => folder.isFolder && folder.connections.includes(uid))
+         .find(folder => folder.isFolder && folder.connections.includes(uid)),
+      getIconByUid: state => (uid:string) => state.customIcons.find(i => i.uid === uid)
    },
    actions: {
       addConnection (connection: ConnectionParams) {
@@ -198,7 +207,8 @@ export const useConnectionsStore = defineStore('connections', {
                   client: conn.client,
                   uid: conn.uid,
                   icon: conn.icon,
-                  name: conn.name
+                  name: conn.name,
+                  hasCustomIcon: conn.hasCustomIcon
                });
 
                connIndex = connections.findIndex((conn, i) => conn.uid === el.uid && i !== el.index);
@@ -247,15 +257,41 @@ export const useConnectionsStore = defineStore('connections', {
          this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
          persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
+      // Custom Icons
+      addIcon (svg: string) {
+         if (svg.length > 16384) {
+            const { t } = i18n.global;
+            useNotificationsStore().addNotification({
+               status: 'error',
+               message: t('application.sizeLimitError', { size: '16KB' })
+            });
+            return;
+         }
+
+         const icon: CustomIcon = {
+            uid: uidGen('I'),
+            base64: svg
+         };
+
+         this.customIcons.push(icon);
+         persistentStore.set('custom_icons', this.customIcons);
+      },
+      removeIcon (uid: string) {
+         this.customIcons = this.customIcons.filter((i: CustomIcon) => i.uid !== uid);
+         persistentStore.set('custom_icons', this.customIcons);
+      },
       importConnections (importObj: {
          connections: ConnectionParams[];
          connectionsOrder: SidebarElement[];
+         customIcons: CustomIcon[];
       }) {
          this.connections = [...this.connections, ...importObj.connections];
          this.connectionsOrder = [...this.connectionsOrder, ...importObj.connectionsOrder];
+         this.customIcons = [...this.customIcons, ...importObj.customIcons];
 
          persistentStore.set('connections', this.connections);
          persistentStore.set('connectionsOrder', this.connectionsOrder);
+         persistentStore.set('customIcons', this.customIcons);
       }
    }
 });