@jant/core 0.3.32 → 0.3.34

package/src/ui/components/jant-settings-general.ts

@@ -35,7 +35,6 @@ export class JantSettingsGeneral extends LitElement {
     _siteDescription: { state: true },
     _siteFooter: { state: true },
     _siteLanguage: { state: true },
-    _homeDefaultView: { state: true },
     _timeZone: { state: true },
     _origGeneral: { state: true },
     _generalDirty: { state: true },
@@ -59,7 +58,6 @@ export class JantSettingsGeneral extends LitElement {
   declare _siteDescription: string;
   declare _siteFooter: string;
   declare _siteLanguage: string;
-  declare _homeDefaultView: string;
   declare _timeZone: string;
   declare _origGeneral: Record<string, string>;
   declare _generalDirty: boolean;
@@ -88,7 +86,6 @@ export class JantSettingsGeneral extends LitElement {
     this._siteDescription = "";
     this._siteFooter = "";
     this._siteLanguage = "en";
-    this._homeDefaultView = "latest";
     this._timeZone = "UTC";
     this._origGeneral = {};
     this._generalDirty = false;
@@ -105,7 +102,6 @@ export class JantSettingsGeneral extends LitElement {
     siteName: string;
     siteDescription: string;
     siteLanguage: string;
-    homeDefaultView: string;
     timeZone: string;
     siteFooter: string;
     noindex: boolean;
@@ -114,14 +110,12 @@ export class JantSettingsGeneral extends LitElement {
     this._siteDescription = data.siteDescription;
     this._siteFooter = data.siteFooter;
     this._siteLanguage = data.siteLanguage;
-    this._homeDefaultView = data.homeDefaultView;
     this._timeZone = data.timeZone;
     this._origGeneral = {
       siteName: data.siteName,
       siteDescription: data.siteDescription,
       siteFooter: data.siteFooter,
       siteLanguage: data.siteLanguage,
-      homeDefaultView: data.homeDefaultView,
       timeZone: data.timeZone,
     };
 
@@ -137,7 +131,6 @@ export class JantSettingsGeneral extends LitElement {
         siteDescription: this._siteDescription,
         siteFooter: this._siteFooter,
         siteLanguage: this._siteLanguage,
-        homeDefaultView: this._homeDefaultView,
         timeZone: this._timeZone,
       };
       this._generalDirty = false;
@@ -166,7 +159,6 @@ export class JantSettingsGeneral extends LitElement {
     this._siteDescription = this._origGeneral.siteDescription ?? "";
     this._siteFooter = this._origGeneral.siteFooter ?? "";
     this._siteLanguage = this._origGeneral.siteLanguage ?? "en";
-    this._homeDefaultView = this._origGeneral.homeDefaultView ?? "latest";
     this._timeZone = this._origGeneral.timeZone ?? "UTC";
     this._generalDirty = false;
   }
@@ -184,7 +176,6 @@ export class JantSettingsGeneral extends LitElement {
             siteDescription: this._siteDescription,
             siteFooter: this._siteFooter,
             siteLanguage: this._siteLanguage,
-            homeDefaultView: this._homeDefaultView,
             timeZone: this._timeZone,
           },
           section: "general",
@@ -288,9 +279,9 @@ export class JantSettingsGeneral extends LitElement {
             <label class="label">${this.labels.aboutBlog}</label>
             <textarea
               class="textarea"
-              rows="3"
+              rows="2"
               .value=${this._siteDescription}
-              placeholder=${this.labels.markdownSupported}
+              placeholder=${this.siteDescriptionFallback}
               @input=${(e: Event) => {
                 this._siteDescription = (e.target as HTMLTextAreaElement).value;
                 this._markGeneralDirty();
@@ -340,30 +331,6 @@ export class JantSettingsGeneral extends LitElement {
             </select>
           </div>
 
-          <div class="field">
-            <label class="label">${this.labels.defaultHomepageView}</label>
-            <select
-              class="select"
-              @change=${(e: Event) => {
-                this._homeDefaultView = (e.target as HTMLSelectElement).value;
-                this._markGeneralDirty();
-              }}
-            >
-              <option
-                value="latest"
-                ?selected=${this._homeDefaultView === "latest"}
-              >
-                ${this.labels.latest}
-              </option>
-              <option
-                value="featured"
-                ?selected=${this._homeDefaultView === "featured"}
-              >
-                ${this.labels.featured}
-              </option>
-            </select>
-          </div>
-
           <div class="field">
             <label class="label">${this.labels.timeZone}</label>
             <select

package/src/ui/components/nav-manager-types.ts

@@ -0,0 +1,72 @@
+/**
+ * Shared type definitions for the nav manager Lit component.
+ */
+
+export interface NavManagerItem {
+  id: number;
+  type: "page" | "link" | "system";
+  label: string;
+  url: string;
+  pageId: number | null;
+}
+
+export interface SystemNavConfig {
+  key: string;
+  defaultLabel: string;
+  url: string;
+  description: string;
+}
+
+export interface AvailablePage {
+  id: number;
+  title: string;
+  slug: string;
+}
+
+export interface NavManagerLabels {
+  preview: string;
+  navigationItems: string;
+  emptyState: string;
+  page: string;
+  link: string;
+  system: string;
+  toggleEdit: string;
+  label: string;
+  url: string;
+  save: string;
+  delete: string;
+  editPage: string;
+  remove: string;
+  orderSaved: string;
+  labelRequired: string;
+  saveFailed: string;
+  deleteFailed: string;
+  systemLinks: string;
+  systemLinksDescription: string;
+  addPageToNavigation: string;
+  addCustomLinkToNavigation: string;
+  choosePage: string;
+  searchPages: string;
+  noPagesFound: string;
+  addLink: string;
+  addLinkDescription: string;
+  allPagesInNav: string;
+  urlPlaceholder: string;
+  labelAndUrlRequired: string;
+  maxVisibleLinks: string;
+  maxVisibleSaved: string;
+  useFeaturedAsDefault: string;
+  homeViewSaved: string;
+  latest: string;
+  featured: string;
+}
+
+export interface NavManagerUpdateDetail {
+  id: number;
+  label: string;
+  url?: string;
+}
+
+export interface NavManagerDeleteDetail {
+  id: number;
+}

package/src/ui/components/settings-types.ts

@@ -23,9 +23,6 @@ export interface SettingsLabels {
   footerHelp: string;
   markdownSupported: string;
   language: string;
-  defaultHomepageView: string;
-  latest: string;
-  featured: string;
   timeZone: string;
 
   // SEO

package/src/ui/compose/ComposePrompt.tsx

@@ -30,7 +30,9 @@ export const ComposePrompt: FC = () => {
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 1 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+            <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z" />
+            <line x1="16" y1="8" x2="2" y2="22" />
+            <line x1="17.5" y1="15" x2="9" y2="15" />
           </svg>
         </span>
         <span class="compose-prompt-text">
@@ -40,16 +42,6 @@ export const ComposePrompt: FC = () => {
           })}
         </span>
       </button>
-      <button
-        type="button"
-        class="compose-prompt-post-btn"
-        onclick="const d=document.getElementById('compose-dialog');d.showModal();d.querySelector('jant-compose-editor')?.focusInput()"
-      >
-        {t({
-          message: "Post",
-          comment: "@context: Compose prompt post button",
-        })}
-      </button>
     </div>
   );
 };

package/src/ui/dash/appearance/AdvancedContent.tsx

@@ -12,9 +12,6 @@ export function AdvancedContent({ customCSS }: { customCSS: string }) {
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Appearance", comment: "@context: Dashboard heading" })}
-      </h1>
       <AppearanceNav currentTab="advanced" />
 
       <form

package/src/ui/dash/appearance/AppearanceNav.tsx

@@ -4,19 +4,27 @@
 
 import { useLingui } from "@lingui/react/macro";
 
-export type AppearanceTab = "color" | "fonts" | "advanced";
+export type AppearanceTab = "navigation" | "color" | "fonts" | "advanced";
 
 export function AppearanceNav({ currentTab }: { currentTab: AppearanceTab }) {
   const { t } = useLingui();
 
   const tabs: { id: AppearanceTab; label: string; href: string }[] = [
+    {
+      id: "navigation",
+      label: t({
+        message: "Navigation",
+        comment: "@context: Appearance sub-navigation tab",
+      }),
+      href: "/dash/appearance",
+    },
     {
       id: "color",
       label: t({
         message: "Color Theme",
         comment: "@context: Appearance sub-navigation tab",
       }),
-      href: "/dash/appearance",
+      href: "/dash/appearance/color",
     },
     {
       id: "fonts",
@@ -37,16 +45,12 @@ export function AppearanceNav({ currentTab }: { currentTab: AppearanceTab }) {
   ];
 
   return (
-    <nav class="flex gap-1 mb-6">
+    <nav class="dash-subnav">
       {tabs.map((tab) => (
         <a
           key={tab.id}
           href={tab.href}
-          class={`px-3 py-2 text-sm rounded-md ${
-            tab.id === currentTab
-              ? "bg-accent text-accent-foreground font-medium"
-              : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-          }`}
+          class={tab.id === currentTab ? "active" : ""}
         >
           {tab.label}
         </a>

package/src/ui/dash/appearance/ColorThemeContent.tsx

@@ -88,14 +88,11 @@ export function ColorThemeContent({
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Appearance", comment: "@context: Dashboard heading" })}
-      </h1>
       <AppearanceNav currentTab="color" />
 
       <div
         data-signals={themeSignals}
-        data-on:change="@post('/dash/appearance')"
+        data-on:change="@post('/dash/appearance/color')"
         class="max-w-3xl"
       >
         <fieldset>

package/src/ui/dash/appearance/FontThemeContent.tsx

@@ -17,9 +17,6 @@ export function FontThemeContent({
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-2">
-        {t({ message: "Appearance", comment: "@context: Dashboard heading" })}
-      </h1>
       <AppearanceNav currentTab="fonts" />
 
       <div

package/src/ui/dash/appearance/NavigationContent.tsx

@@ -0,0 +1,302 @@
+/**
+ * Navigation management: Lit-powered reorderable nav items, add area, system toggles
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { NavItem, Page, SystemNavKey } from "../../../types.js";
+import { SYSTEM_NAV_KEYS } from "../../../types.js";
+import type {
+  NavManagerLabels,
+  SystemNavConfig,
+} from "../../components/nav-manager-types.js";
+import { AppearanceNav } from "./AppearanceNav.js";
+
+// =============================================================================
+// System descriptions (used to build the config passed to the Lit component)
+// =============================================================================
+
+const SYSTEM_DESCRIPTIONS: Record<SystemNavKey, string> = {
+  rss: "Add a link to your RSS feed",
+  dashboard: "Shows 'Dashboard' when logged in, 'Sign in' when logged out",
+  collections: "Link to your collections page",
+  archive: "Link to the post archive",
+};
+
+// =============================================================================
+// Main component
+// =============================================================================
+
+export function NavigationContent({
+  navItems,
+  availablePages,
+  headerNavMaxVisible,
+  homeDefaultView,
+  siteName,
+}: {
+  navItems: NavItem[];
+  availablePages: Page[];
+  headerNavMaxVisible: number;
+  homeDefaultView: string;
+  siteName: string;
+}) {
+  const { t } = useLingui();
+
+  // Serialize nav items for the Lit component
+  const itemsData = navItems.map((item) => ({
+    id: item.id,
+    type: item.type,
+    label: item.label,
+    url: item.url,
+    pageId: item.pageId,
+  }));
+
+  // Build system nav config array for the Lit component
+  const systemNavData: SystemNavConfig[] = (
+    Object.keys(SYSTEM_NAV_KEYS) as SystemNavKey[]
+  ).map((key) => ({
+    key,
+    defaultLabel: SYSTEM_NAV_KEYS[key].defaultLabel,
+    url: SYSTEM_NAV_KEYS[key].url,
+    description: SYSTEM_DESCRIPTIONS[key],
+  }));
+
+  // Serialize available pages for the Lit component
+  const pagesData = availablePages.map((page) => ({
+    id: page.id,
+    title: page.title,
+    slug: page.slug,
+  }));
+
+  const labels: NavManagerLabels = {
+    preview: t({
+      message: "Preview",
+      comment: "@context: Label for nav preview section",
+    }),
+    navigationItems: t({
+      message: "Navigation items",
+      comment: "@context: Section heading for nav items",
+    }),
+    emptyState: t({
+      message:
+        "No navigation items yet. Add pages, links, or enable system items below.",
+      comment: "@context: Empty state for navigation items",
+    }),
+    page: t({ message: "page", comment: "@context: Nav item type badge" }),
+    link: t({ message: "link", comment: "@context: Nav item type badge" }),
+    system: t({
+      message: "system",
+      comment: "@context: Nav item type badge",
+    }),
+    toggleEdit: t({
+      message: "Toggle edit panel",
+      comment: "@context: Button to expand/collapse nav item edit",
+    }),
+    label: t({
+      message: "Label",
+      comment: "@context: Nav item label field",
+    }),
+    url: t({ message: "URL", comment: "@context: Nav item URL field" }),
+    save: t({
+      message: "Save",
+      comment: "@context: Save nav item changes",
+    }),
+    delete: t({
+      message: "Delete",
+      comment: "@context: Delete nav item",
+    }),
+    editPage: t({
+      message: "Edit Page",
+      comment: "@context: Link to edit the page",
+    }),
+    remove: t({
+      message: "Remove",
+      comment: "@context: Remove page from navigation",
+    }),
+    orderSaved: t({
+      message: "Order saved",
+      comment: "@context: Toast after saving navigation item order",
+    }),
+    labelRequired: t({
+      message: "Label is required",
+      comment: "@context: Error toast when nav label is empty",
+    }),
+    saveFailed: t({
+      message: "Failed to save. Please try again.",
+      comment: "@context: Error toast when nav save fails",
+    }),
+    deleteFailed: t({
+      message: "Failed to delete. Please try again.",
+      comment: "@context: Error toast when nav delete fails",
+    }),
+    systemLinks: t({
+      message: "System links",
+      comment: "@context: Section heading for system nav items",
+    }),
+    systemLinksDescription: t({
+      message:
+        "Toggle built-in navigation items. Enabled items appear in your navigation alongside pages and links.",
+      comment: "@context: Description for system nav toggles",
+    }),
+    addPageToNavigation: t({
+      message: "Add page to navigation",
+      comment: "@context: Section heading for adding page to nav",
+    }),
+    addCustomLinkToNavigation: t({
+      message: "Add custom link to navigation",
+      comment: "@context: Section heading for adding custom link to nav",
+    }),
+    choosePage: t({
+      message: "Choose a page…",
+      comment: "@context: Placeholder for page select combobox trigger",
+    }),
+    searchPages: t({
+      message: "Search pages…",
+      comment: "@context: Placeholder for page search input in combobox",
+    }),
+    noPagesFound: t({
+      message: "No pages found.",
+      comment: "@context: Empty state when page search has no results",
+    }),
+    addLink: t({
+      message: "Add Link",
+      comment: "@context: Button and heading for adding custom link",
+    }),
+    addLinkDescription: t({
+      message: "Add a custom link to any URL",
+      comment: "@context: Description in link popover form",
+    }),
+    allPagesInNav: t({
+      message: "All pages are already in navigation.",
+      comment: "@context: Message when no pages available to add",
+    }),
+    urlPlaceholder: "/archive or https://...",
+    maxVisibleLinks: t({
+      message: "Max visible links",
+      comment: "@context: Label for max visible nav links number input",
+    }),
+    maxVisibleSaved: t({
+      message: "Max visible links saved",
+      comment: "@context: Toast after saving max visible nav links setting",
+    }),
+    useFeaturedAsDefault: t({
+      message: "Use Featured as default home view",
+      comment:
+        "@context: Switch label for setting featured posts as default homepage",
+    }),
+    homeViewSaved: t({
+      message: "Home view saved",
+      comment: "@context: Toast after saving home default view setting",
+    }),
+    latest: t({
+      message: "Latest",
+      comment: "@context: Browse filter label for latest posts",
+    }),
+    featured: t({
+      message: "Featured",
+      comment: "@context: Browse filter label for featured posts",
+    }),
+    labelAndUrlRequired: t({
+      message: "Label and URL are required",
+      comment: "@context: Error toast when nav link fields are empty",
+    }),
+  };
+
+  const escapeJson = (data: unknown) =>
+    JSON.stringify(data).replace(/</g, "\\u003c");
+
+  return (
+    <>
+      <AppearanceNav currentTab="navigation" />
+
+      <div class="max-w-3xl flex flex-col gap-8">
+        <jant-nav-manager
+          items={escapeJson(itemsData)}
+          labels={escapeJson(labels)}
+          system-nav-items={escapeJson(systemNavData)}
+          available-pages={escapeJson(pagesData)}
+          site-name={siteName}
+          max-visible={headerNavMaxVisible}
+          home-default-view={homeDefaultView}
+        >
+          {/* SSR fallback: static preview until JS hydrates */}
+          <div class="border rounded-lg">
+            <p class="text-xs text-muted-foreground px-4 pt-3">
+              {t({
+                message: "Preview",
+                comment: "@context: Label for nav preview section",
+              })}
+            </p>
+            <div class="px-5 py-3">
+              <div class="site-header-top">
+                <a href="/" class="site-logo">
+                  {siteName}
+                </a>
+                <div class="site-header-right">
+                  {navItems.length > 0 && (
+                    <nav class="site-header-nav">
+                      {navItems.slice(0, headerNavMaxVisible).map((item) => (
+                        <a
+                          key={item.id}
+                          href={item.url}
+                          class="site-header-link"
+                        >
+                          {item.label}
+                        </a>
+                      ))}
+                      {navItems.length > headerNavMaxVisible && (
+                        <span class="text-muted-foreground">…</span>
+                      )}
+                    </nav>
+                  )}
+                  <span class="site-header-search" aria-hidden="true">
+                    <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"
+                    >
+                      <circle cx="11" cy="11" r="8" />
+                      <path d="m21 21-4.35-4.35" />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+              <nav class="site-browse-nav">
+                <span class="site-browse-link site-browse-link-active">
+                  {homeDefaultView === "featured"
+                    ? t({
+                        message: "Featured",
+                        comment: "@context: Browse filter label",
+                      })
+                    : t({
+                        message: "Latest",
+                        comment: "@context: Browse filter label",
+                      })}
+                </span>
+                <span class="site-browse-sep" aria-hidden="true">
+                  /
+                </span>
+                <span class="site-browse-link">
+                  {homeDefaultView === "featured"
+                    ? t({
+                        message: "Latest",
+                        comment: "@context: Browse filter label",
+                      })
+                    : t({
+                        message: "Featured",
+                        comment: "@context: Browse filter label",
+                      })}
+                </span>
+              </nav>
+            </div>
+          </div>
+        </jant-nav-manager>
+      </div>
+    </>
+  );
+}

package/src/ui/dash/pages/PagesContent.tsx

@@ -0,0 +1,74 @@
+/**
+ * Pages list — page CRUD only
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Page } from "../../../types.js";
+import { ListItemRow, ActionButtons, CrudPageHeader } from "../index.js";
+
+export function PagesContent({ pages }: { pages: Page[] }) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({
+          message: "Pages",
+          comment: "@context: Pages main heading",
+        })}
+      >
+        <a href="/dash/pages/new" class="btn">
+          {t({
+            message: "New Page",
+            comment: "@context: Button to create new page",
+          })}
+        </a>
+      </CrudPageHeader>
+
+      {pages.length === 0 ? (
+        <p class="text-sm text-muted-foreground py-4">
+          {t({
+            message: "No pages yet. Create your first page to get started.",
+            comment: "@context: Empty state for pages list",
+          })}
+        </p>
+      ) : (
+        <div class="flex flex-col divide-y">
+          {pages.map((page) => (
+            <ListItemRow
+              key={page.id}
+              actions={
+                <ActionButtons
+                  editHref={`/dash/pages/${page.id}/edit`}
+                  editLabel={t({
+                    message: "Edit",
+                    comment: "@context: Button to edit page",
+                  })}
+                  viewHref={
+                    page.status !== "draft" ? `/${page.slug}` : undefined
+                  }
+                  viewLabel={t({
+                    message: "View",
+                    comment: "@context: Button to view page on public site",
+                  })}
+                />
+              }
+            >
+              <a
+                href={`/dash/pages/${page.id}`}
+                class="font-medium hover:underline"
+              >
+                {page.title ||
+                  t({
+                    message: "Untitled",
+                    comment: "@context: Default title for untitled page",
+                  })}
+              </a>
+              <p class="text-sm text-muted-foreground mt-1">/{page.slug}</p>
+            </ListItemRow>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}