feat(KAN-20): unify dialogs feedback and protect ticket drafts

2026-09-11 14:17:10 +02:00
parent 850ae337ca
commit f4a8bdd134
27 changed files with 1793 additions and 329 deletions
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { CircleAlert, CircleCheck, Inbox, LoaderCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+
+const props = withDefaults(
+    defineProps<{
+        state: 'empty' | 'loading' | 'error' | 'success';
+        title?: string;
+        description?: string;
+        retryable?: boolean;
+    }>(),
+    { retryable: false },
+);
+defineEmits<{ retry: [] }>();
+const { t } = useLocalization();
+const icons = {
+    empty: Inbox,
+    loading: LoaderCircle,
+    error: CircleAlert,
+    success: CircleCheck,
+};
+const defaultTitles = {
+    empty: 'feedback.empty',
+    loading: 'common.loading',
+    error: 'common.error',
+    success: 'feedback.saved',
+} as const;
+const heading = computed(() => props.title ?? t(defaultTitles[props.state]));
+</script>
+
+<template>
+    <div
+        :role="state === 'error' ? 'alert' : 'status'"
+        :aria-busy="state === 'loading' || undefined"
+        :data-feedback="state"
+        class="gap-card bg-card p-card text-body text-card-foreground flex min-w-0 items-start rounded-md border"
+        :class="{
+            'border-destructive/40': state === 'error',
+            'border-success/40': state === 'success',
+        }"
+    >
+        <component
+            :is="icons[state]"
+            aria-hidden="true"
+            class="mt-0.5 size-5 shrink-0"
+            :class="{
+                'text-primary animate-spin motion-reduce:animate-none':
+                    state === 'loading',
+                'text-destructive': state === 'error',
+                'text-success-foreground': state === 'success',
+                'text-muted-foreground': state === 'empty',
+            }"
+        />
+        <div class="gap-stack grid min-w-0 flex-1 break-words">
+            <p class="font-semibold">{{ heading }}</p>
+            <p v-if="description" class="text-muted-foreground">
+                {{ description }}
+            </p>
+            <div v-if="$slots.default"><slot /></div>
+            <Button
+                v-if="retryable && state === 'error'"
+                type="button"
+                variant="outline"
+                class="justify-self-start"
+                @click="$emit('retry')"
+                >{{ t('common.retry') }}</Button
+            >
+        </div>
+    </div>
+</template>
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, nextTick, useTemplateRef, watch } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import type { FormFeedbackState } from '@/lib/form-feedback';
+
+const props = defineProps<{ state: FormFeedbackState }>();
+defineEmits<{ retry: [] }>();
+const { t } = useLocalization();
+const feedback = useTemplateRef<HTMLDivElement>('feedback');
+watch(
+    () => props.state,
+    async (state) => {
+        if (['validation', 'network', 'server', 'cancelled'].includes(state)) {
+            await nextTick();
+            if (props.state === state) {
+                feedback.value?.focus();
+            }
+        }
+    },
+);
+const titles = {
+    idle: 'feedback.saved',
+    loading: 'forms.saving',
+    success: 'feedback.saved',
+    validation: 'forms.validationTitle',
+    network: 'forms.networkTitle',
+    server: 'forms.serverTitle',
+    cancelled: 'forms.cancelledTitle',
+} as const;
+const descriptions = {
+    validation: 'forms.validationDescription',
+    network: 'forms.networkDescription',
+    server: 'forms.serverDescription',
+    cancelled: 'forms.cancelledDescription',
+} as const;
+const description = computed(() =>
+    props.state in descriptions
+        ? t(descriptions[props.state as keyof typeof descriptions])
+        : undefined,
+);
+</script>
+
+<template>
+    <div
+        ref="feedback"
+        v-show="state !== 'idle'"
+        :data-form-state="state"
+        tabindex="-1"
+        class="focus-visible:ring-ring/35 rounded-md outline-none focus-visible:ring-2"
+    >
+        <FeedbackState
+            v-if="state !== 'idle'"
+            :state="
+                state === 'loading' || state === 'success' ? state : 'error'
+            "
+            :title="t(titles[state])"
+            :description="description"
+            :retryable="
+                state === 'network' ||
+                state === 'server' ||
+                state === 'cancelled'
+            "
+            @retry="$emit('retry')"
+        />
+    </div>
+</template>
@@ -5,8 +5,8 @@ defineProps<{
 </script>

 <template>
-    <div v-show="message">
-        <p class="text-sm text-red-600 dark:text-red-500">
+    <div v-show="message" role="alert">
+        <p class="text-body text-destructive">
            {{ message }}
        </p>
    </div>
@@ -1,53 +1,67 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
 import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import DialogOverlay from "./DialogOverlay.vue"
+    DialogClose,
+    DialogContent,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";
+import DialogOverlay from "./DialogOverlay.vue";
+import { useDialogFocus } from "@/composables/useDialogFocus";
+import { useLocalization } from "@/composables/useLocalization";

 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});

-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
-  showCloseButton: true,
-})
-const emits = defineEmits<DialogContentEmits>()
+const props = withDefaults(
+    defineProps<
+        DialogContentProps & {
+            class?: HTMLAttributes["class"];
+            showCloseButton?: boolean;
+        }
+    >(),
+    {
+        showCloseButton: true,
+    },
+);
+const emits = defineEmits<DialogContentEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class", "showCloseButton");
+const { restoreFocus } = useDialogFocus();
+const { t } = useLocalization();

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          props.class,
-        )"
-    >
-      <slot />
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogContent
+            data-slot="dialog-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            @close-auto-focus="restoreFocus"
+            :class="
+                cn(
+                    'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-column overflow-y-auto overscroll-contain rounded-md border p-page shadow-lg duration-200 motion-reduce:animate-none sm:max-w-lg',
+                    props.class,
+                )
+            "
+        >
+            <slot />

-      <DialogClose
-        v-if="showCloseButton"
-        data-slot="dialog-close"
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-      >
-        <X />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
+            <DialogClose
+                v-if="showCloseButton"
+                data-slot="dialog-close"
+                class="ring-offset-background focus-visible:ring-ring absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            >
+                <X />
+                <span class="sr-only">{{ t("common.close") }}</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
 </template>
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";

 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes["class"];
+}>();
 </script>

 <template>
-  <div
-    data-slot="dialog-header"
-    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
+    <div
+        data-slot="dialog-header"
+        :class="cn('flex flex-col gap-stack pr-6 text-left', props.class)"
+    >
+        <slot />
+    </div>
 </template>
@@ -1,59 +1,71 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
 import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";
+import { useDialogFocus } from "@/composables/useDialogFocus";
+import { useLocalization } from "@/composables/useLocalization";

 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});

-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<
+    DialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const { restoreFocus } = useDialogFocus();
+const { t } = useLocalization();
 </script>

 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
-          )
-        "
-        v-bind="{ ...$attrs, ...forwarded }"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
        >
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
+            <DialogContent
+                :class="
+                    cn(
+                        'relative z-50 my-4 grid w-full max-w-[calc(100%-2rem)] gap-column rounded-md border bg-card p-page text-card-foreground shadow-lg duration-200 sm:max-w-lg',
+                        props.class,
+                    )
+                "
+                v-bind="{ ...$attrs, ...forwarded }"
+                @close-auto-focus="restoreFocus"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target as HTMLElement;
+                        if (
+                            originalEvent.offsetX > target.clientWidth ||
+                            originalEvent.offsetY > target.clientHeight
+                        ) {
+                            event.preventDefault();
+                        }
+                    }
+                "
+            >
+                <slot />
+
+                <DialogClose
+                    class="absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
+                >
+                    <X class="w-4 h-4" />
+                    <span class="sr-only">{{ t("common.close") }}</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
 </template>
@@ -1,39 +1,48 @@
 <script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Check } from "lucide-vue-next"
+import type {
+    DropdownMenuCheckboxItemEmits,
+    DropdownMenuCheckboxItemProps,
+} from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
 import {
-  DropdownMenuCheckboxItem,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+    DropdownMenuCheckboxItem,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";

-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+const props = defineProps<
+    DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuCheckboxItem
-    data-slot="dropdown-menu-checkbox-item"
-    v-bind="forwarded"
-    :class=" cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <Check class="size-4" />
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem
+        data-slot="dropdown-menu-checkbox-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex min-h-control cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class,
+            )
+        "
+    >
+        <span
+            class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+        >
+            <DropdownMenuItemIndicator>
+                <slot name="indicator-icon">
+                    <Check class="size-4" />
+                </slot>
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
 </template>
@@ -1,39 +1,49 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type {
+    DropdownMenuContentEmits,
+    DropdownMenuContentProps,
+} from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+    DropdownMenuContent,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";

 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});

 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
+    defineProps<
+        DropdownMenuContentProps & { class?: HTMLAttributes["class"] }
+    >(),
+    {
+        sideOffset: 4,
+    },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      data-slot="dropdown-menu-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            data-slot="dropdown-menu-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] max-w-[calc(100vw-2rem)] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
 </template>
@@ -1,31 +1,41 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";

-const props = withDefaults(defineProps<DropdownMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
+const props = withDefaults(
+    defineProps<
+        DropdownMenuItemProps & {
+            class?: HTMLAttributes["class"];
+            inset?: boolean;
+            variant?: "default" | "destructive";
+        }
+    >(),
+    {
+        variant: "default",
+    },
+);

-const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class");

-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>

 <template>
-  <DropdownMenuItem
-    data-slot="dropdown-menu-item"
-    :data-inset="inset ? '' : undefined"
-    :data-variant="variant"
-    v-bind="forwardedProps"
-    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-  >
-    <slot />
-  </DropdownMenuItem>
+    <DropdownMenuItem
+        data-slot="dropdown-menu-item"
+        :data-inset="inset ? '' : undefined"
+        :data-variant="variant"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex min-h-control cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </DropdownMenuItem>
 </template>
@@ -1,40 +1,49 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Circle } from "lucide-vue-next"
+import type {
+    DropdownMenuRadioItemEmits,
+    DropdownMenuRadioItemProps,
+} from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Circle } from "lucide-vue-next";
 import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+    DropdownMenuItemIndicator,
+    DropdownMenuRadioItem,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";

-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<
+    DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }
+>();

-const emits = defineEmits<DropdownMenuRadioItemEmits>()
+const emits = defineEmits<DropdownMenuRadioItemEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuRadioItem
-    data-slot="dropdown-menu-radio-item"
-    v-bind="forwarded"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
+    <DropdownMenuRadioItem
+        data-slot="dropdown-menu-radio-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex min-h-control cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class,
+            )
+        "
+    >
+        <span
+            class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+        >
+            <DropdownMenuItemIndicator>
+                <slot name="indicator-icon">
+                    <Circle class="size-2 fill-current" />
+                </slot>
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
 </template>
@@ -1,27 +1,34 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type {
+    DropdownMenuSubContentEmits,
+    DropdownMenuSubContentProps,
+} from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";

-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
+const props = defineProps<
+    DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuSubContent
-    data-slot="dropdown-menu-sub-content"
-    v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
-  >
-    <slot />
-  </DropdownMenuSubContent>
+    <DropdownMenuSubContent
+        data-slot="dropdown-menu-sub-content"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] max-w-[calc(100vw-2rem)] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </DropdownMenuSubContent>
 </template>
@@ -1,30 +1,34 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronRight } from "lucide-vue-next"
-import {
-  DropdownMenuSubTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";

-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+    DropdownMenuSubTriggerProps & {
+        class?: HTMLAttributes["class"];
+        inset?: boolean;
+    }
+>();

-const delegatedProps = reactiveOmit(props, "class", "inset")
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>

 <template>
-  <DropdownMenuSubTrigger
-    data-slot="dropdown-menu-sub-trigger"
-    v-bind="forwardedProps"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto size-4" />
-  </DropdownMenuSubTrigger>
+    <DropdownMenuSubTrigger
+        data-slot="dropdown-menu-sub-trigger"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex min-h-control cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+                props.class,
+            )
+        "
+    >
+        <slot />
+        <ChevronRight class="ml-auto size-4" />
+    </DropdownMenuSubTrigger>
 </template>
@@ -1,62 +1,70 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
 import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import SheetOverlay from "./SheetOverlay.vue"
+    DialogClose,
+    DialogContent,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";
+import SheetOverlay from "./SheetOverlay.vue";
+import { useDialogFocus } from "@/composables/useDialogFocus";
+import { useLocalization } from "@/composables/useLocalization";

 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: "top" | "right" | "bottom" | "left"
+    class?: HTMLAttributes["class"];
+    side?: "top" | "right" | "bottom" | "left";
 }

 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});

 const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: "right",
-})
-const emits = defineEmits<DialogContentEmits>()
+    side: "right",
+});
+const emits = defineEmits<DialogContentEmits>();

-const delegatedProps = reactiveOmit(props, "class", "side")
+const delegatedProps = reactiveOmit(props, "class", "side");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const { restoreFocus } = useDialogFocus();
+const { t } = useLocalization();
 </script>

 <template>
-  <DialogPortal>
-    <SheetOverlay />
-    <DialogContent
-      data-slot="sheet-content"
-      :class="cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-        side === 'right'
-          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-        side === 'left'
-          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-        side === 'top'
-          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-        side === 'bottom'
-          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-        props.class)"
-      v-bind="{ ...$attrs, ...forwarded }"
-    >
-      <slot />
+    <DialogPortal>
+        <SheetOverlay />
+        <DialogContent
+            data-slot="sheet-content"
+            :class="
+                cn(
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+                    side === 'right' &&
+                        'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+                    side === 'left' &&
+                        'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+                    side === 'top' &&
+                        'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+                    side === 'bottom' &&
+                        'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+                    props.class,
+                )
+            "
+            v-bind="{ ...$attrs, ...forwarded }"
+            @close-auto-focus="restoreFocus"
+        >
+            <slot />

-      <DialogClose
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-      >
-        <X class="size-4" />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
+            <DialogClose
+                class="ring-offset-background focus-visible:ring-ring absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+            >
+                <X class="size-4" />
+                <span class="sr-only">{{ t("common.close") }}</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
 </template>
@@ -0,0 +1,34 @@
+import { injectDialogRootContext } from 'reka-ui';
+import { watch } from 'vue';
+
+/** Reka restores registered triggers; also support dialogs opened programmatically. */
+export function useDialogFocus() {
+    const context = injectDialogRootContext();
+    let previousFocus: HTMLElement | null = null;
+
+    watch(
+        context.open,
+        (open) => {
+            if (open && typeof document !== 'undefined') {
+                previousFocus =
+                    document.activeElement instanceof HTMLElement
+                        ? document.activeElement
+                        : null;
+            }
+        },
+        { flush: 'sync', immediate: true },
+    );
+
+    function restoreFocus(event: Event): void {
+        if (
+            !event.defaultPrevented &&
+            !context.triggerElement.value &&
+            previousFocus?.isConnected
+        ) {
+            event.preventDefault();
+            previousFocus.focus({ preventScroll: true });
+        }
+    }
+
+    return { restoreFocus };
+}
@@ -0,0 +1,114 @@
+import type {
+    PendingVisit,
+    UrlMethodPair,
+    UseFormSubmitOptions,
+} from '@inertiajs/core';
+import { router } from '@inertiajs/vue3';
+import type { InertiaForm } from '@inertiajs/vue3';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useUnsavedChanges } from '@/composables/useUnsavedChanges';
+import {
+    formRequestHeader,
+    isFormNetworkFailure,
+    matchesFormRequest,
+} from '@/lib/form-feedback';
+import type { FormFeedbackState } from '@/lib/form-feedback';
+
+/** Pair with a keyed useForm/useRemember for restoration on browser Back/Forward. */
+export function useFormProtection<T extends object>(
+    form: InertiaForm<T>,
+    options: { isDirty?: () => boolean } = {},
+) {
+    const failure = ref<FormFeedbackState | null>(null);
+    let ownVisit: PendingVisit | null = null;
+    let requestId: string | null = null;
+    const removeListeners: Array<() => void> = [];
+
+    const { confirmLeave } = useUnsavedChanges(
+        () => form.processing || (options.isDirty?.() ?? form.isDirty),
+        (visit) => visit === ownVisit,
+    );
+
+    const state = computed<FormFeedbackState>(() => {
+        if (form.processing) {
+            return 'loading';
+        }
+        if (failure.value) {
+            return failure.value;
+        }
+        if (Object.keys(form.errors).length > 0) {
+            return 'validation';
+        }
+        return form.recentlySuccessful ? 'success' : 'idle';
+    });
+
+    onMounted(() => {
+        removeListeners.push(
+            router.on('exception', (event) => {
+                if (isFormNetworkFailure(event.detail.exception, requestId)) {
+                    event.preventDefault();
+                    failure.value = 'network';
+                }
+            }),
+            router.on('invalid', (event) => {
+                if (
+                    matchesFormRequest(event.detail.response.config, requestId)
+                ) {
+                    event.preventDefault();
+                    failure.value = 'server';
+                }
+            }),
+        );
+    });
+
+    onUnmounted(() => removeListeners.forEach((remove) => remove()));
+
+    function submit(
+        target: UrlMethodPair,
+        visitOptions: UseFormSubmitOptions = {},
+    ): void {
+        if (form.processing) {
+            return;
+        }
+
+        const nextRequestId = crypto.randomUUID();
+        form.submit(target, {
+            ...visitOptions,
+            preserveState: true,
+            headers: {
+                ...visitOptions.headers,
+                [formRequestHeader]: nextRequestId,
+            },
+            onBefore: (visit) => {
+                if (visitOptions.onBefore?.(visit) === false) {
+                    return false;
+                }
+                ownVisit = visit;
+            },
+            onStart: (visit) => {
+                requestId = nextRequestId;
+                failure.value = null;
+                visitOptions.onStart?.(visit);
+            },
+            onError: (errors) => {
+                failure.value = 'validation';
+                return visitOptions.onError?.(errors);
+            },
+            onSuccess: (page) => {
+                failure.value = null;
+                return visitOptions.onSuccess?.(page);
+            },
+            onCancel: () => {
+                failure.value = 'cancelled';
+                visitOptions.onCancel?.();
+            },
+            onFinish: (visit) => {
+                requestId = null;
+                ownVisit = null;
+                visitOptions.onFinish?.(visit);
+            },
+        });
+    }
+
+    return { state, submit, confirmLeave };
+}
@@ -0,0 +1,42 @@
+import type { PendingVisit } from '@inertiajs/core';
+import { router } from '@inertiajs/vue3';
+import { onMounted, onUnmounted, toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { useLocalization } from '@/composables/useLocalization';
+
+export function useUnsavedChanges(
+    dirty: MaybeRefOrGetter<boolean>,
+    allowVisit: (visit: PendingVisit) => boolean = () => false,
+) {
+    const { t } = useLocalization();
+    let removeBeforeListener: (() => void) | undefined;
+
+    const confirmLeave = (): boolean =>
+        !toValue(dirty) || window.confirm(t('forms.leaveConfirm'));
+
+    const beforeUnload = (event: BeforeUnloadEvent): void => {
+        if (toValue(dirty)) {
+            event.preventDefault();
+            event.returnValue = '';
+        }
+    };
+
+    onMounted(() => {
+        removeBeforeListener = router.on('before', (event) => {
+            if (event.defaultPrevented || allowVisit(event.detail.visit)) {
+                return;
+            }
+
+            // Keep the original visit and its callbacks; never replay a mutation.
+            return confirmLeave();
+        });
+        window.addEventListener('beforeunload', beforeUnload);
+    });
+
+    onUnmounted(() => {
+        removeBeforeListener?.();
+        window.removeEventListener('beforeunload', beforeUnload);
+    });
+
+    return { confirmLeave };
+}
@@ -0,0 +1,42 @@
+export type FormFeedbackState =
+    | 'idle'
+    | 'loading'
+    | 'success'
+    | 'validation'
+    | 'network'
+    | 'server'
+    | 'cancelled';
+
+export const formRequestHeader = 'X-KanbanGit-Form-Request';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null;
+}
+
+/** Match failures to one submission, without intercepting other forms or polling. */
+export function matchesFormRequest(
+    config: unknown,
+    requestId: string | null,
+): boolean {
+    if (!requestId || !isRecord(config) || !isRecord(config.headers)) {
+        return false;
+    }
+
+    return config.headers[formRequestHeader] === requestId;
+}
+
+/** Runtime exceptions and cancellations are not network failures. */
+export function isFormNetworkFailure(
+    error: unknown,
+    requestId: string | null,
+): boolean {
+    return (
+        isRecord(error) &&
+        error.isAxiosError === true &&
+        !error.response &&
+        ['ERR_NETWORK', 'ECONNABORTED', 'ETIMEDOUT'].includes(
+            String(error.code),
+        ) &&
+        matchesFormRequest(error.config, requestId)
+    );
+}
@@ -43,6 +43,30 @@ export const en = {
    'appearance.dark': 'Dark',
    'appearance.system': 'System',
    'common.cancel': 'Cancel',
+    'common.close': 'Close',
+    'common.retry': 'Try again',
+    'feedback.empty': 'Nothing here yet',
+    'feedback.saved': 'Changes saved',
+    'forms.saving': 'Saving changes…',
+    'forms.leaveConfirm': 'You have unsaved changes. Leave without saving?',
+    'forms.validationTitle': 'Check your entries',
+    'forms.validationDescription':
+        'The server rejected some fields. Your entries are still here. Correct the highlighted errors and save again.',
+    'forms.networkTitle': 'Connection interrupted',
+    'forms.networkDescription':
+        'Your entries are still here, but we could not confirm whether the server saved them. Check your connection and verify the result before trying again.',
+    'forms.serverTitle': 'The request could not be completed',
+    'forms.serverDescription':
+        'Your entries are still here. The server returned an unexpected response; your session may have expired. Verify the result before trying again.',
+    'forms.cancelledTitle': 'Saving was interrupted',
+    'forms.cancelledDescription':
+        'Your entries are still here. Check whether the changes were saved before trying again.',
+    'tickets.noBranches': 'No matching branches',
+    'tickets.noBranchesDescription':
+        'No matching branches were found across the linked repositories.',
+    'tickets.noPullRequests': 'No matching pull requests',
+    'tickets.noPullRequestsDescription':
+        'No matching pull requests were found across the linked repositories.',
    'common.save': 'Save',
    'common.loading': 'Loading…',
    'common.error': 'Something went wrong.',
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { Form, useForm, Head, Link, usePage } from '@inertiajs/vue3';
+import {
+    Form,
+    useForm,
+    useRemember,
+    Head,
+    Link,
+    usePage,
+} from '@inertiajs/vue3';
 import { CheckCircle2, GitBranchPlus, XCircle } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, toRef, unref, watch } from 'vue';
 import {
    acceptanceCriteriaToEditorState,
    buildAcceptanceCriteria,
@@ -14,6 +21,10 @@ import ProjectTicketLinkController from '@/actions/App/Http/Controllers/ProjectT
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import FormFeedback from '@/components/FormFeedback.vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
 import TicketTreeList from '@/components/TicketTreeList.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -45,6 +56,7 @@ import type { RepositoryConnectionModel } from '@/types/models/repository-connec
 import type { BreadcrumbItem, ProjectTicketPageProps } from '@/types';

 const props = defineProps<ProjectTicketPageProps>();
+const { t } = useLocalization();
 const page = usePage();
 const appName = String(page.props.name);

@@ -122,8 +134,14 @@ const breadcrumbs: BreadcrumbItem[] = [
 const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
    props.ticket.acceptance_criteria,
 );
-const acceptanceCriteriaChecklist = ref(
-    acceptanceCriteriaEditorState.checklist,
+const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:edit`;
+const acceptanceCriteriaDraft = useRemember(
+    { checklist: acceptanceCriteriaEditorState.checklist },
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
 );
 const savedAcceptanceCriteria = ref(
    normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
@@ -131,7 +149,7 @@ const savedAcceptanceCriteria = ref(
 const isPersistingAcceptanceCriteriaToggle = ref(false);
 const acceptanceCriteriaToggleError = ref('');

-const form = useForm({
+const form = useForm(draftKey, {
    acceptance_criteria: buildAcceptanceCriteria(
        acceptanceCriteriaChecklist.value,
    ),
@@ -170,6 +188,12 @@ const hasUnsavedAcceptanceCriteriaDraft = computed(
        formatChecklistLines(savedAcceptanceCriteria.value),
 );

+const protection = useFormProtection(form, {
+    isDirty: () =>
+        props.canEditTicket &&
+        (form.isDirty || hasUnsavedAcceptanceCriteriaDraft.value),
+});
+
 const acceptanceCriteriaError = computed(() => {
    return (
        form.errors.acceptance_criteria ??
@@ -187,10 +211,20 @@ const branchNameValidation = ref<BranchNameValidationModel | null>(null);
 const branchCreationForm = useForm<{
    branch_name: string;
    repository_connection_id: string;
-}>({
+}>(`${draftKey}:branch`, {
    branch_name: props.suggestedBranchName,
    repository_connection_id: defaultBranchRepositoryConnectionId.value,
 });
+const branchProtection = useFormProtection(branchCreationForm, {
+    isDirty: () => isCreateBranchDialogOpen.value && branchCreationForm.isDirty,
+});
+
+const updateBranchDialogOpen = (open: boolean): void => {
+    if (!open && !branchProtection.confirmLeave()) {
+        return;
+    }
+    isCreateBranchDialogOpen.value = open;
+};

 const selectedBranchRepositoryConnection = computed(
    (): RepositoryConnectionModel | null =>
@@ -207,6 +241,9 @@ const selectedBranchRepositoryHasPersonalAccess = computed(
 );

 const initializeBranchCreationForm = (): void => {
+    if (branchCreationForm.isDirty) {
+        return;
+    }
    branchCreationForm.clearErrors();
    branchCreationForm.branch_name = props.suggestedBranchName;
    branchCreationForm.repository_connection_id =
@@ -348,7 +385,7 @@ const submitBranchCreation = (): void => {
        return;
    }

-    branchCreationForm.submit(
+    branchProtection.submit(
        ProjectTicketBranchController.store({
            project: props.project.id,
            ticket: props.ticket.id,
@@ -482,13 +519,21 @@ const submit = (): void => {

    form.acceptance_criteria = buildAcceptanceCriteriaForSubmit();

-    form.submit(
+    protection.submit(
        ProjectTicketController.update({
            project: props.project.id,
            ticket: props.ticket.id,
        }),
        {
            preserveScroll: true,
+            onSuccess: () => {
+                savedAcceptanceCriteria.value = normalizeAcceptanceCriteria(
+                    props.ticket.acceptance_criteria,
+                );
+                acceptanceCriteriaChecklist.value = formatChecklistLines(
+                    savedAcceptanceCriteria.value,
+                );
+            },
        },
    );
 };
@@ -574,16 +619,25 @@ const formatDateTime = (value: string): string => {

                    <CardContent>
                        <form class="grid gap-6" @submit.prevent="submit">
+                            <FormFeedback
+                                :state="protection.state.value"
+                                @retry="submit"
+                            />
                            <div class="grid gap-2">
                                <Label for="title">Title</Label>
                                <Input
                                    id="title"
                                    v-model="form.title"
+                                    :invalid="Boolean(form.errors.title)"
+                                    aria-describedby="title-error"
                                    :disabled="
                                        !canEditTicket || form.processing
                                    "
                                />
-                                <InputError :message="form.errors.title" />
+                                <InputError
+                                    id="title-error"
+                                    :message="form.errors.title"
+                                />
                            </div>

                            <div class="grid gap-2 md:grid-cols-2 md:gap-6">
@@ -995,7 +1049,10 @@ const formatDateTime = (value: string): string => {
                                </CardDescription>
                            </div>

-                            <Dialog v-model:open="isCreateBranchDialogOpen">
+                            <Dialog
+                                :open="isCreateBranchDialogOpen"
+                                @update:open="updateBranchDialogOpen"
+                            >
                                <Button
                                    v-if="canCreateBranches"
                                    type="button"
@@ -1023,6 +1080,12 @@ const formatDateTime = (value: string): string => {
                                        class="grid gap-4"
                                        @submit.prevent="submitBranchCreation"
                                    >
+                                        <FormFeedback
+                                            :state="
+                                                branchProtection.state.value
+                                            "
+                                            @retry="submitBranchCreation"
+                                        />
                                        <div class="grid gap-2">
                                            <Label
                                                for="repository_connection_id"
@@ -1153,7 +1216,9 @@ const formatDateTime = (value: string): string => {
                                                type="button"
                                                variant="secondary"
                                                @click="
-                                                    isCreateBranchDialogOpen = false
+                                                    updateBranchDialogOpen(
+                                                        false,
+                                                    )
                                                "
                                            >
                                                Cancel
@@ -1177,13 +1242,14 @@ const formatDateTime = (value: string): string => {
                        </CardHeader>

                        <CardContent class="space-y-4">
-                            <div
+                            <FeedbackState
                                v-if="visibleRepositoryBranches.length === 0"
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                            >
-                                No matching branches were found across the
-                                linked repositories you can access.
-                            </div>
+                                state="empty"
+                                :title="t('tickets.noBranches')"
+                                :description="
+                                    t('tickets.noBranchesDescription')
+                                "
+                            />

                            <div v-else class="space-y-3">
                                <div
@@ -1434,15 +1500,16 @@ const formatDateTime = (value: string): string => {
                        </CardHeader>

                        <CardContent class="space-y-4">
-                            <div
+                            <FeedbackState
                                v-if="
                                    visibleRepositoryPullRequests.length === 0
                                "
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                            >
-                                No matching pull requests were found across the
-                                linked repositories you can access.
-                            </div>
+                                state="empty"
+                                :title="t('tickets.noPullRequests')"
+                                :description="
+                                    t('tickets.noPullRequestsDescription')
+                                "
+                            />

                            <div v-else class="space-y-3">
                                <div
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
+import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
+import { computed, toRef, unref } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import FormFeedback from '@/components/FormFeedback.vue';
+import { useFormProtection } from '@/composables/useFormProtection';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -62,9 +64,17 @@ const hasTicketMetadata =
    props.ticketPriorities.length > 0 &&
    props.ticketStatusOptions.length > 0;

-const acceptanceCriteriaChecklist = ref('');
+const draftKey = `projects:${props.project.id}:tickets:create`;
+const acceptanceCriteriaDraft = useRemember(
+    { checklist: '' },
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
+);

-const form = useForm({
+const form = useForm(draftKey, {
    acceptance_criteria: buildAcceptanceCriteria(
        acceptanceCriteriaChecklist.value,
    ),
@@ -80,6 +90,10 @@ const form = useForm({
    title: '',
 });

+const protection = useFormProtection(form, {
+    isDirty: () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
+});
+
 const acceptanceCriteriaPreviewItems = computed(() =>
    parseChecklistLines(acceptanceCriteriaChecklist.value),
 );
@@ -99,9 +113,12 @@ const submit = (): void => {
        acceptanceCriteriaChecklist.value,
    );

-    form.submit(ProjectTicketController.store({ project: props.project.id }), {
-        preserveScroll: true,
-    });
+    protection.submit(
+        ProjectTicketController.store({ project: props.project.id }),
+        {
+            preserveScroll: true,
+        },
+    );
 };

 const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
@@ -165,17 +182,26 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {

                <CardContent>
                    <form class="grid gap-6" @submit.prevent="submit">
+                        <FormFeedback
+                            :state="protection.state.value"
+                            @retry="submit"
+                        />
                        <div class="grid gap-2">
                            <Label for="title">Title</Label>
                            <Input
                                id="title"
                                v-model="form.title"
+                                :invalid="Boolean(form.errors.title)"
+                                aria-describedby="title-error"
                                required
                                autofocus
                                :disabled="form.processing"
                                placeholder="Implement repository sync"
                            />
-                            <InputError :message="form.errors.title" />
+                            <InputError
+                                id="title-error"
+                                :message="form.errors.title"
+                            />
                        </div>

                        <div