@jant/core 0.3.35 → 0.3.37

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

@@ -4,7 +4,6 @@
 
 import { useLingui } from "@lingui/react/macro";
 import type { FontTheme } from "../../font-themes.js";
-import { AppearanceNav } from "./AppearanceNav.js";
 
 export function FontThemeContent({
   fontThemes,
@@ -16,80 +15,73 @@ export function FontThemeContent({
   const { t } = useLingui();
 
   return (
-    <>
-      <AppearanceNav currentTab="fonts" />
-
-      <div
-        data-signals={JSON.stringify({ fontTheme: currentFontThemeId }).replace(
-          /</g,
-          "\\u003c",
-        )}
-        data-on:change="@post('/dash/appearance/font-theme')"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Font theme",
-              comment: "@context: Appearance settings heading for font theme",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
-            {t({
-              message:
-                "Choose a font pairing for your site. All options use system fonts for fast loading.",
-              comment: "@context: Font theme settings description",
-            })}
-          </p>
-          <div class="flex flex-col gap-2">
-            {fontThemes.map((ft) => (
-              <label
-                key={ft.id}
-                class={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${ft.id === currentFontThemeId ? "border-primary" : "border-border"}`}
-                data-class:border-primary={`$fontTheme === '${ft.id}'`}
-                data-class:border-border={`$fontTheme !== '${ft.id}'`}
-              >
-                <input
-                  type="radio"
-                  name="fontTheme"
-                  value={ft.id}
-                  data-bind="fontTheme"
-                  checked={ft.id === currentFontThemeId || undefined}
-                  class="mt-1"
-                />
-                <div>
-                  <div class="font-medium">{t(ft.name)}</div>
-                  <div class="text-sm text-muted-foreground">
-                    {t(ft.description)}
+    <div
+      data-signals={JSON.stringify({ fontTheme: currentFontThemeId }).replace(
+        /</g,
+        "\\u003c",
+      )}
+      data-on:change="@post('/settings/font-theme')"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Font theme",
+            comment: "@context: Appearance settings heading for font theme",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "Choose a font pairing for your site. All options use system fonts for fast loading.",
+            comment: "@context: Font theme settings description",
+          })}
+        </p>
+        <div class="flex flex-col gap-2">
+          {fontThemes.map((ft) => (
+            <label
+              key={ft.id}
+              class={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${ft.id === currentFontThemeId ? "border-primary" : "border-border"}`}
+              data-class:border-primary={`$fontTheme === '${ft.id}'`}
+              data-class:border-border={`$fontTheme !== '${ft.id}'`}
+            >
+              <input
+                type="radio"
+                name="fontTheme"
+                value={ft.id}
+                data-bind="fontTheme"
+                checked={ft.id === currentFontThemeId || undefined}
+                class="mt-1"
+              />
+              <div>
+                <div class="font-medium">{t(ft.name)}</div>
+                <div class="text-sm text-muted-foreground">
+                  {t(ft.description)}
+                </div>
+                <div class="mt-1 text-sm leading-relaxed">
+                  <div
+                    class="font-semibold"
+                    style={`font-family:${ft.headingFontFamily}`}
+                  >
+                    {t({
+                      message: "The quick brown fox jumps over the lazy dog.",
+                      comment:
+                        "@context: Font theme preview sentence for headings",
+                    })}
                   </div>
-                  <div class="mt-1 text-sm leading-relaxed">
-                    <div
-                      class="font-semibold"
-                      style={`font-family:${ft.headingFontFamily}`}
-                    >
-                      {t({
-                        message: "The quick brown fox jumps over the lazy dog.",
-                        comment:
-                          "@context: Font theme preview sentence for headings",
-                      })}
-                    </div>
-                    <div
-                      class="mt-2"
-                      style={`font-family:${ft.bodyFontFamily}`}
-                    >
-                      {t({
-                        message: "The quick brown fox jumps over the lazy dog.",
-                        comment:
-                          "@context: Font theme preview sentence for body text",
-                      })}
-                    </div>
+                  <div class="mt-2" style={`font-family:${ft.bodyFontFamily}`}>
+                    {t({
+                      message: "The quick brown fox jumps over the lazy dog.",
+                      comment:
+                        "@context: Font theme preview sentence for body text",
+                    })}
                   </div>
                 </div>
-              </label>
-            ))}
-          </div>
-        </fieldset>
-      </div>
-    </>
+              </div>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    </div>
   );
 }

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

@@ -3,21 +3,19 @@
  */
 
 import { useLingui } from "@lingui/react/macro";
-import type { NavItem, Page, SystemNavKey } from "../../../types.js";
+import type { NavItem, 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";
-
+} from "../../../client/components/nav-manager-types.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",
+  settings: "Shows 'Settings' when logged in, 'Sign in' when logged out",
   collections: "Link to your collections page",
   archive: "Link to the post archive",
 };
@@ -28,13 +26,11 @@ const SYSTEM_DESCRIPTIONS: Record<SystemNavKey, string> = {
 
 export function NavigationContent({
   navItems,
-  availablePages,
   headerNavMaxVisible,
   homeDefaultView,
   siteName,
 }: {
   navItems: NavItem[];
-  availablePages: Page[];
   headerNavMaxVisible: number;
   homeDefaultView: string;
   siteName: string;
@@ -47,7 +43,6 @@ export function NavigationContent({
     type: item.type,
     label: item.label,
     url: item.url,
-    pageId: item.pageId,
   }));
 
   // Build system nav config array for the Lit component
@@ -60,16 +55,9 @@ export function NavigationContent({
     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",
+      message: "Navigation Preview",
       comment: "@context: Label for nav preview section",
     }),
     navigationItems: t({
@@ -78,10 +66,9 @@ export function NavigationContent({
     }),
     emptyState: t({
       message:
-        "No navigation items yet. Add pages, links, or enable system items below.",
+        "No navigation items yet. Add 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",
@@ -104,13 +91,9 @@ export function NavigationContent({
       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",
+      comment: "@context: Remove system item from navigation",
     }),
     orderSaved: t({
       message: "Order saved",
@@ -121,11 +104,11 @@ export function NavigationContent({
       comment: "@context: Error toast when nav label is empty",
     }),
     saveFailed: t({
-      message: "Failed to save. Please try again.",
+      message: "Couldn't save. Try again in a moment.",
       comment: "@context: Error toast when nav save fails",
     }),
     deleteFailed: t({
-      message: "Failed to delete. Please try again.",
+      message: "Couldn't delete. Try again in a moment.",
       comment: "@context: Error toast when nav delete fails",
     }),
     systemLinks: t({
@@ -134,29 +117,13 @@ export function NavigationContent({
     }),
     systemLinksDescription: t({
       message:
-        "Toggle built-in navigation items. Enabled items appear in your navigation alongside pages and links.",
+        "Toggle built-in navigation items. Enabled items appear in your navigation alongside 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",
@@ -165,24 +132,30 @@ export function NavigationContent({
       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",
+      message: "Links shown in header",
       comment: "@context: Label for max visible nav links number input",
     }),
+    maxVisibleLinksDescription: t({
+      message: "The rest will be tucked into a ··· menu",
+      comment:
+        "@context: Description for max visible nav links, explains overflow behavior",
+    }),
     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",
+      message: "Open with Featured posts",
       comment:
         "@context: Switch label for setting featured posts as default homepage",
     }),
+    useFeaturedAsDefaultDescription: t({
+      message: "When off, visitors see your latest posts first",
+      comment:
+        "@context: Description for featured default toggle, explains what happens when off",
+    }),
     homeViewSaved: t({
       message: "Home view saved",
       comment: "@context: Toast after saving home default view setting",
@@ -205,98 +178,96 @@ export function NavigationContent({
     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">
+    <div class="max-w-3xl flex flex-col gap-8">
+      <jant-nav-manager
+        items={escapeJson(itemsData)}
+        labels={escapeJson(labels)}
+        system-nav-items={escapeJson(systemNavData)}
+        site-name={siteName}
+        max-visible={headerNavMaxVisible}
+        home-default-view={homeDefaultView}
+      >
+        {/* SSR fallback: static preview until JS hydrates */}
+        <div class="nav-preview">
+          <div class="nav-preview-chrome">
+            <div class="nav-preview-dots">
+              <span />
+              <span />
+              <span />
+            </div>
+            <span class="nav-preview-label">
               {t({
-                message: "Preview",
+                message: "Navigation 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>
+          </div>
+          <div class="nav-preview-content">
+            <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>
-              </nav>
+              </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>
-        </jant-nav-manager>
-      </div>
-    </>
+        </div>
+      </jant-nav-manager>
+    </div>
   );
 }

package/src/ui/dash/index.ts

@@ -4,7 +4,4 @@ export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
 export { EmptyState, type EmptyStateProps } from "../shared/EmptyState.js";
 export { FormatBadge, type FormatBadgeProps } from "./FormatBadge.js";
 export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
-export { PageForm, type PageFormProps } from "./PageForm.js";
-export { PostForm, type PostFormProps } from "./posts/PostForm.js";
-export { PostList, type PostListProps } from "./PostList.js";
 export { StatusBadge, type StatusBadgeProps } from "./StatusBadge.js";