@jant/core 0.3.37 → 0.3.39

package/src/client/components/jant-post-menu.ts

@@ -11,13 +11,17 @@
  */
 
 import { LitElement, html, nothing } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import {
+  FEATURED_SPARKLE_OFF_SLASH_PATH,
+  FEATURED_SPARKLE_PATH,
+} from "../../lib/featured-icons.js";
+import { showConfirmDialog } from "../confirm.js";
 import { showToast } from "../toast.js";
+import { publicPath } from "../runtime-paths.js";
 import type { CollectionSubmitDetail } from "./collection-types.js";
 
 interface PostMenuData {
   id: string;
-  permalink: string;
   pinned: boolean;
   featured: boolean;
   visibility: string;
@@ -28,36 +32,48 @@ interface CollectionItem {
   id: string;
   title: string;
   slug: string;
-  icon: string | null;
 }
 
-/**
- * Render a collection icon from its raw DB value (JSON or legacy emoji).
- * Inline helper to avoid pulling lucide-static into the post-menu bundle.
- */
-function renderIconHtml(icon: string | null): string {
-  if (!icon) return "";
-  if (icon.startsWith("{")) {
-    try {
-      const parsed = JSON.parse(icon) as {
-        svg?: string;
-        color?: string;
-      };
-      if (typeof parsed.svg === "string") {
-        let svg = parsed.svg
-          .replace(/width="\d+"/, 'width="16"')
-          .replace(/height="\d+"/, 'height="16"');
-        if (parsed.color) {
-          svg = svg.replace(/^<svg/, `<svg style="color: ${parsed.color}"`);
-        }
-        return svg;
-      }
-    } catch {
-      /* not JSON — treat as text */
-    }
-  }
-  // Legacy emoji/text value
-  return `<span>${icon}</span>`;
+interface CollectionsResponse {
+  collections?: CollectionItem[];
+}
+
+interface PostCollectionsResponse {
+  collectionIds?: string[];
+}
+
+interface ErrorResponse {
+  error?: string;
+}
+
+type PostMenuView = "menu" | "collections" | "visibility";
+
+interface MenuTriggerRect {
+  top: number;
+  bottom: number;
+}
+
+const ESTIMATED_MENU_HEIGHT = 360;
+const MENU_VIEWPORT_MARGIN = 12;
+
+function getMenuPlacement(rect: MenuTriggerRect) {
+  const spaceBelow = window.innerHeight - rect.bottom - MENU_VIEWPORT_MARGIN;
+  const spaceAbove = rect.top - MENU_VIEWPORT_MARGIN;
+  return spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow;
+}
+
+export function removeLeadingFeedDivider(
+  feedContainer: HTMLElement | null | undefined,
+) {
+  const firstFeedItem = Array.from(feedContainer?.children ?? []).find(
+    (child): child is HTMLElement =>
+      child instanceof HTMLElement && child.classList.contains("feed-item"),
+  );
+  const firstDivider = Array.from(firstFeedItem?.children ?? []).find(
+    (child): child is HTMLElement =>
+      child instanceof HTMLElement && child.classList.contains("feed-divider"),
+  );
+  firstDivider?.remove();
 }
 
 export class JantPostMenu extends LitElement {
@@ -67,7 +83,7 @@ export class JantPostMenu extends LitElement {
     _x: { state: true },
     _y: { state: true },
     _openAbove: { state: true },
-    _collectionPickerOpen: { state: true },
+    _view: { state: true },
     _collections: { state: true },
     _collectionsLoading: { state: true },
     _collectionSearch: { state: true },
@@ -80,7 +96,7 @@ export class JantPostMenu extends LitElement {
   declare _x: number;
   declare _y: number;
   declare _openAbove: boolean;
-  declare _collectionPickerOpen: boolean;
+  declare _view: PostMenuView;
   declare _collections: CollectionItem[] | null;
   declare _collectionsLoading: boolean;
   declare _collectionSearch: string;
@@ -103,7 +119,7 @@ export class JantPostMenu extends LitElement {
     this._x = 0;
     this._y = 0;
     this._openAbove = true;
-    this._collectionPickerOpen = false;
+    this._view = "menu";
     this._collections = null;
     this._collectionsLoading = false;
     this._collectionSearch = "";
@@ -116,17 +132,44 @@ export class JantPostMenu extends LitElement {
     super.connectedCallback();
     document.addEventListener("click", this.#handleDocumentClick);
     document.addEventListener("keydown", this.#handleKeydown);
+    window.addEventListener("resize", this.#handleViewportChange);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#handleDocumentClick);
     document.removeEventListener("keydown", this.#handleKeydown);
+    window.removeEventListener("resize", this.#handleViewportChange);
   }
 
+  #syncPositionFromTrigger() {
+    const trigger = this._triggerEl;
+    if (!trigger?.isConnected) {
+      if (this._open) {
+        this.#close({ restoreFocus: false });
+      }
+      return;
+    }
+
+    const rect = trigger.getBoundingClientRect();
+    this._openAbove = getMenuPlacement(rect);
+    this._x = window.scrollX + rect.right;
+    this._y =
+      window.scrollY + (this._openAbove ? rect.top - 6 : rect.bottom + 6);
+  }
+
+  #handleViewportChange = () => {
+    if (!this._open || this._addCollectionPanelOpen) return;
+    this.#syncPositionFromTrigger();
+  };
+
   #handleKeydown = (e: Event) => {
     const ke = e as globalThis.KeyboardEvent;
     if (ke.key === "Escape") {
+      if (this._addCollectionPanelOpen) {
+        this.#closeAddCollectionPanel();
+        return;
+      }
       // Close collection popovers first
       const openPopover = document.querySelector(
         "[data-collection-popover].open",
@@ -136,6 +179,10 @@ export class JantPostMenu extends LitElement {
         return;
       }
       if (this._open) {
+        if (this._view !== "menu") {
+          this.#showMainMenu();
+          return;
+        }
         this.#close();
       }
     }
@@ -165,6 +212,14 @@ export class JantPostMenu extends LitElement {
       return;
     }
 
+    // Click inside the quick-create dialog — don't close the menu session
+    if (
+      target.closest("[data-collection-quick-dialog]") ||
+      target.classList.contains("collection-quick-dialog-backdrop")
+    ) {
+      return;
+    }
+
     // Close any open collection popovers on outside click
     const openPopover = document.querySelector(
       "[data-collection-popover].open",
@@ -195,7 +250,6 @@ export class JantPostMenu extends LitElement {
 
       this._data = {
         id: postId,
-        permalink: article.dataset.postPermalink ?? "",
         pinned: article.hasAttribute("data-post-pinned"),
         featured: article.hasAttribute("data-post-featured"),
         visibility: article.dataset.postVisibility ?? "public",
@@ -203,45 +257,66 @@ export class JantPostMenu extends LitElement {
       };
 
       // Position relative to trigger
-      const rect = trigger.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const menuHeight = 280; // estimate
-      this._openAbove = spaceBelow < menuHeight;
-
-      this._x = rect.right;
-      this._y = this._openAbove ? rect.top : rect.bottom;
       this._triggerEl = trigger;
+      this.#syncPositionFromTrigger();
       trigger.setAttribute("aria-expanded", "true");
-      this._collectionPickerOpen = false;
+      this._view = "menu";
       this._open = true;
+      this.#focusAfterUpdate("[data-post-menu-item-primary]");
       return;
     }
 
     // Clicking inside the dropdown — don't close (menu or collection picker)
     if (this._open) {
       const inside = target.closest?.(
-        "[role='menu'], [data-collection-picker]",
+        "[role='menu'], [data-collection-picker], [data-visibility-panel]",
       );
       if (inside) return;
     }
 
     // Clicking outside — close
     if (this._open) {
-      this.#close();
+      this.#close({ restoreFocus: false });
     }
   };
 
-  #close() {
-    this._triggerEl?.setAttribute("aria-expanded", "false");
+  #focusAfterUpdate(selector: string) {
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLElement>(selector)?.focus();
+    });
+  }
+
+  #showMainMenu(focusSelector = "[data-post-menu-item-primary]") {
+    this._view = "menu";
+    this.#focusAfterUpdate(focusSelector);
+  }
+
+  #openVisibilityPanel() {
+    if (this._data?.isReply) return;
+    this._view = "visibility";
+    this.#focusAfterUpdate(
+      "[data-post-menu-visibility-current='true'], [data-post-menu-visibility-option]",
+    );
+  }
+
+  #close(options: { restoreFocus?: boolean } = {}) {
+    const { restoreFocus = true } = options;
+    const trigger = this._triggerEl;
+    trigger?.setAttribute("aria-expanded", "false");
     this._triggerEl = null;
     this._open = false;
-    this._collectionPickerOpen = false;
+    this._view = "menu";
     this._addCollectionPanelOpen = false;
     this._collectionSearch = "";
 
     if (this.#collectionsDirty) {
       this.#collectionsDirty = false;
       window.location.reload();
+      return;
+    }
+
+    if (restoreFocus) {
+      trigger?.focus();
     }
   }
 
@@ -250,7 +325,7 @@ export class JantPostMenu extends LitElement {
   async #edit() {
     if (!this._data) return;
     const postId = this._data.id;
-    this.#close();
+    this.#close({ restoreFocus: false });
 
     const dialog = document.getElementById(
       "compose-dialog",
@@ -283,7 +358,7 @@ export class JantPostMenu extends LitElement {
 
       const messages: Record<string, string> = {
         public: "Post made public.",
-        unlisted: "Post unlisted.",
+        latest_hidden: "Hidden from Latest.",
         private: "Post made private.",
       };
       showToast(messages[newVisibility] ?? "Visibility updated.");
@@ -317,7 +392,7 @@ export class JantPostMenu extends LitElement {
       }
       this._data = { ...this._data, featured };
 
-      showToast(featured ? "Post featured." : "Post unfeatured.");
+      showToast(featured ? "Added to Featured." : "Removed from Featured.");
     } catch {
       showToast("Could not update post. Try again.", "error");
     }
@@ -358,8 +433,19 @@ export class JantPostMenu extends LitElement {
 
   async #delete() {
     if (!this._data) return;
-    if (!window.confirm("Delete this post permanently? This can't be undone."))
+    const trigger = this._triggerEl;
+    this.#close({ restoreFocus: false });
+
+    const confirmed = await showConfirmDialog({
+      message: "Delete this post permanently? This can't be undone.",
+      confirmLabel: "Delete",
+      cancelLabel: "Cancel",
+      tone: "danger",
+    });
+    if (!confirmed) {
+      trigger?.focus();
       return;
+    }
 
     try {
       const res = await fetch(`/api/posts/${this._data.id}`, {
@@ -373,34 +459,26 @@ export class JantPostMenu extends LitElement {
       );
       // Remove the feed item wrapper if it exists, otherwise the article itself
       const feedItem = article?.closest(".feed-item");
+      const feedContainer = feedItem?.parentElement;
       (feedItem ?? article)?.remove();
+      removeLeadingFeedDivider(feedContainer);
 
       showToast("Post deleted.");
     } catch {
       showToast("Could not delete post. Try again.", "error");
+      trigger?.focus();
     }
-    this.#close();
-  }
-
-  async #copyLink() {
-    if (!this._data) return;
-    try {
-      await globalThis.navigator.clipboard.writeText(
-        window.location.origin + this._data.permalink,
-      );
-      showToast("Link copied.");
-    } catch {
-      showToast("Could not copy link.", "error");
-    }
-    this.#close();
   }
 
   async #openCollectionPicker() {
     if (!this._data) return;
     const postId = this._data.id;
-    this._collectionPickerOpen = true;
+    this._view = "collections";
     this._collectionSearch = "";
     this._collectionsLoading = true;
+    this.#focusAfterUpdate(
+      ".post-menu-picker-search input, .post-menu-picker-option, [data-post-menu-add-collection]",
+    );
 
     try {
       const [collectionsRes, postRes] = await Promise.all([
@@ -409,11 +487,12 @@ export class JantPostMenu extends LitElement {
       ]);
 
       if (!collectionsRes.ok) throw new Error();
-      const collectionsData = await collectionsRes.json();
+      const collectionsData =
+        (await collectionsRes.json()) as CollectionsResponse;
       this._collections = collectionsData.collections ?? [];
 
       if (postRes.ok) {
-        const postData = await postRes.json();
+        const postData = (await postRes.json()) as PostCollectionsResponse;
         this._postCollectionIds = postData.collectionIds ?? [];
       }
     } catch {
@@ -421,6 +500,9 @@ export class JantPostMenu extends LitElement {
       showToast("Could not load collections.", "error");
     }
     this._collectionsLoading = false;
+    this.#focusAfterUpdate(
+      ".post-menu-picker-search input, .post-menu-picker-option, [data-post-menu-add-collection]",
+    );
   }
 
   async #toggleCollection(collectionId: string) {
@@ -446,7 +528,9 @@ export class JantPostMenu extends LitElement {
           body: JSON.stringify({ postId: this._data.id }),
         });
         if (!res.ok) {
-          const body = await res.json().catch(() => null);
+          const body = (await res
+            .json()
+            .catch(() => null)) as ErrorResponse | null;
           if (res.status === 409 || body?.error?.includes("already")) {
             if (!this._postCollectionIds.includes(collectionId)) {
               this._postCollectionIds = [
@@ -474,10 +558,24 @@ export class JantPostMenu extends LitElement {
 
   #openAddCollectionPanel() {
     this._addCollectionPanelOpen = true;
+    this.updateComplete.then(() => {
+      const titleInput = this.querySelector<HTMLInputElement>(
+        "[data-collection-quick-dialog] [data-collection-title-input]",
+      );
+      titleInput?.focus();
+      titleInput?.select();
+    });
   }
 
   #closeAddCollectionPanel() {
     this._addCollectionPanelOpen = false;
+    this.#syncPositionFromTrigger();
+    this.updateComplete.then(() => {
+      (
+        this.querySelector<HTMLElement>("[data-post-menu-add-collection]") ??
+        this._triggerEl
+      )?.focus();
+    });
   }
 
   async #handleAddCollectionSubmit(e: Event) {
@@ -498,15 +596,25 @@ export class JantPostMenu extends LitElement {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(detail.data),
       });
-
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
-      const created = await res.json();
+      const created = (await res.json().catch(() => null)) as {
+        id: string;
+        title: string;
+        slug: string;
+        error?: string;
+      } | null;
+
+      if (!res.ok) {
+        throw new Error(
+          created?.error || "Could not create collection. Try again.",
+        );
+      }
+      if (!created?.id || !created.title || !created.slug) {
+        throw new Error("Could not create collection. Try again.");
+      }
       const newItem: CollectionItem = {
         id: created.id,
         title: created.title,
         slug: created.slug,
-        icon: created.icon ?? null,
       };
 
       this._collections = [...(this._collections ?? []), newItem];
@@ -522,22 +630,22 @@ export class JantPostMenu extends LitElement {
       }
 
       this.#collectionsDirty = true;
-      this._addCollectionPanelOpen = false;
-      showToast("Collection created.");
-    } catch {
-      showToast("Could not create collection. Try again.", "error");
+      this.#closeAddCollectionPanel();
+      showToast(
+        this.#getCollectionFormLabels()?.createdLabel ?? "Collection created.",
+      );
+    } catch (error) {
+      showToast(
+        error instanceof Error
+          ? error.message
+          : "Could not create collection. Try again.",
+        "error",
+      );
     } finally {
       if (formEl) formEl.loading = false;
     }
   }
 
-  #submitAddCollectionForm() {
-    const form = this.querySelector<HTMLFormElement>(
-      ".post-menu-add-collection-panel form",
-    );
-    if (form) form.requestSubmit();
-  }
-
   /** Get collection form labels from the compose dialog (already on the page) */
   #getCollectionFormLabels() {
     const composeEl = document.querySelector("jant-compose-dialog") as
@@ -546,24 +654,27 @@ export class JantPostMenu extends LitElement {
     return composeEl?.labels?.collectionFormLabels ?? null;
   }
 
-  // --- Icons (inline SVG) ---
+  #getAddCollectionLabel() {
+    const composeEl = document.querySelector("jant-compose-dialog") as
+      | import("./jant-compose-dialog.js").JantComposeDialog
+      | null;
+    return composeEl?.labels?.addCollection ?? "Add Collection";
+  }
 
-  #iconEdit() {
-    return html`<svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
-      <path d="m15 5 4 4" />
-    </svg>`;
+  #getVisibilityLabel(visibility: string) {
+    switch (visibility) {
+      case "private":
+        return "Private";
+      case "latest_hidden":
+        return "Hidden from Latest";
+      default:
+        return "Public";
+    }
   }
 
-  #iconCollection() {
+  // --- Icons (inline SVG) ---
+
+  #iconEdit() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
@@ -573,15 +684,13 @@ export class JantPostMenu extends LitElement {
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <rect width="7" height="7" x="3" y="3" rx="1" />
-      <rect width="7" height="7" x="14" y="3" rx="1" />
-      <rect width="7" height="7" x="14" y="14" rx="1" />
-      <rect width="7" height="7" x="3" y="14" rx="1" />
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z" />
     </svg>`;
   }
 
-  // Lucide: heart (feature) / heart-off (unfeature)
-  #iconHeart() {
+  // Shared featured sparkle icon / custom off variant
+  #iconFeatured() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
@@ -591,29 +700,23 @@ export class JantPostMenu extends LitElement {
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path
-        d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
-      />
+      <path d=${FEATURED_SPARKLE_PATH} />
     </svg>`;
   }
 
-  #iconHeartOff() {
+  #iconFeaturedOff() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       stroke-width="1.75"
+      style="--icon-stroke: 1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <line x1="2" y1="2" x2="22" y2="22" />
-      <path
-        d="M16.5 16.5 12 21l-7-7c-1.5-1.45-3-3.2-3-5.5a5.5 5.5 0 0 1 2.14-4.35"
-      />
-      <path
-        d="M8.76 3.1c1.15.22 2.13.78 3.24 1.9 1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.12-1.3 3.78-2.67 5.17"
-      />
+      <path d=${FEATURED_SPARKLE_PATH} />
+      <path d=${FEATURED_SPARKLE_OFF_SLASH_PATH} />
     </svg>`;
   }
 
@@ -668,85 +771,51 @@ export class JantPostMenu extends LitElement {
     </svg>`;
   }
 
-  // Lucide: globe (make public)
-  #iconGlobe() {
+  #iconChevronLeft() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="1.75"
+      stroke-width="1.9"
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
-      <path d="M2 12h20" />
+      <path d="m15 18-6-6 6-6" />
     </svg>`;
   }
 
-  // Lucide: link-2-off (unlisted)
-  #iconLinkOff() {
+  #iconChevronRight() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="1.75"
+      stroke-width="1.9"
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M9 17H7A5 5 0 0 1 7 7" />
-      <path d="M15 7h2a5 5 0 0 1 4 8" />
-      <line x1="8" x2="12" y1="12" y2="12" />
-      <line x1="2" x2="22" y1="2" y2="22" />
+      <path d="m9 18 6-6-6-6" />
     </svg>`;
   }
 
-  // Lucide: eye-off (private)
-  #iconEyeOff() {
+  #iconCheck() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="1.75"
+      stroke-width="2.3"
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path
-        d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
-      />
-      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
-      <path
-        d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
-      />
-      <path d="m2 2 20 20" />
-    </svg>`;
-  }
-
-  #iconLink() {
-    return html`<svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+      <path d="M20 6 9 17l-5-5" />
     </svg>`;
   }
 
   // --- Render ---
 
   #renderCollectionPicker() {
-    if (this._addCollectionPanelOpen) {
-      return this.#renderAddCollectionPanel();
-    }
-
     const collections = this._collections ?? [];
     const search = this._collectionSearch.toLowerCase();
     const filtered = search
@@ -754,9 +823,23 @@ export class JantPostMenu extends LitElement {
       : collections;
 
     return html`
-      <div data-collection-picker class="post-menu-collection-picker">
-        <div class="post-menu-picker-header">
-          <span>Collections</span>
+      <div
+        data-collection-picker
+        class="post-menu-view post-menu-collection-picker"
+      >
+        <div class="post-menu-panel-header">
+          <button
+            type="button"
+            class="post-menu-panel-back"
+            aria-label="Back"
+            @click=${() =>
+              this.#showMainMenu("[data-post-menu-open-collections]")}
+          >
+            ${this.#iconChevronLeft()}
+          </button>
+          <div class="post-menu-panel-heading">
+            <span>Collections</span>
+          </div>
         </div>
         ${collections.length > 0
           ? html`<div class="post-menu-picker-search">
@@ -796,60 +879,199 @@ export class JantPostMenu extends LitElement {
             : filtered.length > 0
               ? filtered.map((c) => {
                   const selected = this._postCollectionIds.includes(c.id);
-                  const iconStr = renderIconHtml(c.icon);
                   return html`
-                    <div
+                    <button
+                      type="button"
                       role="option"
                       aria-selected=${selected ? "true" : "false"}
-                      class="post-menu-picker-option"
+                      class=${`post-menu-picker-option${
+                        selected ? " post-menu-picker-option-selected" : ""
+                      }`}
                       @click=${() => this.#toggleCollection(c.id)}
                     >
-                      ${iconStr
-                        ? html`<span class="post-menu-picker-icon"
-                            >${unsafeHTML(iconStr)}</span
-                          >`
-                        : nothing}
                       <span class="post-menu-picker-title">${c.title}</span>
                       ${selected
-                        ? html`<svg
-                            class="post-menu-picker-check"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            width="14"
-                            height="14"
+                        ? html`<span
+                            class="post-menu-picker-marker post-menu-picker-marker-selected"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              aria-hidden="true"
+                            >
+                              <circle
+                                cx="12"
+                                cy="12"
+                                r="10"
+                                fill="currentColor"
+                              />
+                              <path
+                                d="M8 12.5 10.7 15.2 16.4 9.5"
+                                stroke="var(--site-page-bg)"
+                                stroke-width="2.3"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              />
+                            </svg>
+                          </span>`
+                        : html`<span
+                            class="post-menu-picker-marker post-menu-picker-marker-add"
                           >
-                            <path d="M20 6 9 17l-5-5" />
-                          </svg>`
-                        : nothing}
-                    </div>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              aria-hidden="true"
+                            >
+                              <circle
+                                cx="12"
+                                cy="12"
+                                r="9"
+                                stroke="currentColor"
+                                stroke-width="1.8"
+                              />
+                              <path
+                                d="M12 8v8M8 12h8"
+                                stroke="currentColor"
+                                stroke-width="1.9"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </span>`}
+                    </button>
                   `;
                 })
               : html`<div class="post-menu-picker-empty">
                   ${search ? "No matching collections" : "No collections yet"}
                 </div>`}
         </div>
-        <div
-          class="post-menu-picker-add"
-          @click=${() => this.#openAddCollectionPanel()}
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+        <div class="post-menu-picker-footer">
+          <button
+            type="button"
+            class="post-menu-picker-add"
+            data-post-menu-add-collection
+            @click=${() => this.#openAddCollectionPanel()}
           >
-            <path d="M8 3v10M3 8h10" />
-          </svg>
-          Add Collection
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M8 3v10M3 8h10" />
+            </svg>
+            Add Collection
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  #renderVisibilityPanel() {
+    if (!this._data || this._data.isReply) return nothing;
+
+    const visibility = this._data.visibility;
+    return html`
+      <div
+        data-visibility-panel
+        class="post-menu-view post-menu-visibility-panel"
+      >
+        <div class="post-menu-panel-header">
+          <button
+            type="button"
+            class="post-menu-panel-back"
+            aria-label="Back"
+            @click=${() =>
+              this.#showMainMenu("[data-post-menu-open-visibility]")}
+          >
+            ${this.#iconChevronLeft()}
+          </button>
+          <div class="post-menu-panel-heading">
+            <span>Visibility</span>
+          </div>
+        </div>
+        <div role="menu" class="post-menu-list">
+          <div class="post-menu-section">
+            <button
+              type="button"
+              role="menuitemradio"
+              aria-checked=${visibility === "public" ? "true" : "false"}
+              data-post-menu-visibility-option
+              data-post-menu-visibility-current=${visibility === "public"
+                ? "true"
+                : "false"}
+              class=${`post-menu-item${
+                visibility === "public" ? " post-menu-item-active" : ""
+              }`}
+              @click=${() =>
+                visibility === "public"
+                  ? this.#showMainMenu("[data-post-menu-open-visibility]")
+                  : this.#setVisibility("public")}
+            >
+              <span class="post-menu-item-label">Public</span>
+              ${visibility === "public"
+                ? html`<span
+                    class="post-menu-item-trailing post-menu-item-check"
+                    >${this.#iconCheck()}</span
+                  >`
+                : nothing}
+            </button>
+
+            <button
+              type="button"
+              role="menuitemradio"
+              aria-checked=${visibility === "latest_hidden" ? "true" : "false"}
+              data-post-menu-visibility-option
+              data-post-menu-visibility-current=${visibility === "latest_hidden"
+                ? "true"
+                : "false"}
+              class=${`post-menu-item${
+                visibility === "latest_hidden" ? " post-menu-item-active" : ""
+              }`}
+              @click=${() =>
+                visibility === "latest_hidden"
+                  ? this.#showMainMenu("[data-post-menu-open-visibility]")
+                  : this.#setVisibility("latest_hidden")}
+            >
+              <span class="post-menu-item-label">Hidden from Latest</span>
+              ${visibility === "latest_hidden"
+                ? html`<span
+                    class="post-menu-item-trailing post-menu-item-check"
+                    >${this.#iconCheck()}</span
+                  >`
+                : nothing}
+            </button>
+
+            <button
+              type="button"
+              role="menuitemradio"
+              aria-checked=${visibility === "private" ? "true" : "false"}
+              data-post-menu-visibility-option
+              data-post-menu-visibility-current=${visibility === "private"
+                ? "true"
+                : "false"}
+              class=${`post-menu-item${
+                visibility === "private" ? " post-menu-item-active" : ""
+              }`}
+              @click=${() =>
+                visibility === "private"
+                  ? this.#showMainMenu("[data-post-menu-open-visibility]")
+                  : this.#setVisibility("private")}
+            >
+              <span class="post-menu-item-label">Private</span>
+              ${visibility === "private"
+                ? html`<span
+                    class="post-menu-item-trailing post-menu-item-check"
+                    >${this.#iconCheck()}</span
+                  >`
+                : nothing}
+            </button>
+          </div>
         </div>
       </div>
     `;
@@ -868,46 +1090,58 @@ export class JantPostMenu extends LitElement {
     };
 
     return html`
-      <div data-collection-picker class="post-menu-add-collection-panel">
-        <div class="post-menu-picker-header">
+      <div
+        class="collection-quick-dialog-backdrop"
+        @click=${() => this.#closeAddCollectionPanel()}
+      ></div>
+      <div
+        class="collection-quick-dialog"
+        data-collection-quick-dialog
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.#getAddCollectionLabel()}
+        @click=${(event: Event) => event.stopPropagation()}
+      >
+        <div class="collection-quick-dialog-header">
+          <div class="collection-quick-dialog-title-block">
+            <h2 class="collection-quick-dialog-title">
+              ${this.#getAddCollectionLabel()}
+            </h2>
+            <p class="collection-quick-dialog-note">${labels.quickHint}</p>
+          </div>
           <button
             type="button"
-            class="post-menu-panel-back"
+            class="collection-quick-dialog-cancel"
             @click=${() => this.#closeAddCollectionPanel()}
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="m15 18-6-6 6-6" />
-            </svg>
-          </button>
-          <span>Add Collection</span>
-          <button
-            type="button"
-            class="post-menu-panel-done"
-            @click=${() => this.#submitAddCollectionForm()}
-          >
-            Done
+            ${labels.cancelLabel}
           </button>
         </div>
-        <div class="post-menu-panel-body">
+        <div class="collection-quick-dialog-body">
           <jant-collection-form
-            class="post-menu-collection-form"
+            variant="quick"
             .labels=${labels}
             .initial=${initial}
-            action="/api/collections"
+            action=${publicPath("/api/collections")}
             cancel-href="javascript:void(0)"
             @jant:collection-submit=${(e: Event) =>
               this.#handleAddCollectionSubmit(e)}
           ></jant-collection-form>
         </div>
+        <div class="collection-quick-dialog-footer">
+          <button
+            type="button"
+            class="compose-post-btn collection-quick-dialog-submit"
+            @click=${() => {
+              const form = this.querySelector<HTMLFormElement>(
+                "[data-collection-quick-dialog] form",
+              );
+              form?.requestSubmit();
+            }}
+          >
+            ${labels.quickSubmitLabel}
+          </button>
+        </div>
       </div>
     `;
   }
@@ -919,76 +1153,103 @@ export class JantPostMenu extends LitElement {
     const isFeatured = this._data.featured;
 
     return html`
-      <div role="menu">
-        <div role="menuitem" @click=${() => this.#edit()}>
-          ${this.#iconEdit()} Edit
-        </div>
-
-        <hr role="separator" />
+      <div class="post-menu-view post-menu-main">
+        <div role="menu" class="post-menu-list">
+          <div class="post-menu-section">
+            <button
+              type="button"
+              role="menuitem"
+              class="post-menu-item"
+              data-post-menu-item-primary
+              @click=${() => this.#edit()}
+            >
+              <span class="post-menu-item-label">Edit</span>
+              <span class="post-menu-item-trailing">${this.#iconEdit()}</span>
+            </button>
+
+            <button
+              type="button"
+              role="menuitem"
+              class="post-menu-item"
+              data-post-menu-open-collections
+              @click=${() => this.#openCollectionPicker()}
+            >
+              <span class="post-menu-item-label">Add to collection</span>
+              <span class="post-menu-item-trailing post-menu-item-chevron"
+                >${this.#iconChevronRight()}</span
+              >
+            </button>
 
-        <div role="menuitem" @click=${() => this.#openCollectionPicker()}>
-          ${this.#iconCollection()} Add to collection
-        </div>
-        ${isFeatured
-          ? html`<div role="menuitem" @click=${() => this.#setFeatured(false)}>
-              ${this.#iconHeartOff()} Unfeature
-            </div>`
-          : html`<div role="menuitem" @click=${() => this.#setFeatured(true)}>
-              ${this.#iconHeart()} Feature
-            </div>`}
-        ${this._data.isReply
-          ? nothing
-          : html`
-              ${visibility !== "public"
-                ? html`<div
+            ${this._data.isReply
+              ? nothing
+              : html`
+                  <button
+                    type="button"
                     role="menuitem"
-                    @click=${() => this.#setVisibility("public")}
+                    class="post-menu-item"
+                    data-post-menu-open-visibility
+                    @click=${() => this.#openVisibilityPanel()}
                   >
-                    ${this.#iconGlobe()} Make Public
-                  </div>`
-                : nothing}
-              ${visibility !== "unlisted"
-                ? html`<div
-                    role="menuitem"
-                    @click=${() => this.#setVisibility("unlisted")}
-                  >
-                    ${this.#iconLinkOff()} Make Unlisted
-                  </div>`
-                : nothing}
-              ${visibility !== "private"
-                ? html`<div
+                    <span class="post-menu-item-label">Visibility</span>
+                    <span class="post-menu-item-meta"
+                      >${this.#getVisibilityLabel(visibility)}</span
+                    >
+                    <span class="post-menu-item-trailing post-menu-item-chevron"
+                      >${this.#iconChevronRight()}</span
+                    >
+                  </button>
+                `}
+          </div>
+
+          <div class="post-menu-section">
+            <button
+              type="button"
+              role="menuitem"
+              class="post-menu-item"
+              @click=${() => this.#setFeatured(!isFeatured)}
+            >
+              <span class="post-menu-item-label"
+                >${isFeatured
+                  ? "Remove from Featured"
+                  : "Add to Featured"}</span
+              >
+              <span class="post-menu-item-trailing"
+                >${isFeatured
+                  ? this.#iconFeaturedOff()
+                  : this.#iconFeatured()}</span
+              >
+            </button>
+
+            ${this._data.isReply
+              ? nothing
+              : html`
+                  <button
+                    type="button"
                     role="menuitem"
-                    @click=${() => this.#setVisibility("private")}
+                    class="post-menu-item"
+                    @click=${() => this.#togglePin()}
                   >
-                    ${this.#iconEyeOff()} Make Private
-                  </div>`
-                : nothing}
-            `}
-        ${this._data.isReply
-          ? nothing
-          : html`<div role="menuitem" @click=${() => this.#togglePin()}>
-              ${isPinned ? this.#iconPinOff() : this.#iconPin()}
-              ${isPinned ? "Unpin" : "Pin this post"}
-            </div>`}
-
-        <hr role="separator" />
-
-        <div
-          role="menuitem"
-          class="text-destructive! [&_svg]:text-destructive!"
-          @click=${() => this.#delete()}
-        >
-          ${this.#iconTrash()} Delete
-        </div>
-
-        <hr role="separator" />
-
-        <div
-          role="menuitem"
-          class="text-muted-foreground!"
-          @click=${() => this.#copyLink()}
-        >
-          ${this.#iconLink()} Copy link
+                    <span class="post-menu-item-label"
+                      >${isPinned ? "Unpin" : "Pin this post"}</span
+                    >
+                    <span class="post-menu-item-trailing"
+                      >${isPinned ? this.#iconPinOff() : this.#iconPin()}</span
+                    >
+                  </button>
+                `}
+          </div>
+
+          <div class="post-menu-section post-menu-section-danger">
+            <button
+              type="button"
+              role="menuitem"
+              class="post-menu-item post-menu-item-danger"
+              @click=${() => this.#delete()}
+            >
+              <span class="post-menu-item-label">Delete</span>
+              <span class="post-menu-item-trailing">${this.#iconTrash()}</span>
+            </button>
+          </div>
         </div>
       </div>
     `;
@@ -997,21 +1258,37 @@ export class JantPostMenu extends LitElement {
   render() {
     if (!this._open || !this._data) return nothing;
 
-    const wrapperStyle = `position:fixed;z-index:100;right:${document.documentElement.clientWidth - this._x}px;${
-      this._openAbove
-        ? `bottom:${window.innerHeight - this._y + 6}px;`
-        : `top:${this._y + 6}px;`
-    }`;
+    const transformStyle = this._openAbove
+      ? "transform:translate(-100%, -100%);"
+      : "transform:translateX(-100%);";
+    const wrapperStyle = `position:absolute;z-index:100;left:${Math.round(this._x)}px;top:${Math.round(this._y)}px;${transformStyle}`;
+    const showMenuSurface = !this._addCollectionPanelOpen;
 
     return html`
-      <div class="post-menu-backdrop" @click=${() => this.#close()}></div>
-      <div class="dropdown-menu" style=${wrapperStyle}>
-        <div data-popover aria-hidden="false" class="!static min-w-52">
-          ${this._collectionPickerOpen
-            ? this.#renderCollectionPicker()
-            : this.#renderMenu()}
-        </div>
-      </div>
+      ${showMenuSurface
+        ? html`
+            <div
+              class="post-menu-backdrop"
+              @click=${() => this.#close({ restoreFocus: false })}
+            ></div>
+            <div class="dropdown-menu" style=${wrapperStyle}>
+              <div
+                data-popover
+                aria-hidden="false"
+                class="!static post-menu-panel"
+              >
+                ${this._view === "collections"
+                  ? this.#renderCollectionPicker()
+                  : this._view === "visibility"
+                    ? this.#renderVisibilityPanel()
+                    : this.#renderMenu()}
+              </div>
+            </div>
+          `
+        : nothing}
+      ${this._addCollectionPanelOpen
+        ? this.#renderAddCollectionPanel()
+        : nothing}
     `;
   }
 }