feat(KAN-33): redesign ticket relationships and hierarchy

resources/js/components/tickets/detail/TicketDetailContent.vue

@@ -3,7 +3,7 @@ import { useLocalization } from '@/composables/useLocalization';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 
 import { useForm, useRemember } from '@inertiajs/vue3';
-import { computed, ref, toRef, unref } from 'vue';
+import { computed, ref, toRef, unref, useTemplateRef, nextTick } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import InputError from '@/components/InputError.vue';
 import FormFeedback from '@/components/FormFeedback.vue';
@@ -22,6 +22,18 @@ import {
 import type { TicketDetailContentProps } from '@/types/ticket-detail';
 const props = defineProps<TicketDetailContentProps>();
 const { t } = useLocalization();
+const editor = useTemplateRef<HTMLDetailsElement>('editor');
+async function editParent(): Promise<void> {
+    if (!props.canEditTicket || !editor.value) {
+        return;
+    }
+    editor.value.open = true;
+    await nextTick();
+    editor.value
+        ?.querySelector<HTMLSelectElement>('#parent_ticket_id')
+        ?.focus();
+}
+defineExpose({ editParent });
 const canEditAuthor = computed(
     () => props.canEditTicket && props.canManageProject,
 );
@@ -380,6 +392,7 @@ const submit = (): void => {
         <details
             v-if="canEditTicket"
             id="ticket-edit"
+            ref="editor"
             class="bg-card group rounded-xl border shadow-sm"
         >
             <summary