refactor: use popover for notifications

Author: andreasphil

scripts/app.js

@@ -81,7 +81,15 @@ export const List = defineComponent({
 
     const { run: runLoad, isLoading, hasError } = useAsyncTask(load);
 
-    onMounted(() => runLoad());
+    onMounted(async () => {
+      notificationEl.value?.showPopover();
+      const [, error] = await runLoad();
+      if (!error) {
+        notificationEl.value?.hidePopover();
+      }
+    });
+
+    const notificationEl = useTemplateRef("notificationEl");
 
     /* -------------------------------------------------- *
      * Searching                                          *
@@ -223,23 +231,16 @@ export const List = defineComponent({
       </div>
     </main>
 
-    <!-- Status notification -->
-    <div class="status-layout">
-      <Transition name="slide">
-        <div
-          v-if="isLoading || hasError"
-          aria-busy="true"
-          class="status"
-          data-color-scheme="inverted"
-        >
-          <small class="status-label">
-            <template v-if="!hasError">Fetching your stuff ...</template>
-            <template v-else>🚨 Couldn&rsquo;t fetch your stars!</template>
-          </small>
-        </div>
-      </Transition>
-    </div>
-  </div>`,
+    <div
+      :aria-busy="isLoading"
+      class="notification"
+      data-color-scheme="inverted"
+      popover="manual"
+      ref="notificationEl"
+    >
+      <template v-if="!hasError">Fetching your stuff ...</template>
+      <template v-else>🚨 Couldn&rsquo;t fetch your stars!</template>
+    </div>`,
 });
 
 /* -------------------------------------------------- *

styles/styles.css

@@ -160,37 +160,33 @@ layer(theme);
  * Fetch status                                       *
  * -------------------------------------------------- */
 
-.status-layout {
-  bottom: var(--body-padding-y);
-  display: flex;
-  justify-content: center;
-  left: 0;
-  pointer-events: none;
-  position: fixed;
-  right: 0;
-}
-
-.status {
+.notification {
   background: var(--c-surface-bg);
   border-radius: 9999px;
-  color: var(--primary);
-  padding: 0.75rem 1.125rem;
-  pointer-events: auto;
-}
-
-.status-label {
+  border: none;
   color: var(--c-surface-fg);
+  font-size: var(--font-size-small);
   font-weight: var(--font-weight-medium);
-}
+  inset-block: auto var(--body-padding-y);
+  opacity: 0;
+  padding: 0.75rem 1.125rem;
+  position: fixed;
+  transition: all var(--transition) allow-discrete;
+  translate: 0 1rem;
 
-.slide-enter-active,
-.slide-leave-active {
-  transition: 0.1s ease;
-  transition-property: transform, opacity;
-}
+  &:popover-open {
+    opacity: 1;
+    translate: 0 0;
+  }
 
-.slide-enter-from,
-.slide-leave-to {
-  transform: scale(0.8);
-  opacity: 0;
+  @starting-style {
+    &:popover-open {
+      opacity: 0;
+      translate: 0 1rem;
+    }
+  }
+
+  &[aria-busy]::before {
+    color: var(--primary);
+  }
 }