feat(UI): footer color based on folder color

src/renderer/components/SettingBarConnectionsFolder.vue

@@ -393,6 +393,9 @@ watch(() => dummyNested.value.length, () => {
       .folder-element-icon {
          margin: 0 auto;
          font-size: 36px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
 
          &.badge::after {
             top: 5px;

src/renderer/components/TheFooter.vue

@@ -1,5 +1,9 @@
 <template>
-   <div id="footer" class="text-light">
+   <div
+      id="footer"
+      :class="[lightColors.includes(footerColor) ? 'text-dark' : 'text-light']"
+      :style="`background-color: ${footerColor};`"
+   >
       <div class="footer-left-elements">
          <ul class="footer-elements">
             <li class="footer-element">
@@ -50,6 +54,7 @@ import { useApplicationStore } from '@/stores/application';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { computed, ComputedRef } from 'vue';
 import { useConsoleStore } from '@/stores/console';
+import { useConnectionsStore } from '@/stores/connections';
 
 const { t } = useI18n();
 
@@ -62,14 +67,19 @@ interface DatabaseInfos {// TODO: temp
 
 const applicationStore = useApplicationStore();
 const workspacesStore = useWorkspacesStore();
+const connectionsStore = useConnectionsStore();
+
+const lightColors = ['#FFCE54', '#FDA50F', '#BEBDB8', '#48CFAD'];
 
 const { getSelected: workspaceUid } = storeToRefs(workspacesStore);
 const { toggleConsole } = useConsoleStore();
 
 const { showSettingModal } = applicationStore;
 const { getWorkspace } = workspacesStore;
+const { getConnectionFolder } = connectionsStore;
 
 const workspace = computed(() => getWorkspace(workspaceUid.value));
+const footerColor = computed(() => getConnectionFolder(workspaceUid.value)?.color || '#E36929');
 const version: ComputedRef<DatabaseInfos> = computed(() => {
    return getWorkspace(workspaceUid.value) ? workspace.value.version : null;
 });

src/renderer/libs/getContrast.ts

@@ -0,0 +1,4 @@
+export const getContrast = (hexcolor: string) => {
+   if (!hexcolor) return '';
+   return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
+};

src/renderer/stores/connections.ts

@@ -71,8 +71,11 @@ export const useConnectionsStore = defineStore('connections', {
             return connectionsOrder;
          }
       },
-      getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder.find(connection => connection.uid === uid),
-      getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder)
+      getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder
+         .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))
    },
    actions: {
       addConnection (connection: ConnectionParams) {