first commit for create issue Template UI

package.json

@@ -17,6 +17,7 @@
         "@gropius/graph-editor": "^0.0.4",
         "@material/material-color-utilities": "^0.3.0",
         "@mdi/font": "7.4.47",
+        "@mdi/js": "^7.4.47",
         "@vee-validate/yup": "^4.15.1",
         "@vueuse/core": "^13.8.0",
         "async-mutex": "^0.5.0",

src/components/EditableCard.vue

@@ -0,0 +1,82 @@
+<template>
+    <v-card :variant="props.variant ?? 'outlined'" :color="props.color" class="my-2 me-10">
+        <div v-if="!editMode" class="d-flex align-center justify-space-between">
+            <div class="d-flex align-center flex-grow-1 overflow-hidden">
+                <v-icon v-if="props.prependIcon" class="ms-2" size="small">{{ props.prependIcon }}</v-icon>
+                <div class="text-h8 font-weight-medium mx-2 text-truncate">
+                    {{ props.content }}
+                </div>
+            </div>
+            <div class="d-flex align-center flex-shrink-0 ms-2">
+                <IconButton v-if="props.editable" @click="toggleEditMode">
+                    <v-icon>mdi-pencil</v-icon>
+                </IconButton>
+                <IconButton color="error" class="me-1" @click="emit('delete')">
+                    <v-icon>mdi-delete</v-icon>
+                </IconButton>
+            </div>
+        </div>
+        <div v-else class="d-flex align-center">
+            <v-text-field v-model="localContent" class="ma-2" hide-details density="compact" />
+            <div class="d-flex justify-end">
+                <v-btn
+                    v-if="props.editable"
+                    class="me-1"
+                    @click="
+                        () => {
+                            toggleEditMode();
+                            localContent = props.content;
+                        }
+                    "
+                    >Cancel</v-btn
+                >
+                <v-btn
+                    class="mx-1"
+                    @click="
+                        () => {
+                            emit('confirm', { content: localContent });
+                            toggleEditMode();
+                        }
+                    "
+                    >Confirm</v-btn
+                >
+            </div>
+        </div>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        content: string;
+        color?: string;
+        editable?: boolean;
+        variant?: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+        prependIcon?: string;
+    }>(),
+    {
+        editable: true
+    }
+);
+
+const emit = defineEmits<{
+    (e: "delete"): void;
+    (e: "confirm", payload: { content: string }): void;
+}>();
+
+const editMode = ref(false);
+const localContent = ref<string>(props.content);
+
+watch(
+    () => props.content,
+    (newContent) => {
+        localContent.value = newContent;
+    }
+);
+
+function toggleEditMode() {
+    editMode.value = !editMode.value;
+}
+</script>

src/components/ExpandableCard.vue

@@ -0,0 +1,101 @@
+<template>
+    <v-card variant="outlined" class="my-4" :class="{ 'opacity-60': props.editable === false }">
+        <div v-if="!isExpanded" class="d-flex align-center justify-space-between">
+            <slot name="previewLeft" />
+
+            <div class="d-flex align-center flex-grow-1 overflow-hidden">
+                <div class="text-h6 font-weight-medium ma-2 text-truncate">
+                    {{ props.name }}
+                </div>
+            </div>
+
+            <slot name="previewRight" />
+
+            <div class="d-flex align-center flex-shrink-0 ms-2">
+                <IconButton :disabled="!props.editable" @click="emit('expand')">
+                    <v-icon>mdi-pencil</v-icon>
+                </IconButton>
+                <IconButton :disabled="!props.editable" color="error" class="me-1" @click="emit('delete')">
+                    <v-icon>mdi-delete</v-icon>
+                </IconButton>
+            </div>
+        </div>
+
+        <div v-else class="mt-2">
+            <v-text-field
+                class="mx-2 mb-2"
+                label="Name"
+                v-model="localName"
+                density="compact"
+                :error="!!props.nameErrorMessage"
+                :error-messages="props.nameErrorMessage"
+            />
+            <v-textarea
+                v-if="props.description !== undefined"
+                class="mx-2"
+                label="Description"
+                v-model="localDescription"
+                auto-grow
+                rows="1"
+                max-rows="2"
+                density="compact"
+            />
+
+            <slot name="extra" />
+
+            <div class="d-flex justify-end ga-1">
+                <v-btn class="mb-2" @click="emit('cancel')">Cancel</v-btn>
+                <v-btn class="me-2" @click="emit('confirm', { name: localName, description: localDescription })">
+                    Confirm
+                </v-btn>
+            </div>
+        </div>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+
+type ExpandedKey = {
+    nameID: string;
+    type: string;
+} | null;
+
+const props = withDefaults(
+    defineProps<{
+        name: string;
+        description?: string;
+        expandedCardKey: ExpandedKey;
+        type: string;
+        nameErrorMessage?: string;
+        editable?: boolean;
+    }>(),
+    {
+        editable: true
+    }
+);
+
+const emit = defineEmits<{
+    (e: "expand"): void;
+    (e: "cancel"): void;
+    (e: "confirm", payload: { name: string; description: string }): void;
+    (e: "delete"): void;
+}>();
+
+const isExpanded = computed(
+    () => props.editable && props.expandedCardKey?.type === props.type && props.expandedCardKey?.nameID === props.name
+);
+
+const localName = ref(props.name);
+const localDescription = ref(props.description ?? "");
+
+watch(
+    () => props.expandedCardKey,
+    () => {
+        if (isExpanded.value) {
+            localName.value = props.name;
+            localDescription.value = props.description ?? "";
+        }
+    }
+);
+</script>

src/components/SideBar.vue

@@ -4,7 +4,11 @@
             <div v-if="idx > 0" class="mx-3 mb-3 mt-1 align-self-stretch">
                 <v-divider></v-divider>
             </div>
-            <div v-for="(item, index) in itemGroup" :key="index" class="sidebar-item mb-2">
+            <div
+                v-for="(item, index) in itemGroup"
+                :key="index"
+                class="sidebar-item mb-2 d-flex align-center justify-center"
+            >
                 <SideBarButton
                     v-if="'name' in item"
                     :icon="item.icon"

src/components/SideBarButton.vue

@@ -80,6 +80,9 @@ function chooseActive(isActive: boolean, isExactActive: boolean): boolean {
 @use "vuetify/settings" as *;
 
 .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
     width: 56px;
     height: 32px;

src/components/SvgWrapper.vue

@@ -0,0 +1,13 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="32" height="32">
+        <path :d="normalizedPath" />
+    </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{ path: string }>();
+
+const normalizedPath = computed(() => props.path.trim().replace(/"/g, ""));
+</script>