Fix card arrow not being animated in sync

This commit fixes an UI inconsitency where the arrow did not animate in
sync with with the card's expansion panel during the expansion process.
The solution implemented involves the use of actual DOM element for the
arrow, rather than a pseude-element, allowing for unified animation with
the expansion panel.

Changes:

- Extraction of the expansion arrow into its own Vue component,
  `CardExpansionArrow`, improving maintainability and separation of
  concerns.
- Transition to using a real DOM element for the expansion arrow, moving
  away from the `&:before` pseudo-class. This leads to simpler codebase,
  better separation of concerns and closer alignment with HTML
  semantics.

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="arrow-container">
+    <div class="arrow" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$arrow-size: $font-size-absolute-normal;
+
+.arrow-container {
+  position: relative;
+  .arrow {
+    position: absolute;
+    left: calc(50% - $arrow-size * 1.5);
+    top: calc(-0.35 * $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/CardListItem.vue

@@ -29,22 +29,24 @@
       />
     </div>
     <CardExpandTransition>
-      <div
-        v-show="isExpanded"
-        class="card__expander"
-        @click.stop
-      >
-        <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 v-show="isExpanded">
+        <CardExpansionArrow />
+        <div
+          class="card__expander"
+          @click.stop
+        >
+          <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>
       </div>
     </CardExpandTransition>
@@ -62,6 +64,7 @@ import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 import CardSelectionIndicator from './CardSelectionIndicator.vue';
 import CardExpandTransition from './CardExpandTransition.vue';
+import CardExpansionArrow from './CardExpansionArrow.vue';
 
 export default defineComponent({
   components: {
@@ -70,6 +73,7 @@ export default defineComponent({
     CardSelectionIndicator,
     FlatButton,
     CardExpandTransition,
+    CardExpansionArrow,
   },
   props: {
     categoryId: {
@@ -136,12 +140,11 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 $card-inner-padding     : 30px;
-$arrow-size             : 15px;
 $expanded-margin-top    : 30px;
 $card-horizontal-gap    : $card-gap;
 
 .card {
-  &__inner {
+  .card__inner {
     padding-top: $card-inner-padding;
     padding-right: $card-inner-padding;
     padding-bottom: 0;
@@ -220,16 +223,6 @@ $card-horizontal-gap    : $card-gap;
       height: auto;
       background-color: $color-secondary;
       color: $color-on-secondary;
-      &:after { // arrow
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: calc(-1 * #{$expanded-margin-top});
-        left: calc(50% - #{$arrow-size});
-        border-left: #{$arrow-size} solid transparent;
-        border-right: #{$arrow-size} solid transparent;
-        border-bottom: #{$arrow-size} solid $color-primary-darker;
-      }
     }
 
     .card__expander {