feat(KAN-30): rebuild responsive ticket detail view

Dockerfile

@@ -55,8 +55,7 @@ COPY --from=node_binary /usr/local/ /usr/local/
 COPY . /var/www
 
 RUN composer install --prefer-dist --no-interaction --no-progress \
-    && corepack enable pnpm \
+    && pnpm ci \
-    && pnpm install --frozen-lockfile \
     && pnpm run build
 
 FROM build AS test

resources/js/components/BacklogTicketTree.vue

@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import { move } from '@/actions/App/Http/Controllers/ProjectBoardController';
-import InputError from '@/components/InputError.vue';
-import { TicketCard } from '@/components/tickets';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import { ticketStatusLabel } from '@/lib/tickets';
-import type {
-    BacklogTicketTreeEmits,
-    BacklogTicketTreeProps,
-} from '@/types/backlog';
-import type { TicketModel } from '@/types/models/ticket-model';
-
-const props = defineProps<BacklogTicketTreeProps>();
-const emit = defineEmits<BacklogTicketTreeEmits>();
-const { t } = useLocalization();
-
-const allowedTargetStatuses = (ticket: TicketModel) =>
-    (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
-        (status) => status.id !== ticket.ticket_status_id,
-    );
-</script>
-
-<template>
-    <ul class="grid min-w-0 gap-3">
-        <li v-for="node in nodes" :key="node.ticket.id" class="min-w-0">
-            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
-                <div class="flex justify-center pt-1">
-                    <button
-                        v-if="node.children.length > 0"
-                        type="button"
-                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
-                        :aria-expanded="!collapsedTicketIds.has(node.ticket.id)"
-                        :aria-controls="`backlog-children-${node.ticket.id}`"
-                        :aria-label="
-                            t(
-                                collapsedTicketIds.has(node.ticket.id)
-                                    ? 'backlog.tree.expand'
-                                    : 'backlog.tree.collapse',
-                                { key: node.ticket.ticket_key },
-                            )
-                        "
-                        @click="emit('toggle', node.ticket.id)"
-                    >
-                        <ChevronRight
-                            v-if="collapsedTicketIds.has(node.ticket.id)"
-                            class="size-4"
-                            aria-hidden="true"
-                        />
-                        <ChevronDown v-else class="size-4" aria-hidden="true" />
-                    </button>
-                    <span
-                        v-else
-                        class="bg-border mt-4 size-1.5 rounded-full"
-                        aria-hidden="true"
-                    />
-                </div>
-
-                <div class="grid min-w-0 gap-2">
-                    <Badge
-                        v-if="!node.matchesFilters"
-                        variant="secondary"
-                        class="w-fit"
-                    >
-                        {{ t('backlog.filters.parentContext') }}
-                    </Badge>
-
-                    <TicketCard
-                        :project-id="projectId"
-                        :ticket="node.ticket"
-                        layout="list"
-                        :class="{ 'opacity-80': !node.matchesFilters }"
-                    >
-                        <template v-if="canEditTickets" #actions>
-                            <Form
-                                v-bind="
-                                    move.form({
-                                        project: projectId,
-                                        ticket: node.ticket.id,
-                                    })
-                                "
-                                v-slot="{ processing, errors }"
-                                :error-bag="`backlog-ticket-${node.ticket.id}`"
-                                :options="{ preserveScroll: true }"
-                                :on-before="() => pendingTicketId === null"
-                                class="grid min-w-0 gap-2"
-                                @start="emit('moveStart', node.ticket.id)"
-                                @finish="emit('moveFinish', node.ticket.id)"
-                            >
-                                <input
-                                    type="hidden"
-                                    name="redirect_to"
-                                    value="backlog"
-                                />
-                                <label
-                                    :for="`backlog-ticket-status-${node.ticket.id}`"
-                                    class="text-caption text-muted-foreground font-semibold"
-                                >
-                                    {{
-                                        t('backlog.moveTicket', {
-                                            key: node.ticket.ticket_key,
-                                        })
-                                    }}
-                                </label>
-                                <select
-                                    :id="`backlog-ticket-status-${node.ticket.id}`"
-                                    name="ticket_status_id"
-                                    :disabled="
-                                        pendingTicketId !== null ||
-                                        processing ||
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                    :aria-invalid="
-                                        !!errors.ticket_status_id || undefined
-                                    "
-                                    :aria-describedby="
-                                        errors.ticket_status_id
-                                            ? `backlog-ticket-status-error-${node.ticket.id}`
-                                            : undefined
-                                    "
-                                    class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60"
-                                >
-                                    <option
-                                        v-if="
-                                            allowedTargetStatuses(node.ticket)
-                                                .length === 0
-                                        "
-                                        value=""
-                                    >
-                                        {{ t('board.noMoves') }}
-                                    </option>
-                                    <option
-                                        v-for="target in allowedTargetStatuses(
-                                            node.ticket,
-                                        )"
-                                        :key="target.id"
-                                        :value="target.id"
-                                    >
-                                        {{
-                                            ticketStatusLabel(
-                                                target,
-                                                t('tickets.noStatus'),
-                                            )
-                                        }}
-                                    </option>
-                                </select>
-                                <InputError
-                                    :id="`backlog-ticket-status-error-${node.ticket.id}`"
-                                    :message="errors.ticket_status_id"
-                                />
-                                <Button
-                                    type="submit"
-                                    variant="outline"
-                                    :disabled="
-                                        pendingTicketId !== null ||
-                                        processing ||
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                >
-                                    {{
-                                        t(
-                                            processing
-                                                ? 'board.updatingStatus'
-                                                : 'board.updateStatus',
-                                        )
-                                    }}
-                                </Button>
-                                <p
-                                    v-if="
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{ t('board.noMovesDescription') }}
-                                </p>
-                            </Form>
-                        </template>
-                    </TicketCard>
-                </div>
-            </div>
-
-            <div
-                v-if="
-                    node.children.length > 0 &&
-                    !collapsedTicketIds.has(node.ticket.id)
-                "
-                :id="`backlog-children-${node.ticket.id}`"
-                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
-            >
-                <BacklogTicketTree
-                    :nodes="node.children"
-                    :project-id="projectId"
-                    :can-edit-tickets="canEditTickets"
-                    :collapsed-ticket-ids="collapsedTicketIds"
-                    :pending-ticket-id="pendingTicketId"
-                    @toggle="emit('toggle', $event)"
-                    @move-start="emit('moveStart', $event)"
-                    @move-finish="emit('moveFinish', $event)"
-                />
-            </div>
-        </li>
-    </ul>
-</template>

resources/js/components/TicketTreeList.vue

@@ -1,93 +1,45 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import { reactive } from 'vue';
 import { Badge } from '@/components/ui/badge';
-import { useLocalization } from '@/composables/useLocalization';
 import { show as showTicket } from '@/routes/projects/tickets';
-import type { TicketTreeListProps } from '@/types/ticket-tree';
+import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
 
-defineProps<TicketTreeListProps>();
+defineProps<{
-
+    nodes: TicketTreeNodeModel[];
-const { t } = useLocalization();
+    projectId: number;
-const collapsedTicketIds = reactive(new Set<number>());
+}>();
-
-function toggleTicket(ticketId: number): void {
-    if (collapsedTicketIds.has(ticketId)) {
-        collapsedTicketIds.delete(ticketId);
-    } else {
-        collapsedTicketIds.add(ticketId);
-    }
-}
 </script>
 
 <template>
-    <ul class="grid min-w-0 gap-3">
+    <ul class="space-y-3">
-        <li v-for="node in nodes" :key="node.id" class="min-w-0">
+        <li v-for="node in nodes" :key="node.id">
-            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
+            <div class="border-border rounded-xl border px-4 py-4">
-                <div class="flex justify-center pt-1">
+                <div class="flex flex-wrap items-center gap-2">
-                    <button
+                    <Link
-                        v-if="node.children.length > 0"
+                        :href="
-                        type="button"
+                            showTicket({
-                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
+                                project: projectId,
-                        :aria-expanded="!collapsedTicketIds.has(node.id)"
+                                ticket: node.id,
-                        :aria-controls="`ticket-tree-children-${node.id}`"
+                            })
-                        :aria-label="
-                            t(
-                                collapsedTicketIds.has(node.id)
-                                    ? 'tickets.tree.expand'
-                                    : 'tickets.tree.collapse',
-                                { key: node.ticket_key },
-                            )
                         "
-                        @click="toggleTicket(node.id)"
+                        class="text-foreground hover:text-primary font-medium transition"
                     >
-                        <ChevronRight
+                        {{ node.ticket_key }}
-                            v-if="collapsedTicketIds.has(node.id)"
+                    </Link>
-                            class="size-4"
+
-                            aria-hidden="true"
+                    <Badge v-if="node.ticket_type_name" variant="secondary">
-                        />
+                        {{ node.ticket_type_name }}
-                        <ChevronDown v-else class="size-4" aria-hidden="true" />
+                    </Badge>
-                    </button>
-                    <span
-                        v-else
-                        class="bg-border mt-4 size-1.5 rounded-full"
-                        aria-hidden="true"
-                    />
                 </div>
 
-                <Link
+                <div class="text-foreground mt-2 text-sm">
-                    :href="
+                    {{ node.title }}
-                        showTicket({
+                </div>
-                            project: projectId,
-                            ticket: node.id,
-                        })
-                    "
-                    class="bg-card text-card-foreground hover:border-primary focus-visible:ring-ring/35 gap-stack group grid min-w-0 rounded-md border p-4 transition-[border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
-                >
-                    <div class="flex min-w-0 flex-wrap items-center gap-2">
-                        <Badge variant="outline">
-                            {{ node.ticket_key }}
-                        </Badge>
-                        <Badge v-if="node.ticket_type_name" variant="secondary">
-                            {{ node.ticket_type_name }}
-                        </Badge>
-                    </div>
-
-                    <span
-                        class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
-                    >
-                        {{ node.title }}
-                    </span>
-                </Link>
             </div>
 
             <div
-                v-if="
+                v-if="node.children.length > 0"
-                    node.children.length > 0 && !collapsedTicketIds.has(node.id)
+                class="border-border mt-3 border-l pl-4"
-                "
-                :id="`ticket-tree-children-${node.id}`"
-                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
             >
                 <TicketTreeList
                     :nodes="node.children"

resources/js/components/tickets/TicketCard.vue

@@ -11,7 +11,6 @@ import type {
 } from '@/types/ticket-presentation';
 
 withDefaults(defineProps<TicketPresentationProps>(), {
-    layout: 'card',
     showDescription: true,
     showStatus: true,
 });
@@ -23,85 +22,63 @@ const { t } = useLocalization();
 <template>
     <article
         :class="[
-            'bg-card text-card-foreground min-w-0 rounded-md border',
+            'bg-card text-card-foreground min-w-0 rounded-md border shadow-sm',
-            layout === 'card' ? 'shadow-sm' : '',
             ticket.is_blocked ? 'border-warning' : 'border-border',
         ]"
     >
-        <div
+        <Link
-            :class="
+            :href="showTicket({ project: projectId, ticket: ticket.id })"
-                layout === 'list'
+            :aria-label="
-                    ? 'flex min-w-0 flex-col lg:flex-row lg:items-stretch'
+                t('tickets.open', {
-                    : ''
+                    key: ticket.ticket_key,
+                    title: ticket.title,
+                })
             "
+            class="focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-col rounded-t-md p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
+            @click="emit('open', ticket.id)"
         >
-            <Link
+            <div class="flex min-w-0 items-start justify-between gap-3">
-                :href="showTicket({ project: projectId, ticket: ticket.id })"
+                <Badge
-                :aria-label="
+                    variant="outline"
-                    t('tickets.open', {
+                    class="wrap-anywhere max-w-full whitespace-normal"
-                        key: ticket.ticket_key,
-                        title: ticket.title,
-                    })
-                "
-                :class="[
-                    'focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-1 flex-col p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2',
-                    layout === 'list'
-                        ? 'rounded-t-md lg:rounded-l-md lg:rounded-tr-none'
-                        : 'rounded-t-md',
-                ]"
-                @click="emit('open', ticket.id)"
-            >
-                <div class="flex min-w-0 items-start justify-between gap-3">
-                    <Badge
-                        variant="outline"
-                        class="wrap-anywhere max-w-full whitespace-normal"
-                    >
-                        {{ ticket.ticket_key }}
-                    </Badge>
-                    <ArrowUpRight
-                        class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
-                        aria-hidden="true"
-                    />
-                </div>
-
-                <h3
-                    class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
                 >
-                    {{ ticket.title }}
+                    {{ ticket.ticket_key }}
-                </h3>
+                </Badge>
-
+                <ArrowUpRight
-                <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+                    class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
-
+                    aria-hidden="true"
-                <p
+                />
-                    v-if="showDescription && ticket.description"
-                    class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
-                >
-                    {{ ticket.description }}
-                </p>
-
-                <p
-                    v-if="ticket.is_blocked && ticket.blocked_comment"
-                    class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
-                >
-                    {{
-                        t('tickets.blockerComment', {
-                            comment: ticket.blocked_comment,
-                        })
-                    }}
-                </p>
-            </Link>
-
-            <div
-                v-if="$slots.actions"
-                :class="[
-                    'border-t p-4',
-                    layout === 'list'
-                        ? 'lg:flex lg:w-80 lg:items-center lg:border-l lg:border-t-0'
-                        : '',
-                ]"
-            >
-                <slot name="actions" />
             </div>
+
+            <h3
+                class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
+            >
+                {{ ticket.title }}
+            </h3>
+
+            <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+
+            <p
+                v-if="showDescription && ticket.description"
+                class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
+            >
+                {{ ticket.description }}
+            </p>
+
+            <p
+                v-if="ticket.is_blocked && ticket.blocked_comment"
+                class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
+            >
+                {{
+                    t('tickets.blockerComment', {
+                        comment: ticket.blocked_comment,
+                    })
+                }}
+            </p>
+        </Link>
+
+        <div v-if="$slots.actions" class="border-t p-4">
+            <slot name="actions" />
         </div>
     </article>
 </template>

resources/js/components/tickets/TicketFormField.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import InputError from '@/components/InputError.vue';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-withDefaults(
-    defineProps<{
-        id: string;
-        label: string;
-        kind?: 'text' | 'number' | 'textarea' | 'select';
-        options?: { value: string | number; label: string }[];
-        error?: string;
-        hint?: string;
-        disabled?: boolean;
-        required?: boolean;
-        autofocus?: boolean;
-        placeholder?: string;
-        rows?: number;
-        min?: number;
-        step?: string;
-    }>(),
-    { kind: 'text', rows: 5 },
-);
-
-const model = defineModel<string | number | null>({ required: true });
-const controlClass =
-    'min-h-control border-input bg-card focus-visible:border-ring focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 text-base shadow-xs outline-none transition-[border-color,box-shadow] hover:border-primary/45 focus-visible:ring-2 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25 md:text-body';
-</script>
-
-<template>
-    <div class="grid min-w-0 content-start gap-2">
-        <Label :for="id">{{ label }}</Label>
-        <select
-            v-if="kind === 'select'"
-            :id="id"
-            v-model="model"
-            :name="id"
-            :disabled="disabled"
-            :required="required"
-            :aria-invalid="Boolean(error)"
-            :aria-describedby="`${id}-hint ${id}-error`"
-            :class="controlClass"
-        >
-            <option
-                v-for="option in options"
-                :key="option.value"
-                :value="option.value"
-            >
-                {{ option.label }}
-            </option>
-        </select>
-        <textarea
-            v-else-if="kind === 'textarea'"
-            :id="id"
-            v-model="model"
-            :name="id"
-            :rows="rows"
-            :disabled="disabled"
-            :required="required"
-            :placeholder="placeholder"
-            :aria-invalid="Boolean(error)"
-            :aria-describedby="`${id}-hint ${id}-error`"
-            :class="controlClass"
-        />
-        <Input
-            v-else
-            :id="id"
-            v-model="model"
-            :name="id"
-            :type="kind"
-            :disabled="disabled"
-            :required="required"
-            :autofocus="autofocus"
-            :placeholder="placeholder"
-            :min="min"
-            :step="step"
-            :maxlength="kind === 'text' ? 255 : undefined"
-            :invalid="Boolean(error)"
-            :aria-describedby="`${id}-hint ${id}-error`"
-        />
-        <p
-            :id="`${id}-hint`"
-            class="text-muted-foreground text-xs empty:hidden"
-        >
-            {{ hint }}
-        </p>
-        <InputError :id="`${id}-error`" :message="error" />
-    </div>
-</template>

resources/js/components/tickets/TicketFormFields.vue

@@ -1,157 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
-import { useLocalization } from '@/composables/useLocalization';
-import { ticketStatusLabel } from '@/lib/tickets';
-import type { ProjectTicketCreatePageProps } from '@/types';
-
-const props = defineProps<
-    Pick<
-        ProjectTicketCreatePageProps,
-        | 'project'
-        | 'ticketTypes'
-        | 'ticketPriorities'
-        | 'users'
-        | 'parentTicketOptions'
-    > & {
-        errors: Record<string, string>;
-        disabled?: boolean;
-        autofocus?: boolean;
-        ticketStatusOptions?: ProjectTicketCreatePageProps['ticketStatusOptions'];
-    }
->();
-const title = defineModel<string>('title', { required: true });
-const description = defineModel<string>('description', { required: true });
-const type = defineModel<string | number>('type', { required: true });
-const priority = defineModel<string | number>('priority', { required: true });
-const assignee = defineModel<string | number>('assignee', { required: true });
-const parent = defineModel<string | number>('parent', { required: true });
-const points = defineModel<string | number | null>('points', {
-    required: true,
-});
-const status = defineModel<string | number>('status');
-const { t } = useLocalization();
-const typeOptions = computed(() =>
-    props.ticketTypes.map((item) => ({ value: item.id, label: item.name })),
-);
-const priorityOptions = computed(() =>
-    props.ticketPriorities.map((item) => ({
-        value: item.id,
-        label: item.name,
-    })),
-);
-const userOptions = computed(() => [
-    { value: '', label: t('tickets.unassigned') },
-    ...props.users.map((item) => ({ value: item.id, label: item.name })),
-]);
-const parentOptions = computed(() => [
-    { value: '', label: t('ticketDetail.noParent') },
-    ...props.parentTicketOptions.map((item) => ({
-        value: item.id,
-        label: `${item.ticket_key} - ${item.title}`,
-    })),
-]);
-const statusOptions = computed(
-    () =>
-        props.ticketStatusOptions?.map((item) => ({
-            value: item.id,
-            label: ticketStatusLabel(item, t('ticketDetail.notSet')),
-        })) ?? [],
-);
-</script>
-
-<template>
-    <div class="grid min-w-0 gap-6">
-        <TicketFormField
-            id="title"
-            v-model="title"
-            :label="t('ticketDetail.title')"
-            :error="errors.title"
-            :disabled="disabled"
-            :autofocus="autofocus"
-            :placeholder="t('ticketForm.titlePlaceholder')"
-            required
-        />
-        <TicketFormField
-            id="description"
-            v-model="description"
-            kind="textarea"
-            :label="t('ticketDetail.description')"
-            :error="errors.description"
-            :disabled="disabled"
-            :placeholder="t('ticketForm.descriptionPlaceholder')"
-        />
-        <slot name="content" />
-        <fieldset
-            class="bg-muted/20 grid min-w-0 gap-5 rounded-xl border p-4 sm:p-5"
-            :disabled="disabled"
-        >
-            <legend class="px-2 text-sm font-semibold">
-                {{ t('ticketDetail.metadata') }}
-            </legend>
-            <div class="grid min-w-0 gap-5 sm:grid-cols-2">
-                <TicketFormField
-                    id="ticket_type_id"
-                    v-model="type"
-                    kind="select"
-                    :label="t('ticketDetail.type')"
-                    :options="typeOptions"
-                    :error="errors.ticket_type_id"
-                    :disabled="disabled"
-                    required
-                />
-                <TicketFormField
-                    id="ticket_priority_id"
-                    v-model="priority"
-                    kind="select"
-                    :label="t('ticketDetail.priority')"
-                    :options="priorityOptions"
-                    :error="errors.ticket_priority_id"
-                    :disabled="disabled"
-                    required
-                />
-                <TicketFormField
-                    v-if="ticketStatusOptions && status !== undefined"
-                    id="ticket_status_id"
-                    v-model="status"
-                    kind="select"
-                    :label="t('ticketDetail.status')"
-                    :options="statusOptions"
-                    :error="errors.ticket_status_id"
-                    :disabled="disabled"
-                    required
-                />
-                <TicketFormField
-                    id="assignee_user_id"
-                    v-model="assignee"
-                    kind="select"
-                    :label="t('ticketDetail.assignee')"
-                    :options="userOptions"
-                    :error="errors.assignee_user_id"
-                    :disabled="disabled"
-                />
-                <TicketFormField
-                    id="parent_ticket_id"
-                    v-model="parent"
-                    kind="select"
-                    :label="t('ticketDetail.parent')"
-                    :options="parentOptions"
-                    :error="errors.parent_ticket_id"
-                    :disabled="disabled"
-                />
-                <TicketFormField
-                    v-if="project.show_story_points"
-                    id="story_points"
-                    v-model="points"
-                    kind="number"
-                    :label="t('ticketDetail.storyPoints')"
-                    :error="errors.story_points"
-                    :disabled="disabled"
-                    :min="0"
-                    step="1"
-                />
-                <slot name="metadata" />
-            </div>
-        </fieldset>
-    </div>
-</template>

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

@@ -8,8 +8,7 @@ import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicke
 import InputError from '@/components/InputError.vue';
 import FormFeedback from '@/components/FormFeedback.vue';
 import { Button } from '@/components/ui/button';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import { Input } from '@/components/ui/input';
-import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
 import { Label } from '@/components/ui/label';
 import { useFormProtection } from '@/composables/useFormProtection';
 import {
@@ -46,7 +45,7 @@ const savedAcceptanceCriteria = ref(
 const isPersistingAcceptanceCriteriaToggle = ref(false);
 const acceptanceCriteriaToggleError = ref('');
 
-const savedFormData = () => ({
+const form = useForm(draftKey, {
     acceptance_criteria: buildAcceptanceCriteria(
         acceptanceCriteriaChecklist.value,
     ),
@@ -75,8 +74,6 @@ const savedFormData = () => ({
     story_points: props.ticket.story_points,
 });
 
-const form = useForm(draftKey, savedFormData());
-
 const acceptanceCriteriaPreviewItems = computed(
     () => savedAcceptanceCriteria.value,
 );
@@ -87,27 +84,11 @@ const hasUnsavedAcceptanceCriteriaDraft = computed(
         formatChecklistLines(savedAcceptanceCriteria.value),
 );
 
-const isDirty = computed(
+const protection = useFormProtection(form, {
-    () =>
+    isDirty: () =>
         props.canEditTicket &&
         (form.isDirty || hasUnsavedAcceptanceCriteriaDraft.value),
-);
+});
-const protection = useFormProtection(form, { isDirty: () => isDirty.value });
-const reset = (): void => {
-    if (
-        form.processing ||
-        isPersistingAcceptanceCriteriaToggle.value ||
-        !protection.confirmLeave()
-    ) {
-        return;
-    }
-    form.reset();
-    form.clearErrors();
-    acceptanceCriteriaChecklist.value = formatChecklistLines(
-        savedAcceptanceCriteria.value,
-    );
-    protection.clearFeedback();
-};
 
 const acceptanceCriteriaError = computed(() => {
     return (
@@ -159,7 +140,6 @@ const persistAcceptanceCriteriaToggle = async (
 ): Promise<void> => {
     if (
         !props.canEditTicket ||
-        form.processing ||
         isPersistingAcceptanceCriteriaToggle.value ||
         hasUnsavedAcceptanceCriteriaDraft.value
     ) {
@@ -211,8 +191,6 @@ const persistAcceptanceCriteriaToggle = async (
 
         if (acceptanceCriteriaChecklist.value === previousChecklist) {
             acceptanceCriteriaChecklist.value = nextChecklist;
-            form.acceptance_criteria = nextAcceptanceCriteria;
-            form.defaults('acceptance_criteria', nextAcceptanceCriteria);
         }
     } catch (_error) {
         acceptanceCriteriaToggleError.value = t(
@@ -238,11 +216,7 @@ const onAcceptanceCriteriaCheckboxChange = async (
 };
 
 const submit = (): void => {
-    if (
+    if (!props.canEditTicket) {
-        !props.canEditTicket ||
-        form.processing ||
-        isPersistingAcceptanceCriteriaToggle.value
-    ) {
         return;
     }
 
@@ -262,8 +236,6 @@ const submit = (): void => {
                 acceptanceCriteriaChecklist.value = formatChecklistLines(
                     savedAcceptanceCriteria.value,
                 );
-                Object.assign(form, savedFormData());
-                form.defaults();
             },
         },
     );
@@ -387,224 +359,339 @@ const submit = (): void => {
             >
                 {{ t('ticketDetail.edit') }}
             </summary>
-            <div class="border-t p-4 sm:p-6">
+            <div class="border-t p-6">
                 <p class="text-muted-foreground mb-6 text-sm">
                     {{ t('ticketDetail.editDescription') }}
                 </p>
-                <form class="grid min-w-0 gap-6" @submit.prevent="submit">
+                <form class="grid gap-6" @submit.prevent="submit">
                     <FormFeedback
                         :state="protection.state.value"
                         @retry="submit"
                     />
-                    <TicketFormFields
+                    <div class="grid min-w-0 gap-2">
-                        v-model:title="form.title"
+                        <Label for="title">{{ t('ticketDetail.title') }}</Label>
-                        v-model:description="form.description"
+                        <Input
-                        v-model:type="form.ticket_type_id"
+                            id="title"
-                        v-model:priority="form.ticket_priority_id"
+                            v-model="form.title"
-                        v-model:assignee="form.assignee_user_id"
+                            :invalid="Boolean(form.errors.title)"
-                        v-model:parent="form.parent_ticket_id"
+                            aria-describedby="title-error"
-                        v-model:points="form.story_points"
+                            :disabled="!canEditTicket || form.processing"
-                        :project="project"
+                        />
-                        :ticket-types="ticketTypes"
+                        <InputError
-                        :ticket-priorities="ticketPriorities"
+                            id="title-error"
-                        :users="users"
+                            :message="form.errors.title"
-                        :parent-ticket-options="parentTicketOptions"
+                        />
-                        :errors="form.errors"
+                    </div>
-                        :disabled="
+
-                            form.processing ||
+                    <div class="grid gap-2 md:grid-cols-2 md:gap-6">
-                            isPersistingAcceptanceCriteriaToggle
+                        <div class="grid min-w-0 gap-2">
-                        "
+                            <Label for="ticket_type_id">{{
+                                t('ticketDetail.type')
+                            }}</Label>
+                            <select
+                                id="ticket_type_id"
+                                v-model="form.ticket_type_id"
+                                :disabled="!canEditTicket || form.processing"
+                                class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                            >
+                                <option
+                                    v-for="ticketType in ticketTypes"
+                                    :key="ticketType.id"
+                                    :value="ticketType.id"
+                                >
+                                    {{ ticketType.name }}
+                                </option>
+                            </select>
+                            <InputError :message="form.errors.ticket_type_id" />
+                        </div>
+
+                        <div class="grid min-w-0 gap-2">
+                            <Label for="ticket_priority_id">{{
+                                t('ticketDetail.priority')
+                            }}</Label>
+                            <select
+                                id="ticket_priority_id"
+                                v-model="form.ticket_priority_id"
+                                :disabled="!canEditTicket || form.processing"
+                                class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                            >
+                                <option
+                                    v-for="ticketPriority in ticketPriorities"
+                                    :key="ticketPriority.id"
+                                    :value="ticketPriority.id"
+                                >
+                                    {{ ticketPriority.name }}
+                                </option>
+                            </select>
+                            <InputError
+                                :message="form.errors.ticket_priority_id"
+                            />
+                        </div>
+                    </div>
+
+                    <div class="grid gap-2 md:grid-cols-2 md:gap-6">
+                        <div class="grid min-w-0 gap-2">
+                            <Label for="assignee_user_id">{{
+                                t('ticketDetail.assignee')
+                            }}</Label>
+                            <select
+                                id="assignee_user_id"
+                                v-model="form.assignee_user_id"
+                                :disabled="!canEditTicket || form.processing"
+                                class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                            >
+                                <option value="">
+                                    {{ t('tickets.unassigned') }}
+                                </option>
+                                <option
+                                    v-for="user in users"
+                                    :key="user.id"
+                                    :value="user.id"
+                                >
+                                    {{ user.name }}
+                                </option>
+                            </select>
+                            <InputError
+                                :message="form.errors.assignee_user_id"
+                            />
+                        </div>
+
+                        <div v-if="canViewAuthor" class="grid min-w-0 gap-2">
+                            <Label for="author_user_id">{{
+                                t('ticketDetail.author')
+                            }}</Label>
+                            <select
+                                id="author_user_id"
+                                v-model="form.author_user_id"
+                                :disabled="!canEditAuthor || form.processing"
+                                class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                            >
+                                <option value="">
+                                    {{ t('ticketDetail.noAuthor') }}
+                                </option>
+                                <option
+                                    v-for="user in users"
+                                    :key="user.id"
+                                    :value="user.id"
+                                >
+                                    {{ user.name }}
+                                </option>
+                            </select>
+                            <InputError :message="form.errors.author_user_id" />
+                        </div>
+                    </div>
+
+                    <div
+                        class="grid min-w-0 gap-2"
+                        v-if="project.show_story_points"
                     >
-                        <template #content>
+                        <Label for="story_points">{{
-                            <TicketFormField
+                            t('ticketDetail.storyPoints')
+                        }}</Label>
+                        <Input
+                            id="story_points"
+                            name="story_points"
+                            :disabled="!canEditTicket || form.processing"
+                            v-model="form.story_points"
+                            type="number"
+                            step="1"
+                        />
+                        <InputError :message="form.errors.story_points" />
+                    </div>
+
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="parent_ticket_id">{{
+                            t('ticketDetail.parent')
+                        }}</Label>
+                        <select
+                            id="parent_ticket_id"
+                            v-model="form.parent_ticket_id"
+                            :disabled="!canEditTicket || form.processing"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                        >
+                            <option value="">
+                                {{ t('ticketDetail.noParent') }}
+                            </option>
+                            <option
+                                v-for="parentTicketOption in parentTicketOptions"
+                                :key="parentTicketOption.id"
+                                :value="parentTicketOption.id"
+                            >
+                                {{
+                                    `${parentTicketOption.ticket_key} - ${parentTicketOption.title}`
+                                }}
+                            </option>
+                        </select>
+                        <InputError :message="form.errors.parent_ticket_id" />
+                    </div>
+
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="description">{{
+                            t('ticketDetail.description')
+                        }}</Label>
+                        <textarea
+                            id="description"
+                            v-model="form.description"
+                            rows="5"
+                            :disabled="!canEditTicket || form.processing"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                        />
+                        <InputError :message="form.errors.description" />
+                    </div>
+
+                    <div class="grid gap-4">
+                        <div class="grid min-w-0 gap-2">
+                            <Label for="acceptance_criteria_checklist">{{
+                                t('ticketDetail.checklistEditor')
+                            }}</Label>
+                            <textarea
                                 id="acceptance_criteria_checklist"
                                 v-model="acceptanceCriteriaChecklist"
-                                kind="textarea"
+                                rows="5"
-                                :label="t('ticketDetail.checklistEditor')"
+                                :disabled="!canEditTicket || form.processing"
-                                :hint="t('ticketForm.checklistHelp')"
+                                class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
                                 :placeholder="
                                     t('ticketDetail.checklistPlaceholder')
                                 "
-                                :error="acceptanceCriteriaError"
-                                :disabled="
-                                    form.processing ||
-                                    isPersistingAcceptanceCriteriaToggle
-                                "
                             />
-                        </template>
+                            <p class="text-muted-foreground text-xs">
-                        <template #metadata>
+                                {{ t('ticketDetail.checklistHelp') }}
-                            <TicketFormField
+                            </p>
-                                v-if="canViewAuthor"
+                            <p
-                                id="author_user_id"
+                                v-if="hasUnsavedAcceptanceCriteriaDraft"
-                                v-model="form.author_user_id"
+                                class="text-muted-foreground text-xs"
-                                kind="select"
+                            >
-                                :label="t('ticketDetail.author')"
+                                {{ t('ticketDetail.saveChecklistFirst') }}
-                                :hint="
+                            </p>
-                                    !canEditAuthor
+                            <InputError :message="acceptanceCriteriaError" />
-                                        ? t('ticketForm.authorRestricted')
+                            <InputError
-                                        : undefined
+                                :message="acceptanceCriteriaToggleError"
-                                "
-                                :options="[
-                                    {
-                                        value: '',
-                                        label: t('ticketDetail.noAuthor'),
-                                    },
-                                    ...users.map((user) => ({
-                                        value: user.id,
-                                        label: user.name,
-                                    })),
-                                ]"
-                                :error="form.errors.author_user_id"
-                                :disabled="!canEditAuthor || form.processing"
                             />
-                        </template>
+                        </div>
-                    </TicketFormFields>
+                    </div>
-                    <fieldset
+
-                        class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
+                    <div class="border-border grid gap-3 rounded-xl border p-4">
-                        :disabled="
+                        <div class="flex items-center gap-3">
-                            form.processing ||
-                            isPersistingAcceptanceCriteriaToggle
-                        "
-                    >
-                        <legend class="px-2 text-sm font-semibold">
-                            {{ t('ticketForm.blocker') }}
-                        </legend>
-                        <div class="min-h-control flex items-center gap-3">
                             <input
                                 id="is_blocked"
                                 v-model="form.is_blocked"
                                 type="checkbox"
-                                :aria-invalid="Boolean(form.errors.is_blocked)"
+                                :disabled="!canEditTicket || form.processing"
-                                aria-describedby="is_blocked-error"
+                                class="border-input text-primary focus:ring-ring size-4 rounded"
-                                class="border-input text-primary focus-visible:ring-ring size-4 rounded focus-visible:ring-2"
                             />
                             <Label for="is_blocked">{{
                                 t('ticketDetail.blocked')
                             }}</Label>
                         </div>
-                        <InputError
+
-                            id="is_blocked-error"
+                        <div class="grid min-w-0 gap-2">
-                            :message="form.errors.is_blocked"
+                            <Label for="blocked_comment">{{
-                        />
+                                t('ticketDetail.blockerComment')
-                        <TicketFormField
+                            }}</Label>
-                            id="blocked_comment"
+                            <textarea
-                            v-model="form.blocked_comment"
+                                id="blocked_comment"
-                            kind="textarea"
+                                v-model="form.blocked_comment"
-                            :rows="3"
+                                rows="3"
-                            :label="t('ticketDetail.blockerComment')"
+                                :disabled="!canEditTicket || form.processing"
-                            :placeholder="t('ticketDetail.blockerPlaceholder')"
+                                class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                            :error="form.errors.blocked_comment"
+                                :placeholder="
-                            :required="form.is_blocked"
+                                    t('ticketDetail.blockerPlaceholder')
-                        />
+                                "
-                    </fieldset>
+                            />
-                    <fieldset
+                            <InputError
-                        class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
+                                :message="form.errors.blocked_comment"
-                        :disabled="
+                            />
-                            form.processing ||
+                        </div>
-                            isPersistingAcceptanceCriteriaToggle
+                    </div>
-                        "
+
-                    >
+                    <div class="grid gap-4">
-                        <legend class="px-2 text-sm font-semibold">
+                        <div class="space-y-1">
-                            {{ t('ticketDetail.customFields') }}
+                            <h3 class="text-sm font-semibold">
-                        </legend>
+                                {{ t('ticketDetail.customFields') }}
-                        <p class="text-muted-foreground text-sm">
+                            </h3>
-                            {{ t('ticketDetail.customFieldsDescription') }}
+                            <p class="text-muted-foreground text-sm">
-                        </p>
+                                {{ t('ticketDetail.customFieldsDescription') }}
-                        <InputError :message="form.errors.field_values" />
+                            </p>
-                        <p
+                        </div>
-                            v-if="!ticketFieldDefinitions.length"
+
-                            class="text-muted-foreground text-sm"
+                        <div
+                            v-if="ticketFieldDefinitions.length === 0"
+                            class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
                         >
                             {{ t('ticketDetail.noCustomFields') }}
-                        </p>
+                        </div>
-                        <div v-else class="grid min-w-0 gap-5 sm:grid-cols-2">
+
-                            <template
+                        <div v-else class="grid gap-4 md:grid-cols-2">
+                            <div
                                 v-for="(
-                                    definition, index
+                                    ticketFieldDefinition, index
                                 ) in ticketFieldDefinitions"
-                                :key="definition.id"
+                                :key="ticketFieldDefinition.id"
+                                class="grid min-w-0 gap-2"
                             >
-                                <TicketFormField
+                                <Label
-                                    v-if="definition.field_type === 'user'"
+                                    :for="`field-${ticketFieldDefinition.id}`"
-                                    :id="`field-${definition.id}`"
+                                >
+                                    {{ ticketFieldDefinition.label }}
+                                </Label>
+
+                                <select
+                                    v-if="
+                                        ticketFieldDefinition.field_type ===
+                                        'user'
+                                    "
+                                    :id="`field-${ticketFieldDefinition.id}`"
                                     v-model="
                                         form.field_values[index].value_user_id
                                     "
-                                    kind="select"
+                                    :disabled="
-                                    :label="definition.label"
+                                        !canEditTicket || form.processing
-                                    :options="[
+                                    "
-                                        {
+                                    class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                                            value: '',
+                                >
-                                            label: t('tickets.unassigned'),
+                                    <option value="">
-                                        },
+                                        {{ t('tickets.unassigned') }}
-                                        ...users.map((user) => ({
+                                    </option>
-                                            value: user.id,
+                                    <option
-                                            label: user.name,
+                                        v-for="user in users"
-                                        })),
+                                        :key="user.id"
-                                    ]"
+                                        :value="user.id"
-                                    :error="
+                                    >
+                                        {{ user.name }}
+                                    </option>
+                                </select>
+
+                                <Input
+                                    v-else
+                                    :id="`field-${ticketFieldDefinition.id}`"
+                                    v-model="
+                                        form.field_values[index].value_number
+                                    "
+                                    type="number"
+                                    step="0.1"
+                                    :disabled="
+                                        !canEditTicket || form.processing
+                                    "
+                                />
+
+                                <InputError
+                                    :message="
                                         form.errors[
                                             `field_values.${index}.value_user_id`
                                         ] ??
-                                        form.errors[
-                                            `field_values.${index}.ticket_field_definition_id`
-                                        ]
-                                    "
-                                />
-                                <TicketFormField
-                                    v-else
-                                    :id="`field-${definition.id}`"
-                                    v-model="
-                                        form.field_values[index].value_number
-                                    "
-                                    kind="number"
-                                    step="0.1"
-                                    :label="definition.label"
-                                    :error="
                                         form.errors[
                                             `field_values.${index}.value_number`
-                                        ] ??
-                                        form.errors[
-                                            `field_values.${index}.ticket_field_definition_id`
                                         ]
                                     "
                                 />
-                            </template>
+                            </div>
                         </div>
-                    </fieldset>
+                    </div>
-                    <div
+
-                        class="flex flex-wrap items-center gap-3 border-t pt-5"
+                    <div v-if="canEditTicket" class="flex items-center gap-3">
-                    >
+                        <Button type="submit" :disabled="form.processing">{{
-                        <Button
+                            t('ticketDetail.saveChanges')
-                            type="submit"
+                        }}</Button>
-                            :disabled="
-                                form.processing ||
-                                isPersistingAcceptanceCriteriaToggle
-                            "
-                            >{{
-                                form.processing
-                                    ? t('ticketForm.saving')
-                                    : t('ticketDetail.saveChanges')
-                            }}</Button
-                        >
-                        <Button
-                            type="button"
-                            variant="outline"
-                            :disabled="
-                                form.processing ||
-                                isPersistingAcceptanceCriteriaToggle ||
-                                !isDirty
-                            "
-                            @click="reset"
-                            >{{ t('ticketForm.reset') }}</Button
-                        >
-                        <p role="status" class="text-muted-foreground text-sm">
-                            {{
-                                isDirty
-                                    ? t('ticketForm.unsaved')
-                                    : t('ticketForm.saved')
-                            }}
-                        </p>
                     </div>
                 </form>
             </div>

resources/js/lib/backlog.ts

@@ -1,114 +0,0 @@
-import type {
-    BacklogFilterState,
-    BacklogTicketTreeNode,
-} from '@/types/backlog';
-import type { TicketModel } from '@/types/models/ticket-model';
-
-export function buildBacklogTicketTree(
-    tickets: TicketModel[],
-): BacklogTicketTreeNode[] {
-    const nodesByTicketId = new Map<number, BacklogTicketTreeNode>();
-
-    for (const ticket of tickets) {
-        nodesByTicketId.set(ticket.id, {
-            children: [],
-            matchesFilters: true,
-            ticket,
-        });
-    }
-
-    const roots: BacklogTicketTreeNode[] = [];
-
-    for (const ticket of tickets) {
-        const node = nodesByTicketId.get(ticket.id);
-
-        if (!node) {
-            continue;
-        }
-
-        const parentNode =
-            ticket.parent_ticket_id === null
-                ? undefined
-                : nodesByTicketId.get(ticket.parent_ticket_id);
-
-        if (parentNode) {
-            parentNode.children.push(node);
-        } else {
-            roots.push(node);
-        }
-    }
-
-    return roots;
-}
-
-export function filterBacklogTicketTree(
-    nodes: BacklogTicketTreeNode[],
-    filters: BacklogFilterState,
-): BacklogTicketTreeNode[] {
-    return nodes.flatMap((node) => {
-        const children = filterBacklogTicketTree(node.children, filters);
-        const matchesFilters = ticketMatchesFilters(node.ticket, filters);
-
-        if (!matchesFilters && children.length === 0) {
-            return [];
-        }
-
-        return [
-            {
-                ...node,
-                children,
-                matchesFilters,
-            },
-        ];
-    });
-}
-
-export function countBacklogTreeTickets(
-    nodes: BacklogTicketTreeNode[],
-): number {
-    return nodes.reduce(
-        (count, node) => count + 1 + countBacklogTreeTickets(node.children),
-        0,
-    );
-}
-
-export function expandableBacklogTicketIds(
-    nodes: BacklogTicketTreeNode[],
-): number[] {
-    return nodes.flatMap((node) => [
-        ...(node.children.length > 0 ? [node.ticket.id] : []),
-        ...expandableBacklogTicketIds(node.children),
-    ]);
-}
-
-function ticketMatchesFilters(
-    ticket: TicketModel,
-    filters: BacklogFilterState,
-): boolean {
-    const query = filters.query.trim().toLocaleLowerCase();
-    const searchableText = [
-        ticket.ticket_key,
-        ticket.title,
-        ticket.description,
-        ticket.ticket_type.name,
-        ticket.ticket_priority.name,
-        ticket.ticket_status?.name,
-        ticket.assignee?.name,
-    ]
-        .filter((value): value is string => Boolean(value))
-        .join(' ')
-        .toLocaleLowerCase();
-
-    return (
-        (query === '' || searchableText.includes(query)) &&
-        (filters.typeId === '' || ticket.ticket_type_id === filters.typeId) &&
-        (filters.priorityId === '' ||
-            ticket.ticket_priority_id === filters.priorityId) &&
-        (filters.statusId === '' ||
-            ticket.ticket_status_id === filters.statusId) &&
-        (filters.assigneeId === '' ||
-            (filters.assigneeId === 'unassigned'
-                ? ticket.assignee_user_id === null
-                : ticket.assignee_user_id === filters.assigneeId))
-    );
-}

resources/js/locales/en.ts

@@ -31,40 +31,6 @@ export const en = {
     'board.targetStatus': 'Destination status',
     'board.noMovesDescription':
         'This status does not allow moving anywhere else.',
-    'backlog.title': '{name} backlog',
-    'backlog.description':
-        'Shape incoming work without losing sight of parent and child tickets.',
-    'backlog.openBoard': 'Open board',
-    'backlog.backToProject': 'Project overview',
-    'backlog.moveTicket': 'Move {key}',
-    'backlog.filters.title': 'Find backlog tickets',
-    'backlog.filters.description':
-        'Filter this view locally. Matching child tickets keep their parent context visible.',
-    'backlog.filters.search': 'Search',
-    'backlog.filters.searchPlaceholder': 'Key, title, description, or metadata',
-    'backlog.filters.type': 'Type',
-    'backlog.filters.allTypes': 'All types',
-    'backlog.filters.priority': 'Priority',
-    'backlog.filters.allPriorities': 'All priorities',
-    'backlog.filters.status': 'Status',
-    'backlog.filters.allStatuses': 'All backlog statuses',
-    'backlog.filters.assignee': 'Assignee',
-    'backlog.filters.allAssignees': 'All assignees',
-    'backlog.filters.clear': 'Clear filters',
-    'backlog.filters.parentContext': 'Parent context',
-    'backlog.filters.empty.title': 'No tickets match these filters',
-    'backlog.filters.empty.description':
-        'Try a broader search or clear the filters to see the complete backlog.',
-    'backlog.results.title': 'Backlog tickets',
-    'backlog.results.count': 'Showing {count} of {total} tickets',
-    'backlog.empty.title': 'Your backlog is clear',
-    'backlog.empty.description':
-        'New tickets without a workflow column will appear here.',
-    'backlog.empty.action': 'Create the first ticket',
-    'backlog.tree.expand': 'Expand children of {key}',
-    'backlog.tree.collapse': 'Collapse children of {key}',
-    'backlog.tree.expandAll': 'Expand all',
-    'backlog.tree.collapseAll': 'Collapse all',
     'projectCreation.title': 'Create a project',
     'projectCreation.description':
         'Give your work a home. Start fresh or reuse a setup that already works for your team.',
@@ -390,8 +356,6 @@ export const en = {
     'tickets.noStatus': 'No status',
     'tickets.assignedTo': 'Assigned to {name}',
     'tickets.unassigned': 'Unassigned',
-    'tickets.tree.expand': 'Expand children of {key}',
-    'tickets.tree.collapse': 'Collapse children of {key}',
     'common.save': 'Save',
     'common.loading': 'Loading…',
     'common.error': 'Something went wrong.',
@@ -498,28 +462,4 @@ export const en = {
     'ticketDetail.noHistory': 'No worklog entries exist for this ticket yet.',
     'ticketDetail.system': 'System',
     'ticketDetail.sourceBranch': 'Source branch: {name}',
-    'ticketForm.create': 'Create ticket',
-    'ticketForm.pageTitle': 'Create {project} ticket',
-    'ticketForm.createDescription': 'Add a ticket to {project}.',
-    'ticketForm.backToBoard': 'Back to board',
-    'ticketForm.backToBacklog': 'Back to backlog',
-    'ticketForm.details': 'Ticket details',
-    'ticketForm.keyAssigned': 'The ticket key is assigned after creation.',
-    'ticketForm.titlePlaceholder': 'Implement repository sync',
-    'ticketForm.descriptionPlaceholder':
-        'Describe the expected behavior and relevant context.',
-    'ticketForm.checklistHelp':
-        'Use [ ] / [x] for checklist items. Indent with two spaces for nested steps.',
-    'ticketForm.checklistPreview': 'Checklist preview',
-    'ticketForm.metadataRequired':
-        'Ticket creation needs at least one type, one priority, and one status.',
-    'ticketForm.openSettings': 'Open ticket settings',
-    'ticketForm.creating': 'Creating ticket…',
-    'ticketForm.saving': 'Saving changes…',
-    'ticketForm.reset': 'Discard changes',
-    'ticketForm.unsaved': 'Unsaved changes',
-    'ticketForm.ready': 'Ready for a new ticket',
-    'ticketForm.saved': 'All changes saved',
-    'ticketForm.authorRestricted': 'Only project admins can change the author.',
-    'ticketForm.blocker': 'Blocker',
 } as const;

resources/js/pages/projects/Backlog.vue

@@ -1,155 +1,70 @@
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
+import { Form, Head, Link } from '@inertiajs/vue3';
-import {
+import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
-    ArrowLeft,
+import Heading from '@/components/Heading.vue';
-    ChevronsDownUp,
+import { TicketListItem } from '@/components/tickets';
-    ChevronsUpDown,
-    Columns3,
-    Plus,
-    RotateCcw,
-    Search,
-} from 'lucide-vue-next';
-import { computed, reactive, ref, watch } from 'vue';
-import BacklogTicketTree from '@/components/BacklogTicketTree.vue';
-import FeedbackState from '@/components/FeedbackState.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import AppLayout from '@/layouts/AppLayout.vue';
 import {
-    buildBacklogTicketTree,
+    Card,
-    countBacklogTreeTickets,
+    CardContent,
-    expandableBacklogTicketIds,
+    CardDescription,
-    filterBacklogTicketTree,
+    CardHeader,
-} from '@/lib/backlog';
+    CardTitle,
+} from '@/components/ui/card';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { ticketStatusLabel } from '@/lib/tickets';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
-import { index as projectIndex, show } from '@/routes/projects/index';
+import { index, show } from '@/routes/projects/index';
 import { create as createTicket } from '@/routes/projects/tickets';
-import type {
+import type { BreadcrumbItem, ProjectBacklogPageProps } from '@/types';
-    BacklogFilterState,
+import type { TicketModel } from '@/types/models/ticket-model';
-    BreadcrumbItem,
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
-    ProjectBacklogPageProps,
-} from '@/types';
 
 const props = defineProps<ProjectBacklogPageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: projectIndex() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('navigation.backlog'), href: backlogIndex(props.project.id) },
-]);
 
-const filters = reactive<BacklogFilterState>({
+const breadcrumbs: BreadcrumbItem[] = [
-    assigneeId: '',
+    {
-    priorityId: '',
+        title: 'Projects',
-    query: '',
+        href: index(),
-    statusId: '',
-    typeId: '',
-});
-const collapsedTicketIds = reactive(new Set<number>());
-const pendingTicketId = ref<number | null>(null);
-const ticketTree = computed(() => buildBacklogTicketTree(props.tickets));
-const filteredTicketTree = computed(() =>
-    filterBacklogTicketTree(ticketTree.value, filters),
-);
-const visibleTicketCount = computed(() =>
-    countBacklogTreeTickets(filteredTicketTree.value),
-);
-const expandableTicketIds = computed(() =>
-    expandableBacklogTicketIds(filteredTicketTree.value),
-);
-const hasActiveFilters = computed(
-    () =>
-        filters.query.trim() !== '' ||
-        filters.typeId !== '' ||
-        filters.priorityId !== '' ||
-        filters.statusId !== '' ||
-        filters.assigneeId !== '',
-);
-const allVisibleBranchesCollapsed = computed(
-    () =>
-        expandableTicketIds.value.length > 0 &&
-        expandableTicketIds.value.every((ticketId) =>
-            collapsedTicketIds.has(ticketId),
-        ),
-);
-
-function clearFilters(): void {
-    filters.query = '';
-    filters.typeId = '';
-    filters.priorityId = '';
-    filters.statusId = '';
-    filters.assigneeId = '';
-}
-
-function toggleTicket(ticketId: number): void {
-    if (collapsedTicketIds.has(ticketId)) {
-        collapsedTicketIds.delete(ticketId);
-    } else {
-        collapsedTicketIds.add(ticketId);
-    }
-}
-
-function toggleAllBranches(): void {
-    if (allVisibleBranchesCollapsed.value) {
-        collapsedTicketIds.clear();
-
-        return;
-    }
-
-    for (const ticketId of expandableTicketIds.value) {
-        collapsedTicketIds.add(ticketId);
-    }
-}
-
-function finishMove(ticketId: number): void {
-    if (pendingTicketId.value === ticketId) {
-        pendingTicketId.value = null;
-    }
-}
-
-watch(
-    () => props.project.id,
-    () => {
-        clearFilters();
-        collapsedTicketIds.clear();
-        pendingTicketId.value = null;
     },
-);
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Backlog',
+        href: backlogIndex(props.project.id),
+    },
+];
+
+const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
+    return (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
+        (ticketStatus) => ticketStatus.id !== ticket.ticket_status_id,
+    );
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('backlog.title', { name: project.name })" />
+        <Head :title="`${project.name} backlog`" />
 
-        <div class="gap-page md:p-page flex min-w-0 flex-1 flex-col p-4">
+        <div class="flex flex-1 flex-col gap-6 p-4">
-            <header
+            <div
-                class="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-start xl:justify-between"
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="grid min-w-0 gap-2">
+                <div class="space-y-3">
-                    <div class="flex min-w-0 flex-wrap items-center gap-3">
+                    <Badge variant="outline" class="px-3 py-1">
-                        <Badge
+                        {{ project.key }}
-                            variant="outline"
+                    </Badge>
-                            class="wrap-anywhere max-w-full whitespace-normal"
+                    <Heading
-                        >
+                        :title="`${project.name} backlog`"
-                            {{ project.key }}
+                        description="All newly created tickets start here before they move onto the board."
-                        </Badge>
+                    />
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('tickets.count', { count: tickets.length }) }}
-                        </p>
-                    </div>
-                    <h1
-                        class="text-headline-mobile md:text-headline wrap-anywhere"
-                    >
-                        {{ t('backlog.title', { name: project.name }) }}
-                    </h1>
-                    <p class="text-caption text-muted-foreground max-w-2xl">
-                        {{ t('backlog.description') }}
-                    </p>
                 </div>
 
-                <div class="flex flex-wrap gap-2">
+                <div class="flex flex-wrap gap-3">
                     <Button v-if="canCreateTickets" as-child>
                         <Link
                             :href="
@@ -159,286 +74,138 @@ watch(
                                 )
                             "
                         >
-                            <Plus aria-hidden="true" />
+                            Create ticket
-                            {{ t('navigation.createTicket') }}
                         </Link>
                     </Button>
+
                     <Button as-child variant="outline">
-                        <Link :href="boardIndex(project.id)">
+                        <Link :href="boardIndex(project.id)">Open board</Link>
-                            <Columns3 aria-hidden="true" />
-                            {{ t('backlog.openBoard') }}
-                        </Link>
                     </Button>
-                    <Button as-child variant="ghost">
+
-                        <Link :href="show(project.id)">
+                    <Button as-child variant="outline">
-                            <ArrowLeft aria-hidden="true" />
+                        <Link :href="show(project.id)">Back to project</Link>
-                            {{ t('backlog.backToProject') }}
-                        </Link>
                     </Button>
                 </div>
-            </header>
+            </div>
 
-            <FeedbackState v-if="status" state="success" :title="status" />
+            <div
-
+                v-if="status"
-            <section
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-                aria-labelledby="backlog-filter-title"
-                class="bg-card gap-card p-card grid min-w-0 rounded-md border"
             >
-                <div
+                {{ status }}
-                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+            </div>
-                >
-                    <div class="grid min-w-0 gap-1">
-                        <h2 id="backlog-filter-title" class="text-title">
-                            {{ t('backlog.filters.title') }}
-                        </h2>
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('backlog.filters.description') }}
-                        </p>
-                    </div>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        :disabled="!hasActiveFilters"
-                        @click="clearFilters"
-                    >
-                        <RotateCcw aria-hidden="true" />
-                        {{ t('backlog.filters.clear') }}
-                    </Button>
-                </div>
 
-                <div
+            <Card class="gap-0 overflow-hidden">
-                    class="grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-[minmax(14rem,2fr)_repeat(4,minmax(9rem,1fr))]"
+                <CardHeader class="border-b">
-                >
+                    <CardTitle>Backlog tickets</CardTitle>
+                    <CardDescription>
+                        Tickets remain here while their status belongs to
+                        backlog.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="p-0">
                     <div
-                        class="grid min-w-0 gap-1.5 sm:col-span-2 xl:col-span-1"
+                        v-if="tickets.length === 0"
+                        class="text-muted-foreground p-6 text-sm"
                     >
-                        <label
+                        No backlog tickets exist yet.
-                            for="backlog-query"
-                            class="text-caption font-semibold"
-                        >
-                            {{ t('backlog.filters.search') }}
-                        </label>
-                        <div class="relative min-w-0">
-                            <Search
-                                class="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                                aria-hidden="true"
-                            />
-                            <input
-                                id="backlog-query"
-                                v-model="filters.query"
-                                type="search"
-                                class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border py-2 pl-9 pr-3 focus-visible:outline-none focus-visible:ring-2"
-                                :placeholder="
-                                    t('backlog.filters.searchPlaceholder')
-                                "
-                            />
-                        </div>
                     </div>
 
-                    <div class="grid min-w-0 gap-1.5">
+                    <ul v-else class="gap-column grid p-4">
-                        <label
+                        <TicketListItem
-                            for="backlog-type"
+                            v-for="ticket in tickets"
-                            class="text-caption font-semibold"
+                            :key="ticket.id"
+                            :project-id="project.id"
+                            :ticket="ticket"
                         >
-                            {{ t('backlog.filters.type') }}
+                            <template v-if="canEditTickets" #actions>
-                        </label>
+                                <Form
-                        <select
+                                    v-bind="
-                            id="backlog-type"
+                                        ProjectBoardController.move.form({
-                            v-model="filters.typeId"
+                                            project: project.id,
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                            ticket: ticket.id,
-                        >
+                                        })
-                            <option value="">
+                                    "
-                                {{ t('backlog.filters.allTypes') }}
+                                    class="flex w-full flex-col gap-2"
-                            </option>
+                                    v-slot="{ processing }"
-                            <option
+                                >
-                                v-for="ticketType in ticketTypes"
+                                    <input
-                                :key="ticketType.id"
+                                        type="hidden"
-                                :value="ticketType.id"
+                                        name="redirect_to"
-                            >
+                                        value="backlog"
-                                {{ ticketType.name }}
+                                    />
-                            </option>
+                                    <label
-                        </select>
+                                        :for="`backlog-ticket-status-${ticket.id}`"
-                    </div>
+                                        class="text-label text-muted-foreground uppercase"
-
+                                    >
-                    <div class="grid min-w-0 gap-1.5">
+                                        Move to status
-                        <label
+                                    </label>
-                            for="backlog-priority"
+                                    <div
-                            class="text-caption font-semibold"
+                                        class="flex flex-col gap-2 sm:flex-row"
-                        >
+                                    >
-                            {{ t('backlog.filters.priority') }}
+                                        <select
-                        </label>
+                                            :id="`backlog-ticket-status-${ticket.id}`"
-                        <select
+                                            name="ticket_status_id"
-                            id="backlog-priority"
+                                            :disabled="
-                            v-model="filters.priorityId"
+                                                allowedTargetStatuses(ticket)
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                                    .length === 0 || processing
-                        >
+                                            "
-                            <option value="">
+                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-control min-w-0 flex-1 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                                {{ t('backlog.filters.allPriorities') }}
+                                        >
-                            </option>
+                                            <option
-                            <option
+                                                v-if="
-                                v-for="priority in ticketPriorities"
+                                                    allowedTargetStatuses(
-                                :key="priority.id"
+                                                        ticket,
-                                :value="priority.id"
+                                                    ).length === 0
-                            >
+                                                "
-                                {{ priority.name }}
+                                                value=""
-                            </option>
+                                            >
-                        </select>
+                                                No allowed moves
-                    </div>
+                                            </option>
-
+                                            <option
-                    <div class="grid min-w-0 gap-1.5">
+                                                v-for="ticketStatus in allowedTargetStatuses(
-                        <label
+                                                    ticket,
-                            for="backlog-status"
+                                                )"
-                            class="text-caption font-semibold"
+                                                :key="ticketStatus.id"
-                        >
+                                                :value="ticketStatus.id"
-                            {{ t('backlog.filters.status') }}
+                                            >
-                        </label>
+                                                {{
-                        <select
+                                                    ticketStatusLabel(
-                            id="backlog-status"
+                                                        ticketStatus,
-                            v-model="filters.statusId"
+                                                        'Unknown status',
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                                    )
-                        >
+                                                }}
-                            <option value="">
+                                            </option>
-                                {{ t('backlog.filters.allStatuses') }}
+                                        </select>
-                            </option>
+                                        <Button
-                            <option
+                                            type="submit"
-                                v-for="ticketStatus in backlogTicketStatuses"
+                                            size="sm"
-                                :key="ticketStatus.id"
+                                            :disabled="
-                                :value="ticketStatus.id"
+                                                processing ||
-                            >
+                                                allowedTargetStatuses(ticket)
-                                {{ ticketStatus.name }}
+                                                    .length === 0
-                            </option>
+                                            "
-                        </select>
+                                        >
-                    </div>
+                                            Move
-
+                                        </Button>
-                    <div class="grid min-w-0 gap-1.5">
+                                    </div>
-                        <label
+                                    <p
-                            for="backlog-assignee"
+                                        v-if="
-                            class="text-caption font-semibold"
+                                            allowedTargetStatuses(ticket)
-                        >
+                                                .length === 0
-                            {{ t('backlog.filters.assignee') }}
+                                        "
-                        </label>
+                                        class="text-caption text-muted-foreground"
-                        <select
+                                    >
-                            id="backlog-assignee"
+                                        This status does not allow moving
-                            v-model="filters.assigneeId"
+                                        anywhere else.
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                    </p>
-                        >
+                                </Form>
-                            <option value="">
+                            </template>
-                                {{ t('backlog.filters.allAssignees') }}
+                        </TicketListItem>
-                            </option>
+                    </ul>
-                            <option value="unassigned">
+                </CardContent>
-                                {{ t('tickets.unassigned') }}
+            </Card>
-                            </option>
-                            <option
-                                v-for="user in users"
-                                :key="user.id"
-                                :value="user.id"
-                            >
-                                {{ user.name }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-            </section>
-
-            <div
-                v-if="tickets.length === 0"
-                class="grid justify-items-start gap-3"
-            >
-                <FeedbackState
-                    state="empty"
-                    :title="t('backlog.empty.title')"
-                    :description="t('backlog.empty.description')"
-                />
-                <Button v-if="canCreateTickets" as-child size="sm">
-                    <Link
-                        :href="
-                            createTicket(
-                                { project: project.id },
-                                { query: { source: 'backlog' } },
-                            )
-                        "
-                    >
-                        <Plus aria-hidden="true" />
-                        {{ t('backlog.empty.action') }}
-                    </Link>
-                </Button>
-            </div>
-
-            <div
-                v-else-if="visibleTicketCount === 0"
-                class="grid justify-items-start gap-3"
-            >
-                <FeedbackState
-                    state="empty"
-                    :title="t('backlog.filters.empty.title')"
-                    :description="t('backlog.filters.empty.description')"
-                />
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    @click="clearFilters"
-                >
-                    <RotateCcw aria-hidden="true" />
-                    {{ t('backlog.filters.clear') }}
-                </Button>
-            </div>
-
-            <section
-                v-else
-                aria-labelledby="backlog-results-title"
-                class="grid min-w-0 gap-3"
-            >
-                <div
-                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-                >
-                    <div class="grid min-w-0 gap-1">
-                        <h2 id="backlog-results-title" class="text-title">
-                            {{ t('backlog.results.title') }}
-                        </h2>
-                        <p class="text-caption text-muted-foreground">
-                            {{
-                                t('backlog.results.count', {
-                                    count: visibleTicketCount,
-                                    total: tickets.length,
-                                })
-                            }}
-                        </p>
-                    </div>
-                    <Button
-                        v-if="expandableTicketIds.length > 0"
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        @click="toggleAllBranches"
-                    >
-                        <ChevronsUpDown
-                            v-if="allVisibleBranchesCollapsed"
-                            aria-hidden="true"
-                        />
-                        <ChevronsDownUp v-else aria-hidden="true" />
-                        {{
-                            t(
-                                allVisibleBranchesCollapsed
-                                    ? 'backlog.tree.expandAll'
-                                    : 'backlog.tree.collapseAll',
-                            )
-                        }}
-                    </Button>
-                </div>
-
-                <BacklogTicketTree
-                    :nodes="filteredTicketTree"
-                    :project-id="project.id"
-                    :can-edit-tickets="canEditTickets"
-                    :collapsed-ticket-ids="collapsedTicketIds"
-                    :pending-ticket-id="pendingTicketId"
-                    @toggle="toggleTicket"
-                    @move-start="pendingTicketId = $event"
-                    @move-finish="finishMove"
-                />
-            </section>
         </div>
     </AppLayout>
 </template>

resources/js/pages/projects/TicketCreate.vue

@@ -2,9 +2,8 @@
 import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
 import { computed, toRef, unref } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import Heading from '@/components/Heading.vue';
-import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
+import InputError from '@/components/InputError.vue';
-import { useLocalization } from '@/composables/useLocalization';
 import FormFeedback from '@/components/FormFeedback.vue';
 import { useFormProtection } from '@/composables/useFormProtection';
 import { Badge } from '@/components/ui/badge';
@@ -16,6 +15,8 @@ import {
     CardHeader,
     CardTitle,
 } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
 import {
     buildAcceptanceCriteria,
@@ -26,22 +27,20 @@ import { index as boardIndex } from '@/routes/projects/board';
 import { index, show } from '@/routes/projects/index';
 import { metadata as metadataSettings } from '@/routes/projects/settings';
 import type { BreadcrumbItem, ProjectTicketCreatePageProps } from '@/types';
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
 
 const props = defineProps<ProjectTicketCreatePageProps>();
-const { t } = useLocalization();
 
 const returnHref =
     props.source === 'board'
         ? boardIndex(props.project.id)
         : backlogIndex(props.project.id);
 const returnLabel =
-    props.source === 'board'
+    props.source === 'board' ? 'Back to board' : 'Back to backlog';
-        ? t('ticketForm.backToBoard')
-        : t('ticketForm.backToBacklog');
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
-        title: t('navigation.projects'),
+        title: 'Projects',
         href: index(),
     },
     {
@@ -49,26 +48,21 @@ const breadcrumbs: BreadcrumbItem[] = [
         href: show(props.project.id),
     },
     {
-        title:
+        title: props.source === 'board' ? 'Board' : 'Backlog',
-            props.source === 'board'
-                ? t('navigation.board')
-                : t('navigation.backlog'),
         href: returnHref,
     },
     {
-        title: t('ticketForm.create'),
+        title: 'Create ticket',
         href: ProjectTicketController.create({
             project: props.project.id,
         }),
     },
 ];
 
-const hasTicketMetadata = computed(
+const hasTicketMetadata =
-    () =>
+    props.ticketTypes.length > 0 &&
-        props.ticketTypes.length > 0 &&
+    props.ticketPriorities.length > 0 &&
-        props.ticketPriorities.length > 0 &&
+    props.ticketStatusOptions.length > 0;
-        props.ticketStatusOptions.length > 0,
-);
 
 const draftKey = `projects:${props.project.id}:tickets:create`;
 const acceptanceCriteriaDraft = useRemember(
@@ -96,19 +90,9 @@ const form = useForm(draftKey, {
     title: '',
 });
 
-const isDirty = computed(
+const protection = useFormProtection(form, {
-    () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
+    isDirty: () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
-);
+});
-const protection = useFormProtection(form, { isDirty: () => isDirty.value });
-const reset = (): void => {
-    if (form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.reset();
-    form.clearErrors();
-    acceptanceCriteriaChecklist.value = '';
-    protection.clearFeedback();
-};
 
 const acceptanceCriteriaPreviewItems = computed(() =>
     parseChecklistLines(acceptanceCriteriaChecklist.value),
@@ -125,9 +109,6 @@ const acceptanceCriteriaError = computed(() => {
 });
 
 const submit = (): void => {
-    if (!hasTicketMetadata.value || form.processing) {
-        return;
-    }
     form.acceptance_criteria = buildAcceptanceCriteria(
         acceptanceCriteriaChecklist.value,
     );
@@ -136,22 +117,31 @@ const submit = (): void => {
         ProjectTicketController.store({ project: props.project.id }),
         {
             preserveScroll: true,
-            onSuccess: () => {
-                form.reset();
-                acceptanceCriteriaChecklist.value = '';
-            },
         },
     );
 };
+
+const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
+    if (
+        ticketStatus.board_column === null ||
+        ticketStatus.board_column === undefined
+    ) {
+        return ticketStatus.name;
+    }
+
+    if (ticketStatus.board_column.name === ticketStatus.name) {
+        return ticketStatus.name;
+    }
+
+    return `${ticketStatus.board_column.name} / ${ticketStatus.name}`;
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('ticketForm.pageTitle', { project: project.name })" />
+        <Head :title="`Create ${project.name} ticket`" />
 
-        <div
+        <div class="flex flex-1 flex-col gap-6 p-4">
-            class="mx-auto flex w-full min-w-0 max-w-5xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8"
-        >
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -159,16 +149,10 @@ const submit = (): void => {
                     <Badge variant="outline" class="px-3 py-1">
                         {{ project.key }}
                     </Badge>
-                    <h1 class="text-headline font-semibold tracking-tight">
+                    <Heading
-                        {{ t('ticketForm.create') }}
+                        title="Create ticket"
-                    </h1>
+                        :description="`Add a ticket to ${project.name}.`"
-                    <p class="text-muted-foreground text-sm">
+                    />
-                        {{
-                            t('ticketForm.createDescription', {
-                                project: project.name,
-                            })
-                        }}
-                    </p>
                 </div>
 
                 <div class="flex flex-wrap gap-3">
@@ -176,9 +160,7 @@ const submit = (): void => {
                         <Link :href="returnHref">{{ returnLabel }}</Link>
                     </Button>
                     <Button as-child variant="outline">
-                        <Link :href="show(project.id)">{{
+                        <Link :href="show(project.id)">Back to project</Link>
-                            t('ticketDetail.backToProject')
-                        }}</Link>
                     </Button>
                 </div>
             </div>
@@ -192,9 +174,9 @@ const submit = (): void => {
 
             <Card v-if="hasTicketMetadata">
                 <CardHeader>
-                    <CardTitle>{{ t('ticketForm.details') }}</CardTitle>
+                    <CardTitle>Ticket details</CardTitle>
                     <CardDescription>
-                        {{ t('ticketForm.keyAssigned') }}
+                        The ticket key is assigned after creation.
                     </CardDescription>
                 </CardHeader>
 
@@ -204,93 +186,258 @@ const submit = (): void => {
                             :state="protection.state.value"
                             @retry="submit"
                         />
-                        <TicketFormFields
+                        <div class="grid gap-2">
-                            v-model:title="form.title"
+                            <Label for="title">Title</Label>
-                            v-model:description="form.description"
+                            <Input
-                            v-model:type="form.ticket_type_id"
+                                id="title"
-                            v-model:priority="form.ticket_priority_id"
+                                v-model="form.title"
-                            v-model:status="form.ticket_status_id"
+                                :invalid="Boolean(form.errors.title)"
-                            v-model:assignee="form.assignee_user_id"
+                                aria-describedby="title-error"
-                            v-model:parent="form.parent_ticket_id"
+                                required
-                            v-model:points="form.story_points"
+                                autofocus
-                            :project="project"
+                                :disabled="form.processing"
-                            :ticket-types="ticketTypes"
+                                placeholder="Implement repository sync"
-                            :ticket-priorities="ticketPriorities"
+                            />
-                            :ticket-status-options="ticketStatusOptions"
+                            <InputError
-                            :users="users"
+                                id="title-error"
-                            :parent-ticket-options="parentTicketOptions"
+                                :message="form.errors.title"
-                            :errors="form.errors"
+                            />
-                            :disabled="form.processing"
+                        </div>
-                            autofocus
+
-                        >
-                            <template #content>
-                                <TicketFormField
-                                    id="acceptance_criteria_checklist"
-                                    v-model="acceptanceCriteriaChecklist"
-                                    kind="textarea"
-                                    :label="t('ticketDetail.checklistEditor')"
-                                    :hint="t('ticketForm.checklistHelp')"
-                                    :placeholder="
-                                        t('ticketDetail.checklistPlaceholder')
-                                    "
-                                    :error="acceptanceCriteriaError"
-                                    :disabled="form.processing"
-                                />
-                                <div
-                                    v-if="acceptanceCriteriaPreviewItems.length"
-                                    class="bg-muted/30 min-w-0 rounded-xl border p-4 text-sm"
-                                >
-                                    <p class="mb-3 font-medium">
-                                        {{ t('ticketForm.checklistPreview') }}
-                                    </p>
-                                    <ul class="space-y-2">
-                                        <li
-                                            v-for="(
-                                                item, index
-                                            ) in acceptanceCriteriaPreviewItems"
-                                            :key="index"
-                                            :style="{
-                                                marginInlineStart: `${item.indent * 0.75}rem`,
-                                            }"
-                                            class="flex min-w-0 items-start gap-2"
-                                        >
-                                            <span aria-hidden="true">{{
-                                                item.checked ? '☑' : '☐'
-                                            }}</span>
-                                            <span
-                                                class="wrap-anywhere min-w-0"
-                                                >{{ item.text }}</span
-                                            >
-                                        </li>
-                                    </ul>
-                                </div>
-                            </template>
-                        </TicketFormFields>
                         <div
-                            class="flex flex-wrap items-center gap-3 border-t pt-5"
+                            class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]"
                         >
-                            <Button type="submit" :disabled="form.processing">{{
+                            <div class="grid gap-6">
-                                form.processing
+                                <div class="grid gap-2">
-                                    ? t('ticketForm.creating')
+                                    <Label for="description">Description</Label>
-                                    : t('ticketForm.create')
+                                    <textarea
-                            }}</Button>
+                                        id="description"
-                            <Button
+                                        v-model="form.description"
-                                type="button"
+                                        rows="4"
-                                variant="outline"
+                                        :disabled="form.processing"
-                                :disabled="form.processing || !isDirty"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                                @click="reset"
+                                        placeholder="Describe the expected behavior and relevant context."
-                                >{{ t('ticketForm.reset') }}</Button
+                                    />
-                            >
+                                    <InputError
-                            <p
+                                        :message="form.errors.description"
-                                role="status"
+                                    />
-                                class="text-muted-foreground text-sm"
+                                </div>
-                            >
+
-                                {{
+                                <div class="grid gap-4">
-                                    isDirty
+                                    <div class="grid gap-2">
-                                        ? t('ticketForm.unsaved')
+                                        <Label
-                                        : t('ticketForm.ready')
+                                            for="acceptance_criteria_checklist"
-                                }}
+                                        >
-                            </p>
+                                            Acceptance criteria checklist
+                                        </Label>
+                                        <textarea
+                                            id="acceptance_criteria_checklist"
+                                            v-model="
+                                                acceptanceCriteriaChecklist
+                                            "
+                                            rows="6"
+                                            :disabled="form.processing"
+                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                            placeholder="[ ] User can sign in&#10;  [x] Validation is shown for invalid credentials"
+                                        />
+                                        <p
+                                            class="text-muted-foreground text-xs"
+                                        >
+                                            Use <code>[ ]</code> /
+                                            <code>[x]</code> for checklist
+                                            items. Indent with two spaces for
+                                            nested steps.
+                                        </p>
+                                        <InputError
+                                            :message="acceptanceCriteriaError"
+                                        />
+                                    </div>
+
+                                    <div
+                                        v-if="
+                                            acceptanceCriteriaPreviewItems.length >
+                                            0
+                                        "
+                                        class="border-border rounded-xl border p-4 text-sm"
+                                    >
+                                        <p class="mb-3 font-medium">
+                                            Checklist preview
+                                        </p>
+                                        <ul class="space-y-2">
+                                            <li
+                                                v-for="(
+                                                    item, index
+                                                ) in acceptanceCriteriaPreviewItems"
+                                                :key="index"
+                                                :style="{
+                                                    marginLeft: `${item.indent * 1.25}rem`,
+                                                }"
+                                                class="flex items-start gap-2"
+                                            >
+                                                <span class="mt-0.5">{{
+                                                    item.checked ? '☑' : '☐'
+                                                }}</span>
+                                                <span>{{ item.text }}</span>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="grid h-fit gap-6">
+                                <div class="grid gap-2">
+                                    <Label for="ticket_type_id">Type</Label>
+                                    <select
+                                        id="ticket_type_id"
+                                        v-model="form.ticket_type_id"
+                                        :disabled="form.processing"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <option
+                                            v-for="ticketType in ticketTypes"
+                                            :key="ticketType.id"
+                                            :value="String(ticketType.id)"
+                                        >
+                                            {{ ticketType.name }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="form.errors.ticket_type_id"
+                                    />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label for="ticket_priority_id">
+                                        Priority
+                                    </Label>
+                                    <select
+                                        id="ticket_priority_id"
+                                        v-model="form.ticket_priority_id"
+                                        :disabled="form.processing"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <option
+                                            v-for="ticketPriority in ticketPriorities"
+                                            :key="ticketPriority.id"
+                                            :value="String(ticketPriority.id)"
+                                        >
+                                            {{ ticketPriority.name }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="
+                                            form.errors.ticket_priority_id
+                                        "
+                                    />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label for="ticket_status_id">Status</Label>
+                                    <select
+                                        id="ticket_status_id"
+                                        v-model="form.ticket_status_id"
+                                        :disabled="form.processing"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <option
+                                            v-for="ticketStatus in ticketStatusOptions"
+                                            :key="ticketStatus.id"
+                                            :value="String(ticketStatus.id)"
+                                        >
+                                            {{
+                                                ticketStatusLabel(ticketStatus)
+                                            }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="form.errors.ticket_status_id"
+                                    />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label for="assignee_user_id">
+                                        Assignee
+                                    </Label>
+                                    <select
+                                        id="assignee_user_id"
+                                        v-model="form.assignee_user_id"
+                                        :disabled="form.processing"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <option value="">Unassigned</option>
+                                        <option
+                                            v-for="user in users"
+                                            :key="user.id"
+                                            :value="String(user.id)"
+                                        >
+                                            {{ user.name }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="form.errors.assignee_user_id"
+                                    />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label for="parent_ticket_id">
+                                        Parent ticket
+                                    </Label>
+                                    <select
+                                        id="parent_ticket_id"
+                                        v-model="form.parent_ticket_id"
+                                        :disabled="form.processing"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <option value="">
+                                            No parent ticket
+                                        </option>
+                                        <option
+                                            v-for="parentTicketOption in parentTicketOptions"
+                                            :key="parentTicketOption.id"
+                                            :value="
+                                                String(parentTicketOption.id)
+                                            "
+                                        >
+                                            {{
+                                                `${parentTicketOption.ticket_key} - ${parentTicketOption.title}`
+                                            }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="form.errors.parent_ticket_id"
+                                    />
+                                </div>
+
+                                <div
+                                    v-if="project.show_story_points"
+                                    class="grid gap-2"
+                                >
+                                    <Label for="story_points">
+                                        Estimated story points
+                                    </Label>
+                                    <Input
+                                        id="story_points"
+                                        v-model="form.story_points"
+                                        type="number"
+                                        step="1"
+                                        :disabled="form.processing"
+                                    />
+                                    <InputError
+                                        :message="form.errors.story_points"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="flex flex-wrap items-center gap-3">
+                            <Button type="submit" :disabled="form.processing">
+                                Create ticket
+                            </Button>
+                            <Button as-child variant="outline">
+                                <Link :href="returnHref">
+                                    {{ returnLabel }}
+                                </Link>
+                            </Button>
                         </div>
                     </form>
                 </CardContent>
@@ -299,12 +446,13 @@ const submit = (): void => {
             <Card v-else>
                 <CardContent class="flex flex-col gap-4 p-6 text-sm">
                     <p class="text-muted-foreground">
-                        {{ t('ticketForm.metadataRequired') }}
+                        Ticket creation needs at least one type, one priority,
+                        and one status.
                     </p>
                     <div>
                         <Button as-child variant="outline">
                             <Link :href="metadataSettings(project.id)">
-                                {{ t('ticketForm.openSettings') }}
+                                Open ticket settings
                             </Link>
                         </Button>
                     </div>

resources/js/types/backlog.ts

@@ -1,31 +0,0 @@
-import type { TicketModel } from '@/types/models/ticket-model';
-
-export type BacklogAssigneeFilter = '' | 'unassigned' | number;
-
-export type BacklogFilterState = {
-    assigneeId: BacklogAssigneeFilter;
-    priorityId: '' | number;
-    query: string;
-    statusId: '' | number;
-    typeId: '' | number;
-};
-
-export type BacklogTicketTreeNode = {
-    children: BacklogTicketTreeNode[];
-    matchesFilters: boolean;
-    ticket: TicketModel;
-};
-
-export type BacklogTicketTreeProps = {
-    canEditTickets: boolean;
-    collapsedTicketIds: Set<number>;
-    nodes: BacklogTicketTreeNode[];
-    pendingTicketId: number | null;
-    projectId: number;
-};
-
-export type BacklogTicketTreeEmits = {
-    moveFinish: [ticketId: number];
-    moveStart: [ticketId: number];
-    toggle: [ticketId: number];
-};

resources/js/types/index.ts

@@ -1,6 +1,4 @@
 export * from './auth';
-export * from './backlog';
 export * from './navigation';
 export * from './page-props';
-export * from './ticket-tree';
 export * from './ui';

resources/js/types/ticket-presentation.ts

@@ -1,7 +1,6 @@
 import type { TicketModel } from '@/types/models/ticket-model';
 
 export type TicketPresentationProps = {
-    layout?: 'card' | 'list';
     projectId: number;
     showDescription?: boolean;
     showStatus?: boolean;

resources/js/types/ticket-tree.ts

@@ -1,6 +0,0 @@
-import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
-
-export type TicketTreeListProps = {
-    nodes: TicketTreeNodeModel[];
-    projectId: number;
-};

tests/Feature/Projects/ProjectBacklogTest.php

@@ -71,110 +71,6 @@ class ProjectBacklogTest extends TestCase
             );
     }
 
-    /**
-     * Ensure the backlog payload supports nested tickets and their allowed status moves.
-     */
-    public function test_backlog_includes_nested_tickets_and_allowed_status_moves(): void
-    {
-        $editor = User::factory()->create();
-        $project = Project::factory()->create([
-            'key' => 'TREE',
-        ]);
-
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-
-        $backlogStatus = $project->ticketStatuses()
-            ->whereNull('board_column_id')
-            ->firstOrFail();
-        $boardColumn = BoardColumn::factory()->for($project)->create([
-            'name' => 'Todo',
-            'position' => 1,
-        ]);
-        $boardStatus = TicketStatus::factory()
-            ->for($project)
-            ->for($boardColumn)
-            ->create([
-                'name' => 'Ready',
-                'position' => 1,
-            ]);
-        $backlogStatus->allowedTargetStatuses()->sync([$boardStatus->id]);
-
-        $parentType = $project->ticketTypes()
-            ->where('is_parent', true)
-            ->firstOrFail();
-        $taskType = $project->ticketTypes()
-            ->where('is_parent', false)
-            ->firstOrFail();
-        $priority = $project->ticketPriorities()->firstOrFail();
-
-        $parentTicket = Ticket::factory()->create([
-            'project_id' => $project->id,
-            'sequence_number' => 1,
-            'ticket_key' => 'TREE-1',
-            'ticket_priority_id' => $priority->id,
-            'ticket_status_id' => $backlogStatus->id,
-            'ticket_type_id' => $parentType->id,
-            'title' => 'Parent ticket',
-        ]);
-        $childTicket = Ticket::factory()->create([
-            'parent_ticket_id' => $parentTicket->id,
-            'project_id' => $project->id,
-            'sequence_number' => 2,
-            'ticket_key' => 'TREE-2',
-            'ticket_priority_id' => $priority->id,
-            'ticket_status_id' => $backlogStatus->id,
-            'ticket_type_id' => $taskType->id,
-            'title' => 'Child ticket',
-        ]);
-
-        $this->syncProjectPermissions($project, $editor, ['edit', 'view']);
-
-        $this->actingAs($editor)
-            ->get(route('projects.backlog.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Backlog')
-                ->where('canEditTickets', true)
-                ->has('tickets', 2)
-                ->where('tickets.0.id', $childTicket->id)
-                ->where('tickets.0.parent_ticket_id', $parentTicket->id)
-                ->where('tickets.0.ticket_status.allowed_target_statuses.0.id', $boardStatus->id)
-                ->where('tickets.1.id', $parentTicket->id)
-                ->where('tickets.1.parent_ticket_id', null)
-                ->where('tickets.1.ticket_status.allowed_target_statuses.0.id', $boardStatus->id),
-            );
-
-        $this->assertDatabaseHas('tickets', [
-            'id' => $parentTicket->id,
-            'ticket_status_id' => $backlogStatus->id,
-        ]);
-        $this->assertDatabaseHas('tickets', [
-            'id' => $childTicket->id,
-            'parent_ticket_id' => $parentTicket->id,
-            'ticket_status_id' => $backlogStatus->id,
-        ]);
-    }
-
-    /**
-     * Ensure projects without backlog tickets receive an empty collection.
-     */
-    public function test_projects_without_backlog_tickets_receive_an_empty_collection(): void
-    {
-        $viewer = User::factory()->create();
-        $project = Project::factory()->create();
-
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-        $this->syncProjectPermissions($project, $viewer, ['view']);
-
-        $this->actingAs($viewer)
-            ->get(route('projects.backlog.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Backlog')
-                ->where('tickets', []),
-            );
-    }
-
     /**
      * Ensure creating tickets requires the project write permission.
      */

tests/Feature/Projects/ProjectTicketControllerTest.php

@@ -1511,74 +1511,6 @@ class ProjectTicketControllerTest extends TestCase
         ]);
     }
 
-    public function test_read_only_users_cannot_open_or_submit_the_ticket_create_form(): void
-    {
-        $viewer = User::factory()->create();
-        $project = Project::factory()->create();
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-        $this->syncProjectPermissions($project, $viewer, ['view']);
-
-        $this->actingAs($viewer)
-            ->get(route('projects.tickets.create', $project))
-            ->assertForbidden();
-
-        $this->post(route('projects.tickets.store', $project), [
-            'title' => 'Unauthorized ticket',
-            'ticket_type_id' => $this->nonParentType($project)->id,
-            'ticket_priority_id' => $project->ticketPriorities()->firstOrFail()->id,
-            'ticket_status_id' => $project->ticketStatuses()->firstOrFail()->id,
-        ])->assertForbidden();
-
-        $this->assertDatabaseCount('tickets', 0);
-    }
-
-    public function test_ticket_forms_reject_metadata_from_another_project(): void
-    {
-        $editor = User::factory()->create();
-        $project = Project::factory()->create();
-        $otherProject = Project::factory()->create();
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-        app(InitializeProjectTicketMetadata::class)->handle($otherProject);
-        $this->syncProjectPermissions($project, $editor, ['write', 'view']);
-        $parent = Ticket::factory()->create([
-            'project_id' => $otherProject->id,
-            'ticket_key' => 'OTHER-1',
-            'ticket_type_id' => $this->parentType($otherProject)->id,
-            'ticket_priority_id' => $otherProject->ticketPriorities()->firstOrFail()->id,
-        ]);
-        $invalidMetadata = [
-            'parent_ticket_id' => $parent->id,
-            'ticket_type_id' => $this->nonParentType($otherProject)->id,
-            'ticket_priority_id' => $otherProject->ticketPriorities()->firstOrFail()->id,
-        ];
-
-        $this->actingAs($editor)
-            ->post(route('projects.tickets.store', $project), [
-                ...$invalidMetadata,
-                'title' => 'Rejected creation',
-                'ticket_status_id' => $otherProject->ticketStatuses()->firstOrFail()->id,
-            ])
-            ->assertSessionHasErrors([...array_keys($invalidMetadata), 'ticket_status_id']);
-
-        $this->assertSame(0, $project->tickets()->count());
-
-        $ticket = Ticket::factory()->create([
-            'project_id' => $project->id,
-            'ticket_key' => 'LOCAL-1',
-            'ticket_type_id' => $this->nonParentType($project)->id,
-            'ticket_priority_id' => $project->ticketPriorities()->firstOrFail()->id,
-            'title' => 'Original title',
-        ]);
-
-        $this->patch(route('projects.tickets.update', [$project, $ticket]), $this->updatePayload($ticket, [
-            ...$invalidMetadata,
-            'title' => 'Rejected update',
-        ]))->assertSessionHasErrors(array_keys($invalidMetadata));
-
-        $this->assertSame('Original title', $ticket->fresh()->title);
-        $this->assertNull($ticket->fresh()->parent_ticket_id);
-    }
-
     private function nonParentType(Project $project): TicketType
     {
         return $project->ticketTypes()

tests/Fixtures/ticket-detail-preview.mjs

@@ -2,17 +2,14 @@ import { createApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import '../../resources/css/app.css';
 import Ticket from '../../resources/js/pages/projects/Ticket.vue';
-import TicketCreate from '../../resources/js/pages/projects/TicketCreate.vue';
 import { createAppearance } from '../../resources/js/composables/useAppearance';
 import { createLocalization } from '../../resources/js/lib/localization';
 
 createInertiaApp({
     resolve: (name) =>
-        name === 'TicketCreate'
+        name === 'Ticket'
-            ? TicketCreate
+            ? Ticket
-            : name === 'Ticket'
+            : { render: () => h('h1', 'Destination reached') },
-              ? Ticket
-              : { render: () => h('h1', 'Destination reached') },
     setup: ({ el, App, props, plugin }) =>
         createApp({ render: () => h(App, props) })
             .use(plugin)

tests/Fixtures/ticket-detail.mjs

@@ -123,13 +123,10 @@ const fieldDefinitions = [
     { id: 1, label: 'Impact score', field_type: 'number' },
     { id: 2, label: 'Reviewer', field_type: 'user' },
 ];
-let savedForm = {};
 function makePage(url) {
     const parsed = new URL(url, 'http://localhost');
     const params = parsed.searchParams;
-    const creating = parsed.pathname.endsWith('/create');
+    const detail = parsed.pathname.startsWith('/projects/7/tickets/');
-    const detail =
-        !creating && parsed.pathname.startsWith('/projects/7/tickets/');
     const data = structuredClone(ticket);
     if (parsed.pathname.endsWith('/41')) {
         Object.assign(data, linked, {
@@ -139,7 +136,7 @@ function makePage(url) {
         });
     }
     if (params.has('saved')) {
-        Object.assign(data, savedForm, { title: params.get('saved') });
+        data.title = params.get('saved');
     }
     if (params.has('long')) {
         data.title = 'LongUnbrokenTicketTitle'.repeat(10);
@@ -171,11 +168,7 @@ function makePage(url) {
         ? 'Repository temporarily unavailable.'
         : null;
     return {
-        component: creating
+        component: detail ? 'Ticket' : 'Destination',
-            ? 'TicketCreate'
-            : detail
-              ? 'Ticket'
-              : 'Destination',
         url,
         version: null,
         clearHistory: false,
@@ -183,28 +176,7 @@ function makePage(url) {
         props: {
             name: 'KanbanGit',
             errors: params.has('rejected')
-                ? {
+                ? { title: 'This title is not allowed.' }
-                      title: 'This title is not allowed.',
-                      ...(params.has('allErrors')
-                          ? {
-                                description: 'Invalid description.',
-                                ticket_type_id: 'Invalid type.',
-                                ticket_priority_id: 'Invalid priority.',
-                                ticket_status_id: 'Invalid status.',
-                                assignee_user_id: 'Invalid assignee.',
-                                author_user_id: 'Invalid author.',
-                                parent_ticket_id: 'Invalid parent.',
-                                story_points: 'Invalid points.',
-                                'acceptance_criteria.0.text':
-                                    'Invalid checklist.',
-                                blocked_comment: 'Invalid blocker.',
-                                'field_values.0.value_number':
-                                    'Invalid number.',
-                                'field_values.1.value_user_id':
-                                    'Invalid reviewer.',
-                            }
-                          : {}),
-                  }
                 : {},
             sidebarOpen: true,
             auth: {
@@ -232,17 +204,7 @@ function makePage(url) {
             canManageProject: params.has('admin'),
             status: params.has('saved') ? 'Ticket updated.' : null,
             users: [user, ticket.author],
-            ticketTypes: params.has('noMetadata') ? [] : [data.ticket_type],
+            ticketTypes: [data.ticket_type],
-            source: params.get('source') === 'board' ? 'board' : 'backlog',
-            defaultTicketStatusId: 3,
-            ticketStatusOptions: [
-                {
-                    id: 3,
-                    name: 'In progress',
-                    board_column: { name: 'Delivery' },
-                },
-                { id: 4, name: 'Backlog', board_column: null },
-            ],
             ticketPriorities: [data.ticket_priority],
             ticketFieldDefinitions: params.has('empty') ? [] : fieldDefinitions,
             parentTicketOptions: [parent],
@@ -320,11 +282,6 @@ if (serve) {
             const data = JSON.parse(body);
             const previous = new URL(request.headers.referer);
             const params = previous.searchParams;
-            if (params.has('serverError')) {
-                response.writeHead(503);
-                response.end('Simulated failure');
-                return;
-            }
             if (!request.headers['x-inertia']) {
                 assert.equal(request.method, 'PATCH');
                 assert.equal(request.url, '/projects/7/tickets/42');
@@ -354,19 +311,18 @@ if (serve) {
                 );
             } else {
                 assert.ok(
-                    (request.method === 'POST' || 'field_values' in data) &&
+                    'field_values' in data &&
                         'acceptance_criteria' in data &&
                         'parent_ticket_id' in data,
                 );
                 if (params.has('reject')) {
                     params.set('rejected', '1');
                 } else {
-                    savedForm = data;
                     params.set('saved', data.title);
                 }
             }
             response.writeHead(303, {
-                Location: `${params.has('rejected') && previous.pathname.endsWith('/create') ? previous.pathname : '/projects/7/tickets/42'}?${params}`,
+                Location: `/projects/7/tickets/42?${params}`,
             });
             response.end();
             return;
@@ -408,15 +364,10 @@ if (serve) {
         const { default: Ticket } = await server.ssrLoadModule(
             '/resources/js/pages/projects/Ticket.vue',
         );
-        const { default: TicketCreate } = await server.ssrLoadModule(
+        const render = async (query = '') => {
-            '/resources/js/pages/projects/TicketCreate.vue',
-        );
-        const render = async (query = '', creating = false) => {
             const result = await createInertiaApp({
-                page: makePage(
+                page: makePage(`/projects/7/tickets/42${query}`),
-                    `/projects/7/tickets/${creating ? 'create' : '42'}${query}`,
+                resolve: () => Ticket,
-                ),
-                resolve: () => (creating ? TicketCreate : Ticket),
                 render: renderToString,
                 setup: ({ App, props, plugin }) =>
                     createSSRApp({ render: () => h(App, props) })
@@ -522,37 +473,6 @@ if (serve) {
             await render('?gitError'),
             /Repository temporarily unavailable/,
         );
-        const create = await render('?source=board', true);
-        assert.match(create, /Create ticket/);
-        assert.match(create, /Delivery \/ In progress/);
-        assert.match(create, /Back to board/);
-        assert.match(create, /id="ticket_status_id"/);
-        assert.doesNotMatch(
-            create,
-            /id="author_user_id"|id="blocked_comment"|id="field-1"/,
-        );
-        assert.doesNotMatch(
-            await render('?hidePoints', true),
-            /id="story_points"/,
-        );
-        const unavailable = await render('?noMetadata', true);
-        assert.doesNotMatch(unavailable, /<form/);
-        assert.match(unavailable, /Ticket creation needs at least one type/);
-        for (const creating of [false, true]) {
-            const invalid = await render('?rejected&allErrors', creating);
-            for (const id of [
-                'title',
-                'description',
-                'ticket_type_id',
-                'ticket_priority_id',
-                'assignee_user_id',
-                'parent_ticket_id',
-                'story_points',
-                'acceptance_criteria_checklist',
-            ]) {
-                assert.ok(invalid.includes(`id="${id}-error"`));
-            }
-        }
         console.log('Ticket detail behavior checks passed.');
     } finally {
         await server.close();

tests/Fixtures/ticket-forms-browser.mjs

@@ -1,269 +0,0 @@
-import assert from 'node:assert/strict';
-import process from 'node:process';
-
-const { chromium } = await import(
-    process.env.PLAYWRIGHT_MODULE ?? 'playwright'
-);
-const browser = await chromium.launch({ channel: 'chrome', headless: true });
-const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
-page.setDefaultTimeout(10000);
-const base = 'http://127.0.0.1:4185/projects/7/tickets';
-const errors = [];
-page.on('pageerror', (error) => errors.push(error.message));
-const field = (label) => page.getByLabel(label, { exact: true });
-const form = () => page.locator('form').first();
-const state = (value) =>
-    form().locator(`[data-form-state="${value}"]`).waitFor();
-const button = (label) =>
-    form().getByRole('button', { name: label, exact: true });
-async function visit(create, query = '') {
-    await page.goto(`${base}/${create ? 'create' : '42'}${query}`);
-    await page.getByRole('heading', { level: 1 }).waitFor();
-    if (!create) {
-        await page.locator('#ticket-edit > summary').click();
-    }
-}
-async function fill(create) {
-    await field('Title').fill('A complete ticket');
-    await field('Description').fill('Description with context.');
-    await field('Assignee').selectOption('2');
-    await field('Parent ticket').selectOption('40');
-    await field('Estimated story points').fill('0');
-    await field('Acceptance criteria checklist').fill(
-        '[ ] Main criterion\n  [x] Nested criterion',
-    );
-    if (create) {
-        await field('Status').selectOption('4');
-    } else {
-        await field('Author').selectOption('1');
-        await field('Blocker comment').fill('Waiting for review');
-        await field('Impact score').fill('2.5');
-        await field('Reviewer').selectOption('2');
-    }
-}
-async function submit(create) {
-    const request = page.waitForRequest(
-        (r) =>
-            r.method() === (create ? 'POST' : 'PATCH') &&
-            r.url().split('?')[0] === (create ? base : `${base}/42`),
-    );
-    await button(create ? 'Create ticket' : 'Save changes').click();
-    return (await request).postDataJSON();
-}
-try {
-    for (const create of [true, false]) {
-        for (const width of [1440, 390, 320]) {
-            await page.setViewportSize({ width, height: 1000 });
-            for (const theme of ['light', 'dark']) {
-                await page.emulateMedia({
-                    colorScheme: theme,
-                    reducedMotion: 'reduce',
-                });
-                await visit(create, '?admin');
-                assert.equal(
-                    await page
-                        .locator('html')
-                        .evaluate((el) => el.classList.contains('dark')),
-                    theme === 'dark',
-                );
-                assert.equal(
-                    await page.evaluate(
-                        () =>
-                            document.documentElement.scrollWidth <= innerWidth,
-                    ),
-                    true,
-                    `Overflow ${create}/${width}/${theme}`,
-                );
-                await field('Title').focus();
-                await page.keyboard.press('Tab');
-                assert.equal(
-                    await field('Description').evaluate(
-                        (el) =>
-                            el === document.activeElement &&
-                            el.matches(':focus-visible'),
-                    ),
-                    true,
-                );
-                await fill(create);
-                await page.screenshot({
-                    path: `/private/tmp/kan31-${create ? 'create' : 'edit'}-${width}-${theme}.png`,
-                    fullPage: true,
-                });
-                page.once('dialog', (dialog) => dialog.dismiss());
-                await button('Discard changes').click();
-                assert.equal(
-                    await field('Title').inputValue(),
-                    'A complete ticket',
-                );
-                page.once('dialog', (dialog) => dialog.accept());
-                await button('Discard changes').click();
-                assert.equal(
-                    await button('Discard changes').isDisabled(),
-                    true,
-                );
-                assert.equal(
-                    await field('Title').inputValue(),
-                    create
-                        ? ''
-                        : 'Implement a resilient caching layer for the project API',
-                );
-            }
-        }
-        await visit(create, '?admin&reject&allErrors');
-        await fill(create);
-        const data = await submit(create);
-        assert.equal(data.title, 'A complete ticket');
-        assert.equal(data.description, 'Description with context.');
-        assert.equal(Number(data.ticket_type_id), 1);
-        assert.equal(Number(data.ticket_priority_id), 2);
-        assert.equal(Number(data.assignee_user_id), 2);
-        assert.equal(Number(data.parent_ticket_id), 40);
-        assert.equal(Number(data.story_points), 0);
-        assert.deepEqual(
-            data.acceptance_criteria.map(({ text, checked, indent }) => ({
-                text,
-                checked,
-                indent,
-            })),
-            [
-                { text: 'Main criterion', checked: false, indent: 0 },
-                { text: 'Nested criterion', checked: true, indent: 1 },
-            ],
-        );
-        if (create) {
-            assert.equal(Number(data.ticket_status_id), 4);
-            assert.equal('author_user_id' in data, false);
-        } else {
-            assert.equal(Number(data.author_user_id), 1);
-            assert.equal(data.is_blocked, true);
-            assert.equal(data.blocked_comment, 'Waiting for review');
-            assert.equal(Number(data.field_values[0].value_number), 2.5);
-            assert.equal(Number(data.field_values[1].value_user_id), 2);
-            assert.deepEqual(
-                data.acceptance_criteria.map((item) => item.id),
-                [10, 11],
-            );
-            assert.equal('ticket_status_id' in data, false);
-        }
-        await state('validation');
-        const fields = [
-            'Title',
-            'Description',
-            'Type',
-            'Priority',
-            'Assignee',
-            'Parent ticket',
-            'Estimated story points',
-            'Acceptance criteria checklist',
-            ...(create
-                ? ['Status']
-                : ['Author', 'Blocker comment', 'Impact score', 'Reviewer']),
-        ];
-        for (const label of fields) {
-            const control = field(label);
-            assert.equal(
-                await control.getAttribute('aria-invalid'),
-                'true',
-                label,
-            );
-            const errorId = (await control.getAttribute('aria-describedby'))
-                .split(' ')
-                .at(-1);
-            assert.ok(
-                (await page.locator(`[id="${errorId}"]`).innerText()).length,
-                `Missing associated error: ${label}`,
-            );
-        }
-        assert.equal(await field('Title').inputValue(), 'A complete ticket');
-        await page.route(create ? `${base}` : `${base}/42`, (route) =>
-            route.abort('failed'),
-        );
-        await button(create ? 'Create ticket' : 'Save changes').click();
-        await state('network');
-        assert.equal(
-            await field('Description').inputValue(),
-            'Description with context.',
-        );
-        await page.unrouteAll();
-        await visit(create, '?admin&serverError');
-        await fill(create);
-        await submit(create);
-        await state('server');
-        assert.equal(await field('Title').inputValue(), 'A complete ticket');
-        let pending;
-        let requests = 0;
-        await page.route(create ? `${base}` : `${base}/42`, (route) => {
-            requests++;
-            pending = route;
-        });
-        await button('Try again').click();
-        await state('loading');
-        assert.equal(await field('Title').isDisabled(), true);
-        assert.equal(
-            await button(
-                create ? 'Creating ticket…' : 'Saving changes…',
-            ).isDisabled(),
-            true,
-        );
-        await form().evaluate((el) =>
-            el.dispatchEvent(
-                new Event('submit', { bubbles: true, cancelable: true }),
-            ),
-        );
-        assert.equal(requests, 1);
-        await pending.abort();
-        await state('network');
-        await page.unrouteAll();
-        await visit(create, '?admin');
-        await fill(create);
-        page.once('dialog', (dialog) => dialog.dismiss());
-        await page
-            .locator('#main-content')
-            .getByRole('link', {
-                name: create ? 'Back to backlog' : 'Open backlog',
-                exact: true,
-            })
-            .click();
-        assert.ok(page.url().includes('/tickets/'));
-        const successData = await submit(create);
-        await page
-            .getByRole('heading', { name: successData.title, exact: true })
-            .waitFor();
-        if (create) {
-            await page.goBack();
-            await field('Title').waitFor();
-            assert.equal(await field('Title').inputValue(), '');
-            assert.equal(
-                await field('Acceptance criteria checklist').inputValue(),
-                '',
-            );
-        } else {
-            await form()
-                .getByText('All changes saved', { exact: true })
-                .waitFor();
-            await field('Title').fill('Another draft');
-            page.once('dialog', (dialog) => dialog.accept());
-            await button('Discard changes').click();
-            assert.equal(
-                await field('Title').inputValue(),
-                'A complete ticket',
-            );
-            assert.equal(await field('Impact score').inputValue(), '2.5');
-        }
-    }
-    await visit(false, '?hideAuthor&hidePoints');
-    assert.equal(await field('Author').count(), 0);
-    assert.equal(await field('Estimated story points').count(), 0);
-    await visit(false);
-    assert.equal(await field('Author').isDisabled(), true);
-    await visit(true, '?hidePoints');
-    assert.equal(await field('Estimated story points').count(), 0);
-    await visit(true, '?noMetadata');
-    assert.equal(await page.locator('form').count(), 0);
-    assert.deepEqual(errors, []);
-    console.log(
-        'Ticket form browser checks passed: create/edit payloads, nested validation, retries, drafts, resets, permissions, keyboard, mobile and both themes.',
-    );
-} finally {
-    await browser.close();
-}