@jant/core 0.3.36 → 0.3.38

package/src/ui/dash/settings/SessionsContent.tsx

@@ -0,0 +1,159 @@
+/**
+ * Session management: view active sessions and revoke them
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import { formatDate } from "../../../lib/time.js";
+
+export interface SessionInfo {
+  token: string;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: number;
+  isCurrent: boolean;
+}
+
+/**
+ * Parse a user-agent string into a human-readable device description.
+ *
+ * @param ua - Raw User-Agent header value
+ * @returns Short description like "Chrome on macOS" or "Safari on iPhone"
+ *
+ * @example
+ * ```ts
+ * parseDevice("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ... Chrome/120")
+ * // "Chrome on macOS"
+ * ```
+ */
+function parseDevice(ua: string | null): string | null {
+  if (!ua) return null;
+
+  let browser = "Unknown browser";
+  if (ua.includes("Firefox/")) browser = "Firefox";
+  else if (ua.includes("Edg/")) browser = "Edge";
+  else if (ua.includes("OPR/") || ua.includes("Opera/")) browser = "Opera";
+  else if (ua.includes("Chrome/") && ua.includes("Safari/")) browser = "Chrome";
+  else if (ua.includes("Safari/") && !ua.includes("Chrome/"))
+    browser = "Safari";
+  else if (ua.includes("curl/")) browser = "curl";
+
+  let os = "";
+  if (ua.includes("iPhone")) os = "iPhone";
+  else if (ua.includes("iPad")) os = "iPad";
+  else if (ua.includes("Android")) os = "Android";
+  else if (ua.includes("Macintosh") || ua.includes("Mac OS X")) os = "macOS";
+  else if (ua.includes("Windows")) os = "Windows";
+  else if (ua.includes("Linux")) os = "Linux";
+  else if (ua.includes("CrOS")) os = "ChromeOS";
+
+  return os ? `${browser} on ${os}` : browser;
+}
+
+/** Monitor icon for desktop sessions */
+const ICON_DESKTOP = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>`;
+
+/** Smartphone icon for mobile sessions */
+const ICON_MOBILE = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>`;
+
+function isMobileUA(ua: string | null): boolean {
+  if (!ua) return false;
+  return /iPhone|iPad|iPod|Android|Mobile/i.test(ua);
+}
+
+function SessionRow({ session }: { session: SessionInfo }) {
+  const { t } = useLingui();
+  const device = parseDevice(session.userAgent);
+  const icon = isMobileUA(session.userAgent) ? ICON_MOBILE : ICON_DESKTOP;
+
+  return (
+    <div class="py-4 flex items-start gap-4 border-b border-border last:border-b-0">
+      <span
+        class="text-muted-foreground mt-0.5 shrink-0"
+        dangerouslySetInnerHTML={{ __html: icon }}
+      />
+      <div class="flex-1 min-w-0">
+        <div class="font-medium flex items-center gap-2">
+          {device ??
+            t({
+              message: "Unknown device",
+              comment:
+                "@context: Fallback label when session device can't be identified",
+            })}
+          {session.isCurrent && (
+            <span class="badge text-xs">
+              {t({
+                message: "Current",
+                comment:
+                  "@context: Badge indicating the current active session",
+              })}
+            </span>
+          )}
+        </div>
+        <div class="text-sm text-muted-foreground mt-0.5">
+          {session.ipAddress && (
+            <>
+              <span>{session.ipAddress}</span>
+              <span class="mx-2">&middot;</span>
+            </>
+          )}
+          {t({
+            message: `Signed in ${formatDate(session.createdAt)}`,
+            comment: "@context: Session creation date",
+          })}
+        </div>
+      </div>
+      {!session.isCurrent && (
+        <button
+          type="button"
+          class="btn-sm-ghost text-destructive"
+          data-on:click__prevent={`@post('/settings/account/sessions/${session.token}/revoke')`}
+        >
+          {t({
+            message: "Revoke",
+            comment: "@context: Button to revoke a session",
+          })}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function SessionsContent({ sessions }: { sessions: SessionInfo[] }) {
+  const { t } = useLingui();
+
+  return (
+    <div class="flex flex-col gap-6 max-w-2xl">
+      <div>
+        <h2 class="text-lg font-medium mb-1">
+          {t({
+            message: "Active Sessions",
+            comment: "@context: Settings section heading for active sessions",
+          })}
+        </h2>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "These devices are currently signed in to your account. Revoke any session you don't recognize.",
+            comment: "@context: Description for session management",
+          })}
+        </p>
+      </div>
+
+      {sessions.length > 0 ? (
+        <div class="border border-border rounded-lg px-4">
+          {sessions.map((session) => (
+            <SessionRow key={session.token} session={session} />
+          ))}
+        </div>
+      ) : (
+        <p class="text-sm text-muted-foreground">
+          {t({
+            message: "No active sessions found.",
+            comment:
+              "@context: Empty state when no sessions exist (shouldn't normally appear)",
+          })}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/dash/settings/SettingsRootContent.tsx

@@ -60,7 +60,9 @@ const ICONS = {
   type: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>`,
   code: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
   arrowRightLeft: `<svg xmlns="http://www.w3.org/2000/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="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/></svg>`,
-  user: `<svg xmlns="http://www.w3.org/2000/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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+  lock: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+  key: `<svg xmlns="http://www.w3.org/2000/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.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>`,
+  shield: `<svg xmlns="http://www.w3.org/2000/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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>`,
 };
 
 // oklch-based colors for icon backgrounds
@@ -72,6 +74,7 @@ const COLORS = {
   pink: "oklch(0.6 0.2 350)",
   indigo: "oklch(0.5 0.2 275)",
   amber: "oklch(0.6 0.16 75)",
+  teal: "oklch(0.55 0.15 185)",
   gray: "oklch(0.55 0.01 250)",
 };
 
@@ -90,7 +93,7 @@ export function SettingsRootContent() {
         </div>
         <div class="settings-group">
           <SettingsItem
-            href="/dash/settings/general"
+            href="/settings/general"
             icon={ICONS.settings}
             color={COLORS.blue}
             name={t({
@@ -115,7 +118,7 @@ export function SettingsRootContent() {
         </div>
         <div class="settings-group">
           <SettingsItem
-            href="/dash/settings/avatar"
+            href="/settings/avatar"
             icon={ICONS.image}
             color={COLORS.purple}
             name={t({
@@ -128,7 +131,7 @@ export function SettingsRootContent() {
             })}
           />
           <SettingsItem
-            href="/dash/settings/navigation"
+            href="/settings/navigation"
             icon={ICONS.menu}
             color={COLORS.green}
             name={t({
@@ -141,7 +144,7 @@ export function SettingsRootContent() {
             })}
           />
           <SettingsItem
-            href="/dash/settings/color-theme"
+            href="/settings/color-theme"
             icon={ICONS.palette}
             color={COLORS.orange}
             name={t({
@@ -154,7 +157,7 @@ export function SettingsRootContent() {
             })}
           />
           <SettingsItem
-            href="/dash/settings/font-theme"
+            href="/settings/font-theme"
             icon={ICONS.type}
             color={COLORS.pink}
             name={t({
@@ -167,7 +170,7 @@ export function SettingsRootContent() {
             })}
           />
           <SettingsItem
-            href="/dash/settings/custom-css"
+            href="/settings/custom-css"
             icon={ICONS.code}
             color={COLORS.indigo}
             name={t({
@@ -192,16 +195,29 @@ export function SettingsRootContent() {
         </div>
         <div class="settings-group">
           <SettingsItem
-            href="/dash/settings/redirects"
+            href="/settings/custom-urls"
             icon={ICONS.arrowRightLeft}
             color={COLORS.amber}
             name={t({
-              message: "Redirects",
-              comment: "@context: Settings item — redirects settings",
+              message: "Custom URLs",
+              comment: "@context: Settings item — custom URL settings",
             })}
             description={t({
-              message: "URL redirects",
-              comment: "@context: Settings item description for redirects",
+              message: "Redirects and custom paths",
+              comment: "@context: Settings item description for custom URLs",
+            })}
+          />
+          <SettingsItem
+            href="/settings/api-tokens"
+            icon={ICONS.key}
+            color={COLORS.teal}
+            name={t({
+              message: "API Tokens",
+              comment: "@context: Settings item — API token settings",
+            })}
+            description={t({
+              message: "Bearer tokens for scripts and automation",
+              comment: "@context: Settings item description for API tokens",
             })}
           />
         </div>
@@ -217,20 +233,34 @@ export function SettingsRootContent() {
         </div>
         <div class="settings-group">
           <SettingsItem
-            href="/dash/settings/account"
-            icon={ICONS.user}
+            href="/settings/account"
+            icon={ICONS.shield}
             color={COLORS.gray}
             name={t({
               message: "Account",
               comment: "@context: Settings item — account settings",
             })}
             description={t({
-              message: "Profile, password",
+              message: "Sessions, password, export",
               comment: "@context: Settings item description for account",
             })}
           />
         </div>
       </div>
+
+      {/* Sign Out */}
+      <div class="pt-2 text-center">
+        <button
+          type="button"
+          data-on:click__prevent="@post('/signout')"
+          class="text-sm text-destructive hover:text-destructive/80 transition-colors"
+        >
+          {t({
+            message: "Sign Out",
+            comment: "@context: Settings link — sign out action",
+          })}
+        </button>
+      </div>
     </div>
   );
 }

package/src/ui/feed/LinkCard.tsx

@@ -6,13 +6,25 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
+import { StarRating } from "../shared/StarRating.js";
+import { PostFooter } from "../shared/PostFooter.js";
+import { PostStatusBadges } from "./PostStatusBadges.js";
+import { sanitizeUrl } from "../../lib/url.js";
 
-export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  // Extract domain from URL for display
+export const LinkCard: FC<TimelineCardProps> = ({
+  post,
+  mode = "feed",
+  display,
+}) => {
+  const isCompact = mode === "compact";
+  const isDetail = mode === "detail";
+  const articleClass = `h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : " feed-card feed-card-link"}`;
+
+  const safeUrl = post.url ? sanitizeUrl(post.url) : "";
   let domain: string | undefined;
-  if (post.url) {
+  if (safeUrl) {
     try {
-      domain = new URL(post.url).hostname.replace(/^www\./, "");
+      domain = new URL(safeUrl).hostname.replace(/^www\./, "");
     } catch {
       // Invalid URL, skip domain display
     }
@@ -20,53 +32,90 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
 
   return (
     <article
-      class={`h-entry${compact ? " feed-compact" : ""}`}
+      class={articleClass}
+      {...(isDetail ? { "data-page": "post" } : {})}
       data-post
       data-format="link"
+      data-post-id={post.id}
+      data-post-permalink={post.permalink}
+      {...(post.pinned ? { "data-post-pinned": "" } : {})}
+      {...(post.featured ? { "data-post-featured": "" } : {})}
+      data-post-visibility={post.visibility}
+      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
     >
-      {domain && (
-        <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
-          <svg
-            class="size-3"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-          >
-            <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-          </svg>
-          <span>{domain}</span>
-        </div>
-      )}
-      {post.title && (
-        <h2
-          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
-        >
+      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
+      {domain &&
+        (safeUrl ? (
           <a
-            href={post.url || post.permalink}
-            class="u-url hover:underline"
-            target={post.url ? "_blank" : undefined}
-            rel={post.url ? "noopener noreferrer" : undefined}
+            href={safeUrl}
+            class="feed-link-domain"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            {post.title}
+            <svg
+              class="feed-link-domain-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+            >
+              <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+            </svg>
+            <span>{domain}</span>
           </a>
-        </h2>
-      )}
-      {!compact && post.bodyHtml && (
+        ) : (
+          <div class="feed-link-domain">
+            <svg
+              class="feed-link-domain-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+            >
+              <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+            </svg>
+            <span>{domain}</span>
+          </div>
+        ))}
+      {post.title &&
+        (isDetail ? (
+          <h1 class="p-name feed-link-title text-2xl font-semibold mb-4">
+            <a
+              href={safeUrl || post.permalink}
+              class="u-url feed-link-title-link"
+              target={safeUrl ? "_blank" : undefined}
+              rel={safeUrl ? "noopener noreferrer" : undefined}
+            >
+              {post.title}
+            </a>
+          </h1>
+        ) : (
+          <h2
+            class={`p-name feed-link-title font-semibold ${isCompact ? "text-sm" : ""} mb-1`}
+          >
+            <a
+              href={safeUrl || post.permalink}
+              class="u-url feed-link-title-link"
+              target={safeUrl ? "_blank" : undefined}
+              rel={safeUrl ? "noopener noreferrer" : undefined}
+            >
+              {post.title}
+            </a>
+          </h2>
+        ))}
+      {!isCompact && post.bodyHtml && (
         <div
-          class="e-content prose text-muted-foreground"
+          class="e-content prose text-muted-foreground feed-link-summary"
           data-post-body
           dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
         />
       )}
-      <footer class="mt-2 text-xs text-muted-foreground" data-post-meta>
-        <a href={post.permalink} class="hover:underline">
-          <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtFormatted}
-          </time>
-        </a>
-      </footer>
+      {!isCompact && !display?.hideRating && (
+        <StarRating rating={post.rating} />
+      )}
+      <PostFooter post={post} detail={isDetail} display={display?.footer} />
     </article>
   );
 };

package/src/ui/feed/NoteCard.tsx

@@ -8,39 +8,59 @@
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
+import { StarRating } from "../shared/StarRating.js";
+import { PostFooter } from "../shared/PostFooter.js";
+import { PostStatusBadges } from "./PostStatusBadges.js";
 
-export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+export const NoteCard: FC<TimelineCardProps> = ({
+  post,
+  mode = "feed",
+  display,
+}) => {
+  const isCompact = mode === "compact";
+  const isDetail = mode === "detail";
   const isArticle = !!post.title;
-  const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
+  const displayHtml = isDetail || !isArticle ? post.bodyHtml : post.summaryHtml;
 
   return (
     <article
-      class={`h-entry${compact ? " feed-compact" : ""}`}
+      class={`h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : ""}`}
+      {...(isDetail ? { "data-page": "post" } : {})}
       data-post
       data-format="note"
+      data-post-id={post.id}
+      data-post-permalink={post.permalink}
+      {...(post.pinned ? { "data-post-pinned": "" } : {})}
+      {...(post.featured ? { "data-post-featured": "" } : {})}
+      data-post-visibility={post.visibility}
+      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
     >
-      {isArticle && (
-        <h2
-          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
-        >
-          <a href={post.permalink} class="u-url hover:underline">
-            {post.title}
-          </a>
-        </h2>
-      )}
+      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
+      {isArticle &&
+        (isDetail ? (
+          <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
+        ) : (
+          <h2
+            class={`p-name font-semibold ${isCompact ? "text-sm" : "text-lg"} mb-1`}
+          >
+            <a href={post.permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        ))}
       {displayHtml && (
         <div
-          class={`e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`}
+          class={`e-content prose ${isCompact ? "prose-sm" : isArticle && !isDetail ? "text-muted-foreground" : ""}`}
           data-post-body
           dangerouslySetInnerHTML={{ __html: displayHtml }}
         />
       )}
-      {!compact && post.media.length > 0 && (
+      {!isCompact && post.media.length > 0 && (
         <div class="mt-3" data-post-media>
           <MediaGallery attachments={post.media} />
         </div>
       )}
-      {!compact && isArticle && post.summaryHasMore && (
+      {!isDetail && !isCompact && isArticle && post.summaryHasMore && (
         <a
           href={`${post.permalink}#continue`}
           class="text-sm text-muted-foreground hover:underline mt-1 inline-block"
@@ -48,16 +68,10 @@ export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           Continue →
         </a>
       )}
-      <footer class="mt-2" data-post-meta>
-        <a
-          href={post.permalink}
-          class="u-url text-xs text-muted-foreground hover:underline"
-        >
-          <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtFormatted}
-          </time>
-        </a>
-      </footer>
+      {!isCompact && !display?.hideRating && (
+        <StarRating rating={post.rating} />
+      )}
+      <PostFooter post={post} detail={isDetail} display={display?.footer} />
     </article>
   );
 };

package/src/ui/feed/PostStatusBadges.tsx

@@ -0,0 +1,67 @@
+/**
+ * Post Status Badges
+ *
+ * Renders pinned / featured indicators at the top of a post card.
+ * All badges are always rendered in the DOM; visibility is driven by CSS
+ * selectors on the parent article's data attributes (data-post-pinned,
+ * data-post-featured). This lets the post menu toggle
+ * badges instantly without a page reload.
+ */
+
+import type { FC } from "hono/jsx";
+
+export const PostStatusBadges: FC = () => {
+  return (
+    <div class="post-status-badges">
+      <span class="post-status-badge post-status-pinned">
+        <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"
+        >
+          <line x1="12" x2="12" y1="17" y2="22" />
+          <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />
+        </svg>
+        Pinned
+      </span>
+      <span class="post-status-separator" aria-hidden="true">
+        &middot;
+      </span>
+      <span class="post-status-badge post-status-featured">
+        <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="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" />
+        </svg>
+        Featured
+      </span>
+      <span class="post-status-badge post-status-private">
+        <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.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>
+        Private
+      </span>
+    </div>
+  );
+};