@cat-factory/app 0.137.2 → 0.138.0

package/app/components/followUp/FollowUpWindow.vue

@@ -12,6 +12,7 @@ import { useBoardStore } from '~/stores/board'
 import { useFollowUpsStore } from '~/stores/followUps'
 import type { FollowUpItem } from '~/types/execution'
 import { FOLLOW_UP_COMPANION_META } from '~/utils/catalog'
+import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -20,9 +21,16 @@ const access = useWorkspaceAccess()
 
 const { t } = useI18n()
 
-const { open, blockId, instanceId, stepIndex, close } = useResultView('follow-ups')
+// `manageEscape: false` — `ResultWindowShell` owns Escape (and focus trap + scroll lock +
+// stacking) via the shared overlay behaviour.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('follow-ups', {
+  manageEscape: false,
+})
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const headerTitle = computed(() =>
+  block.value ? t('followUp.titleWithBlock', { title: block.value.title }) : t('followUp.title'),
+)
 const instance = computed(() =>
   instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
 )
@@ -83,216 +91,182 @@ const STATUS_META: Record<
 </script>
 
 <template>
-  <Teleport to="body">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
-      @click.self="close"
-    >
+  <ResultWindowShell
+    :open="open"
+    :icon="FOLLOW_UP_COMPANION_META.icon"
+    icon-class="bg-pink-500/15 text-pink-300"
+    :title="headerTitle"
+    :subtitle="t('followUp.subtitle')"
+    width="3xl"
+    @close="close"
+  >
+    <template #header-extras>
+      <UBadge :color="pendingCount > 0 ? 'warning' : 'success'" variant="subtle" size="sm">
+        {{
+          pendingCount > 0
+            ? t('followUp.badge.toDecide', { count: pendingCount }, pendingCount)
+            : t('followUp.badge.allDecided')
+        }}
+      </UBadge>
+    </template>
+
+    <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+      <!-- Empty -->
       <div
-        class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
-        role="dialog"
-        aria-modal="true"
+        v-if="items.length === 0"
+        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
       >
-        <!-- Header -->
-        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
-          <span
-            class="flex h-8 w-8 items-center justify-center rounded-lg bg-pink-500/15 text-pink-300"
-          >
-            <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-4 w-4" />
-          </span>
-          <div class="min-w-0 flex-1">
-            <h2 class="truncate text-sm font-semibold text-slate-100">
-              {{
-                block ? t('followUp.titleWithBlock', { title: block.title }) : t('followUp.title')
-              }}
-            </h2>
-            <p class="truncate text-[11px] text-slate-400">
-              {{ t('followUp.subtitle') }}
-            </p>
-          </div>
-          <UBadge :color="pendingCount > 0 ? 'warning' : 'success'" variant="subtle" size="sm">
-            {{
-              pendingCount > 0
-                ? t('followUp.badge.toDecide', { count: pendingCount }, pendingCount)
-                : t('followUp.badge.allDecided')
-            }}
-          </UBadge>
-          <button
-            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            @click="close"
-          >
-            <UIcon name="i-lucide-x" class="h-4 w-4" />
-          </button>
-        </header>
+        <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
+        <p class="text-sm">{{ t('followUp.empty.title') }}</p>
+        <p class="max-w-sm text-[11px] text-slate-500">
+          {{ t('followUp.empty.hint') }}
+        </p>
+      </div>
 
-        <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-          <!-- Empty -->
-          <div
-            v-if="items.length === 0"
-            class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
-          >
-            <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
-            <p class="text-sm">{{ t('followUp.empty.title') }}</p>
-            <p class="max-w-sm text-[11px] text-slate-500">
-              {{ t('followUp.empty.hint') }}
-            </p>
-          </div>
+      <div v-else class="space-y-3">
+        <p
+          v-if="followUps.error"
+          class="rounded-md bg-rose-500/10 px-3 py-2 text-[12px] text-rose-300"
+        >
+          {{ followUps.error }}
+        </p>
 
-          <div v-else class="space-y-3">
-            <p
-              v-if="followUps.error"
-              class="rounded-md bg-rose-500/10 px-3 py-2 text-[12px] text-rose-300"
-            >
-              {{ followUps.error }}
-            </p>
+        <article
+          v-for="item in items"
+          :key="item.id"
+          class="rounded-xl border border-slate-800 bg-slate-900/60 px-4 py-3"
+          :class="item.status === 'pending' ? 'border-amber-500/40' : ''"
+        >
+          <div class="flex items-start gap-2">
+            <UIcon
+              :name="item.kind === 'question' ? 'i-lucide-circle-help' : 'i-lucide-compass'"
+              class="mt-0.5 h-4 w-4 shrink-0"
+              :class="item.kind === 'question' ? 'text-sky-300' : 'text-pink-300'"
+            />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-100">
+                  {{ item.title }}
+                </h3>
+                <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
+                  {{ t(STATUS_LABEL_KEYS[item.status]) }}
+                </UBadge>
+              </div>
+              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
+                {{ item.detail }}
+              </p>
+              <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-slate-400">
+                <span class="text-slate-500">{{ t('followUp.suggested') }}</span>
+                {{ item.suggestedAction }}
+              </p>
+              <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
+                <a
+                  :href="item.ticketUrl"
+                  target="_blank"
+                  rel="noopener"
+                  class="text-emerald-300 hover:underline"
+                >
+                  {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
+                </a>
+              </p>
+              <p
+                v-if="item.status === 'answered' && item.answer"
+                class="mt-1 text-[11px] text-slate-300"
+              >
+                <span class="text-slate-500">{{ t('followUp.yourAnswer') }}</span>
+                {{ item.answer }}
+              </p>
 
-            <article
-              v-for="item in items"
-              :key="item.id"
-              class="rounded-xl border border-slate-800 bg-slate-900/60 px-4 py-3"
-              :class="item.status === 'pending' ? 'border-amber-500/40' : ''"
-            >
-              <div class="flex items-start gap-2">
-                <UIcon
-                  :name="item.kind === 'question' ? 'i-lucide-circle-help' : 'i-lucide-compass'"
-                  class="mt-0.5 h-4 w-4 shrink-0"
-                  :class="item.kind === 'question' ? 'text-sky-300' : 'text-pink-300'"
-                />
-                <div class="min-w-0 flex-1">
+              <!-- Actions (only while the item is still undecided) -->
+              <div v-if="item.status === 'pending'" class="mt-2.5">
+                <!-- A question: answer it -->
+                <div v-if="item.kind === 'question'" class="space-y-2">
+                  <textarea
+                    v-model="drafts[item.id]"
+                    rows="2"
+                    :placeholder="t('followUp.answerPlaceholder')"
+                    class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
+                  />
                   <div class="flex items-center gap-2">
-                    <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-100">
-                      {{ item.title }}
-                    </h3>
-                    <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
-                      {{ t(STATUS_LABEL_KEYS[item.status]) }}
-                    </UBadge>
-                  </div>
-                  <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
-                    {{ item.detail }}
-                  </p>
-                  <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-slate-400">
-                    <span class="text-slate-500">{{ t('followUp.suggested') }}</span>
-                    {{ item.suggestedAction }}
-                  </p>
-                  <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
-                    <a
-                      :href="item.ticketUrl"
-                      target="_blank"
-                      rel="noopener"
-                      class="text-emerald-300 hover:underline"
+                    <UButton
+                      size="xs"
+                      color="primary"
+                      :loading="followUps.isActing(item.id)"
+                      :disabled="!(drafts[item.id] ?? '').trim() || !access.canExecuteRuns.value"
+                      :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                      @click="onAnswer(item)"
                     >
-                      {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
-                    </a>
-                  </p>
-                  <p
-                    v-if="item.status === 'answered' && item.answer"
-                    class="mt-1 text-[11px] text-slate-300"
-                  >
-                    <span class="text-slate-500">{{ t('followUp.yourAnswer') }}</span>
-                    {{ item.answer }}
-                  </p>
-
-                  <!-- Actions (only while the item is still undecided) -->
-                  <div v-if="item.status === 'pending'" class="mt-2.5">
-                    <!-- A question: answer it -->
-                    <div v-if="item.kind === 'question'" class="space-y-2">
-                      <textarea
-                        v-model="drafts[item.id]"
-                        rows="2"
-                        :placeholder="t('followUp.answerPlaceholder')"
-                        class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
-                      />
-                      <div class="flex items-center gap-2">
-                        <UButton
-                          size="xs"
-                          color="primary"
-                          :loading="followUps.isActing(item.id)"
-                          :disabled="
-                            !(drafts[item.id] ?? '').trim() || !access.canExecuteRuns.value
-                          "
-                          :title="
-                            access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                          "
-                          @click="onAnswer(item)"
-                        >
-                          {{ t('followUp.actions.answerAndSend') }}
-                        </UButton>
-                        <UButton
-                          size="xs"
-                          color="neutral"
-                          variant="ghost"
-                          :loading="followUps.isActing(item.id)"
-                          :disabled="!access.canExecuteRuns.value"
-                          :title="
-                            access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                          "
-                          @click="onDismiss(item)"
-                        >
-                          {{ t('followUp.actions.dismiss') }}
-                        </UButton>
-                      </div>
-                    </div>
-
-                    <!-- A follow-up: file / send back / dismiss -->
-                    <div v-else class="flex flex-wrap items-center gap-2">
-                      <UButton
-                        size="xs"
-                        color="primary"
-                        icon="i-lucide-ticket"
-                        :loading="followUps.isActing(item.id)"
-                        :disabled="!access.canExecuteRuns.value"
-                        :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                        @click="onFile(item)"
-                      >
-                        {{ t('followUp.actions.fileAsIssue') }}
-                      </UButton>
-                      <UButton
-                        size="xs"
-                        color="info"
-                        variant="soft"
-                        icon="i-lucide-corner-up-left"
-                        :loading="followUps.isActing(item.id)"
-                        :disabled="!access.canExecuteRuns.value"
-                        :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                        @click="onQueue(item)"
-                      >
-                        {{ t('followUp.actions.sendToCoder') }}
-                      </UButton>
-                      <UButton
-                        size="xs"
-                        color="neutral"
-                        variant="ghost"
-                        :loading="followUps.isActing(item.id)"
-                        @click="onDismiss(item)"
-                      >
-                        {{ t('followUp.actions.dismiss') }}
-                      </UButton>
-                    </div>
+                      {{ t('followUp.actions.answerAndSend') }}
+                    </UButton>
+                    <UButton
+                      size="xs"
+                      color="neutral"
+                      variant="ghost"
+                      :loading="followUps.isActing(item.id)"
+                      :disabled="!access.canExecuteRuns.value"
+                      :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                      @click="onDismiss(item)"
+                    >
+                      {{ t('followUp.actions.dismiss') }}
+                    </UButton>
                   </div>
                 </div>
+
+                <!-- A follow-up: file / send back / dismiss -->
+                <div v-else class="flex flex-wrap items-center gap-2">
+                  <UButton
+                    size="xs"
+                    color="primary"
+                    icon="i-lucide-ticket"
+                    :loading="followUps.isActing(item.id)"
+                    :disabled="!access.canExecuteRuns.value"
+                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                    @click="onFile(item)"
+                  >
+                    {{ t('followUp.actions.fileAsIssue') }}
+                  </UButton>
+                  <UButton
+                    size="xs"
+                    color="info"
+                    variant="soft"
+                    icon="i-lucide-corner-up-left"
+                    :loading="followUps.isActing(item.id)"
+                    :disabled="!access.canExecuteRuns.value"
+                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
+                    @click="onQueue(item)"
+                  >
+                    {{ t('followUp.actions.sendToCoder') }}
+                  </UButton>
+                  <UButton
+                    size="xs"
+                    color="neutral"
+                    variant="ghost"
+                    :loading="followUps.isActing(item.id)"
+                    @click="onDismiss(item)"
+                  >
+                    {{ t('followUp.actions.dismiss') }}
+                  </UButton>
+                </div>
               </div>
-            </article>
+            </div>
           </div>
-        </div>
-
-        <footer
-          class="flex items-center justify-between border-t border-slate-800 px-5 py-2.5 text-[11px] text-slate-400"
-        >
-          <span>
-            {{
-              t(
-                'followUp.footer.summary',
-                { count: items.length, undecided: pendingCount },
-                items.length,
-              )
-            }}
-          </span>
-          <span v-if="maxLoops > 0">{{
-            t('followUp.footer.loops', { loops, max: maxLoops })
-          }}</span>
-        </footer>
+        </article>
       </div>
     </div>
-  </Teleport>
+
+    <footer
+      class="flex items-center justify-between border-t border-slate-800 px-5 py-2.5 text-[11px] text-slate-400"
+    >
+      <span>
+        {{
+          t(
+            'followUp.footer.summary',
+            { count: items.length, undecided: pendingCount },
+            items.length,
+          )
+        }}
+      </span>
+      <span v-if="maxLoops > 0">{{ t('followUp.footer.loops', { loops, max: maxLoops }) }}</span>
+    </footer>
+  </ResultWindowShell>
 </template>