Jennie Robinson Faber
cb93f14160
- B: token-equivalent rgba → color-mix(srgb, var(--ember|green|candle) X%, transparent) so colors track dark mode - C: drop stale var(--green, #...) fallbacks (canonical token now defined in main.css) - F: inline circle badge → <CircleBadge/> in admin/index, members/[id], members/index
857 lines
20 KiB
Vue
857 lines
20 KiB
Vue
<template>
|
||
<div class="admin-prereg">
|
||
<!-- Page Header -->
|
||
<div class="page-header">
|
||
<div class="header-row">
|
||
<div>
|
||
<h1>Pre-Registrants</h1>
|
||
<p v-if="stats">
|
||
{{ stats.total }} total · {{ stats.pending }} pending ·
|
||
{{ stats.selected }} selected · {{ stats.invited }} invited ·
|
||
{{ stats.accepted }} accepted
|
||
</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button
|
||
class="btn"
|
||
:disabled="!selectedIds.length"
|
||
@click="markAsSelected"
|
||
>
|
||
Mark as Selected ({{ selectedIds.length }})
|
||
</button>
|
||
<button
|
||
class="btn btn-primary"
|
||
:disabled="!invitableIds.length"
|
||
@click="openInviteModal"
|
||
>
|
||
Send Invites ({{ invitableIds.length }})
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search / Filter -->
|
||
<div class="filter-bar">
|
||
<div class="field" style="margin-bottom: 0; flex: 1">
|
||
<input
|
||
v-model="searchQuery"
|
||
placeholder="Search by name, email, city, role..."
|
||
/>
|
||
</div>
|
||
<div class="field" style="margin-bottom: 0">
|
||
<select v-model="statusFilter" aria-label="Filter by status">
|
||
<option value="">All Statuses</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="selected">Selected</option>
|
||
<option value="invited">Invited</option>
|
||
<option value="accepted">Accepted</option>
|
||
<option value="expired">Expired</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-wrap">
|
||
<div v-if="pending" class="loading-state">
|
||
<div class="spinner" />
|
||
<span>Loading pre-registrants...</span>
|
||
</div>
|
||
|
||
<div v-else-if="error" class="error-state">
|
||
Error loading pre-registrants: {{ error }}
|
||
</div>
|
||
|
||
<table v-else-if="filtered.length">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-check">
|
||
<label class="custom-check" aria-label="Select all">
|
||
<input
|
||
type="checkbox"
|
||
:checked="allVisibleSelected"
|
||
:indeterminate="!allVisibleSelected && someVisibleSelected"
|
||
@change="toggleSelectAll"
|
||
/>
|
||
<span class="check-mark" />
|
||
</label>
|
||
</th>
|
||
<th class="sortable" @click="toggleSort('name')">Name <span v-if="sortKey === 'name'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
|
||
<th class="sortable" @click="toggleSort('email')">Email <span v-if="sortKey === 'email'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
|
||
<th class="sortable" @click="toggleSort('city')">City <span v-if="sortKey === 'city'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
|
||
<th class="sortable" @click="toggleSort('role')">Role <span v-if="sortKey === 'role'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
|
||
<th class="sortable" @click="toggleSort('status')">Status <span v-if="sortKey === 'status'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
|
||
<th class="sortable col-date" @click="toggleSort('createdAt')">Registered <span v-if="sortKey === 'createdAt'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr
|
||
v-for="pr in filtered"
|
||
:key="pr._id"
|
||
class="selectable-row"
|
||
:class="{ 'row-selected': selectedIds.includes(pr._id) }"
|
||
@click="toggleSelect(pr._id)"
|
||
>
|
||
<td class="col-check" @click.stop>
|
||
<label class="custom-check" :aria-label="`Select ${pr.name || pr.email}`">
|
||
<input
|
||
type="checkbox"
|
||
:checked="selectedIds.includes(pr._id)"
|
||
@change="toggleSelect(pr._id)"
|
||
/>
|
||
<span class="check-mark" />
|
||
</label>
|
||
</td>
|
||
<td class="col-name">{{ pr.name || "—" }}</td>
|
||
<td class="col-email">{{ pr.email }}</td>
|
||
<td>{{ pr.city || "—" }}</td>
|
||
<td>{{ pr.role || "—" }}</td>
|
||
<td @click.stop>
|
||
<select
|
||
class="inline-status"
|
||
:class="`status-${pr.status}`"
|
||
:value="pr.status"
|
||
:disabled="savingId === pr._id"
|
||
aria-label="Change status"
|
||
@change="updateStatus(pr._id, $event.target.value)"
|
||
>
|
||
<option value="pending">Pending</option>
|
||
<option value="selected">Selected</option>
|
||
<option value="invited">Invited</option>
|
||
<option value="accepted">Accepted</option>
|
||
<option value="expired">Expired</option>
|
||
</select>
|
||
</td>
|
||
<td class="col-mono col-date">
|
||
{{ formatDate(pr.createdAt) }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div v-else class="empty-state">
|
||
No pre-registrants found matching your criteria
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Send Invites Modal -->
|
||
<div
|
||
v-if="showInviteModal"
|
||
class="modal-overlay"
|
||
@click.self="showInviteModal = false"
|
||
>
|
||
<div class="modal modal-wide">
|
||
<div class="modal-header">
|
||
<h2>Send Invitation Emails</h2>
|
||
<button class="modal-close" @click="showInviteModal = false">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<p class="help-text">
|
||
Sending to <strong>{{ invitableIds.length }}</strong> pre-registrant{{
|
||
invitableIds.length !== 1 ? "s" : ""
|
||
}}. Each receives a unique invitation link valid for 48 hours.
|
||
</p>
|
||
|
||
<div class="field">
|
||
<label>Email Template</label>
|
||
<textarea v-model="inviteTemplate" rows="12"></textarea>
|
||
<p class="help-text" style="margin-top: 4px">
|
||
Tokens: <code>{name}</code>, <code>{acceptLink}</code>
|
||
</p>
|
||
</div>
|
||
|
||
<div v-if="invitePreview" class="field">
|
||
<label>Preview ({{ invitePreview.name || invitePreview.email }})</label>
|
||
<pre class="preview-box">{{ invitePreviewText }}</pre>
|
||
</div>
|
||
|
||
<div v-if="inviteResults" class="results-box">
|
||
<strong>Invitations sent</strong>
|
||
<p class="status-ok">{{ inviteResults.sent }} sent</p>
|
||
<p v-if="inviteResults.failed" class="status-error">
|
||
{{ inviteResults.failed }} failed
|
||
</p>
|
||
<div v-if="inviteResults.results?.some((r) => !r.success)">
|
||
<p
|
||
v-for="fail in inviteResults.results.filter((r) => !r.success)"
|
||
:key="fail.email"
|
||
class="status-error"
|
||
style="font-size: 11px"
|
||
>
|
||
{{ fail.email }}: {{ fail.error }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button @click="showInviteModal = false" class="btn">
|
||
{{ inviteResults ? "Done" : "Cancel" }}
|
||
</button>
|
||
<button
|
||
v-if="!inviteResults"
|
||
:disabled="sendingInvites"
|
||
@click="submitInvites"
|
||
class="btn btn-primary"
|
||
>
|
||
{{
|
||
sendingInvites
|
||
? "Sending..."
|
||
: `Send ${invitableIds.length} invitation${invitableIds.length !== 1 ? "s" : ""}`
|
||
}}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
definePageMeta({
|
||
layout: "admin",
|
||
middleware: "admin",
|
||
});
|
||
|
||
const toast = useToast();
|
||
|
||
const {
|
||
data: preRegistrants,
|
||
pending,
|
||
error,
|
||
refresh,
|
||
} = await useFetch("/api/admin/pre-registrants");
|
||
|
||
const { data: stats, refresh: refreshStats } = await useFetch(
|
||
"/api/admin/pre-registrants/stats",
|
||
);
|
||
|
||
const searchQuery = ref("");
|
||
const statusFilter = ref("");
|
||
const selectedIds = ref([]);
|
||
const savingId = ref(null);
|
||
const sortKey = ref("");
|
||
const sortDir = ref("asc");
|
||
|
||
// Invite
|
||
const showInviteModal = ref(false);
|
||
const sendingInvites = ref(false);
|
||
const inviteResults = ref(null);
|
||
|
||
const DEFAULT_INVITE_TEMPLATE = `Hi {name},
|
||
|
||
You pre-registered for Ghost Guild, and we're ready for you.
|
||
|
||
Click below to accept your invitation, choose your circle, and set your contribution level:
|
||
|
||
{acceptLink}
|
||
|
||
This link expires in 48 hours. If it expires, we can send you a new one. Just reply to this email.
|
||
|
||
See you soon!
|
||
|
||
– Ghost Guild`;
|
||
|
||
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
|
||
|
||
const toggleSort = (key) => {
|
||
if (sortKey.value === key) {
|
||
sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
|
||
} else {
|
||
sortKey.value = key;
|
||
sortDir.value = "asc";
|
||
}
|
||
};
|
||
|
||
const filtered = computed(() => {
|
||
if (!preRegistrants.value) return [];
|
||
|
||
const result = preRegistrants.value.filter((pr) => {
|
||
const q = searchQuery.value.toLowerCase();
|
||
const matchesSearch =
|
||
!q ||
|
||
(pr.name || "").toLowerCase().includes(q) ||
|
||
pr.email.toLowerCase().includes(q) ||
|
||
(pr.city || "").toLowerCase().includes(q) ||
|
||
(pr.role || "").toLowerCase().includes(q);
|
||
|
||
const matchesStatus = !statusFilter.value || pr.status === statusFilter.value;
|
||
|
||
return matchesSearch && matchesStatus;
|
||
});
|
||
|
||
if (sortKey.value) {
|
||
const dir = sortDir.value === "asc" ? 1 : -1;
|
||
const key = sortKey.value;
|
||
result.sort((a, b) => {
|
||
const aVal = (a[key] || "").toString().toLowerCase();
|
||
const bVal = (b[key] || "").toString().toLowerCase();
|
||
return aVal < bVal ? -dir : aVal > bVal ? dir : 0;
|
||
});
|
||
}
|
||
|
||
return result;
|
||
});
|
||
|
||
// Selection helpers
|
||
const allVisibleSelected = computed(() => {
|
||
if (!filtered.value.length) return false;
|
||
return filtered.value.every((pr) => selectedIds.value.includes(pr._id));
|
||
});
|
||
|
||
const someVisibleSelected = computed(() => {
|
||
return filtered.value.some((pr) => selectedIds.value.includes(pr._id));
|
||
});
|
||
|
||
// IDs of selected pre-registrants that can actually be invited (pending, selected, or invited for resend)
|
||
const invitableIds = computed(() => {
|
||
if (!preRegistrants.value) return [];
|
||
return selectedIds.value.filter((id) => {
|
||
const pr = preRegistrants.value.find((p) => p._id === id);
|
||
return pr && (pr.status === "pending" || pr.status === "selected" || pr.status === "invited");
|
||
});
|
||
});
|
||
|
||
const toggleSelectAll = () => {
|
||
if (allVisibleSelected.value) {
|
||
const visibleIds = new Set(filtered.value.map((pr) => pr._id));
|
||
selectedIds.value = selectedIds.value.filter((id) => !visibleIds.has(id));
|
||
} else {
|
||
const currentSet = new Set(selectedIds.value);
|
||
for (const pr of filtered.value) {
|
||
currentSet.add(pr._id);
|
||
}
|
||
selectedIds.value = [...currentSet];
|
||
}
|
||
};
|
||
|
||
const toggleSelect = (id) => {
|
||
const idx = selectedIds.value.indexOf(id);
|
||
if (idx >= 0) {
|
||
selectedIds.value.splice(idx, 1);
|
||
} else {
|
||
selectedIds.value.push(id);
|
||
}
|
||
};
|
||
|
||
const updateStatus = async (id, newStatus) => {
|
||
savingId.value = id;
|
||
try {
|
||
await $fetch(`/api/admin/pre-registrants/${id}`, {
|
||
method: "PUT",
|
||
body: { status: newStatus },
|
||
});
|
||
await refresh();
|
||
await refreshStats();
|
||
toast.add({ title: "Status updated", color: "green" });
|
||
} catch (err) {
|
||
toast.add({
|
||
title: "Failed to update",
|
||
description: err.data?.statusMessage || err.message,
|
||
color: "red",
|
||
});
|
||
} finally {
|
||
savingId.value = null;
|
||
}
|
||
};
|
||
|
||
// Mark selected as "selected" status
|
||
const markAsSelected = async () => {
|
||
try {
|
||
await $fetch("/api/admin/pre-registrants/bulk-status", {
|
||
method: "PATCH",
|
||
body: { ids: selectedIds.value, status: "selected" },
|
||
});
|
||
await refresh();
|
||
await refreshStats();
|
||
selectedIds.value = [];
|
||
toast.add({ title: "Marked as selected", color: "green" });
|
||
} catch (err) {
|
||
toast.add({
|
||
title: "Failed to update status",
|
||
description: err.data?.statusMessage || err.message,
|
||
color: "red",
|
||
});
|
||
}
|
||
};
|
||
|
||
// Invite modal
|
||
const invitePreview = computed(() => {
|
||
if (!invitableIds.value.length || !preRegistrants.value) return null;
|
||
return preRegistrants.value.find((pr) => pr._id === invitableIds.value[0]);
|
||
});
|
||
|
||
const invitePreviewText = computed(() => {
|
||
if (!invitePreview.value) return "";
|
||
return inviteTemplate.value
|
||
.replace(/\{name\}/g, invitePreview.value.name || "there")
|
||
.replace(/\{acceptLink\}/g, "https://ghostguild.org/accept-invite#...");
|
||
});
|
||
|
||
const openInviteModal = () => {
|
||
inviteResults.value = null;
|
||
showInviteModal.value = true;
|
||
};
|
||
|
||
const submitInvites = async () => {
|
||
sendingInvites.value = true;
|
||
try {
|
||
const result = await $fetch("/api/admin/pre-registrants/invite", {
|
||
method: "POST",
|
||
body: {
|
||
preRegistrantIds: invitableIds.value,
|
||
emailTemplate: inviteTemplate.value,
|
||
},
|
||
});
|
||
|
||
inviteResults.value = result;
|
||
await refresh();
|
||
await refreshStats();
|
||
selectedIds.value = [];
|
||
|
||
toast.add({
|
||
title: `Sent ${result.sent} invitation${result.sent !== 1 ? "s" : ""}`,
|
||
description: result.failed ? `${result.failed} failed` : undefined,
|
||
color: result.failed ? "orange" : "green",
|
||
});
|
||
} catch (err) {
|
||
toast.add({
|
||
title: "Failed to send invitations",
|
||
description: err.data?.statusMessage || err.message,
|
||
color: "red",
|
||
});
|
||
} finally {
|
||
sendingInvites.value = false;
|
||
}
|
||
};
|
||
|
||
const formatDate = (dateString) => {
|
||
return new Date(dateString).toLocaleDateString();
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.admin-prereg {}
|
||
|
||
/* ---- PAGE HEADER ---- */
|
||
.page-header {
|
||
padding: 28px 28px 20px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
|
||
.header-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-family: "Brygada 1918", serif;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: var(--text-bright);
|
||
line-height: 1.2;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.page-header p {
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---- FILTER BAR ---- */
|
||
.filter-bar {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 16px 28px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
|
||
/* ---- TABLE ---- */
|
||
.table-wrap {
|
||
padding: 0 28px 24px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 12px;
|
||
}
|
||
|
||
thead th {
|
||
text-align: left;
|
||
padding: 12px 10px;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-faint);
|
||
border-bottom: 1px dashed var(--border);
|
||
font-weight: normal;
|
||
}
|
||
|
||
thead th.sortable {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
thead th.sortable:hover {
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.sort-arrow {
|
||
font-size: 10px;
|
||
color: var(--candle);
|
||
}
|
||
|
||
tbody tr {
|
||
border-bottom: 1px dashed var(--border);
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background: var(--surface);
|
||
}
|
||
|
||
tbody td {
|
||
padding: 10px;
|
||
color: var(--text);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.col-check {
|
||
width: 40px;
|
||
padding-left: 12px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.selectable-row {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.row-selected {
|
||
background: var(--surface);
|
||
}
|
||
|
||
/* ---- CUSTOM CHECKBOX ---- */
|
||
.custom-check {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.custom-check input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.check-mark {
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 1px solid var(--border);
|
||
background: var(--input-bg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
|
||
.custom-check:hover .check-mark {
|
||
border-color: var(--candle);
|
||
}
|
||
|
||
.custom-check input:checked + .check-mark {
|
||
background: var(--candle);
|
||
border-color: var(--candle);
|
||
}
|
||
|
||
.custom-check input:checked + .check-mark::after {
|
||
content: "";
|
||
width: 4px;
|
||
height: 8px;
|
||
border: solid var(--bg);
|
||
border-width: 0 1.5px 1.5px 0;
|
||
transform: rotate(45deg) translateY(-1px);
|
||
}
|
||
|
||
.custom-check input:indeterminate + .check-mark {
|
||
background: var(--candle);
|
||
border-color: var(--candle);
|
||
}
|
||
|
||
.custom-check input:indeterminate + .check-mark::after {
|
||
content: "";
|
||
width: 8px;
|
||
height: 0;
|
||
border-bottom: 1.5px solid var(--bg);
|
||
}
|
||
|
||
.col-name {
|
||
font-weight: 500;
|
||
color: var(--text-bright);
|
||
}
|
||
|
||
.col-email {
|
||
color: var(--text-dim);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.col-mono {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.col-date {
|
||
font-size: 11px;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* ---- STATUS BADGES ---- */
|
||
.status-badge {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
padding: 2px 6px;
|
||
border: 1px dashed var(--border);
|
||
}
|
||
|
||
.status-pending {
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.status-selected {
|
||
color: var(--candle);
|
||
border-color: var(--candle);
|
||
}
|
||
|
||
.status-invited {
|
||
color: var(--text-bright);
|
||
border-color: var(--text-dim);
|
||
}
|
||
|
||
.status-accepted {
|
||
color: var(--green);
|
||
border-color: var(--green);
|
||
}
|
||
|
||
.status-expired {
|
||
color: var(--ember);
|
||
border-color: var(--ember);
|
||
}
|
||
|
||
/* ---- INLINE STATUS SELECT ---- */
|
||
.inline-status {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
padding: 2px 6px;
|
||
border: 1px dashed var(--border);
|
||
background: transparent;
|
||
cursor: pointer;
|
||
font-family: "Commit Mono", monospace;
|
||
}
|
||
|
||
.inline-status:disabled {
|
||
opacity: 0.5;
|
||
cursor: wait;
|
||
}
|
||
|
||
/* ---- STATUS INDICATORS ---- */
|
||
.status-ok {
|
||
color: var(--green);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.status-error {
|
||
color: var(--ember);
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* ---- MODALS ---- */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 50;
|
||
}
|
||
|
||
.modal {
|
||
background: var(--bg);
|
||
border: 1px dashed var(--border);
|
||
max-width: 440px;
|
||
width: 100%;
|
||
margin: 16px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-wide {
|
||
max-width: 640px;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px 16px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
|
||
.modal-header h2 {
|
||
font-family: "Brygada 1918", serif;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: var(--text-bright);
|
||
}
|
||
|
||
.modal-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-faint);
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
padding: 0 4px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 20px 24px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 16px 24px;
|
||
border-top: 1px dashed var(--border);
|
||
}
|
||
|
||
/* ---- HELP TEXT ---- */
|
||
.help-text {
|
||
font-size: 11px;
|
||
color: var(--text-dim);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.help-text code {
|
||
color: var(--text-bright);
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* ---- PREVIEW BOX ---- */
|
||
.preview-box {
|
||
font-family: "Commit Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--text-dim);
|
||
background: var(--surface);
|
||
border: 1px dashed var(--border);
|
||
padding: 16px;
|
||
white-space: pre-wrap;
|
||
overflow: auto;
|
||
max-height: 200px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ---- RESULTS BOX ---- */
|
||
.results-box {
|
||
padding: 16px 20px;
|
||
border: 1px dashed var(--border);
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.results-box strong {
|
||
color: var(--text-bright);
|
||
font-size: 13px;
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* ---- STATES ---- */
|
||
.loading-state {
|
||
text-align: center;
|
||
padding: 48px 24px;
|
||
color: var(--text-faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.error-state {
|
||
text-align: center;
|
||
padding: 48px 24px;
|
||
color: var(--ember);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 48px 24px;
|
||
color: var(--text-faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.spinner {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 2px dashed var(--candle);
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 12px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* ---- RESPONSIVE ---- */
|
||
@media (max-width: 768px) {
|
||
.page-header {
|
||
padding: 24px 20px 16px;
|
||
}
|
||
|
||
.header-row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header-actions {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-bar {
|
||
flex-direction: column;
|
||
padding: 12px 20px;
|
||
}
|
||
|
||
.table-wrap {
|
||
padding: 0 12px 20px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
table {
|
||
min-width: 600px;
|
||
}
|
||
}
|
||
</style>
|