Admin & staff page enhancements (#3333)

packages/ui/src/components/base/CopyCode.vue

@@ -37,7 +37,7 @@ async function copyText() {
   margin: 0;
   padding: 0.25rem 0.5rem;
   background-color: var(--color-button-bg);
-  width: min-content;
+  width: fit-content;
   border-radius: 10px;
   user-select: text;
   transition:
@@ -50,12 +50,6 @@ async function copyText() {
     transition: none !important;
   }
 
-  span {
-    max-width: 10rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   svg {
     width: 1em;
     height: 1em;

packages/ui/src/components/base/Timeline.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    fadeOutStart?: boolean
+    fadeOutEnd?: boolean
+  }>(),
+  {
+    fadeOutStart: false,
+    fadeOutEnd: false,
+  },
+)
+</script>
+<template>
+  <div class="relative flex flex-col gap-4 pb-6 isolate">
+    <div class="absolute flex h-full w-4 justify-center">
+      <div
+        class="timeline-indicator"
+        :class="{ 'fade-out-start': fadeOutStart, 'fade-out-end': fadeOutEnd }"
+      />
+    </div>
+    <slot />
+  </div>
+</template>
+<style lang="scss" scoped>
+.timeline-indicator {
+  background-image: linear-gradient(
+    to bottom,
+    var(--timeline-line-color, var(--color-raised-bg)) 66%,
+    rgba(255, 255, 255, 0) 0%
+  );
+  background-size: 100% 30px;
+  background-repeat: repeat-y;
+  margin-top: 1rem;
+
+  height: calc(100% - 1rem);
+  width: 4px;
+  z-index: -1;
+
+  &.fade-out-start {
+    mask-image: linear-gradient(to top, black calc(100% - 15rem), transparent 100%);
+  }
+
+  &.fade-out-end {
+    mask-image: linear-gradient(to bottom, black calc(100% - 15rem), transparent 100%);
+  }
+
+  &.fade-out-start.fade-out-end {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 8rem,
+      black calc(100% - 8rem),
+      transparent 100%
+    );
+  }
+}
+</style>

packages/ui/src/components/index.ts

@@ -35,6 +35,7 @@ export { default as Slider } from './base/Slider.vue'
 export { default as StatItem } from './base/StatItem.vue'
 export { default as TagItem } from './base/TagItem.vue'
 export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
+export { default as Timeline } from './base/Timeline.vue'
 export { default as Toggle } from './base/Toggle.vue'
 
 // Branding

packages/ui/src/components/modal/NewModal.vue

@@ -90,7 +90,7 @@ function addBodyPadding() {
 }
 
 function show(event?: MouseEvent) {
-  props.onShow()
+  props.onShow?.()
   open.value = true
 
   addBodyPadding()