From 60e41b425ba67421455d3e6fa4ba23cbb27e4807 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Mon, 14 Apr 2025 17:29:58 +0200
Subject: [PATCH 1/3] UX: Refactor notification teleport and transition in
 notify.vue

Signed-off-by: Michael Mayer <michael@photoprism.app>
---
 frontend/src/component/notify.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/notify.vue b/frontend/src/component/notify.vue
index 569decf4b..362dc8e0d 100644
--- a/frontend/src/component/notify.vue
+++ b/frontend/src/component/notify.vue
@@ -1,8 +1,9 @@
 <template>
   <teleport to="body">
-    <transition name="fade-transition">
-      <div v-if="visible" id="p-notify" tabindex="-1">
+    <div id="p-notify" tabindex="-1">
+      <transition name="fade-transition">
         <div
+          v-if="visible"
           :class="'p-notify--' + message.color"
           class="v-snackbar v-snackbar--bottom v-snackbar--center p-notify"
           role="alert"
@@ -29,8 +30,8 @@
             </div>
           </div>
         </div>
-      </div>
-    </transition>
+      </transition>
+    </div>
   </teleport>
 </template>
 <script>
@@ -142,14 +143,6 @@ export default {
         this.showNext();
       }
     },
-    onSnackbar(show) {
-      if (show) {
-        this.snackbar = true;
-      } else {
-        this.snackbar = false;
-        this.showNext();
-      }
-    },
     showNext() {
       const message = this.messages.shift();
 

From 61ceed072645f289d2bbe963d697bf0ec048b570 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Mon, 14 Apr 2025 17:41:05 +0200
Subject: [PATCH 2/3] UX: Refactor notification styles in notify.css and
 notify.vue

Signed-off-by: Michael Mayer <michael@photoprism.app>
---
 frontend/src/component/notify.vue | 11 +++++------
 frontend/src/css/notify.css       | 16 ++++++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/notify.vue b/frontend/src/component/notify.vue
index 362dc8e0d..2c0b22caf 100644
--- a/frontend/src/component/notify.vue
+++ b/frontend/src/component/notify.vue
@@ -1,18 +1,17 @@
 <template>
   <teleport to="body">
-    <div id="p-notify" tabindex="-1">
+    <div id="notify">
       <transition name="fade-transition">
         <div
           v-if="visible"
           :class="'p-notify--' + message.color"
-          class="v-snackbar v-snackbar--bottom v-snackbar--center p-notify"
+          class="p-notify v-snackbar"
           role="alert"
-          tabindex="-1"
           @click.stop.prevent="showNext"
         >
-          <div class="v-snackbar__wrapper v-snackbar--variant-flat">
+          <div class="v-snackbar__wrapper">
             <span class="v-snackbar__underlay"></span>
-            <div tabindex="-1" class="v-snackbar__content">
+            <div class="v-snackbar__content">
               <i
                 v-if="message.icon"
                 :class="['text-' + message.color, 'mdi-' + message.icon]"
@@ -54,7 +53,7 @@ export default {
       defaultColor: "info",
       defaultDelay: 2000,
       warningDelay: 3000,
-      errorDelay: 8000,
+      errorDelay: 6000,
     };
   },
   created() {
diff --git a/frontend/src/css/notify.css b/frontend/src/css/notify.css
index 5876bdf16..b3dc516f3 100644
--- a/frontend/src/css/notify.css
+++ b/frontend/src/css/notify.css
@@ -1,6 +1,6 @@
 /* Notifications */
 
-#p-notify {
+#notify {
     position: fixed;
     z-index: 2500;
     top: auto;
@@ -24,7 +24,7 @@
     pointer-events: none;
 }
 
-#p-notify .v-snackbar {
+#notify .v-snackbar {
     margin-left: auto;
     margin-right: auto;
     width: auto;
@@ -33,7 +33,7 @@
     margin-bottom: 24px;
 }
 
-#p-notify .v-snackbar .v-snackbar__wrapper {
+#notify .v-snackbar .v-snackbar__wrapper {
     cursor: pointer;
     color: rgba(var(--v-theme-on-surface), 1);
     background-color: rgba(var(--v-theme-surface), 0.32);
@@ -44,7 +44,7 @@
     border-radius: 9999px;
 }
 
-#p-notify .v-snackbar__wrapper .v-snackbar__content {
+#notify .v-snackbar__wrapper .v-snackbar__content {
     z-index: 2;
     display: flex;
     gap: 4px;
@@ -58,7 +58,7 @@
     margin: 0;
 }
 
-#p-notify .v-snackbar__wrapper .v-snackbar__content .p-notify__icon {
+#notify .v-snackbar__wrapper .v-snackbar__content .p-notify__icon {
     margin: 0;
     align-self: center;
     font-size: 22px;
@@ -66,7 +66,7 @@
     width: 22px;
 }
 
-#p-notify .v-snackbar__wrapper .v-snackbar__content .p-notify__text {
+#notify .v-snackbar__wrapper .v-snackbar__content .p-notify__text {
     flex-grow: 1;
     margin: 2px 8px;
     padding: 0;
@@ -74,7 +74,7 @@
     align-self: center;
 }
 
-#p-notify .v-snackbar__wrapper .v-snackbar__content .p-notify__close {
+#notify .v-snackbar__wrapper .v-snackbar__content .p-notify__close {
     opacity: 0.78;
     font-size: 24px;
     height: 24px;
@@ -115,7 +115,7 @@
 }
 
 @media only screen and (min-width: 600px) {
-    #p-notify .v-snackbar {
+    #notify .v-snackbar {
         min-width: 280px;
         margin-bottom: 16px;
     }

From 0b390f356fda234ad2a70f25398356c5db76bfe9 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Mon, 14 Apr 2025 17:41:49 +0200
Subject: [PATCH 3/3] UX: Add role attributes to progress bars in
 templates/app.gohtml

Signed-off-by: Michael Mayer <michael@photoprism.app>
---
 assets/templates/app.gohtml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/templates/app.gohtml b/assets/templates/app.gohtml
index 59b8470e9..66bffd953 100644
--- a/assets/templates/app.gohtml
+++ b/assets/templates/app.gohtml
@@ -28,8 +28,8 @@
       <div class="splash-logo">
         {{template "logo.gohtml" .}}
       </div>
-      <progress id="progress" class="html-progress" max="100"></progress>
+      <progress id="progress" class="html-progress" role="progressbar" max="100"></progress>
     </div>
   </div>
 </div>
-<div id="busy-overlay"><div class="splash-center"><progress id="busy-progress" class="html-progress" max="100"></progress></div></div>
\ No newline at end of file
+<div id="busy-overlay"><div class="splash-center"><progress id="busy-progress" class="html-progress" role="progressbar" max="100"></progress></div></div>
\ No newline at end of file