Add collapsable support to panel elements (#1601)

Closes #1312

Updates the `Panel` component to support collapsing 

## Example



https://user-images.githubusercontent.com/64056131/222880570-6611fdd7-4577-4ed5-9798-fce829a4a752.mp4

---------

Co-authored-by: Anbraten <anton@ju60.de>

web/src/components/layout/Panel.vue

@@ -1,23 +1,54 @@
 <template>
   <div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
-    <div v-if="title" class="font-bold text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2">{{ title }}</div>
+    <component
-    <div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
+      :is="collapsable ? 'button' : 'div'"
-      <slot />
+      v-if="title"
+      type="button"
+      class="flex w-full font-bold gap-2 text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2"
+      @click="collapsed && (_collapsed = !_collapsed)"
+    >
+      <Icon
+        v-if="collapsable"
+        name="chevron-right"
+        class="transition-transform duration-150 min-w-6 h-6"
+        :class="{ 'transform rotate-90': !collapsed }"
+      />
+      {{ title }}
+    </component>
+    <div
+      :class="{
+        'max-h-screen': !collapsed,
+        'max-h-0': collapsed,
+      }"
+      class="transition-height duration-150 overflow-hidden"
+    >
+      <div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed, ref } from 'vue';
 
-export default defineComponent({
+import Icon from '~/components/atomic/Icon.vue';
-  name: 'Panel',
 
-  props: {
+const props = withDefaults(
-    title: {
+  defineProps<{
-      type: String,
+    title?: string;
-      default: '',
+    collapsable?: boolean;
-    },
+  }>(),
+  {
+    title: '',
   },
-});
+);
+
+/**
+ * _collapsed is used to store the internal state of the panel, but is
+ * ignored if the panel is not collapsable.
+ */
+const _collapsed = ref(false);
+
+const collapsed = computed(() => props.collapsable && _collapsed.value);
 </script>

web/src/views/repo/pipeline/PipelineConfig.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-y-6">
-    <Panel v-for="pipelineConfig in pipelineConfigs || []" :key="pipelineConfig.hash" :title="pipelineConfig.name">
+    <Panel
+      v-for="pipelineConfig in pipelineConfigs || []"
+      :key="pipelineConfig.hash"
+      collapsable
+      :title="pipelineConfig.name"
+    >
       <SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />
     </Panel>
   </div>