katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/pages/admin/collections/index.vue

@@ -0,0 +1,828 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { $fetch, navigateTo, useHead, useRoute } from "#imports";
+import { buildPublicPath } from "@katecms/core";
+const COLLECTION_LIST_SORTS = [
+  "date-desc",
+  "date-asc",
+  "author-asc",
+  "author-desc",
+  "title-asc",
+  "title-desc"
+];
+import { parseAuthError } from "../../../utils/auth-error";
+import { localUtcOffsetMinutes, monthLabel } from "../../../utils/media-library-query";
+import {
+  collectionApi,
+  collectionStatusLabel
+} from "../../../utils/collections";
+import { useCmsPaths } from "../../../composables/useCmsPaths";
+const route = useRoute();
+const paths = useCmsPaths();
+const rootClass = "katecms-collection-list";
+const collectionSlug = computed(() => String(route.params.collection ?? ""));
+const statusFilter = computed(() => {
+  const raw = String(route.query.status ?? "all");
+  if (raw === "published" || raw === "draft" || raw === "trash" || raw === "all") {
+    return raw;
+  }
+  return "all";
+});
+const searchQuery = computed(() => String(route.query.q ?? ""));
+const page = computed(() => Math.max(1, Number(route.query.page) || 1));
+const monthFilter = computed(() => {
+  const raw = String(route.query.month ?? "");
+  return /^\d{4}-(0[1-9]|1[0-2])$/.test(raw) ? raw : "all";
+});
+const sortFilter = computed(() => {
+  const raw = String(route.query.sort ?? "date-desc");
+  return COLLECTION_LIST_SORTS.includes(raw) ? raw : "date-desc";
+});
+const collection = ref(null);
+const entries = ref([]);
+const months = ref([]);
+const counts = ref({ all: 0, published: 0, draft: 0, trash: 0 });
+const total = ref(0);
+const perPage = ref(10);
+const canCreate = ref(false);
+const canDelete = ref(false);
+const loading = ref(true);
+const error = ref(null);
+const pendingId = ref(null);
+const emptyingTrash = ref(false);
+const deletingMarked = ref(false);
+const markedIds = ref([]);
+const searchInput = ref("");
+const SORT_CHOICES = [
+  { val: "date-desc", lbl: "Date, newest" },
+  { val: "date-asc", lbl: "Date, oldest" },
+  { val: "author-asc", lbl: "Author, A\u2013Z" },
+  { val: "author-desc", lbl: "Author, Z\u2013A" },
+  { val: "title-asc", lbl: "Title, A\u2013Z" },
+  { val: "title-desc", lbl: "Title, Z\u2013A" }
+];
+const title = computed(() => collection.value?.labels.name || "");
+useHead({ title });
+const totalPages = computed(() => {
+  if (perPage.value < 1) {
+    return 1;
+  }
+  return Math.max(1, Math.ceil(total.value / perPage.value));
+});
+const monthChoices = computed(() => {
+  const values = [...months.value];
+  if (monthFilter.value !== "all" && !values.includes(monthFilter.value)) {
+    values.push(monthFilter.value);
+  }
+  values.sort((a, b) => b.localeCompare(a));
+  return [
+    { val: "all", lbl: "All dates" },
+    ...values.map((value) => ({ val: value, lbl: monthLabel(value) }))
+  ];
+});
+const markedEntries = computed(
+  () => entries.value.filter((entry) => markedIds.value.includes(entry.id))
+);
+const bulkTrashIds = computed(
+  () => statusFilter.value === "trash" ? [] : markedEntries.value.filter((entry) => entry.canUpdate).map((entry) => entry.id)
+);
+const bulkDeleteIds = computed(
+  () => statusFilter.value === "trash" ? markedEntries.value.filter((entry) => entry.canDelete).map((entry) => entry.id) : []
+);
+const emptyMessage = computed(() => {
+  if (searchQuery.value || monthFilter.value !== "all") {
+    return "No entries match.";
+  }
+  if (statusFilter.value === "trash") {
+    return "Trash is empty.";
+  }
+  if (statusFilter.value === "draft") {
+    return "No drafts.";
+  }
+  if (statusFilter.value === "published") {
+    return "No published entries.";
+  }
+  return "No entries yet.";
+});
+watch(searchQuery, (value) => {
+  searchInput.value = value;
+}, { immediate: true });
+function viewUrl(entry) {
+  if (collection.value?.public === false) {
+    return null;
+  }
+  const path = buildPublicPath(
+    collection.value?.rewrite,
+    collectionSlug.value,
+    entry.slugPath || entry.slug
+  );
+  return entry.status === "draft" ? `${path}?preview=1` : path;
+}
+function entryListTitle(entry) {
+  const depth = collection.value?.hierarchical ? entry.depth ?? 0 : 0;
+  if (depth < 1) {
+    return entry.title;
+  }
+  return `${"\u2014 ".repeat(depth)}${entry.title}`;
+}
+function formatListDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function entryAuthor(entry) {
+  return entry.authorName?.trim() || "\u2014";
+}
+function entryDateDisplay(entry) {
+  const publishedMs = entry.publishedAt ? Date.parse(entry.publishedAt) : Number.NaN;
+  const updatedMs = Date.parse(entry.updatedAt);
+  const hasPublished = !Number.isNaN(publishedMs);
+  const hasUpdated = !Number.isNaN(updatedMs);
+  const modified = entry.status !== "published" || !hasPublished || hasUpdated && updatedMs - publishedMs > 2e3;
+  if (!modified && entry.publishedAt) {
+    return { label: "Published", value: formatListDate(entry.publishedAt) };
+  }
+  return {
+    label: "Last Modified",
+    value: formatListDate(hasUpdated ? entry.updatedAt : entry.publishedAt ?? entry.createdAt)
+  };
+}
+async function navigateQuery(query = {}) {
+  await navigateTo({
+    path: paths.collection(collectionSlug.value),
+    query
+  });
+}
+function listQuery(patch = {}) {
+  const status = patch.status ?? statusFilter.value;
+  const q = patch.q ?? searchQuery.value;
+  const month = patch.month ?? monthFilter.value;
+  const sort = patch.sort ?? sortFilter.value;
+  const nextPage = patch.page ?? 1;
+  const query = {};
+  if (q) {
+    query.q = q;
+  } else if (status !== "all") {
+    query.status = status;
+  }
+  if (month !== "all") {
+    query.month = month;
+  }
+  if (sort !== "date-desc") {
+    query.sort = sort;
+  }
+  if (nextPage > 1) {
+    query.page = String(nextPage);
+  }
+  return query;
+}
+function setStatus(status) {
+  return navigateQuery(listQuery({ status, q: "", page: 1 }));
+}
+function applySearch() {
+  return navigateQuery(listQuery({
+    q: searchInput.value.trim(),
+    status: "all",
+    page: 1
+  }));
+}
+function setMonth(month) {
+  return navigateQuery(listQuery({ month, page: 1 }));
+}
+function setSort(sort) {
+  return navigateQuery(listQuery({ sort, page: 1 }));
+}
+function setPage(next) {
+  return navigateQuery(listQuery({ page: next }));
+}
+const monthModel = computed({
+  get() {
+    return monthFilter.value;
+  },
+  set(value) {
+    const raw = typeof value === "string" ? value : "all";
+    const month = raw === "all" || /^\d{4}-(0[1-9]|1[0-2])$/.test(raw) ? raw : "all";
+    void setMonth(month);
+  }
+});
+const sortModel = computed({
+  get() {
+    return sortFilter.value;
+  },
+  set(value) {
+    const raw = typeof value === "string" ? value : "date-desc";
+    const sort = COLLECTION_LIST_SORTS.includes(raw) ? raw : "date-desc";
+    void setSort(sort);
+  }
+});
+function isMarked(id) {
+  return markedIds.value.includes(id);
+}
+function toggleMarked(id) {
+  markedIds.value = isMarked(id) ? markedIds.value.filter((entry) => entry !== id) : [...markedIds.value, id];
+}
+async function load() {
+  if (!collectionSlug.value) {
+    return;
+  }
+  loading.value = true;
+  error.value = null;
+  markedIds.value = [];
+  try {
+    const res = await $fetch(collectionApi(collectionSlug.value), {
+      query: {
+        status: searchQuery.value ? void 0 : statusFilter.value,
+        q: searchQuery.value || void 0,
+        month: monthFilter.value === "all" ? void 0 : monthFilter.value,
+        sort: sortFilter.value,
+        tz: localUtcOffsetMinutes(),
+        page: page.value
+      }
+    });
+    collection.value = res.collection;
+    entries.value = res.entries;
+    months.value = res.months ?? [];
+    counts.value = res.counts;
+    total.value = res.total;
+    perPage.value = res.perPage;
+    canCreate.value = res.canCreate;
+    canDelete.value = res.canDelete;
+  } catch (err) {
+    collection.value = null;
+    entries.value = [];
+    canDelete.value = false;
+    error.value = parseAuthError(err, "Could not load entries.").message;
+  } finally {
+    loading.value = false;
+  }
+}
+async function moveToTrash(entry) {
+  if (!entry.canUpdate || pendingId.value !== null) {
+    return;
+  }
+  if (!window.confirm(`Move \u201C${entry.title}\u201D to trash?`)) {
+    return;
+  }
+  pendingId.value = entry.id;
+  error.value = null;
+  try {
+    await $fetch(collectionApi(collectionSlug.value, entry.id), {
+      method: "PATCH",
+      body: { status: "trash" }
+    });
+    await load();
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not move the entry to trash.").message;
+  } finally {
+    pendingId.value = null;
+  }
+}
+async function restore(entry) {
+  if (!entry.canUpdate || pendingId.value !== null) {
+    return;
+  }
+  pendingId.value = entry.id;
+  error.value = null;
+  try {
+    await $fetch(collectionApi(collectionSlug.value, entry.id), {
+      method: "PATCH",
+      body: { status: "draft" }
+    });
+    await load();
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not restore the entry.").message;
+  } finally {
+    pendingId.value = null;
+  }
+}
+async function removePermanent(entry) {
+  if (!entry.canDelete || pendingId.value !== null) {
+    return;
+  }
+  if (!window.confirm(`Delete \u201C${entry.title}\u201D permanently? This cannot be undone.`)) {
+    return;
+  }
+  pendingId.value = entry.id;
+  error.value = null;
+  try {
+    await $fetch(collectionApi(collectionSlug.value, entry.id), { method: "DELETE" });
+    await load();
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not delete the entry.").message;
+  } finally {
+    pendingId.value = null;
+  }
+}
+async function removeMarked() {
+  const trashIds = bulkTrashIds.value;
+  const deleteIds = bulkDeleteIds.value;
+  const ids = trashIds.length ? trashIds : deleteIds;
+  if (!ids.length || deletingMarked.value || pendingId.value !== null) {
+    return;
+  }
+  const permanent = deleteIds.length > 0;
+  const label = permanent ? ids.length === 1 ? "Delete 1 entry permanently? This cannot be undone." : `Delete ${ids.length} entries permanently? This cannot be undone.` : ids.length === 1 ? "Move 1 entry to trash?" : `Move ${ids.length} entries to trash?`;
+  if (!window.confirm(label)) {
+    return;
+  }
+  deletingMarked.value = true;
+  error.value = null;
+  const failed = [];
+  await Promise.all(ids.map(async (id) => {
+    try {
+      if (permanent) {
+        await $fetch(collectionApi(collectionSlug.value, id), { method: "DELETE" });
+      } else {
+        await $fetch(collectionApi(collectionSlug.value, id), {
+          method: "PATCH",
+          body: { status: "trash" }
+        });
+      }
+    } catch {
+      failed.push(id);
+    }
+  }));
+  deletingMarked.value = false;
+  await load();
+  if (failed.length) {
+    error.value = failed.length === 1 ? "Could not update 1 entry." : `Could not update ${failed.length} entries.`;
+  } else if (!entries.value.length && page.value > 1) {
+    await setPage(page.value - 1);
+  }
+}
+async function emptyTrash() {
+  if (!canDelete.value || emptyingTrash.value || pendingId.value !== null || counts.value.trash <= 0) {
+    return;
+  }
+  if (!window.confirm("Permanently delete all items in the trash? This cannot be undone.")) {
+    return;
+  }
+  emptyingTrash.value = true;
+  error.value = null;
+  try {
+    await $fetch(collectionApi(collectionSlug.value, "trash"), { method: "DELETE" });
+    await load();
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not empty the trash.").message;
+  } finally {
+    emptyingTrash.value = false;
+  }
+}
+onMounted(load);
+watch([collectionSlug, statusFilter, searchQuery, monthFilter, sortFilter, page], load);
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader :title="title">
+      <KateCmsUiButton
+        v-if="canCreate && collection"
+        tag="a"
+        :link="{ url: paths.collectionCreate(collectionSlug), title: 'Add' }"
+      >
+        Add {{ collection.labels.singularName || collection.labels.name }}
+      </KateCmsUiButton>
+
+      <KateCmsUiButton
+        v-if="bulkTrashIds.length"
+        tag="button"
+        variant="red"
+        :disabled="deletingMarked || pendingId !== null || emptyingTrash"
+        @click="removeMarked"
+      >
+        {{ deletingMarked ? "Moving\u2026" : `Trash selected (${bulkTrashIds.length})` }}
+      </KateCmsUiButton>
+      <KateCmsUiButton
+        v-if="bulkDeleteIds.length"
+        tag="button"
+        variant="red"
+        :disabled="deletingMarked || pendingId !== null || emptyingTrash"
+        @click="removeMarked"
+      >
+        {{ deletingMarked ? "Deleting\u2026" : `Delete selected (${bulkDeleteIds.length})` }}
+      </KateCmsUiButton>
+
+      <KateCmsUiButton
+        v-if="statusFilter === 'trash' && canDelete && counts.trash > 0"
+        tag="button"
+        variant="red"
+        :disabled="emptyingTrash || pendingId !== null || loading"
+        @click="emptyTrash"
+      >
+        {{ emptyingTrash ? "Emptying\u2026" : "Empty Trash" }}
+      </KateCmsUiButton>
+    </KateCmsAdminHeader>
+
+    <div :class="`${rootClass}__toolbar`">
+      <div :class="`${rootClass}__tabs`">
+        <KateCmsUiButton
+          v-for="tab in [
+  { id: 'all', label: 'All', count: counts.all },
+  { id: 'published', label: 'Published', count: counts.published },
+  { id: 'draft', label: 'Draft', count: counts.draft },
+  { id: 'trash', label: 'Trash', count: counts.trash }
+]"
+          :key="tab.id"
+          tag="button"
+          variant="tertiary"
+          :active="!searchQuery && statusFilter === tab.id"
+          @click="setStatus(tab.id)"
+        >
+          {{ tab.label }}
+          {{ tab.count }}
+        </KateCmsUiButton>
+      </div>
+
+      <div :class="`${rootClass}__filters`">
+        <KateCmsUiSelect
+          id="collection-month"
+          v-model="monthModel"
+          :choices="monthChoices"
+          aria-label="Date"
+        />
+        <KateCmsUiSelect
+          id="collection-sort"
+          v-model="sortModel"
+          :choices="SORT_CHOICES"
+          aria-label="Sort"
+        />
+      </div>
+
+      <form
+        :class="`${rootClass}__search`"
+        @submit.prevent="applySearch"
+      >
+        <KateCmsInputControl
+          v-model="searchInput"
+          field-key="cms-collection-search"
+          :field="{ placeholder: 'Search title or slug' }"
+        />
+        <KateCmsUiButton
+          tag="button"
+          type="submit"
+          variant="secondary"
+        >
+          Search
+        </KateCmsUiButton>
+      </form>
+    </div>
+
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="error"
+      placement="static"
+      variant="danger"
+      :message="error"
+      @close="error = null"
+    />
+    <KateCmsUiNotice
+      v-else-if="!entries.length"
+      placement="static"
+      variant="info"
+      :message="emptyMessage"
+      :closable="false"
+    />
+
+    <div
+      v-else
+      :class="`${rootClass}__table-wrap`"
+    >
+      <div
+        :class="[`${rootClass}__columns`, `${rootClass}__columns--head`]"
+        role="row"
+      >
+        <span
+          role="columnheader"
+          aria-label="Select"
+        />
+        <span role="columnheader">Title</span>
+        <span role="columnheader">Status</span>
+        <span role="columnheader">Author</span>
+        <span role="columnheader">Date</span>
+        <span
+          role="columnheader"
+          aria-label="Actions"
+        />
+      </div>
+      <div :class="`${rootClass}__rows`">
+        <div
+          v-for="entry in entries"
+          :key="entry.id"
+          :class="[`${rootClass}__columns`, { 'is-marked': isMarked(entry.id) }]"
+          role="row"
+        >
+          <div
+            role="cell"
+            :class="`${rootClass}__check`"
+          >
+            <input
+              type="checkbox"
+              :checked="isMarked(entry.id)"
+              :aria-label="`Select ${entry.title}`"
+              @change="toggleMarked(entry.id)"
+            >
+          </div>
+          <div
+            role="cell"
+            :class="`${rootClass}__title`"
+          >
+            {{ entryListTitle(entry) }}
+          </div>
+          <div role="cell">
+            <span
+              :class="[`${rootClass}__status`, `${rootClass}__status--${entry.status}`]"
+            >
+              {{ collectionStatusLabel(entry.status) }}
+            </span>
+          </div>
+          <div role="cell">
+            {{ entryAuthor(entry) }}
+          </div>
+          <div
+            role="cell"
+            :class="`${rootClass}__date`"
+          >
+            <span :class="`${rootClass}__date-label`">{{ entryDateDisplay(entry).label }}</span>
+            <span :class="`${rootClass}__date-value`">{{ entryDateDisplay(entry).value }}</span>
+          </div>
+          <div
+            role="cell"
+            :class="`${rootClass}__actions`"
+          >
+            <KateCmsUiButton
+              v-if="entry.status !== 'trash' && viewUrl(entry)"
+              tag="a"
+              :variant="['secondary', 'small']"
+              :link="{ url: viewUrl(entry), title: 'View', target: '_blank' }"
+            >
+              View
+            </KateCmsUiButton>
+            <KateCmsUiButton
+              v-if="entry.canUpdate || entry.status === 'trash'"
+              tag="a"
+              :variant="['secondary', 'small']"
+              :link="{
+  url: paths.collectionEntry(collectionSlug, entry.id),
+  title: 'Edit'
+}"
+            >
+              {{ entry.canUpdate ? "Edit" : "View" }}
+            </KateCmsUiButton>
+            <KateCmsUiButton
+              v-if="entry.status !== 'trash' && entry.canUpdate"
+              tag="button"
+              :variant="['red', 'small']"
+              :disabled="pendingId === entry.id || emptyingTrash"
+              @click="moveToTrash(entry)"
+            >
+              Trash
+            </KateCmsUiButton>
+            <KateCmsUiButton
+              v-if="entry.status === 'trash' && entry.canUpdate"
+              tag="button"
+              :variant="['secondary', 'small']"
+              :disabled="pendingId === entry.id || emptyingTrash"
+              @click="restore(entry)"
+            >
+              Restore
+            </KateCmsUiButton>
+            <KateCmsUiButton
+              v-if="entry.status === 'trash' && entry.canDelete"
+              tag="button"
+              :variant="['red', 'small']"
+              :disabled="pendingId === entry.id || emptyingTrash"
+              @click="removePermanent(entry)"
+            >
+              Delete
+            </KateCmsUiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="totalPages > 1"
+      :class="`${rootClass}__pager`"
+    >
+      <KateCmsUiButton
+        tag="button"
+        :variant="['secondary', 'small']"
+        :disabled="page <= 1 || loading"
+        @click="setPage(page - 1)"
+      >
+        Previous
+      </KateCmsUiButton>
+      <span :class="`${rootClass}__pager-status`">
+        Page {{ page }} of {{ totalPages }}
+      </span>
+      <KateCmsUiButton
+        tag="button"
+        :variant="['secondary', 'small']"
+        :disabled="page >= totalPages || loading"
+        @click="setPage(page + 1)"
+      >
+        Next
+      </KateCmsUiButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-collection-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+  padding: 0 0.5rem 0.5rem;
+  overflow: hidden;
+}
+body#katecms-body .katecms-collection-list__toolbar {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+body#katecms-body .katecms-collection-list__tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+body#katecms-body .katecms-collection-list__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  border-radius: var(--katecms-border-radius-inter);
+  background: transparent;
+  color: var(--katecms-color-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+body#katecms-body .katecms-collection-list__tab:hover {
+  background: var(--katecms-color-bg);
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-collection-list__tab.is-active {
+  background: var(--katecms-color-accent-wash);
+  color: var(--katecms-color-accent);
+}
+body#katecms-body .katecms-collection-list__tab-count {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: inherit;
+  opacity: 0.75;
+}
+body#katecms-body .katecms-collection-list__search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 13.75rem;
+}
+body#katecms-body .katecms-collection-list__filters {
+  display: flex;
+  flex: 1 1 22.5rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 17.5rem;
+}
+body#katecms-body .katecms-collection-list__filters :deep(.katecms-select) {
+  flex: 1 1 11.25rem;
+  min-width: 11.25rem;
+  max-width: 16.25rem;
+}
+body#katecms-body .katecms-collection-list__table-wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-collection-list__columns {
+  display: grid;
+  grid-template-columns: 2.75rem minmax(11.25rem, 2.2fr) 6.875rem minmax(7.5rem, 1fr) 11.875rem minmax(10rem, auto);
+  align-items: center;
+  min-width: 51.25rem;
+}
+body#katecms-body .katecms-collection-list__columns > [role=columnheader],
+body#katecms-body .katecms-collection-list__columns > [role=cell] {
+  min-width: 0;
+  padding: 0.625rem 0.875rem;
+}
+body#katecms-body .katecms-collection-list__columns--head {
+  flex-shrink: 0;
+  background: var(--katecms-color-bg);
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-collection-list__columns--head > [role=columnheader] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-collection-list__rows {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+body#katecms-body .katecms-collection-list__rows .katecms-collection-list__columns {
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-collection-list__rows .katecms-collection-list__columns:last-child {
+  border-bottom: none;
+}
+body#katecms-body .katecms-collection-list__rows .katecms-collection-list__columns.is-marked {
+  background: var(--katecms-color-accent-wash);
+}
+body#katecms-body .katecms-collection-list__check {
+  display: flex;
+  align-items: center;
+}
+body#katecms-body .katecms-collection-list__check input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--katecms-color-accent);
+  cursor: pointer;
+}
+body#katecms-body .katecms-collection-list__title {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+body#katecms-body .katecms-collection-list__status {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--katecms-border-radius-inter);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+body#katecms-body .katecms-collection-list__status--published {
+  background: var(--katecms-color-success-bg);
+  color: var(--katecms-color-success);
+}
+body#katecms-body .katecms-collection-list__status--draft {
+  background: var(--katecms-color-info-bg);
+  color: var(--katecms-color-info);
+}
+body#katecms-body .katecms-collection-list__status--trash {
+  background: var(--katecms-color-danger-bg);
+  color: var(--katecms-color-danger);
+}
+body#katecms-body .katecms-collection-list__date {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  white-space: nowrap;
+}
+body#katecms-body .katecms-collection-list__date-label {
+  font-size: 0.75rem;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-collection-list__date-value {
+  font-size: 0.8125rem;
+}
+body#katecms-body .katecms-collection-list__actions {
+  text-align: right;
+  white-space: nowrap;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+body#katecms-body .katecms-collection-list__pager {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+body#katecms-body .katecms-collection-list__pager-status {
+  font-size: 0.8125rem;
+  color: var(--katecms-color-muted);
+}
+</style>