feat: production-harden app and finalize merge-ready UX/theme baseline
- complete tokenized theme preset system and admin style guide visibility - refine dashboard layout/scroll behavior and shared async/request UI states - add user nav-visibility settings across API, migration, and frontend stores - harden security headers/CSP handling and related test coverage - enforce CI repository hygiene + frontend contract/theme/build quality gates - update docs/env references and make migration smoke test head-aware
This commit is contained in:
parent
ab1d29b203
commit
ae2ca8f149
66 changed files with 5655 additions and 853 deletions
|
|
@ -1,18 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppCheckbox from "@/components/ui/AppCheckbox.vue";
|
||||
import AppEmptyState from "@/components/ui/AppEmptyState.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import AppInput from "@/components/ui/AppInput.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import AppModal from "@/components/ui/AppModal.vue";
|
||||
import AppTable from "@/components/ui/AppTable.vue";
|
||||
import {
|
||||
createAdminUser,
|
||||
listAdminUsers,
|
||||
resetAdminUserPassword,
|
||||
setAdminUserActive,
|
||||
type AdminUser,
|
||||
} from "@/features/admin_users";
|
||||
|
|
@ -21,16 +23,21 @@ import { ApiRequestError } from "@/lib/api/errors";
|
|||
const loading = ref(true);
|
||||
const creating = ref(false);
|
||||
const togglingUserId = ref<number | null>(null);
|
||||
const resettingPassword = ref(false);
|
||||
const activeUserId = ref<number | null>(null);
|
||||
const users = ref<AdminUser[]>([]);
|
||||
|
||||
const email = ref("");
|
||||
const password = ref("");
|
||||
const createIsAdmin = ref(false);
|
||||
const resetPassword = ref("");
|
||||
|
||||
const errorMessage = ref<string | null>(null);
|
||||
const errorRequestId = ref<string | null>(null);
|
||||
const successMessage = ref<string | null>(null);
|
||||
|
||||
const activeUser = computed(() => users.value.find((item) => item.id === activeUserId.value) ?? null);
|
||||
|
||||
function formatDate(value: string): string {
|
||||
const asDate = new Date(value);
|
||||
if (Number.isNaN(asDate.getTime())) {
|
||||
|
|
@ -39,6 +46,26 @@ function formatDate(value: string): string {
|
|||
return asDate.toLocaleString();
|
||||
}
|
||||
|
||||
function userRoleLabel(user: AdminUser): string {
|
||||
return user.is_admin ? "Admin" : "User";
|
||||
}
|
||||
|
||||
function statusDotClass(user: AdminUser): string {
|
||||
return user.is_active
|
||||
? "bg-success-500 ring-success-200"
|
||||
: "bg-ink-muted/70 ring-stroke-default";
|
||||
}
|
||||
|
||||
function openUserModal(user: AdminUser): void {
|
||||
activeUserId.value = user.id;
|
||||
resetPassword.value = "";
|
||||
}
|
||||
|
||||
function closeUserModal(): void {
|
||||
activeUserId.value = null;
|
||||
resetPassword.value = "";
|
||||
}
|
||||
|
||||
async function loadUsers(): Promise<void> {
|
||||
loading.value = true;
|
||||
errorMessage.value = null;
|
||||
|
|
@ -46,6 +73,9 @@ async function loadUsers(): Promise<void> {
|
|||
|
||||
try {
|
||||
users.value = await listAdminUsers();
|
||||
if (activeUserId.value !== null && !users.value.some((item) => item.id === activeUserId.value)) {
|
||||
closeUserModal();
|
||||
}
|
||||
} catch (error) {
|
||||
users.value = [];
|
||||
if (error instanceof ApiRequestError) {
|
||||
|
|
@ -115,6 +145,40 @@ async function onToggleUser(user: AdminUser): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
async function onResetPassword(): Promise<void> {
|
||||
const user = activeUser.value;
|
||||
if (!user) {
|
||||
return;
|
||||
}
|
||||
|
||||
resettingPassword.value = true;
|
||||
successMessage.value = null;
|
||||
errorMessage.value = null;
|
||||
errorRequestId.value = null;
|
||||
|
||||
try {
|
||||
const candidate = resetPassword.value.trim();
|
||||
if (candidate.length < 12) {
|
||||
throw new Error("New password must be at least 12 characters.");
|
||||
}
|
||||
|
||||
const result = await resetAdminUserPassword(user.id, candidate);
|
||||
successMessage.value = result.message || `Password reset for ${user.email}.`;
|
||||
resetPassword.value = "";
|
||||
} catch (error) {
|
||||
if (error instanceof ApiRequestError) {
|
||||
errorMessage.value = error.message;
|
||||
errorRequestId.value = error.requestId;
|
||||
} else if (error instanceof Error) {
|
||||
errorMessage.value = error.message;
|
||||
} else {
|
||||
errorMessage.value = "Unable to reset password.";
|
||||
}
|
||||
} finally {
|
||||
resettingPassword.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadUsers();
|
||||
});
|
||||
|
|
@ -122,27 +186,27 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<AppPage title="Admin Users" subtitle="Create and manage user access for this instance.">
|
||||
<AppAlert v-if="successMessage" tone="success" dismissible @dismiss="successMessage = null">
|
||||
<template #title>Operation complete</template>
|
||||
<p>{{ successMessage }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>User management request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
<RequestStateAlerts
|
||||
:success-message="successMessage"
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="User management request failed"
|
||||
@dismiss-success="successMessage = null"
|
||||
/>
|
||||
|
||||
<section class="grid gap-4 lg:grid-cols-2">
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Create User</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Create User</h2>
|
||||
<AppHelpHint text="Create local accounts for this Scholarr instance and optionally grant admin rights." />
|
||||
</div>
|
||||
<form class="grid gap-3" @submit.prevent="onCreateUser">
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Email</span>
|
||||
<AppInput id="admin-user-email" v-model="email" type="email" autocomplete="off" />
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Password</span>
|
||||
<AppInput id="admin-user-password" v-model="password" type="password" autocomplete="new-password" />
|
||||
</label>
|
||||
|
|
@ -156,44 +220,97 @@ onMounted(() => {
|
|||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Users</h2>
|
||||
<AppSkeleton v-if="loading" :lines="5" />
|
||||
|
||||
<AppEmptyState
|
||||
v-else-if="users.length === 0"
|
||||
title="No users available"
|
||||
body="Create an account to begin assigning access."
|
||||
/>
|
||||
|
||||
<AppTable v-else label="Admin users table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Role</th>
|
||||
<th scope="col">Active</th>
|
||||
<th scope="col">Updated</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>{{ user.email }}</td>
|
||||
<td>{{ user.is_admin ? "Admin" : "User" }}</td>
|
||||
<td>{{ user.is_active ? "Yes" : "No" }}</td>
|
||||
<td>{{ formatDate(user.updated_at) }}</td>
|
||||
<td>
|
||||
<AppButton
|
||||
variant="secondary"
|
||||
:disabled="togglingUserId === user.id"
|
||||
@click="onToggleUser(user)"
|
||||
>
|
||||
{{ user.is_active ? "Deactivate" : "Activate" }}
|
||||
</AppButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</AppTable>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Users</h2>
|
||||
<AppHelpHint text="Review account roles and active status. Inactive users cannot sign in." />
|
||||
</div>
|
||||
<AsyncStateGate
|
||||
:loading="loading"
|
||||
:loading-lines="5"
|
||||
:empty="users.length === 0"
|
||||
:show-empty="!errorMessage"
|
||||
empty-title="No users available"
|
||||
empty-body="Create an account to begin assigning access."
|
||||
>
|
||||
<AppTable label="Admin users table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="group inline-flex items-center gap-2 rounded-md px-1 py-0.5 text-left text-ink-primary transition hover:bg-surface-card-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
|
||||
@click="openUserModal(user)"
|
||||
>
|
||||
<span
|
||||
:class="statusDotClass(user)"
|
||||
class="h-2.5 w-2.5 rounded-full ring-2"
|
||||
:aria-label="user.is_active ? 'Active user' : 'Inactive user'"
|
||||
/>
|
||||
<span class="underline-offset-2 group-hover:underline">{{ user.email }}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>{{ userRoleLabel(user) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</AppTable>
|
||||
<p class="text-xs text-secondary">Status dot: green is active, gray is inactive. Click an email to manage.</p>
|
||||
</AsyncStateGate>
|
||||
</AppCard>
|
||||
</section>
|
||||
|
||||
<AppModal :open="activeUser !== null" title="User settings" @close="closeUserModal">
|
||||
<div v-if="activeUser" class="grid gap-4">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
:class="statusDotClass(activeUser)"
|
||||
class="h-2.5 w-2.5 rounded-full ring-2"
|
||||
:aria-label="activeUser.is_active ? 'Active user' : 'Inactive user'"
|
||||
/>
|
||||
<p class="truncate text-sm font-semibold text-ink-primary">{{ activeUser.email }}</p>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Role: {{ userRoleLabel(activeUser) }}</p>
|
||||
<p class="text-xs text-secondary">Last updated: {{ formatDate(activeUser.updated_at) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2 border-t border-stroke-default pt-3">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary" for="admin-user-reset-password">
|
||||
<span>Reset password</span>
|
||||
<AppInput
|
||||
id="admin-user-reset-password"
|
||||
v-model="resetPassword"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Minimum 12 characters"
|
||||
:disabled="resettingPassword"
|
||||
/>
|
||||
</label>
|
||||
<div class="flex flex-wrap justify-end gap-2">
|
||||
<AppButton variant="secondary" :disabled="resettingPassword" @click="onResetPassword">
|
||||
{{ resettingPassword ? "Resetting..." : "Reset password" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 border-t border-stroke-default pt-3">
|
||||
<AppButton
|
||||
variant="secondary"
|
||||
:disabled="togglingUserId === activeUser.id"
|
||||
@click="onToggleUser(activeUser)"
|
||||
>
|
||||
{{ activeUser.is_active ? "Deactivate user" : "Activate user" }}
|
||||
</AppButton>
|
||||
<AppButton variant="ghost" :disabled="togglingUserId === activeUser.id || resettingPassword" @click="closeUserModal">
|
||||
Close
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</AppModal>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,24 @@
|
|||
import { onMounted, ref } from "vue";
|
||||
|
||||
import { fetchDashboardSnapshot, type DashboardSnapshot } from "@/features/dashboard";
|
||||
import { triggerManualRun } from "@/features/runs";
|
||||
import { ApiRequestError } from "@/lib/api/errors";
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import QueueHealthBadge from "@/components/patterns/QueueHealthBadge.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import RunStatusBadge from "@/components/patterns/RunStatusBadge.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppEmptyState from "@/components/ui/AppEmptyState.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
|
||||
const loading = ref(true);
|
||||
const pendingRun = ref(false);
|
||||
const errorMessage = ref<string | null>(null);
|
||||
const errorRequestId = ref<string | null>(null);
|
||||
const successMessage = ref<string | null>(null);
|
||||
const snapshot = ref<DashboardSnapshot | null>(null);
|
||||
const auth = useAuthStore();
|
||||
|
||||
|
|
@ -50,138 +54,223 @@ async function loadSnapshot(): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
async function onTriggerRun(): Promise<void> {
|
||||
pendingRun.value = true;
|
||||
errorMessage.value = null;
|
||||
errorRequestId.value = null;
|
||||
successMessage.value = null;
|
||||
|
||||
try {
|
||||
const result = await triggerManualRun();
|
||||
successMessage.value = `Update check #${result.run_id} started successfully.`;
|
||||
await loadSnapshot();
|
||||
} catch (error) {
|
||||
if (error instanceof ApiRequestError) {
|
||||
errorMessage.value = error.message;
|
||||
errorRequestId.value = error.requestId;
|
||||
} else {
|
||||
errorMessage.value = "Unable to start an update check.";
|
||||
}
|
||||
} finally {
|
||||
pendingRun.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadSnapshot();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppPage title="Dashboard" subtitle="What changed since the latest run.">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<AppButton variant="secondary" @click="loadSnapshot" :disabled="loading">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
<QueueHealthBadge
|
||||
v-if="snapshot"
|
||||
:queued="snapshot.queue.queued"
|
||||
:retrying="snapshot.queue.retrying"
|
||||
:dropped="snapshot.queue.dropped"
|
||||
<AppPage
|
||||
title="Dashboard"
|
||||
subtitle="Track recent publication updates and monitor background profile checks."
|
||||
fill
|
||||
>
|
||||
<div class="flex min-h-0 flex-1 flex-col gap-4">
|
||||
<RequestStateAlerts
|
||||
:success-message="successMessage"
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="Dashboard request failed"
|
||||
@dismiss-success="successMessage = null"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>Dashboard request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
<div class="min-h-0 flex-1">
|
||||
<AsyncStateGate :loading="loading" :loading-lines="6" :show-empty="false">
|
||||
<template v-if="snapshot">
|
||||
<section class="grid min-h-0 gap-4 xl:h-full xl:grid-cols-2">
|
||||
<AppCard class="flex min-h-0 flex-col gap-4 xl:h-full xl:overflow-hidden">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Recent Publications</h2>
|
||||
<AppHelpHint
|
||||
text="Recent publications are paper records discovered from tracked scholar profile checks."
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Newest papers found while checking your tracked scholar profiles.</p>
|
||||
</div>
|
||||
<RouterLink to="/publications" class="link-inline text-sm">Open full publications view</RouterLink>
|
||||
</div>
|
||||
|
||||
<AppSkeleton v-if="loading" :lines="6" />
|
||||
<AppEmptyState
|
||||
v-if="snapshot.recentPublications.length === 0"
|
||||
title="No new publications"
|
||||
body="When a completed update check discovers changes, they will appear here."
|
||||
/>
|
||||
|
||||
<template v-else-if="snapshot">
|
||||
<section class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Snapshot Summary</h2>
|
||||
<p class="text-sm text-secondary">Latest view mode: {{ snapshot.mode }}</p>
|
||||
<ul class="grid gap-2 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
<li class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
Latest run introduced
|
||||
<span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ snapshot.newCount }}</span>
|
||||
publications.
|
||||
</li>
|
||||
<li class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
Total tracked publications:
|
||||
<span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ snapshot.totalCount }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppCard>
|
||||
<ul v-else class="grid min-h-0 flex-1 gap-3 overflow-y-auto pr-1">
|
||||
<li
|
||||
v-for="item in snapshot.recentPublications.slice(0, 20)"
|
||||
:key="item.publication_id"
|
||||
class="grid gap-1 rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2"
|
||||
>
|
||||
<a
|
||||
v-if="item.pub_url"
|
||||
:href="item.pub_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="link-inline text-sm font-semibold text-ink-primary"
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<span v-else class="text-sm font-semibold text-ink-primary">{{ item.title }}</span>
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-secondary">
|
||||
<RouterLink
|
||||
:to="{ name: 'publications', query: { scholar: String(item.scholar_profile_id) } }"
|
||||
class="link-inline"
|
||||
>
|
||||
{{ item.scholar_label }}
|
||||
</RouterLink>
|
||||
<span>First seen: {{ formatDate(item.first_seen_at) }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Latest Run</h2>
|
||||
<div v-if="snapshot.latestRun" class="space-y-2 text-sm">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<RunStatusBadge :status="snapshot.latestRun.status" />
|
||||
<RouterLink
|
||||
v-if="auth.isAdmin"
|
||||
:to="`/admin/runs/${snapshot.latestRun.id}`"
|
||||
class="link-inline"
|
||||
>
|
||||
Run #{{ snapshot.latestRun.id }}
|
||||
</RouterLink>
|
||||
<span v-else class="text-secondary">Run #{{ snapshot.latestRun.id }}</span>
|
||||
</div>
|
||||
<p class="text-secondary">Started: {{ formatDate(snapshot.latestRun.start_dt) }}</p>
|
||||
<p class="text-muted">
|
||||
{{ snapshot.latestRun.scholar_count }} scholars, {{ snapshot.latestRun.new_publication_count }} new
|
||||
publications
|
||||
</p>
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-else
|
||||
title="No runs recorded"
|
||||
body="Trigger a manual run from the Runs screen to begin tracking."
|
||||
/>
|
||||
</AppCard>
|
||||
</section>
|
||||
<div class="grid min-h-0 gap-4 xl:h-full xl:grid-rows-[auto_minmax(0,1fr)]">
|
||||
<AppCard class="flex min-h-0 flex-col gap-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Overview</h2>
|
||||
<AppHelpHint text="Shared summary metrics for publication coverage and processing pressure." />
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<article class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2">
|
||||
<p class="text-xs uppercase tracking-wide text-ink-muted">Tracked publications</p>
|
||||
<p class="mt-1 text-xl font-semibold text-ink-primary">{{ snapshot.totalCount }}</p>
|
||||
</article>
|
||||
<article class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2">
|
||||
<p class="text-xs uppercase tracking-wide text-ink-muted">New from latest check</p>
|
||||
<p class="mt-1 text-xl font-semibold text-ink-primary">{{ snapshot.newCount }}</p>
|
||||
</article>
|
||||
<article class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2">
|
||||
<p class="text-xs uppercase tracking-wide text-ink-muted">Scholars processed</p>
|
||||
<p class="mt-1 text-xl font-semibold text-ink-primary">{{ snapshot.latestRun?.scholar_count ?? 0 }}</p>
|
||||
</article>
|
||||
<article class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2">
|
||||
<p class="text-xs uppercase tracking-wide text-ink-muted">Queue pressure</p>
|
||||
<p class="mt-1 text-xl font-semibold text-ink-primary">
|
||||
{{ snapshot.queue.queued + snapshot.queue.retrying + snapshot.queue.dropped }}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<QueueHealthBadge
|
||||
:queued="snapshot.queue.queued"
|
||||
:retrying="snapshot.queue.retrying"
|
||||
:dropped="snapshot.queue.dropped"
|
||||
/>
|
||||
</AppCard>
|
||||
|
||||
<section class="grid gap-4 xl:grid-cols-2">
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Recent Publications</h2>
|
||||
<RouterLink
|
||||
to="/publications"
|
||||
class="link-inline text-sm"
|
||||
>
|
||||
Open publications
|
||||
</RouterLink>
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-if="snapshot.recentPublications.length === 0"
|
||||
title="No new publications"
|
||||
body="When a completed run discovers updates, they will appear here."
|
||||
/>
|
||||
<ul v-else class="grid gap-3">
|
||||
<li
|
||||
v-for="item in snapshot.recentPublications.slice(0, 6)"
|
||||
:key="item.publication_id"
|
||||
class="grid gap-1 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60"
|
||||
>
|
||||
<strong class="text-zinc-900 dark:text-zinc-100">{{ item.title }}</strong>
|
||||
<span class="text-secondary">{{ item.scholar_label }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppCard>
|
||||
<AppCard class="flex min-h-0 flex-col gap-4 xl:overflow-hidden">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Activity Monitor</h2>
|
||||
<AppHelpHint
|
||||
text="Combines latest profile-check details with recent check history so you can spot issues quickly."
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<AppButton
|
||||
v-if="auth.isAdmin"
|
||||
:disabled="pendingRun"
|
||||
@click="onTriggerRun"
|
||||
>
|
||||
{{ pendingRun ? "Starting..." : "Start check" }}
|
||||
</AppButton>
|
||||
<RouterLink
|
||||
v-if="auth.isAdmin"
|
||||
to="/admin/runs"
|
||||
class="link-inline text-sm"
|
||||
>
|
||||
Open check history
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Recent Runs</h2>
|
||||
<RouterLink
|
||||
v-if="auth.isAdmin"
|
||||
to="/admin/runs"
|
||||
class="link-inline text-sm"
|
||||
>
|
||||
Open runs
|
||||
</RouterLink>
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-if="snapshot.recentRuns.length === 0"
|
||||
title="No runs yet"
|
||||
body="Trigger a manual run from the Runs screen to begin tracking."
|
||||
/>
|
||||
<ul v-else class="grid gap-3">
|
||||
<li
|
||||
v-for="run in snapshot.recentRuns"
|
||||
:key="run.id"
|
||||
class="grid gap-1 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<RunStatusBadge :status="run.status" />
|
||||
<span class="text-secondary">Run #{{ run.id }}</span>
|
||||
<div
|
||||
v-if="snapshot.latestRun"
|
||||
class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2"
|
||||
>
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<RunStatusBadge :status="snapshot.latestRun.status" />
|
||||
<span class="text-sm font-semibold text-ink-primary">Latest check #{{ snapshot.latestRun.id }}</span>
|
||||
</div>
|
||||
<RouterLink
|
||||
v-if="auth.isAdmin"
|
||||
:to="`/admin/runs/${snapshot.latestRun.id}`"
|
||||
class="link-inline text-xs"
|
||||
>
|
||||
View diagnostics
|
||||
</RouterLink>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-secondary">
|
||||
Started {{ formatDate(snapshot.latestRun.start_dt) }}. Processed
|
||||
{{ snapshot.latestRun.scholar_count }} scholars and discovered
|
||||
{{ snapshot.latestRun.new_publication_count }} new publications.
|
||||
</p>
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-else
|
||||
title="No checks recorded"
|
||||
body="Start an update check to begin monitoring activity."
|
||||
/>
|
||||
|
||||
<div class="grid min-h-0 flex-1 gap-2 xl:overflow-hidden">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">Recent checks</p>
|
||||
<AppEmptyState
|
||||
v-if="snapshot.recentRuns.length === 0"
|
||||
title="No checks yet"
|
||||
body="Check history will appear here."
|
||||
/>
|
||||
<ul v-else class="grid gap-2 overflow-y-auto pr-1">
|
||||
<li
|
||||
v-for="run in snapshot.recentRuns"
|
||||
:key="run.id"
|
||||
class="grid gap-1 rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<RunStatusBadge :status="run.status" />
|
||||
<span class="text-sm text-secondary">Check #{{ run.id }}</span>
|
||||
</div>
|
||||
<RouterLink v-if="auth.isAdmin" :to="`/admin/runs/${run.id}`" class="link-inline text-xs">
|
||||
Details
|
||||
</RouterLink>
|
||||
</div>
|
||||
<span class="text-xs text-secondary">
|
||||
{{ formatDate(run.start_dt) }} • {{ run.new_publication_count }} new
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
<span class="text-secondary">{{ formatDate(run.start_dt) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppCard>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
</AsyncStateGate>
|
||||
</div>
|
||||
</div>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -54,43 +54,43 @@ async function onSubmit(): Promise<void> {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen overflow-hidden bg-zinc-100 dark:bg-zinc-950">
|
||||
<div class="relative h-[100dvh] max-h-[100dvh] overflow-y-auto overflow-x-hidden bg-surface-app">
|
||||
<div class="pointer-events-none absolute inset-0">
|
||||
<div class="absolute -top-20 left-[-8rem] h-72 w-72 rounded-full bg-brand-300/35 blur-3xl dark:bg-brand-900/35" />
|
||||
<div class="absolute bottom-[-7rem] right-[-6rem] h-80 w-80 rounded-full bg-emerald-300/25 blur-3xl dark:bg-emerald-900/25" />
|
||||
<div class="absolute left-1/3 top-1/3 h-52 w-52 rounded-full bg-amber-300/20 blur-3xl dark:bg-amber-900/20" />
|
||||
<div class="absolute -top-20 left-[-8rem] h-72 w-72 rounded-full bg-brand-300/30 blur-3xl" />
|
||||
<div class="absolute bottom-[-7rem] right-[-6rem] h-80 w-80 rounded-full bg-success-300/25 blur-3xl" />
|
||||
<div class="absolute left-1/3 top-1/3 h-52 w-52 rounded-full bg-warning-300/20 blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative mx-auto grid min-h-screen w-full max-w-6xl items-center gap-8 px-4 py-10 sm:px-6 lg:grid-cols-[minmax(0,1fr)_26rem] lg:px-8"
|
||||
class="relative mx-auto grid min-h-full w-full max-w-6xl items-center gap-8 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_26rem] lg:px-8"
|
||||
>
|
||||
<section class="hidden space-y-5 lg:block">
|
||||
<p class="inline-flex items-center rounded-full border border-zinc-300 bg-white/70 px-3 py-1 text-xs font-medium uppercase tracking-[0.12em] text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-300">
|
||||
<p class="inline-flex items-center rounded-full border border-stroke-strong bg-surface-card/70 px-3 py-1 text-xs font-medium uppercase tracking-[0.12em] text-ink-muted">
|
||||
Scholarr Control Center
|
||||
</p>
|
||||
<h1 class="max-w-xl font-display text-4xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
|
||||
<h1 class="max-w-xl font-display text-4xl font-semibold tracking-tight text-ink-primary">
|
||||
Scholar tracking with reliable operational controls.
|
||||
</h1>
|
||||
<p class="max-w-xl text-base leading-relaxed text-zinc-600 dark:text-zinc-400">
|
||||
<p class="max-w-xl text-base leading-relaxed text-ink-muted">
|
||||
Use your account to review ingestion runs, publication changes, and continuation queue diagnostics from a
|
||||
single workspace.
|
||||
</p>
|
||||
<ul class="grid max-w-xl gap-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<li class="rounded-lg border border-zinc-200 bg-white/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<ul class="grid max-w-xl gap-2 text-sm text-ink-muted">
|
||||
<li class="rounded-lg border border-stroke-default bg-surface-card/60 px-3 py-2">
|
||||
Session-based authentication with CSRF enforcement.
|
||||
</li>
|
||||
<li class="rounded-lg border border-zinc-200 bg-white/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<li class="rounded-lg border border-stroke-default bg-surface-card/60 px-3 py-2">
|
||||
Run and queue diagnostics are available for support workflows.
|
||||
</li>
|
||||
<li class="rounded-lg border border-zinc-200 bg-white/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<li class="rounded-lg border border-stroke-default bg-surface-card/60 px-3 py-2">
|
||||
Theme-aware interface with light and dark mode support.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<AppCard class="w-full max-w-md justify-self-end space-y-6 border-zinc-200/80 bg-white/90 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/85">
|
||||
<AppCard class="w-full max-w-md justify-self-end space-y-6 border-stroke-default/80 bg-surface-card/90 backdrop-blur">
|
||||
<div class="space-y-2">
|
||||
<h1 class="font-display text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Sign In</h1>
|
||||
<h1 class="font-display text-3xl font-semibold tracking-tight text-ink-primary">Sign In</h1>
|
||||
<p class="text-sm text-secondary">
|
||||
Sign in to access scholar tracking, publication updates, and run diagnostics.
|
||||
</p>
|
||||
|
|
@ -104,12 +104,12 @@ async function onSubmit(): Promise<void> {
|
|||
</AppAlert>
|
||||
|
||||
<form class="grid gap-4" @submit.prevent="onSubmit">
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Email</span>
|
||||
<AppInput id="login-email" v-model="email" type="email" autocomplete="email" />
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Password</span>
|
||||
<AppInput
|
||||
id="login-password"
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ import { computed, onMounted, ref, watch } from "vue";
|
|||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import AppBadge from "@/components/ui/AppBadge.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppEmptyState from "@/components/ui/AppEmptyState.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import AppInput from "@/components/ui/AppInput.vue";
|
||||
import AppSelect from "@/components/ui/AppSelect.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import AppTable from "@/components/ui/AppTable.vue";
|
||||
import {
|
||||
listPublications,
|
||||
|
|
@ -23,12 +23,16 @@ import {
|
|||
import { listScholars, type ScholarProfile } from "@/features/scholars";
|
||||
import { ApiRequestError } from "@/lib/api/errors";
|
||||
|
||||
type PublicationSortKey = "title" | "scholar" | "year" | "citations" | "status" | "first_seen";
|
||||
|
||||
const loading = ref(true);
|
||||
const publishingAll = ref(false);
|
||||
const publishingSelected = ref(false);
|
||||
const mode = ref<PublicationMode>("new");
|
||||
const selectedScholarFilter = ref("");
|
||||
const searchQuery = ref("");
|
||||
const sortKey = ref<PublicationSortKey>("first_seen");
|
||||
const sortDirection = ref<"asc" | "desc">("desc");
|
||||
|
||||
const scholars = ref<ScholarProfile[]>([]);
|
||||
const listState = ref<PublicationsResult | null>(null);
|
||||
|
|
@ -39,6 +43,7 @@ const errorRequestId = ref<string | null>(null);
|
|||
const successMessage = ref<string | null>(null);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const textCollator = new Intl.Collator(undefined, { sensitivity: "base", numeric: true });
|
||||
|
||||
function normalizeScholarFilterQuery(value: unknown): string {
|
||||
if (Array.isArray(value)) {
|
||||
|
|
@ -90,6 +95,19 @@ function publicationKey(item: PublicationItem): string {
|
|||
return `${item.scholar_profile_id}:${item.publication_id}`;
|
||||
}
|
||||
|
||||
function scholarLabel(item: ScholarProfile): string {
|
||||
return item.display_name || item.scholar_id;
|
||||
}
|
||||
|
||||
const selectedScholarName = computed(() => {
|
||||
const selectedId = Number(selectedScholarFilter.value);
|
||||
if (!Number.isInteger(selectedId) || selectedId <= 0) {
|
||||
return "all scholars";
|
||||
}
|
||||
const profile = scholars.value.find((item) => item.id === selectedId);
|
||||
return profile ? scholarLabel(profile) : "the selected scholar";
|
||||
});
|
||||
|
||||
const filteredPublications = computed(() => {
|
||||
const base = listState.value?.publications ?? [];
|
||||
const normalized = searchQuery.value.trim().toLowerCase();
|
||||
|
|
@ -106,9 +124,56 @@ const filteredPublications = computed(() => {
|
|||
});
|
||||
});
|
||||
|
||||
function publicationSortValue(item: PublicationItem, key: PublicationSortKey): number | string {
|
||||
if (key === "title") {
|
||||
return item.title;
|
||||
}
|
||||
if (key === "scholar") {
|
||||
return item.scholar_label;
|
||||
}
|
||||
if (key === "year") {
|
||||
return item.year ?? -1;
|
||||
}
|
||||
if (key === "citations") {
|
||||
return item.citation_count;
|
||||
}
|
||||
if (key === "status") {
|
||||
if (item.is_read) {
|
||||
return 2;
|
||||
}
|
||||
if (item.is_new_in_latest_run) {
|
||||
return 0;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
const timestamp = Date.parse(item.first_seen_at);
|
||||
return Number.isNaN(timestamp) ? 0 : timestamp;
|
||||
}
|
||||
|
||||
const sortedPublications = computed(() => {
|
||||
const sorted = [...filteredPublications.value];
|
||||
sorted.sort((a, b) => {
|
||||
const left = publicationSortValue(a, sortKey.value);
|
||||
const right = publicationSortValue(b, sortKey.value);
|
||||
|
||||
let comparison: number;
|
||||
if (typeof left === "string" && typeof right === "string") {
|
||||
comparison = textCollator.compare(left, right);
|
||||
} else {
|
||||
comparison = Number(left) - Number(right);
|
||||
}
|
||||
|
||||
if (comparison === 0) {
|
||||
comparison = textCollator.compare(a.title, b.title);
|
||||
}
|
||||
return sortDirection.value === "asc" ? comparison : comparison * -1;
|
||||
});
|
||||
return sorted;
|
||||
});
|
||||
|
||||
const visibleUnreadKeys = computed(() => {
|
||||
const keys = new Set<string>();
|
||||
for (const item of filteredPublications.value) {
|
||||
for (const item of sortedPublications.value) {
|
||||
if (!item.is_read) {
|
||||
keys.add(publicationKey(item));
|
||||
}
|
||||
|
|
@ -117,6 +182,25 @@ const visibleUnreadKeys = computed(() => {
|
|||
});
|
||||
|
||||
const selectedCount = computed(() => selectedPublicationKeys.value.size);
|
||||
const visibleCount = computed(() => sortedPublications.value.length);
|
||||
const visibleUnreadCount = computed(() => visibleUnreadKeys.value.size);
|
||||
const actionBusy = computed(() => loading.value || publishingAll.value || publishingSelected.value);
|
||||
const showingEmptyList = computed(() => Boolean(listState.value) && sortedPublications.value.length === 0);
|
||||
const modeLabel = computed(() => (mode.value === "new" ? "Needs review" : "All records"));
|
||||
|
||||
const emptyTitle = computed(() =>
|
||||
searchQuery.value.trim().length > 0 ? "No publications match this search" : "No publications found",
|
||||
);
|
||||
|
||||
const emptyBody = computed(() => {
|
||||
if (searchQuery.value.trim().length > 0) {
|
||||
return "Try another title, scholar, venue, or year.";
|
||||
}
|
||||
if (mode.value === "new") {
|
||||
return `No publications currently need review for ${selectedScholarName.value}.`;
|
||||
}
|
||||
return `No publication records for ${selectedScholarName.value}.`;
|
||||
});
|
||||
|
||||
const allVisibleUnreadSelected = computed(() => {
|
||||
if (visibleUnreadKeys.value.size === 0) {
|
||||
|
|
@ -130,7 +214,7 @@ const allVisibleUnreadSelected = computed(() => {
|
|||
return true;
|
||||
});
|
||||
|
||||
watch(filteredPublications, (items) => {
|
||||
watch(sortedPublications, (items) => {
|
||||
const validKeys = new Set(items.filter((item) => !item.is_read).map((item) => publicationKey(item)));
|
||||
const next = new Set<string>();
|
||||
for (const key of selectedPublicationKeys.value) {
|
||||
|
|
@ -143,6 +227,22 @@ watch(filteredPublications, (items) => {
|
|||
}
|
||||
});
|
||||
|
||||
function toggleSort(nextKey: PublicationSortKey): void {
|
||||
if (sortKey.value === nextKey) {
|
||||
sortDirection.value = sortDirection.value === "asc" ? "desc" : "asc";
|
||||
return;
|
||||
}
|
||||
sortKey.value = nextKey;
|
||||
sortDirection.value = nextKey === "first_seen" ? "desc" : "asc";
|
||||
}
|
||||
|
||||
function sortMarker(key: PublicationSortKey): string {
|
||||
if (sortKey.value !== key) {
|
||||
return "↕";
|
||||
}
|
||||
return sortDirection.value === "asc" ? "↑" : "↓";
|
||||
}
|
||||
|
||||
async function loadScholarFilters(): Promise<void> {
|
||||
try {
|
||||
scholars.value = await listScholars();
|
||||
|
|
@ -240,14 +340,14 @@ async function onMarkSelectedRead(): Promise<void> {
|
|||
|
||||
try {
|
||||
const response = await markSelectedRead(selections);
|
||||
successMessage.value = `${response.updated_count} publication${response.updated_count === 1 ? "" : "s"} marked as read.`;
|
||||
successMessage.value = `${response.updated_count} publication${response.updated_count === 1 ? "" : "s"} marked as reviewed.`;
|
||||
await loadPublications();
|
||||
} catch (error) {
|
||||
if (error instanceof ApiRequestError) {
|
||||
errorMessage.value = error.message;
|
||||
errorRequestId.value = error.requestId;
|
||||
} else {
|
||||
errorMessage.value = "Unable to mark selected publications as read.";
|
||||
errorMessage.value = "Unable to mark selected publications as reviewed.";
|
||||
}
|
||||
} finally {
|
||||
publishingSelected.value = false;
|
||||
|
|
@ -262,20 +362,24 @@ async function onMarkAllRead(): Promise<void> {
|
|||
|
||||
try {
|
||||
const response = await markAllRead();
|
||||
successMessage.value = response.message;
|
||||
successMessage.value = `${response.updated_count} publication${response.updated_count === 1 ? "" : "s"} marked as reviewed.`;
|
||||
await loadPublications();
|
||||
} catch (error) {
|
||||
if (error instanceof ApiRequestError) {
|
||||
errorMessage.value = error.message;
|
||||
errorRequestId.value = error.requestId;
|
||||
} else {
|
||||
errorMessage.value = "Unable to mark publications as read.";
|
||||
errorMessage.value = "Unable to mark publications as reviewed.";
|
||||
}
|
||||
} finally {
|
||||
publishingAll.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetSearchQuery(): void {
|
||||
searchQuery.value = "";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncScholarFilterFromRoute();
|
||||
void Promise.all([loadScholarFilters(), loadPublications()]);
|
||||
|
|
@ -294,17 +398,48 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<AppPage title="Publications" subtitle="Filter, search, and triage publication status quickly.">
|
||||
<div class="grid gap-3 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-end">
|
||||
<div class="grid gap-3 md:grid-cols-[auto_auto_minmax(0,1fr)] md:items-end">
|
||||
<AppPage
|
||||
title="Publications"
|
||||
subtitle="Filter and review discovered publications, then mark what you have handled so the next check stays focused."
|
||||
>
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">What you can do here</h2>
|
||||
<AppHelpHint
|
||||
text="Publications are discovered records from tracked scholar profiles. Review mode helps focus only on newly detected items."
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">
|
||||
Select a scholar or time scope, search within results, and mark items reviewed when you are done.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AppButton variant="ghost" :disabled="loading" @click="loadPublications">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 xl:grid-cols-[minmax(0,15rem)_minmax(0,18rem)_minmax(0,1fr)] xl:items-end">
|
||||
<div class="grid gap-1 text-xs text-secondary">
|
||||
<span>Scope</span>
|
||||
<span>View mode</span>
|
||||
<div class="flex min-h-10 flex-wrap items-center gap-2">
|
||||
<AppButton :variant="mode === 'new' ? 'primary' : 'secondary'" @click="setMode('new')">
|
||||
New
|
||||
<AppButton
|
||||
:variant="mode === 'new' ? 'primary' : 'secondary'"
|
||||
class="min-w-16 justify-center"
|
||||
:disabled="actionBusy"
|
||||
@click="setMode('new')"
|
||||
>
|
||||
Needs review
|
||||
</AppButton>
|
||||
<AppButton :variant="mode === 'all' ? 'primary' : 'secondary'" @click="setMode('all')">
|
||||
All
|
||||
<AppButton
|
||||
:variant="mode === 'all' ? 'primary' : 'secondary'"
|
||||
class="min-w-16 justify-center"
|
||||
:disabled="actionBusy"
|
||||
@click="setMode('all')"
|
||||
>
|
||||
All records
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -314,100 +449,140 @@ watch(
|
|||
<AppSelect
|
||||
id="publications-scholar-filter"
|
||||
v-model="selectedScholarFilter"
|
||||
:disabled="loading || publishingAll || publishingSelected"
|
||||
:disabled="actionBusy"
|
||||
@change="onScholarFilterChanged"
|
||||
>
|
||||
<option value="">All scholars</option>
|
||||
<option v-for="scholar in scholars" :key="scholar.id" :value="String(scholar.id)">
|
||||
{{ scholar.display_name || scholar.scholar_id }}
|
||||
{{ scholarLabel(scholar) }}
|
||||
</option>
|
||||
</AppSelect>
|
||||
</label>
|
||||
|
||||
<label class="grid gap-1 text-xs text-secondary" for="publications-search-input">
|
||||
<span>Search</span>
|
||||
<AppInput
|
||||
id="publications-search-input"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search title, scholar, venue, year"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<span>Search within current scope</span>
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<AppInput
|
||||
id="publications-search-input"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search title, scholar, venue, year"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<AppButton
|
||||
v-if="searchQuery.trim().length > 0"
|
||||
variant="secondary"
|
||||
class="shrink-0"
|
||||
:disabled="loading"
|
||||
@click="resetSearchQuery"
|
||||
>
|
||||
Clear
|
||||
</AppButton>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppButton
|
||||
variant="secondary"
|
||||
:disabled="selectedCount === 0 || loading || publishingSelected || publishingAll"
|
||||
@click="onMarkSelectedRead"
|
||||
>
|
||||
{{ publishingSelected ? "Marking..." : `Mark selected read (${selectedCount})` }}
|
||||
</AppButton>
|
||||
<AppButton variant="secondary" :disabled="publishingAll || loading || publishingSelected" @click="onMarkAllRead">
|
||||
{{ publishingAll ? "Marking..." : "Mark all unread as read" }}
|
||||
</AppButton>
|
||||
<AppButton variant="ghost" :disabled="loading" @click="loadPublications">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppAlert v-if="successMessage" tone="success" dismissible @dismiss="successMessage = null">
|
||||
<template #title>Update complete</template>
|
||||
<p>{{ successMessage }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>Publication request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppSkeleton v-if="loading" :lines="8" />
|
||||
|
||||
<template v-else-if="listState">
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Publication list</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppBadge tone="info">Mode: {{ listState.mode }}</AppBadge>
|
||||
<AppBadge tone="neutral">Visible: {{ filteredPublications.length }}</AppBadge>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 border-t border-stroke-default pt-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppBadge tone="info">Mode: {{ modeLabel }}</AppBadge>
|
||||
<AppBadge tone="neutral">Visible: {{ visibleCount }}</AppBadge>
|
||||
<AppBadge tone="warning">Needs review: {{ visibleUnreadCount }}</AppBadge>
|
||||
<AppBadge tone="success">Selected: {{ selectedCount }}</AppBadge>
|
||||
</div>
|
||||
|
||||
<AppEmptyState
|
||||
v-if="filteredPublications.length === 0"
|
||||
title="No publications found"
|
||||
body="Try changing mode, scholar filter, or search terms."
|
||||
/>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppButton
|
||||
variant="secondary"
|
||||
:disabled="selectedCount === 0 || actionBusy"
|
||||
@click="onMarkSelectedRead"
|
||||
>
|
||||
{{ publishingSelected ? "Updating..." : `Mark selected reviewed (${selectedCount})` }}
|
||||
</AppButton>
|
||||
<AppButton variant="secondary" :disabled="actionBusy || visibleUnreadCount === 0" @click="onMarkAllRead">
|
||||
{{ publishingAll ? "Updating..." : "Mark all as reviewed" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppTable v-else label="Publication list table">
|
||||
<RequestStateAlerts
|
||||
:success-message="successMessage"
|
||||
success-title="Publication update complete"
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="Publication request failed"
|
||||
@dismiss-success="successMessage = null"
|
||||
/>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Publication List</h2>
|
||||
<AppHelpHint
|
||||
text="Use sorting, search, and bulk actions here to move discovered records from needs-review into reviewed history."
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs text-secondary">Currently showing {{ selectedScholarName }}</span>
|
||||
</div>
|
||||
|
||||
<AsyncStateGate
|
||||
:loading="loading"
|
||||
:loading-lines="8"
|
||||
:empty="showingEmptyList"
|
||||
:empty-title="emptyTitle"
|
||||
:empty-body="emptyBody"
|
||||
:show-empty="!errorMessage"
|
||||
>
|
||||
<AppTable v-if="listState" label="Publication list table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="w-12">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 rounded border-zinc-400 text-brand-600 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:border-zinc-600 dark:bg-zinc-900 dark:focus-visible:ring-brand-400 dark:focus-visible:ring-offset-zinc-950"
|
||||
class="h-4 w-4 rounded border-stroke-interactive bg-surface-input text-brand-600 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
|
||||
:checked="allVisibleUnreadSelected"
|
||||
:disabled="visibleUnreadKeys.size === 0"
|
||||
aria-label="Select all visible unread publications"
|
||||
aria-label="Select all visible publications that need review"
|
||||
@change="onToggleAllVisible"
|
||||
/>
|
||||
</th>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Scholar</th>
|
||||
<th scope="col">Year</th>
|
||||
<th scope="col">Citations</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">First seen</th>
|
||||
<th scope="col">
|
||||
<button type="button" class="table-sort" @click="toggleSort('title')">
|
||||
Title <span aria-hidden="true">{{ sortMarker("title") }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button type="button" class="table-sort" @click="toggleSort('scholar')">
|
||||
Scholar <span aria-hidden="true">{{ sortMarker("scholar") }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button type="button" class="table-sort" @click="toggleSort('year')">
|
||||
Year <span aria-hidden="true">{{ sortMarker("year") }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button type="button" class="table-sort" @click="toggleSort('citations')">
|
||||
Citations <span aria-hidden="true">{{ sortMarker("citations") }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button type="button" class="table-sort" @click="toggleSort('status')">
|
||||
Review status <span aria-hidden="true">{{ sortMarker("status") }}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button type="button" class="table-sort" @click="toggleSort('first_seen')">
|
||||
First seen <span aria-hidden="true">{{ sortMarker("first_seen") }}</span>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in filteredPublications" :key="publicationKey(item)">
|
||||
<tr v-for="item in sortedPublications" :key="publicationKey(item)">
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 rounded border-zinc-400 text-brand-600 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:border-zinc-600 dark:bg-zinc-900 dark:focus-visible:ring-brand-400 dark:focus-visible:ring-offset-zinc-950"
|
||||
class="h-4 w-4 rounded border-stroke-interactive bg-surface-input text-brand-600 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
|
||||
:checked="selectedPublicationKeys.has(publicationKey(item))"
|
||||
:disabled="item.is_read"
|
||||
:aria-label="`Select publication ${item.title}`"
|
||||
|
|
@ -432,10 +607,10 @@ watch(
|
|||
<td>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppBadge :tone="item.is_new_in_latest_run ? 'info' : 'neutral'">
|
||||
{{ item.is_new_in_latest_run ? "New" : "Existing" }}
|
||||
{{ item.is_new_in_latest_run ? "New this check" : "Previously seen" }}
|
||||
</AppBadge>
|
||||
<AppBadge :tone="item.is_read ? 'success' : 'warning'">
|
||||
{{ item.is_read ? "Read" : "Unread" }}
|
||||
{{ item.is_read ? "Reviewed" : "Needs review" }}
|
||||
</AppBadge>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -443,7 +618,13 @@ watch(
|
|||
</tr>
|
||||
</tbody>
|
||||
</AppTable>
|
||||
</AppCard>
|
||||
</template>
|
||||
</AsyncStateGate>
|
||||
</AppCard>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table-sort {
|
||||
@apply inline-flex items-center gap-1 text-left font-semibold text-ink-primary transition hover:text-ink-link focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import { computed, onMounted, ref } from "vue";
|
|||
import { useRoute } from "vue-router";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import RunStatusBadge from "@/components/patterns/RunStatusBadge.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppEmptyState from "@/components/ui/AppEmptyState.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import AppTable from "@/components/ui/AppTable.vue";
|
||||
import { getRunDetail, type RunDetail } from "@/features/runs";
|
||||
import { ApiRequestError } from "@/lib/api/errors";
|
||||
|
|
@ -96,52 +97,65 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<AppPage title="Run Detail" subtitle="Per-scholar diagnostics for the selected run.">
|
||||
<div class="flex justify-end">
|
||||
<AppButton variant="secondary" @click="loadDetail" :disabled="loading">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Diagnostics controls</h2>
|
||||
<AppHelpHint
|
||||
text="Run diagnostics explain per-scholar outcomes, retry behavior, and scrape failure classifications."
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Refresh this run detail view after queue/run updates.</p>
|
||||
</div>
|
||||
<AppButton variant="secondary" @click="loadDetail" :disabled="loading">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>Run detail request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
<RequestStateAlerts
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="Run detail request failed"
|
||||
/>
|
||||
|
||||
<AppSkeleton v-if="loading" :lines="8" />
|
||||
|
||||
<template v-else-if="detail">
|
||||
<AsyncStateGate :loading="loading" :loading-lines="8" :show-empty="false">
|
||||
<template v-if="detail">
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Run #{{ detail.run.id }}</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Run #{{ detail.run.id }}</h2>
|
||||
<AppHelpHint text="This panel summarizes one full checking cycle and its completion status." />
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Started: {{ formatDate(detail.run.start_dt) }}</p>
|
||||
<p class="text-sm text-secondary">Ended: {{ formatDate(detail.run.end_dt) }}</p>
|
||||
</div>
|
||||
<RunStatusBadge :status="detail.run.status" />
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-zinc-700 dark:text-zinc-300">
|
||||
<p class="text-sm text-ink-secondary">
|
||||
Outcome summary: {{ detail.summary.succeeded_count }} succeeded, {{ detail.summary.partial_count }} partial,
|
||||
{{ detail.summary.failed_count }} failed.
|
||||
</p>
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">Retries scheduled</p>
|
||||
<div class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2 text-sm">
|
||||
<p class="font-medium text-ink-primary">Retries scheduled</p>
|
||||
<p>{{ retryCounts.retries_scheduled_count }}</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">Scholars with retries</p>
|
||||
<div class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2 text-sm">
|
||||
<p class="font-medium text-ink-primary">Scholars with retries</p>
|
||||
<p>{{ retryCounts.scholars_with_retries_count }}</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">Retry exhausted</p>
|
||||
<div class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2 text-sm">
|
||||
<p class="font-medium text-ink-primary">Retry exhausted</p>
|
||||
<p>{{ retryCounts.retry_exhausted_count }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">Scrape failure buckets</p>
|
||||
<div class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2 text-sm">
|
||||
<p class="font-medium text-ink-primary">Scrape failure buckets</p>
|
||||
<p v-if="failureBucketEntries.length === 0" class="text-secondary">n/a</p>
|
||||
<ul v-else class="space-y-1">
|
||||
<li v-for="[name, count] in failureBucketEntries" :key="name">
|
||||
|
|
@ -149,8 +163,8 @@ onMounted(() => {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">Active alerts</p>
|
||||
<div class="rounded-xl border border-stroke-default bg-surface-card-muted px-3 py-2 text-sm">
|
||||
<p class="font-medium text-ink-primary">Active alerts</p>
|
||||
<p v-if="alertFlagEntries.length === 0" class="text-secondary">none</p>
|
||||
<ul v-else class="space-y-1">
|
||||
<li v-for="[name] in alertFlagEntries" :key="name">
|
||||
|
|
@ -162,7 +176,10 @@ onMounted(() => {
|
|||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Scholar Results</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Scholar Results</h2>
|
||||
<AppHelpHint text="One row per scholar profile processed in this run, including final state and warnings." />
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-if="detail.scholar_results.length === 0"
|
||||
title="No scholar diagnostics"
|
||||
|
|
@ -192,6 +209,7 @@ onMounted(() => {
|
|||
</tbody>
|
||||
</AppTable>
|
||||
</AppCard>
|
||||
</template>
|
||||
</template>
|
||||
</AsyncStateGate>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import QueueHealthBadge from "@/components/patterns/QueueHealthBadge.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import RunStatusBadge from "@/components/patterns/RunStatusBadge.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppEmptyState from "@/components/ui/AppEmptyState.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import AppTable from "@/components/ui/AppTable.vue";
|
||||
import {
|
||||
clearQueueItem,
|
||||
|
|
@ -136,7 +137,23 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<AppPage title="Runs" subtitle="Manual run controls and continuation queue diagnostics.">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Run controls</h2>
|
||||
<AppHelpHint
|
||||
text="A run is one full publication-check cycle across eligible tracked scholar profiles."
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Trigger runs and monitor continuation-queue pressure.</p>
|
||||
</div>
|
||||
<QueueHealthBadge
|
||||
:queued="queueCounts.queued"
|
||||
:retrying="queueCounts.retrying"
|
||||
:dropped="queueCounts.dropped"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppButton :disabled="pendingRun" @click="onTriggerManualRun">
|
||||
{{ pendingRun ? "Triggering..." : "Run now" }}
|
||||
|
|
@ -145,30 +162,22 @@ onMounted(() => {
|
|||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<QueueHealthBadge
|
||||
:queued="queueCounts.queued"
|
||||
:retrying="queueCounts.retrying"
|
||||
:dropped="queueCounts.dropped"
|
||||
/>
|
||||
</div>
|
||||
<RequestStateAlerts
|
||||
:success-message="successMessage"
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="Run diagnostics request failed"
|
||||
@dismiss-success="successMessage = null"
|
||||
/>
|
||||
|
||||
<AppAlert v-if="successMessage" tone="success" dismissible @dismiss="successMessage = null">
|
||||
<template #title>Operation complete</template>
|
||||
<p>{{ successMessage }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>Run diagnostics request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppSkeleton v-if="loading" :lines="8" />
|
||||
|
||||
<template v-else>
|
||||
<AsyncStateGate :loading="loading" :loading-lines="8" :show-empty="false">
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Recent Runs</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Recent Runs</h2>
|
||||
<AppHelpHint text="Recent run history with volume and failure indicators per cycle." />
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-if="runs.length === 0"
|
||||
title="No runs found"
|
||||
|
|
@ -207,7 +216,12 @@ onMounted(() => {
|
|||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Continuation Queue</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Continuation Queue</h2>
|
||||
<AppHelpHint
|
||||
text="Retry queue for interrupted profile checks. Use actions to retry, drop, or clear items."
|
||||
/>
|
||||
</div>
|
||||
<AppEmptyState
|
||||
v-if="queueItems.length === 0"
|
||||
title="Queue is empty"
|
||||
|
|
@ -261,6 +275,6 @@ onMounted(() => {
|
|||
</tbody>
|
||||
</AppTable>
|
||||
</AppCard>
|
||||
</template>
|
||||
</AsyncStateGate>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import RunStatusBadge from "@/components/patterns/RunStatusBadge.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AppBadge from "@/components/ui/AppBadge.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppEmptyState from "@/components/ui/AppEmptyState.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import AppInput from "@/components/ui/AppInput.vue";
|
||||
import AppModal from "@/components/ui/AppModal.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import AppTable from "@/components/ui/AppTable.vue";
|
||||
import {
|
||||
clearScholarImage,
|
||||
|
|
@ -25,6 +25,7 @@ import {
|
|||
type ScholarSearchCandidate,
|
||||
type ScholarSearchResult,
|
||||
} from "@/features/scholars";
|
||||
import ScholarAvatar from "@/features/scholars/components/ScholarAvatar.vue";
|
||||
import { ApiRequestError } from "@/lib/api/errors";
|
||||
|
||||
const loading = ref(true);
|
||||
|
|
@ -38,7 +39,6 @@ const activeScholarSettingsId = ref<number | null>(null);
|
|||
|
||||
const scholars = ref<ScholarProfile[]>([]);
|
||||
const imageUrlDraftByScholarId = ref<Record<number, string>>({});
|
||||
const failedImageByKey = ref<Record<string, boolean>>({});
|
||||
|
||||
const scholarBatchInput = ref("");
|
||||
const searchQuery = ref("");
|
||||
|
|
@ -52,34 +52,40 @@ const successMessage = ref<string | null>(null);
|
|||
|
||||
const SCHOLAR_ID_PATTERN = /^[a-zA-Z0-9_-]{12}$/;
|
||||
const URL_USER_PARAM_PATTERN = /(?:\?|&)user=([a-zA-Z0-9_-]{12})(?:&|#|$)/i;
|
||||
const nameSearchWip = true;
|
||||
|
||||
const trackedScholarIds = computed(() => new Set(scholars.value.map((item) => item.scholar_id)));
|
||||
const activeScholarSettings = computed(
|
||||
() => scholars.value.find((item) => item.id === activeScholarSettingsId.value) ?? null,
|
||||
);
|
||||
const parsedBatchCount = computed(() => parseScholarIds(scholarBatchInput.value).length);
|
||||
const searchHasRun = computed(() => searchResult.value !== null);
|
||||
const searchIsDegraded = computed(() => {
|
||||
if (!searchResult.value) {
|
||||
return false;
|
||||
}
|
||||
return searchResult.value.state === "blocked_or_captcha" || searchResult.value.state === "network_error";
|
||||
});
|
||||
|
||||
function formatDate(value: string | null, compact = false): string {
|
||||
if (!value) {
|
||||
return "n/a";
|
||||
const searchStateTone = computed(() => {
|
||||
const result = searchResult.value;
|
||||
if (!result) {
|
||||
return "neutral" as const;
|
||||
}
|
||||
const asDate = new Date(value);
|
||||
if (Number.isNaN(asDate.getTime())) {
|
||||
return value;
|
||||
if (result.state === "ok") {
|
||||
return "success" as const;
|
||||
}
|
||||
if (compact) {
|
||||
return asDate.toLocaleString(undefined, {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
});
|
||||
if (result.state === "blocked_or_captcha" || result.state === "network_error") {
|
||||
return "warning" as const;
|
||||
}
|
||||
return asDate.toLocaleString();
|
||||
}
|
||||
return "neutral" as const;
|
||||
});
|
||||
const emptySearchCandidates = computed(() => {
|
||||
const result = searchResult.value;
|
||||
if (!result) {
|
||||
return false;
|
||||
}
|
||||
return result.candidates.length === 0;
|
||||
});
|
||||
|
||||
function scholarProfileUrl(scholarId: string): string {
|
||||
return `https://scholar.google.com/citations?hl=en&user=${encodeURIComponent(scholarId)}`;
|
||||
|
|
@ -138,58 +144,6 @@ function parseScholarIds(raw: string): string[] {
|
|||
return ordered;
|
||||
}
|
||||
|
||||
function formatImageSource(value: ScholarProfile["profile_image_source"]): string {
|
||||
if (value === "upload") {
|
||||
return "Uploaded";
|
||||
}
|
||||
if (value === "override") {
|
||||
return "Custom URL";
|
||||
}
|
||||
if (value === "scraped") {
|
||||
return "Scraped";
|
||||
}
|
||||
return "Fallback";
|
||||
}
|
||||
|
||||
function sourceTone(value: ScholarProfile["profile_image_source"]): "neutral" | "info" | "success" {
|
||||
if (value === "upload") {
|
||||
return "success";
|
||||
}
|
||||
if (value === "override" || value === "scraped") {
|
||||
return "info";
|
||||
}
|
||||
return "neutral";
|
||||
}
|
||||
|
||||
function makeInitials(label: string | null | undefined, scholarId: string): string {
|
||||
const source = (label || "").trim();
|
||||
if (source.length === 0) {
|
||||
return scholarId.slice(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
const tokens = source.split(/\s+/).filter(Boolean);
|
||||
if (tokens.length === 1) {
|
||||
return tokens[0].slice(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
return `${tokens[0].charAt(0)}${tokens[1].charAt(0)}`.toUpperCase();
|
||||
}
|
||||
|
||||
function imageKey(prefix: string, id: string | number, imageUrl: string | null): string {
|
||||
return `${prefix}:${String(id)}:${imageUrl || "none"}`;
|
||||
}
|
||||
|
||||
function canRenderImage(prefix: string, id: string | number, imageUrl: string | null): boolean {
|
||||
if (!imageUrl) {
|
||||
return false;
|
||||
}
|
||||
return !failedImageByKey.value[imageKey(prefix, id, imageUrl)];
|
||||
}
|
||||
|
||||
function markImageFailed(prefix: string, id: string | number, imageUrl: string | null): void {
|
||||
failedImageByKey.value[imageKey(prefix, id, imageUrl)] = true;
|
||||
}
|
||||
|
||||
function scholarLabel(profile: ScholarProfile): string {
|
||||
return profile.display_name || profile.scholar_id;
|
||||
}
|
||||
|
|
@ -311,6 +265,11 @@ async function onAddScholars(): Promise<void> {
|
|||
}
|
||||
|
||||
async function onSearchByName(): Promise<void> {
|
||||
if (nameSearchWip) {
|
||||
searchErrorMessage.value = "Search by name is temporarily disabled while reliability hardening is in progress.";
|
||||
searchErrorRequestId.value = null;
|
||||
return;
|
||||
}
|
||||
searchingByName.value = true;
|
||||
searchErrorMessage.value = null;
|
||||
searchErrorRequestId.value = null;
|
||||
|
|
@ -502,339 +461,287 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<AppPage title="Scholars" subtitle="Track scholars and manage profile behavior with less noise.">
|
||||
<div class="flex justify-end">
|
||||
<AppButton variant="secondary" @click="loadScholars" :disabled="loading || saving || searchingByName">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
<AppPage
|
||||
title="Scholars"
|
||||
subtitle="Add and maintain the Google Scholar profiles you want Scholarr to monitor."
|
||||
>
|
||||
<RequestStateAlerts
|
||||
:success-message="successMessage"
|
||||
success-title="Scholar update complete"
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="Scholar request failed"
|
||||
@dismiss-success="successMessage = null"
|
||||
/>
|
||||
|
||||
<AppAlert v-if="successMessage" tone="success" dismissible @dismiss="successMessage = null">
|
||||
<template #title>Scholar update complete</template>
|
||||
<p>{{ successMessage }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>Scholar request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<section class="grid gap-4 xl:grid-cols-[minmax(0,34rem)_minmax(0,1fr)]">
|
||||
<section class="grid gap-4 xl:grid-cols-2">
|
||||
<div class="grid content-start gap-4">
|
||||
<AppCard class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Add Scholars</h2>
|
||||
<p class="text-sm text-secondary">
|
||||
Paste one or many Scholar IDs or profile URLs. Duplicate and already-tracked IDs are ignored per response.
|
||||
</p>
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Add Scholar Profiles</h2>
|
||||
<AppHelpHint
|
||||
text="A scholar profile is a Google Scholar author page that Scholarr will monitor for publication changes."
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Paste one or more Scholar IDs or profile URLs and add them in one action.</p>
|
||||
</div>
|
||||
|
||||
<form class="grid gap-3" @submit.prevent="onAddScholars">
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary" for="scholar-batch-input">
|
||||
<span>Scholar IDs or profile URLs</span>
|
||||
<textarea
|
||||
id="scholar-batch-input"
|
||||
v-model="scholarBatchInput"
|
||||
rows="5"
|
||||
placeholder="A-UbBTPM15wL\nhttps://scholar.google.com/citations?hl=en&user=A-UbBTPM15wL"
|
||||
class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none ring-brand-300 transition placeholder:text-zinc-400 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 disabled:cursor-not-allowed disabled:opacity-60 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-brand-400 dark:focus-visible:ring-offset-zinc-950 dark:placeholder:text-zinc-500"
|
||||
class="w-full rounded-lg border border-stroke-interactive bg-surface-input px-3 py-2 text-sm text-ink-primary outline-none ring-focus-ring transition placeholder:text-ink-muted focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset disabled:cursor-not-allowed disabled:opacity-60"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<p class="text-xs text-secondary">
|
||||
Parsed IDs: <strong class="text-ink-primary">{{ parsedBatchCount }}</strong>
|
||||
</p>
|
||||
<AppButton type="submit" :disabled="saving || loading">
|
||||
{{ saving ? "Adding..." : "Add scholars" }}
|
||||
</AppButton>
|
||||
<span class="text-xs text-secondary">Accepted pattern: <code>[a-zA-Z0-9_-]{12}</code></span>
|
||||
</div>
|
||||
</form>
|
||||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Search by Name</h2>
|
||||
<p class="text-sm text-secondary">
|
||||
Best-effort helper. For reliable adds, use Scholar URL/ID above.
|
||||
</p>
|
||||
<AppCard class="relative space-y-4 select-none">
|
||||
<div class="flex flex-wrap items-start justify-between gap-2">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Search by Name</h2>
|
||||
<AppHelpHint text="This workflow is currently paused while anti-block reliability changes are finalized." />
|
||||
</div>
|
||||
<p class="text-sm text-secondary">This helper is paused while reliability hardening is completed.</p>
|
||||
</div>
|
||||
<AppHelpHint text="Name search is not currently supported in production. It is on the roadmap and will return after reliability hardening.">
|
||||
<template #trigger>
|
||||
<AppBadge tone="warning">WIP</AppBadge>
|
||||
</template>
|
||||
</AppHelpHint>
|
||||
</div>
|
||||
|
||||
<form class="flex flex-wrap items-center gap-2" @submit.prevent="onSearchByName">
|
||||
<form class="pointer-events-none flex flex-wrap items-center gap-2 opacity-60">
|
||||
<div class="min-w-0 flex-1">
|
||||
<AppInput
|
||||
id="scholar-search-name"
|
||||
v-model="searchQuery"
|
||||
placeholder="e.g. Geoffrey Hinton"
|
||||
:disabled="searchingByName"
|
||||
:disabled="nameSearchWip"
|
||||
/>
|
||||
</div>
|
||||
<AppButton type="submit" :disabled="searchingByName || searchQuery.trim().length < 2">
|
||||
{{ searchingByName ? "Searching..." : "Search" }}
|
||||
<AppButton type="button" :disabled="nameSearchWip">
|
||||
Search
|
||||
</AppButton>
|
||||
</form>
|
||||
<p class="text-xs text-secondary">
|
||||
Direct Scholar ID/URL adds above remain the dependable path while this feature is in progress.
|
||||
</p>
|
||||
|
||||
<AppAlert v-if="searchErrorMessage" tone="danger">
|
||||
<template #title>Search failed</template>
|
||||
<p>{{ searchErrorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ searchErrorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
<RequestStateAlerts
|
||||
:error-message="searchErrorMessage"
|
||||
:error-request-id="searchErrorRequestId"
|
||||
error-title="Search request failed"
|
||||
/>
|
||||
|
||||
<AppSkeleton v-else-if="searchingByName" :lines="4" />
|
||||
<AsyncStateGate :loading="searchingByName" :loading-lines="4" :show-empty="false">
|
||||
<template v-if="searchResult">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<p class="text-sm text-secondary">
|
||||
{{ searchResult.candidates.length }} candidate{{ searchResult.candidates.length === 1 ? "" : "s" }}
|
||||
for <strong class="text-ink-primary">{{ searchResult.query }}</strong>
|
||||
</p>
|
||||
<AppBadge :tone="searchStateTone">{{ searchResult.state }}</AppBadge>
|
||||
</div>
|
||||
|
||||
<template v-else-if="searchResult">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<p class="text-sm text-secondary">
|
||||
{{ searchResult.candidates.length }} candidate{{ searchResult.candidates.length === 1 ? "" : "s" }} for
|
||||
<strong class="text-zinc-900 dark:text-zinc-100">{{ searchResult.query }}</strong>
|
||||
<p v-if="searchResult.state !== 'ok' || searchResult.warnings.length > 0" class="text-xs text-secondary">
|
||||
<span>State reason: <code>{{ searchResult.state_reason }}</code></span>
|
||||
<span v-if="searchResult.action_hint">. {{ searchResult.action_hint }}</span>
|
||||
<span v-if="searchResult.warnings.length > 0">. Warnings: {{ searchResult.warnings.join(", ") }}</span>
|
||||
</p>
|
||||
<AppBadge
|
||||
:tone="
|
||||
searchResult.state === 'ok'
|
||||
? 'success'
|
||||
: searchResult.state === 'blocked_or_captcha' || searchResult.state === 'network_error'
|
||||
? 'warning'
|
||||
: 'neutral'
|
||||
"
|
||||
|
||||
<AppAlert v-if="searchIsDegraded" tone="warning">
|
||||
<template #title>Name search is degraded</template>
|
||||
<p>
|
||||
This endpoint throttles aggressively to avoid blocks. Use Scholar URL/ID adds for dependable tracking.
|
||||
</p>
|
||||
</AppAlert>
|
||||
|
||||
<AsyncStateGate
|
||||
:loading="false"
|
||||
:show-empty="true"
|
||||
:empty="emptySearchCandidates"
|
||||
empty-title="No scholar matches returned"
|
||||
empty-body="Try another query later or add directly by Scholar URL/ID."
|
||||
>
|
||||
{{ searchResult.state }}
|
||||
</AppBadge>
|
||||
</div>
|
||||
<p
|
||||
v-if="searchResult.state !== 'ok' || searchResult.warnings.length > 0"
|
||||
class="text-xs text-secondary"
|
||||
>
|
||||
<span>State reason: <code>{{ searchResult.state_reason }}</code></span>
|
||||
<span v-if="searchResult.action_hint">. {{ searchResult.action_hint }}</span>
|
||||
<span v-if="searchResult.warnings.length > 0">
|
||||
. Warnings: {{ searchResult.warnings.join(", ") }}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<AppAlert v-if="searchIsDegraded" tone="warning">
|
||||
<template #title>Name search is degraded</template>
|
||||
<p>
|
||||
To avoid blocks, this feature is throttled and may temporarily pause itself. Use Scholar URL/ID adds
|
||||
for dependable tracking.
|
||||
</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppEmptyState
|
||||
v-if="searchResult.candidates.length === 0"
|
||||
title="No scholar matches returned"
|
||||
body="Try again later or paste Scholar profile URLs/IDs to continue safely."
|
||||
/>
|
||||
|
||||
<ul v-else class="grid gap-3">
|
||||
<li
|
||||
v-for="candidate in searchResult.candidates"
|
||||
:key="candidate.scholar_id"
|
||||
class="rounded-xl border border-zinc-200 bg-zinc-50/70 p-3 dark:border-zinc-800 dark:bg-zinc-900/50"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-zinc-200 bg-zinc-100 text-xs font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200"
|
||||
<ul class="grid gap-3">
|
||||
<li
|
||||
v-for="candidate in searchResult.candidates"
|
||||
:key="candidate.scholar_id"
|
||||
class="rounded-xl border border-stroke-default bg-surface-card-muted/70 p-3"
|
||||
>
|
||||
<img
|
||||
v-if="canRenderImage('candidate', candidate.scholar_id, candidate.profile_image_url)"
|
||||
:src="candidate.profile_image_url || ''"
|
||||
:alt="`${candidate.display_name} profile image`"
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
@error="markImageFailed('candidate', candidate.scholar_id, candidate.profile_image_url)"
|
||||
/>
|
||||
<span v-else>{{ makeInitials(candidate.display_name, candidate.scholar_id) }}</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<ScholarAvatar
|
||||
size="sm"
|
||||
:label="candidate.display_name"
|
||||
:scholar-id="candidate.scholar_id"
|
||||
:image-url="candidate.profile_image_url"
|
||||
/>
|
||||
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<strong class="text-sm text-zinc-900 dark:text-zinc-100">{{ candidate.display_name }}</strong>
|
||||
<code class="text-xs text-secondary">{{ candidate.scholar_id }}</code>
|
||||
<AppBadge v-if="trackedScholarIds.has(candidate.scholar_id)" tone="success">Tracked</AppBadge>
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<strong class="text-sm text-ink-primary">{{ candidate.display_name }}</strong>
|
||||
<code class="text-xs text-secondary">{{ candidate.scholar_id }}</code>
|
||||
<AppBadge v-if="trackedScholarIds.has(candidate.scholar_id)" tone="success">Tracked</AppBadge>
|
||||
</div>
|
||||
|
||||
<p class="truncate text-xs text-secondary">{{ candidate.affiliation || "No affiliation provided" }}</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-secondary">
|
||||
<span v-if="candidate.email_domain">Email: {{ candidate.email_domain }}</span>
|
||||
<span v-if="candidate.cited_by_count !== null">Cited by: {{ candidate.cited_by_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid shrink-0 gap-2">
|
||||
<AppButton
|
||||
:disabled="trackedScholarIds.has(candidate.scholar_id) || addingCandidateScholarId === candidate.scholar_id"
|
||||
@click="onAddCandidate(candidate)"
|
||||
>
|
||||
{{ addingCandidateScholarId === candidate.scholar_id ? "Adding..." : "Add" }}
|
||||
</AppButton>
|
||||
<a :href="candidate.profile_url" target="_blank" rel="noreferrer" class="link-inline text-xs text-center">
|
||||
Open profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="truncate text-xs text-secondary">
|
||||
{{ candidate.affiliation || "No affiliation provided" }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-secondary">
|
||||
<span v-if="candidate.email_domain">Email: {{ candidate.email_domain }}</span>
|
||||
<span v-if="candidate.cited_by_count !== null">Cited by: {{ candidate.cited_by_count }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-1">
|
||||
<AppBadge v-for="interest in candidate.interests.slice(0, 3)" :key="interest" tone="neutral">
|
||||
{{ interest }}
|
||||
</AppBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid shrink-0 gap-2">
|
||||
<AppButton
|
||||
:disabled="trackedScholarIds.has(candidate.scholar_id) || addingCandidateScholarId === candidate.scholar_id"
|
||||
@click="onAddCandidate(candidate)"
|
||||
>
|
||||
{{ addingCandidateScholarId === candidate.scholar_id ? "Adding..." : "Add" }}
|
||||
</AppButton>
|
||||
<a :href="candidate.profile_url" target="_blank" rel="noreferrer" class="link-inline text-xs text-center">
|
||||
Open profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<p v-else class="text-sm text-secondary">Run a name search to see matching scholar candidates.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</AsyncStateGate>
|
||||
</template>
|
||||
<p v-else-if="!searchErrorMessage && !searchHasRun" class="text-sm text-secondary">
|
||||
Run a name search to get candidates with one-click add actions.
|
||||
</p>
|
||||
</AsyncStateGate>
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Tracked Scholars</h2>
|
||||
<span class="text-sm text-secondary">{{ scholars.length }} total</span>
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Tracked Scholars</h2>
|
||||
<AppHelpHint
|
||||
text="Tracked scholars are active profile sources. Open Manage to control status, image overrides, and removal."
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-secondary">Review tracked profiles and open per-scholar settings when needed.</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-stroke-default bg-surface-card-muted/70 px-3 py-2"
|
||||
>
|
||||
<p class="text-xs font-medium uppercase tracking-wide text-secondary">Tracking status</p>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="inline-flex min-h-10 items-center rounded-lg border border-state-info-border bg-state-info-bg px-3 text-sm font-semibold text-state-info-text"
|
||||
>
|
||||
{{ scholars.length }} tracked
|
||||
</span>
|
||||
<AppButton variant="secondary" :disabled="loading || saving" @click="loadScholars">
|
||||
{{ loading ? "Refreshing..." : "Refresh" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppSkeleton v-if="loading" :lines="6" />
|
||||
<AsyncStateGate
|
||||
:loading="loading"
|
||||
:loading-lines="6"
|
||||
:empty="scholars.length === 0"
|
||||
:show-empty="!errorMessage"
|
||||
empty-title="No scholars tracked"
|
||||
empty-body="Add a Scholar ID or URL to start ingestion tracking."
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<ul class="grid gap-3 lg:hidden">
|
||||
<li
|
||||
v-for="item in scholars"
|
||||
:key="item.id"
|
||||
class="rounded-xl border border-stroke-default bg-surface-card-muted/70 p-3"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<ScholarAvatar :label="item.display_name" :scholar-id="item.scholar_id" :image-url="item.profile_image_url" />
|
||||
|
||||
<AppEmptyState
|
||||
v-else-if="scholars.length === 0"
|
||||
title="No scholars tracked"
|
||||
body="Add a Scholar ID directly or search by name to start ingestion tracking."
|
||||
/>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<ul class="grid gap-3 lg:hidden">
|
||||
<li
|
||||
v-for="item in scholars"
|
||||
:key="item.id"
|
||||
class="rounded-xl border border-zinc-200 bg-zinc-50/70 p-3 dark:border-zinc-800 dark:bg-zinc-900/50"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-zinc-200 bg-zinc-100 text-xs font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200"
|
||||
>
|
||||
<img
|
||||
v-if="canRenderImage('scholar', item.id, item.profile_image_url)"
|
||||
:src="item.profile_image_url || ''"
|
||||
:alt="`${scholarLabel(item)} profile image`"
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
@error="markImageFailed('scholar', item.id, item.profile_image_url)"
|
||||
/>
|
||||
<span v-else>{{ makeInitials(item.display_name, item.scholar_id) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<p class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ scholarLabel(item) }}</p>
|
||||
<p class="text-xs text-secondary"><code>{{ item.scholar_id }}</code></p>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppBadge :tone="item.is_enabled ? 'success' : 'warning'">
|
||||
{{ item.is_enabled ? "Enabled" : "Disabled" }}
|
||||
</AppBadge>
|
||||
<RunStatusBadge :status="item.last_run_status || 'unknown'" />
|
||||
<span class="text-xs text-secondary">{{ formatDate(item.last_run_dt, true) }}</span>
|
||||
</div>
|
||||
<RouterLink :to="scholarPublicationsRoute(item)" class="link-inline text-xs">
|
||||
View publications
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<AppButton variant="secondary" :disabled="saving" @click="openScholarSettings(item)">Manage</AppButton>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<AppTable class="hidden lg:block" label="Scholars table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Scholar</th>
|
||||
<th scope="col">Scholar ID</th>
|
||||
<th scope="col">Enabled</th>
|
||||
<th scope="col" class="w-[15rem]">Last run</th>
|
||||
<th scope="col">Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in scholars" :key="item.id">
|
||||
<td>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-zinc-200 bg-zinc-100 text-xs font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200"
|
||||
>
|
||||
<img
|
||||
v-if="canRenderImage('scholar', item.id, item.profile_image_url)"
|
||||
:src="item.profile_image_url || ''"
|
||||
:alt="`${scholarLabel(item)} profile image`"
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
@error="markImageFailed('scholar', item.id, item.profile_image_url)"
|
||||
/>
|
||||
<span v-else>{{ makeInitials(item.display_name, item.scholar_id) }}</span>
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<p class="truncate text-sm font-semibold text-ink-primary">{{ scholarLabel(item) }}</p>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<RouterLink :to="scholarPublicationsRoute(item)" class="link-inline text-xs">
|
||||
Publications
|
||||
</RouterLink>
|
||||
<a :href="scholarProfileUrl(item.scholar_id)" target="_blank" rel="noreferrer" class="link-inline text-xs">
|
||||
Open profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-w-0 gap-1">
|
||||
<strong class="truncate text-zinc-900 dark:text-zinc-100">{{ scholarLabel(item) }}</strong>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<RouterLink :to="scholarPublicationsRoute(item)" class="link-inline text-xs">
|
||||
Publications
|
||||
</RouterLink>
|
||||
<a :href="scholarProfileUrl(item.scholar_id)" target="_blank" rel="noreferrer" class="link-inline text-xs">
|
||||
Open profile
|
||||
</a>
|
||||
<AppBadge :tone="sourceTone(item.profile_image_source)">
|
||||
{{ formatImageSource(item.profile_image_source) }}
|
||||
</AppBadge>
|
||||
<AppButton variant="secondary" :disabled="saving" @click="openScholarSettings(item)">Manage</AppButton>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<AppTable class="hidden lg:block" label="Tracked scholars table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Scholar</th>
|
||||
<th scope="col" class="w-[11rem]">Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in scholars" :key="item.id">
|
||||
<td>
|
||||
<div class="flex items-start gap-3">
|
||||
<ScholarAvatar :label="item.display_name" :scholar-id="item.scholar_id" :image-url="item.profile_image_url" />
|
||||
|
||||
<div class="grid min-w-0 gap-1">
|
||||
<strong class="truncate text-ink-primary">{{ scholarLabel(item) }}</strong>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<RouterLink :to="scholarPublicationsRoute(item)" class="link-inline text-xs">
|
||||
Publications
|
||||
</RouterLink>
|
||||
<a :href="scholarProfileUrl(item.scholar_id)" target="_blank" rel="noreferrer" class="link-inline text-xs">
|
||||
Open profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><code class="text-xs">{{ item.scholar_id }}</code></td>
|
||||
<td>
|
||||
<AppBadge :tone="item.is_enabled ? 'success' : 'warning'">
|
||||
{{ item.is_enabled ? "Enabled" : "Disabled" }}
|
||||
</AppBadge>
|
||||
</td>
|
||||
<td>
|
||||
<div class="grid gap-1 text-xs">
|
||||
<RunStatusBadge :status="item.last_run_status || 'unknown'" />
|
||||
<span class="whitespace-nowrap text-secondary">{{ formatDate(item.last_run_dt, true) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<AppButton variant="secondary" :disabled="saving" @click="openScholarSettings(item)">
|
||||
Manage
|
||||
</AppButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</AppTable>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<AppButton variant="secondary" :disabled="saving" @click="openScholarSettings(item)">Manage</AppButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</AppTable>
|
||||
</div>
|
||||
</AsyncStateGate>
|
||||
</AppCard>
|
||||
</section>
|
||||
|
||||
<AppModal :open="activeScholarSettings !== null" title="Scholar settings" @close="closeScholarSettings">
|
||||
<div v-if="activeScholarSettings" class="grid gap-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-full border border-zinc-200 bg-zinc-100 text-xs font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200"
|
||||
>
|
||||
<img
|
||||
v-if="canRenderImage('scholar', activeScholarSettings.id, activeScholarSettings.profile_image_url)"
|
||||
:src="activeScholarSettings.profile_image_url || ''"
|
||||
:alt="`${scholarLabel(activeScholarSettings)} profile image`"
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
@error="markImageFailed('scholar', activeScholarSettings.id, activeScholarSettings.profile_image_url)"
|
||||
/>
|
||||
<span v-else>{{ makeInitials(activeScholarSettings.display_name, activeScholarSettings.scholar_id) }}</span>
|
||||
</div>
|
||||
<ScholarAvatar
|
||||
:label="activeScholarSettings.display_name"
|
||||
:scholar-id="activeScholarSettings.scholar_id"
|
||||
:image-url="activeScholarSettings.profile_image_url"
|
||||
/>
|
||||
|
||||
<div class="min-w-0 space-y-1">
|
||||
<p class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
<p class="truncate text-sm font-semibold text-ink-primary">
|
||||
{{ scholarLabel(activeScholarSettings) }}
|
||||
</p>
|
||||
<p class="text-xs text-secondary">
|
||||
|
|
@ -857,7 +764,7 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<label class="text-sm font-medium text-zinc-700 dark:text-zinc-300" :for="`scholar-image-url-${activeScholarSettings.id}`">
|
||||
<label class="text-sm font-medium text-ink-secondary" :for="`scholar-image-url-${activeScholarSettings.id}`">
|
||||
Profile image URL override
|
||||
</label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
|
|
@ -880,7 +787,7 @@ onMounted(() => {
|
|||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label
|
||||
:for="`scholar-image-upload-${activeScholarSettings.id}`"
|
||||
class="inline-flex min-h-10 cursor-pointer items-center justify-center rounded-lg border border-zinc-300 bg-zinc-100 px-3 py-2 text-sm font-semibold text-zinc-900 transition hover:bg-zinc-200 focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:focus-within:ring-brand-400 dark:focus-within:ring-offset-zinc-950"
|
||||
class="inline-flex min-h-10 cursor-pointer items-center justify-center rounded-lg border border-stroke-strong bg-action-secondary-bg px-3 py-2 text-sm font-semibold text-action-secondary-text transition hover:bg-action-secondary-hover-bg focus-within:outline-none focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-2 focus-within:ring-offset-focus-offset"
|
||||
:class="{ 'pointer-events-none opacity-60': isImageBusy(activeScholarSettings.id) }"
|
||||
>
|
||||
{{ imageUploadingScholarId === activeScholarSettings.id ? "Uploading..." : "Upload image" }}
|
||||
|
|
@ -899,7 +806,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 border-t border-zinc-200 pt-3 dark:border-zinc-800">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 border-t border-stroke-default pt-3">
|
||||
<AppButton
|
||||
variant="secondary"
|
||||
:disabled="isImageBusy(activeScholarSettings.id) || saving"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,83 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import AppAlert from "@/components/ui/AppAlert.vue";
|
||||
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
||||
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
||||
import AppButton from "@/components/ui/AppButton.vue";
|
||||
import AppCard from "@/components/ui/AppCard.vue";
|
||||
import AppCheckbox from "@/components/ui/AppCheckbox.vue";
|
||||
import AppHelpHint from "@/components/ui/AppHelpHint.vue";
|
||||
import AppInput from "@/components/ui/AppInput.vue";
|
||||
import AppModal from "@/components/ui/AppModal.vue";
|
||||
import AppSkeleton from "@/components/ui/AppSkeleton.vue";
|
||||
import {
|
||||
changePassword,
|
||||
fetchSettings,
|
||||
updateSettings,
|
||||
type UserSettings,
|
||||
updateSettings,
|
||||
} from "@/features/settings";
|
||||
import { ApiRequestError } from "@/lib/api/errors";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { normalizeUserNavVisiblePages, useUserSettingsStore } from "@/stores/user_settings";
|
||||
|
||||
interface NavPageOption {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
required: boolean;
|
||||
adminOnly?: boolean;
|
||||
}
|
||||
|
||||
const NAV_PAGE_OPTIONS: NavPageOption[] = [
|
||||
{
|
||||
id: "dashboard",
|
||||
label: "Dashboard",
|
||||
description: "Overview and latest publication updates.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: "scholars",
|
||||
label: "Scholars",
|
||||
description: "Tracked scholar profiles and profile management.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: "publications",
|
||||
label: "Publications",
|
||||
description: "Review and search discovered publication records.",
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
id: "settings",
|
||||
label: "Settings",
|
||||
description: "Configuration and account controls.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: "style-guide",
|
||||
label: "Style Guide",
|
||||
description: "Admin-only visual reference for theme and component tokens.",
|
||||
required: false,
|
||||
adminOnly: true,
|
||||
},
|
||||
{
|
||||
id: "runs",
|
||||
label: "Runs",
|
||||
description: "Admin-only diagnostics and queue operations.",
|
||||
required: false,
|
||||
adminOnly: true,
|
||||
},
|
||||
{
|
||||
id: "users",
|
||||
label: "Users",
|
||||
description: "Admin-only user management.",
|
||||
required: false,
|
||||
adminOnly: true,
|
||||
},
|
||||
];
|
||||
|
||||
const auth = useAuthStore();
|
||||
const userSettings = useUserSettingsStore();
|
||||
|
||||
const loading = ref(true);
|
||||
const saving = ref(false);
|
||||
|
|
@ -24,6 +86,7 @@ const updatingPassword = ref(false);
|
|||
const autoRunEnabled = ref(false);
|
||||
const runIntervalMinutes = ref("60");
|
||||
const requestDelaySeconds = ref("2");
|
||||
const navVisiblePages = ref<string[]>([]);
|
||||
|
||||
const currentPassword = ref("");
|
||||
const newPassword = ref("");
|
||||
|
|
@ -34,21 +97,58 @@ const errorRequestId = ref<string | null>(null);
|
|||
const successMessage = ref<string | null>(null);
|
||||
const showIngestionModal = ref(false);
|
||||
const showPasswordModal = ref(false);
|
||||
const showNavigationModal = ref(false);
|
||||
const MIN_CHECK_INTERVAL_MINUTES = 15;
|
||||
const MIN_REQUEST_DELAY_SECONDS = 2;
|
||||
|
||||
const visibleNavOptions = computed(() =>
|
||||
NAV_PAGE_OPTIONS.filter((option) => !option.adminOnly || auth.isAdmin),
|
||||
);
|
||||
const visibleNavLabels = computed(() =>
|
||||
visibleNavOptions.value
|
||||
.filter((option) => navVisiblePages.value.includes(option.id))
|
||||
.map((option) => option.label),
|
||||
);
|
||||
|
||||
function hydrateSettings(settings: UserSettings): void {
|
||||
autoRunEnabled.value = settings.auto_run_enabled;
|
||||
runIntervalMinutes.value = String(settings.run_interval_minutes);
|
||||
requestDelaySeconds.value = String(settings.request_delay_seconds);
|
||||
navVisiblePages.value = normalizeUserNavVisiblePages(settings.nav_visible_pages);
|
||||
userSettings.applySettings(settings);
|
||||
}
|
||||
|
||||
function parsePositiveInteger(value: string, label: string): number {
|
||||
function parseBoundedInteger(value: string, label: string, minimum: number): number {
|
||||
const parsed = Number(value);
|
||||
if (!Number.isInteger(parsed) || parsed <= 0) {
|
||||
throw new Error(`${label} must be a positive integer.`);
|
||||
if (!Number.isInteger(parsed)) {
|
||||
throw new Error(`${label} must be a whole number.`);
|
||||
}
|
||||
if (parsed < minimum) {
|
||||
throw new Error(`${label} must be at least ${minimum}.`);
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
function isNavPageVisible(pageId: string): boolean {
|
||||
return navVisiblePages.value.includes(pageId);
|
||||
}
|
||||
|
||||
function onToggleNavPage(page: NavPageOption, event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (page.required && !input.checked) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (input.checked) {
|
||||
navVisiblePages.value = normalizeUserNavVisiblePages([...navVisiblePages.value, page.id]);
|
||||
return;
|
||||
}
|
||||
|
||||
navVisiblePages.value = normalizeUserNavVisiblePages(
|
||||
navVisiblePages.value.filter((pageId) => pageId !== page.id),
|
||||
);
|
||||
}
|
||||
|
||||
async function loadSettings(): Promise<void> {
|
||||
loading.value = true;
|
||||
errorMessage.value = null;
|
||||
|
|
@ -78,14 +178,24 @@ async function onSaveSettings(): Promise<void> {
|
|||
try {
|
||||
const payload: UserSettings = {
|
||||
auto_run_enabled: autoRunEnabled.value,
|
||||
run_interval_minutes: parsePositiveInteger(runIntervalMinutes.value, "Run interval"),
|
||||
request_delay_seconds: parsePositiveInteger(requestDelaySeconds.value, "Request delay"),
|
||||
run_interval_minutes: parseBoundedInteger(
|
||||
runIntervalMinutes.value,
|
||||
"Check interval (minutes)",
|
||||
MIN_CHECK_INTERVAL_MINUTES,
|
||||
),
|
||||
request_delay_seconds: parseBoundedInteger(
|
||||
requestDelaySeconds.value,
|
||||
"Delay between requests (seconds)",
|
||||
MIN_REQUEST_DELAY_SECONDS,
|
||||
),
|
||||
nav_visible_pages: normalizeUserNavVisiblePages(navVisiblePages.value),
|
||||
};
|
||||
|
||||
const saved = await updateSettings(payload);
|
||||
hydrateSettings(saved);
|
||||
successMessage.value = "Settings updated.";
|
||||
showIngestionModal.value = false;
|
||||
showNavigationModal.value = false;
|
||||
} catch (error) {
|
||||
if (error instanceof ApiRequestError) {
|
||||
errorMessage.value = error.message;
|
||||
|
|
@ -142,65 +252,107 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<AppPage title="Settings" subtitle="Configure ingestion and account controls.">
|
||||
<AppAlert v-if="successMessage" tone="success" dismissible @dismiss="successMessage = null">
|
||||
<template #title>Saved</template>
|
||||
<p>{{ successMessage }}</p>
|
||||
</AppAlert>
|
||||
<AppPage
|
||||
title="Settings"
|
||||
subtitle="Control how often Scholarr checks profiles and how cautiously it sends requests."
|
||||
>
|
||||
<RequestStateAlerts
|
||||
:success-message="successMessage"
|
||||
success-title="Saved"
|
||||
:error-message="errorMessage"
|
||||
:error-request-id="errorRequestId"
|
||||
error-title="Settings request failed"
|
||||
@dismiss-success="successMessage = null"
|
||||
/>
|
||||
|
||||
<AppAlert v-if="errorMessage" tone="danger">
|
||||
<template #title>Settings request failed</template>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<p class="text-secondary">Request ID: {{ errorRequestId || "n/a" }}</p>
|
||||
</AppAlert>
|
||||
|
||||
<AppSkeleton v-if="loading" :lines="7" />
|
||||
|
||||
<template v-else>
|
||||
<section class="grid gap-4 lg:grid-cols-2">
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Scholar ingestion defaults</h2>
|
||||
<AsyncStateGate :loading="loading" :loading-lines="7" :show-empty="false">
|
||||
<section class="grid gap-4 xl:grid-cols-3">
|
||||
<AppCard class="flex h-full flex-col gap-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Automatic Checking</h2>
|
||||
<AppHelpHint text="Controls when Scholarr runs automatic profile checks and how cautiously it scrapes." />
|
||||
</div>
|
||||
<p class="text-sm text-secondary">
|
||||
Configure the background checker that looks for new publications on your tracked profiles.
|
||||
</p>
|
||||
<dl class="grid gap-2 text-sm text-secondary">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<dt>Scheduler</dt>
|
||||
<dd class="font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
<dt>Automatic checks</dt>
|
||||
<dd class="font-semibold text-ink-primary">
|
||||
{{ autoRunEnabled ? "Enabled" : "Disabled" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<dt>Run interval</dt>
|
||||
<dd class="font-semibold text-zinc-900 dark:text-zinc-100">{{ runIntervalMinutes }} min</dd>
|
||||
<dt>Check interval</dt>
|
||||
<dd class="font-semibold text-ink-primary">Every {{ runIntervalMinutes }} min</dd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<dt>Request delay</dt>
|
||||
<dd class="font-semibold text-zinc-900 dark:text-zinc-100">{{ requestDelaySeconds }} sec</dd>
|
||||
<dt>Delay between requests</dt>
|
||||
<dd class="font-semibold text-ink-primary">{{ requestDelaySeconds }} sec</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<AppButton variant="secondary" @click="showIngestionModal = true">
|
||||
Manage ingestion settings
|
||||
<AppButton variant="secondary" class="mt-auto self-start" @click="showIngestionModal = true">
|
||||
Edit checking rules
|
||||
</AppButton>
|
||||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Account security</h2>
|
||||
<p class="text-sm text-secondary">Password changes are handled in a dedicated overlay to reduce clutter.</p>
|
||||
<AppButton variant="secondary" @click="showPasswordModal = true">Manage password</AppButton>
|
||||
<AppCard class="flex h-full flex-col gap-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Account Access</h2>
|
||||
<AppHelpHint text="Manage credentials for your current signed-in account on this instance." />
|
||||
</div>
|
||||
<p class="text-sm text-secondary">
|
||||
Change your sign-in password from a focused view. This does not affect other users.
|
||||
</p>
|
||||
<AppButton variant="secondary" class="mt-auto self-start" @click="showPasswordModal = true">
|
||||
Change password
|
||||
</AppButton>
|
||||
</AppCard>
|
||||
|
||||
<AppCard class="flex h-full flex-col gap-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Navigation</h2>
|
||||
<AppHelpHint text="Choose which pages appear in the left sidebar. Dashboard, Scholars, and Settings are always visible." />
|
||||
</div>
|
||||
<p class="text-sm text-secondary">
|
||||
Visible now: {{ visibleNavLabels.length > 0 ? visibleNavLabels.join(", ") : "none" }}.
|
||||
</p>
|
||||
<AppButton variant="secondary" class="mt-auto self-start" @click="showNavigationModal = true">
|
||||
Customize sidebar pages
|
||||
</AppButton>
|
||||
</AppCard>
|
||||
</section>
|
||||
</template>
|
||||
</AsyncStateGate>
|
||||
|
||||
<AppModal :open="showIngestionModal" title="Ingestion settings" @close="showIngestionModal = false">
|
||||
<AppModal
|
||||
:open="showIngestionModal"
|
||||
title="Automatic Checking Settings"
|
||||
@close="showIngestionModal = false"
|
||||
>
|
||||
<form class="grid gap-3" @submit.prevent="onSaveSettings">
|
||||
<AppCheckbox id="auto-run-enabled" v-model="autoRunEnabled" label="Enable scheduler auto-run" />
|
||||
<AppCheckbox id="auto-run-enabled" v-model="autoRunEnabled" label="Enable automatic background checks" />
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<span>Run interval (minutes)</span>
|
||||
<AppInput id="run-interval" v-model="runIntervalMinutes" type="number" min="1" />
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
Check interval (minutes)
|
||||
<AppHelpHint text="How often Scholarr starts a background update check." />
|
||||
</span>
|
||||
<AppInput id="run-interval" v-model="runIntervalMinutes" type="number" :min="MIN_CHECK_INTERVAL_MINUTES" />
|
||||
<span class="text-xs text-secondary">Minimum: {{ MIN_CHECK_INTERVAL_MINUTES }} minutes.</span>
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<span>Request delay (seconds)</span>
|
||||
<AppInput id="request-delay" v-model="requestDelaySeconds" type="number" min="1" />
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
Delay between requests (seconds)
|
||||
<AppHelpHint text="Pause between profile requests during a check. Higher values are slower but safer." />
|
||||
</span>
|
||||
<AppInput
|
||||
id="request-delay"
|
||||
v-model="requestDelaySeconds"
|
||||
type="number"
|
||||
:min="MIN_REQUEST_DELAY_SECONDS"
|
||||
/>
|
||||
<span class="text-xs text-secondary">Minimum: {{ MIN_REQUEST_DELAY_SECONDS }} seconds.</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2 flex flex-wrap justify-end gap-2">
|
||||
|
|
@ -219,19 +371,19 @@ onMounted(() => {
|
|||
</form>
|
||||
</AppModal>
|
||||
|
||||
<AppModal :open="showPasswordModal" title="Change password" @close="showPasswordModal = false">
|
||||
<AppModal :open="showPasswordModal" title="Change Sign-in Password" @close="showPasswordModal = false">
|
||||
<form class="grid gap-3" @submit.prevent="onChangePassword">
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Current password</span>
|
||||
<AppInput v-model="currentPassword" type="password" autocomplete="current-password" />
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>New password</span>
|
||||
<AppInput v-model="newPassword" type="password" autocomplete="new-password" />
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Confirm new password</span>
|
||||
<AppInput v-model="confirmPassword" type="password" autocomplete="new-password" />
|
||||
</label>
|
||||
|
|
@ -251,5 +403,52 @@ onMounted(() => {
|
|||
</div>
|
||||
</form>
|
||||
</AppModal>
|
||||
|
||||
<AppModal :open="showNavigationModal" title="Sidebar Page Visibility" @close="showNavigationModal = false">
|
||||
<form class="grid gap-3" @submit.prevent="onSaveSettings">
|
||||
<p class="text-sm text-secondary">
|
||||
Turn optional pages on or off in the sidebar for your account.
|
||||
</p>
|
||||
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="option in visibleNavOptions"
|
||||
:key="option.id"
|
||||
class="rounded-lg border border-stroke-default bg-surface-card-muted/70 px-3 py-2"
|
||||
>
|
||||
<label class="flex items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="mt-0.5 h-4 w-4 rounded border-stroke-interactive bg-surface-input text-brand-600 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
|
||||
:checked="isNavPageVisible(option.id)"
|
||||
:disabled="saving || option.required"
|
||||
@change="onToggleNavPage(option, $event)"
|
||||
/>
|
||||
<span class="grid gap-0.5">
|
||||
<span class="text-sm font-medium text-ink-primary">
|
||||
{{ option.label }}
|
||||
<span v-if="option.required" class="ml-1 text-xs text-ink-muted">(required)</span>
|
||||
</span>
|
||||
<span class="text-xs text-secondary">{{ option.description }}</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-2 flex flex-wrap justify-end gap-2">
|
||||
<AppButton
|
||||
variant="ghost"
|
||||
type="button"
|
||||
:disabled="saving"
|
||||
@click="showNavigationModal = false"
|
||||
>
|
||||
Cancel
|
||||
</AppButton>
|
||||
<AppButton type="submit" :disabled="saving">
|
||||
{{ saving ? "Saving..." : "Save sidebar settings" }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</form>
|
||||
</AppModal>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
import AppPage from "@/components/layout/AppPage.vue";
|
||||
import QueueHealthBadge from "@/components/patterns/QueueHealthBadge.vue";
|
||||
|
|
@ -12,17 +12,107 @@ import AppCheckbox from "@/components/ui/AppCheckbox.vue";
|
|||
import AppInput from "@/components/ui/AppInput.vue";
|
||||
import AppSelect from "@/components/ui/AppSelect.vue";
|
||||
import AppTable from "@/components/ui/AppTable.vue";
|
||||
import { useThemeStore } from "@/stores/theme";
|
||||
|
||||
const sampleName = ref("Ada Lovelace");
|
||||
const sampleEmail = ref("ada@example.com");
|
||||
const sampleRole = ref("operator");
|
||||
const sampleEnabled = ref(true);
|
||||
const theme = useThemeStore();
|
||||
|
||||
const isDarkTheme = computed(() => theme.active === "dark");
|
||||
const toggleThemeLabel = computed(() =>
|
||||
isDarkTheme.value ? "Switch to light mode" : "Switch to dark mode",
|
||||
);
|
||||
const selectedPreset = computed({
|
||||
get: () => theme.preset,
|
||||
set: (value: string) => theme.setPreset(value),
|
||||
});
|
||||
|
||||
const surfaceSamples = [
|
||||
{ label: "App surface", value: "--theme-surface-app" },
|
||||
{ label: "Nav surface", value: "--theme-surface-nav" },
|
||||
{ label: "Active nav", value: "--theme-surface-nav-active" },
|
||||
{ label: "Card surface", value: "--theme-surface-card" },
|
||||
{ label: "Table header", value: "--theme-surface-table-header" },
|
||||
{ label: "Input surface", value: "--theme-surface-input" },
|
||||
];
|
||||
|
||||
const textSamples = [
|
||||
{ label: "Primary text", value: "--theme-text-primary" },
|
||||
{ label: "Secondary text", value: "--theme-text-secondary" },
|
||||
{ label: "Muted text", value: "--theme-text-muted" },
|
||||
{ label: "Inverse text", value: "--theme-text-inverse" },
|
||||
{ label: "Link text", value: "--theme-text-link" },
|
||||
];
|
||||
|
||||
const actionSamples = [
|
||||
{ label: "Primary action", value: "--theme-action-primary-bg" },
|
||||
{ label: "Secondary action", value: "--theme-action-secondary-bg" },
|
||||
{ label: "Ghost action", value: "--theme-action-ghost-bg" },
|
||||
{ label: "Danger action", value: "--theme-action-danger-bg" },
|
||||
];
|
||||
|
||||
const borderSamples = [
|
||||
{ label: "Default border", value: "--theme-border-default" },
|
||||
{ label: "Strong border", value: "--theme-border-strong" },
|
||||
{ label: "Subtle border", value: "--theme-border-subtle" },
|
||||
{ label: "Interactive border", value: "--theme-border-interactive" },
|
||||
];
|
||||
|
||||
const focusSamples = [
|
||||
{ label: "Focus ring", value: "--theme-focus-ring" },
|
||||
{ label: "Focus offset", value: "--theme-focus-ring-offset" },
|
||||
];
|
||||
|
||||
const stateSamples = [
|
||||
{ label: "Info state", value: "--theme-state-info-bg", text: "--theme-state-info-text", border: "--theme-state-info-border" },
|
||||
{
|
||||
label: "Success state",
|
||||
value: "--theme-state-success-bg",
|
||||
text: "--theme-state-success-text",
|
||||
border: "--theme-state-success-border",
|
||||
},
|
||||
{
|
||||
label: "Warning state",
|
||||
value: "--theme-state-warning-bg",
|
||||
text: "--theme-state-warning-text",
|
||||
border: "--theme-state-warning-border",
|
||||
},
|
||||
{ label: "Danger state", value: "--theme-state-danger-bg", text: "--theme-state-danger-text", border: "--theme-state-danger-border" },
|
||||
];
|
||||
|
||||
const scaleFamilies = ["brand", "info", "success", "warning", "danger"] as const;
|
||||
const scaleSteps = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"] as const;
|
||||
|
||||
const sampleRows = [
|
||||
{ id: 101, title: "Entity Resolution Improvements", status: "running", owner: "Scheduler" },
|
||||
{ id: 102, title: "Retry Queue Drain", status: "partial_failure", owner: "Ops" },
|
||||
{ id: 103, title: "Weekly Publication Sync", status: "success", owner: "Ingestion" },
|
||||
];
|
||||
|
||||
function cssVarStyle(tokenName: string): Record<string, string> {
|
||||
return { backgroundColor: `rgb(var(${tokenName}) / 1)` };
|
||||
}
|
||||
|
||||
function cssVarBorderStyle(tokenName: string): Record<string, string> {
|
||||
return { borderColor: `rgb(var(${tokenName}) / 1)` };
|
||||
}
|
||||
|
||||
function textSampleStyle(tokenName: string): Record<string, string> {
|
||||
if (tokenName === "--theme-text-inverse") {
|
||||
return { backgroundColor: "rgb(var(--theme-surface-overlay) / 1)" };
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
function colorScaleStyle(family: (typeof scaleFamilies)[number], step: (typeof scaleSteps)[number]): Record<string, string> {
|
||||
return { backgroundColor: `rgb(var(--color-${family}-${step}) / 1)` };
|
||||
}
|
||||
|
||||
function onToggleTheme(): void {
|
||||
theme.setPreference(isDarkTheme.value ? "light" : "dark");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -30,9 +120,193 @@ const sampleRows = [
|
|||
title="Style Guide"
|
||||
subtitle="Reference page for Tailwind component patterns used across the application."
|
||||
>
|
||||
<AppCard class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Theme Lab</h2>
|
||||
<p class="text-sm text-secondary">Preview preset + mode behavior and inspect semantic token groups.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppSelect v-model="selectedPreset" class="w-40">
|
||||
<option v-for="preset in theme.availablePresets" :key="preset.id" :value="preset.id">
|
||||
{{ preset.label }}
|
||||
</option>
|
||||
</AppSelect>
|
||||
<AppButton variant="secondary" @click="onToggleTheme">
|
||||
{{ toggleThemeLabel }}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-3">
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">Surfaces</p>
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="sample in surfaceSamples"
|
||||
:key="sample.value"
|
||||
class="flex items-center justify-between rounded-lg border border-stroke-default px-3 py-2 text-xs text-ink-secondary"
|
||||
:style="cssVarStyle(sample.value)"
|
||||
>
|
||||
<span class="font-medium text-ink-primary">{{ sample.label }}</span>
|
||||
<code>{{ sample.value }}</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">Text</p>
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="sample in textSamples"
|
||||
:key="sample.value"
|
||||
class="flex items-center justify-between rounded-lg border border-stroke-default bg-surface-card px-3 py-2 text-xs"
|
||||
:style="textSampleStyle(sample.value)"
|
||||
>
|
||||
<span class="font-medium" :style="{ color: `rgb(var(${sample.value}) / 1)` }">{{ sample.label }}</span>
|
||||
<code class="text-ink-muted">{{ sample.value }}</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">Actions</p>
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="sample in actionSamples"
|
||||
:key="sample.value"
|
||||
class="flex items-center justify-between rounded-lg border border-stroke-default px-3 py-2 text-xs text-ink-secondary"
|
||||
:style="cssVarStyle(sample.value)"
|
||||
>
|
||||
<span class="font-medium text-ink-primary">{{ sample.label }}</span>
|
||||
<code>{{ sample.value }}</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-3">
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">Borders</p>
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="sample in borderSamples"
|
||||
:key="sample.value"
|
||||
class="flex items-center justify-between rounded-lg border-2 bg-surface-card px-3 py-2 text-xs text-ink-secondary"
|
||||
:style="cssVarBorderStyle(sample.value)"
|
||||
>
|
||||
<span class="font-medium text-ink-primary">{{ sample.label }}</span>
|
||||
<code>{{ sample.value }}</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">Focus</p>
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="sample in focusSamples"
|
||||
:key="sample.value"
|
||||
class="flex items-center justify-between rounded-lg border border-stroke-default bg-surface-card px-3 py-2 text-xs text-ink-secondary"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2 py-1 font-medium text-ink-primary focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
:style="{ '--tw-ring-color': `rgb(var(${sample.value}) / 1)`, '--tw-ring-offset-color': 'rgb(var(--theme-focus-ring-offset) / 1)' }"
|
||||
>
|
||||
Focus me
|
||||
</button>
|
||||
<code>{{ sample.value }}</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">States</p>
|
||||
<ul class="grid gap-2">
|
||||
<li
|
||||
v-for="sample in stateSamples"
|
||||
:key="sample.value"
|
||||
class="flex items-center justify-between rounded-lg border px-3 py-2 text-xs"
|
||||
:style="{
|
||||
backgroundColor: `rgb(var(${sample.value}) / 1)`,
|
||||
borderColor: `rgb(var(${sample.border}) / 1)`,
|
||||
color: `rgb(var(${sample.text}) / 1)`,
|
||||
}"
|
||||
>
|
||||
<span class="font-medium">{{ sample.label }}</span>
|
||||
<code>{{ sample.value }}</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Scale Ramps</h2>
|
||||
<div class="grid gap-3">
|
||||
<div v-for="family in scaleFamilies" :key="family" class="grid gap-1">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-muted">{{ family }}</p>
|
||||
<div class="grid grid-cols-11 gap-1">
|
||||
<span
|
||||
v-for="step in scaleSteps"
|
||||
:key="`${family}-${step}`"
|
||||
class="h-8 rounded-md border border-stroke-default"
|
||||
:style="colorScaleStyle(family, step)"
|
||||
:title="`--color-${family}-${step}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Shell Preview</h2>
|
||||
<p class="text-sm text-secondary">Quick check for app background, nav, card, table, action, and status token coverage.</p>
|
||||
<div class="grid gap-3 rounded-2xl border border-stroke-default bg-surface-app p-3 lg:grid-cols-[14rem_minmax(0,1fr)]">
|
||||
<aside class="space-y-2 rounded-xl border border-stroke-default bg-surface-nav p-3">
|
||||
<div class="rounded-lg bg-surface-nav-active px-2 py-1 text-sm font-semibold text-ink-inverse">Dashboard</div>
|
||||
<div class="rounded-lg px-2 py-1 text-sm text-ink-secondary">Publications</div>
|
||||
<div class="rounded-lg px-2 py-1 text-sm text-ink-secondary">Scholars</div>
|
||||
</aside>
|
||||
<section class="space-y-3 rounded-xl border border-stroke-default bg-surface-card p-3">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<p class="text-sm font-semibold text-ink-primary">Latest Update Check</p>
|
||||
<RunStatusBadge status="running" />
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<AppButton>Primary action</AppButton>
|
||||
<AppButton variant="secondary">Secondary</AppButton>
|
||||
<AppBadge tone="warning">Needs review</AppBadge>
|
||||
</div>
|
||||
<AppTable label="Shell preview table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Scholar</th>
|
||||
<th scope="col">State</th>
|
||||
<th scope="col">Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Ada Lovelace</td>
|
||||
<td>Checked</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Geoffrey Hinton</td>
|
||||
<td>Queued</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</AppTable>
|
||||
</section>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<section class="grid gap-4 xl:grid-cols-2">
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Buttons</h2>
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Buttons</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppButton>Primary</AppButton>
|
||||
<AppButton variant="secondary">Secondary</AppButton>
|
||||
|
|
@ -44,7 +318,7 @@ const sampleRows = [
|
|||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Status System</h2>
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Status System</h2>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<AppBadge tone="neutral">Neutral</AppBadge>
|
||||
<AppBadge tone="info">Info</AppBadge>
|
||||
|
|
@ -64,19 +338,19 @@ const sampleRows = [
|
|||
|
||||
<section class="grid gap-4 xl:grid-cols-2">
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Forms</h2>
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Forms</h2>
|
||||
<form class="grid gap-3" @submit.prevent>
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Name</span>
|
||||
<AppInput v-model="sampleName" autocomplete="name" />
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Email</span>
|
||||
<AppInput v-model="sampleEmail" type="email" autocomplete="email" />
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<label class="grid gap-2 text-sm font-medium text-ink-secondary">
|
||||
<span>Role</span>
|
||||
<AppSelect v-model="sampleRole">
|
||||
<option value="viewer">Viewer</option>
|
||||
|
|
@ -95,7 +369,7 @@ const sampleRows = [
|
|||
</AppCard>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Alerts</h2>
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Alerts</h2>
|
||||
<AppAlert tone="info">
|
||||
<template #title>Informational</template>
|
||||
<p>Use for contextual guidance and non-critical notices.</p>
|
||||
|
|
@ -112,7 +386,7 @@ const sampleRows = [
|
|||
</section>
|
||||
|
||||
<AppCard class="space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Table Pattern</h2>
|
||||
<h2 class="text-lg font-semibold text-ink-primary">Table Pattern</h2>
|
||||
<AppTable label="Style guide sample run table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue