chore: Nuxt 4 upgrade (#7426)

frontend/app/components/global/BaseButtonGroup.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-item-group>
+    <template v-for="btn in buttons">
+      <v-menu
+        v-if="btn.children"
+        :key="'menu-' + btn.event"
+        active-class="pa-0"
+        offset-y
+        top
+        start
+        :style="stretch ? 'width: 100%;' : ''"
+      >
+        <template #activator="{ props: hoverProps }">
+          <v-btn
+            tile
+            :large="large"
+            icon
+            variant="plain"
+            v-bind="hoverProps"
+          >
+            <v-icon>
+              {{ btn.icon }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-list density="compact">
+          <template
+            v-for="(child, idx) in btn.children"
+            :key="idx"
+          >
+            <v-list-item
+              density="compact"
+              @click="$emit(child.event)"
+            >
+              <v-list-item-title>{{ child.text }}</v-list-item-title>
+            </v-list-item>
+            <v-divider
+              v-if="child.divider"
+              :key="`divider-${idx}`"
+              class="my-1"
+            />
+          </template>
+        </v-list>
+      </v-menu>
+      <v-tooltip
+        v-else
+        :key="'btn-' + btn.event"
+        open-delay="200"
+        transition="slide-y-reverse-transition"
+        density="compact"
+        location="bottom"
+        content-class="text-caption"
+      >
+        <template #activator="{ props: tooltipProps }">
+          <v-btn
+            tile
+            icon
+            :color="btn.color"
+            :large="large"
+            :disabled="btn.disabled"
+            :style="stretch ? `width: ${maxButtonWidth};` : ''"
+            variant="plain"
+            v-bind="tooltipProps"
+            @click="$emit(btn.event)"
+          >
+            <v-icon> {{ btn.icon }} </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ btn.text }}</span>
+      </v-tooltip>
+    </template>
+  </v-item-group>
+</template>
+
+<script setup lang="ts">
+export interface ButtonOption {
+  icon?: string;
+  color?: string;
+  text: string;
+  event: string;
+  children?: ButtonOption[];
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+const props = defineProps({
+  buttons: {
+    type: Array as () => ButtonOption[],
+    required: true,
+  },
+  large: {
+    type: Boolean,
+    default: true,
+  },
+  stretch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const maxButtonWidth = computed(() => `${100 / props.buttons.length}%`);
+</script>