Workflow Invocation view improvements

This first commit tackles point A in the roadmap:

List of invocations is now not visible continously, it goes away after you settle on one invocation and `mouseleave` the panel area.

Roadmap: https://hackmd.io/@nekrut/HkinoEh8A

client/src/components/Panels/InvocationsPanel.vue

@@ -1,22 +1,35 @@
 <script setup lang="ts">
 import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 
 import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vue";
 import ActivityPanel from "./ActivityPanel.vue";
 
 const { currentUser, toggledSideBar } = storeToRefs(useUserStore());
+
+const shouldCollapse = ref(false);
+function collapseOnLeave() {
+    if (shouldCollapse.value) {
+        toggledSideBar.value = "";
+    }
+}
 </script>
 
 <template>
+    <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
     <ActivityPanel
         title="Workflow Invocations"
         go-to-all-title="Open Invocations List"
         href="/workflows/invocations"
-        @goToAll="toggledSideBar = ''">
-        <InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
+        @goToAll="shouldCollapse = true"
+        @mouseleave.native="collapseOnLeave">
+        <InvocationScrollList
+            v-if="currentUser && !currentUser?.isAnonymous"
+            in-panel
+            @invocation-clicked="shouldCollapse = true" />
         <BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
     </ActivityPanel>
 </template>

client/src/components/Workflow/Invocation/InvocationScrollList.vue

@@ -32,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
     limit: 20,
 });
 
+const emit = defineEmits(["invocation-clicked"]);
+
 library.add(faEye, faArrowDown, faInfoCircle);
 
 const stateClasses: Record<string, string> = {
@@ -97,6 +99,7 @@ function cardClicked(invocation: WorkflowInvocation) {
     let path = `/workflows/invocations/${invocation.id}`;
     if (props.inPanel) {
         path += "?from_panel=true";
+        emit("invocation-clicked");
     }
     router.push(path);
 }