@jant/core 0.3.38 → 0.3.40

package/src/client/components/jant-collection-sidebar.ts

@@ -1,56 +1,81 @@
 /**
- * Collection Sidebar Component
+ * Collections Page Manager
  *
- * Manages collections in the public /c page sidebar for authenticated users:
- * - Renders sidebar items (collections + dividers) from a single pre-ordered list
- * - Dropdown menus for "More" (reorder, add divider) and per-collection edit
- * - SortableJS drag-and-drop reorder mode
- * - Create/edit collection dialogs embedding <jant-collection-form>
+ * Manages collections on the public /c page for authenticated users:
+ * - Renders collection rows and dividers in a single-column layout
+ * - Dropdown menu for page actions (organize, new divider)
+ * - SortableJS drag-and-drop organize mode
+ * - Links out to full-page collection create/edit flows
  * - Divider CRUD
  *
- * Anonymous users see a static list rendered server-side; this component
- * is only instantiated for authenticated users.
- *
- * Light DOM only — BaseCoat and Tailwind classes apply directly.
+ * Light DOM only so site styles apply directly.
  */
 
 import { LitElement, html, nothing } from "lit";
 import type { PropertyValueMap } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import Sortable from "sortablejs";
+import {
+  captureSortableRevertNextSibling,
+  getSortableMove,
+  readSortableDataIds,
+  responsiveSortableOptions,
+  revertSortableDomMove,
+  setSortableDraggingState,
+} from "../sortable-list.js";
+import { showConfirmDialog } from "../confirm.js";
+import { publicPath } from "../runtime-paths.js";
 import { showToast } from "../toast.js";
-import { renderCollectionIcon } from "../../lib/icons.js";
-import type { CollectionSubmitDetail } from "./collection-types.js";
+import { getDividerCollectionGroup } from "../../lib/collection-groups.js";
+import { formatRelativeAge, toISOString } from "../../lib/time.js";
 import type {
-  CollectionSidebarLabels,
-  SidebarCollection,
-  ClientSidebarItem,
-} from "./collection-sidebar-types.js";
+  CollectionManagerItem,
+  CollectionManagerLabels,
+  ManagedCollection,
+} from "./collection-manager-types.js";
+
+interface CollectionsResponse {
+  collections?: Array<{
+    id: string;
+    slug: string;
+    title: string;
+    description: string | null;
+    sortOrder: string;
+    postCount: number;
+    recentActivityAt: number;
+  }>;
+  sidebarItems?: Array<{
+    id: string;
+    type: "collection" | "divider";
+    collectionId: string | null;
+    label: string | null;
+    position: string;
+  }>;
+}
+
+interface SidebarItemUpdateResponse {
+  label?: string | null;
+}
 
-export class JantCollectionSidebar extends LitElement {
+export class JantCollectionsManager extends LitElement {
   static properties = {
-    "sidebar-items": { type: Array },
+    items: { type: Array },
     labels: { type: Object },
-    activeSlug: { type: String, attribute: "active-slug" },
 
     _items: { state: true },
     _reorderMode: { state: true },
-    _dialogMode: { state: true },
-    _editingCollection: { state: true },
+    _editingDividerId: { state: true },
     _showMoreMenu: { state: true },
     _hoveringId: { state: true },
     _showItemMenuId: { state: true },
   };
 
-  declare "sidebar-items": ClientSidebarItem[];
-  declare labels: CollectionSidebarLabels;
-  declare activeSlug: string;
+  declare items: CollectionManagerItem[];
+  declare labels: CollectionManagerLabels;
 
-  declare _items: ClientSidebarItem[];
+  declare _items: CollectionManagerItem[];
   declare _reorderMode: boolean;
-  declare _dialogMode: "create" | "edit" | null;
-  declare _editingCollection: SidebarCollection | null;
+  declare _editingDividerId: string | null;
   declare _showMoreMenu: boolean;
   declare _hoveringId: string | null;
   declare _showItemMenuId: string | null;
@@ -58,6 +83,7 @@ export class JantCollectionSidebar extends LitElement {
   #sortable: { destroy(): void } | null = null;
   #initialized = false;
   #revertNextSibling: Node | null = null;
+  #managerRoot: HTMLElement | null = null;
 
   #closeMoreMenu = () => {
     this._showMoreMenu = false;
@@ -69,34 +95,81 @@ export class JantCollectionSidebar extends LitElement {
     document.removeEventListener("click", this.#closeItemMenu);
   };
 
+  #handleHeaderClick = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target) return;
+
+    if (target.closest("[data-collections-more-menu]")) {
+      event.stopPropagation();
+    }
+
+    const actionEl = target.closest<HTMLElement>("[data-collections-action]");
+    if (!actionEl || !this.#managerRoot?.contains(actionEl)) return;
+
+    const action = actionEl.dataset.collectionsAction;
+    if (!action) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (action !== "toggle-menu" && this._showMoreMenu) {
+      this._showMoreMenu = false;
+      document.removeEventListener("click", this.#closeMoreMenu);
+    }
+
+    switch (action) {
+      case "done":
+        this.#exitReorderMode();
+        break;
+      case "toggle-menu":
+        this._showMoreMenu = !this._showMoreMenu;
+        if (this._showMoreMenu) {
+          setTimeout(() => {
+            document.addEventListener("click", this.#closeMoreMenu);
+          });
+        } else {
+          document.removeEventListener("click", this.#closeMoreMenu);
+        }
+        break;
+      case "organize":
+        this.#enterReorderMode();
+        break;
+      case "divider":
+        void this.#addDivider();
+        break;
+      default:
+        break;
+    }
+  };
+
   createRenderRoot() {
     this.innerHTML = "";
     return this;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.#bindManagerRoot();
+  }
+
   constructor() {
     super();
-    this["sidebar-items"] = [];
-    this.labels = {} as CollectionSidebarLabels;
-    this.activeSlug = "";
+    this.items = [];
+    this.labels = {} as CollectionManagerLabels;
 
     this._items = [];
     this._reorderMode = false;
-    this._dialogMode = null;
-    this._editingCollection = null;
+    this._editingDividerId = null;
     this._showMoreMenu = false;
     this._hoveringId = null;
     this._showItemMenuId = null;
   }
 
   protected update(
-    changedProperties: PropertyValueMap<JantCollectionSidebar>,
+    changedProperties: PropertyValueMap<JantCollectionsManager>,
   ): void {
-    if (
-      !this.#initialized ||
-      changedProperties.has("sidebar-items" as keyof JantCollectionSidebar)
-    ) {
-      this._items = [...(this["sidebar-items"] ?? [])];
+    if (!this.#initialized || changedProperties.has("items")) {
+      this._items = [...(this.items ?? [])];
       this.#initialized = true;
     }
     super.update(changedProperties);
@@ -106,100 +179,222 @@ export class JantCollectionSidebar extends LitElement {
     super.disconnectedCallback();
     this.#sortable?.destroy();
     this.#sortable = null;
+    this.#managerRoot?.removeEventListener("click", this.#handleHeaderClick);
+    this.#managerRoot = null;
     document.removeEventListener("click", this.#closeMoreMenu);
     document.removeEventListener("click", this.#closeItemMenu);
   }
 
-  // ===========================================================================
-  // Data fetching
-  // ===========================================================================
+  #hasCollections() {
+    return this._items.some(
+      (item) => item.type === "collection" && item.collection,
+    );
+  }
+
+  #collectionCount() {
+    return this._items.filter(
+      (item) => item.type === "collection" && item.collection,
+    ).length;
+  }
+
+  #collectionCountLabel() {
+    const count = this.#collectionCount();
+    return `${count} ${
+      count === 1
+        ? this.labels.collectionSingular
+        : this.labels.collectionPlural
+    }`;
+  }
+
+  #countLabel(count: number) {
+    return `${count} ${
+      count === 1 ? this.labels.entrySingular : this.labels.entryPlural
+    }`;
+  }
+
+  #bindManagerRoot() {
+    const root = this.closest<HTMLElement>("[data-collections-manager-root]");
+    if (root === this.#managerRoot) return;
+
+    this.#managerRoot?.removeEventListener("click", this.#handleHeaderClick);
+    this.#managerRoot = root;
+    this.#managerRoot?.addEventListener("click", this.#handleHeaderClick);
+  }
+
+  #queryHeaderElement<T extends HTMLElement>(selector: string) {
+    return this.#managerRoot?.querySelector<T>(selector) ?? null;
+  }
+
+  #syncHeaderState() {
+    const countEl = this.#queryHeaderElement<HTMLElement>(
+      "[data-collections-count]",
+    );
+    if (countEl) {
+      countEl.textContent = this.#collectionCountLabel();
+      countEl.hidden = false;
+    }
+
+    const doneButton = this.#queryHeaderElement<HTMLButtonElement>(
+      '[data-collections-action="done"]',
+    );
+    if (doneButton) {
+      doneButton.hidden = !this._reorderMode;
+    }
+
+    const reorderActions = this.#queryHeaderElement<HTMLElement>(
+      "[data-collections-reorder-actions]",
+    );
+    if (reorderActions) {
+      reorderActions.hidden = !this._reorderMode;
+    }
+
+    const toolbar = this.#queryHeaderElement<HTMLElement>(
+      "[data-collections-toolbar]",
+    );
+    if (toolbar) {
+      toolbar.hidden = this._reorderMode;
+    }
+
+    const hint = this.#queryHeaderElement<HTMLElement>(
+      "[data-collections-hint]",
+    );
+    if (hint) {
+      hint.hidden = !this._reorderMode;
+    }
+
+    const menu = this.#queryHeaderElement<HTMLElement>(
+      "[data-collections-more-menu]",
+    );
+    if (menu) {
+      menu.hidden = !this._showMoreMenu || this._reorderMode;
+    }
+
+    const toggleButton = this.#queryHeaderElement<HTMLButtonElement>(
+      '[data-collections-action="toggle-menu"]',
+    );
+    if (toggleButton) {
+      toggleButton.setAttribute(
+        "aria-expanded",
+        String(this._showMoreMenu && !this._reorderMode),
+      );
+    }
+  }
+
+  #toItems(json: CollectionsResponse): CollectionManagerItem[] {
+    const collections = json.collections ?? [];
+    const sidebarItems = json.sidebarItems ?? [];
+    const collectionMap = new Map<string, ManagedCollection>();
+
+    for (const collection of collections) {
+      collectionMap.set(collection.id, {
+        id: collection.id,
+        slug: collection.slug,
+        title: collection.title,
+        description: collection.description,
+        sortOrder: collection.sortOrder,
+        postCount: collection.postCount ?? 0,
+        recentActivityAt: collection.recentActivityAt,
+      });
+    }
+
+    const seenCollections = new Set<string>();
+    const orderedItems: CollectionManagerItem[] = [];
+
+    for (const item of sidebarItems) {
+      const collection =
+        item.collectionId != null
+          ? collectionMap.get(item.collectionId)
+          : undefined;
+
+      if (item.type === "collection" && !collection) {
+        continue;
+      }
+
+      if (collection) {
+        seenCollections.add(collection.id);
+      }
+
+      orderedItems.push({
+        id: item.id,
+        type: item.type,
+        collectionId: item.collectionId,
+        label: item.label,
+        position: item.position,
+        collection,
+      });
+    }
+
+    for (const collection of collections) {
+      if (seenCollections.has(collection.id)) continue;
+      orderedItems.push({
+        id: `collection-${collection.id}`,
+        type: "collection",
+        collectionId: collection.id,
+        position: "",
+        collection: collectionMap.get(collection.id),
+      });
+    }
+
+    return orderedItems;
+  }
 
   async #refreshList() {
     try {
       const res = await fetch("/api/collections");
       if (!res.ok) return;
-      const json = await res.json();
-
-      // Build collection lookup from response
-      const collectionMap = new Map<string, SidebarCollection>();
-      for (const col of json.collections) {
-        collectionMap.set(col.id, col);
-      }
-
-      // Map sidebar items, enriching with collection data
-      this._items = (json.sidebarItems as ClientSidebarItem[]).map((item) => ({
-        ...item,
-        collection: item.collectionId
-          ? collectionMap.get(item.collectionId)
-          : undefined,
-      }));
+      const json = (await res.json()) as CollectionsResponse;
+      this._items = this.#toItems(json);
     } catch {
-      // silent — stale list is acceptable
+      // stale UI is acceptable
     }
   }
 
-  // ===========================================================================
-  // SortableJS
-  // ===========================================================================
-
   #initSortable() {
-    const list = this.querySelector<HTMLElement>("#sidebar-collections-list");
+    const list = this.querySelector<HTMLElement>("#collections-manager-list");
     if (!list || this.#sortable) return;
 
     this.#sortable = Sortable.create(list, {
-      animation: 150,
+      ...responsiveSortableOptions,
+      chosenClass: "collection-directory-chosen",
+      dragClass: "collection-directory-drag",
+      ghostClass: "collection-directory-ghost",
       handle: "[data-drag-handle]",
+      scroll: true,
+      onChoose: () => {
+        setSortableDraggingState(list, true);
+      },
       onStart: (evt) => {
-        // Capture the exact next sibling (including comment/marker nodes)
-        // so the DOM revert restores the element between the correct Lit markers.
-        this.#revertNextSibling = evt.item.nextSibling;
+        this.#revertNextSibling = captureSortableRevertNextSibling(evt);
+      },
+      onUnchoose: () => {
+        setSortableDraggingState(list, false);
       },
       onEnd: (evt) => {
-        // Read new order from DOM BEFORE reverting
-        const els = [
-          ...list.querySelectorAll<HTMLElement>("[data-sidebar-item]"),
-        ];
-        const orderedIds = els
-          .map((el) => el.dataset.sidebarItem)
-          .filter((id): id is string => id !== undefined);
-
-        // Revert SortableJS DOM manipulation so Lit can re-render cleanly.
-        // Use the captured nextSibling (which includes Lit's comment markers)
-        // to restore the element to its exact original position. Using
-        // list.children (element-only) would skip comment nodes and misalign
-        // Lit's internal template markers, leaving orphaned DOM nodes.
-        const { item, oldIndex, newIndex } = evt;
-        if (oldIndex != null && newIndex != null && oldIndex !== newIndex) {
-          item.parentNode?.removeChild(item);
-          if (this.#revertNextSibling) {
-            list.insertBefore(item, this.#revertNextSibling);
-          } else {
-            list.appendChild(item);
-          }
-        }
+        const orderedIds = readSortableDataIds(
+          list,
+          "[data-sidebar-item]",
+          "sidebarItem",
+        );
+        revertSortableDomMove(list, evt, this.#revertNextSibling);
         this.#revertNextSibling = null;
+        setSortableDraggingState(list, false);
 
-        // Destroy sortable so it doesn't fight Lit's re-render
         this.#sortable?.destroy();
         this.#sortable = null;
 
-        // Find the moved item
-        const movedId = newIndex != null ? orderedIds[newIndex] : undefined;
+        const { movedId, afterId, beforeId } = getSortableMove(
+          orderedIds,
+          evt.newIndex,
+        );
         if (!movedId) return;
 
-        // Compute after/before neighbors
-        const movedIdx = orderedIds.indexOf(movedId);
-        const afterId = movedIdx > 0 ? orderedIds[movedIdx - 1] : null;
-        const beforeId =
-          movedIdx < orderedIds.length - 1 ? orderedIds[movedIdx + 1] : null;
-
-        // Update internal state — rebuild items in new order
-        const itemMap = new Map(this._items.map((i) => [i.id, i]));
+        const itemMap = new Map(this._items.map((entry) => [entry.id, entry]));
         this._items = orderedIds
           .map((id) => itemMap.get(id))
-          .filter((i): i is ClientSidebarItem => i !== undefined);
+          .filter(
+            (entry): entry is CollectionManagerItem => entry !== undefined,
+          );
 
-        // Persist to server — single item move
         fetch(`/api/collections/sidebar-items/${movedId}/move`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
@@ -219,24 +414,35 @@ export class JantCollectionSidebar extends LitElement {
     this._reorderMode = true;
     this._showMoreMenu = false;
     document.removeEventListener("click", this.#closeMoreMenu);
-    // SortableJS will be initialized after Lit re-renders (in updated())
   }
 
   #exitReorderMode() {
     this._reorderMode = false;
+    this._editingDividerId = null;
     this.#sortable?.destroy();
     this.#sortable = null;
   }
 
   protected updated(): void {
+    this.#bindManagerRoot();
+    this.#syncHeaderState();
+
     if (this._reorderMode) {
       this.#initSortable();
     }
-  }
 
-  // ===========================================================================
-  // Divider handlers
-  // ===========================================================================
+    if (this._editingDividerId) {
+      const input = this.querySelector<HTMLInputElement>(
+        `[data-divider-input-for="${this._editingDividerId}"]`,
+      );
+      if (input) {
+        input.focus();
+        input.select();
+        input.scrollIntoView({ block: "nearest" });
+        this._editingDividerId = null;
+      }
+    }
+  }
 
   async #addDivider() {
     this._showMoreMenu = false;
@@ -247,7 +453,10 @@ export class JantCollectionSidebar extends LitElement {
         headers: { "Content-Type": "application/json" },
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const item = (await res.json()) as { id: string };
+      this._reorderMode = true;
       await this.#refreshList();
+      this._editingDividerId = item.id;
     } catch {
       showToast(this.labels.saveFailed, "error");
     }
@@ -259,97 +468,50 @@ export class JantCollectionSidebar extends LitElement {
         method: "DELETE",
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      // Remove locally for instant feedback
       this._items = this._items.filter((item) => item.id !== id);
     } catch {
       showToast(this.labels.saveFailed, "error");
     }
   }
 
-  // ===========================================================================
-  // Collection CRUD handlers
-  // ===========================================================================
-
-  #openCreateDialog() {
-    this._dialogMode = "create";
-    this._editingCollection = null;
-    this._showMoreMenu = false;
-    document.removeEventListener("click", this.#closeMoreMenu);
-    // Wait for render, then show the dialog
-    this.updateComplete.then(() => {
-      this.querySelector<HTMLDialogElement>(
-        "#sidebar-collection-dialog",
-      )?.showModal();
-    });
-  }
-
-  #openEditDialog(col: SidebarCollection) {
-    this._dialogMode = "edit";
-    this._editingCollection = col;
-    this._showItemMenuId = null;
-    document.removeEventListener("click", this.#closeItemMenu);
-    this.updateComplete.then(() => {
-      this.querySelector<HTMLDialogElement>(
-        "#sidebar-collection-dialog",
-      )?.showModal();
-    });
-  }
-
-  #closeDialog() {
-    this.querySelector<HTMLDialogElement>(
-      "#sidebar-collection-dialog",
-    )?.close();
-    this._dialogMode = null;
-    this._editingCollection = null;
-  }
-
-  async #handleCollectionSubmit(e: Event) {
-    const event = e as CustomEvent<CollectionSubmitDetail>;
-    event.stopPropagation(); // prevent global bridge from handling
-
-    const detail = event.detail;
-    if (!detail) return;
-
-    const formEl = this.querySelector("jant-collection-form") as
-      | (HTMLElement & {
-          loading: boolean;
-        })
-      | null;
-    if (formEl) formEl.loading = true;
+  async #saveDividerLabel(id: string, label: string) {
+    const normalized = label.trim();
+    const current = this._items.find((item) => item.id === id)?.label ?? "";
+    if (normalized === current) return;
 
     try {
-      const isEdit = detail.isEdit;
-      const url = isEdit
-        ? `/api/collections/${this._editingCollection?.id}`
-        : "/api/collections";
-      const method = isEdit ? "PUT" : "POST";
-
-      const res = await fetch(url, {
-        method,
+      const res = await fetch(`/api/collections/sidebar-items/${id}`, {
+        method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(detail.data),
+        body: JSON.stringify({
+          label: normalized || null,
+        }),
       });
-
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
-      showToast(this.labels.saved);
-      this.#closeDialog();
-      await this.#refreshList();
+      const updated = (await res.json()) as SidebarItemUpdateResponse;
+      this._items = this._items.map((item) =>
+        item.id === id ? { ...item, label: updated.label ?? null } : item,
+      );
     } catch {
       showToast(this.labels.saveFailed, "error");
-    } finally {
-      if (formEl) formEl.loading = false;
+      await this.#refreshList();
     }
   }
 
-  async #deleteCollection(col: SidebarCollection) {
-    if (!window.confirm(this.labels.confirmDelete)) return;
+  async #deleteCollection(collection: ManagedCollection) {
+    const confirmed = await showConfirmDialog({
+      message: this.labels.confirmDelete,
+      confirmLabel: this.labels.deleteCollection,
+      cancelLabel: this.labels.cancel,
+      tone: "danger",
+    });
+    if (!confirmed) return;
 
     this._showItemMenuId = null;
     document.removeEventListener("click", this.#closeItemMenu);
 
     try {
-      const res = await fetch(`/api/collections/${col.id}`, {
+      const res = await fetch(`/api/collections/${collection.id}`, {
         method: "DELETE",
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -361,170 +523,46 @@ export class JantCollectionSidebar extends LitElement {
     }
   }
 
-  // ===========================================================================
-  // Render
-  // ===========================================================================
-
-  #renderHeading() {
-    return html`
-      <div class="flex items-center justify-between px-3 pb-2">
-        <h2
-          class="text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-        >
-          ${this.labels.collections}
-        </h2>
-        <div class="flex items-center gap-1">
-          ${this._reorderMode
-            ? html`
-                <button
-                  type="button"
-                  class="text-xs font-medium text-primary hover:underline"
-                  @click=${() => this.#exitReorderMode()}
-                >
-                  ${this.labels.done}
-                </button>
-              `
-            : html` ${this.#renderMoreButton()} ${this.#renderAddButton()} `}
+  #renderCollectionItem(item: CollectionManagerItem, sequence: number) {
+    const collection = item.collection;
+    if (!collection) return nothing;
+
+    const body = html`
+      <div class="collection-directory-main">
+        <span class="collection-directory-sequence" aria-hidden="true">
+          ${String(sequence).padStart(2, "0")}
+        </span>
+        <div class="collection-directory-title-row">
+          <span class="collection-directory-title">${collection.title}</span>
         </div>
-      </div>
-    `;
-  }
-
-  #renderMoreButton() {
-    return html`
-      <div class="relative">
-        <button
-          type="button"
-          class="flex items-center justify-center w-6 h-6 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-          aria-label=${this.labels.moreActions}
-          @click=${(e: Event) => {
-            e.stopPropagation();
-            this._showMoreMenu = !this._showMoreMenu;
-            if (this._showMoreMenu) {
-              setTimeout(() => {
-                document.addEventListener("click", this.#closeMoreMenu);
-              });
-            } else {
-              document.removeEventListener("click", this.#closeMoreMenu);
-            }
-          }}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+        <p class="collection-directory-summary">
+          <span class="collection-directory-meta"
+            >${this.#countLabel(collection.postCount)}</span
           >
-            <circle cx="12" cy="5" r="1" />
-            <circle cx="12" cy="12" r="1" />
-            <circle cx="12" cy="19" r="1" />
-          </svg>
-        </button>
-        ${this._showMoreMenu
-          ? html`
-              <div
-                class="absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
-                @click=${(e: Event) => e.stopPropagation()}
-              >
-                <button
-                  type="button"
-                  class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
-                  @click=${() => this.#enterReorderMode()}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="m3 16 4 4 4-4" />
-                    <path d="M7 20V4" />
-                    <path d="m21 8-4-4-4 4" />
-                    <path d="M17 4v16" />
-                  </svg>
-                  ${this.labels.reorder}
-                </button>
-                <button
-                  type="button"
-                  class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
-                  @click=${() => this.#addDivider()}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="M3 12h18" />
-                  </svg>
-                  ${this.labels.addDivider}
-                </button>
-              </div>
-            `
-          : nothing}
+          <span class="collection-directory-meta-separator" aria-hidden="true"
+            >/</span
+          >
+          <time
+            class="collection-directory-updated"
+            datetime=${toISOString(collection.recentActivityAt)}
+          >
+            ${formatRelativeAge(collection.recentActivityAt)}
+          </time>
+        </p>
       </div>
     `;
-  }
-
-  #renderAddButton() {
-    return html`
-      <button
-        type="button"
-        class="flex items-center justify-center w-6 h-6 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-        title=${this.labels.newCollection}
-        aria-label=${this.labels.newCollection}
-        @click=${() => this.#openCreateDialog()}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M5 12h14" />
-          <path d="M12 5v14" />
-        </svg>
-      </button>
-    `;
-  }
-
-  #renderCollectionItem(item: ClientSidebarItem) {
-    const col = item.collection;
-    if (!col) return nothing;
-
-    const isActive = col.slug === this.activeSlug;
 
     if (this._reorderMode) {
       return html`
         <div
-          data-sidebar-item="${item.id}"
-          class="flex items-center gap-2 px-3 py-2 text-sm rounded-md"
+          data-sidebar-item=${item.id}
+          class="collection-directory-item collection-directory-item-reorder"
         >
-          <div class="cursor-grab text-muted-foreground" data-drag-handle>
+          <div class="collection-directory-handle" data-drag-handle>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -540,19 +578,15 @@ export class JantCollectionSidebar extends LitElement {
               <circle cx="15" cy="19" r="1" />
             </svg>
           </div>
-          <span class="flex items-center justify-center w-4 h-4 shrink-0">
-            ${unsafeHTML(
-              renderCollectionIcon(col.icon, { size: 16, fallback: true }),
-            )}
-          </span>
-          <span class="truncate">${col.title}</span>
+          <div class="collection-directory-reorder-main" data-drag-handle>
+            ${body}
+          </div>
         </div>
       `;
     }
 
     return html`
       <div
-        data-sidebar-item="${item.id}"
         class=${classMap({
           "group relative": true,
           "z-50": this._showItemMenuId === item.id,
@@ -565,20 +599,10 @@ export class JantCollectionSidebar extends LitElement {
         }}
       >
         <a
-          href=${`/c/${col.slug}`}
-          class=${classMap({
-            "flex items-center gap-2.5 px-3 py-2 text-sm rounded-md truncate": true,
-            "bg-accent text-accent-foreground font-medium": isActive,
-            "text-muted-foreground hover:bg-accent hover:text-accent-foreground":
-              !isActive,
-          })}
+          href=${publicPath(`/c/${collection.slug}`)}
+          class="collection-directory-item collection-directory-item-manageable"
         >
-          <span class="flex items-center justify-center w-4 h-4 shrink-0">
-            ${unsafeHTML(
-              renderCollectionIcon(col.icon, { size: 16, fallback: true }),
-            )}
-          </span>
-          <span class="truncate">${col.title}</span>
+          ${body}
         </a>
         ${this._hoveringId === item.id || this._showItemMenuId === item.id
           ? this.#renderItemMenu(item)
@@ -587,17 +611,18 @@ export class JantCollectionSidebar extends LitElement {
     `;
   }
 
-  #renderItemMenu(item: ClientSidebarItem) {
-    const col = item.collection;
-    if (!col) return nothing;
+  #renderItemMenu(item: CollectionManagerItem) {
+    const collection = item.collection;
+    if (!collection) return nothing;
 
     const isOpen = this._showItemMenuId === item.id;
 
     return html`
-      <div class="absolute right-1 top-1/2 -translate-y-1/2">
+      <div class="collection-directory-item-menu">
         <button
           type="button"
-          class="flex items-center justify-center w-6 h-6 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          class="collections-page-icon-button"
+          aria-label=${this.labels.moreActions}
           @click=${(e: Event) => {
             e.preventDefault();
             e.stopPropagation();
@@ -617,34 +642,33 @@ export class JantCollectionSidebar extends LitElement {
             width="14"
             height="14"
             viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            fill="currentColor"
           >
-            <circle cx="12" cy="5" r="1" />
-            <circle cx="12" cy="12" r="1" />
-            <circle cx="12" cy="19" r="1" />
+            <circle cx="5" cy="12" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <circle cx="19" cy="12" r="2" />
           </svg>
         </button>
         ${isOpen
           ? html`
               <div
-                class="absolute right-0 top-full mt-1 z-50 min-w-[120px] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
+                class="collections-page-menu"
                 @click=${(e: Event) => e.stopPropagation()}
               >
-                <button
-                  type="button"
-                  class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
-                  @click=${() => this.#openEditDialog(col)}
+                <a
+                  href=${publicPath(
+                    `/c/${collection.slug}/edit?returnTo=${encodeURIComponent(
+                      publicPath("/c"),
+                    )}`,
+                  )}
+                  class="collections-page-menu-item"
                 >
                   ${this.labels.edit}
-                </button>
+                </a>
                 <button
                   type="button"
-                  class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent"
-                  @click=${() => this.#deleteCollection(col)}
+                  class="collections-page-menu-item collections-page-menu-item-danger"
+                  @click=${() => this.#deleteCollection(collection)}
                 >
                   ${this.labels.deleteCollection}
                 </button>
@@ -655,18 +679,18 @@ export class JantCollectionSidebar extends LitElement {
     `;
   }
 
-  #renderDividerItem(item: ClientSidebarItem) {
+  #renderDividerItem(item: CollectionManagerItem, index: number) {
     if (this._reorderMode) {
       return html`
         <div
-          data-sidebar-item="${item.id}"
-          class="flex items-center gap-2 px-3 py-1"
+          data-sidebar-item=${item.id}
+          class="collection-directory-divider-row"
         >
-          <div class="cursor-grab text-muted-foreground" data-drag-handle>
+          <div class="collection-directory-handle" data-drag-handle>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -682,11 +706,38 @@ export class JantCollectionSidebar extends LitElement {
               <circle cx="15" cy="19" r="1" />
             </svg>
           </div>
-          <hr class="flex-1 border-border" />
+          <div class="collection-directory-divider-body">
+            <input
+              type="text"
+              class="collection-directory-divider-input"
+              data-divider-input-for=${item.id}
+              placeholder=${this.labels.dividerLabelPlaceholder}
+              .value=${item.label ?? ""}
+              aria-label=${this.labels.dividerLabelPlaceholder}
+              @blur=${(e: Event) =>
+                this.#saveDividerLabel(
+                  item.id,
+                  (e.currentTarget as HTMLInputElement).value,
+                )}
+              @keydown=${(e: globalThis.KeyboardEvent) => {
+                const target = e.currentTarget as HTMLInputElement;
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  target.blur();
+                }
+                if (e.key === "Escape") {
+                  target.value = item.label ?? "";
+                  target.blur();
+                }
+              }}
+            />
+            <hr class="collection-directory-divider-line" />
+          </div>
           <button
             type="button"
-            class="flex items-center justify-center w-5 h-5 rounded-md text-muted-foreground hover:text-destructive"
+            class="collections-page-icon-button"
             title=${this.labels.deleteDivider}
+            aria-label=${this.labels.deleteDivider}
             @click=${() => this.#deleteDivider(item.id)}
           >
             <svg
@@ -708,98 +759,58 @@ export class JantCollectionSidebar extends LitElement {
       `;
     }
 
+    const hasLabel = !!item.label;
+    const group = getDividerCollectionGroup(this._items, index);
     return html`
-      <div data-sidebar-item="${item.id}" class="px-3 py-1">
-        <hr class="border-border" />
+      <div class="collection-directory-divider">
+        <div
+          class="collection-directory-divider-row"
+          aria-hidden=${hasLabel ? nothing : "true"}
+        >
+          ${hasLabel
+            ? html`
+                ${group
+                  ? html`
+                      <a
+                        href=${publicPath(`/c/${group.slugExpression}`)}
+                        class="collection-directory-divider-link collection-directory-divider-text"
+                      >
+                        ${item.label}
+                      </a>
+                    `
+                  : html`
+                      <span class="collection-directory-divider-text">
+                        ${item.label}
+                      </span>
+                    `}
+                <hr class="collection-directory-divider-line" />
+              `
+            : html`<hr class="collection-directory-divider-line" />`}
+        </div>
       </div>
     `;
   }
 
-  #renderDialog() {
-    if (!this._dialogMode) return nothing;
-
-    const isEdit = this._dialogMode === "edit";
-    const col = this._editingCollection;
-
-    const formLabels = this.labels.formLabels;
-    const initial =
-      isEdit && col
-        ? {
-            title: col.title,
-            slug: col.slug,
-            description: col.description ?? "",
-            sortOrder: col.sortOrder ?? "newest",
-            icon: col.icon ?? "",
-          }
-        : {
-            title: "",
-            slug: "",
-            description: "",
-            sortOrder: "newest",
-            icon: "",
-          };
-
-    const dialogLabels = {
-      ...formLabels,
-      submitLabel: isEdit ? formLabels.submitLabel : formLabels.submitLabel,
-    };
-
-    return html`
-      <dialog
-        id="sidebar-collection-dialog"
-        class="m-auto rounded-lg border border-border bg-background text-foreground p-6 w-full max-w-md shadow-lg backdrop:bg-black/50"
-        @cancel=${() => this.#closeDialog()}
-        @close=${() => {
-          this._dialogMode = null;
-          this._editingCollection = null;
-        }}
-        @click=${(e: Event) => {
-          // Backdrop click — target is the <dialog> itself when clicking outside the box
-          if (e.target === e.currentTarget) {
-            this.#closeDialog();
-          }
-        }}
-      >
-        <jant-collection-form
-          .labels=${dialogLabels}
-          .initial=${initial}
-          action=${isEdit && col
-            ? `/api/collections/${col.id}`
-            : "/api/collections"}
-          cancel-href="javascript:void(0)"
-          ?is-edit=${isEdit}
-          @jant:collection-submit=${(e: Event) =>
-            this.#handleCollectionSubmit(e)}
-          @click=${(e: Event) => {
-            // Intercept cancel link click
-            const target = (e.target as HTMLElement).closest?.("a.btn-outline");
-            if (target) {
-              e.preventDefault();
-              this.#closeDialog();
-            }
-          }}
-        ></jant-collection-form>
-      </dialog>
-    `;
-  }
-
   render() {
     return html`
-      <nav class="flex flex-col gap-1 pt-6">
-        ${this.#renderHeading()}
-
-        <div id="sidebar-collections-list" class="flex flex-col">
-          ${this._items.map((item) =>
-            item.type === "collection"
-              ? this.#renderCollectionItem(item)
-              : this.#renderDividerItem(item),
-          )}
-        </div>
-
-        ${this.#renderDialog()}
-      </nav>
+      ${this.#hasCollections()
+        ? html`
+            <div id="collections-manager-list" class="collection-directory">
+              ${(() => {
+                let collectionIndex = 0;
+                return this._items.map((item, index) => {
+                  if (item.type === "collection") {
+                    collectionIndex += 1;
+                    return this.#renderCollectionItem(item, collectionIndex);
+                  }
+                  return this.#renderDividerItem(item, index);
+                });
+              })()}
+            </div>
+          `
+        : html`<p class="text-muted-foreground">${this.labels.emptyState}</p>`}
     `;
   }
 }
 
-customElements.define("jant-collection-sidebar", JantCollectionSidebar);
+customElements.define("jant-collections-manager", JantCollectionsManager);