"use client"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var dynamic_component_exports = {}; __export(dynamic_component_exports, { default: () => dynamic_component_default }); module.exports = __toCommonJS(dynamic_component_exports); var import_react = __toESM(require("react")); var import_material = require("@mui/material"); var import_styles = require("@mui/material/styles"); var import_react_markdown = __toESM(require("react-markdown")); var import_firestore = require("firebase/firestore"); var import_config = require("@/app/lib/firebase/config"); var import_AuthContext = require("@/app/contexts/AuthContext"); var import_communicationStore = require("@/app/stores/communicationStore"); var import_Lock = __toESM(require("@mui/icons-material/Lock")); var import_moment = __toESM(require("moment")); var import_uuid = require("uuid"); var import_Add = __toESM(require("@mui/icons-material/Add")); var import_Edit = __toESM(require("@mui/icons-material/Edit")); var import_Publish = __toESM(require("@mui/icons-material/Publish")); var import_UnpublishedOutlined = __toESM(require("@mui/icons-material/UnpublishedOutlined")); var import_Article = __toESM(require("@mui/icons-material/Article")); var import_Visibility = __toESM(require("@mui/icons-material/Visibility")); var import_DeleteOutline = __toESM(require("@mui/icons-material/DeleteOutline")); var import_WarningAmber = __toESM(require("@mui/icons-material/WarningAmber")); const BRAND = { primary: "#5878A6", primaryDark: "#456091", accent: "#9ABBEB", deep: "#294C6C", deepDark: "#1E3A54", ink: "#141414", surface: "#FFFFFF", surfaceAlt: "#F7F7F7", muted: "#5E5E5E", line: "#E4E9F0", onDeep: "#EAF1FB", onDeepMuted: "rgba(234,241,251,0.72)", success: "#2E7D5B" }; const FONT = { display: "'Fjalla One', 'Oswald', Impact, sans-serif", eyebrow: "'Oswald', 'Inter', system-ui, sans-serif", body: "'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif" }; const UI = { bg: "#0F1217", panel: "#171C24", panelAlt: "#1F2630", line: "rgba(234,241,251,0.13)", lineStrong: "rgba(234,241,251,0.30)", text: "#EAF1FB", muted: "rgba(234,241,251,0.62)", accent: BRAND.accent, onAccent: "#10131A", success: "#5FD3A0", danger: "#F2857A", warn: "#E7B76B" }; const FIELD_SX = { "& .MuiInputBase-root": { color: UI.text, backgroundColor: (0, import_styles.alpha)(UI.text, 0.04) }, "& .MuiInputLabel-root": { color: UI.muted }, "& .MuiInputLabel-root.Mui-focused": { color: UI.accent }, "& .MuiOutlinedInput-notchedOutline": { borderColor: UI.line }, "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: UI.lineStrong }, "& .Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: UI.accent }, "& .MuiFormHelperText-root": { color: UI.muted } }; const DIALOG_PAPER = { sx: { bgcolor: UI.panel, backgroundImage: "none", color: UI.text } }; const BLOG_VIEW = "RigitlA8z9AFfY0Fv0W3"; const PUBLISH_NOTIFY_TO = "aaron@calimtg.com"; const PUBLISH_NOTIFY_FROM = "noreply@hiddenhomecost.com"; const PUBLIC_BLOG_BASE = "https://hiddenhomecost.com/hhc-blog"; function useBrandFonts() { (0, import_react.useEffect)(() => { if (typeof document === "undefined" || document.getElementById("hhc-fonts")) return; const l = document.createElement("link"); l.id = "hhc-fonts"; l.rel = "stylesheet"; l.href = "https://fonts.googleapis.com/css2?family=Fjalla+One&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"; document.head.appendChild(l); }, []); } function slugify(s) { const full = String(s || "").toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, ""); if (full.length <= 80) return full; const cut = full.slice(0, 80); const lastDash = cut.lastIndexOf("-"); return (lastDash > 40 ? cut.slice(0, lastDash) : cut).replace(/-+$/, ""); } function escapeHtml(s) { return String(s || "").replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); } function blurbFor(row) { const raw = String(row.excerpt || row.body || "").replace(/[#*_>()\[\]`]/g, "").replace(/\s+/g, " ").trim(); const words = raw.split(" ").filter(Boolean); return words.length > 45 ? words.slice(0, 45).join(" ") + "…" : raw; } const EMPTY_DRAFT = { title: "", slug: "", excerpt: "", body: "", hero_url: "", seo_title: "", seo_desc: "", author_name: "HiddenHomeCost", tags: "" }; function StatusChip({ status }) { const published = status === "published"; return /* @__PURE__ */ import_react.default.createElement(import_material.Chip, { size: "small", label: published ? "Published" : "Draft", sx: mergeStyles("112-4", { fontWeight: 600, fontFamily: FONT.body, bgcolor: (0, import_styles.alpha)(published ? UI.success : UI.accent, 0.18), color: published ? UI.success : UI.accent }), "data-grok-id": "112-4", "data-grok-line": "112", "data-grok-end-line": "113" }); } function PreviewDialog({ post, onClose, onEdit, onToggleStatus, onDelete }) { const p = post || {}; const published = (p.status || "draft") === "published"; const d = p.created_at ? (0, import_moment.default)(p.created_at.toDate ? p.created_at.toDate() : p.created_at) : null; return /* @__PURE__ */ import_react.default.createElement(import_material.Dialog, { open: !!post, onClose, maxWidth: "md", fullWidth: true, scroll: "paper", PaperProps: DIALOG_PAPER, "data-grok-id": "125-4", sx: mergeStyles("125-4", {}), "data-grok-line": "125", "data-grok-end-line": "182" }, /* @__PURE__ */ import_react.default.createElement(import_material.DialogTitle, { sx: mergeStyles("126-6", { pb: 1 }), "data-grok-id": "126-6", "data-grok-line": "126", "data-grok-end-line": "136" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: mergeStyles("127-8", { mb: 1 }), "data-grok-id": "127-8", "data-grok-line": "127", "data-grok-end-line": "132" }, /* @__PURE__ */ import_react.default.createElement(StatusChip, { status: p.status || "draft", "data-grok-id": "128-10", sx: mergeStyles("128-10", {}), "data-grok-line": "128", "data-grok-end-line": "128" }), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("129-10", { fontSize: 12, color: UI.muted, fontFamily: FONT.body }), "data-grok-id": "129-10", "data-grok-line": "129", "data-grok-end-line": "131" }, "/", p.slug || "(no slug)", d ? " · " + d.format("MMM D, YYYY") : "", p.author_name ? " · " + p.author_name : "")), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("133-8", { fontFamily: FONT.display, fontSize: 28, lineHeight: 1.15, color: UI.text }), "data-grok-id": "133-8", "data-grok-line": "133", "data-grok-end-line": "135" }, p.title || "(untitled)")), /* @__PURE__ */ import_react.default.createElement(import_material.DialogContent, { dividers: true, sx: mergeStyles("137-6", { borderColor: UI.line }), "data-grok-id": "137-6", "data-grok-line": "137", "data-grok-end-line": "171" }, p.hero_url ? /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "img", src: p.hero_url, alt: "", sx: mergeStyles("139-10", { width: "100%", maxHeight: 260, objectFit: "cover", borderRadius: 2, mb: 2 }), "data-grok-id": "139-10", "data-grok-line": "139", "data-grok-end-line": "140" }) : null, p.excerpt ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("143-10", { fontFamily: FONT.body, fontSize: 16, fontStyle: "italic", color: UI.muted, mb: 2.5 }), "data-grok-id": "143-10", "data-grok-line": "143", "data-grok-end-line": "145" }, p.excerpt) : null, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: mergeStyles("147-8", { fontFamily: FONT.body, fontSize: 16, lineHeight: 1.75, color: UI.text, "& h1, & h2, & h3": { fontFamily: FONT.display, lineHeight: 1.2, mt: 3, mb: 1.25, color: UI.text }, "& h2": { fontSize: 24 }, "& h3": { fontSize: 19 }, "& p": { mb: 2 }, "& ul, & ol": { pl: 3, mb: 2 }, "& li": { mb: 0.75 }, "& a": { color: UI.accent, textDecoration: "underline", wordBreak: "break-word" }, "& blockquote": { borderLeft: "3px solid " + UI.line, pl: 2, ml: 0, fontStyle: "italic", color: UI.muted }, "& code": { backgroundColor: (0, import_styles.alpha)(UI.text, 0.08), px: 0.75, borderRadius: 1 }, "& table": { width: "100%", borderCollapse: "collapse", mb: 2 }, "& th, & td": { border: "1px solid " + UI.line, p: 1, textAlign: "left" } }), "data-grok-id": "147-8", "data-grok-line": "147", "data-grok-end-line": "159" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { "data-grok-id": "158-10", sx: mergeStyles("158-10", {}), "data-grok-line": "158", "data-grok-end-line": "158" }, p.body || "")), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: mergeStyles("160-8", { mt: 3, pt: 2, borderTop: "1px solid " + UI.line }), "data-grok-id": "160-8", "data-grok-line": "160", "data-grok-end-line": "170" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("161-10", { fontFamily: FONT.body, fontSize: 12.5, color: UI.muted }), "data-grok-id": "161-10", "data-grok-line": "161", "data-grok-end-line": "163" }, "SEO title: ", p.seo_title || "(falls back to the title)"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("164-10", { fontFamily: FONT.body, fontSize: 12.5, color: UI.muted }), "data-grok-id": "164-10", "data-grok-line": "164", "data-grok-end-line": "166" }, "SEO description: ", p.seo_desc || "(falls back to the excerpt)"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("167-10", { fontFamily: FONT.body, fontSize: 12.5, color: UI.muted }), "data-grok-id": "167-10", "data-grok-line": "167", "data-grok-end-line": "169" }, "Tags: ", p.tags || "—", p.backlink_page ? " · backlink: " + p.backlink_page : ""))), /* @__PURE__ */ import_react.default.createElement(import_material.DialogActions, { sx: mergeStyles("172-6", { p: 2 }), "data-grok-id": "172-6", "data-grok-line": "172", "data-grok-end-line": "181" }, /* @__PURE__ */ import_react.default.createElement(import_material.Button, { onClick: () => onDelete(p), sx: mergeStyles("173-8", { textTransform: "none", color: UI.danger, mr: "auto" }), "data-grok-id": "173-8", "data-grok-line": "173", "data-grok-end-line": "173" }, "Delete"), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { onClick: onClose, sx: mergeStyles("174-8", { textTransform: "none", color: UI.muted }), "data-grok-id": "174-8", "data-grok-line": "174", "data-grok-end-line": "174" }, "Close"), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { variant: "outlined", onClick: () => onEdit(p), sx: mergeStyles("175-8", { textTransform: "none", color: UI.text, borderColor: UI.lineStrong, "&:hover": { borderColor: UI.accent } }), "data-grok-id": "175-8", "data-grok-line": "175", "data-grok-end-line": "176" }, "Edit"), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { variant: "contained", onClick: () => onToggleStatus(p), sx: mergeStyles("177-8", { textTransform: "none", bgcolor: published ? UI.accent : UI.success, color: UI.onAccent, "&:hover": { bgcolor: published ? "#B4CDF2" : "#7FE0B7" } }), "data-grok-id": "177-8", "data-grok-line": "177", "data-grok-end-line": "180" }, published ? "Unpublish" : "Publish"))); } function ConfirmDeleteDialog({ post, onClose, onConfirm, busy }) { const p = post || {}; const published = (p.status || "draft") === "published"; return /* @__PURE__ */ import_react.default.createElement(import_material.Dialog, { open: !!post, onClose, maxWidth: "xs", fullWidth: true, PaperProps: DIALOG_PAPER, "data-grok-id": "192-4", sx: mergeStyles("192-4", {}), "data-grok-line": "192", "data-grok-end-line": "215" }, /* @__PURE__ */ import_react.default.createElement(import_material.DialogTitle, { sx: mergeStyles("193-6", { fontFamily: FONT.display, fontSize: 22, color: UI.text }), "data-grok-id": "193-6", "data-grok-line": "193", "data-grok-end-line": "193" }, "Delete this post?"), /* @__PURE__ */ import_react.default.createElement(import_material.DialogContent, { "data-grok-id": "194-6", sx: mergeStyles("194-6", {}), "data-grok-line": "194", "data-grok-end-line": "207" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("195-8", { fontFamily: FONT.body, fontWeight: 600, color: UI.text, mb: 1 }), "data-grok-id": "195-8", "data-grok-line": "195", "data-grok-end-line": "195" }, p.title || "(untitled)"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("196-8", { fontFamily: FONT.body, fontSize: 13.5, color: UI.muted }), "data-grok-id": "196-8", "data-grok-line": "196", "data-grok-end-line": "198" }, "This removes the post permanently. It cannot be undone."), published ? /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start", sx: mergeStyles("200-10", { mt: 1.5 }), "data-grok-id": "200-10", "data-grok-line": "200", "data-grok-end-line": "205" }, /* @__PURE__ */ import_react.default.createElement(import_WarningAmber.default, { fontSize: "small", sx: mergeStyles("201-12", { color: UI.warn, mt: "2px" }), "data-grok-id": "201-12", "data-grok-line": "201", "data-grok-end-line": "201" }), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("202-12", { fontFamily: FONT.body, fontSize: 13, color: UI.warn }), "data-grok-id": "202-12", "data-grok-line": "202", "data-grok-end-line": "204" }, "This post is LIVE. Deleting it takes the public page down and breaks any link to /", p.slug || "", ".")) : null), /* @__PURE__ */ import_react.default.createElement(import_material.DialogActions, { sx: mergeStyles("208-6", { p: 2 }), "data-grok-id": "208-6", "data-grok-line": "208", "data-grok-end-line": "214" }, /* @__PURE__ */ import_react.default.createElement(import_material.Button, { onClick: onClose, sx: mergeStyles("209-8", { textTransform: "none", color: UI.muted }), "data-grok-id": "209-8", "data-grok-line": "209", "data-grok-end-line": "209" }, "Cancel"), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { variant: "contained", disabled: busy, onClick: () => onConfirm(p.id), sx: mergeStyles("210-8", { textTransform: "none", bgcolor: UI.danger, color: UI.onAccent, "&:hover": { bgcolor: "#F6A198" } }), "data-grok-id": "210-8", "data-grok-line": "210", "data-grok-end-line": "213" }, busy ? /* @__PURE__ */ import_react.default.createElement(import_material.CircularProgress, { size: 18, "data-grok-id": "212-18", sx: mergeStyles("212-18", {}), "data-grok-line": "212", "data-grok-end-line": "212" }) : "Delete permanently"))); } function EditDialog({ open, onClose, initial, onSave, saving }) { const [f, setF] = (0, import_react.useState)(EMPTY_DRAFT); const [err, setErr] = (0, import_react.useState)(""); (0, import_react.useEffect)(() => { if (open) { setF({ ...EMPTY_DRAFT, ...initial || {} }); setErr(""); } }, [open, initial]); const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value })); const handleSave = (publish) => { for (const k of ["title", "body"]) { if (!String(f[k] || "").trim()) { setErr('"' + k + '" is required.'); return; } } onSave({ ...f, slug: f.slug || slugify(f.title) }, publish); }; return /* @__PURE__ */ import_react.default.createElement(import_material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true, PaperProps: DIALOG_PAPER, "data-grok-id": "233-4", sx: mergeStyles("233-4", {}), "data-grok-line": "233", "data-grok-end-line": "263" }, /* @__PURE__ */ import_react.default.createElement(import_material.DialogTitle, { sx: mergeStyles("234-6", { fontWeight: 700, fontFamily: FONT.eyebrow, color: UI.text }), "data-grok-id": "234-6", "data-grok-line": "234", "data-grok-end-line": "234" }, initial?.id ? "Edit post" : "New draft"), /* @__PURE__ */ import_react.default.createElement(import_material.DialogContent, { "data-grok-id": "235-6", sx: mergeStyles("235-6", {}), "data-grok-line": "235", "data-grok-end-line": "251" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { spacing: 1.5, sx: mergeStyles("236-8", { mt: 0.5 }), "data-grok-id": "236-8", "data-grok-line": "236", "data-grok-end-line": "250" }, /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "Title", value: f.title, onChange: set("title"), fullWidth: true, sx: mergeStyles("237-10", FIELD_SX), "data-grok-id": "237-10", "data-grok-line": "237", "data-grok-end-line": "237" }), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "URL slug", value: f.slug, onChange: set("slug"), fullWidth: true, sx: mergeStyles("238-10", FIELD_SX), helperText: "Leave blank to auto-generate from the title", "data-grok-id": "238-10", "data-grok-line": "238", "data-grok-end-line": "239" }), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "Excerpt", value: f.excerpt, onChange: set("excerpt"), fullWidth: true, multiline: true, minRows: 2, sx: mergeStyles("240-10", FIELD_SX), "data-grok-id": "240-10", "data-grok-line": "240", "data-grok-end-line": "240" }), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "Body (Markdown)", value: f.body, onChange: set("body"), fullWidth: true, multiline: true, minRows: 10, sx: mergeStyles("241-10", FIELD_SX), "data-grok-id": "241-10", "data-grok-line": "241", "data-grok-end-line": "241" }), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "Hero image URL", value: f.hero_url, onChange: set("hero_url"), fullWidth: true, sx: mergeStyles("242-10", FIELD_SX), "data-grok-id": "242-10", "data-grok-line": "242", "data-grok-end-line": "242" }), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1.5, "data-grok-id": "243-10", sx: mergeStyles("243-10", {}), "data-grok-line": "243", "data-grok-end-line": "246" }, /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "SEO title", value: f.seo_title, onChange: set("seo_title"), fullWidth: true, sx: mergeStyles("244-12", FIELD_SX), "data-grok-id": "244-12", "data-grok-line": "244", "data-grok-end-line": "244" }), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "Author", value: f.author_name, onChange: set("author_name"), fullWidth: true, sx: mergeStyles("245-12", FIELD_SX), "data-grok-id": "245-12", "data-grok-line": "245", "data-grok-end-line": "245" })), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "SEO description", value: f.seo_desc, onChange: set("seo_desc"), fullWidth: true, multiline: true, minRows: 2, sx: mergeStyles("247-10", FIELD_SX), "data-grok-id": "247-10", "data-grok-line": "247", "data-grok-end-line": "247" }), /* @__PURE__ */ import_react.default.createElement(import_material.TextField, { size: "small", label: "Tags (comma-separated)", value: f.tags, onChange: set("tags"), fullWidth: true, sx: mergeStyles("248-10", FIELD_SX), "data-grok-id": "248-10", "data-grok-line": "248", "data-grok-end-line": "248" }), err && /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("249-18", { color: UI.danger, fontSize: 13, fontFamily: FONT.body }), "data-grok-id": "249-18", "data-grok-line": "249", "data-grok-end-line": "249" }, err))), /* @__PURE__ */ import_react.default.createElement(import_material.DialogActions, { sx: mergeStyles("252-6", { p: 2 }), "data-grok-id": "252-6", "data-grok-line": "252", "data-grok-end-line": "262" }, /* @__PURE__ */ import_react.default.createElement(import_material.Button, { onClick: onClose, sx: mergeStyles("253-8", { textTransform: "none", color: UI.muted }), "data-grok-id": "253-8", "data-grok-line": "253", "data-grok-end-line": "253" }, "Cancel"), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { variant: "outlined", disabled: saving, onClick: () => handleSave(false), sx: mergeStyles("254-8", { textTransform: "none", color: UI.text, borderColor: UI.lineStrong, "&:hover": { borderColor: UI.accent } }), "data-grok-id": "254-8", "data-grok-line": "254", "data-grok-end-line": "257" }, saving ? /* @__PURE__ */ import_react.default.createElement(import_material.CircularProgress, { size: 18, "data-grok-id": "256-20", sx: mergeStyles("256-20", {}), "data-grok-line": "256", "data-grok-end-line": "256" }) : "Save draft"), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { variant: "contained", disabled: saving, onClick: () => handleSave(true), sx: mergeStyles("258-8", { textTransform: "none", bgcolor: UI.accent, color: UI.onAccent, "&:hover": { bgcolor: "#B4CDF2" } }), "data-grok-id": "258-8", "data-grok-line": "258", "data-grok-end-line": "261" }, saving ? /* @__PURE__ */ import_react.default.createElement(import_material.CircularProgress, { size: 18, "data-grok-id": "260-20", sx: mergeStyles("260-20", {}), "data-grok-line": "260", "data-grok-end-line": "260" }) : "Save & publish"))); } const HhcBlogAdmin = (0, import_react.forwardRef)(function HhcBlogAdmin2({ containerHeight }, ref) { useBrandFonts(); const { user } = (0, import_AuthContext.useAuth)(); const sendMessage = (0, import_communicationStore.useCommunicationStore)((s) => s.sendMessage); const [posts, setPosts] = (0, import_react.useState)([]); const [tab, setTab] = (0, import_react.useState)("draft"); const [editing, setEditing] = (0, import_react.useState)(null); const [dialogOpen, setDialogOpen] = (0, import_react.useState)(false); const [previewing, setPreviewing] = (0, import_react.useState)(null); const [deleting, setDeleting] = (0, import_react.useState)(null); const [deleteBusy, setDeleteBusy] = (0, import_react.useState)(false); const [saving, setSaving] = (0, import_react.useState)(false); const [snack, setSnack] = (0, import_react.useState)(null); const postsRef = (0, import_react.useRef)(posts); postsRef.current = posts; (0, import_react.useEffect)(() => { const unsub = (0, import_firestore.onSnapshot)((0, import_firestore.collection)(import_config.db, BLOG_VIEW, "rows"), (snap) => { setPosts(snap.docs.map((d) => ({ id: d.id, ...d.data() }))); }); return () => unsub(); }, []); const writePost = (0, import_react.useCallback)(async (fields, existingId) => { for (const k of ["title", "body"]) { if (!String(fields[k] || "").trim()) return { error: '"' + k + '" is required.' }; } const slug = fields.slug ? slugify(fields.slug) : slugify(fields.title); if (!slug) return { error: "Could not derive a slug from the title — pass one explicitly." }; if (existingId) { const row = postsRef.current.find((r2) => r2.id === existingId); if (!row) return { error: 'No post with id "' + existingId + '". Use an id from getState().' }; await (0, import_firestore.updateDoc)((0, import_firestore.doc)(import_config.db, BLOG_VIEW, "rows", existingId), { ...fields, slug, modifiedAt: import_firestore.Timestamp.now() }); return { ok: true, id: existingId }; } const r = await (0, import_firestore.addDoc)((0, import_firestore.collection)(import_config.db, BLOG_VIEW, "rows"), { Id: "hhcpost_" + (0, import_uuid.v4)().slice(0, 8), title: fields.title, slug, excerpt: fields.excerpt || "", body: fields.body, hero_url: fields.hero_url || "", seo_title: fields.seo_title || fields.title, seo_desc: fields.seo_desc || fields.excerpt || "", author_name: fields.author_name || "HiddenHomeCost", tags: fields.tags || "", status: "draft", created_at: import_firestore.Timestamp.now(), published_at: null, backlink_page: fields.backlink_page || "" }); return { ok: true, id: r.id }; }, []); const removePost = (0, import_react.useCallback)(async (id) => { const row = postsRef.current.find((r) => r.id === id); if (!row) return { error: 'No post with id "' + id + '". Use an id from getState().' }; await (0, import_firestore.deleteDoc)((0, import_firestore.doc)(import_config.db, BLOG_VIEW, "rows", id)); return { ok: true, id, deleted: row.title || "(untitled)" }; }, []); const notifyPublished = (0, import_react.useCallback)(async (row) => { try { const url = PUBLIC_BLOG_BASE + "?post=" + encodeURIComponent(row.slug || ""); const blurb = blurbFor(row); const html = ['

', '

New post published

', '

' + escapeHtml(row.title || "Untitled post") + "

", '

' + escapeHtml(blurb) + "

", '

Read it on hiddenhomecost.com →

', '

' + url + "

", "

"].join(""); await sendMessage({ to: PUBLISH_NOTIFY_TO, subject: "Published: " + (row.title || "New HiddenHomeCost post"), html, fromAlias: PUBLISH_NOTIFY_FROM, type: "email" }); } catch (e) { } }, [sendMessage]); const setStatus = (0, import_react.useCallback)(async (id, status) => { if (!["draft", "published"].includes(status)) return { error: "status must be 'draft' or 'published'." }; const row = postsRef.current.find((r) => r.id === id); if (!row) return { error: 'No post with id "' + id + '". Use an id from getState().' }; const isNewlyPublished = status === "published" && row.status !== "published"; await (0, import_firestore.updateDoc)((0, import_firestore.doc)(import_config.db, BLOG_VIEW, "rows", id), { status, published_at: status === "published" ? import_firestore.Timestamp.now() : row.published_at, modifiedAt: import_firestore.Timestamp.now() }); if (isNewlyPublished) notifyPublished(row); return { ok: true, id, status }; }, [notifyPublished]); const handleDialogSave = async (fields, publish) => { setSaving(true); const r = await writePost(fields, editing?.id); if (r.error) { setSnack(r.error); setSaving(false); return; } if (publish) await setStatus(r.id, "published"); setSaving(false); setDialogOpen(false); setEditing(null); setSnack(publish ? "Published." : "Draft saved."); }; const handleConfirmDelete = async (id) => { setDeleteBusy(true); const r = await removePost(id); setDeleteBusy(false); setDeleting(null); if (r.error) { setSnack(r.error); return; } setPreviewing((cur) => cur && cur.id === id ? null : cur); setSnack('Deleted "' + r.deleted + '".'); }; const filtered = tab === "all" ? posts : posts.filter((p) => (p.status || "draft") === tab); const counts = posts.reduce((a, p) => { const k = p.status || "draft"; a[k] = (a[k] || 0) + 1; return a; }, {}); (0, import_react.useImperativeHandle)(ref, () => ({ getState: () => ({ counts: { draft: counts.draft || 0, published: counts.published || 0 }, drafts: postsRef.current.filter((p) => (p.status || "draft") === "draft").map((p) => ({ id: p.id, title: p.title, created_at: p.created_at })) }), actions: { // Creates a new post as a draft — NEVER auto-publishes. A human reviews and calls // publishPost separately. body should be an ORIGINAL post synthesized from research // across multiple sources (never closely paraphrased from any single external article) // in HiddenHomeCost's plain-English, ownership-cost-focused voice. createDraftPost: (fields) => writePost(fields || {}, null), updatePost: (id, fields) => { if (!id) return Promise.resolve({ error: "id is required — use an id from getState().drafts." }); return writePost(fields || {}, id); }, getPost: (id) => { const row = postsRef.current.find((r) => r.id === id); return row ? { ok: true, post: row } : { error: 'No post with id "' + id + '".' }; }, publishPost: (id) => setStatus(id, "published"), unpublishPost: (id) => setStatus(id, "draft"), // Permanent. Only call this when the human has named the post to remove. deletePost: (id) => { if (!id) return Promise.resolve({ error: "id is required — use an id from getState().drafts." }); return removePost(id); } } }), [counts.draft, counts.published, writePost, setStatus, removePost]); if (!user) { return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: mergeStyles("414-6", { height: containerHeight + "px", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: UI.bg, p: 3 }), "data-grok-id": "414-6", "data-grok-line": "414", "data-grok-end-line": "422" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { spacing: 1.5, alignItems: "center", sx: mergeStyles("415-8", { textAlign: "center", maxWidth: 340 }), "data-grok-id": "415-8", "data-grok-line": "415", "data-grok-end-line": "421" }, /* @__PURE__ */ import_react.default.createElement(import_Lock.default, { sx: mergeStyles("416-10", { fontSize: 30, color: UI.muted }), "data-grok-id": "416-10", "data-grok-line": "416", "data-grok-end-line": "416" }), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("417-10", { fontWeight: 700, fontSize: 17, color: UI.text, fontFamily: FONT.display }), "data-grok-id": "417-10", "data-grok-line": "417", "data-grok-end-line": "417" }, "Sign in required"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("418-10", { fontSize: 13.5, color: UI.muted, fontFamily: FONT.body }), "data-grok-id": "418-10", "data-grok-line": "418", "data-grok-end-line": "420" }, "This is HiddenHomeCost's internal blog tool. Sign in to your team account to view or publish drafts."))); } return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: mergeStyles("427-4", { height: containerHeight + "px", overflowY: "auto", bgcolor: UI.bg, p: { xs: 2, md: 3 } }), "data-grok-id": "427-4", "data-grok-line": "427", "data-grok-end-line": "514" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", alignItems: "center", spacing: 1.5, sx: mergeStyles("428-6", { mb: 2 }), "data-grok-id": "428-6", "data-grok-line": "428", "data-grok-end-line": "436" }, /* @__PURE__ */ import_react.default.createElement(import_Article.default, { sx: mergeStyles("429-8", { color: UI.accent, fontSize: 26 }), "data-grok-id": "429-8", "data-grok-line": "429", "data-grok-end-line": "429" }), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: mergeStyles("430-8", { flex: 1 }), "data-grok-id": "430-8", "data-grok-line": "430", "data-grok-end-line": "433" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("431-10", { fontWeight: 700, fontSize: 20, color: UI.text, fontFamily: FONT.display }), "data-grok-id": "431-10", "data-grok-line": "431", "data-grok-end-line": "431" }, "HiddenHomeCost blog — drafts & publishing"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("432-10", { fontSize: 13, color: UI.muted, fontFamily: FONT.body }), "data-grok-id": "432-10", "data-grok-line": "432", "data-grok-end-line": "432" }, "Nothing goes live until you publish it here.")), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { variant: "contained", startIcon: /* @__PURE__ */ import_react.default.createElement(import_Add.default, { "data-grok-id": "434-47", sx: mergeStyles("434-47", {}), "data-grok-line": "434", "data-grok-end-line": "434" }), onClick: () => { setEditing({}); setDialogOpen(true); }, sx: mergeStyles("434-8", { textTransform: "none", bgcolor: UI.accent, color: UI.onAccent, fontWeight: 600, "&:hover": { bgcolor: "#B4CDF2" } }), "data-grok-id": "434-8", "data-grok-line": "434", "data-grok-end-line": "435" }, "New draft")), /* @__PURE__ */ import_react.default.createElement(import_material.Tabs, { value: tab, onChange: (_e, v) => setTab(v), sx: mergeStyles("438-6", { mb: 2, borderBottom: "1px solid " + UI.line, "& .MuiTab-root": { color: UI.muted, textTransform: "none", fontFamily: FONT.body }, "& .MuiTab-root.Mui-selected": { color: UI.accent }, "& .MuiTabs-indicator": { backgroundColor: UI.accent } }), "data-grok-id": "438-6", "data-grok-line": "438", "data-grok-end-line": "448" }, /* @__PURE__ */ import_react.default.createElement(import_material.Tab, { value: "draft", label: "Drafts (" + (counts.draft || 0) + ")", "data-grok-id": "445-8", sx: mergeStyles("445-8", {}), "data-grok-line": "445", "data-grok-end-line": "445" }), /* @__PURE__ */ import_react.default.createElement(import_material.Tab, { value: "published", label: "Published (" + (counts.published || 0) + ")", "data-grok-id": "446-8", sx: mergeStyles("446-8", {}), "data-grok-line": "446", "data-grok-end-line": "446" }), /* @__PURE__ */ import_react.default.createElement(import_material.Tab, { value: "all", label: "All", "data-grok-id": "447-8", sx: mergeStyles("447-8", {}), "data-grok-line": "447", "data-grok-end-line": "447" })), filtered.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: mergeStyles("451-8", { textAlign: "center", py: 6 }), "data-grok-id": "451-8", "data-grok-line": "451", "data-grok-end-line": "453" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("452-10", { color: UI.muted, fontFamily: FONT.body }), "data-grok-id": "452-10", "data-grok-line": "452", "data-grok-end-line": "452" }, "Nothing here yet.")) : /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { spacing: 1.25, "data-grok-id": "455-8", sx: mergeStyles("455-8", {}), "data-grok-line": "455", "data-grok-end-line": "494" }, [...filtered].sort((a, b) => (b.created_at?.seconds || 0) - (a.created_at?.seconds || 0)).map((p) => /* @__PURE__ */ import_react.default.createElement(import_material.Box, { key: p.id, sx: mergeStyles("457-12", { border: "1px solid " + UI.line, borderRadius: 2, p: 2, display: "flex", alignItems: "center", gap: 1.5, bgcolor: UI.panel }), "data-grok-id": "457-12", "data-grok-line": "457", "data-grok-end-line": "492" }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { onClick: () => setPreviewing(p), sx: mergeStyles("458-14", { flex: 1, minWidth: 0, cursor: "pointer" }), "data-grok-id": "458-14", "data-grok-line": "458", "data-grok-end-line": "467" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: mergeStyles("459-16", { mb: 0.5 }), "data-grok-id": "459-16", "data-grok-line": "459", "data-grok-end-line": "464" }, /* @__PURE__ */ import_react.default.createElement(StatusChip, { status: p.status || "draft", "data-grok-id": "460-18", sx: mergeStyles("460-18", {}), "data-grok-line": "460", "data-grok-end-line": "460" }), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("461-18", { fontSize: 11, color: UI.muted, fontFamily: FONT.body }), "data-grok-id": "461-18", "data-grok-line": "461", "data-grok-end-line": "463" }, p.created_at ? (0, import_moment.default)(p.created_at.toDate ? p.created_at.toDate() : p.created_at).format("MMM D, YYYY") : "")), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("465-16", { fontWeight: 600, color: UI.text, fontFamily: FONT.body }), noWrap: true, "data-grok-id": "465-16", "data-grok-line": "465", "data-grok-end-line": "465" }, p.title || "(untitled)"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: mergeStyles("466-16", { fontSize: 13, color: UI.muted, fontFamily: FONT.body }), noWrap: true, "data-grok-id": "466-16", "data-grok-line": "466", "data-grok-end-line": "466" }, p.excerpt || "")), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Read it", "data-grok-id": "468-14", sx: mergeStyles("468-14", {}), "data-grok-line": "468", "data-grok-end-line": "470" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { onClick: () => setPreviewing(p), sx: mergeStyles("469-16", { color: UI.accent }), "data-grok-id": "469-16", "data-grok-line": "469", "data-grok-end-line": "469" }, /* @__PURE__ */ import_react.default.createElement(import_Visibility.default, { fontSize: "small", "data-grok-id": "469-87", sx: mergeStyles("469-87", {}), "data-grok-line": "469", "data-grok-end-line": "469" }))), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Edit", "data-grok-id": "471-14", sx: mergeStyles("471-14", {}), "data-grok-line": "471", "data-grok-end-line": "473" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { onClick: () => { setEditing(p); setDialogOpen(true); }, sx: mergeStyles("472-16", { color: UI.muted }), "data-grok-id": "472-16", "data-grok-line": "472", "data-grok-end-line": "472" }, /* @__PURE__ */ import_react.default.createElement(import_Edit.default, { fontSize: "small", "data-grok-id": "472-109", sx: mergeStyles("472-109", {}), "data-grok-line": "472", "data-grok-end-line": "472" }))), (p.status || "draft") === "draft" ? /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Publish", "data-grok-id": "475-16", sx: mergeStyles("475-16", {}), "data-grok-line": "475", "data-grok-end-line": "479" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { onClick: async () => { const r = await setStatus(p.id, "published"); if (r.error) setSnack(r.error); else setSnack("Published."); }, "data-grok-id": "476-18", sx: mergeStyles("476-18", {}), "data-grok-line": "476", "data-grok-end-line": "478" }, /* @__PURE__ */ import_react.default.createElement(import_Publish.default, { fontSize: "small", sx: mergeStyles("477-20", { color: UI.success }), "data-grok-id": "477-20", "data-grok-line": "477", "data-grok-end-line": "477" }))) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Unpublish (back to draft)", "data-grok-id": "481-16", sx: mergeStyles("481-16", {}), "data-grok-line": "481", "data-grok-end-line": "485" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { onClick: async () => { const r = await setStatus(p.id, "draft"); if (r.error) setSnack(r.error); else setSnack("Moved back to draft."); }, sx: mergeStyles("482-18", { color: UI.muted }), "data-grok-id": "482-18", "data-grok-line": "482", "data-grok-end-line": "484" }, /* @__PURE__ */ import_react.default.createElement(import_UnpublishedOutlined.default, { fontSize: "small", "data-grok-id": "483-20", sx: mergeStyles("483-20", {}), "data-grok-line": "483", "data-grok-end-line": "483" }))), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Delete", "data-grok-id": "487-14", sx: mergeStyles("487-14", {}), "data-grok-line": "487", "data-grok-end-line": "491" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { onClick: () => setDeleting(p), sx: mergeStyles("488-16", { color: UI.danger }), "data-grok-id": "488-16", "data-grok-line": "488", "data-grok-end-line": "490" }, /* @__PURE__ */ import_react.default.createElement(import_DeleteOutline.default, { fontSize: "small", "data-grok-id": "489-18", sx: mergeStyles("489-18", {}), "data-grok-line": "489", "data-grok-end-line": "489" })))))), /* @__PURE__ */ import_react.default.createElement(PreviewDialog, { post: previewing, onClose: () => setPreviewing(null), onEdit: (p) => { setPreviewing(null); setEditing(p); setDialogOpen(true); }, onDelete: (p) => setDeleting(p), onToggleStatus: async (p) => { const next = (p.status || "draft") === "published" ? "draft" : "published"; const r = await setStatus(p.id, next); if (r.error) setSnack(r.error); else { setPreviewing(null); setSnack(next === "published" ? "Published." : "Moved back to draft."); } }, "data-grok-id": "497-6", sx: mergeStyles("497-6", {}), "data-grok-line": "497", "data-grok-end-line": "508" }), /* @__PURE__ */ import_react.default.createElement(ConfirmDeleteDialog, { post: deleting, onClose: () => setDeleting(null), onConfirm: handleConfirmDelete, busy: deleteBusy, "data-grok-id": "509-6", sx: mergeStyles("509-6", {}), "data-grok-line": "509", "data-grok-end-line": "509" }), /* @__PURE__ */ import_react.default.createElement(EditDialog, { open: dialogOpen, onClose: () => { setDialogOpen(false); setEditing(null); }, initial: editing, onSave: handleDialogSave, saving, "data-grok-id": "510-6", sx: mergeStyles("510-6", {}), "data-grok-line": "510", "data-grok-end-line": "510" }), /* @__PURE__ */ import_react.default.createElement(import_material.Snackbar, { open: !!snack, autoHideDuration: 4e3, onClose: () => setSnack(null), "data-grok-id": "511-6", sx: mergeStyles("511-6", {}), "data-grok-line": "511", "data-grok-end-line": "513" }, /* @__PURE__ */ import_react.default.createElement(import_material.Alert, { severity: "success", onClose: () => setSnack(null), "data-grok-id": "512-8", sx: mergeStyles("512-8", {}), "data-grok-line": "512", "data-grok-end-line": "512" }, snack))); }); var dynamic_component_default = HhcBlogAdmin;