feat(spa): shared typepill + relativedate components

src/manager/components/RelativeDate.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ value: string | null | undefined }>();
+
+const display = computed(() => {
+  if (!props.value) return "—";
+  const ts = Date.parse(props.value);
+  if (Number.isNaN(ts)) return "—";
+  const diff = Date.now() - ts;
+  const sec = Math.floor(diff / 1000);
+  if (sec < 60) return "just now";
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.floor(hr / 24);
+  if (day < 7) return `${day}d ago`;
+  if (day < 30) return `${Math.floor(day / 7)}w ago`;
+  if (day < 365) return `${Math.floor(day / 30)}mo ago`;
+  return `${Math.floor(day / 365)}y ago`;
+});
+</script>
+
+<template>
+  <span class="text-xs text-wp-text2" :title="value || ''">{{ display }}</span>
+</template>

src/manager/components/TypePill.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ModuleType } from "../api/types";
+
+const props = defineProps<{ type: ModuleType | "combine" | "derive" }>();
+
+const meta = computed(() => {
+  switch (props.type) {
+    case "wildcard":
+      return { icon: "pi pi-th-large", label: "Wildcard", cls: "type-pill--wildcard" };
+    case "fixed_values":
+      return { icon: "pi pi-tag", label: "Fixed values", cls: "type-pill--fixed" };
+    case "combine":
+      return { icon: "pi pi-link", label: "Combine", cls: "type-pill--combine" };
+    case "derive":
+      return { icon: "pi pi-code", label: "Derive", cls: "type-pill--derive" };
+    default:
+      return { icon: "pi pi-question", label: String(props.type), cls: "" };
+  }
+});
+</script>
+
+<template>
+  <span class="type-pill" :class="meta.cls">
+    <i :class="meta.icon" aria-hidden="true" />
+    <span>{{ meta.label }}</span>
+  </span>
+</template>
+
+<style scoped>
+.type-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 9px;
+  letter-spacing: 0.3px;
+}
+.type-pill--wildcard { color: var(--wp-violet); background: var(--wp-violet-bg); }
+.type-pill--fixed    { color: var(--wp-rose);   background: var(--wp-rose-bg); }
+.type-pill--combine  { color: var(--wp-teal);   background: var(--wp-teal-bg); }
+.type-pill--derive   { color: var(--wp-green);  background: var(--wp-green-bg); }
+</style>