Add expansion/collapse animations for cards

Key changes:

- Add animation for card opening/collapse.

Other supporting changes:

- Remove card expansion panel to its own component for easier
  maintainability and better separation of concerns.
- Use real DOM element instead of &:before pseudo class for showing
  expansion arrow. This increases by maintainability by separating its
  code and concerns.

- TODO: When one card is expanded and others is also expanded then the
  transition sucks.

src/presentation/components/Scripts/View/Cards/CardExpansionPanel.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="card__expander">
+    <div class="card__expander__close-button">
+      <FlatButton
+        icon="xmark"
+        @click="collapse()"
+      />
+    </div>
+    <div class="card__expander__content">
+      <ScriptsTree
+        :category-id="categoryId"
+        :has-top-padding="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+} from 'vue';
+import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
+import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
+
+export default defineComponent({
+  components: {
+    ScriptsTree,
+    FlatButton,
+  },
+  props: {
+    categoryId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    onCollapse: () => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  setup(_, { emit }) {
+    function collapse() {
+      emit('onCollapse');
+    }
+
+    return {
+      collapse,
+    };
+  },
+});
+
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$expanded-margin-top    : 30px;
+
+.card__expander {
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  background-color: $color-primary-darker;
+  color: $color-on-primary;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  margin-top: $expanded-margin-top;
+
+  .card__expander__content {
+    display: flex;
+    justify-content: center;
+    word-break: break-word;
+    max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+    width: 100%; // Expands the container to fill available horizontal space, enabling alignment of child items.
+  }
+
+  .card__expander__close-button {
+    font-size: $font-size-absolute-large;
+    align-self: flex-end;
+    margin-right: 0.25em;
+    @include clickable;
+    color: $color-primary-light;
+    @include hover-or-touch {
+      color: $color-primary;
+    }
+  }
+}
+</style>

src/presentation/components/Scripts/View/Cards/CardExpansionPanelArrow.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="arrow-container">
+    <div class="arrow" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$arrow-size             : 15px;
+
+.arrow-container {
+  position: relative;
+  .arrow {
+    position: absolute;
+    left: calc(50% - $arrow-size * 1.5);
+    top: calc(1.5 * $arrow-size);
+    border: solid $color-primary-darker;
+    border-width: 0 $arrow-size $arrow-size 0;
+    padding: $arrow-size;
+    transform: rotate(-135deg);
+  }
+}
+</style>

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -19,6 +19,7 @@
             v-for="categoryId of categoryIds"
             :key="categoryId"
             class="card"
+            :total-cards-per-row="cardsPerRow"
             :class="{
               'small-screen': width <= 500,
               'medium-screen': width > 500 && width < 750,
@@ -62,6 +63,19 @@ export default defineComponent({
     );
     const activeCategoryId = ref<number | undefined>(undefined);
 
+    const cardsPerRow = computed<number>(() => {
+      if (width.value === undefined) {
+        throw new Error('Unknown width, total cards should not be calculated');
+      }
+      if (width.value <= 500) {
+        return 1;
+      }
+      if (width.value < 750) {
+        return 2;
+      }
+      return 3;
+    });
+
     function onSelected(categoryId: number, isExpanded: boolean) {
       activeCategoryId.value = isExpanded ? categoryId : undefined;
     }
@@ -108,6 +122,7 @@ export default defineComponent({
       width,
       categoryIds,
       activeCategoryId,
+      cardsPerRow,
       onSelected,
     };
   },