feat(wiki): add admin wiki management page
This commit is contained in:
parent
3797ff7925
commit
795b856d56
2 changed files with 903 additions and 0 deletions
886
app/pages/admin/wiki.vue
Normal file
886
app/pages/admin/wiki.vue
Normal file
|
|
@ -0,0 +1,886 @@
|
|||
<template>
|
||||
<div class="admin-wiki">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="header-row">
|
||||
<div>
|
||||
<h1>Wiki</h1>
|
||||
<p v-if="articles">
|
||||
{{ articles.length }} articles
|
||||
<template v-if="collections.length"> across {{ collections.length }} collections</template>
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="syncing"
|
||||
@click="syncFromOutline"
|
||||
>
|
||||
{{ syncing ? 'Syncing...' : 'Sync from Outline' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync Results -->
|
||||
<div v-if="syncResults" class="sync-results">
|
||||
<span v-if="syncResults.created" class="sync-stat sync-created">{{ syncResults.created }} created</span>
|
||||
<span v-if="syncResults.updated" class="sync-stat sync-updated">{{ syncResults.updated }} updated</span>
|
||||
<span v-if="syncResults.deleted" class="sync-stat sync-deleted">{{ syncResults.deleted }} removed</span>
|
||||
<span v-if="syncResults.errors" class="sync-stat sync-errors">{{ syncResults.errors }} errors</span>
|
||||
<span v-if="!syncResults.created && !syncResults.updated && !syncResults.deleted && !syncResults.errors" class="sync-stat">Already up to date</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="filter-bar">
|
||||
<div class="field" style="margin-bottom: 0; flex: 1">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
placeholder="Search articles by title..."
|
||||
/>
|
||||
</div>
|
||||
<div class="field" style="margin-bottom: 0">
|
||||
<select v-model="collectionFilter" aria-label="Filter by collection">
|
||||
<option value="">All Collections</option>
|
||||
<option v-for="col in collections" :key="col" :value="col">{{ col }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Batch Action Bar -->
|
||||
<div v-if="selectedIds.length" class="batch-bar">
|
||||
<span class="batch-count">{{ selectedIds.length }} selected</span>
|
||||
<button
|
||||
v-if="collectionFilter && !allInCollectionSelected"
|
||||
class="link-btn"
|
||||
@click="selectAllInCollection"
|
||||
>
|
||||
Select all in "{{ collectionFilter }}"
|
||||
</button>
|
||||
<div class="batch-tag-picker">
|
||||
<select v-model="batchTagToAdd" aria-label="Tag to add" class="batch-select">
|
||||
<option value="">Add tag...</option>
|
||||
<option v-for="tag in availableTags" :key="tag.slug" :value="tag.slug">{{ tag.label }}</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!batchTagToAdd || batchApplying"
|
||||
@click="applyBatchTag"
|
||||
>
|
||||
{{ batchApplying ? 'Applying...' : 'Apply' }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="link-btn" @click="selectedIds = []">Clear selection</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading / Error -->
|
||||
<div v-if="pending" class="loading-state">
|
||||
<div class="spinner" />
|
||||
<span>Loading articles...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-state">
|
||||
Error loading articles: {{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Article Table -->
|
||||
<div v-else class="table-wrap">
|
||||
<table v-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('collection')">
|
||||
Collection
|
||||
<span v-if="sortKey === 'collection'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span>
|
||||
</th>
|
||||
<th class="sortable col-title" @click="toggleSort('title')">
|
||||
Title
|
||||
<span v-if="sortKey === 'title'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span>
|
||||
</th>
|
||||
<th>Tags</th>
|
||||
<th class="col-actions-head">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="article in filtered"
|
||||
:key="article._id"
|
||||
class="selectable-row"
|
||||
:class="{ 'row-selected': selectedIds.includes(article._id) }"
|
||||
@click="toggleSelect(article._id)"
|
||||
>
|
||||
<td class="col-check" @click.stop>
|
||||
<label class="custom-check" :aria-label="`Select ${article.title}`">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedIds.includes(article._id)"
|
||||
@change="toggleSelect(article._id)"
|
||||
/>
|
||||
<span class="check-mark" />
|
||||
</label>
|
||||
</td>
|
||||
<td class="col-collection">{{ article.collection || '—' }}</td>
|
||||
<td class="col-title">
|
||||
<a :href="article.url" target="_blank" rel="noopener" class="article-link">
|
||||
{{ article.title }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="col-tags" @click.stop>
|
||||
<div v-if="editingId !== article._id" class="tag-display">
|
||||
<span v-for="tag in article.tags" :key="tag" class="tag-chip">{{ tagLabel(tag) }}</span>
|
||||
<span v-if="!article.tags?.length" class="no-tags">no tags</span>
|
||||
</div>
|
||||
<div v-else class="tag-edit-inline">
|
||||
<select
|
||||
v-model="tagToAdd"
|
||||
aria-label="Add tag"
|
||||
class="tag-add-select"
|
||||
@change="addTagToEditing"
|
||||
>
|
||||
<option value="">Add...</option>
|
||||
<option
|
||||
v-for="tag in availableTagsForEditing"
|
||||
:key="tag.slug"
|
||||
:value="tag.slug"
|
||||
>{{ tag.label }}</option>
|
||||
</select>
|
||||
<div class="editing-tags">
|
||||
<span
|
||||
v-for="tag in editingTags"
|
||||
:key="tag"
|
||||
class="tag-chip tag-chip-editable"
|
||||
>
|
||||
{{ tagLabel(tag) }}
|
||||
<button class="tag-remove" @click="removeTagFromEditing(tag)" aria-label="Remove tag">×</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="tag-edit-actions">
|
||||
<button class="link-btn" @click="cancelEditing">Cancel</button>
|
||||
<button class="link-btn link-btn-save" :disabled="savingTags" @click="saveArticleTags">
|
||||
{{ savingTags ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="col-actions" @click.stop>
|
||||
<button
|
||||
v-if="editingId !== article._id"
|
||||
class="link-btn"
|
||||
@click="startEditing(article)"
|
||||
>
|
||||
Edit tags
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
No articles found matching your criteria
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
// ---- Data Fetching ----
|
||||
const {
|
||||
data: articles,
|
||||
pending,
|
||||
error,
|
||||
refresh,
|
||||
} = await useFetch('/api/admin/wiki')
|
||||
|
||||
const { data: tagsData } = await useFetch('/api/tags')
|
||||
|
||||
const availableTags = computed(() => tagsData.value?.tags || [])
|
||||
|
||||
const tagLabelMap = computed(() => {
|
||||
const map = {}
|
||||
for (const tag of availableTags.value) {
|
||||
map[tag.slug] = tag.label
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
const tagLabel = (slug) => tagLabelMap.value[slug] || slug
|
||||
|
||||
// ---- Filters & Sort ----
|
||||
const searchQuery = ref('')
|
||||
const collectionFilter = ref('')
|
||||
const sortKey = ref('')
|
||||
const sortDir = ref('asc')
|
||||
|
||||
const collections = computed(() => {
|
||||
if (!articles.value) return []
|
||||
const names = new Set()
|
||||
for (const a of articles.value) {
|
||||
if (a.collection) names.add(a.collection)
|
||||
}
|
||||
return [...names].sort()
|
||||
})
|
||||
|
||||
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 (!articles.value) return []
|
||||
|
||||
const result = articles.value.filter((a) => {
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
const matchesSearch = !q || a.title.toLowerCase().includes(q)
|
||||
const matchesCollection = !collectionFilter.value || a.collection === collectionFilter.value
|
||||
return matchesSearch && matchesCollection
|
||||
})
|
||||
|
||||
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 ----
|
||||
const selectedIds = ref([])
|
||||
|
||||
const allVisibleSelected = computed(() => {
|
||||
if (!filtered.value.length) return false
|
||||
return filtered.value.every((a) => selectedIds.value.includes(a._id))
|
||||
})
|
||||
|
||||
const someVisibleSelected = computed(() => {
|
||||
return filtered.value.some((a) => selectedIds.value.includes(a._id))
|
||||
})
|
||||
|
||||
const allInCollectionSelected = computed(() => {
|
||||
if (!collectionFilter.value || !articles.value) return false
|
||||
const inCollection = articles.value.filter((a) => a.collection === collectionFilter.value)
|
||||
return inCollection.every((a) => selectedIds.value.includes(a._id))
|
||||
})
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (allVisibleSelected.value) {
|
||||
const visibleIds = new Set(filtered.value.map((a) => a._id))
|
||||
selectedIds.value = selectedIds.value.filter((id) => !visibleIds.has(id))
|
||||
} else {
|
||||
const currentSet = new Set(selectedIds.value)
|
||||
for (const a of filtered.value) {
|
||||
currentSet.add(a._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 selectAllInCollection = () => {
|
||||
if (!collectionFilter.value || !articles.value) return
|
||||
const currentSet = new Set(selectedIds.value)
|
||||
for (const a of articles.value) {
|
||||
if (a.collection === collectionFilter.value) {
|
||||
currentSet.add(a._id)
|
||||
}
|
||||
}
|
||||
selectedIds.value = [...currentSet]
|
||||
}
|
||||
|
||||
// ---- Sync ----
|
||||
const syncing = ref(false)
|
||||
const syncResults = ref(null)
|
||||
|
||||
const syncFromOutline = async () => {
|
||||
syncing.value = true
|
||||
syncResults.value = null
|
||||
try {
|
||||
const result = await $fetch('/api/admin/wiki/sync', { method: 'POST' })
|
||||
syncResults.value = result
|
||||
await refresh()
|
||||
toast.add({
|
||||
title: 'Sync complete',
|
||||
description: `${result.created} created, ${result.updated} updated, ${result.deleted} removed`,
|
||||
color: result.errors ? 'orange' : 'green',
|
||||
})
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: 'Sync failed',
|
||||
description: err.data?.statusMessage || err.message,
|
||||
color: 'red',
|
||||
})
|
||||
} finally {
|
||||
syncing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Per-Article Tag Editing ----
|
||||
const editingId = ref(null)
|
||||
const editingTags = ref([])
|
||||
const tagToAdd = ref('')
|
||||
const savingTags = ref(false)
|
||||
|
||||
const availableTagsForEditing = computed(() => {
|
||||
return availableTags.value.filter((t) => !editingTags.value.includes(t.slug))
|
||||
})
|
||||
|
||||
const startEditing = (article) => {
|
||||
editingId.value = article._id
|
||||
editingTags.value = [...(article.tags || [])]
|
||||
tagToAdd.value = ''
|
||||
}
|
||||
|
||||
const cancelEditing = () => {
|
||||
editingId.value = null
|
||||
editingTags.value = []
|
||||
tagToAdd.value = ''
|
||||
}
|
||||
|
||||
const addTagToEditing = () => {
|
||||
if (tagToAdd.value && !editingTags.value.includes(tagToAdd.value)) {
|
||||
editingTags.value.push(tagToAdd.value)
|
||||
}
|
||||
tagToAdd.value = ''
|
||||
}
|
||||
|
||||
const removeTagFromEditing = (tag) => {
|
||||
editingTags.value = editingTags.value.filter((t) => t !== tag)
|
||||
}
|
||||
|
||||
const saveArticleTags = async () => {
|
||||
savingTags.value = true
|
||||
try {
|
||||
await $fetch(`/api/admin/wiki/${editingId.value}`, {
|
||||
method: 'PATCH',
|
||||
body: { tags: editingTags.value },
|
||||
})
|
||||
await refresh()
|
||||
cancelEditing()
|
||||
toast.add({ title: 'Tags updated', color: 'green' })
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: 'Failed to update tags',
|
||||
description: err.data?.statusMessage || err.message,
|
||||
color: 'red',
|
||||
})
|
||||
} finally {
|
||||
savingTags.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Batch Tagging ----
|
||||
const batchTagToAdd = ref('')
|
||||
const batchApplying = ref(false)
|
||||
|
||||
const applyBatchTag = async () => {
|
||||
if (!batchTagToAdd.value || !selectedIds.value.length) return
|
||||
batchApplying.value = true
|
||||
try {
|
||||
const result = await $fetch('/api/admin/wiki/batch-tag', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
articleIds: selectedIds.value,
|
||||
addTags: [batchTagToAdd.value],
|
||||
},
|
||||
})
|
||||
await refresh()
|
||||
toast.add({
|
||||
title: 'Batch tag applied',
|
||||
description: `${result.modified} articles updated`,
|
||||
color: 'green',
|
||||
})
|
||||
batchTagToAdd.value = ''
|
||||
selectedIds.value = []
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: 'Batch tag failed',
|
||||
description: err.data?.statusMessage || err.message,
|
||||
color: 'red',
|
||||
})
|
||||
} finally {
|
||||
batchApplying.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-wiki {}
|
||||
|
||||
/* ---- 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;
|
||||
}
|
||||
|
||||
/* ---- SYNC RESULTS ---- */
|
||||
.sync-results {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sync-stat {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border: 1px dashed var(--border);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.sync-created {
|
||||
color: var(--green, #4a7);
|
||||
border-color: var(--green, #4a7);
|
||||
}
|
||||
|
||||
.sync-updated {
|
||||
color: var(--candle);
|
||||
border-color: var(--candle);
|
||||
}
|
||||
|
||||
.sync-deleted {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.sync-errors {
|
||||
color: var(--ember);
|
||||
border-color: var(--ember);
|
||||
}
|
||||
|
||||
/* ---- FILTER BAR ---- */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 28px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
/* ---- BATCH ACTION BAR ---- */
|
||||
.batch-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 28px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
background: var(--surface);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.batch-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-bright);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.batch-tag-picker {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.batch-select {
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--input-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.batch-select:focus {
|
||||
border-color: var(--candle);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ---- 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);
|
||||
}
|
||||
|
||||
/* ---- COLUMNS ---- */
|
||||
.col-collection {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.article-link {
|
||||
color: var(--text-bright);
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.article-link:hover {
|
||||
color: var(--candle);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---- TAGS ---- */
|
||||
.col-tags {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.tag-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 6px;
|
||||
border: 1px dashed var(--border);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.tag-chip-editable {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tag-remove:hover {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.no-tags {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ---- INLINE TAG EDITING ---- */
|
||||
.tag-edit-inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-add-select {
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 11px;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--input-bg);
|
||||
color: var(--text);
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.tag-add-select:focus {
|
||||
border-color: var(--candle);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.editing-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag-edit-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ---- ACTIONS ---- */
|
||||
.col-actions-head {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col-actions {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--candle);
|
||||
cursor: pointer;
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-btn:disabled {
|
||||
color: var(--text-faint);
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-btn-save {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---- 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;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.batch-bar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.batch-tag-picker {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 12px 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue