Notification UI

<template>
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload }" force-open>
    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0 translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 translate-y-2"
    >
      <div v-if="isCurrentChunksOutdated" class="fixed bottom-4 right-4 z-50">
        <div class="flex items-center gap-3 bg-default rounded-full shadow-lg ring-1 ring-[var(--ui-border)] px-4 py-3">
          <span class="text-lg">✨</span>
          <div class="text-sm font-medium">
            Update available
          </div>
          <UiButton purpose="cta" size="xs" label="Refresh" @click="reload" />
          <UiButton purpose="quiet" size="xs" icon="close" aria-label="Dismiss update" @click="dismiss" />
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
    <Transition name="slide-up">
      <div v-if="isCurrentChunksOutdated" class="skew-notification">
        <div class="skew-notification-content">
          <div class="skew-notification-message">
            <span class="skew-notification-icon">✨</span>
            <div>
              <div class="skew-notification-title">
                New update available!
              </div>
              <div v-if="timeAgo" class="skew-notification-subtitle">
                Released {{ timeAgo }}
              </div>
            </div>
          </div>
          <div class="skew-notification-actions">
            <button class="skew-button skew-button-secondary" @click="dismiss">
              Dismiss
            </button>
            <button class="skew-button skew-button-primary" @click="reload">
              Refresh
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>

<style>
.skew-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  max-width: 400px;
}
.skew-notification-content {
  background: var(--ui-bg);
  border-radius: calc(var(--ui-radius) * 3);
  box-shadow: var(--elevation-overlay);
  padding: 1rem 1.25rem;
  border: 1px solid var(--ui-border);
}
.skew-notification-message {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.skew-notification-title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.skew-notification-subtitle {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
}
.skew-notification-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.skew-button {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--ui-radius) * 1.5);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.skew-button-primary {
  background: var(--ui-bg-inverted);
  color: var(--ui-text-inverted);
}
.skew-button-secondary {
  background: var(--ui-bg-muted);
  color: var(--ui-text-muted);
}
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s var(--ease-standard);
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(1rem);
}
</style>