Frontend: Update code examples in src/common/README.md photoprism#5145 photoprism#5307 photoprism#5313

Signed-off-by: Michael Mayer <[email protected]>

Author: lastzero

AGENTS.md

@@ -1,6 +1,6 @@
 # PhotoPrism® Repository Guidelines
 
-**Last Updated:** November 11, 2025
+**Last Updated:** November 12, 2025
 
 ## Purpose
 
@@ -224,6 +224,8 @@ Note: Across our public documentation, official images, and in production, the c
 
 - Dialogs must follow the shared focus pattern documented in `frontend/src/common/README.md`.
 - Always expose `ref="dialog"` on `<v-dialog>` overlays, call `$view.enter/leave` in `@after-enter` / `@after-leave`, and avoid positive `tabindex` values.
+- Persistent dialogs (those with the `persistent` prop) must handle Escape via `@keydown.esc.exact` so Vuetify’s default rejection animation is suppressed; keep other shortcuts on `@keyup` so inner inputs can cancel them first.
+- Global shortcuts run through `onShortCut(ev)` in `common/view.js`; it only forwards Escape and `ctrl`/`meta` combinations, so do not rely on it for arbitrary keys.
 - When a dialog opens nested menus (for example, combobox suggestion lists), ensure they work with the global trap; see the README for troubleshooting tips.
 
 ## Safety & Data

frontend/CODEMAP.md

@@ -1,6 +1,6 @@
 PhotoPrism — Frontend CODEMAP
 
-**Last Updated:** October 13, 2025
+**Last Updated:** November 12, 2025
 
 Purpose
 - Help agents and contributors navigate the Vue 3 + Vuetify 3 app quickly and make safe changes.
@@ -107,6 +107,10 @@ Common How‑Tos
   - Compute `key` from route + filter params and cap eager loads with `Rest.restoreCap(Model.batchSize())` (defaults to 10× the batch size).
   - Check `$view.wasBackwardNavigation()` when deciding whether to reuse stored state; `src/app.js` wires the router guards that keep the history direction in sync so no globals like `window.backwardsNavigationDetected` are needed.
 
+- Handle dialog shortcuts
+  - Persistent dialogs (`persistent` prop) must listen for Escape on `@keydown.esc.exact` to override Vuetify’s rejection animation; keep Enter and other actions on `@keyup` so child inputs can intercept them first.
+  - Global shortcuts go through `onShortCut(ev)` in `common/view.js`. It only forwards Escape and `ctrl`/`meta` combinations, so do not depend on it for plain character keys.
+
 Conventions & Safety
 - Avoid `v-html`; use `v-sanitize` or `$util.sanitizeHtml()` (build enforces this)
 - Keep big components lazy if needed; split views logically under `src/page`

frontend/src/common/README.md

@@ -64,10 +64,12 @@ Vuetify dialogs are teleported to the overlay container, so consistent refs and
 
    ```vue
    <v-card-actions class="action-buttons">
-     <v-btn variant="flat" color="button" class="action-cancel" @click.stop="close">
+     <v-btn variant="flat" color="button"
+         class="action-cancel" @click.stop="close">
        {{ $gettext(`Cancel`) }}
      </v-btn>
-     <v-btn variant="flat" color="highlight" class="action-confirm" @click.stop="confirm">
+     <v-btn variant="flat" color="highlight"
+         class="action-confirm" @click.stop="confirm">
        {{ $gettext(`Delete`) }}
      </v-btn>
    </v-card-actions>
@@ -124,7 +126,8 @@ Both snippets allow focused inputs to veto shortcuts by calling `event.stopPropa
 `common/view.js` registers a single `keydown` listener that forwards shortcut keys to the active component:
 
 ```js
-// onKeyDown forwards global shortcuts (Escape, Ctrl/⌘ combos) to the active component when supported.
+// onKeyDown forwards global shortcuts (Escape, Ctrl/⌘ combos)
+// to the active component when supported.
 onKeyDown(ev) {
   if (!this.current || !ev || !(ev instanceof KeyboardEvent) || !ev.code) {
     return;
@@ -162,13 +165,15 @@ onKeyDown(ev) {
     <v-card ref="content" tabindex="-1">
       <v-card-title class="d-flex justify-start align-center ga-3">
         <v-icon icon="mdi-delete-outline" size="54" color="primary"></v-icon>
-        <p class="text-subtitle-1">{{ $gettext(`Are you sure you want to permanently delete this file?`) }}</p>
+        <p class="text-subtitle-1">{{ $gettext(`Are you sure?`) }}</p>
       </v-card-title>
       <v-card-actions class="action-buttons mt-1">
-        <v-btn variant="flat" color="button" class="action-cancel" @click.stop="close">
+        <v-btn variant="flat" color="button"
+               class="action-cancel" @click.stop="close">
           {{ $gettext(`Cancel`) }}
         </v-btn>
-        <v-btn color="highlight" variant="flat" class="action-confirm" @click.stop="confirm">
+        <v-btn color="highlight" variant="flat"
+               class="action-confirm" @click.stop="confirm">
           {{ $gettext(`Delete`) }}
         </v-btn>
       </v-card-actions>

frontend/src/component/lightbox.vue

@@ -17,7 +17,7 @@
     @keydown.space.exact="onKeyDown"
     @keydown.left.exact="onKeyDown"
     @keydown.right.exact="onKeyDown"
-    @keydown.esc.stop="close"
+    @keydown.esc.exact.stop="close"
     @click.capture="captureDialogClick"
     @pointerdown.capture="captureDialogPointerDown"
   >

frontend/src/component/location/dialog.vue

@@ -8,7 +8,7 @@
     scrim
     scrollable
     class="p-location-dialog"
-    @keydown.esc="close"
+    @keydown.esc.exact="close"
     @after-enter="afterEnter"
     @after-leave="afterLeave"
   >

frontend/src/component/photo/edit/dialog.vue

@@ -12,7 +12,7 @@
     @after-leave="afterLeave"
     @keydown.left.exact="onKeyLeft"
     @keydown.right.exact="onKeyRight"
-    @keydown.esc.stop="onClose"
+    @keydown.esc.exact.stop="onClose"
   >
     <v-card ref="content" tabindex="-1" :tile="$vuetify.display.smAndDown">
       <v-toolbar flat color="navigation" :density="$vuetify.display.smAndDown ? 'compact' : 'comfortable'">

frontend/src/page/library/errors.vue

@@ -111,7 +111,12 @@
       @close="dialog.delete = false"
       @confirm="onConfirmDelete"
     ></p-confirm-dialog>
-    <v-dialog :model-value="details.visible" max-width="550" class="p-dialog">
+    <v-dialog
+      :model-value="details.visible"
+      max-width="550"
+      class="p-dialog"
+      @keydown.esc.exact="details.visible = false"
+    >
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon v-if="details.err.Level === 'error'" icon="mdi-alert-circle-outline" color="error"></v-icon>