refactor(admin): unify webui fetch/copy/format helpers; fix audit tab load and delete-group count

- apiFetch + shared needLogin (any 401 shows the login card) replaces six
  duplicated fetch/401/error-handling blocks in the admin composables
- useCopy composable: clipboard + execCommand fallback with timed reset,
  used by MembersPanel and WebhookPanel
- utils/format.ts (fmtTime/splitList/parseMatch) removes inline duplicates
  across SendLogs, AuditLog, RouteEditor and GroupEditor
- fix: load the audit log when the audit tab becomes active (client-side
  navigation never remounted the page, leaving the list empty on first visit)
- fix: fetch the real route count for a group before confirming deletion
  instead of reusing the currently open group's route list

app/components/AuditLog.vue

@@ -70,10 +70,6 @@ const emit = defineEmits<{
   (e: "update:selectedGroupId", value: string): void;
 }>();
 
-function fmtTime(ts: number): string {
-  return new Date(ts).toLocaleString();
-}
-
 function refresh(): void {
   emit("refresh");
 }

app/components/ConsolePage.vue

@@ -311,9 +311,18 @@ onMounted(() => {
   }
   loadGroups();
   loadLogs(50, logFilterGroup.value || undefined);
-  if (view.value === "audit") loadAudit(50, auditFilterGroup.value || undefined);
 });
 
+// Tab switches are client-side navigations (no remount), so load the audit
+// log whenever the audit view becomes active — including direct deep links.
+watch(
+  view,
+  (v) => {
+    if (v === "audit") loadAudit(50, auditFilterGroup.value || undefined);
+  },
+  { immediate: true },
+);
+
 function switchView(next: "groups" | "logs" | "audit"): void {
   const path = next === "groups" ? "/admin" : `/admin/${next}`;
   if (route.path !== path) router.replace(path);
@@ -469,7 +478,17 @@ async function onSaveGroup(group: Group): Promise<void> {
 }
 
 async function onDeleteGroup(group: Group): Promise<void> {
-  const used = groupRoutes.value.filter((r) => r.groupId === group.id).length;
+  // Fetch the real route count for this group instead of relying on the
+  // routes of whichever group happens to be open in the detail view.
+  let used = 0;
+  try {
+    const data = await apiFetch<{ routes?: Route[] }>(
+      `/admin/api/groups/${encodeURIComponent(group.id)}/routes`,
+    );
+    used = (data.routes ?? []).length;
+  } catch {
+    // Count is best-effort; proceed without the warning.
+  }
   const warn = used ? t("confirm.deleteGroupWarn", { n: used }) : "";
   if (!window.confirm(t("confirm.deleteGroup", { name: group.name || group.id }) + warn)) return;
   try {

app/components/GroupEditor.vue

@@ -216,13 +216,6 @@ const form = reactive({
   logTopicId: "",
 });
 
-function splitList(text: string): string[] {
-  return text
-    .split(",")
-    .map((s) => s.trim())
-    .filter(Boolean);
-}
-
 function toggleProvider(p: "github" | "gitea", e: Event): void {
   const checked = (e.target as HTMLInputElement).checked;
   form.providers = checked

app/components/MembersPanel.vue

@@ -72,7 +72,7 @@
           <span class="role-pill" :class="inv.role">{{ t("roles." + inv.role) }}</span>
           <span class="invite-exp">{{ fmtExp(inv.expiresAt) }}</span>
           <button class="btn btn-ghost btn-sm" @click="copyInvite(inv)">
-            {{ copiedToken === inv.token ? t("members.copied") : t("members.copyLink") }}
+            {{ copied === inv.token ? t("members.copied") : t("members.copyLink") }}
           </button>
           <button class="icon-btn danger" @click="revoke(inv)">{{ t("members.revoke") }}</button>
         </li>
@@ -101,8 +101,8 @@ const newLogin = ref("");
 const newRole = ref<GroupRole>("admin");
 const inviteRole = ref<"admin" | "viewer">("admin");
 const inviting = ref(false);
-const copiedToken = ref("");
 const formError = ref("");
+const { copied, copy } = useCopy(2000);
 
 watch(
   () => props.group,
@@ -175,11 +175,7 @@ async function createInvite(): Promise<void> {
         ...invites.value,
       ];
     }
-    copyText(`${window.location.origin}${url}`);
-    copiedToken.value = token;
-    window.setTimeout(() => {
-      copiedToken.value = "";
-    }, 2000);
+    copy(`${window.location.origin}${url}`, token);
     await loadInvites();
   } catch (err) {
     formError.value = err instanceof Error ? err.message : String(err);
@@ -190,11 +186,7 @@ async function createInvite(): Promise<void> {
 
 async function copyInvite(inv: GroupInvite): Promise<void> {
   const url = `${window.location.origin}/admin/invite?token=${inv.token}`;
-  copyText(url);
-  copiedToken.value = inv.token;
-  window.setTimeout(() => {
-    copiedToken.value = "";
-  }, 2000);
+  await copy(url, inv.token);
 }
 
 async function revoke(inv: GroupInvite): Promise<void> {
@@ -206,19 +198,6 @@ async function revoke(inv: GroupInvite): Promise<void> {
   }
 }
 
-async function copyText(text: string): Promise<void> {
-  try {
-    await navigator.clipboard.writeText(text);
-  } catch {
-    const ta = document.createElement("textarea");
-    ta.value = text;
-    document.body.appendChild(ta);
-    ta.select();
-    document.execCommand("copy");
-    document.body.removeChild(ta);
-  }
-}
-
 function shortToken(token: string): string {
   return token.slice(0, 8) + "…";
 }

app/components/RouteEditor.vue

@@ -210,15 +210,6 @@ const form = reactive({
   filters: [] as FilterForm[],
 });
 
-function parseMatch(text: string): string | string[] | null {
-  const parts = text
-    .split(",")
-    .map((s) => s.trim())
-    .filter(Boolean);
-  if (!parts.length) return null;
-  return parts.length === 1 ? parts[0]! : parts;
-}
-
 function blankFilter(): FilterForm {
   return { type: "event", match: "", exclude: false, matchText: "" };
 }

app/components/SendLogs.vue

@@ -137,10 +137,6 @@ const detailRows = computed(() => {
   return rows;
 });
 
-function fmtTime(ts: number): string {
-  return new Date(ts).toLocaleString();
-}
-
 function refresh(): void {
   emit("refresh");
 }

app/components/WebhookPanel.vue

@@ -12,7 +12,7 @@
         <span class="wh-label">{{ t("webhook.url") }}</span>
         <code class="wh-value">{{ info.url }}</code>
         <button class="btn btn-ghost btn-sm" @click="copy(info.url, 'url')">
-          {{ copiedUrl ? t("webhook.copied") : t("webhook.copy") }}
+          {{ copied === "url" ? t("webhook.copied") : t("webhook.copy") }}
         </button>
       </div>
 
@@ -26,7 +26,7 @@
           class="btn btn-ghost btn-sm"
           @click="copy(info.secret!, 'secret')"
         >
-          {{ copiedSecret ? t("webhook.copied") : t("webhook.copy") }}
+          {{ copied === "secret" ? t("webhook.copied") : t("webhook.copy") }}
         </button>
       </div>
       <p v-if="info.hasSecret && !info.secret" class="hint">{{ t("webhook.secretHidden") }}</p>
@@ -68,10 +68,9 @@ const props = defineProps<{ groupId: string; canEdit: boolean }>();
 
 const api = useWebhookApi();
 const info = ref<GroupWebhookInfo | null>(null);
-const copiedUrl = ref(false);
-const copiedSecret = ref(false);
 const busy = ref(false);
 const error = ref("");
+const { copied, copy } = useCopy();
 
 const maskedSecret = "••••••••••••••••";
 const customExample = [
@@ -112,7 +111,6 @@ async function onRegenerate(): Promise<void> {
   error.value = "";
   try {
     info.value = await api.regenerate(props.groupId);
-    copiedSecret.value = false;
   } catch (err) {
     error.value = err instanceof Error ? err.message : String(err);
   } finally {
@@ -132,23 +130,4 @@ async function onDisable(): Promise<void> {
     busy.value = false;
   }
 }
-
-async function copy(text: string, which: "url" | "secret"): Promise<void> {
-  try {
-    await navigator.clipboard.writeText(text);
-    if (which === "url") {
-      copiedUrl.value = true;
-      window.setTimeout(() => {
-        copiedUrl.value = false;
-      }, 1500);
-    } else {
-      copiedSecret.value = true;
-      window.setTimeout(() => {
-        copiedSecret.value = false;
-      }, 1500);
-    }
-  } catch {
-    // ignore clipboard failures
-  }
-}
 </script>