feat(ui): finalize shared shells and loading states

web/src/components/shared/TableLoadingState.vue

@@ -1,25 +1,30 @@
 <template>
-  <div
-    class="table-loading"
-    :class="[variant, tone]"
-    role="status"
-    :aria-label="ariaLabel"
-    aria-live="polite"
-  >
-    <span class="table-loading__spinner" aria-hidden="true">
-      <i :class="icon"></i>
-    </span>
-
-    <div v-if="hasCopy" class="table-loading__copy">
-      <strong v-if="title">{{ title }}</strong>
-      <p v-if="message">{{ message }}</p>
+  <span v-if="floating" class="table-loading-anchor" aria-hidden="true"></span>
+  <Teleport to="body" :disabled="!floating">
+    <div
+      class="table-loading"
+      :class="[variant, tone, { 'screen-floating': floating, 'modal-floating': floating && blocking }]"
+      role="status"
+      :aria-label="ariaLabel"
+      aria-live="polite"
+    >
+      <FloatingLightBandWindow
+        :icon="icon"
+        :message="message"
+        :motion="motion"
+        :title="title"
+        :tone="tone"
+        :variant="variant"
+      />
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script setup>
 import { computed } from 'vue'
 
+import FloatingLightBandWindow from './FloatingLightBandWindow.vue'
+
 const props = defineProps({
   variant: {
     type: String,
@@ -34,50 +39,75 @@ const props = defineProps({
   title: { type: String, default: '' },
   message: { type: String, default: '' },
   icon: { type: String, default: 'mdi mdi-loading' },
+  motion: {
+    type: String,
+    default: 'loop',
+    validator: (value) => ['loop', 'entry'].includes(value)
+  },
+  floating: { type: Boolean, default: false },
+  blocking: { type: Boolean, default: false },
   showSkeleton: { type: Boolean, default: true },
   skeletonRows: { type: Number, default: 5 }
 })
 
-const hasCopy = computed(() => Boolean(props.title || props.message))
-
 const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).join(', ') || 'Loading')
 </script>
 
 <style scoped>
 .table-loading {
-  --accent: var(--theme-primary);
-  --accent-deep: var(--theme-primary-active);
   width: 100%;
   color: #64748b;
 }
 
-.table-loading.theme,
-.table-loading.sky {
-  --accent: var(--theme-primary);
-  --accent-deep: var(--theme-primary-active);
+.table-loading-anchor {
+  display: block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 }
 
-.table-loading.success {
-  --accent: var(--success);
-  --accent-deep: var(--success-hover);
+.table-loading.screen-floating {
+  position: fixed;
+  inset: 0;
+  z-index: 430;
+  width: 100vw;
+  height: 100dvh;
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(248, 250, 252, 0.08);
+  backdrop-filter: blur(0.5px);
+  -webkit-backdrop-filter: blur(0.5px);
+  pointer-events: none;
+}
+
+.table-loading.screen-floating.modal-floating {
+  z-index: 560;
+  background: rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  pointer-events: auto;
 }
 
 .table-loading.panel {
   min-height: 220px;
   display: grid;
   place-items: center;
-  gap: 12px;
   padding: 28px 24px;
-  text-align: center;
+}
+
+.table-loading.panel.screen-floating {
+  min-height: 100dvh;
+  padding: 24px;
 }
 
 .table-loading.detail {
   min-height: 180px;
-  display: flex;
+  display: grid;
   align-items: center;
-  gap: 14px;
+  justify-items: center;
   padding: 22px 24px;
-  text-align: left;
 }
 
 .table-loading.overlay,
@@ -97,86 +127,9 @@ const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).jo
 }
 
 .table-loading.banner {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+  display: block;
   min-height: 0;
   padding: 0;
   color: #255b7d;
 }
-
-.table-loading__spinner {
-  width: 38px;
-  height: 38px;
-  display: inline-grid;
-  place-items: center;
-  border: 3px solid #e2e8f0;
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  color: var(--accent-deep);
-  animation: table-spinner-rotate 0.8s linear infinite !important;
-}
-
-.table-loading.detail .table-loading__spinner {
-  width: 34px;
-  height: 34px;
-}
-
-.table-loading.banner .table-loading__spinner {
-  width: 18px;
-  height: 18px;
-  border-width: 2px;
-}
-
-.table-loading__spinner i {
-  display: none;
-}
-
-.table-loading__copy {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.table-loading.panel .table-loading__copy,
-.table-loading.overlay .table-loading__copy,
-.table-loading.drawer .table-loading__copy {
-  max-width: 360px;
-}
-
-.table-loading.detail .table-loading__copy {
-  flex: 1;
-}
-
-.table-loading.banner .table-loading__copy {
-  display: inline;
-}
-
-.table-loading__copy strong {
-  color: #0f172a;
-  font-size: 14px;
-  font-weight: 850;
-  line-height: 1.4;
-}
-
-.table-loading__copy p {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.65;
-}
-
-.table-loading.banner .table-loading__copy strong {
-  display: none;
-}
-
-.table-loading.banner .table-loading__copy p {
-  font-size: 12px;
-  font-weight: 700;
-}
-
-@keyframes table-spinner-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>